You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2018/01/31 07:03:38 UTC
[incubator-superset] branch master updated: Refactoring deckgl
(#4293)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new c77bab8 Refactoring deckgl (#4293)
c77bab8 is described below
commit c77bab8160fac364bac2c46387b78ec13ea985b3
Author: Beto Dealmeida <ro...@dealmeida.net>
AuthorDate: Tue Jan 30 23:03:35 2018 -0800
Refactoring deckgl (#4293)
* Refactoring dekgl
* Refactor layers
* Standardize function name
* Fix exports
* Fix require
* Fix lint
---
superset/assets/visualizations/deckgl/factory.jsx | 25 -----------------
.../assets/visualizations/deckgl/layers/arc.jsx | 31 +++++++++++++++++++++-
.../visualizations/deckgl/layers/geojson.jsx | 31 +++++++++++++++++++++-
.../assets/visualizations/deckgl/layers/grid.jsx | 31 +++++++++++++++++++++-
.../assets/visualizations/deckgl/layers/hex.jsx | 31 +++++++++++++++++++++-
.../assets/visualizations/deckgl/layers/index.js | 16 +++++------
.../assets/visualizations/deckgl/layers/path.jsx | 31 +++++++++++++++++++++-
.../visualizations/deckgl/layers/polygon.jsx | 31 +++++++++++++++++++++-
.../visualizations/deckgl/layers/scatter.jsx | 31 +++++++++++++++++++++-
.../visualizations/deckgl/layers/screengrid.jsx | 31 +++++++++++++++++++++-
superset/assets/visualizations/main.js | 17 ++++++------
11 files changed, 256 insertions(+), 50 deletions(-)
diff --git a/superset/assets/visualizations/deckgl/factory.jsx b/superset/assets/visualizations/deckgl/factory.jsx
deleted file mode 100644
index fa6c372..0000000
--- a/superset/assets/visualizations/deckgl/factory.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import DeckGLContainer from './DeckGLContainer';
-import layerGenerators from './layers';
-
-export default function deckglFactory(slice, payload, setControlValue) {
- const fd = slice.formData;
- const layer = layerGenerators[fd.viz_type](fd, payload, slice);
- const viewport = {
- ...fd.viewport,
- width: slice.width(),
- height: slice.height(),
- };
- ReactDOM.render(
- <DeckGLContainer
- mapboxApiAccessToken={payload.data.mapboxApiKey}
- viewport={viewport}
- layers={[layer]}
- mapStyle={fd.mapbox_style}
- setControlValue={setControlValue}
- />,
- document.getElementById(slice.containerId),
- );
-}
diff --git a/superset/assets/visualizations/deckgl/layers/arc.jsx b/superset/assets/visualizations/deckgl/layers/arc.jsx
index 8e04e9a..ebeff3c 100644
--- a/superset/assets/visualizations/deckgl/layers/arc.jsx
+++ b/superset/assets/visualizations/deckgl/layers/arc.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { ArcLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function arcLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const fc = fd.color_picker;
let data = payload.data.arcs.map(d => ({
@@ -24,3 +29,27 @@ export default function arcLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckArc(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckArc,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/geojson.jsx b/superset/assets/visualizations/deckgl/layers/geojson.jsx
index 7792d23..7f09363 100644
--- a/superset/assets/visualizations/deckgl/layers/geojson.jsx
+++ b/superset/assets/visualizations/deckgl/layers/geojson.jsx
@@ -1,5 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { GeoJsonLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import { hexToRGB } from '../../../javascripts/modules/colors';
import sandboxedEval from '../../../javascripts/modules/sandbox';
@@ -53,7 +58,7 @@ const recurseGeoJson = (node, propOverrides, extraProps) => {
}
};
-export default function geoJsonLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const fc = fd.fill_color_picker;
const sc = fd.stroke_color_picker;
@@ -87,3 +92,27 @@ export default function geoJsonLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckGeoJson(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckGeoJson,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/grid.jsx b/superset/assets/visualizations/deckgl/layers/grid.jsx
index ed970d2..1e7ff1d 100644
--- a/superset/assets/visualizations/deckgl/layers/grid.jsx
+++ b/superset/assets/visualizations/deckgl/layers/grid.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { GridLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
let data = payload.data.features.map(d => ({
@@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckGrid(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckGrid,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/hex.jsx b/superset/assets/visualizations/deckgl/layers/hex.jsx
index 86fb534..7dc4d8b 100644
--- a/superset/assets/visualizations/deckgl/layers/hex.jsx
+++ b/superset/assets/visualizations/deckgl/layers/hex.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { HexagonLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
let data = payload.data.features.map(d => ({
@@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckHex(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckHex,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/index.js b/superset/assets/visualizations/deckgl/layers/index.js
index 4e354e5..d8d25d5 100644
--- a/superset/assets/visualizations/deckgl/layers/index.js
+++ b/superset/assets/visualizations/deckgl/layers/index.js
@@ -1,12 +1,12 @@
/* eslint camelcase: 0 */
-import deck_grid from './grid';
-import deck_screengrid from './screengrid';
-import deck_path from './path';
-import deck_hex from './hex';
-import deck_scatter from './scatter';
-import deck_geojson from './geojson';
-import deck_arc from './arc';
-import deck_polygon from './polygon';
+import { getLayer as deck_grid } from './grid';
+import { getLayer as deck_screengrid } from './screengrid';
+import { getLayer as deck_path } from './path';
+import { getLayer as deck_hex } from './hex';
+import { getLayer as deck_scatter } from './scatter';
+import { getLayer as deck_geojson } from './geojson';
+import { getLayer as deck_arc } from './arc';
+import { getLayer as deck_polygon } from './polygon';
const layerGenerators = {
deck_grid,
diff --git a/superset/assets/visualizations/deckgl/layers/path.jsx b/superset/assets/visualizations/deckgl/layers/path.jsx
index df2c1b0..a20c2bb 100644
--- a/superset/assets/visualizations/deckgl/layers/path.jsx
+++ b/superset/assets/visualizations/deckgl/layers/path.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { PathLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
const fixedColor = [c.r, c.g, c.b, 255 * c.a];
@@ -27,3 +32,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckPath(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckPath,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/polygon.jsx b/superset/assets/visualizations/deckgl/layers/polygon.jsx
index 8862827..920fb6a 100644
--- a/superset/assets/visualizations/deckgl/layers/polygon.jsx
+++ b/superset/assets/visualizations/deckgl/layers/polygon.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { PolygonLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function polygonLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const fc = fd.fill_color_picker;
let data = payload.data.features.map(d => ({
@@ -26,3 +31,27 @@ export default function polygonLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckPolygon(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckPolygon,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/scatter.jsx b/superset/assets/visualizations/deckgl/layers/scatter.jsx
index 0f591a2..ed1dd79 100644
--- a/superset/assets/visualizations/deckgl/layers/scatter.jsx
+++ b/superset/assets/visualizations/deckgl/layers/scatter.jsx
@@ -1,11 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { ScatterplotLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import { getColorFromScheme, hexToRGB } from '../../../javascripts/modules/colors';
import { unitToRadius } from '../../../javascripts/modules/geo';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
const fixedColor = [c.r, c.g, c.b, 255 * c.a];
@@ -42,3 +47,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckScatter(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckScatter,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/screengrid.jsx b/superset/assets/visualizations/deckgl/layers/screengrid.jsx
index ca589cd..7494c67 100644
--- a/superset/assets/visualizations/deckgl/layers/screengrid.jsx
+++ b/superset/assets/visualizations/deckgl/layers/screengrid.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { ScreenGridLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
let data = payload.data.features.map(d => ({
@@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckScreenGrid(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckScreenGrid,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/main.js b/superset/assets/visualizations/main.js
index 93c12e8..40b6592 100644
--- a/superset/assets/visualizations/main.js
+++ b/superset/assets/visualizations/main.js
@@ -1,5 +1,4 @@
/* eslint-disable global-require */
-import deckglFactory from './deckgl/factory';
// You ***should*** use these to reference viz_types in code
export const VIZ_TYPES = {
@@ -89,14 +88,14 @@ const vizMap = {
[VIZ_TYPES.event_flow]: require('./EventFlow.jsx'),
[VIZ_TYPES.paired_ttest]: require('./paired_ttest.jsx'),
[VIZ_TYPES.partition]: require('./partition.js'),
- [VIZ_TYPES.deck_scatter]: deckglFactory,
- [VIZ_TYPES.deck_screengrid]: deckglFactory,
- [VIZ_TYPES.deck_grid]: deckglFactory,
- [VIZ_TYPES.deck_hex]: deckglFactory,
- [VIZ_TYPES.deck_path]: deckglFactory,
- [VIZ_TYPES.deck_geojson]: deckglFactory,
- [VIZ_TYPES.deck_arc]: deckglFactory,
- [VIZ_TYPES.deck_polygon]: deckglFactory,
+ [VIZ_TYPES.deck_scatter]: require('./deckgl/layers/scatter.jsx').default,
+ [VIZ_TYPES.deck_screengrid]: require('./deckgl/layers/screengrid.jsx').default,
+ [VIZ_TYPES.deck_grid]: require('./deckgl/layers/grid.jsx').default,
+ [VIZ_TYPES.deck_hex]: require('./deckgl/layers/hex.jsx').default,
+ [VIZ_TYPES.deck_path]: require('./deckgl/layers/path.jsx').default,
+ [VIZ_TYPES.deck_geojson]: require('./deckgl/layers/geojson.jsx').default,
+ [VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default,
+ [VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default,
[VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'),
};
export default vizMap;
--
To stop receiving notification emails like this one, please contact
maximebeauchemin@apache.org.