fix(plugin-chart-period-over-period-kpi): Blank chart when switching …

…from BigNumberTotal (apache#27203)

(cherry picked from commit 5403797)

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/buildQuery.ts → superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/buildQuery.ts

@@ -23,21 +23,6 @@ import {
   QueryFormData,
 } from '@superset-ui/core';
 
-/**
- * The buildQuery function is used to create an instance of QueryContext that's
- * sent to the chart data endpoint. In addition to containing information of which
- * datasource to use, it specifies the type (e.g. full payload, samples, query) and
- * format (e.g. CSV or JSON) of the result and whether or not to force refresh the data from
- * the datasource as opposed to using a cached copy of the data, if available.
- *
- * More importantly though, QueryContext contains a property `queries`, which is an array of
- * QueryObjects specifying individual data requests to be made. A QueryObject specifies which
- * columns, metrics and filters, among others, to use during the query. Usually it will be enough
- * to specify just one query based on the baseQueryObject, but for some more advanced use cases
- * it is possible to define post processing operations in the QueryObject, or multiple queries
- * if a viz needs multiple different result sets.
- */
-
 export default function buildQuery(formData: QueryFormData) {
   const {
     cols: groupby,

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts → superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts

@@ -28,6 +28,7 @@ import {
   getStandardizedControls,
   sharedControls,
 } from '@superset-ui/chart-controls';
+import { headerFontSize, subheaderFontSize } from '../sharedControls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -102,71 +103,13 @@ const config: ControlPanelConfig = {
       controlSetRows: [
         ['y_axis_format'],
         ['currency_format'],
+        [headerFontSize],
         [
           {
-            name: 'header_font_size',
+            ...subheaderFontSize,
             config: {
-              type: 'SelectControl',
-              label: t('Big Number Font Size'),
-              renderTrigger: true,
-              clearable: false,
-              default: 60,
-              options: [
-                {
-                  label: t('Tiny'),
-                  value: 16,
-                },
-                {
-                  label: t('Small'),
-                  value: 20,
-                },
-                {
-                  label: t('Normal'),
-                  value: 30,
-                },
-                {
-                  label: t('Large'),
-                  value: 48,
-                },
-                {
-                  label: t('Huge'),
-                  value: 60,
-                },
-              ],
-            },
-          },
-        ],
-        [
-          {
-            name: 'subheader_font_size',
-            config: {
-              type: 'SelectControl',
-              label: t('Subheader Font Size'),
-              renderTrigger: true,
-              clearable: false,
-              default: 40,
-              options: [
-                {
-                  label: t('Tiny'),
-                  value: 16,
-                },
-                {
-                  label: t('Small'),
-                  value: 20,
-                },
-                {
-                  label: t('Normal'),
-                  value: 26,
-                },
-                {
-                  label: t('Large'),
-                  value: 32,
-                },
-                {
-                  label: t('Huge'),
-                  value: 40,
-                },
-              ],
+              ...subheaderFontSize.config,
+              label: t('Comparison font size'),
             },
           },
         ],

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/index.ts → superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts

@@ -20,19 +20,9 @@ import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
-import thumbnail from '../images/thumbnail.png';
+import thumbnail from './images/thumbnail.png';
 
 export default class PopKPIPlugin extends ChartPlugin {
-  /**
-   * The constructor is used to pass relevant metadata and callbacks that get
-   * registered in respective registries that are used throughout the library
-   * and application. A more thorough description of each property is given in
-   * the respective imported file.
-   *
-   * It is worth noting that `buildQuery` and is optional, and only needed for
-   * advanced visualizations that require either post processing operations
-   * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
-   */
   constructor() {
     const metadata = new ChartMetadata({
       category: t('KPI'),
@@ -45,14 +35,15 @@ export default class PopKPIPlugin extends ChartPlugin {
         t('Percentages'),
         t('Report'),
         t('Description'),
+        t('Advanced-Analytics'),
       ],
       thumbnail,
     });
 
     super({
       buildQuery,
       controlPanel,
-      loadChart: () => import('../PopKPI'),
+      loadChart: () => import('./PopKPI'),
       metadata,
       transformProps,
     });

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts → superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts

@@ -25,6 +25,7 @@ import {
   getNumberFormatter,
   formatTimeRange,
 } from '@superset-ui/core';
+import { getComparisonFontSize, getHeaderFontSize } from './utils';
 
 export const parseMetricValue = (metricValue: number | string | null) => {
   if (typeof metricValue === 'string') {
@@ -142,16 +143,15 @@ export default function transformProps(chartProps: ChartProps) {
     width,
     height,
     data,
-    // and now your control data, manipulated as needed, and passed through as props!
     metric,
     metricName,
     bigNumber,
     prevNumber,
     valueDifference,
     percentDifferenceFormattedString: percentDifference,
     boldText,
-    headerFontSize,
-    subheaderFontSize,
+    headerFontSize: getHeaderFontSize(headerFontSize),
+    subheaderFontSize: getComparisonFontSize(subheaderFontSize),
     headerText,
     compType,
     comparisonColorEnabled,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.test.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { getComparisonFontSize, getHeaderFontSize } from './utils';
+
+test('getHeaderFontSize', () => {
+  expect(getHeaderFontSize(0.2)).toEqual(16);
+  expect(getHeaderFontSize(0.3)).toEqual(20);
+  expect(getHeaderFontSize(0.4)).toEqual(30);
+  expect(getHeaderFontSize(0.5)).toEqual(48);
+  expect(getHeaderFontSize(0.6)).toEqual(60);
+  expect(getHeaderFontSize(0.15)).toEqual(60);
+  expect(getHeaderFontSize(2)).toEqual(60);
+});
+
+test('getComparisonFontSize', () => {
+  expect(getComparisonFontSize(0.125)).toEqual(16);
+  expect(getComparisonFontSize(0.15)).toEqual(20);
+  expect(getComparisonFontSize(0.2)).toEqual(26);
+  expect(getComparisonFontSize(0.3)).toEqual(32);
+  expect(getComparisonFontSize(0.4)).toEqual(40);
+  expect(getComparisonFontSize(0.05)).toEqual(40);
+  expect(getComparisonFontSize(0.9)).toEqual(40);
+});

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.ts

@@ -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 { headerFontSize, subheaderFontSize } from '../sharedControls';
+
+const headerFontSizes = [16, 20, 30, 48, 60];
+const comparisonFontSizes = [16, 20, 26, 32, 40];
+
+const headerProportionValues =
+  headerFontSize.config.options.map(
+    (option: { label: string; value: number }) => option.value,
+  ) ?? [];
+
+const subheaderProportionValues =
+  subheaderFontSize.config.options.map(
+    (option: { label: string; value: number }) => option.value,
+  ) ?? [];
+
+const getFontSizeMapping = (
+  proportionValues: number[],
+  actualSizes: number[],
+) =>
+  proportionValues.reduce((acc, value, index) => {
+    acc[value] = actualSizes[index] ?? actualSizes[actualSizes.length - 1];
+    return acc;
+  }, {});
+
+const headerFontSizesMapping = getFontSizeMapping(
+  headerProportionValues,
+  headerFontSizes,
+);
+
+const comparisonFontSizesMapping = getFontSizeMapping(
+  subheaderProportionValues,
+  comparisonFontSizes,
+);
+
+export const getHeaderFontSize = (proportionValue: number) =>
+  headerFontSizesMapping[proportionValue] ??
+  headerFontSizes[headerFontSizes.length - 1];
+
+export const getComparisonFontSize = (proportionValue: number) =>
+  comparisonFontSizesMapping[proportionValue] ??
+  comparisonFontSizes[comparisonFontSizes.length - 1];

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/index.ts

@@ -19,3 +19,4 @@
 
 export { default as BigNumberChartPlugin } from './BigNumberWithTrendline';
 export { default as BigNumberTotalChartPlugin } from './BigNumberTotal';
+export { default as BigNumberPeriodOverPeriodChartPlugin } from './BigNumberPeriodOverPeriod';

superset-frontend/plugins/plugin-chart-echarts/src/index.ts

@@ -32,7 +32,11 @@ export { default as EchartsRadarChartPlugin } from './Radar';
 export { default as EchartsFunnelChartPlugin } from './Funnel';
 export { default as EchartsTreeChartPlugin } from './Tree';
 export { default as EchartsTreemapChartPlugin } from './Treemap';
-export { BigNumberChartPlugin, BigNumberTotalChartPlugin } from './BigNumber';
+export {
+  BigNumberChartPlugin,
+  BigNumberTotalChartPlugin,
+  BigNumberPeriodOverPeriodChartPlugin,
+} from './BigNumber';
 export { default as EchartsSunburstChartPlugin } from './Sunburst';
 export { default as EchartsBubbleChartPlugin } from './Bubble';
 export { default as EchartsWaterfallChartPlugin } from './Waterfall';