<commit_before>'use strict';

let React = require('react');

//some examples
import {barChart} from './charts/barChart';
import {pieChart} from './charts/pieChart';

class D3Component extends React.Component {
  constructor() {
    super();
    this.state = {
      chartObject: {},
      chartStyle: { //svg-container
        display: 'block',
        position: 'relative',
        width: '100%',
        'paddingBottom': '50%', //adjust below for other aspect ratios!
        'verticalAlign': 'middle',
        overflow: 'hidden'
      }
    }
  }

  componentDidMount() {
    this.createNewChart(this.props.chartType, this.props);
  }

  componentWillReceiveProps(newProps) {
    //we check if we need to create a new chart or update the existing one
    if (!this.state.chartObject.mainFunction ||
      newProps.chartType !== this.props.chartType) {
      this.createNewChart(newProps.chartType, newProps);
    } else {
      this.state.chartObject.updateFunction(newProps.data, newProps.params);
    }
  }

  createNewChart(chartPrototype, props) {
    //clean up existing stuff
    d3.select(React.findDOMNode(this)).select('#d3graphSVG').remove();
    //Create afresh
    let chartObject, paddingBottom;
    switch (chartPrototype) {
      case 'bar':
        chartObject = Object.create(barChart);
        paddingBottom = '100%';
        break;
      case 'pie':
        chartObject = Object.create(pieChart);
        paddingBottom = '100%';
        break;
      case 'custom':
        chartObject = Object.create(props.chartModule);
        paddingBottom = this.props.paddingBottom;
        break;
      default:
        chartObject = Object.create(barChart);
        paddingBottom = '100%';
    }

    this.setState({
      chartObject,
      chartStyle: Object.assign({}, this.state.chartStyle, {paddingBottom})
    });

    //and create it:
    chartObject.mainFunction(d3.select(React.findDOMNode(this)), props.data, props.params, this);
  }

  handleChartEvent(d, event) {
    if (this.props.onChartEvent) {
      this.props.onChartEvent(d, event)
    }
  }
<commit_msg>Update d3component to handle store.<commit_after>'use strict';

import React from 'react';

//some examples
import {barChart} from './charts/barChart';
import {pieChart} from './charts/pieChart';
import D3Store from './stores/D3stores.js';
import D3Actions from './actions/D3actions.js';

class D3Component extends React.Component {
  constructor() {
    super();
    this.state = {
      chartObject: {},
      chartStyle: { //svg-container
        display: 'block',
        position: 'relative',
        width: '100%',
        'paddingBottom': '50%', //adjust below for other aspect ratios!
        'verticalAlign': 'middle',
        overflow: 'hidden'
      }
    }
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  componentDidMount() {
    //load reflux store
    this.unsubscribe = D3Store.listen(this.onStatusChange.bind(this));
    //create new chart
    this.createNewChart(this.props.chartType, this.props);
  }

  componentWillReceiveProps(newProps) {
    //we check if we need to create a new chart or update the existing one
    if (!this.state.chartObject.mainFunction ||
      newProps.chartType !== this.props.chartType) {
      this.createNewChart(newProps.chartType, newProps);
    } else {
      this.state.chartObject.updateFunction(newProps.data, newProps.params);
    }
  }

  onStatusChange(obj) {
    if (this.state.chartObject.onEvent) {
      this.state.chartObject.onEvent(obj);
    }
  }

  createNewChart(chartPrototype, props) {
    //clean up existing stuff
    d3.select(React.findDOMNode(this)).select('#d3graphSVG').remove();
    //Create afresh
    let chartObject, paddingBottom;
    switch (chartPrototype) {
      case 'bar':
        chartObject = Object.create(barChart);
        paddingBottom = '100%';
        break;
      case 'pie':
        chartObject = Object.create(pieChart);
        paddingBottom = '100%';
        break;
      case 'custom':
        chartObject = Object.create(props.chartModule);
        paddingBottom = this.props.paddingBottom;
        break;
      default:
        chartObject = Object.create(barChart);
        paddingBottom = '100%';
    }

    this.setState({
      chartObject,
      chartStyle: Object.assign({}, this.state.chartStyle, {paddingBottom})
    });

    //and create it:
    chartObject.mainFunction(d3.select(React.findDOMNode(this)),
      props.data, props.params, this);
  }

  handleChartEvent(d, event) {
    //call action
    D3Actions.D3Event(d, event);
  }

{'fraction_non_alphanumeric': 0.13030103274005714, 'fraction_numerical': 0.00966820479015601, 'mean_word_length': 2.7838736492103076, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '2053232', 'n_tokens_mistral': 1390, 'n_tokens_neox': 1359, 'n_words': 287}