feat: Adds the ECharts Bubble chart (apache#22107)

Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Bubble/Stories.tsx

@@ -0,0 +1,128 @@
+/**
+ * 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 React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  boolean,
+  number,
+  select,
+  text,
+  withKnobs,
+} from '@storybook/addon-knobs';
+import {
+  EchartsBubbleChartPlugin,
+  BubbleTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { simpleBubbleData } from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsBubbleChartPlugin().configure({ key: 'bubble_v2' }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  'bubble_v2',
+  BubbleTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Bubble',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const SimpleBubble = ({ width, height }) => (
+  <SuperChart
+    chartType="bubble_v2"
+    width={width}
+    height={height}
+    queriesData={[{ data: simpleBubbleData }]}
+    formData={{
+      entity: 'customer_name',
+      x: 'count',
+      y: {
+        aggregate: 'SUM',
+        column: {
+          advanced_data_type: null,
+          certification_details: null,
+          certified_by: null,
+          column_name: 'price_each',
+          description: null,
+          expression: null,
+          filterable: true,
+          groupby: true,
+          id: 570,
+          is_certified: false,
+          is_dttm: false,
+          python_date_format: null,
+          type: 'DOUBLE PRECISION',
+          type_generic: 0,
+          verbose_name: null,
+          warning_markdown: null,
+        },
+        expressionType: 'SIMPLE',
+        hasCustomLabel: false,
+        isNew: false,
+        label: 'SUM(price_each)',
+        optionName: 'metric_d9rpclvys0a_fs4bs0m2l1f',
+        sqlExpression: null,
+      },
+      adhocFilters: [],
+      size: {
+        aggregate: 'SUM',
+        column: {
+          advanced_data_type: null,
+          certification_details: null,
+          certified_by: null,
+          column_name: 'sales',
+          description: null,
+          expression: null,
+          filterable: true,
+          groupby: true,
+          id: 571,
+          is_certified: false,
+          is_dttm: false,
+          python_date_format: null,
+          type: 'DOUBLE PRECISION',
+          type_generic: 0,
+          verbose_name: null,
+          warning_markdown: null,
+        },
+        expressionType: 'SIMPLE',
+        hasCustomLabel: false,
+        isNew: false,
+        label: 'SUM(sales)',
+        optionName: 'metric_itj9wncjxk_dp3yibib0q',
+        sqlExpression: null,
+      },
+      limit: 10,
+      colorScheme: 'supersetColors',
+      maxBubbleSize: select('Max bubble size', [5, 10, 25, 50, 100, 125], 10),
+      xAxisTitle: text('X axis title', ''),
+      xAxisTitleMargin: number('X axis title margin', 30),
+      yAxisTitle: text('Y axis title', ''),
+      yAxisTitleMargin: number('Y axis title margin', 30),
+      yAxisTitlePosition: 'Left',
+      xAxisFormat: null,
+      logYAxis: boolean('Log Y axis', false),
+      yAxisFormat: null,
+      logXAxis: boolean('Log X axis', false),
+      truncateYAxis: false,
+      yAxisBounds: [],
+      extraFormData: {},
+    }}
+  />
+);

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Bubble/data.ts

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ */
+export const simpleBubbleData = [
+  {
+    customer_name: 'AV Stores, Co.',
+    count: 51,
+    'SUM(price_each)': 3975.33,
+    'SUM(sales)': 157807.80999999997,
+  },
+  {
+    customer_name: 'Alpha Cognac',
+    count: 20,
+    'SUM(price_each)': 1701.95,
+    'SUM(sales)': 70488.44,
+  },
+  {
+    customer_name: 'Amica Models & Co.',
+    count: 26,
+    'SUM(price_each)': 2218.41,
+    'SUM(sales)': 94117.26000000002,
+  },
+  {
+    customer_name: "Anna's Decorations, Ltd",
+    count: 46,
+    'SUM(price_each)': 3843.67,
+    'SUM(sales)': 153996.13000000003,
+  },
+  {
+    customer_name: 'Atelier graphique',
+    count: 7,
+    'SUM(price_each)': 558.4300000000001,
+    'SUM(sales)': 24179.96,
+  },
+  {
+    customer_name: 'Australian Collectables, Ltd',
+    count: 23,
+    'SUM(price_each)': 1809.7099999999998,
+    'SUM(sales)': 64591.46000000001,
+  },
+  {
+    customer_name: 'Australian Collectors, Co.',
+    count: 55,
+    'SUM(price_each)': 4714.479999999999,
+    'SUM(sales)': 200995.40999999997,
+  },
+  {
+    customer_name: 'Australian Gift Network, Co',
+    count: 15,
+    'SUM(price_each)': 1271.05,
+    'SUM(sales)': 59469.11999999999,
+  },
+  {
+    customer_name: 'Auto Assoc. & Cie.',
+    count: 18,
+    'SUM(price_each)': 1484.8600000000001,
+    'SUM(sales)': 64834.32000000001,
+  },
+  {
+    customer_name: 'Auto Canal Petit',
+    count: 27,
+    'SUM(price_each)': 2188.82,
+    'SUM(sales)': 93170.65999999999,
+  },
+];

superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t, ChartMetadata, ChartPlugin, ChartLabel } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import example from './images/example.jpg';
 import thumbnail from './images/thumbnail.png';
@@ -29,7 +29,8 @@ const metadata = new ChartMetadata({
     'Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.',
   ),
   exampleGallery: [{ url: example }],
-  name: t('Bubble Chart'),
+  label: ChartLabel.DEPRECATED,
+  name: t('Bubble Chart (legacy)'),
   tags: [
     t('Multi-Dimensions'),
     t('Aesthetic'),
@@ -39,11 +40,15 @@ const metadata = new ChartMetadata({
     t('Time'),
     t('Trend'),
     t('nvd3'),
+    t('Deprecated'),
   ],
   thumbnail,
   useLegacyApi: true,
 });
 
+/**
+ * @deprecated in version 4.0.
+ */
 export default class BubbleChartPlugin extends ChartPlugin {
   constructor() {
     super({

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/EchartsBubble.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 React from 'react';
+import { BubbleChartTransformedProps } from './types';
+import Echart from '../components/Echart';
+
+export default function EchartsBubble(props: BubbleChartTransformedProps) {
+  const { height, width, echartOptions, refs } = props;
+  return (
+    <Echart
+      height={height}
+      width={width}
+      echartOptions={echartOptions}
+      refs={refs}
+    />
+  );
+}

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/buildQuery.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 {
+  buildQueryContext,
+  ensureIsArray,
+  QueryFormData,
+} from '@superset-ui/core';
+
+export default function buildQuery(formData: QueryFormData) {
+  const columns = [
+    ...ensureIsArray(formData.entity),
+    ...ensureIsArray(formData.series),
+  ];
+
+  return buildQueryContext(formData, baseQueryObject => [
+    {
+      ...baseQueryObject,
+      columns,
+      orderby: baseQueryObject.orderby
+        ? [[baseQueryObject.orderby[0], !baseQueryObject.order_desc]]
+        : undefined,
+    },
+  ]);
+}

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 { DEFAULT_LEGEND_FORM_DATA } from '../constants';
+import { EchartsBubbleFormData } from './types';
+
+export const DEFAULT_FORM_DATA: Partial<EchartsBubbleFormData> = {
+  ...DEFAULT_LEGEND_FORM_DATA,
+  emitFilter: false,
+  logXAis: false,
+  logYAxis: false,
+  xAxisTitleMargin: 30,
+  yAxisTitleMargin: 30,
+  truncateYAxis: false,
+  yAxisBounds: [null, null],
+  xAxisLabelRotation: 0,
+  opacity: 0.6,
+};
+
+export const MINIMUM_BUBBLE_SIZE = 5;