feat: add plugin-chart-cartodiagram

docs/docs/security/security.mdx

@@ -253,6 +253,9 @@ You can get current nonce value by calling jinja macro `csp_nonce()`.
   connect-src 'self' https://api.mapbox.com https://events.mapbox.com
   ```
 
+- Cartodiagram charts request map data (image and json) from external resources that can be edited by users,
+and therefore either require a list of allowed domains to request from or a wildcard (`'*'`) for `img-src` and `connect-src`.
+
 * Other CSP directives default to `'self'` to limit content to the same origin as the Superset server.
 
 In order to adjust provided CSP configuration to your needs, follow the instructions and examples provided in

superset-frontend/jest.config.js

@@ -56,7 +56,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!d3-(interpolate|color)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp)',
+    'node_modules/(?!d3-(interpolate|color)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|ol|color-space|color-parse|color-rgba|color-name)',
   ],
   globals: {
     __DEV__: true,

superset-frontend/package.json

@@ -105,6 +105,7 @@
     "@superset-ui/legacy-plugin-chart-world-map": "file:./plugins/legacy-plugin-chart-world-map",
     "@superset-ui/legacy-preset-chart-deckgl": "file:./plugins/legacy-preset-chart-deckgl",
     "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",
+    "@superset-ui/plugin-chart-cartodiagram": "file:./plugins/plugin-chart-cartodiagram",
     "@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts",
     "@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars",
     "@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
@@ -132,12 +133,18 @@
     "d3-scale": "^2.1.2",
     "dom-to-image-more": "^3.2.0",
     "dom-to-pdf": "^0.3.1",
+    "echarts": "^5.4.1",
     "emotion-rgba": "0.0.12",
     "fast-glob": "^3.2.7",
     "fontsource-fira-code": "^4.0.0",
     "fs-extra": "^10.0.0",
     "fuse.js": "^7.0.0",
     "geolib": "^2.0.24",
+    "geostyler": "^12.0.2",
+    "geostyler-data": "^1.0.0",
+    "geostyler-openlayers-parser": "^4.3.0",
+    "geostyler-style": "^7.5.0",
+    "geostyler-wfs-parser": "^2.0.0",
     "googleapis": "^130.0.0",
     "html-webpack-plugin": "^5.3.2",
     "immer": "^9.0.6",

superset-frontend/packages/superset-ui-chart-controls/src/index.ts

@@ -33,6 +33,7 @@ export * from './components/Dropdown';
 export * from './components/Menu';
 export * from './components/MetricOption';
 export * from './components/Tooltip';
+export { default as ControlHeader } from './components/ControlHeader';
 
 export * from './shared-controls';
 export * from './types';

superset-frontend/packages/superset-ui-core/src/chart/types/QueryResponse.ts

@@ -31,6 +31,14 @@ export interface TimeseriesDataRecord extends DataRecord {
   __timestamp: number | string | Date | null;
 }
 
+export const isTimeseriesDataRecord = (
+  item: any,
+): item is TimeseriesDataRecord => Object.keys(item).includes('__timestamp');
+
+export const isTimeseriesDataRecordList = (
+  items: any[],
+): items is TimeseriesDataRecord[] => items.every(isTimeseriesDataRecord);
+
 // data record value filters from FilterBox
 export interface DataRecordFilters {
   [key: string]: DataRecordValue[];

superset-frontend/packages/superset-ui-core/test/chart/types/QueryResponse.test.ts

@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  isTimeseriesDataRecord,
+  isTimeseriesDataRecordList,
+} from '@superset-ui/core';
+
+describe('QueryResponse', () => {
+  describe('TypeGuards', () => {
+    it('correctly determines a TimeseriesDataRecord', () => {
+      const timeseriesDataRecord = {
+        foo: 'bar',
+        __timestamp: 0,
+      };
+      expect(isTimeseriesDataRecord(timeseriesDataRecord)).toBe(true);
+    });
+
+    it('correctly determines if a DataRecord is not a TimeseriesDataRecord', () => {
+      const timeseriesDataRecord = {
+        foo: 'bar',
+      };
+      expect(isTimeseriesDataRecord(timeseriesDataRecord)).toBe(false);
+    });
+
+    it('correctly determines a TimeseriesDataRecordList', () => {
+      const timeseriesDataRecordList = [
+        {
+          foo: 'bar',
+          __timestamp: 0,
+        },
+        {
+          foo: 'baz',
+          __timestamp: 1,
+        },
+      ];
+      expect(isTimeseriesDataRecordList(timeseriesDataRecordList)).toBe(true);
+    });
+
+    it('correctly determines if a DataRecordList is not a TimeseriesDataRecordList', () => {
+      const timeseriesDataRecordList = [
+        {
+          foo: 'bar',
+        },
+        {
+          foo: 'baz',
+        },
+      ];
+      expect(isTimeseriesDataRecordList(timeseriesDataRecordList)).toBe(false);
+    });
+  });
+});

superset-frontend/plugins/plugin-chart-cartodiagram/README.md

@@ -0,0 +1,67 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+## @superset-ui/plugin-chart-cartodiagram
+
+This plugin allows visualizing charts on a map. To do so, the plugin makes use of existing charts and renders them on the
+provided locations.
+
+Configuring the charts: Charts will be configured in their respective editors. So all configuration options of any chart are supported.
+
+Configuring the map: For the map, an arbitrary number of background layers (WMS, WFS, XYZ), the initial map extent, the chart background color and border radius, as well as the chart size (per zoom level) can be configured.
+
+### Usage
+
+The plugin is configured in `superset-frontend/src/visualizations/presets/MainPreset.js`.
+
+```js
+import { CartodiagramPlugin } from '@superset-ui/plugin-chart-cartodiagram';
+
+new CartodiagramPlugin().configure({ key: 'cartodiagram' }).register();
+```
+
+Default layers can be added to the constructor. These layers will be added to each chart by default (but can be removed by editors). See also `./src/types.ts` for the definitions of types `WmsLayerConf`, `WfsLayerConf` and `XyzLayerConf`.
+
+Example for an XYZ default layer:
+
+```js
+import { CartodiagramPlugin } from '@superset-ui/plugin-chart-cartodiagram';
+
+const opts = {
+  defaultLayers: [
+    {
+      type: 'XYZ',
+      url: 'example.com/path/to/xyz/layer',
+      title: 'my default layer title',
+      attribution: 'my default layer attribution',
+    },
+  ],
+};
+
+new CartodiagramPlugin(opts).configure({ key: 'cartodiagram' }).register();
+```
+
+Please note that by default, Superset rejects requests to third-party domains. If you want to include
+layers from those, you have to adjust the CSP settings. See also docs/docs/security/security.mdx.
+
+### Geometry Column
+
+The plugin requires the selection of a geometry column for a dataset.
+This is expected to be a GeoJSON-Point-Geometry string in WGS 84/Pseudo-Mercator (EPSG:3857). Other formats and projections
+will be supported in the future.

superset-frontend/plugins/plugin-chart-cartodiagram/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@superset-ui/plugin-chart-cartodiagram",
+  "version": "0.0.1",
+  "description": "An OpenLayers map that displays charts for single features.",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "contributors": [
+    "terrestris GmbH & Co. KG <[email protected]> (https://www.terrestris.de)",
+    "meggsimum - Büro für Geoinformatik <[email protected]> (https://meggsimum.de)"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@types/geojson": "^7946.0.10",
+    "geojson": "^0.5.0",
+    "lodash": "^4.17.21",
+    "ol": "^7.1.0"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^5.0.1",
+    "@superset-ui/chart-controls": "*",
+    "@superset-ui/core": "*",
+    "antd": "^4.10.3",
+    "geostyler": "^12.0.0",
+    "geostyler-data": "^1.0.0",
+    "geostyler-openlayers-parser": "^4.0.0",
+    "geostyler-style": "^7.2.0",
+    "geostyler-wfs-parser": "^2.0.0",
+    "polished": "*",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.0"
+  }
+}

superset-frontend/plugins/plugin-chart-cartodiagram/src/CartodiagramPlugin.tsx

@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { createRef, useState } from 'react';
+import { styled, useTheme } from '@superset-ui/core';
+import OlMap from 'ol/Map';
+import {
+  CartodiagramPluginProps,
+  CartodiagramPluginStylesProps,
+} from './types';
+
+import OlChartMap from './components/OlChartMap';
+
+import 'ol/ol.css';
+
+// The following Styles component is a <div> element, which has been styled using Emotion
+// For docs, visit https://emotion.sh/docs/styled
+
+// Theming variables are provided for your use via a ThemeProvider
+// imported from @superset-ui/core. For variables available, please visit
+// https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/style/index.ts
+
+const Styles = styled.div<CartodiagramPluginStylesProps>`
+  height: ${({ height }) => height}px;
+  width: ${({ width }) => width}px;
+`;
+
+export default function CartodiagramPlugin(props: CartodiagramPluginProps) {
+  const { height, width } = props;
+  const theme = useTheme();
+
+  const rootElem = createRef<HTMLDivElement>();
+
+  const [mapId] = useState(
+    `cartodiagram-plugin-${Math.floor(Math.random() * 1000)}`,
+  );
+  const [olMap] = useState(new OlMap({}));
+
+  return (
+    <Styles ref={rootElem} height={height} width={width} theme={theme}>
+      <OlChartMap mapId={mapId} olMap={olMap} {...props} />
+    </Styles>
+  );
+}