[explore v2] fix explorev2 chart errors (#1277)

* fix prototypes and arrow function * only show line chart if viz type is line * split render lines function * fix arrow-body linter
apache · Oct 6, 2016 · 8a5f050 · 8a5f050
1 parent 5c5b393
commit 8a5f050
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -5,12 +5,13 @@ import moment from 'moment';
 
 const propTypes = {
   viz: PropTypes.shape({
-    data: PropTypes.object.isRequired,
+    data: PropTypes.array.isRequired,
     form_data: PropTypes.shape({
-      slice_name: PropTypes.object.isRequired,
+      viz_type: PropTypes.string.isRequired,
+      slice_name: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
-  height: PropTypes.number.isRequired,
+  height: PropTypes.string.isRequired,
 };
 
 export default class ChartContainer extends React.Component {
@@ -45,6 +46,12 @@ export default class ChartContainer extends React.Component {
     return newValues;
   }
 
+  isLineViz() {
+    // todo(alanna) generalize this check and map to charts
+    const vizType = this.props.viz.form_data.viz_type;
+    return vizType === 'line';
+  }
+
   render() {
     return (
       <div className="chart-container">
@@ -54,10 +61,12 @@ export default class ChartContainer extends React.Component {
             <div className="panel-title">{this.props.viz.form_data.slice_name}</div>
           }
         >
-          <TimeSeriesLineChart
-            data={this.state.data}
-            label1="Label 1"
-          />
+          {this.isLineViz() &&
+            <TimeSeriesLineChart
+              data={this.state.data}
+              label1="Label 1"
+            />
+          }
         </Panel>
       </div>
     );

diff --git a/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx b/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx
@@ -26,16 +26,14 @@ export default class TimeSeriesLineChart extends React.Component {
   }
 
   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] } }}
-        />
-      );
-    });
+    return this.props.data.map((d) => (
+      <V.VictoryLine
+        key={d.key}
+        data={d.values}
+        interpolation="cardinal"
+        style={{ data: { stroke: this.keysToColorsMap[d.key] } }}
+      />
+    ));
   }
 
   render() {