Morris js

Morris.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import config from '../config/config';
import actions from '../redux/actions';
import ReactDOM from 'react-dom';
import Sources from '../config/sources';

@connect((state) => state)
export default class MainChart extends Component {

  componentDidMount () {
    const { start, end, days } = this.props.overview.dateRange;
    const { sources } = this.props.overview;
    const { labels, seperator } = this.props.overview.graphLabels;
    this.drawChart(start, end, days, sources, labels, seperator);
  }

  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', nextProps);
    const { start, end, days } = nextProps.overview.dateRange;
    const { labels, seperator } = nextProps.overview.graphLabels;
    const { sources, keywords } = nextProps.overview;
    let node = ReactDOM.findDOMNode(this);
    if ((this.props.overview.sources !== sources) && keywords.length >= 1) {
      console.log('if satisfied', sources);
      node.innerHTML = '';
      this.drawChart(start, end, days, sources, labels, seperator);
    } else if ((this.props.overview.dateRange.start !== start || this.props.overview.dateRange.end !== end ||
      this.props.overview.keywords !== keywords) && keywords.length === 0
    ) {
      node.innerHTML = '';
      this.drawChart(null, null, null, [], [], null);
    }

  }

  drawChart = (start, end, days, sources, labels, seperator) => {
    const Period = (days > 1) ? moment(end).format('MMMM DD, YYYY') : `${moment(start).format('MMMM DD, YYYY')} to ${moment(end).format('MMMM DD, YYY')}`
    // var chart = new Rubix('#main-chart', {
    //   width: '100%',
    //   height: '30vh',
    //   title: 'Chart of Sources',
    //   titleColor: '#2EB398',
    //   subtitle: Period,
    //   subtitleColor: '#2EB398',
    //   axis: {
    //     x: {
    //       type: 'datetime',
    //       tickCount: 3,
    //       labelColor: '#2EB398'
    //     },
    //     y: {
    //       type: 'linear',
    //       tickFormat: 'd',
    //       tickCount: 2,
    //       labelColor: '#2EB398'
    //     }
    //   },
    //   tooltip: {
    //     color: '#55C9A6',
    //     format: {
    //       y: '.0f',
    //       x: '%x'
    //     }
    //   },
    //   margin: {
    //     top: 25,
    //     left: 50,
    //     right: 25
    //   },
    //   interpolate: 'linear'
    // });
    let data = [];
    let finalObj = {};
    let ykeys = [];
    for (let key in sources) {
      if (sources.hasOwnProperty(key)) {

        // chart.extent = [1297110663 * 850 + (86400000 * 20 * (0.35 * 40)),
        //   1297110663 * 850 + (86400000 * 20 * (0.66 * 40))];


        var t = start - 86400000;
        var v = sources[key]
        let bool = false;
        v.forEach(val => {
          if (val !== 0) {
            bool = true;
          }
        })
        if (bool) {
          finalObj[Sources[key].name] = sources[key];
          ykeys.push(Sources[key].name);
          // labels.forEach((val) => {
          //   dataObj.period = val;
          // })
          // var total_posts = chart.area_series({
          //   name: Sources[key].name,
          //   color: Sources[key].color,
          //   marker: 'circle',
          //   fillopacity: 0.2,
          //   noshadow: true
          // });
          //
          // var getValue = function () {
          //   var val = v.shift();
          //   console.log(val);
          //   v.push(val);
          //   return val;
          // };
          //
          // var data = d3.range(labels.length - 1).map(function () {
          //   let rangeSeperator = null;
          //   console.log('seperator', seperator);
          //   if (seperator === 'days' || seperator === 'range') {
          //     rangeSeperator = 1;
          //   } else if (seperator === 'week') {
          //     rangeSeperator = 7;
          //   }
          //   console.log('rangeSeperator', rangeSeperator);
          //   return {
          //     x: (t += (86400000 * rangeSeperator)),
          //     y: getValue()
          //   };
          // });
          // total_posts.addData(data);
        }
      }
    }
    if (Object.keys(finalObj).length >= 1) {
      labels.forEach((val, index) => {
        let dataObj = {};
        dataObj.period = val;
        for (let key in finalObj) {
          dataObj[key] = finalObj[key][index];
        }
        data.push(dataObj);
      })
    }

    console.log('data', data);
    console.log('ykeys', ykeys);
    Morris.Area({
      element: 'main-chart',
      data: data,
      xkey: 'period',
      ykeys: labels,
      labels: ykeys,
      pointSize: 2,
      hideHover: 'auto'
    });
  }

  render () {
    return (
      <div id='main-chart' />
    );
  }
}