bfs: support all charts

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/plugins/plugin-chart-cartodiagram/package.json

@@ -43,7 +43,6 @@
     "@ant-design/icons": "^4.2.2",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "@superset-ui/plugin-chart-echarts": "*",
     "antd": "^4.9.4",
     "echarts": "^5.3.2",
     "polished": "^3.7.2",

superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartLayer.tsx

@@ -1,13 +1,27 @@
+/**
+ * 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 Layer from 'ol/layer/Layer';
 import { FrameState } from 'ol/Map';
 import { apply as applyTransform } from 'ol/transform';
 import ReactDOM from 'react-dom';
-import {
-  ChartConfig,
-  ChartLayerOptions,
-  ChartSizeValues,
-  SupportedVizTypes,
-} from '../types';
+import { SupersetTheme } from '@superset-ui/core';
+import { ChartConfig, ChartLayerOptions, ChartSizeValues } from '../types';
 import { createChartComponent } from '../util/chartUtil';
 import { getProjectedCoordinateFromPointGeoJson } from '../util/geometryUtil';
 
@@ -26,7 +40,7 @@ export class ChartLayer extends Layer {
 
   chartSizeValues: ChartSizeValues = {};
 
-  chartVizType: SupportedVizTypes;
+  chartVizType: string;
 
   div: HTMLDivElement;
 
@@ -36,18 +50,21 @@ export class ChartLayer extends Layer {
 
   chartBackgroundBorderRadius = 0;
 
+  theme: SupersetTheme;
+
   /**
    * Create a ChartLayer.
    *
    * @param {ChartLayerOptions} options The options to create a ChartLayer
    * @param {ChartHtmlElement[]} options.charts An array with the chart objects containing the HTML element and the coordinate
    * @param {ChartConfig} options.chartConfigs The chart configuration for the charts
    * @param {ChartSizeValues} options.chartSizeValues The values for the chart sizes
-   * @param {SupportedVizTypes} options.chartVizType The viztype of the charts
+   * @param {String} options.chartVizType The viztype of the charts
    * @param {String} options.chartBackgroundCssColor The color of the additionally added chart background
    * @param {Number} options.chartBackgroundBorderRadius The border radius in percent of the additionally added chart background
    * @param {Function} options.onMouseOver The handler function to execute when the mouse entering a HTML element
    * @param {Function} options.onMouseOut The handler function to execute when the mouse leaves a HTML element
+   * @param {SupersetTheme} options.theme The superset theme
    */
   constructor(options: ChartLayerOptions) {
     super(options);
@@ -70,6 +87,10 @@ export class ChartLayer extends Layer {
       this.chartBackgroundBorderRadius = options.chartBackgroundBorderRadius;
     }
 
+    if (options.theme) {
+      this.theme = options.theme;
+    }
+
     const spinner = document.createElement('img');
     spinner.src = Loader;
     spinner.style.position = 'relative';
@@ -103,7 +124,7 @@ export class ChartLayer extends Layer {
     }
   }
 
-  setChartVizType(chartVizType: SupportedVizTypes, silent = false) {
+  setChartVizType(chartVizType: string, silent = false) {
     this.chartVizType = chartVizType;
     if (!silent) {
       this.changed();
@@ -158,9 +179,13 @@ export class ChartLayer extends Layer {
 
       const chartComponent = createChartComponent(
         this.chartVizType,
-        feature,
+        // Seems like the registered chart components change some
+        // props in-place, which leads to unwanted side effects. Therefore,
+        // we only pass a copy.
+        JSON.parse(JSON.stringify(feature)),
         chartWidth,
         chartHeight,
+        this.theme,
       );
       ReactDOM.render(chartComponent, container);
 
@@ -177,7 +202,7 @@ export class ChartLayer extends Layer {
   }
 
   updateCharts(zoom: number) {
-    this.charts = this.charts.map(chart => {
+    const charts = this.charts.map(chart => {
       let chartWidth = 0;
       let chartHeight = 0;
       if (this.chartSizeValues[zoom]) {
@@ -192,9 +217,13 @@ export class ChartLayer extends Layer {
 
       const chartComponent = createChartComponent(
         this.chartVizType,
-        chart.feature,
+        // Seems like the registered chart components change some
+        // props in-place, which leads to unwanted side effects. Therefore,
+        // we only pass a copy.
+        JSON.parse(JSON.stringify(chart.feature)),
         chartWidth,
         chartHeight,
+        this.theme,
       );
       ReactDOM.render(chartComponent, chart.htmlElement);
 
@@ -204,6 +233,8 @@ export class ChartLayer extends Layer {
         height: chartHeight,
       };
     });
+
+    this.charts = charts;
   }
 
   render(frameState: FrameState | null) {

superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartWrapper.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 { getChartComponentRegistry, ThemeProvider } from '@superset-ui/core';
+import React, { useEffect, useState } from 'react';
+import { ChartWrapperProps } from '../types';
+
+export const ChartWrapper: React.FC<ChartWrapperProps> = ({
+  vizType,
+  theme,
+  height,
+  width,
+  chartConfig,
+}) => {
+  const [Chart, setChart] = useState<any>();
+
+  const getChartFromRegistry = async (vizType: string) => {
+    const registry = getChartComponentRegistry();
+    const c = await registry.getAsPromise(vizType);
+    setChart(() => c);
+  };
+
+  useEffect(() => {
+    getChartFromRegistry(vizType);
+  }, [vizType]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      {Chart === undefined ? (
+        <></>
+      ) : (
+        <Chart {...chartConfig.properties} height={height} width={width} />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default ChartWrapper;