[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 01:24:43 +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/ChartContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -1,11 +1,67 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { Panel } from 'react-bootstrap';
+import TimeSeriesLineChart from './charts/TimeSeriesLineChart';
+import moment from 'moment';

-const ChartContainer = function () {
-  return (
-    <Panel header="Chart title">
-      chart goes here
-    </Panel>
-  );
+const propTypes = {
+  viz: PropTypes.shape({
+    data: PropTypes.object.isRequired,
+    form_data: PropTypes.shape({
+      slice_name: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+  height: PropTypes.number.isRequired,
 };
-export default ChartContainer;
+
+export default class ChartContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      params: this.getParamsFromUrl(),
+      data: props.viz.data,
+      label1: 'Label 1',
+    };
+  }
+
+  getParamsFromUrl() {
+    const hash = window.location.search;
+    const params = hash.split('?')[1].split('&');
+    const newParams = {};
+    params.forEach((p) => {
+      const value = p.split('=')[1].replace(/\+/g, ' ');
+      const key = p.split('=')[0];
+      newParams[key] = value;
+    });
+    return newParams;
+  }
+
+  formatDates(values) {
+    const newValues = values.map(function (val) {
+      return {
+        x: moment(new Date(val.x)).format('MMM D'),
+        y: val.y,
+      };
+    });
+    return newValues;
+  }
+
+  render() {
+    return (
+      <div className="chart-container">
+        <Panel
+          style={{ height: this.props.height }}
+          header={
+            <div className="panel-title">{this.props.viz.form_data.slice_name}</div>
+          }
+        >
+          <TimeSeriesLineChart
+            data={this.state.data}
+            label1="Label 1"
+          />
+        </Panel>
+      </div>
+    );
+  }
+}
+
+ChartContainer.propTypes = propTypes;