const React = require('react');
const IdyllComponent = require('idyll-component');
const V = require('victory');
const d3Arr = require('d3-array');

const types = {
  TIME: V.VictoryLine,
  LINE: V.VictoryLine,
  BAR: V.VictoryBar,
  SCATTER: V.VictoryScatter,
  PIE: V.VictoryPie
};

class Chart extends IdyllComponent {
  render() {
    const type = this.props.type.toUpperCase();
    const INNER_CHART = types[type];
    let scale = this.props.scale;
    let data = this.props.data;
    let domain = this.props.domain;

    if (this.props.equation) {
      const d = this.props.domain;
      data = d3Arr.range(d[0], d[1], (d[1] - d[0]) / this.props.samplePoints).map((x) => {
        return {
          x: x,
          y: this.props.equation(x)
        };
      });
    }

    if (type === types.TIME) {
      scale = {x: 'time', y: 'linear'};
      data = data.map((d) => {
        return Object.assign({}, d, {
          x: new Date(d.x)
        });
      });
    }
    return (
      <div className={this.props.className}>
        {type !== 'PIE' ? (
          <V.VictoryChart domainPadding={10} scale={scale}>
            <INNER_CHART data={data} x={this.props.x} y={this.props.y}>
            </INNER_CHART>
          </V.VictoryChart>
        ) : (
          <INNER_CHART data={data} colorScale={this.props.colorScale}>
          </INNER_CHART>
        )
        }
      </div>
    );
  }
}

Chart.defaultProps = {
  domain: [-1, 1],
  range: [-1, 1],
  domainPadding: 0,
  samplePoints: 100,
  type: 'line'
};

module.exports = Chart;

@@ -158,16 +158,39 @@
 pes = %7B%0A
+  AREA: V.VictoryArea,%0A
   TIME: 
@@ -1158,28 +1158,56 @@
 ER_CHART
- data=%7Bdata%7D
+%0A              data=%7Bdata%7D%0A             
  x=%7Bthis
@@ -1215,16 +1215,30 @@
 props.x%7D
+%0A             
  y=%7Bthis
@@ -1246,16 +1246,83 @@
 props.y%7D
+%0A              interpolation=%7Bthis.props.interpolation %7C%7C 'linear'%7D
 %3E%0A      

Support area charts and custom interpolations