<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { LineChart } from 'react-d3-basic';


import { getTone } from '../../actions/index';
import chartSettings from './emotionChartSettings';
/* component styles */
// import { styles } from './styles.scss';

export class EmotionDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emotionData: [],
      lastAnger: 0,
    };
  }

  componentWillMount() {
    this.props.socket.on('tone:update', toneData => {
      this.props.getTone(toneData);
    });
  }

  componentWillReceiveProps(props) {
    const currentAnger = props.emotion.anger;
    if (currentAnger !== this.state.lastAnger) {
      const newEmotionData = this.state.emotionData.concat([props.emotion]);
      if (newEmotionData.length > 30) {
        newEmotionData.shift();
      }
      this.setState({
        emotionData: newEmotionData,
        lastAnger: currentAnger,
      });
    }
  }

  render() {
    return (
      <div className="row">
        <div className="col-lg-12 text-center">
          <LineChart
            title={chartSettings.title}
            data={this.state.emotionData}
            width={chartSettings.width}
            height={chartSettings.height}
            margins={chartSettings.margins}
            labelOffset={chartSettings.labelOffset}
            legendPosition={chartSettings.legendPosition}
            chartSeries={chartSettings.chartSeries}
            interpolate={chartSettings.interpolate}
            showLegend={chartSettings.showLegend}
            showXAxis={false}
            showYAxis={chartSettings.howYAxis}
            showXGrid={false}
            showYGrid={false}
            x={(d) => { return this.state.emotionData.indexOf(d); }}
            xDomain={chartSettings.xDomain}
            xRange={chartSettings.xRange}
            xScale={chartSettings.xScale}
            xOrient={chartSettings.xOrient}
            xTickOrient={chartSettings.xTickOrient}
            xLabel={chartSettings.xLabel}
            xLabelPosition={chartSettings.xLabelPosition}
            y={chartSettings.y}
            yOrient={chartSettings.yOrient}
            yDomain={chartSettings.yDomain}
            yRange={chartSettings.yRange}
            yScale={chartSettings.yScale}
            yTickOrient={chartSettings.yTickOrient}
            yLabel={chartSettings.yLabel}
            yLabelPosition={chartSettings.yLabelPosition}
          />
        </div>
      </div>
    );
  }<commit_msg>Switch from React-D3 graph to just React-SVG graph for emotion data display<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { LineChart } from 'react-d3-basic';
import gsap from 'gsap';

import { getTone } from '../../actions/index';
// import chartSettings from './emotionChartSettings';

/* component styles */
import { styles } from './styles.scss';

class EmotionDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emotionData: [],
      lastAnger: 0,
      xCoord: 400,
    };
  }

  componentWillMount() {
    this.props.socket.on('tone:update', toneData => {
      this.props.getTone(toneData);
    });

    // because the incoming data is continuous, need to disable
    // requestAnimationFrame so that moving to a new window doesn't
    // get the data animation out of whack
    TweenMax.ticker.useRAF(false);
    TweenMax.lagSmoothing(0);
  }

  componentWillReceiveProps(props) {
    const currentAnger = props.emotion.anger;
    if (currentAnger !== this.state.lastAnger) {
      const newEmotionData = this.state.emotionData.concat([props.emotion]);
      if (newEmotionData.length > 30) {
        newEmotionData.shift();
      }
      this.setState({
        emotionData: newEmotionData,
        lastAnger: currentAnger,
        xCoord: this.state.xCoord + 40,
      });

      TweenMax.to('#line-container', 3, { x: '-=40', ease: Power0.easeNone });
    }
  }

  renderLines(emotionData, xCoord) {
    if (emotionData.length === 0) return;

    const emos = Object.keys(emotionData[0]).reduce((list, emo) => {
      list[emo] = [];
      return list;
    }, {});

    emotionData.forEach(datum => {
      for (let emo in datum) {
        if (datum.hasOwnProperty(emo)) {
          emos[emo].push(datum[emo]);
        }
      }
    });

    const paths = {};

    for (let emo in emos) {
      if (emos.hasOwnProperty(emo)) {
        paths[emo] = emos[emo].reduceRight((res, reading, i, coll) => {
          if (i === coll.length - 1) {
            res.path += `${res.x} ${100 - reading}`;
          } else {
            if (reading >= coll[i + 1]) {
              res.path += `C ${res.x + 20} ${100 - (coll[i + 1])} ${res.x + 20} ${100 - (reading)} ${res.x} ${100 - reading}`
            } else {
              res.path += `C ${res.x + 20} ${100 - (coll[i + 1])} ${res.x + 20} ${100 - (reading)} ${res.x} ${100 - reading}`
            }
          }
          res.x -= 40;
          return res;
        }, { path: 'M', x: xCoord });
      }
    }

    console.log(paths);

    return (
      <g>
        <path stroke="#FF0000" fill="none" d={paths.anger.path}></path>
        <path stroke="#A52A2A" fill="none" d={paths.disgust.path}></path>
        <path stroke="#FF8000" fill="none" d={paths.fear.path}></path>
        <path stroke="#800080" fill="none" d={paths.joy.path}></path>
        <path stroke="#0000FF" fill="none" d={paths.sadness.path}></path>
      </g>
    );
  }

  render() {
    return (
      <div className={`${styles}`}>
        <div className="row">
          <div className="col-lg-12 line-graph-container">
            <svg width="100%" height="400" viewBox="0 0 400 103" preserveAspectRatio="none">
              <g id="line-container">
                {this.renderLines(this.state.emotionData, this.state.xCoord)}
              </g>
              <path stroke="#000" fill="none" d="M 0.5 0 l 0 100 z"></path>
              <path stroke="#000" fill="none" d="M 0.5 103 l 0 -3 l 399 0 l 0 3"></path>
            </svg>
            <span className="x-axis-label start">30 Sec<br/>Ago</span>
            <span className="x-axis-label end">Now</span>
          </div>
        </div>
      </div>
    );
  }
{'fraction_non_alphanumeric': 0.14989797520012557, 'fraction_numerical': 0.019306231360853868, 'mean_word_length': 2.2845360824742267, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 48, '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': '4219107', 'n_tokens_mistral': 2073, 'n_tokens_neox': 1968, 'n_words': 392}