From 36f0ec4995980404a03cf170841c128ca547d8d8 Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Fri, 14 Oct 2016 15:30:48 -0700 Subject: [PATCH 1/2] Added d3format() function to mock slice in explorev2 Problem: table viz was not working in explorev2 due to d3format() not defined in mock slice. --- .../javascripts/explorev2/components/ChartContainer.jsx | 9 +++++++++ caravel/assets/javascripts/explorev2/index.jsx | 1 + caravel/assets/javascripts/explorev2/stores/store.js | 1 + caravel/viz.py | 1 + 4 files changed, 12 insertions(+) diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx index 32430736bf38e..d87aa09b7e776 100644 --- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx @@ -2,6 +2,7 @@ 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, @@ -9,6 +10,7 @@ const propTypes = { height: PropTypes.string.isRequired, sliceContainerId: PropTypes.string.isRequired, jsonEndpoint: PropTypes.string.isRequired, + column_formats: 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.column_formats[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, + column_formats: state.viz.column_formats, }; } diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx index 61778bb4ba5e3..47fe69036a659 100644 --- a/caravel/assets/javascripts/explorev2/index.jsx +++ b/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, + column_formats: bootstrapData.viz.column_formats, formData: { sliceId: bootstrapData.viz.form_data.slice_id, vizType: bootstrapData.viz.form_data.viz_type, diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js index 6ea89e6e3a148..709699498b4d7 100644 --- a/caravel/assets/javascripts/explorev2/stores/store.js +++ b/caravel/assets/javascripts/explorev2/stores/store.js @@ -37,6 +37,7 @@ export const initialState = { filters: [], filterColumnOpts: [], viz: { + column_formats: {}, formData: defaultFormData, }, }; diff --git a/caravel/viz.py b/caravel/viz.py index 33ef955015ab8..768b0813d81e8 100755 --- a/caravel/viz.py +++ b/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( From 1ea1d234388bd82237ccd6c0d6660492c283b269 Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Mon, 24 Oct 2016 15:34:58 -0700 Subject: [PATCH 2/2] Change column_formats to camel case --- .../javascripts/explorev2/components/ChartContainer.jsx | 6 +++--- caravel/assets/javascripts/explorev2/index.jsx | 2 +- caravel/assets/javascripts/explorev2/stores/store.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx index d87aa09b7e776..f54e3b62969c9 100644 --- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx @@ -10,7 +10,7 @@ const propTypes = { height: PropTypes.string.isRequired, sliceContainerId: PropTypes.string.isRequired, jsonEndpoint: PropTypes.string.isRequired, - column_formats: PropTypes.object, + columnFormats: PropTypes.object, }; class ChartContainer extends React.Component { @@ -50,7 +50,7 @@ class ChartContainer extends React.Component { }, d3format: (col, number) => { // mock d3format function in Slice object in caravel.js - const format = this.props.column_formats[col]; + const format = this.props.columnFormats[col]; return d3format(format, number); }, }; @@ -88,7 +88,7 @@ function mapStateToProps(state) { vizType: state.viz.formData.vizType, sliceContainerId: `slice-container-${state.viz.formData.sliceId}`, jsonEndpoint: state.viz.jsonEndPoint, - column_formats: state.viz.column_formats, + columnFormats: state.viz.columnFormats, }; } diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx index 47fe69036a659..b26857bb22fcf 100644 --- a/caravel/assets/javascripts/explorev2/index.jsx +++ b/caravel/assets/javascripts/explorev2/index.jsx @@ -20,7 +20,7 @@ const bootstrappedState = Object.assign(initialState, { viz: { jsonEndPoint: bootstrapData.viz.json_endpoint, data: bootstrapData.viz.data, - column_formats: bootstrapData.viz.column_formats, + columnFormats: bootstrapData.viz.column_formats, formData: { sliceId: bootstrapData.viz.form_data.slice_id, vizType: bootstrapData.viz.form_data.viz_type, diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js index 709699498b4d7..2b6f56051e602 100644 --- a/caravel/assets/javascripts/explorev2/stores/store.js +++ b/caravel/assets/javascripts/explorev2/stores/store.js @@ -37,7 +37,7 @@ export const initialState = { filters: [], filterColumnOpts: [], viz: { - column_formats: {}, + columnFormats: {}, formData: defaultFormData, }, };