diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json index 7915f8990b5b..f92027f835ab 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json @@ -42,7 +42,8 @@ "react-bootstrap-slider": "2.1.5", "react-map-gl": "^4.0.10", "underscore": "^1.8.3", - "urijs": "^1.18.10" + "urijs": "^1.18.10", + "xss": "^1.0.6" }, "peerDependencies": { "@superset-ui/chart": "^0.12.0", diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx index fccfaf519a9e..23e13b52eb61 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx @@ -55,6 +55,14 @@ const defaultProps = { }; export default class AnimatableDeckGLContainer extends React.PureComponent { + containerRef = React.createRef(); + + setTooltip = tooltip => { + if (this.containerRef.current) { + this.containerRef.current.setTooltip(tooltip); + } + }; + render() { const { start, @@ -78,6 +86,7 @@ export default class AnimatableDeckGLContainer extends React.PureComponent { return (
{ + if (this.containerRef.current) { + this.containerRef.current.setTooltip(tooltip); + } + }; + render() { return (
{ + this.setState({ tooltip }); + }; + render() { const { children, bottomMargin, height, width } = this.props; - const { viewState } = this.state; + const { viewState, tooltip } = this.state; const adjustedHeight = height - bottomMargin; const layers = this.layers(); return ( -
- - - - {children} -
+ <> +
+ + + + {children} +
+ + ); } } diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/components/Tooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/components/Tooltip.tsx new file mode 100644 index 000000000000..c75703a5fef2 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/components/Tooltip.tsx @@ -0,0 +1,60 @@ +import React, { useMemo, CSSProperties } from 'react'; +import { filterXSS } from 'xss'; + +export type TooltipProps = { + tooltip: + | { + x: number; + y: number; + content: string; + } + | null + | undefined; +}; + +export default function Tooltip(props: TooltipProps) { + const { tooltip } = props; + if (typeof tooltip === 'undefined' || tooltip === null) { + return null; + } + + const { x, y, content } = tooltip; + + // eslint-disable-next-line react-hooks/rules-of-hooks + const style: CSSProperties = useMemo( + () => ({ + position: 'absolute', + top: `${y}px`, + left: `${x}px`, + padding: '8px', + margin: '8px', + background: 'rgba(0, 0, 0, 0.8)', + color: '#fff', + maxWidth: '300px', + fontSize: '12px', + zIndex: 9, + pointerEvents: 'none', + }), + [x, y], + ); + + if (typeof content === 'string') { + // eslint-disable-next-line react-hooks/rules-of-hooks + const contentHtml = useMemo( + () => ({ + __html: filterXSS(content, { stripIgnoreTag: true }), + }), + [content], + ); + return ( +
+
+
+ ); + } + + return
{content}
; +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx index 6dc0bf6c13c9..25b0baae7e6c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx @@ -56,10 +56,13 @@ function setTooltipContent(formData) { return (
- + {o.object.name && } + {o.object[formData.line_column] && ( + + )} {formData.metric && ( )} @@ -103,8 +106,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip, selected, o return baseColor; }; + const tooltipContentGenerator = - fd.line_column && fd.metric && ['geohash', 'zipcode'].includes(fd.line_type) + fd.line_column && fd.metric && ['json', 'geohash', 'zipcode'].includes(fd.line_type) ? setTooltipContent(fd) : undefined; @@ -132,17 +136,17 @@ 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 DeckGLPolygon extends React.Component { + containerRef = React.createRef(); + constructor(props) { super(props); @@ -245,7 +249,7 @@ class DeckGLPolygon extends React.Component { this.props.formData, this.props.payload, this.props.onAddFilter, - this.props.setTooltip, + this.setTooltip, this.state.selected, this.onSelect, filters, @@ -254,6 +258,12 @@ class DeckGLPolygon extends React.Component { return [layer]; } + setTooltip = tooltip => { + if (this.containerRef.current) { + this.containerRef.current.setTooltip(tooltip); + } + }; + render() { const { payload, formData, setControlValue } = this.props; const { start, end, getStep, values, disabled, viewport } = this.state; @@ -267,6 +277,7 @@ class DeckGLPolygon extends React.Component { return (
), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|ArcChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|ArcChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Grid/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Grid/Stories.tsx index 3ed2c1bcb26a..864377c38123 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Grid/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Grid/Stories.tsx @@ -47,6 +47,6 @@ export default [ /> ), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|GridChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|GridChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Hex/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Hex/Stories.tsx index 9d135bfb8b8d..f7563a9da484 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Hex/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Hex/Stories.tsx @@ -48,6 +48,6 @@ export default [ /> ), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|HexChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|HexChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Path/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Path/Stories.tsx index e3ce68b2085f..1c1556a844ac 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Path/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Path/Stories.tsx @@ -56,6 +56,6 @@ export default [ /> ), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|PathChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|PathChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/Stories.tsx index 66c3a2bb5cf9..64d648f4be7a 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/Stories.tsx @@ -26,7 +26,7 @@ export default [ line_column: 'contour', line_type: 'json', adhoc_filters: [], - metric: 'count', + metric: 'population', point_radius_fixed: { type: 'fix', value: 1000 }, row_limit: 10000, reverse_long_lat: false, @@ -71,7 +71,7 @@ export default [ /> ), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|PolygonChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|PolygonChartPlugin', }, { renderStory: () => ( @@ -119,6 +119,6 @@ export default [ /> ), storyName: 'Single Polygon in geojson format', - storyPath: 'legacy-|preset-chart-deckgl|PolygonChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|PolygonChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/geojsonPayload.js b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/geojsonPayload.js index 765abed3acbd..d9006e8976ab 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/geojsonPayload.js +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Polygon/geojsonPayload.js @@ -82,7 +82,8 @@ export default { data: { features: [ { - count: 1, + count: 10, + name: 'Test', polygon: { type: 'Feature', properties: {}, diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/Stories.tsx index 54a529b2b6c8..9383035844d2 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/Stories.tsx @@ -55,6 +55,6 @@ export default [ /> ), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|ScatterChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|ScatterChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx index ff57a64e8d1c..d9a24581732a 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx @@ -46,6 +46,6 @@ export default [ /> ), storyName: 'Basic', - storyPath: 'legacy-|preset-chart-deckgl|ScreengridChartPlugin', + storyPath: 'legacy-preset-chart-deckgl|ScreengridChartPlugin', }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/yarn.lock b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/yarn.lock index 8467a798b340..80583a3bbf11 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/yarn.lock +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/yarn.lock @@ -6831,6 +6831,11 @@ cssesc@^3.0.0: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== +cssfilter@0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae" + integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4= + csso@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d" @@ -17859,6 +17864,14 @@ xmlhttprequest@1: resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc" integrity sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw= +xss@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.6.tgz#eaf11e9fc476e3ae289944a1009efddd8a124b51" + integrity sha512-6Q9TPBeNyoTRxgZFk5Ggaepk/4vUOYdOsIUYvLehcsIZTFjaavbVnsuAkLA5lIFuug5hw8zxcB9tm01gsjph2A== + dependencies: + commander "^2.9.0" + cssfilter "0.0.10" + xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"