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

feat: make all deckgl charts handle their own tooltips (#13)

Browse Source 
* feat: make all deckgl charts handle their own tooltips

* fix: use destructuring
This commit is contained in:
Krist Wongsuphasawat 2020-03-19 16:30:42 -07:00 committed by Yongjie Zhao
parent f3e5a10518
commit 8fbeba101c
8 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}
};

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

@ -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);
}
};

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

@ -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}

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

@ -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}

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

@ -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;

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

@ -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);
}
};

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

@ -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}

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

@ -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,