mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat: make all deckgl charts handle their own tooltips (#13)
* feat: make all deckgl charts handle their own tooltips * fix: use destructuring
This commit is contained in:
parent
f3e5a10518
commit
8fbeba101c
@ -58,8 +58,9 @@ export default class AnimatableDeckGLContainer extends React.PureComponent {
|
||||
containerRef = React.createRef();
|
||||
|
||||
setTooltip = tooltip => {
|
||||
if (this.containerRef.current) {
|
||||
this.containerRef.current.setTooltip(tooltip);
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -66,7 +66,6 @@ const propTypes = {
|
||||
getPoints: PropTypes.func.isRequired,
|
||||
payload: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
@ -147,7 +146,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
}
|
||||
|
||||
getLayers(values) {
|
||||
const { getLayer, payload, formData: fd, onAddFilter, setTooltip } = this.props;
|
||||
const { getLayer, payload, formData: fd, onAddFilter } = this.props;
|
||||
let features = payload.data.features ? [...payload.data.features] : [];
|
||||
|
||||
// Add colors from categories or fixed color
|
||||
@ -177,7 +176,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
data: { ...payload.data, features },
|
||||
};
|
||||
|
||||
return [getLayer(fd, filteredPayload, onAddFilter, setTooltip)];
|
||||
return [getLayer(fd, filteredPayload, onAddFilter, this.setTooltip)];
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
@ -228,8 +227,9 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
}
|
||||
|
||||
setTooltip = tooltip => {
|
||||
if (this.containerRef.current) {
|
||||
this.containerRef.current.setTooltip(tooltip);
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -36,16 +36,16 @@ const propTypes = {
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
setTooltip() {},
|
||||
onSelect() {},
|
||||
};
|
||||
|
||||
class DeckMulti extends React.PureComponent {
|
||||
containerRef = React.createRef();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { subSlicesLayers: {} };
|
||||
@ -96,7 +96,7 @@ class DeckMulti extends React.PureComponent {
|
||||
subsliceCopy.form_data,
|
||||
json,
|
||||
this.props.onAddFilter,
|
||||
this.props.setTooltip,
|
||||
this.setTooltip,
|
||||
[],
|
||||
this.props.onSelect,
|
||||
);
|
||||
@ -111,6 +111,13 @@ class DeckMulti extends React.PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
setTooltip = tooltip => {
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { payload, formData, setControlValue } = this.props;
|
||||
const { subSlicesLayers } = this.state;
|
||||
@ -119,6 +126,7 @@ class DeckMulti extends React.PureComponent {
|
||||
|
||||
return (
|
||||
<DeckGLContainer
|
||||
ref={this.containerRef}
|
||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||
viewport={this.state.viewport || this.props.viewport}
|
||||
layers={layers}
|
||||
|
@ -35,18 +35,18 @@ const propTypes = {
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
setTooltip() {},
|
||||
};
|
||||
|
||||
export function createDeckGLComponent(getLayer, getPoints) {
|
||||
// Higher order component
|
||||
class Component extends React.PureComponent {
|
||||
containerRef = React.createRef();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -80,19 +80,26 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
||||
this.setState({ viewport });
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
computeLayer(props) {
|
||||
const { formData, payload, onAddFilter, setTooltip } = props;
|
||||
const { formData, payload, onAddFilter } = props;
|
||||
|
||||
return getLayer(formData, payload, onAddFilter, setTooltip);
|
||||
return getLayer(formData, payload, onAddFilter, this.setTooltip);
|
||||
}
|
||||
|
||||
setTooltip = tooltip => {
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { formData, payload, setControlValue, height, width } = this.props;
|
||||
const { layer, viewport } = this.state;
|
||||
|
||||
return (
|
||||
<DeckGLContainer
|
||||
ref={this.containerRef}
|
||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||
viewport={viewport}
|
||||
layers={[layer]}
|
||||
@ -113,7 +120,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
||||
|
||||
export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
||||
function Component(props) {
|
||||
const { formData, payload, setControlValue, setTooltip, viewport, width, height } = props;
|
||||
const { formData, payload, setControlValue, viewport, width, height } = props;
|
||||
|
||||
return (
|
||||
<CategoricalDeckGLContainer
|
||||
@ -123,7 +130,6 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
||||
viewport={viewport}
|
||||
getLayer={getLayer}
|
||||
payload={payload}
|
||||
setTooltip={setTooltip}
|
||||
getPoints={getPoints}
|
||||
width={width}
|
||||
height={height}
|
||||
|
@ -136,35 +136,45 @@ const propTypes = {
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
setTooltip() {},
|
||||
};
|
||||
|
||||
function deckGeoJson(props) {
|
||||
const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
|
||||
class DeckGLGeoJson extends React.Component {
|
||||
containerRef = React.createRef();
|
||||
|
||||
// TODO get this to work
|
||||
// if (formData.autozoom) {
|
||||
// viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
|
||||
// }
|
||||
setTooltip = tooltip => {
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
const layer = getLayer(formData, payload, onAddFilter, setTooltip);
|
||||
render() {
|
||||
const { formData, payload, setControlValue, onAddFilter, viewport } = this.props;
|
||||
|
||||
return (
|
||||
<DeckGLContainer
|
||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||
viewport={viewport}
|
||||
layers={[layer]}
|
||||
mapStyle={formData.mapbox_style}
|
||||
setControlValue={setControlValue}
|
||||
/>
|
||||
);
|
||||
// TODO get this to work
|
||||
// if (formData.autozoom) {
|
||||
// viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
|
||||
// }
|
||||
|
||||
const layer = getLayer(formData, payload, onAddFilter, this.setTooltip);
|
||||
|
||||
return (
|
||||
<DeckGLContainer
|
||||
ref={this.containerRef}
|
||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||
viewport={viewport}
|
||||
layers={[layer]}
|
||||
mapStyle={formData.mapbox_style}
|
||||
setControlValue={setControlValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
deckGeoJson.propTypes = propTypes;
|
||||
deckGeoJson.defaultProps = defaultProps;
|
||||
DeckGLGeoJson.propTypes = propTypes;
|
||||
DeckGLGeoJson.defaultProps = defaultProps;
|
||||
|
||||
export default deckGeoJson;
|
||||
export default DeckGLGeoJson;
|
||||
|
@ -259,8 +259,9 @@ class DeckGLPolygon extends React.Component {
|
||||
}
|
||||
|
||||
setTooltip = tooltip => {
|
||||
if (this.containerRef.current) {
|
||||
this.containerRef.current.setTooltip(tooltip);
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -89,16 +89,16 @@ const propTypes = {
|
||||
setControlValue: PropTypes.func.isRequired,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
setTooltip() {},
|
||||
};
|
||||
|
||||
class DeckGLScreenGrid extends React.PureComponent {
|
||||
containerRef = React.createRef();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -170,19 +170,27 @@ class DeckGLScreenGrid extends React.PureComponent {
|
||||
this.props.formData,
|
||||
this.props.payload,
|
||||
this.props.onAddFilter,
|
||||
this.props.setTooltip,
|
||||
this.setTooltip,
|
||||
filters,
|
||||
);
|
||||
|
||||
return [layer];
|
||||
}
|
||||
|
||||
setTooltip = tooltip => {
|
||||
const { current } = this.containerRef;
|
||||
if (current) {
|
||||
current.setTooltip(tooltip);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { formData, payload, setControlValue } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AnimatableDeckGLContainer
|
||||
ref={this.containerRef}
|
||||
aggregation
|
||||
getLayers={this.getLayers}
|
||||
start={this.state.start}
|
||||
|
@ -20,7 +20,7 @@ const NOOP = () => {};
|
||||
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, rawFormData, queryData, hooks } = chartProps;
|
||||
const { onAddFilter = NOOP, setControlValue = NOOP, setTooltip = NOOP } = hooks;
|
||||
const { onAddFilter = NOOP, setControlValue = NOOP } = hooks;
|
||||
|
||||
return {
|
||||
formData: rawFormData,
|
||||
@ -28,7 +28,6 @@ export default function transformProps(chartProps) {
|
||||
onAddFilter,
|
||||
payload: queryData,
|
||||
setControlValue,
|
||||
setTooltip,
|
||||
viewport: {
|
||||
...rawFormData.viewport,
|
||||
height,
|
||||
|
Loading…
Reference in New Issue
Block a user