<commit_before>import React from 'react/addons';
import _ from 'underscore';
import Chart from 'chart.js';
import bem from '../bem';
import $ from 'jquery';

import {t} from '../utils';

var ReportTable = React.createClass({
  render () {
    return (
        <table>
          <thead>
            <tr>
              <th>{t('Value')}</th>
              <th className="right-align">{t('Frequency')}</th>
              <th className="right-align">{t('Percentage')}</th>
            </tr>
          </thead>
          <tbody>
            {this.props.rows.map((row)=>{
              let [value, frequency, percentage] = row;
              return (
                  <tr key={value}>
                    <td>{value}</td>
                    <td className="right-align">{frequency}</td>
                    <td className="right-align">{percentage}</td>
                  </tr>
                );
            })}
          </tbody>
        </table>
      )
  },
});

var ReportViewItem = React.createClass({
  getInitialState () {
    let p = this.props,
      d = p.data,
      s = {};
      s.reportTable = [];
    if (d.percentages && d.responses && d.frequencies) {
      s.reportTable = _.zip(
          d.responses,
          d.frequencies,
          d.percentages,
        );
    }
    return s;
  },
  componentDidMount () {
    var opts = this.buildChartOptions();
    var canvas = this.refs.canvas.getDOMNode();
    var itemChart = new Chart(canvas, opts);
    this.setState({itemChart: itemChart});
  },
  componentWillUpdate () {
    var canvas = this.refs.canvas.getDOMNode();
    var opts = this.buildChartOptions();
    let itemChart = this.state.itemChart;
    if (itemChart != undefined) {
      itemChart.destroy();
      itemChart = new Chart(canvas, opts);
    }
  },
  buildChartOptions () {
    var chart_type = this.props.style.report_type || 'bar';

    // TODO: set as default globally in a higher level (PM)
    var colors = this.props.style.report_colors || [
      'rgba(52, 106, 200, 0.8)',
      'rgba(252, 74, 124, 0.8)',
      'rgba(250, 213, 99, 0.8)',
      'rgba(113, 230, 33, 0.8)',
      'rgba(78, 203, 255, 0.8)',
      'rgba(253, 190, 76, 0.8)',
      'rgba(77, 124, 244, 0.8)',
      'rgba(33, 231, 184, 0.8)'
    ];

    var baseColor = colors[0];
    Chart.defaults.global.elements.rectangle.backgroundColor = baseColor;
    Chart.defaults.global.elements.line.borderColor = baseColor;
    Chart.defaults.global.elements.line.backgroundColor = 'rgba(255, 255, 255, 0.1)';
    Chart.defaults.global.elements.point.backgroundColor = baseColor;
    Chart.defaults.global.elements.point.radius = 4;
    Chart.defaults.global.elements.arc.backgroundColor = baseColor;
    Chart.defaults.global.maintainAspectRatio = false;

    if (chart_type == 'donut') {<commit_msg>prevents chart from being built if no responses exist for a given question.<commit_after>import React from 'react/addons';
import _ from 'underscore';
import Chart from 'chart.js';
import bem from '../bem';
import $ from 'jquery';

import {t} from '../utils';

var ReportTable = React.createClass({
  render () {
    return (
        <table>
          <thead>
            <tr>
              <th>{t('Value')}</th>
              <th className="right-align">{t('Frequency')}</th>
              <th className="right-align">{t('Percentage')}</th>
            </tr>
          </thead>
          <tbody>
            {this.props.rows.map((row)=>{
              let [value, frequency, percentage] = row;
              return (
                  <tr key={value}>
                    <td>{value}</td>
                    <td className="right-align">{frequency}</td>
                    <td className="right-align">{percentage}</td>
                  </tr>
                );
            })}
          </tbody>
        </table>
      )
  },
});

var ReportViewItem = React.createClass({
  getInitialState () {
    let p = this.props,
      d = p.data,
      s = {};
      s.reportTable = [];
    if (d.percentages && d.responses && d.frequencies) {
      s.reportTable = _.zip(
          d.responses,
          d.frequencies,
          d.percentages,
        );
    }
    return s;
  },
  responsesExist () {
    return !!this.props.data.responses;
  },
  componentDidMount () {
    if (!this.refs.canvas) {
      return;
    }
    if (!this.responsesExist()) {
      return this.setState({
        itemChart: false,
      });
    }
    var opts = this.buildChartOptions();
    var canvas = this.refs.canvas.getDOMNode();
    var itemChart = new Chart(canvas, opts);
    this.setState({itemChart: itemChart});
  },
  componentWillUpdate () {
    var canvas = this.refs.canvas.getDOMNode();
    if (!this.responsesExist()) {
      return this.setState({
        itemChart: false,
      });
    }
    var opts = this.buildChartOptions();
    let itemChart = this.state.itemChart;
    if (itemChart !== undefined) {
      itemChart.destroy();
      itemChart = new Chart(canvas, opts);
    }
  },
  buildChartOptions () {
    var chart_type = this.props.style.report_type || 'bar';

    // TODO: set as default globally in a higher level (PM)
    var colors = this.props.style.report_colors || [
      'rgba(52, 106, 200, 0.8)',
      'rgba(252, 74, 124, 0.8)',
      'rgba(250, 213, 99, 0.8)',
      'rgba(113, 230, 33, 0.8)',
      'rgba(78, 203, 255, 0.8)',
      'rgba(253, 190, 76, 0.8)',
      'rgba(77, 124, 244, 0.8)',
      'rgba(33, 231, 184, 0.8)'
    ];

    var baseColor = colors[0];
    Chart.defaults.global.elements.rectangle.backgroundColor = baseColor;
    Chart.defaults.global.elements.line.borderColor = baseColor;
    Chart.defaults.global.elements.line.backgroundColor = 'rgba(255, 255, 255, 0.1)';
    Chart.defaults.global.elements.point.backgroundColor = baseColor;
    Chart.defaults.global.elements.point.radius = 4;
    Chart.defaults.global.elements.arc.backgroundColor = baseColor;
    Chart.defaults.global.maintainAspectRatio = false;

    if (chart_type == 'donut') {
{'fraction_non_alphanumeric': 0.15655806182121973, 'fraction_numerical': 0.03107769423558897, 'mean_word_length': 2.1274817136886104, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 49, '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': '3816894', 'n_tokens_mistral': 2050, 'n_tokens_neox': 1873, 'n_words': 394}