diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 4cf5cdba13950..41694a27f5fd8 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -8301,6 +8301,11 @@ "probe.gl": "^3.4.0" } }, + "node_modules/@mapbox/extent": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@mapbox/extent/-/extent-0.4.0.tgz", + "integrity": "sha1-PlkfMuHww5gchkI597CsBuYQ+Kk=" + }, "node_modules/@mapbox/geojson-area": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz", @@ -8309,6 +8314,42 @@ "wgs84": "0.0.0" } }, + "node_modules/@mapbox/geojson-coords": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.2.tgz", + "integrity": "sha512-YuVzpseee/P1T5BWyeVVPppyfmuXYHFwZHmybkqaMfu4BWlOf2cmMGKj2Rr92MwfSTOCSUA0PAsVGRG8akY0rg==", + "dependencies": { + "@mapbox/geojson-normalize": "0.0.1", + "geojson-flatten": "^1.0.4" + } + }, + "node_modules/@mapbox/geojson-extent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-1.0.1.tgz", + "integrity": "sha512-hh8LEO3djT4fqfr8sSC6wKt+p0TMiu+KOLMBUiFOyj+zGq7+IXwQGl0ppCVDkyzCewyd9LoGe9zAvDxXrLfhLw==", + "dependencies": { + "@mapbox/extent": "0.4.0", + "@mapbox/geojson-coords": "0.0.2", + "rw": "~0.1.4", + "traverse": "~0.6.6" + }, + "bin": { + "geojson-extent": "bin/geojson-extent" + } + }, + "node_modules/@mapbox/geojson-extent/node_modules/rw": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz", + "integrity": "sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4=" + }, + "node_modules/@mapbox/geojson-normalize": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz", + "integrity": "sha1-HaHms6et060pkJsw9Dj2BYG3zYA=", + "bin": { + "geojson-normalize": "geojson-normalize" + } + }, "node_modules/@mapbox/geojson-rewind": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.4.1.tgz", @@ -21907,10 +21948,6 @@ "resolved": "plugins/legacy-plugin-chart-event-flow", "link": true }, - "node_modules/@superset-ui/legacy-plugin-chart-force-directed": { - "resolved": "plugins/legacy-plugin-chart-force-directed", - "link": true - }, "node_modules/@superset-ui/legacy-plugin-chart-heatmap": { "resolved": "plugins/legacy-plugin-chart-heatmap", "link": true @@ -35789,6 +35826,26 @@ "node": ">=6.9.0" } }, + "node_modules/geojson-flatten": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-1.0.4.tgz", + "integrity": "sha512-PpscUXxO6dvvhZxtwuqiI5v+1C/IQYPJRMWoQeaF2oohJgfGYSHKVAe8L+yUqF34PH/hmq9JlwmO+juPw+95/Q==", + "dependencies": { + "get-stdin": "^7.0.0", + "minimist": "^1.2.5" + }, + "bin": { + "geojson-flatten": "geojson-flatten" + } + }, + "node_modules/geojson-flatten/node_modules/get-stdin": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz", + "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/geojson-vt": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", @@ -53763,6 +53820,11 @@ "loader-utils": "^1.0.2" } }, + "node_modules/traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "node_modules/tree-kill": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", @@ -59098,6 +59160,7 @@ "plugins/legacy-plugin-chart-force-directed": { "name": "@superset-ui/legacy-plugin-chart-force-directed", "version": "0.0.1", + "extraneous": true, "dependencies": { "d3": "^3.5.17", "prop-types": "^15.7.2" @@ -59450,6 +59513,7 @@ "version": "0.4.13", "license": "Apache-2.0", "dependencies": { + "@mapbox/geojson-extent": "^1.0.1", "@math.gl/web-mercator": "^3.2.2", "@types/d3-array": "^2.0.0", "bootstrap-slider": "^10.0.0", @@ -65988,6 +66052,11 @@ "probe.gl": "^3.4.0" } }, + "@mapbox/extent": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@mapbox/extent/-/extent-0.4.0.tgz", + "integrity": "sha1-PlkfMuHww5gchkI597CsBuYQ+Kk=" + }, "@mapbox/geojson-area": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz", @@ -65996,6 +66065,38 @@ "wgs84": "0.0.0" } }, + "@mapbox/geojson-coords": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.2.tgz", + "integrity": "sha512-YuVzpseee/P1T5BWyeVVPppyfmuXYHFwZHmybkqaMfu4BWlOf2cmMGKj2Rr92MwfSTOCSUA0PAsVGRG8akY0rg==", + "requires": { + "@mapbox/geojson-normalize": "0.0.1", + "geojson-flatten": "^1.0.4" + } + }, + "@mapbox/geojson-extent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-1.0.1.tgz", + "integrity": "sha512-hh8LEO3djT4fqfr8sSC6wKt+p0TMiu+KOLMBUiFOyj+zGq7+IXwQGl0ppCVDkyzCewyd9LoGe9zAvDxXrLfhLw==", + "requires": { + "@mapbox/extent": "0.4.0", + "@mapbox/geojson-coords": "0.0.2", + "rw": "~0.1.4", + "traverse": "~0.6.6" + }, + "dependencies": { + "rw": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz", + "integrity": "sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4=" + } + } + }, + "@mapbox/geojson-normalize": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz", + "integrity": "sha1-HaHms6et060pkJsw9Dj2BYG3zYA=" + }, "@mapbox/geojson-rewind": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.4.1.tgz", @@ -76641,13 +76742,6 @@ "prop-types": "^15.6.2" } }, - "@superset-ui/legacy-plugin-chart-force-directed": { - "version": "file:plugins/legacy-plugin-chart-force-directed", - "requires": { - "d3": "^3.5.17", - "prop-types": "^15.7.2" - } - }, "@superset-ui/legacy-plugin-chart-heatmap": { "version": "file:plugins/legacy-plugin-chart-heatmap", "requires": { @@ -76855,6 +76949,7 @@ "@superset-ui/legacy-preset-chart-deckgl": { "version": "file:plugins/legacy-preset-chart-deckgl", "requires": { + "@mapbox/geojson-extent": "^1.0.1", "@math.gl/web-mercator": "^3.2.2", "@types/d3-array": "^2.0.0", "bootstrap-slider": "^10.0.0", @@ -87968,6 +88063,22 @@ "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==" }, + "geojson-flatten": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-1.0.4.tgz", + "integrity": "sha512-PpscUXxO6dvvhZxtwuqiI5v+1C/IQYPJRMWoQeaF2oohJgfGYSHKVAe8L+yUqF34PH/hmq9JlwmO+juPw+95/Q==", + "requires": { + "get-stdin": "^7.0.0", + "minimist": "^1.2.5" + }, + "dependencies": { + "get-stdin": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz", + "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==" + } + } + }, "geojson-vt": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", @@ -102027,6 +102138,11 @@ "loader-utils": "^1.0.2" } }, + "traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "tree-kill": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json b/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json index b1ecf1d487e97..7b11af60566e5 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json @@ -23,6 +23,7 @@ "lib" ], "dependencies": { + "@mapbox/geojson-extent": "^1.0.1", "@math.gl/web-mercator": "^3.2.2", "@types/d3-array": "^2.0.0", "bootstrap-slider": "^10.0.0", diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.jsx index a1416f6b56ef2..0aefc742934f5 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.jsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-array-index-key */ /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -20,13 +19,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { GeoJsonLayer } from 'deck.gl'; -// TODO import geojsonExtent from 'geojson-extent'; +import geojsonExtent from '@mapbox/geojson-extent'; import { DeckGLContainerStyledWrapper } from '../../DeckGLContainer'; import { hexToRGB } from '../../utils/colors'; import sandboxedEval from '../../utils/sandbox'; import { commonLayerProps } from '../common'; import TooltipRow from '../../TooltipRow'; +import fitViewport from '../../utils/fitViewport'; const propertyMap = { fillColor: 'fillColor', @@ -94,6 +94,9 @@ function setTooltipContent(o) { ); } +const getFillColor = feature => feature?.properties?.fillColor; +const getLineColor = feature => feature?.properties?.strokeColor; + export function getLayer(formData, payload, onAddFilter, setTooltip) { const fd = formData; const fc = fd.fill_color_picker; @@ -125,6 +128,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) { stroked: fd.stroked, extruded: fd.extruded, pointRadiusScale: fd.point_radius_scale, + getFillColor, + getLineWidth: fd.line_width || 1, + getLineColor, ...commonLayerProps(fd, setTooltip, setTooltipContent), }); } @@ -151,13 +157,29 @@ class DeckGLGeoJson extends React.Component { }; render() { - const { formData, payload, setControlValue, onAddFilter, viewport } = + const { formData, payload, setControlValue, onAddFilter, height, width } = this.props; - // TODO get this to work - // if (formData.autozoom) { - // viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features)); - // } + let { viewport } = this.props; + if (formData.autozoom) { + const points = + payload?.data?.features?.reduce?.((acc, feature) => { + const bounds = geojsonExtent(feature); + if (bounds) { + return [...acc, [bounds[0], bounds[1]], [bounds[2], bounds[3]]]; + } + + return acc; + }, []) || []; + + if (points.length) { + viewport = fitViewport(viewport, { + width, + height, + points, + }); + } + } const layer = getLayer(formData, payload, onAddFilter, this.setTooltip); @@ -169,6 +191,8 @@ class DeckGLGeoJson extends React.Component { layers={[layer]} mapStyle={formData.mapbox_style} setControlValue={setControlValue} + height={height} + width={width} /> ); } diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts index c18b7c650f0d4..352e8867b2ad5 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts @@ -38,6 +38,8 @@ import { viewport, mapboxStyle, geojsonColumn, + autozoom, + lineWidth, } from '../../utilities/Shared_DeckGL'; import { dndGeojsonColumn } from '../../utilities/sharedDndControls'; @@ -60,10 +62,7 @@ const config: ControlPanelConfig = { }, { label: t('Map'), - controlSetRows: [ - [mapboxStyle, viewport], - // TODO [autozoom, null], // import { autozoom } from './Shared_DeckGL' - ], + controlSetRows: [[mapboxStyle, viewport], [autozoom]], }, { label: t('GeoJson Settings'), @@ -71,6 +70,7 @@ const config: ControlPanelConfig = { [fillColorPicker, strokeColorPicker], [filled, stroked], [extruded, null], + [lineWidth, null], [ { name: 'point_radius_scale',