Victory GM Attempt.md

// Note:  Unused Experimental Component
// Requires Victory and d3- shape

import React from "react";
import { PropTypes } from "prop-types";
import {
  VictoryAxis,
  VictoryBrushContainer,
  VictoryChart,
  VictoryLabel,
  VictoryLine,
  VictoryTheme,
  VictoryVoronoiContainer,
  VictoryZoomContainer
} from "victory";
import _ from "lodash";
import { extractDataAttributes } from "../utils";
import randomColor from "randomcolor";

/**
 * Reuseable Line Chart component for rendering a time series
 *
 * Required Props include title (the string to show at that top of the card) and time series (the data to render).
 * Optional props include any number of detailLines, an array of strings listed below the line chart.
 */
export default class GMLineChart extends React.Component {
  static propTypes = {
    detailLines: PropTypes.array,
    expectedAttributes: PropTypes.array,
    timeSeries: PropTypes.array.isRequired,
    title: PropTypes.string.isRequired
  };

  static defaultProps = {
    detailLines: []
  };

  state = {
    dataKeys: [],
    colors: {}
  };

  componentWillMount() {
    const dataKeys = extractDataAttributes(this.props.timeSeries);
    this.setState({
      dataKeys,
      colors: this.generateColors(dataKeys)
    });
  }

  componentWillReceiveProps(nextProps) {
    const dataKeys = extractDataAttributes(nextProps.timeSeries);
    if (!_.isEqual(dataKeys, this.state.dataKeys)) {
      this.setState({
        dataKeys,
        colors: this.generateColors(dataKeys)
      });
    }
  }

  /**
   * generateColors generates a random color associated for each data attribute.
   * The key value pairs are never cleaned up, but 
   * @param {String[]} dataKeys 
   * @param {Object} currentColorsState
   * @returns {Object}
   */
  generateColors(dataKeys, currentColorsState = this.state.colors) {
    const newColors = {};
    dataKeys.forEach(dataKey => {
      if (currentColorsState[dataKey]) {
        newColors[dataKey] = currentColorsState[dataKey];
      } else {
        newColors[dataKey] = randomColor();
      }
    });
    return newColors;
  }

  handleZoom(domain) {
    this.setState({ selectedDomain: domain });
  }

  handleBrush(domain) {
    this.setState({ zoomDomain: domain });
  }

  render() {
    return (
      <div>
        {this.props.timeSeries.length > 0 &&
          <VictoryChart scale={{ x: "time" }}>
            <VictoryLine
              data={this.props.timeSeries}
              style={{
                data: { stroke: "tomato" }
              }}
              x="time"
              y={this.state.dataKeys[0]}
            />
          </VictoryChart>}
      </div>
    );
  }
}