pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from apache-superset/upgrade_simple

Browse Source 
chore: upgrade to deck.gl 7.x
This commit is contained in:
Maxime Beauchemin 2019-10-01 21:19:42 -07:00 committed by Yongjie Zhao
parent 369021dc3f
commit 6c895c9510
13 changed files with 90 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json
View File

@ -30,7 +30,7 @@
"d3-array": "^1.2.4",
"d3-color": "^1.2.0",
"d3-scale": "^2.1.2",
"deck.gl": "^5.3.5",
"deck.gl": "7.1.11",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"mapbox-gl": "^0.53.0",

32
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx
View File

@ -42,8 +42,9 @@ const propTypes = {
mapStyle: PropTypes.string,
mapboxApiAccessToken: PropTypes.string.isRequired,
setControlValue: PropTypes.func,
onViewportChange: PropTypes.func,
onValuesChange: PropTypes.func,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
};
const defaultProps = {
@ -51,23 +52,10 @@ const defaultProps = {
disabled: false,
mapStyle: 'light',
setControlValue: () => {},
onViewportChange: () => {},
onValuesChange: () => {},
};
export default class AnimatableDeckGLContainer extends React.Component {
constructor(props) {
super(props);
this.onViewportChange = this.onViewportChange.bind(this);
}
onViewportChange(viewport) {
const originalViewport = this.props.disabled
? { ...viewport }
: { ...viewport, height: viewport.height + PLAYSLIDER_HEIGHT };
this.props.onViewportChange(originalViewport);
}
export default class AnimatableDeckGLContainer extends React.PureComponent {
render() {
const {
start,
@ -83,24 +71,22 @@ export default class AnimatableDeckGLContainer extends React.Component {
setControlValue,
mapStyle,
mapboxApiAccessToken,
height,
width,
} = this.props;
const layers = getLayers(values);
// leave space for the play slider
const modifiedViewport = {
...viewport,
height: disabled ? viewport.height : viewport.height - PLAYSLIDER_HEIGHT,
};
return (
<div>
<DeckGLContainer
viewport={modifiedViewport}
viewport={viewport}
layers={layers}
setControlValue={setControlValue}
mapStyle={mapStyle}
mapboxApiAccessToken={mapboxApiAccessToken}
onViewportChange={this.onViewportChange}
bottomMargin={disabled ? 0 : PLAYSLIDER_HEIGHT}
width={width}
height={height}
/>
{!disabled && (
<PlaySlider

10
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx
View File

@ -74,6 +74,8 @@ const propTypes = {
payload: PropTypes.object.isRequired,
onAddFilter: PropTypes.func,
setTooltip: PropTypes.func,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
};
export default class CategoricalDeckGLContainer extends React.PureComponent {
@ -89,7 +91,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
this.getLayers = this.getLayers.bind(this);
this.onValuesChange = this.onValuesChange.bind(this);
this.onViewportChange = this.onViewportChange.bind(this);
this.toggleCategory = this.toggleCategory.bind(this);
this.showSingleCategory = this.showSingleCategory.bind(this);
}
@ -106,10 +107,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
});
}
onViewportChange(viewport) {
this.setState({ viewport });
}
getStateFromProps(props, state) {
const features = props.payload.data.features || [];
const timestamps = features.map(f => f.__timestamp);
@ -239,10 +236,11 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
onValuesChange={this.onValuesChange}
disabled={this.state.disabled}
viewport={this.state.viewport}
onViewportChange={this.onViewportChange}
mapboxApiAccessToken={this.props.mapboxApiKey}
mapStyle={this.props.formData.mapbox_style}
setControlValue={this.props.setControlValue}
width={this.props.width}
height={this.props.height}
>
<Legend
categories={this.state.categories}

81
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/DeckGLContainer.jsx
View File

@ -22,13 +22,12 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import MapGL from 'react-map-gl';
import { StaticMap } from 'react-map-gl';
import DeckGL from 'deck.gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { isEqual } from 'lodash';
import './css/deckgl.css';
const TICK = 2000; // milliseconds
const TICK = 250; // milliseconds
const propTypes = {
viewport: PropTypes.object.isRequired,
@ -36,62 +35,47 @@ const propTypes = {
setControlValue: PropTypes.func,
mapStyle: PropTypes.string,
mapboxApiAccessToken: PropTypes.string.isRequired,
onViewportChange: PropTypes.func,
children: PropTypes.node,
bottomMargin: PropTypes.number,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
};
const defaultProps = {
mapStyle: 'light',
onViewportChange: () => {},
setControlValue: () => {},
children: null,
bottomMargin: 0,
};
export default class DeckGLContainer extends React.Component {
constructor(props) {
super(props);
this.tick = this.tick.bind(this);
this.onViewportChange = this.onViewportChange.bind(this);
this.onViewStateChange = this.onViewStateChange.bind(this);
// This has to be placed after this.tick is bound to this
this.state = {
previousViewport: props.viewport,
timer: setInterval(this.tick, TICK),
viewState: props.viewport,
};
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.viewport !== prevState.viewport) {
return {
viewport: { ...nextProps.viewport },
previousViewport: prevState.viewport,
};
}
return null;
}
componentWillUnmount() {
clearInterval(this.state.timer);
}
onViewportChange(viewport) {
const vp = Object.assign({}, viewport);
// delete vp.width;
// delete vp.height;
const newVp = { ...this.state.previousViewport, ...vp };
// this.setState(() => ({ viewport: newVp }));
this.props.onViewportChange(newVp);
onViewStateChange({ viewState }) {
this.setState({ viewState, lastUpdate: Date.now() });
}
tick() {
// Limiting updating viewport controls through Redux at most 1*sec
// Deep compare is needed as shallow equality doesn't work here, viewport object
// changes id at every change
if (this.state && !isEqual(this.state.previousViewport, this.props.viewport)) {
// Rate limiting updating viewport controls as it triggers lotsa renders
const { lastUpdate } = this.state;
if (lastUpdate && Date.now() - lastUpdate > TICK) {
const setCV = this.props.setControlValue;
const vp = this.props.viewport;
if (setCV) {
setCV('viewport', vp);
setCV('viewport', this.state.viewState);
}
this.setState(() => ({ previousViewport: this.props.viewport }));
this.setState({ lastUpdate: null });
}
}
@ -105,17 +89,30 @@ export default class DeckGLContainer extends React.Component {
}
render() {
const { viewport } = this.props;
const { children, bottomMargin, height, width } = this.props;
const { viewState } = this.state;
const adjustedHeight = height - bottomMargin;
const layers = this.layers();
return (
<MapGL
{...viewport}
mapStyle={this.props.mapStyle}
onViewportChange={this.onViewportChange}
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
>
<DeckGL {...viewport} layers={this.layers()} initWebGLParameters />
</MapGL>
<div style={{ position: 'relative', width, height: adjustedHeight }}>
<DeckGL
width={width}
height={adjustedHeight}
layers={layers}
viewState={viewState}
onViewStateChange={this.onViewStateChange}
initWebGLParameters
controller
>
<StaticMap
mapStyle={this.props.mapStyle}
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
/>
</DeckGL>
{children}
</div>
);
}
}

19
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx
View File

@ -39,6 +39,8 @@ const propTypes = {
viewport: PropTypes.object.isRequired,
onAddFilter: PropTypes.func,
setTooltip: PropTypes.func,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
};
const defaultProps = {
onAddFilter() {},
@ -81,7 +83,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
}
render() {
const { formData, payload, setControlValue } = this.props;
const { formData, payload, setControlValue, height, width } = this.props;
const { layer, viewport } = this.state;
return (
@ -92,6 +94,8 @@ export function createDeckGLComponent(getLayer, getPoints) {
mapStyle={formData.mapbox_style}
setControlValue={setControlValue}
onViewportChange={this.onViewportChange}
width={width}
height={height}
/>
);
}
@ -104,7 +108,16 @@ export function createDeckGLComponent(getLayer, getPoints) {
export function createCategoricalDeckGLComponent(getLayer, getPoints) {
function Component(props) {
const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
const {
formData,
payload,
setControlValue,
onAddFilter,
setTooltip,
viewport,
width,
height,
} = props;
return (
<CategoricalDeckGLContainer
@ -117,6 +130,8 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
onAddFilter={onAddFilter}
setTooltip={setTooltip}
getPoints={getPoints}
width={width}
height={height}
/>
);
}

2
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx
View File

@ -32,7 +32,7 @@ function setTooltipContent(o) {
<div className="deckgl-tooltip">
<TooltipRow
label={`${t('Longitude and Latitude')}: `}
value={`${o.object.position[0]}, ${o.object.position[1]}`}
value={`${o.coordinate[0]}, ${o.coordinate[1]}`}
/>
<TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
</div>

2
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx
View File

@ -32,7 +32,7 @@ function setTooltipContent(o) {
<div className="deckgl-tooltip">
<TooltipRow
label={`${t('Centroid (Longitude and Latitude)')}: `}
value={`(${o.object.centroid[0]}, ${o.object.centroid[1]})`}
value={`(${o.coordinate[0]}, ${o.coordinate[1]})`}
/>
<TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
</div>

3
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Path/Path.jsx
View File

@ -60,6 +60,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
return new PathLayer({
id: `path-layer-${fd.slice_id}`,
getColor: d => d.color,
getPath: d => d.path,
getWidth: d => d.width,
data,
rounded: true,
widthScale: 1,

10
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx
View File

@ -137,6 +137,8 @@ const propTypes = {
viewport: PropTypes.object.isRequired,
onAddFilter: PropTypes.func,
setTooltip: PropTypes.func,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
};
const defaultProps = {
@ -153,7 +155,6 @@ class DeckGLPolygon extends React.Component {
this.getLayers = this.getLayers.bind(this);
this.onSelect = this.onSelect.bind(this);
this.onValuesChange = this.onValuesChange.bind(this);
this.onViewportChange = this.onViewportChange.bind(this);
}
static getDerivedStateFromProps(props, state) {
@ -224,10 +225,6 @@ class DeckGLPolygon extends React.Component {
});
}
onViewportChange(viewport) {
this.setState({ viewport });
}
getLayers(values) {
if (this.props.payload.data.features === undefined) {
return [];
@ -276,7 +273,8 @@ class DeckGLPolygon extends React.Component {
onValuesChange={this.onValuesChange}
disabled={disabled}
viewport={viewport}
onViewportChange={this.onViewportChange}
width={this.props.width}
height={this.props.height}
mapboxApiAccessToken={payload.data.mapboxApiKey}
mapStyle={formData.mapbox_style}
setControlValue={setControlValue}

4
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx
View File

@ -70,9 +70,11 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
id: `scatter-layer-${fd.slice_id}`,
data: dataWithRadius,
fp64: true,
getFillColor: d => d.color,
getRadius: d => d.radius,
radiusMinPixels: fd.min_radius || null,
radiusMaxPixels: fd.max_radius || null,
outline: false,
stroked: false,
...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
});
}

12
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx
View File

@ -42,7 +42,7 @@ function setTooltipContent(o) {
<div className="deckgl-tooltip">
<TooltipRow
label={`${t('Longitude and Latitude')}: `}
value={`${o.object.position[0]}, ${o.object.position[1]}`}
value={`${o.coordinate[0]}, ${o.coordinate[1]}`}
/>
<TooltipRow label={`${t('Weight')}: `} value={`${o.object.weight}`} />
</div>
@ -92,6 +92,8 @@ const propTypes = {
viewport: PropTypes.object.isRequired,
onAddFilter: PropTypes.func,
setTooltip: PropTypes.func,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
};
const defaultProps = {
onAddFilter() {},
@ -106,7 +108,6 @@ class DeckGLScreenGrid extends React.PureComponent {
this.getLayers = this.getLayers.bind(this);
this.onValuesChange = this.onValuesChange.bind(this);
this.onViewportChange = this.onViewportChange.bind(this);
}
static getDerivedStateFromProps(props, state) {
@ -151,10 +152,6 @@ class DeckGLScreenGrid extends React.PureComponent {
});
}
onViewportChange(viewport) {
this.setState({ viewport });
}
getLayers(values) {
const filters = [];
@ -190,7 +187,8 @@ class DeckGLScreenGrid extends React.PureComponent {
onValuesChange={this.onValuesChange}
disabled={this.state.disabled}
viewport={this.state.viewport}
onViewportChange={this.onViewportChange}
width={this.props.width}
height={this.props.height}
mapboxApiAccessToken={payload.data.mapboxApiKey}
mapStyle={formData.mapbox_style}
setControlValue={setControlValue}

2
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/common.jsx
View File

@ -98,7 +98,7 @@ export function commonLayerProps(formData, setTooltip, setTooltipContent, onSele
setTooltip({
content: tooltipContentGenerator(o),
x: o.x,
y: o.y + 30,
y: o.y,
});
} else {
setTooltip(null);

2
superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js
View File

@ -24,6 +24,7 @@ export default function transformProps(chartProps) {
return {
formData: rawFormData,
height,
onAddFilter,
payload: queryData,
setControlValue,
@ -33,5 +34,6 @@ export default function transformProps(chartProps) {
height,
width,
},
width,
};
}