<commit_before>"use strict";

var App = App || {};

function PixelGlyph(options) {
  let self = {
    chartMargins: {
      top: 10,
      bottom: 10,
      left: 50,
      right: 50
    },
    colors: {
      outline: "black"
    },
    nameMapping: {

    },
    quadrants: {},
    graph: null
  };

  function init(targetDiv) {
    let svg = targetDiv.select(".panel-body").append("svg");
    self.graph = svg.append('g').classed('graph-group', true);

    // overall glyph size
    let size = $(svg.node()).width() - self.chartMargins.left - self.chartMargins.right;
    svg.style("height", size + self.chartMargins.top + self.chartMargins.bottom);

    self.graph.content = self.graph.append("g").classed("graph-content", true);

    self.graph.background = self.graph.append("rect")
      .attr("x", self.chartMargins.left)
      .attr("y", self.chartMargins.top)
      .attr("width", size).attr("height", size)
      .classed('graph-background', true)
      .attr('stroke', self.colors.outline).attr("stroke-width", "1px");

    self.graph.layout = self.graph.append('g').classed('graph-layout', true);

    self.size = size;

    initializeQuadrants();
    initializeLayout();
  }

  function initializeQuadrants() {
    const quadrants = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];

    // quadrant data includes: color, maxValue, name
    quadrants.forEach((q,i) => { 
      self.quadrants[q] = options.quadrants[q];

      self.nameMapping[self.quadrants[q].name] = q;

      self.quadrants[q].rectangle = self.graph.content.append('rect')
        .attr('width', self.size / 2).attr('height', self.size / 2)
        .attr('x', self.chartMargins.left + ((i % 2 == 0) ? 0 : (self.size / 2)))
        .attr('y', self.chartMargins.top + ((i < 2) ? 0 : (self.size / 2)))
        .style('fill', self.quadrants[q].color).attr('id', q)
        .attr('stroke', 'none');

      self.quadrants[q].scale = d3.scaleLinear().domain([0, self.quadrants[q].maxValue]).range([0,1]);
    });
  }

  function getQuadrant(name) {
    return self.nameMapping[name];
  }

  function getQuadrantName(quadrant) {
    return self.quadrants[quadrant].name;
  }

  function initializeLayout() {
    let line = d3.line()
      .x(d => d[0]).y(d => d[1]);
      
    let verticalAxis = [
      [self.chartMargins.left + self.size / 2, self.chartMargins.top],
      [self.chartMargins.left + self.size / 2, self.chartMargins.top + self.size]
    ];

    let horizontalAxis = [
      [self.chartMargins.left, self.chartMargins.top + self.size / 2],
      [self.chartMargins.left + self.size, self.chartMargins.top + self.size / 2],
    ];
    self.graph.layout.append('path').datum(verticalAxis).attr("d", line)
      .attr('stroke', self.colors.outline).attr("stroke-width", "3px");
    self.graph.layout.append('path').datum(horizontalAxis).attr("d", line)
      .attr('stroke', self.colors.outline).attr("stroke-width", "3px");

    drawLabels(true);
  }
<commit_msg>Moved text outline borders to border of quadrant<commit_after>"use strict";

var App = App || {};

function PixelGlyph(options) {
  let self = {
    chartMargins: {
      top: 10,
      bottom: 10,
      left: 50,
      right: 50
    },
    colors: {
      outline: "black"
    },
    nameMapping: {

    },
    quadrants: {},
    graph: null
  };

  function init(targetDiv) {
    let svg = targetDiv.select(".panel-body").append("svg");
    self.graph = svg.append('g').classed('graph-group', true);

    // overall glyph size
    let size = $(svg.node()).width() - self.chartMargins.left - self.chartMargins.right;
    svg.style("height", size + self.chartMargins.top + self.chartMargins.bottom);

    self.graph.content = self.graph.append("g").classed("graph-content", true);

    self.graph.background = self.graph.append("rect")
      .attr("x", self.chartMargins.left)
      .attr("y", self.chartMargins.top)
      .attr("width", size).attr("height", size)
      .classed('graph-background', true)
      .attr('stroke', self.colors.outline).attr("stroke-width", "1px");

    self.graph.layout = self.graph.append('g').classed('graph-layout', true);

    self.size = size;

    initializeQuadrants();
    initializeLayout();
  }

  function initializeQuadrants() {
    const quadrants = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
    const padding = 6.5;

    // quadrant data includes: color, maxValue, name
    quadrants.forEach((q,i) => { 
      self.quadrants[q] = options.quadrants[q];

      self.nameMapping[self.quadrants[q].name] = q;

      self.quadrants[q].rectangle = self.graph.content.append('rect')
        .attr('width', self.size / 2).attr('height', self.size / 2)
        .attr('x', self.chartMargins.left + ((i % 2 == 0) ? 0 : (self.size / 2)))
        .attr('y', self.chartMargins.top + ((i < 2) ? 0 : (self.size / 2)))
        .style('fill', self.quadrants[q].color).attr('id', q)
        .attr('stroke', 'none');

      self.graph.content.append('rect')
        .attr('width', +self.quadrants[q].rectangle.attr("width") - padding)
        .attr('height', +self.quadrants[q].rectangle.attr("height") - padding)
        .attr('x', +self.quadrants[q].rectangle.attr("x") + padding/2)
        .attr('y', +self.quadrants[q].rectangle.attr("y") + padding/2)
        .style('fill', 'none').style('stroke', self.quadrants[q].color)
        .style('stroke-width', padding);

      self.quadrants[q].scale = d3.scaleLinear().domain([0, self.quadrants[q].maxValue]).range([0,1]);
    });
    
  }

  function getQuadrant(name) {
    return self.nameMapping[name];
  }

  function getQuadrantName(quadrant) {
    return self.quadrants[quadrant].name;
  }

  function initializeLayout() {
    let line = d3.line()
      .x(d => d[0]).y(d => d[1]);
      
    let verticalAxis = [
      [self.chartMargins.left + self.size / 2, self.chartMargins.top],
      [self.chartMargins.left + self.size / 2, self.chartMargins.top + self.size]
    ];

    let horizontalAxis = [
      [self.chartMargins.left, self.chartMargins.top + self.size / 2],
      [self.chartMargins.left + self.size, self.chartMargins.top + self.size / 2],
    ];
    self.graph.layout.append('path').datum(verticalAxis).attr("d", line)
      .attr('stroke', self.colors.outline).attr("stroke-width", "3px");
    self.graph.layout.append('path').datum(horizontalAxis).attr("d", line)
      .attr('stroke', self.colors.outline).attr("stroke-width", "3px");

    drawLabels(false);
  }

{'fraction_non_alphanumeric': 0.18862647607209446, 'fraction_numerical': 0.010254816656308266, 'mean_word_length': 2.9931761786600495, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6698938', 'n_tokens_mistral': 2292, 'n_tokens_neox': 2147, 'n_words': 362}