mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
Merge pull request #1 from apache-superset/upgrade_simple
chore: upgrade to deck.gl 7.x
This commit is contained in:
parent
369021dc3f
commit
6c895c9510
@ -30,7 +30,7 @@
|
|||||||
"d3-array": "^1.2.4",
|
"d3-array": "^1.2.4",
|
||||||
"d3-color": "^1.2.0",
|
"d3-color": "^1.2.0",
|
||||||
"d3-scale": "^2.1.2",
|
"d3-scale": "^2.1.2",
|
||||||
"deck.gl": "^5.3.5",
|
"deck.gl": "7.1.11",
|
||||||
"jquery": "^3.4.1",
|
"jquery": "^3.4.1",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"mapbox-gl": "^0.53.0",
|
"mapbox-gl": "^0.53.0",
|
||||||
|
@ -42,8 +42,9 @@ const propTypes = {
|
|||||||
mapStyle: PropTypes.string,
|
mapStyle: PropTypes.string,
|
||||||
mapboxApiAccessToken: PropTypes.string.isRequired,
|
mapboxApiAccessToken: PropTypes.string.isRequired,
|
||||||
setControlValue: PropTypes.func,
|
setControlValue: PropTypes.func,
|
||||||
onViewportChange: PropTypes.func,
|
|
||||||
onValuesChange: PropTypes.func,
|
onValuesChange: PropTypes.func,
|
||||||
|
width: PropTypes.number.isRequired,
|
||||||
|
height: PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
@ -51,23 +52,10 @@ const defaultProps = {
|
|||||||
disabled: false,
|
disabled: false,
|
||||||
mapStyle: 'light',
|
mapStyle: 'light',
|
||||||
setControlValue: () => {},
|
setControlValue: () => {},
|
||||||
onViewportChange: () => {},
|
|
||||||
onValuesChange: () => {},
|
onValuesChange: () => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class AnimatableDeckGLContainer extends React.Component {
|
export default class AnimatableDeckGLContainer extends React.PureComponent {
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
start,
|
start,
|
||||||
@ -83,24 +71,22 @@ export default class AnimatableDeckGLContainer extends React.Component {
|
|||||||
setControlValue,
|
setControlValue,
|
||||||
mapStyle,
|
mapStyle,
|
||||||
mapboxApiAccessToken,
|
mapboxApiAccessToken,
|
||||||
|
height,
|
||||||
|
width,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const layers = getLayers(values);
|
const layers = getLayers(values);
|
||||||
|
|
||||||
// leave space for the play slider
|
|
||||||
const modifiedViewport = {
|
|
||||||
...viewport,
|
|
||||||
height: disabled ? viewport.height : viewport.height - PLAYSLIDER_HEIGHT,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<DeckGLContainer
|
<DeckGLContainer
|
||||||
viewport={modifiedViewport}
|
viewport={viewport}
|
||||||
layers={layers}
|
layers={layers}
|
||||||
setControlValue={setControlValue}
|
setControlValue={setControlValue}
|
||||||
mapStyle={mapStyle}
|
mapStyle={mapStyle}
|
||||||
mapboxApiAccessToken={mapboxApiAccessToken}
|
mapboxApiAccessToken={mapboxApiAccessToken}
|
||||||
onViewportChange={this.onViewportChange}
|
bottomMargin={disabled ? 0 : PLAYSLIDER_HEIGHT}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
/>
|
/>
|
||||||
{!disabled && (
|
{!disabled && (
|
||||||
<PlaySlider
|
<PlaySlider
|
||||||
|
@ -74,6 +74,8 @@ const propTypes = {
|
|||||||
payload: PropTypes.object.isRequired,
|
payload: PropTypes.object.isRequired,
|
||||||
onAddFilter: PropTypes.func,
|
onAddFilter: PropTypes.func,
|
||||||
setTooltip: PropTypes.func,
|
setTooltip: PropTypes.func,
|
||||||
|
width: PropTypes.number.isRequired,
|
||||||
|
height: PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class CategoricalDeckGLContainer extends React.PureComponent {
|
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.getLayers = this.getLayers.bind(this);
|
||||||
this.onValuesChange = this.onValuesChange.bind(this);
|
this.onValuesChange = this.onValuesChange.bind(this);
|
||||||
this.onViewportChange = this.onViewportChange.bind(this);
|
|
||||||
this.toggleCategory = this.toggleCategory.bind(this);
|
this.toggleCategory = this.toggleCategory.bind(this);
|
||||||
this.showSingleCategory = this.showSingleCategory.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) {
|
getStateFromProps(props, state) {
|
||||||
const features = props.payload.data.features || [];
|
const features = props.payload.data.features || [];
|
||||||
const timestamps = features.map(f => f.__timestamp);
|
const timestamps = features.map(f => f.__timestamp);
|
||||||
@ -239,10 +236,11 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
|||||||
onValuesChange={this.onValuesChange}
|
onValuesChange={this.onValuesChange}
|
||||||
disabled={this.state.disabled}
|
disabled={this.state.disabled}
|
||||||
viewport={this.state.viewport}
|
viewport={this.state.viewport}
|
||||||
onViewportChange={this.onViewportChange}
|
|
||||||
mapboxApiAccessToken={this.props.mapboxApiKey}
|
mapboxApiAccessToken={this.props.mapboxApiKey}
|
||||||
mapStyle={this.props.formData.mapbox_style}
|
mapStyle={this.props.formData.mapbox_style}
|
||||||
setControlValue={this.props.setControlValue}
|
setControlValue={this.props.setControlValue}
|
||||||
|
width={this.props.width}
|
||||||
|
height={this.props.height}
|
||||||
>
|
>
|
||||||
<Legend
|
<Legend
|
||||||
categories={this.state.categories}
|
categories={this.state.categories}
|
||||||
|
@ -22,13 +22,12 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import MapGL from 'react-map-gl';
|
import { StaticMap } from 'react-map-gl';
|
||||||
import DeckGL from 'deck.gl';
|
import DeckGL from 'deck.gl';
|
||||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||||
import { isEqual } from 'lodash';
|
|
||||||
import './css/deckgl.css';
|
import './css/deckgl.css';
|
||||||
|
|
||||||
const TICK = 2000; // milliseconds
|
const TICK = 250; // milliseconds
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
viewport: PropTypes.object.isRequired,
|
viewport: PropTypes.object.isRequired,
|
||||||
@ -36,62 +35,47 @@ const propTypes = {
|
|||||||
setControlValue: PropTypes.func,
|
setControlValue: PropTypes.func,
|
||||||
mapStyle: PropTypes.string,
|
mapStyle: PropTypes.string,
|
||||||
mapboxApiAccessToken: PropTypes.string.isRequired,
|
mapboxApiAccessToken: PropTypes.string.isRequired,
|
||||||
onViewportChange: PropTypes.func,
|
children: PropTypes.node,
|
||||||
|
bottomMargin: PropTypes.number,
|
||||||
|
width: PropTypes.number.isRequired,
|
||||||
|
height: PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
mapStyle: 'light',
|
mapStyle: 'light',
|
||||||
onViewportChange: () => {},
|
|
||||||
setControlValue: () => {},
|
setControlValue: () => {},
|
||||||
|
children: null,
|
||||||
|
bottomMargin: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class DeckGLContainer extends React.Component {
|
export default class DeckGLContainer extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.tick = this.tick.bind(this);
|
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 has to be placed after this.tick is bound to this
|
||||||
this.state = {
|
this.state = {
|
||||||
previousViewport: props.viewport,
|
|
||||||
timer: setInterval(this.tick, TICK),
|
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() {
|
componentWillUnmount() {
|
||||||
clearInterval(this.state.timer);
|
clearInterval(this.state.timer);
|
||||||
}
|
}
|
||||||
|
|
||||||
onViewportChange(viewport) {
|
onViewStateChange({ viewState }) {
|
||||||
const vp = Object.assign({}, viewport);
|
this.setState({ viewState, lastUpdate: Date.now() });
|
||||||
// delete vp.width;
|
|
||||||
// delete vp.height;
|
|
||||||
const newVp = { ...this.state.previousViewport, ...vp };
|
|
||||||
|
|
||||||
// this.setState(() => ({ viewport: newVp }));
|
|
||||||
this.props.onViewportChange(newVp);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tick() {
|
tick() {
|
||||||
// Limiting updating viewport controls through Redux at most 1*sec
|
// Rate limiting updating viewport controls as it triggers lotsa renders
|
||||||
// Deep compare is needed as shallow equality doesn't work here, viewport object
|
const { lastUpdate } = this.state;
|
||||||
// changes id at every change
|
if (lastUpdate && Date.now() - lastUpdate > TICK) {
|
||||||
if (this.state && !isEqual(this.state.previousViewport, this.props.viewport)) {
|
|
||||||
const setCV = this.props.setControlValue;
|
const setCV = this.props.setControlValue;
|
||||||
const vp = this.props.viewport;
|
|
||||||
if (setCV) {
|
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() {
|
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 (
|
return (
|
||||||
<MapGL
|
<div style={{ position: 'relative', width, height: adjustedHeight }}>
|
||||||
{...viewport}
|
<DeckGL
|
||||||
mapStyle={this.props.mapStyle}
|
width={width}
|
||||||
onViewportChange={this.onViewportChange}
|
height={adjustedHeight}
|
||||||
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
|
layers={layers}
|
||||||
>
|
viewState={viewState}
|
||||||
<DeckGL {...viewport} layers={this.layers()} initWebGLParameters />
|
onViewStateChange={this.onViewStateChange}
|
||||||
</MapGL>
|
initWebGLParameters
|
||||||
|
controller
|
||||||
|
>
|
||||||
|
<StaticMap
|
||||||
|
mapStyle={this.props.mapStyle}
|
||||||
|
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
|
||||||
|
/>
|
||||||
|
</DeckGL>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -39,6 +39,8 @@ const propTypes = {
|
|||||||
viewport: PropTypes.object.isRequired,
|
viewport: PropTypes.object.isRequired,
|
||||||
onAddFilter: PropTypes.func,
|
onAddFilter: PropTypes.func,
|
||||||
setTooltip: PropTypes.func,
|
setTooltip: PropTypes.func,
|
||||||
|
width: PropTypes.number.isRequired,
|
||||||
|
height: PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
onAddFilter() {},
|
onAddFilter() {},
|
||||||
@ -81,7 +83,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { formData, payload, setControlValue } = this.props;
|
const { formData, payload, setControlValue, height, width } = this.props;
|
||||||
const { layer, viewport } = this.state;
|
const { layer, viewport } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -92,6 +94,8 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
|||||||
mapStyle={formData.mapbox_style}
|
mapStyle={formData.mapbox_style}
|
||||||
setControlValue={setControlValue}
|
setControlValue={setControlValue}
|
||||||
onViewportChange={this.onViewportChange}
|
onViewportChange={this.onViewportChange}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -104,7 +108,16 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
|||||||
|
|
||||||
export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
||||||
function Component(props) {
|
function Component(props) {
|
||||||
const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
|
const {
|
||||||
|
formData,
|
||||||
|
payload,
|
||||||
|
setControlValue,
|
||||||
|
onAddFilter,
|
||||||
|
setTooltip,
|
||||||
|
viewport,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CategoricalDeckGLContainer
|
<CategoricalDeckGLContainer
|
||||||
@ -117,6 +130,8 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
|||||||
onAddFilter={onAddFilter}
|
onAddFilter={onAddFilter}
|
||||||
setTooltip={setTooltip}
|
setTooltip={setTooltip}
|
||||||
getPoints={getPoints}
|
getPoints={getPoints}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -32,7 +32,7 @@ function setTooltipContent(o) {
|
|||||||
<div className="deckgl-tooltip">
|
<div className="deckgl-tooltip">
|
||||||
<TooltipRow
|
<TooltipRow
|
||||||
label={`${t('Longitude and Latitude')}: `}
|
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}`} />
|
<TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,7 +32,7 @@ function setTooltipContent(o) {
|
|||||||
<div className="deckgl-tooltip">
|
<div className="deckgl-tooltip">
|
||||||
<TooltipRow
|
<TooltipRow
|
||||||
label={`${t('Centroid (Longitude and Latitude)')}: `}
|
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}`} />
|
<TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -60,6 +60,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
|||||||
|
|
||||||
return new PathLayer({
|
return new PathLayer({
|
||||||
id: `path-layer-${fd.slice_id}`,
|
id: `path-layer-${fd.slice_id}`,
|
||||||
|
getColor: d => d.color,
|
||||||
|
getPath: d => d.path,
|
||||||
|
getWidth: d => d.width,
|
||||||
data,
|
data,
|
||||||
rounded: true,
|
rounded: true,
|
||||||
widthScale: 1,
|
widthScale: 1,
|
||||||
|
@ -137,6 +137,8 @@ const propTypes = {
|
|||||||
viewport: PropTypes.object.isRequired,
|
viewport: PropTypes.object.isRequired,
|
||||||
onAddFilter: PropTypes.func,
|
onAddFilter: PropTypes.func,
|
||||||
setTooltip: PropTypes.func,
|
setTooltip: PropTypes.func,
|
||||||
|
width: PropTypes.number.isRequired,
|
||||||
|
height: PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
@ -153,7 +155,6 @@ class DeckGLPolygon extends React.Component {
|
|||||||
this.getLayers = this.getLayers.bind(this);
|
this.getLayers = this.getLayers.bind(this);
|
||||||
this.onSelect = this.onSelect.bind(this);
|
this.onSelect = this.onSelect.bind(this);
|
||||||
this.onValuesChange = this.onValuesChange.bind(this);
|
this.onValuesChange = this.onValuesChange.bind(this);
|
||||||
this.onViewportChange = this.onViewportChange.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromProps(props, state) {
|
static getDerivedStateFromProps(props, state) {
|
||||||
@ -224,10 +225,6 @@ class DeckGLPolygon extends React.Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onViewportChange(viewport) {
|
|
||||||
this.setState({ viewport });
|
|
||||||
}
|
|
||||||
|
|
||||||
getLayers(values) {
|
getLayers(values) {
|
||||||
if (this.props.payload.data.features === undefined) {
|
if (this.props.payload.data.features === undefined) {
|
||||||
return [];
|
return [];
|
||||||
@ -276,7 +273,8 @@ class DeckGLPolygon extends React.Component {
|
|||||||
onValuesChange={this.onValuesChange}
|
onValuesChange={this.onValuesChange}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
viewport={viewport}
|
viewport={viewport}
|
||||||
onViewportChange={this.onViewportChange}
|
width={this.props.width}
|
||||||
|
height={this.props.height}
|
||||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||||
mapStyle={formData.mapbox_style}
|
mapStyle={formData.mapbox_style}
|
||||||
setControlValue={setControlValue}
|
setControlValue={setControlValue}
|
||||||
|
@ -70,9 +70,11 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
|||||||
id: `scatter-layer-${fd.slice_id}`,
|
id: `scatter-layer-${fd.slice_id}`,
|
||||||
data: dataWithRadius,
|
data: dataWithRadius,
|
||||||
fp64: true,
|
fp64: true,
|
||||||
|
getFillColor: d => d.color,
|
||||||
|
getRadius: d => d.radius,
|
||||||
radiusMinPixels: fd.min_radius || null,
|
radiusMinPixels: fd.min_radius || null,
|
||||||
radiusMaxPixels: fd.max_radius || null,
|
radiusMaxPixels: fd.max_radius || null,
|
||||||
outline: false,
|
stroked: false,
|
||||||
...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
|
...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,7 @@ function setTooltipContent(o) {
|
|||||||
<div className="deckgl-tooltip">
|
<div className="deckgl-tooltip">
|
||||||
<TooltipRow
|
<TooltipRow
|
||||||
label={`${t('Longitude and Latitude')}: `}
|
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}`} />
|
<TooltipRow label={`${t('Weight')}: `} value={`${o.object.weight}`} />
|
||||||
</div>
|
</div>
|
||||||
@ -92,6 +92,8 @@ const propTypes = {
|
|||||||
viewport: PropTypes.object.isRequired,
|
viewport: PropTypes.object.isRequired,
|
||||||
onAddFilter: PropTypes.func,
|
onAddFilter: PropTypes.func,
|
||||||
setTooltip: PropTypes.func,
|
setTooltip: PropTypes.func,
|
||||||
|
width: PropTypes.number.isRequired,
|
||||||
|
height: PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
onAddFilter() {},
|
onAddFilter() {},
|
||||||
@ -106,7 +108,6 @@ class DeckGLScreenGrid extends React.PureComponent {
|
|||||||
|
|
||||||
this.getLayers = this.getLayers.bind(this);
|
this.getLayers = this.getLayers.bind(this);
|
||||||
this.onValuesChange = this.onValuesChange.bind(this);
|
this.onValuesChange = this.onValuesChange.bind(this);
|
||||||
this.onViewportChange = this.onViewportChange.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromProps(props, state) {
|
static getDerivedStateFromProps(props, state) {
|
||||||
@ -151,10 +152,6 @@ class DeckGLScreenGrid extends React.PureComponent {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onViewportChange(viewport) {
|
|
||||||
this.setState({ viewport });
|
|
||||||
}
|
|
||||||
|
|
||||||
getLayers(values) {
|
getLayers(values) {
|
||||||
const filters = [];
|
const filters = [];
|
||||||
|
|
||||||
@ -190,7 +187,8 @@ class DeckGLScreenGrid extends React.PureComponent {
|
|||||||
onValuesChange={this.onValuesChange}
|
onValuesChange={this.onValuesChange}
|
||||||
disabled={this.state.disabled}
|
disabled={this.state.disabled}
|
||||||
viewport={this.state.viewport}
|
viewport={this.state.viewport}
|
||||||
onViewportChange={this.onViewportChange}
|
width={this.props.width}
|
||||||
|
height={this.props.height}
|
||||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||||
mapStyle={formData.mapbox_style}
|
mapStyle={formData.mapbox_style}
|
||||||
setControlValue={setControlValue}
|
setControlValue={setControlValue}
|
||||||
|
@ -98,7 +98,7 @@ export function commonLayerProps(formData, setTooltip, setTooltipContent, onSele
|
|||||||
setTooltip({
|
setTooltip({
|
||||||
content: tooltipContentGenerator(o),
|
content: tooltipContentGenerator(o),
|
||||||
x: o.x,
|
x: o.x,
|
||||||
y: o.y + 30,
|
y: o.y,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
setTooltip(null);
|
setTooltip(null);
|
||||||
|
@ -24,6 +24,7 @@ export default function transformProps(chartProps) {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
formData: rawFormData,
|
formData: rawFormData,
|
||||||
|
height,
|
||||||
onAddFilter,
|
onAddFilter,
|
||||||
payload: queryData,
|
payload: queryData,
|
||||||
setControlValue,
|
setControlValue,
|
||||||
@ -33,5 +34,6 @@ export default function transformProps(chartProps) {
|
|||||||
height,
|
height,
|
||||||
width,
|
width,
|
||||||
},
|
},
|
||||||
|
width,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user