[explorev2] chart and controls

caravel/assets/javascripts/components/VictoryTheme.js

@@ -0,0 +1,175 @@
+const { assign } = Object;
+
+const A11Y_BABU = '#00A699';
+const AXIS_LINE_GRAY = '#484848';
+const LABEL_TEXT_GRAY = '#767676';
+const GRID_LINE_GRAY = '#DBDBDB';
+
+// 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;

caravel/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -1,11 +1,56 @@
 import React from 'react';
 import { Panel } from 'react-bootstrap';
+import TimeSeriesLineChart from './charts/TimeSeriesLineChart';
 
-const ChartContainer = function () {
-  return (
-    <Panel header="Chart title">
-      chart goes here
-    </Panel>
-  );
-};
-export default ChartContainer;
+export default class ChartContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      params: this.getParamsFromUrl(),
+      data: props.viz.data,
+      height: window.innerHeight,
+      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((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.state.height }}
+          header={
+            <div className="panel-title">{this.props.viz.form_data.slice_name}</div>
+          }
+        >
+          <TimeSeriesLineChart
+            data={this.state.data}
+            label1="Percentage"
+            height={this.state.height}
+          />
+        </Panel>
+      </div>
+    );
+  }
+}

caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -3,24 +3,45 @@ 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 />
+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;

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;

caravel/assets/javascripts/explorev2/components/charts/Legend.jsx

@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  data: PropTypes.array.isRequired,
+  keysToColorsMap: PropTypes.object.isRequired,
+};
+
+export default class Legend extends React.Component {
+  legendItem(key) {
+    return (
+      <li style={{ float: 'left' }} key={key}>
+        <i
+          className="fa fa-circle"
+          style={{ color: this.props.keysToColorsMap[key] }}
+        ></i> &nbsp;&nbsp;
+        <span>{key}</span>
+      </li>
+    );
+  }
+
+  render() {
+    const legendEls = this.props.data.map((d) => {
+      return this.legendItem(d.key);
+    });
+    return (
+      <ul className="list-unstyled list-inline">
+        {legendEls}
+      </ul>
+    );
+  }
+}
+
+Legend.propTypes = propTypes;