<commit_before>const buildArray = require('build-array');
const Chart = require('chart.js');
const React = require('react');

module.exports = React.createClass({
  ref: function(name) {
    this._refs = this._refs || {};

    return (el) => {
      this._refs[name] = el;
    };
  },
  fromData: function(data) {
    return (data || []).map((d) => {
      return d.cpu;
    });
  },
  componentDidMount: function() {
    const {
      data = [],
      bg,
      border
    } = this.props;

    const bars = this.fromData(data);

    this._chart = new Chart(this._refs.component, {
      type: 'bar',
      options: {
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }]
        },
        legend: {
          display: false
        }
      },
      data: {
        labels: buildArray(bars.length).map((v, i) => ''),
        datasets: [{
          borderWidth: 1,
          borderColor: border,
          backgroundColor: bg,
          data: bars
        }]
      }
    });
  },
  componentWillReceiveProps: function(nextProps) {
    const {
      data = [],
      bg,
      border
    } = this.props;

    const bars = this.fromData(data);<commit_msg>wip chart rectangle draw patch<commit_after>const buildArray = require('build-array');
const Chart = require('chart.js');
const React = require('react');

// borderSkipped
// patch `.draw` to support `borderSkipped`:
// Chart.elements.Rectangle.prototype.draw = function() {
//   var ctx = this._chart.ctx;
//   var vm = this._view;
// 
//   var halfWidth = vm.width / 2,
//     leftX = vm.x - halfWidth,
//     rightX = vm.x + halfWidth,
//     top = vm.base - (vm.base - vm.y),
//     halfStroke = vm.borderWidth / 2;
// 
//   // Canvas doesn't allow us to stroke inside the width so we can
//   // adjust the sizes to fit if we're setting a stroke on the line
//   if (vm.borderWidth) {
//     leftX += halfStroke;
//     rightX -= halfStroke;
//     top += halfStroke;
//   }
// 
//   ctx.beginPath();
//   ctx.fillStyle = vm.backgroundColor;
//   ctx.strokeStyle = vm.borderColor;
//   ctx.lineWidth = vm.borderWidth;
// 
//   var borderSkipped = !Array.isArray(vm.borderSkipped)
//     ? [vm.borderSkipped]
//     : vm.borderSkipped;
// 
//   // Corner points, from bottom-left to bottom-right clockwise
//   // | 1 2 |
//   // | 0 3 |
//   var corners = [
//     [leftX, vm.base, (borderSkipped.indexOf('bottom') >= 0), 'bottom'],
//     [leftX, top, (borderSkipped.indexOf('left') >= 0), 'left'],
//     [rightX, top, (borderSkipped.indexOf('top') >= 0), 'top'],
//     [rightX, vm.base, (borderSkipped.indexOf('right') >= 0), 'right']
//   ];
// 
//   function cornerAt(index) {
//     return corners[index % 4];
//   }
// 
//   // Draw rectangle from 'startCorner'
//   var corner = cornerAt(0);
//   ctx.moveTo(corner[0], corner[1]);
// 
//   for (var i = 1; i < 5; i++) {
//     corner = cornerAt(i);
//     ctx.lineTo(corner[0], corner[1]);
// 
//     if (!corner[2]) {
//       ctx.stroke();
//     }
//   }
// 
//   console.log(corners);
// 
//   ctx.fill();
// };

module.exports = React.createClass({
  ref: function(name) {
    this._refs = this._refs || {};

    return (el) => {
      this._refs[name] = el;
    };
  },
  fromData: function(data) {
    return (data || []).map((d) => {
      return d.cpu;
    });
  },
  componentDidMount: function() {
    const {
      data = [],
      bg,
      border
    } = this.props;

    const bars = this.fromData(data);

    this._chart = new Chart(this._refs.component, {
      type: 'bar',
      options: {
        elements: {
          rectangle: {
            borderSkipped: ['bottom', 'left', 'right']
          }
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }]
        },
        legend: {
          display: false
        }
      },
      data: {
        labels: buildArray(bars.length).map((v, i) => ''),
        datasets: [{
          borderWidth: 1,
          borderColor: border,
          backgroundColor: bg,
          data: bars
        }]
      }
    });
  },
  componentWillReceiveProps: function(nextProps) {
    const {
      data = [],
      bg,
      border
    } = this.props;

    const bars = this.fromData(data);
{'fraction_non_alphanumeric': 0.17557603686635945, 'fraction_numerical': 0.004838709677419355, 'mean_word_length': 1.7738019169329073, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 13, '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': '6637014', 'n_tokens_mistral': 1458, 'n_tokens_neox': 1423, 'n_words': 298}