From d662e3644201086dca39b0808545dc571b16380b Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 18 Oct 2018 15:44:21 -0700 Subject: [PATCH] [Ready] Define ChartProps data structure (#6125) * rename basicChartInput to chartProps * replace BasicChartInput with ChartProps class * Add transformProps to deck.gl plugins * Add space * delete BasicChartInput * add width and height as part of ChartProps and update transformProps * remove width and height * remove adaptors from deck.gl components * remove deck.gl creataAdaptor --- superset/assets/src/utils/createAdaptor.jsx | 29 ++++++++++++----- .../BigNumber/transformProps.js | 6 ++-- .../visualizations/Calendar/transformProps.js | 5 +-- .../visualizations/Chord/transformProps.js | 6 ++-- .../CountryMap/transformProps.js | 6 ++-- .../EventFlow/transformProps.js | 4 +-- .../FilterBox/transformProps.js | 4 +-- .../ForceDirected/transformProps.js | 6 ++-- .../visualizations/Heatmap/transformProps.js | 6 ++-- .../Histogram/transformProps.js | 6 ++-- .../visualizations/Horizon/transformProps.js | 5 +-- .../visualizations/MapBox/transformProps.js | 6 ++-- .../PairedTTest/transformProps.js | 4 +-- .../ParallelCoordinates/transformProps.js | 6 ++-- .../Partition/transformProps.js | 6 ++-- .../PivotTable/transformProps.js | 5 +-- .../src/visualizations/Rose/transformProps.js | 6 ++-- .../visualizations/Sankey/transformProps.js | 6 ++-- .../visualizations/Sunburst/transformProps.js | 6 ++-- .../visualizations/Table/transformProps.js | 6 ++-- .../TimeTable/transformProps.js | 5 +-- .../visualizations/Treemap/transformProps.js | 6 ++-- .../visualizations/WorldMap/transformProps.js | 5 +-- .../visualizations/core/models/ChartProps.js | 31 +++++++++++++++++++ .../src/visualizations/deckgl/Multi/Multi.jsx | 3 +- .../deckgl/Multi/MultiChartPlugin.js | 2 ++ .../visualizations/deckgl/createAdaptor.jsx | 30 ------------------ .../visualizations/deckgl/layers/Arc/Arc.jsx | 3 +- .../deckgl/layers/Arc/ArcChartPlugin.js | 2 ++ .../deckgl/layers/Geojson/Geojson.jsx | 3 +- .../layers/Geojson/GeojsonChartPlugin.js | 2 ++ .../deckgl/layers/Grid/Grid.jsx | 3 +- .../deckgl/layers/Grid/GridChartPlugin.js | 2 ++ .../visualizations/deckgl/layers/Hex/Hex.jsx | 3 +- .../deckgl/layers/Hex/HexChartPlugin.js | 2 ++ .../deckgl/layers/Path/Path.jsx | 3 +- .../deckgl/layers/Path/PathChartPlugin.js | 2 ++ .../deckgl/layers/Polygon/Polygon.jsx | 3 +- .../layers/Polygon/PolygonChartPlugin.js | 2 ++ .../deckgl/layers/Scatter/Scatter.jsx | 3 +- .../layers/Scatter/ScatterChartPlugin.js | 2 ++ .../deckgl/layers/Screengrid/Screengrid.jsx | 3 +- .../Screengrid/ScreengridChartPlugin.js | 2 ++ .../visualizations/deckgl/transformProps.js | 24 ++++++++++++++ superset/assets/src/visualizations/index.js | 26 ++++++++++------ .../visualizations/models/BasicChartInput.js | 19 ------------ .../src/visualizations/nvd3/transformProps.js | 8 +++-- .../wordcloud/transformProps.js | 6 ++-- 48 files changed, 207 insertions(+), 132 deletions(-) create mode 100644 superset/assets/src/visualizations/core/models/ChartProps.js delete mode 100644 superset/assets/src/visualizations/deckgl/createAdaptor.jsx create mode 100644 superset/assets/src/visualizations/deckgl/transformProps.js delete mode 100644 superset/assets/src/visualizations/models/BasicChartInput.js diff --git a/superset/assets/src/utils/createAdaptor.jsx b/superset/assets/src/utils/createAdaptor.jsx index 0de1d25dc8..c107e0db93 100644 --- a/superset/assets/src/utils/createAdaptor.jsx +++ b/superset/assets/src/utils/createAdaptor.jsx @@ -1,18 +1,33 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import BasicChartInput from '../visualizations/models/BasicChartInput'; +import ChartProps from '../visualizations/core/models/ChartProps'; const IDENTITY = x => x; export default function createAdaptor(Component, transformProps = IDENTITY) { return function adaptor(slice, payload, setControlValue) { - const basicChartInput = new BasicChartInput(slice, payload, setControlValue); + const chartProps = new ChartProps({ + width: slice.width(), + height: slice.height(), + annotationData: slice.annotationData, + datasource: slice.datasource, + filters: slice.getFilters(), + formData: slice.formData, + onAddFilter(...args) { + slice.addFilter(...args); + }, + onError(...args) { + slice.error(...args); + }, + payload, + setControlValue, + setTooltip(...args) { + slice.setTooltip(...args); + }, + }); + ReactDOM.render( - , + , document.querySelector(slice.selector), ); }; diff --git a/superset/assets/src/visualizations/BigNumber/transformProps.js b/superset/assets/src/visualizations/BigNumber/transformProps.js index 7b06874a04..41a9df5a37 100644 --- a/superset/assets/src/visualizations/BigNumber/transformProps.js +++ b/superset/assets/src/visualizations/BigNumber/transformProps.js @@ -5,8 +5,8 @@ import { renderTooltipFactory } from './BigNumber'; const TIME_COLUMN = '__timestamp'; -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorPicker, compareLag: compareLagInput, @@ -65,6 +65,8 @@ export default function transformProps(basicChartInput) { const formatValue = d3FormatPreset(yAxisFormat); return { + width, + height, bigNumber, className, formatBigNumber: formatValue, diff --git a/superset/assets/src/visualizations/Calendar/transformProps.js b/superset/assets/src/visualizations/Calendar/transformProps.js index e97e1665f1..77cd83075c 100644 --- a/superset/assets/src/visualizations/Calendar/transformProps.js +++ b/superset/assets/src/visualizations/Calendar/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload, datasource } = basicChartInput; +export default function transformProps(chartProps) { + const { height, formData, payload, datasource } = chartProps; const { cellPadding, cellRadius, @@ -16,6 +16,7 @@ export default function transformProps(basicChartInput) { const { verboseMap } = datasource; return { + height, data: payload.data, cellPadding, cellRadius, diff --git a/superset/assets/src/visualizations/Chord/transformProps.js b/superset/assets/src/visualizations/Chord/transformProps.js index f52a1dc32e..7ccbfaa2cc 100644 --- a/superset/assets/src/visualizations/Chord/transformProps.js +++ b/superset/assets/src/visualizations/Chord/transformProps.js @@ -1,8 +1,10 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { yAxisFormat, colorScheme } = formData; return { + width, + height, data: payload.data, numberFormat: yAxisFormat, colorScheme, diff --git a/superset/assets/src/visualizations/CountryMap/transformProps.js b/superset/assets/src/visualizations/CountryMap/transformProps.js index 4026335684..6c59edaf6f 100644 --- a/superset/assets/src/visualizations/CountryMap/transformProps.js +++ b/superset/assets/src/visualizations/CountryMap/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { linearColorScheme, numberFormat, @@ -7,6 +7,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: payload.data, country: selectCountry, linearColorScheme, diff --git a/superset/assets/src/visualizations/EventFlow/transformProps.js b/superset/assets/src/visualizations/EventFlow/transformProps.js index b5176936a6..5e2866dc56 100644 --- a/superset/assets/src/visualizations/EventFlow/transformProps.js +++ b/superset/assets/src/visualizations/EventFlow/transformProps.js @@ -5,8 +5,8 @@ import { ENTITY_ID, } from '@data-ui/event-flow'; -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { formData, payload } = chartProps; const { allColumnsX, entity, diff --git a/superset/assets/src/visualizations/FilterBox/transformProps.js b/superset/assets/src/visualizations/FilterBox/transformProps.js index e5077f8b7c..f846c40eb3 100644 --- a/superset/assets/src/visualizations/FilterBox/transformProps.js +++ b/superset/assets/src/visualizations/FilterBox/transformProps.js @@ -1,4 +1,4 @@ -export default function transformProps(basicChartInput) { +export default function transformProps(chartProps) { const { datasource, filters, @@ -6,7 +6,7 @@ export default function transformProps(basicChartInput) { onAddFilter, payload, rawDatasource, - } = basicChartInput; + } = chartProps; const { dateFilter, groupby, diff --git a/superset/assets/src/visualizations/ForceDirected/transformProps.js b/superset/assets/src/visualizations/ForceDirected/transformProps.js index 115f353960..9c526e47cf 100644 --- a/superset/assets/src/visualizations/ForceDirected/transformProps.js +++ b/superset/assets/src/visualizations/ForceDirected/transformProps.js @@ -1,8 +1,10 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { charge, linkLength } = formData; return { + width, + height, data: payload.data, charge, linkLength, diff --git a/superset/assets/src/visualizations/Heatmap/transformProps.js b/superset/assets/src/visualizations/Heatmap/transformProps.js index 9c4ad10621..39d327ac80 100644 --- a/superset/assets/src/visualizations/Heatmap/transformProps.js +++ b/superset/assets/src/visualizations/Heatmap/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { bottomMargin, canvasImageRendering, @@ -21,6 +21,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: payload.data, bottomMargin, canvasImageRendering, diff --git a/superset/assets/src/visualizations/Histogram/transformProps.js b/superset/assets/src/visualizations/Histogram/transformProps.js index 0c522a1d35..6786d96729 100644 --- a/superset/assets/src/visualizations/Histogram/transformProps.js +++ b/superset/assets/src/visualizations/Histogram/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorScheme, linkLength, @@ -10,6 +10,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: payload.data, binCount: parseInt(linkLength, 10), colorScheme, diff --git a/superset/assets/src/visualizations/Horizon/transformProps.js b/superset/assets/src/visualizations/Horizon/transformProps.js index b5838c2f96..04d9c0bcb6 100644 --- a/superset/assets/src/visualizations/Horizon/transformProps.js +++ b/superset/assets/src/visualizations/Horizon/transformProps.js @@ -1,11 +1,12 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, formData, payload } = chartProps; const { horizonColorScale, seriesHeight, } = formData; return { + width, data: payload.data, seriesHeight: parseInt(seriesHeight, 10), colorScale: horizonColorScale, diff --git a/superset/assets/src/visualizations/MapBox/transformProps.js b/superset/assets/src/visualizations/MapBox/transformProps.js index 4180eef868..4f9d70cb38 100644 --- a/superset/assets/src/visualizations/MapBox/transformProps.js +++ b/superset/assets/src/visualizations/MapBox/transformProps.js @@ -1,8 +1,8 @@ import supercluster from 'supercluster'; import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from './MapBox'; -export default function transformProps(basicChartInput) { - const { formData, onError, payload, setControlValue } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, onError, payload, setControlValue } = chartProps; const { bounds, geoJSON, @@ -59,6 +59,8 @@ export default function transformProps(basicChartInput) { clusterer.load(geoJSON.features); return { + width, + height, aggregatorName: pandasAggfunc, bounds, clusterer, diff --git a/superset/assets/src/visualizations/PairedTTest/transformProps.js b/superset/assets/src/visualizations/PairedTTest/transformProps.js index 84abe5b1e7..45df8728c6 100644 --- a/superset/assets/src/visualizations/PairedTTest/transformProps.js +++ b/superset/assets/src/visualizations/PairedTTest/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { formData, payload } = chartProps; const { groupby, liftvaluePrecision, diff --git a/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js b/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js index 6f5c7c4b61..edc1159456 100644 --- a/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js +++ b/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { includeSeries, linearColorScheme, @@ -10,6 +10,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: payload.data, includeSeries, linearColorScheme, diff --git a/superset/assets/src/visualizations/Partition/transformProps.js b/superset/assets/src/visualizations/Partition/transformProps.js index 04ed059c27..e19a7ff646 100644 --- a/superset/assets/src/visualizations/Partition/transformProps.js +++ b/superset/assets/src/visualizations/Partition/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { datasource, formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, datasource, formData, payload } = chartProps; const { colorScheme, dateTimeFormat, @@ -16,6 +16,8 @@ export default function transformProps(basicChartInput) { const { verboseMap } = datasource; return { + width, + height, data: payload.data, colorScheme, dateTimeFormat, diff --git a/superset/assets/src/visualizations/PivotTable/transformProps.js b/superset/assets/src/visualizations/PivotTable/transformProps.js index 880cd2845d..85196f799f 100644 --- a/superset/assets/src/visualizations/PivotTable/transformProps.js +++ b/superset/assets/src/visualizations/PivotTable/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { datasource, formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { height, datasource, formData, payload } = chartProps; const { groupby, numberFormat, @@ -10,6 +10,7 @@ export default function transformProps(basicChartInput) { } = datasource; return { + height, data: payload.data, columnFormats, numGroups: groupby.length, diff --git a/superset/assets/src/visualizations/Rose/transformProps.js b/superset/assets/src/visualizations/Rose/transformProps.js index afc09eab21..8af9d682e5 100644 --- a/superset/assets/src/visualizations/Rose/transformProps.js +++ b/superset/assets/src/visualizations/Rose/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorScheme, dateTimeFormat, @@ -9,6 +9,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: payload.data, colorScheme, dateTimeFormat, diff --git a/superset/assets/src/visualizations/Sankey/transformProps.js b/superset/assets/src/visualizations/Sankey/transformProps.js index 4d354b2ef3..efc9da5648 100644 --- a/superset/assets/src/visualizations/Sankey/transformProps.js +++ b/superset/assets/src/visualizations/Sankey/transformProps.js @@ -1,8 +1,10 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorScheme } = formData; return { + width, + height, data: payload.data, colorScheme, }; diff --git a/superset/assets/src/visualizations/Sunburst/transformProps.js b/superset/assets/src/visualizations/Sunburst/transformProps.js index 465bd7c34a..fa6e25d74e 100644 --- a/superset/assets/src/visualizations/Sunburst/transformProps.js +++ b/superset/assets/src/visualizations/Sunburst/transformProps.js @@ -1,8 +1,10 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorScheme, metric, secondaryMetric } = formData; return { + width, + height, data: payload.data, colorScheme, metrics: [metric, secondaryMetric], diff --git a/superset/assets/src/visualizations/Table/transformProps.js b/superset/assets/src/visualizations/Table/transformProps.js index 381931b4d5..ab93a71e9c 100644 --- a/superset/assets/src/visualizations/Table/transformProps.js +++ b/superset/assets/src/visualizations/Table/transformProps.js @@ -1,11 +1,12 @@ -export default function transformProps(basicChartInput) { +export default function transformProps(chartProps) { const { + height, datasource, filters, formData, onAddFilter, payload, - } = basicChartInput; + } = chartProps; const { alignPn, colorPn, @@ -40,6 +41,7 @@ export default function transformProps(basicChartInput) { }); return { + height, data: records, alignPositiveNegative: alignPn, colorPositiveNegative: colorPn, diff --git a/superset/assets/src/visualizations/TimeTable/transformProps.js b/superset/assets/src/visualizations/TimeTable/transformProps.js index 11a1a1abff..d880faeb79 100644 --- a/superset/assets/src/visualizations/TimeTable/transformProps.js +++ b/superset/assets/src/visualizations/TimeTable/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { datasource, formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { height, datasource, formData, payload } = chartProps; const { columnCollection, groupby, @@ -40,6 +40,7 @@ export default function transformProps(basicChartInput) { }); return { + height, data: records, columnConfigs: columnCollection, rows, diff --git a/superset/assets/src/visualizations/Treemap/transformProps.js b/superset/assets/src/visualizations/Treemap/transformProps.js index c0c3c03234..df5f29a032 100644 --- a/superset/assets/src/visualizations/Treemap/transformProps.js +++ b/superset/assets/src/visualizations/Treemap/transformProps.js @@ -1,5 +1,5 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorScheme, numberFormat, @@ -7,6 +7,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: payload.data, colorScheme, numberFormat, diff --git a/superset/assets/src/visualizations/WorldMap/transformProps.js b/superset/assets/src/visualizations/WorldMap/transformProps.js index 4e56b03c06..011a674210 100644 --- a/superset/assets/src/visualizations/WorldMap/transformProps.js +++ b/superset/assets/src/visualizations/WorldMap/transformProps.js @@ -1,8 +1,9 @@ -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { height, formData, payload } = chartProps; const { maxBubbleSize, showBubbles } = formData; return { + height, data: payload.data, maxBubbleSize: parseInt(maxBubbleSize, 10), showBubbles, diff --git a/superset/assets/src/visualizations/core/models/ChartProps.js b/superset/assets/src/visualizations/core/models/ChartProps.js new file mode 100644 index 0000000000..7f10cec30c --- /dev/null +++ b/superset/assets/src/visualizations/core/models/ChartProps.js @@ -0,0 +1,31 @@ +import convertKeysToCamelCase from '../../../utils/convertKeysToCamelCase'; + +export default class ChartProps { + constructor({ + width, + height, + annotationData, + datasource, + filters, + formData, + onAddFilter, + onError, + payload, + setControlValue, + setTooltip, + }) { + this.width = width; + this.height = height; + this.annotationData = annotationData; + this.datasource = convertKeysToCamelCase(datasource); + this.rawDatasource = datasource; + this.filters = filters; + this.formData = convertKeysToCamelCase(formData); + this.rawFormData = formData; + this.onAddFilter = onAddFilter; + this.onError = onError; + this.payload = payload; + this.setControlValue = setControlValue; + this.setTooltip = setTooltip; + } +} diff --git a/superset/assets/src/visualizations/deckgl/Multi/Multi.jsx b/superset/assets/src/visualizations/deckgl/Multi/Multi.jsx index 99bd1a8731..64c1ec6135 100644 --- a/superset/assets/src/visualizations/deckgl/Multi/Multi.jsx +++ b/superset/assets/src/visualizations/deckgl/Multi/Multi.jsx @@ -4,7 +4,6 @@ import $ from 'jquery'; import DeckGLContainer from '../DeckGLContainer'; import { getExploreLongUrl } from '../../../explore/exploreUtils'; import layerGenerators from '../layers'; -import createAdaptor from '../createAdaptor'; const propTypes = { formData: PropTypes.object.isRequired, @@ -84,4 +83,4 @@ class DeckMulti extends React.PureComponent { DeckMulti.propTypes = propTypes; -export default createAdaptor(DeckMulti); +export default DeckMulti; diff --git a/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js b/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js index fd869f848a..95f2bd5777 100644 --- a/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../core/models/ChartPlugin'; import ChartMetadata from '../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Multiple Layers', @@ -14,6 +15,7 @@ export default class MultiChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Multi.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/createAdaptor.jsx b/superset/assets/src/visualizations/deckgl/createAdaptor.jsx deleted file mode 100644 index 080bf682cc..0000000000 --- a/superset/assets/src/visualizations/deckgl/createAdaptor.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -const IDENTITY = x => x; - -class DeckGlChartInput { - constructor(slice, payload, setControlValue) { - this.formData = slice.formData; - this.payload = payload; - this.setControlValue = setControlValue; - this.viewport = { - ...this.formData.viewport, - width: slice.width(), - height: slice.height(), - }; - - this.onAddFilter = ((...args) => { slice.addFilter(...args); }); - this.setTooltip = ((...args) => { slice.setTooltip(...args); }); - } -} - -export default function createAdaptor(Component, transformProps = IDENTITY) { - return function adaptor(slice, payload, setControlValue) { - const chartInput = new DeckGlChartInput(slice, payload, setControlValue); - ReactDOM.render( - , - document.querySelector(slice.selector), - ); - }; -} diff --git a/superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx b/superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx index d74c21dca3..a80385dd34 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx @@ -1,6 +1,5 @@ import { ArcLayer } from 'deck.gl'; import { commonLayerProps } from '../common'; -import createAdaptor from '../../createAdaptor'; import { createCategoricalDeckGLComponent } from '../../factory'; function getPoints(data) { @@ -26,4 +25,4 @@ export function getLayer(fd, payload, onAddFilter, setTooltip) { }); } -export default createAdaptor(createCategoricalDeckGLComponent(getLayer, getPoints)); +export default createCategoricalDeckGLComponent(getLayer, getPoints); diff --git a/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js index 62606af08e..d6cb9b3dea 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Arc', @@ -14,6 +15,7 @@ export default class ArcChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Arc.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx b/superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx index f9f0b6eda1..469b724619 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx @@ -7,7 +7,6 @@ import DeckGLContainer from '../../DeckGLContainer'; import { hexToRGB } from '../../../../modules/colors'; import sandboxedEval from '../../../../modules/sandbox'; import { commonLayerProps } from '../common'; -import createAdaptor from '../../createAdaptor'; const propertyMap = { fillColor: 'fillColor', @@ -137,4 +136,4 @@ function deckGeoJson(props) { deckGeoJson.propTypes = propTypes; deckGeoJson.defaultProps = defaultProps; -export default createAdaptor(deckGeoJson); +export default deckGeoJson; diff --git a/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js index 5f1ccabd4a..15895de041 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Geojson', @@ -14,6 +15,7 @@ export default class GeojsonChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Geojson.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx b/superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx index 63dd12c20b..5f32849604 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx @@ -1,7 +1,6 @@ import { GridLayer } from 'deck.gl'; import { commonLayerProps } from '../common'; import sandboxedEval from '../../../../modules/sandbox'; -import createAdaptor from '../../createAdaptor'; import { createDeckGLComponent } from '../../factory'; export function getLayer(formData, payload, onAddFilter, setTooltip) { @@ -37,4 +36,4 @@ function getPoints(data) { return data.map(d => d.position); } -export default createAdaptor(createDeckGLComponent(getLayer, getPoints)); +export default createDeckGLComponent(getLayer, getPoints); diff --git a/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js index 71ca50e927..36ae452e31 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Grid', @@ -14,6 +15,7 @@ export default class GridChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Grid.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx b/superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx index 6919819581..8b6f0983ad 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx @@ -1,7 +1,6 @@ import { HexagonLayer } from 'deck.gl'; import { commonLayerProps } from '../common'; import sandboxedEval from '../../../../modules/sandbox'; -import createAdaptor from '../../createAdaptor'; import { createDeckGLComponent } from '../../factory'; export function getLayer(formData, payload, onAddFilter, setTooltip) { @@ -37,4 +36,4 @@ function getPoints(data) { return data.map(d => d.position); } -export default createAdaptor(createDeckGLComponent(getLayer, getPoints)); +export default createDeckGLComponent(getLayer, getPoints); diff --git a/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js index a84a94be42..9550107290 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl 3D Hexagon', @@ -14,6 +15,7 @@ export default class HexChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Hex.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx b/superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx index 052868d204..8a6099effd 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx @@ -1,7 +1,6 @@ import { PathLayer } from 'deck.gl'; import { commonLayerProps } from '../common'; import sandboxedEval from '../../../../modules/sandbox'; -import createAdaptor from '../../createAdaptor'; import { createDeckGLComponent } from '../../factory'; export function getLayer(formData, payload, onAddFilter, setTooltip) { @@ -37,4 +36,4 @@ function getPoints(data) { return points; } -export default createAdaptor(createDeckGLComponent(getLayer, getPoints)); +export default createDeckGLComponent(getLayer, getPoints); diff --git a/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js index bf04448fdb..422a06d3a9 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Path', @@ -14,6 +15,7 @@ export default class PathChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Path.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx b/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx index 82164c67e3..922e4a0301 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx @@ -4,7 +4,6 @@ import { flatten } from 'lodash'; import { colorScalerFactory } from '../../../../modules/colors'; import { commonLayerProps } from '../common'; import sandboxedEval from '../../../../modules/sandbox'; -import createAdaptor from '../../createAdaptor'; import { createDeckGLComponent } from '../../factory'; function getPoints(features) { @@ -49,4 +48,4 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) { }); } -export default createAdaptor(createDeckGLComponent(getLayer, getPoints)); +export default createDeckGLComponent(getLayer, getPoints); diff --git a/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js index f6f0395ee7..e8e0d195eb 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Polygon', @@ -14,6 +15,7 @@ export default class PolygonChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Polygon.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx b/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx index f20a7238e8..e522e73745 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx @@ -1,6 +1,5 @@ import { ScatterplotLayer } from 'deck.gl'; import { commonLayerProps } from '../common'; -import createAdaptor from '../../createAdaptor'; import { createCategoricalDeckGLComponent } from '../../factory'; import { unitToRadius } from '../../../../modules/geo'; @@ -33,4 +32,4 @@ export function getLayer(fd, payload, slice) { }); } -export default createAdaptor(createCategoricalDeckGLComponent(getLayer, getPoints)); +export default createCategoricalDeckGLComponent(getLayer, getPoints); diff --git a/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js index a0919b5623..d381e344eb 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Scatterplot', @@ -14,6 +15,7 @@ export default class ScatterChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Scatter.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/layers/Screengrid/Screengrid.jsx b/superset/assets/src/visualizations/deckgl/layers/Screengrid/Screengrid.jsx index 7e7767ab79..4611debfba 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Screengrid/Screengrid.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Screengrid/Screengrid.jsx @@ -7,7 +7,6 @@ import AnimatableDeckGLContainer from '../../AnimatableDeckGLContainer'; import { getPlaySliderParams } from '../../../../modules/time'; import sandboxedEval from '../../../../modules/sandbox'; import { commonLayerProps, fitViewport } from '../common'; -import createAdaptor from '../../createAdaptor'; function getPoints(data) { return data.map(d => d.position); @@ -135,4 +134,4 @@ class DeckGLScreenGrid extends React.PureComponent { DeckGLScreenGrid.propTypes = propTypes; DeckGLScreenGrid.defaultProps = defaultProps; -export default createAdaptor(DeckGLScreenGrid); +export default DeckGLScreenGrid; diff --git a/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js index c237395d8e..193fd7f522 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js +++ b/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js @@ -1,6 +1,7 @@ import ChartPlugin from '../../../core/models/ChartPlugin'; import ChartMetadata from '../../../core/models/ChartMetadata'; import thumbnail from './images/thumbnail.png'; +import transformProps from '../../transformProps'; const metadata = new ChartMetadata({ name: 'deck.gl Screen Grid', @@ -14,6 +15,7 @@ export default class ScreengridChartPlugin extends ChartPlugin { super({ metadata, loadChart: () => import('./Screengrid.jsx'), + transformProps, }); } } diff --git a/superset/assets/src/visualizations/deckgl/transformProps.js b/superset/assets/src/visualizations/deckgl/transformProps.js new file mode 100644 index 0000000000..fdff97b01e --- /dev/null +++ b/superset/assets/src/visualizations/deckgl/transformProps.js @@ -0,0 +1,24 @@ +export default function transformProps(chartProps) { + const { + width, + height, + rawFormData, + payload, + setControlValue, + onAddFilter, + setTooltip, + } = chartProps; + + return { + formData: rawFormData, + payload, + setControlValue, + viewport: { + ...rawFormData.viewport, + width, + height, + }, + onAddFilter, + setTooltip, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 2e4610e4af..52945be974 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -1,3 +1,6 @@ +import createAdaptor from '../utils/createAdaptor'; +import transformProps from './deckgl/transformProps'; + /* eslint-disable global-require */ // You ***should*** use these to reference viz_types in code @@ -55,10 +58,13 @@ export const VIZ_TYPES = { const loadVis = promise => promise.then((module) => { const defaultExport = module.default || module; - // deckgl visualizations don't use esModules, fix it? return defaultExport.default || defaultExport; }); + +const loadDeckGLVis = promise => + loadVis(promise).then(module => createAdaptor(module, transformProps)); + const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3/adaptor.jsx')); const vizMap = { @@ -117,25 +123,25 @@ const vizMap = { [VIZ_TYPES.partition]: () => loadVis(import(/* webpackChunkName: "partition" */ './Partition/adaptor.jsx')), [VIZ_TYPES.deck_scatter]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/Scatter/Scatter.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/Scatter/Scatter.jsx')), [VIZ_TYPES.deck_screengrid]: () => - loadVis( + loadDeckGLVis( import(/* webpackChunkName: "deckgl/layers/screengrid" */ './deckgl/layers/Screengrid/Screengrid.jsx'), ), [VIZ_TYPES.deck_grid]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/Grid/Grid.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/Grid/Grid.jsx')), [VIZ_TYPES.deck_hex]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/Hex/Hex.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/Hex/Hex.jsx')), [VIZ_TYPES.deck_path]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/Path/Path.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/Path/Path.jsx')), [VIZ_TYPES.deck_geojson]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/Geojson/Geojson.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/Geojson/Geojson.jsx')), [VIZ_TYPES.deck_arc]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/Arc/Arc.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/Arc/Arc.jsx')), [VIZ_TYPES.deck_polygon]: () => - loadVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/Polygon/Polygon.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/Polygon/Polygon.jsx')), [VIZ_TYPES.deck_multi]: () => - loadVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/Multi/Multi.jsx')), + loadDeckGLVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/Multi/Multi.jsx')), [VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './Rose/adaptor.jsx')), }; diff --git a/superset/assets/src/visualizations/models/BasicChartInput.js b/superset/assets/src/visualizations/models/BasicChartInput.js deleted file mode 100644 index d4a5a32c49..0000000000 --- a/superset/assets/src/visualizations/models/BasicChartInput.js +++ /dev/null @@ -1,19 +0,0 @@ -import convertKeysToCamelCase from '../../utils/convertKeysToCamelCase'; - -export default class BasicChartInput { - constructor(slice, payload, setControlValue) { - this.annotationData = slice.annotationData; - this.datasource = convertKeysToCamelCase(slice.datasource); - this.rawDatasource = slice.datasource; - this.filters = slice.getFilters(); - this.formData = convertKeysToCamelCase(slice.formData); - this.onAddFilter = (...args) => { - slice.addFilter(...args); - }; - this.onError = (...args) => { - slice.error(...args); - }; - this.payload = payload; - this.setControlValue = setControlValue; - } -} diff --git a/superset/assets/src/visualizations/nvd3/transformProps.js b/superset/assets/src/visualizations/nvd3/transformProps.js index 4445b912eb..0ff56bb37e 100644 --- a/superset/assets/src/visualizations/nvd3/transformProps.js +++ b/superset/assets/src/visualizations/nvd3/transformProps.js @@ -1,15 +1,17 @@ import { isTruthy } from '../../utils/common'; import { formatLabel } from './utils'; -export default function transformProps(basicChartInput) { +export default function transformProps(chartProps) { const { + width, + height, annotationData, datasource, formData, onError, onAddFilter, payload, - } = basicChartInput; + } = chartProps; const { annotationLayers, @@ -63,6 +65,8 @@ export default function transformProps(basicChartInput) { : rawData; return { + width, + height, data, annotationData, annotationLayers, diff --git a/superset/assets/src/visualizations/wordcloud/transformProps.js b/superset/assets/src/visualizations/wordcloud/transformProps.js index 7400a3af31..ef824e9f6b 100644 --- a/superset/assets/src/visualizations/wordcloud/transformProps.js +++ b/superset/assets/src/visualizations/wordcloud/transformProps.js @@ -9,8 +9,8 @@ function transformData(data, formData) { return transformedData; } -export default function transformProps(basicChartInput) { - const { formData, payload } = basicChartInput; +export default function transformProps(chartProps) { + const { width, height, formData, payload } = chartProps; const { colorScheme, rotation, @@ -19,6 +19,8 @@ export default function transformProps(basicChartInput) { } = formData; return { + width, + height, data: transformData(payload.data, formData), colorScheme, rotation,