feat(plugin-chart-echarts): make groupby optional (#820)

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/controlPanel.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, validateNonEmpty } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
 import { D3_FORMAT_OPTIONS, formatSelectOptions } from '@superset-ui/chart-controls';
 
 export default {
@@ -99,8 +99,6 @@ export default {
   controlOverrides: {
     groupby: {
       label: t('Series'),
-      validators: [validateNonEmpty],
-      clearable: false,
       description: t('Categories to group by on the x-axis.'),
     },
     columns: {

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts

@@ -55,11 +55,11 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
         return {
           name,
           value: [
-            datum[`${metric}__low`],
+            datum[`${metric}__min`],
             datum[`${metric}__q1`],
             datum[`${metric}__median`],
             datum[`${metric}__q3`],
-            datum[`${metric}__high`],
+            datum[`${metric}__max`],
             datum[`${metric}__mean`],
             datum[`${metric}__count`],
             datum[`${metric}__outliers`],
@@ -87,9 +87,9 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
           data: outlierDatum.map(val => [name, val]),
           tooltip: {
             formatter: (param: { data: [string, number] }) => {
-              const headline = `<p><strong>${param.data[0]}</strong></p>`;
-              const stats = `${numberFormatter(param.data[1])}`;
-              return headline + stats;
+              const [outlierName, stats] = param.data;
+              const headline = groupby ? `<p><strong>${outlierName}</strong></p>` : '';
+              return `${headline}${numberFormatter(stats)}`;
             },
           },
           itemStyle: {
@@ -150,18 +150,18 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
               value: [number, number, number, number, number, number, number, number, number[]];
               name: string;
             } = param;
-            const headline = `<p><strong>${name}</strong></p>`;
+            const headline = name ? `<p><strong>${name}</strong></p>` : '';
             const stats = [
-              `upper: ${numberFormatter(value[5])}`,
-              `Q3: ${numberFormatter(value[4])}`,
-              `mean: ${numberFormatter(value[6])}`,
-              `median: ${numberFormatter(value[3])}`,
-              `Q1: ${numberFormatter(value[2])}`,
-              `lower: ${numberFormatter(value[1])}`,
-              `observations: ${numberFormatter(value[7])}`,
+              `Max: ${numberFormatter(value[5])}`,
+              `3rd Quartile: ${numberFormatter(value[4])}`,
+              `Mean: ${numberFormatter(value[6])}`,
+              `Median: ${numberFormatter(value[3])}`,
+              `1st Quartile: ${numberFormatter(value[2])}`,
+              `Min: ${numberFormatter(value[1])}`,
+              `# Observations: ${numberFormatter(value[7])}`,
             ];
             if (value[8].length > 0) {
-              stats.push(`outliers: ${numberFormatter(value[8].length)}`);
+              stats.push(`# Outliers: ${numberFormatter(value[8].length)}`);
             }
             return headline + stats.join('<br/>');
           },

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -71,17 +71,17 @@ export function formatSeriesName(
 }
 
 export function extractGroupbyLabel({
-  datum,
+  datum = {},
   groupby,
   numberFormatter,
   timeFormatter,
 }: {
-  datum: DataRecord;
-  groupby: string[];
+  datum?: DataRecord;
+  groupby?: string[] | null;
   numberFormatter?: NumberFormatter;
   timeFormatter?: TimeFormatter;
 }): string {
-  return groupby
+  return (groupby || [])
     .map(val => formatSeriesName(datum[val], { numberFormatter, timeFormatter }))
     .join(', ');
 }

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/test/BoxPlot/transformProps.test.ts

@@ -43,8 +43,8 @@ describe('BoxPlot tranformProps', () => {
           region: 'Charlotte',
           'AVG(averageprice)__mean': 1.9405512820512825,
           'AVG(averageprice)__median': 1.9025,
-          'AVG(averageprice)__high': 2.505,
-          'AVG(averageprice)__low': 1.4775,
+          'AVG(averageprice)__max': 2.505,
+          'AVG(averageprice)__min': 1.4775,
           'AVG(averageprice)__q1': 1.73875,
           'AVG(averageprice)__q3': 2.105,
           'AVG(averageprice)__count': 39,
@@ -55,8 +55,8 @@ describe('BoxPlot tranformProps', () => {
           region: 'Hartford Springfield',
           'AVG(averageprice)__mean': 2.231141025641026,
           'AVG(averageprice)__median': 2.265,
-          'AVG(averageprice)__high': 2.595,
-          'AVG(averageprice)__low': 1.862,
+          'AVG(averageprice)__max': 2.595,
+          'AVG(averageprice)__min': 1.862,
           'AVG(averageprice)__q1': 2.1285,
           'AVG(averageprice)__q3': 2.32625,
           'AVG(averageprice)__count': 39,

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/test/utils/series.test.ts

@@ -82,6 +82,16 @@ describe('extractGroupbyLabel', () => {
       }),
     ).toEqual('abc, 123, 0.123, true');
   });
+
+  it('should handle null and undefined groupby', () => {
+    expect(
+      extractGroupbyLabel({
+        datum: { strcol: 'abc', intcol: 123, floatcol: 0.123, boolcol: true },
+        groupby: null,
+      }),
+    ).toEqual('');
+    expect(extractGroupbyLabel({})).toEqual('');
+  });
 });
 
 describe('formatSeriesName', () => {