mirror of https://github.com/apache/superset.git
Refactoring deckgl (#4293)
* Refactoring dekgl * Refactor layers * Standardize function name * Fix exports * Fix require * Fix lint
This commit is contained in:
parent
724c3f48a4
commit
c77bab8160
|
@ -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),
|
||||
);
|
||||
}
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue