Rubix first chart

Rubix.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 () {
    console.log('componentDidMount', this.props);
    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'
    });
    
    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) {
          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();
            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);
        }
      }
    }
  }

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