[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
apache · Oct 6, 2016 · f837733 · f837733
1 parent 66b498d
commit f837733
Show file tree

Hide file tree

Showing 11 changed files with 435 additions and 28 deletions.
diff --git a/caravel/assets/javascripts/components/VictoryTheme.js b/caravel/assets/javascripts/components/VictoryTheme.js
@@ -0,0 +1,173 @@
+const { assign } = Object;
+
+const A11Y_BABU = '#00A699';
+const AXIS_LINE_GRAY = '#484848';
+
+// Colors
+const colors = [
+  '#ffffff',
+  '#f0f0f0',
+  '#d9d9d9',
+  '#bdbdbd',
+  '#969696',
+  '#737373',
+  '#525252',
+  '#252525',
+  '#000000',
+];
+
+const charcoal = '#484848';
+
+// Typography
+const sansSerif = '"Roboto", sans-serif';
+const letterSpacing = 'normal';
+const fontSize = 8;
+
+// Layout
+const baseProps = {
+  width: 450,
+  height: 300,
+  padding: 50,
+  colorScale: colors,
+};
+
+// Labels
+const baseLabelStyles = {
+  fontFamily: sansSerif,
+  fontSize,
+  letterSpacing,
+  padding: 10,
+  fill: charcoal,
+  stroke: 'transparent',
+};
+
+// Strokes
+const strokeLinecap = 'round';
+const strokeLinejoin = 'round';
+
+// Create the theme
+const theme = {
+  area: assign({
+    style: {
+      data: {
+        fill: charcoal,
+      },
+      labels: baseLabelStyles,
+    },
+  }, baseProps),
+  axis: assign({
+    style: {
+      axis: {
+        fill: 'none',
+        stroke: AXIS_LINE_GRAY,
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin,
+      },
+      axisLabel: assign({}, baseLabelStyles, {
+        padding: 25,
+      }),
+      grid: {
+        fill: 'none',
+        stroke: 'transparent',
+      },
+      ticks: {
+        fill: 'none',
+        padding: 10,
+        size: 1,
+        stroke: 'transparent',
+      },
+      tickLabels: baseLabelStyles,
+    },
+  }, baseProps),
+  bar: assign({
+    style: {
+      data: {
+        fill: A11Y_BABU,
+        padding: 10,
+        stroke: 'transparent',
+        strokeWidth: 0,
+        width: 8,
+      },
+      labels: baseLabelStyles,
+    },
+  }, baseProps),
+  candlestick: assign({
+    style: {
+      data: {
+        stroke: A11Y_BABU,
+        strokeWidth: 1,
+      },
+      labels: assign({}, baseLabelStyles, {
+        padding: 25,
+        textAnchor: 'end',
+      }),
+    },
+    candleColors: {
+      positive: '#ffffff',
+      negative: charcoal,
+    },
+  }, baseProps),
+  chart: baseProps,
+  errorbar: assign({
+    style: {
+      data: {
+        fill: 'none',
+        stroke: charcoal,
+        strokeWidth: 2,
+      },
+      labels: assign({}, baseLabelStyles, {
+        textAnchor: 'start',
+      }),
+    },
+  }, baseProps),
+  group: assign({
+    colorScale: colors,
+  }, baseProps),
+  line: assign({
+    style: {
+      data: {
+        fill: 'none',
+        stroke: A11Y_BABU,
+        strokeWidth: 2,
+      },
+      labels: assign({}, baseLabelStyles, {
+        textAnchor: 'start',
+      }),
+    },
+  }, baseProps),
+  pie: {
+    style: {
+      data: {
+        padding: 10,
+        stroke: 'none',
+        strokeWidth: 1,
+      },
+      labels: assign({}, baseLabelStyles, {
+        padding: 200,
+        textAnchor: 'middle',
+      }),
+    },
+    colorScale: colors,
+    width: 400,
+    height: 400,
+    padding: 50,
+  },
+  scatter: assign({
+    style: {
+      data: {
+        fill: charcoal,
+        stroke: 'transparent',
+        strokeWidth: 0,
+      },
+      labels: assign({}, baseLabelStyles, {
+        textAnchor: 'middle',
+      }),
+    },
+  }, baseProps),
+  stack: assign({
+    colorScale: colors,
+  }, baseProps),
+};
+
+export default theme;
diff --git 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;
diff --git a/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -1,26 +1,55 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import ChartContainer from './ChartContainer';
 import ControlPanelsContainer from './ControlPanelsContainer';
 import QueryAndSaveButtons from './QueryAndSaveButtons';
 
-const ExploreViewContainer = function () {
-  return (
-    <div className="container-fluid">
-      <div className="row">
-        <div className="col-sm-3">
-          <QueryAndSaveButtons
-            canAdd="True"
-            onQuery={() => { console.log('clicked query'); }}
-          />
-          <br /><br />
-          <ControlPanelsContainer />
-        </div>
-        <div className="col-sm-9">
-          <ChartContainer />
+const propTypes = {
+  data: PropTypes.shape({
+    viz: PropTypes.object.isRequired,
+  }).isRequired,
+};
+
+export default class ExploreViewContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      height: this.getHeight(),
+    };
+  }
+
+  getHeight() {
+    const navHeight = 90;
+    return `${window.innerHeight - navHeight}px`;
+  }
+
+  render() {
+    return (
+      <div
+        className="container-fluid"
+        style={{
+          height: this.state.height,
+          overflow: 'hidden',
+        }}
+      >
+        <div className="row table-body">
+          <div className="table-cell col-sm-4">
+            <QueryAndSaveButtons
+              canAdd="True"
+              onQuery={() => {}}
+            />
+            <br /><br />
+            <ControlPanelsContainer />
+          </div>
+          <div className="table-cell col-sm-8">
+            <ChartContainer
+              viz={this.props.data.viz}
+              height={this.state.height}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
-export default ExploreViewContainer;
+ExploreViewContainer.propTypes = propTypes;
diff --git a/caravel/assets/javascripts/explorev2/components/QueryAndSaveBtns.jsx b/caravel/assets/javascripts/explorev2/components/QueryAndSaveBtns.jsx
@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const propTypes = {
+  canAdd: PropTypes.string.isRequired,
+  onQuery: PropTypes.func.isRequired,
+};
+
+export default function QueryAndSaveBtns({ canAdd, onQuery }) {
+  const saveClasses = classnames('btn btn-default btn-sm', {
+    'disabled disabledButton': canAdd !== 'True',
+  });
+
+  return (
+    <div className="btn-group query-and-save">
+      <button type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
+        <i className="fa fa-bolt"></i> Query
+      </button>
+      <button
+        type="button"
+        className={saveClasses}
+        data-target="#save_modal"
+        data-toggle="modal"
+      >
+        <i className="fa fa-plus-circle"></i> Save as
+      </button>
+    </div>
+  );
+}
+
+QueryAndSaveBtns.propTypes = propTypes;
diff --git a/caravel/assets/javascripts/explorev2/components/charts/Legend.jsx b/caravel/assets/javascripts/explorev2/components/charts/Legend.jsx
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import LegendItem from './LegendItem';
+
+const propTypes = {
+  data: PropTypes.array.isRequired,
+  keysToColorsMap: PropTypes.object.isRequired,
+};
+
+export default function Legend({ data, keysToColorsMap }) {
+  const legendEls = data.map((d) => {
+    const color = keysToColorsMap[d.key] ? keysToColorsMap[d.key] : '#000';
+    return <LegendItem label={d.key} color={color} key={d.key} />;
+  });
+  return (
+    <ul className="list-unstyled list-inline">
+      {legendEls}
+    </ul>
+  );
+}
+
+Legend.propTypes = propTypes;
diff --git a/caravel/assets/javascripts/explorev2/components/charts/LegendItem.jsx b/caravel/assets/javascripts/explorev2/components/charts/LegendItem.jsx
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+export default function LegendItem({ label, color }) {
+  return (
+    <li style={{ float: 'left' }} key={label}>
+      <i className="fa fa-circle" style={{ color }} /> &nbsp;&nbsp;
+      <span>{label}</span>
+    </li>
+  );
+}
+
+LegendItem.propTypes = propTypes;