feat(charts): add subtitle option and metric customization controls (#32975)

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

@@ -24,7 +24,11 @@ import {
   Dataset,
   getStandardizedControls,
 } from '@superset-ui/chart-controls';
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import {
+  headerFontSize,
+  subtitleFontSize,
+  subtitleControl,
+} from '../sharedControls';
 
 export default {
   controlPanelSections: [
@@ -33,32 +37,13 @@ export default {
       expanded: true,
       controlSetRows: [['metric'], ['adhoc_filters']],
     },
-    {
-      label: t('Display settings'),
-      expanded: true,
-      tabOverride: 'data',
-      controlSetRows: [
-        [
-          {
-            name: 'subheader',
-            config: {
-              type: 'TextControl',
-              label: t('Subheader'),
-              renderTrigger: true,
-              description: t(
-                'Description text that shows up below your Big Number',
-              ),
-            },
-          },
-        ],
-      ],
-    },
     {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
         [headerFontSize],
-        [subheaderFontSize],
+        [subtitleControl],
+        [subtitleFontSize],
         ['y_axis_format'],
         ['currency_format'],
         [

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

@@ -47,8 +47,8 @@ export default function transformProps(
   const {
     headerFontSize,
     metric = 'value',
-    subheader = '',
-    subheaderFontSize,
+    subtitle = '',
+    subtitleFontSize,
     forceTimestampFormatting,
     timeFormat,
     yAxisFormat,
@@ -59,7 +59,7 @@ export default function transformProps(
   const { data = [], coltypes = [] } = queriesData[0];
   const granularity = extractTimegrain(rawFormData as QueryFormData);
   const metricName = getMetricLabel(metric);
-  const formattedSubheader = subheader;
+  const formattedSubtitle = subtitle;
   const bigNumber =
     data.length === 0 ? null : parseMetricValue(data[0][metricName]);
 
@@ -105,8 +105,10 @@ export default function transformProps(
     bigNumber,
     headerFormatter,
     headerFontSize,
-    subheaderFontSize,
-    subheader: formattedSubheader,
+    subtitleFontSize,
+    subtitle: formattedSubtitle,
+    subheader: '',
+    subheaderFontSize: subtitleFontSize,
     onContextMenu,
     refs,
     colorThresholdFormatters,