[explorev2] chart and controls (#1251)

* create structure for new forked explore view (#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Created store and reducers (#1108) * Created store and reducers * Added spec * Modifications based on comments * do use bootstrap data for now * don't deal with bootstrap data for now * use victory as a base * import fake line data, add fake panels, make chart fixed * add fetch support * get slice data from json endpoint * render chart with slicejson * update chart and label demo * remove fetch config * remove dummy control panels * should be a func * make TimeSeriesLineChart * add a comment * inner height for height * don't need fetch yet * trailing comma breaks in package json * pass in viz data from props * add style sheet * set height on explore container * add legend * make chart responsive to window resize * can't use head_css in template bc overrides head_css in basic * fix linting * break labelItem into own SFC, make legend SFC * add propTypes and fix linter
2026-04-22 17:45:21 +00:00 · 2016-10-05 19:41:16 -07:00
parent 66b498de25
commit f837733d85
11 changed files with 436 additions and 29 deletions
--- a/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx
+++ b/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx
@@ -0,0 +1,70 @@
+import React, { PropTypes } from 'react';
+import * as V from 'victory';
+import theme from '../../../components/VictoryTheme';
+import moment from 'moment';
+import { schemeCategory20c } from 'd3-scale';
+import Legend from './Legend';
+
+const propTypes = {
+  data: PropTypes.array.isRequired,
+  label1: PropTypes.string.isRequired,
+};
+
+export default class TimeSeriesLineChart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.keysToColorsMap = this.mapKeysToColors(props.data);
+  }
+
+  mapKeysToColors(data) {
+    // todo: what if there are more lines than colors in schemeCategory20c?
+    const keysToColorsMap = {};
+    data.forEach((d, i) => {
+      keysToColorsMap[d.key] = schemeCategory20c[i];
+    });
+    return keysToColorsMap;
+  }
+
+  renderLines() {
+    return this.props.data.map(function (d) {
+      return (
+        <V.VictoryLine
+          key={d.key}
+          data={d.values}
+          interpolation="cardinal"
+          style={{ data: { stroke: this.keysToColorsMap[d.key] } }}
+        />
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div style={{ height: '80%', width: '100%' }}>
+        <V.VictoryChart
+          theme={theme}
+        >
+          {this.renderLines()}
+          <V.VictoryAxis
+            label={this.props.label1}
+            orientation="left"
+          />
+          <V.VictoryAxis
+            dependentAxis
+            label={'label needed'}
+            orientation="bottom"
+            tickValues={this.props.data[0].values.map((d) => d.x)}
+            tickFormat={(x) => moment(new Date(x)).format('YYYY')}
+            fixLabelOverlap
+          />
+        </V.VictoryChart>
+        <Legend
+          data={this.props.data}
+          keysToColorsMap={this.keysToColorsMap}
+        />
+      </div>
+    );
+  }
+}
+
+TimeSeriesLineChart.propTypes = propTypes;