<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Chart from 'chart.js';

const propTypes = {
  labels: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
};
const defaultProps = {};

class ChartComponent extends Component {
  componentDidMount() {
    const myBackgroundColor = [
      '#B6BFC1',
      '#EDEEEE',
      '#E5E8E8',
      '#EDEEEE'
    ];
    const myBorderColor = [
      '#B6BFC1',
      '#EDEEEE',
      '#E5E8E8',
      '#EDEEEE'
    ];
    const myHoverBackgroundColor = [
      '#9abf32',
      '#9abf32',
      '#9abf32',
      '#9abf32'
    ];
    const myHoverBorderColor = [
      '#9abf32',
      '#9abf32',
      '#9abf32',
      '#9abf32'
    ];

    const { labels, data } = this.props;

    const myChart = new Chart(this.myChart, {
      type: 'doughnut',
      data: {
        labels,
        datasets: [{
          data,
          backgroundColor: myBackgroundColor,
          borderColor: myBorderColor,
          borderWidth: [1, 1, 1, 1],
          hoverBackgroundColor: myHoverBorderColor,
          hoverBorderColor: myHoverBackgroundColor,
          hoverBorderWidth: [1, 2, 3, 4]
        }]
      },
      options: {
        cutoutPercentage: 70,
        animation: {
          animateRotate: true,
          animateScale: true
        }
      }
    });
  }
  render() {
    return (
      <canvas id="myChart" width="300" height="200" ref={ chart => this.myChart = chart } />
    );
  }
}

ChartComponent.propTypes = propTypes;
ChartComponent.defaultProps = defaultProps;

export default ChartComponent;<commit_msg>차트 적용.<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Chart from 'chart.js';
import _ from 'lodash';

const propTypes = {
  labels: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
};
const defaultProps = {};

const myBackgroundColor = [
  '#B6BFC1',
  '#EDEEEE',
  '#E5E8E8',
  '#EDEEEE'
];
const myBorderColor = [
  '#B6BFC1',
  '#EDEEEE',
  '#E5E8E8',
  '#EDEEEE'
];
const myHoverBackgroundColor = [
  '#9abf32',
  '#9abf32',
  '#9abf32',
  '#9abf32'
];
const myHoverBorderColor = [
  '#9abf32',
  '#9abf32',
  '#9abf32',
  '#9abf32'
];

class ChartComponent extends Component {
  componentDidMount() {
    const { labels, data } = this.props;
    this.viewChart = new Chart(this.myChart, {
      type: 'doughnut',
      data: {
        labels,
        datasets: [{
          data,
          backgroundColor: myBackgroundColor,
          borderColor: myBorderColor,
          borderWidth: [1, 1, 1, 1],
          hoverBackgroundColor: myHoverBorderColor,
          hoverBorderColor: myHoverBackgroundColor,
          hoverBorderWidth: [1, 2, 3, 4]
        }]
      },
      options: {
        cutoutPercentage: 70,
        animation: {
          animateRotate: true,
          animateScale: true
        }
      }
    });
  }

  componentDidUpdate(prevProps, prevState) {
    this.updateChart(this.props);
  }

  componentWillReceiveProps(nextProps) {
  }

  updateChart = (nextProps) => {
    const { labels, data } = nextProps;
    if(!this.viewChart) {
      return;
    }
    this.viewChart.config.data = {
      labels,
      datasets: [{
        data,
        backgroundColor: myBackgroundColor,
        borderColor: myBorderColor,
        borderWidth: [1, 1, 1, 1],
        hoverBackgroundColor: myHoverBorderColor,
        hoverBorderColor: myHoverBackgroundColor,
        hoverBorderWidth: [1, 2, 3, 4]
      }]
    };
    this.viewChart.update();
  };

  render() {
    return (
      <canvas id="myChart" width="300" height="200" ref={ chart => this.myChart = chart } />
    );
  }
}

ChartComponent.propTypes = propTypes;
ChartComponent.defaultProps = defaultProps;

export default ChartComponent;
{'fraction_non_alphanumeric': 0.13085834649815692, 'fraction_numerical': 0.02843601895734597, 'mean_word_length': 2.438009049773756, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 8, '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': '6742828', 'n_tokens_mistral': 1297, 'n_tokens_neox': 1272, 'n_words': 251}