Get table viz work in explore v2: Added d3 format to mock slice (#1353)

* Added d3format() function to mock slice in explorev2

Problem:
table viz was not working in explorev2 due to d3format() not defined in
mock slice.

* Change column_formats to camel case

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

@@ -2,13 +2,15 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Panel } from 'react-bootstrap';
 import visMap from '../../../visualizations/main';
+import { d3format } from '../../modules/utils';
 
 const propTypes = {
   sliceName: PropTypes.string.isRequired,
   vizType: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
   sliceContainerId: PropTypes.string.isRequired,
   jsonEndpoint: PropTypes.string.isRequired,
+  columnFormats: PropTypes.object,
 };
 
 class ChartContainer extends React.Component {
@@ -34,6 +36,7 @@ class ChartContainer extends React.Component {
           // pixel string can be '300px'
           // should call callback to adjust height of chart
         },
+        height: () => parseInt(this.props.height, 10) - 100,
       },
 
       width: () => this.chartContainerRef.getBoundingClientRect().width,
@@ -45,6 +48,11 @@ class ChartContainer extends React.Component {
       done: () => {
         // finished rendering callback
       },
+      d3format: (col, number) => {
+        // mock d3format function in Slice object in caravel.js
+        const format = this.props.columnFormats[col];
+        return d3format(format, number);
+      },
     };
   }
 
@@ -80,6 +88,7 @@ function mapStateToProps(state) {
     vizType: state.viz.formData.vizType,
     sliceContainerId: `slice-container-${state.viz.formData.sliceId}`,
     jsonEndpoint: state.viz.jsonEndPoint,
+    columnFormats: state.viz.columnFormats,
   };
 }
 

caravel/assets/javascripts/explorev2/index.jsx

@@ -20,6 +20,7 @@ const bootstrappedState = Object.assign(initialState, {
   viz: {
     jsonEndPoint: bootstrapData.viz.json_endpoint,
     data: bootstrapData.viz.data,
+    columnFormats: bootstrapData.viz.column_formats,
     formData: {
       sliceId: bootstrapData.viz.form_data.slice_id,
       vizType: bootstrapData.viz.form_data.viz_type,

caravel/assets/javascripts/explorev2/stores/store.js

@@ -37,6 +37,7 @@ export const initialState = {
   filters: [],
   filterColumnOpts: [],
   viz: {
+    columnFormats: {},
     formData: defaultFormData,
   },
 };

caravel/viz.py

@@ -326,6 +326,7 @@ def get_json(self, force=False):
                 'json_endpoint': self.json_endpoint,
                 'query': self.query,
                 'standalone_endpoint': self.standalone_endpoint,
+                'column_formats': self.data['column_formats'],
             }
             payload['cached_dttm'] = datetime.now().isoformat().split('.')[0]
             logging.info("Caching for the next {} seconds".format(