feat: add metric name for big number chart types

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

@@ -36,6 +36,15 @@ import {
 } from './types';
 import { useOverflowDetection } from './useOverflowDetection';
 
+const MetricNameContainer = styled.div<{ metricNameFontSize?: number }>`
+  ${({ theme, metricNameFontSize }) => `
+    font-weight: ${theme.typography.weights.normal};
+    font-size: ${metricNameFontSize || theme.typography.sizes.s * 2}px;
+    text-align: center;
+    margin-bottom: ${theme.gridUnit * 3}px;
+  `}
+`;
+
 const NumbersContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -73,6 +82,8 @@ export default function PopKPI(props: PopKPIProps) {
     prevNumber,
     valueDifference,
     percentDifferenceFormattedString,
+    metricName,
+    metricNameFontSize,
     headerFontSize,
     subheaderFontSize,
     comparisonColorEnabled,
@@ -84,8 +95,8 @@ export default function PopKPI(props: PopKPIProps) {
     subtitle,
     subtitleFontSize,
     dashboardTimeRange,
+    showMetricName,
   } = props;
-
   const [comparisonRange, setComparisonRange] = useState<string>('');
 
   useEffect(() => {
@@ -263,6 +274,12 @@ export default function PopKPI(props: PopKPIProps) {
           `
         }
       >
+        {showMetricName && metricName && (
+          <MetricNameContainer metricNameFontSize={metricNameFontSize}>
+            {metricName}
+          </MetricNameContainer>
+        )}
+
         <div css={bigValueContainerStyles}>
           {bigNumber}
           {percentDifferenceNumber !== 0 && (
@@ -274,7 +291,7 @@ export default function PopKPI(props: PopKPIProps) {
         {subtitle && (
           <SubtitleText
             style={{
-              fontSize: `${subtitleFontSize * height * 0.4}px`,
+              fontSize: `${subtitleFontSize}px`,
             }}
           >
             {subtitle}

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

@@ -28,6 +28,7 @@ import {
   subheaderFontSize,
   subtitleControl,
   subtitleFontSize,
+  metricNameFontSize,
 } from '../sharedControls';
 import { ColorSchemeEnum } from './types';
 
@@ -70,6 +71,28 @@ const config: ControlPanelConfig = {
         ],
         [subtitleControl],
         [subtitleFontSize],
+        [
+          {
+            name: 'show_metric_name',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Metric Name'),
+              renderTrigger: true,
+              default: false,
+              description: t('Whether to display the metric name'),
+            },
+          },
+        ],
+        [
+          {
+            ...metricNameFontSize,
+            config: {
+              ...metricNameFontSize.config,
+              visibility: ({ controls }) =>
+                controls?.show_metric_name?.value === true,
+            },
+          },
+        ],
         [
           {
             ...subheaderFontSize,

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

@@ -26,7 +26,12 @@ import {
   SimpleAdhocFilter,
   ensureIsArray,
 } from '@superset-ui/core';
-import { getComparisonFontSize, getHeaderFontSize } from './utils';
+import {
+  getComparisonFontSize,
+  getHeaderFontSize,
+  getMetricNameFontSize,
+  getSubtitleFontSize,
+} from './utils';
 
 dayjs.extend(utc);
 
@@ -83,6 +88,7 @@ export default function transformProps(chartProps: ChartProps) {
     headerFontSize,
     headerText,
     metric,
+    metricNameFontSize,
     yAxisFormat,
     currencyFormat,
     subheaderFontSize,
@@ -96,6 +102,7 @@ export default function transformProps(chartProps: ChartProps) {
   const { data: dataA = [] } = queriesData[0];
   const data = dataA;
   const metricName = metric ? getMetricLabel(metric) : '';
+  const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
   const timeComparison = ensureIsArray(chartProps.rawFormData?.time_compare)[0];
   const startDateOffset = chartProps.rawFormData?.start_date_offset;
   const currentTimeRangeFilter = chartProps.rawFormData?.adhoc_filters?.filter(
@@ -186,7 +193,9 @@ export default function transformProps(chartProps: ChartProps) {
     percentDifferenceFormattedString: percentDifference,
     boldText,
     subtitle,
-    subtitleFontSize,
+    subtitleFontSize: getSubtitleFontSize(subtitleFontSize),
+    showMetricName,
+    metricNameFontSize: getMetricNameFontSize(metricNameFontSize),
     headerFontSize: getHeaderFontSize(headerFontSize),
     subheaderFontSize: getComparisonFontSize(subheaderFontSize),
     headerText,

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

@@ -61,6 +61,8 @@ export type PopKPIProps = PopKPIStylesProps &
     data: TimeseriesDataRecord[];
     metrics: Metric[];
     metricName: string;
+    metricNameFontSize?: number;
+    showMetricName: boolean;
     bigNumber: string;
     prevNumber: string;
     subtitle?: string;

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

@@ -16,21 +16,33 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import { CustomControlItem } from '@superset-ui/chart-controls';
+import {
+  headerFontSize,
+  subheaderFontSize,
+  metricNameFontSize,
+  subtitleFontSize,
+} from '../sharedControls';
 
+// Define font sizes
 const headerFontSizes = [16, 20, 30, 48, 60];
-const comparisonFontSizes = [16, 20, 26, 32, 40];
+const standardFontSizes = [16, 20, 26, 32, 40];
 
-const headerProportionValues =
-  headerFontSize.config.options.map(
+// Helper function to extract proportion values from control
+const extractProportionValues = (control: CustomControlItem): number[] =>
+  control.config.options.map(
     (option: { label: string; value: number }) => option.value,
-  ) ?? [];
+  );
 
-const subheaderProportionValues =
-  subheaderFontSize.config.options.map(
-    (option: { label: string; value: number }) => option.value,
-  ) ?? [];
+// Extract proportion values for each control
+const proportionValues = {
+  metricName: extractProportionValues(metricNameFontSize),
+  header: extractProportionValues(headerFontSize),
+  subheader: extractProportionValues(subheaderFontSize),
+  subtitle: extractProportionValues(subtitleFontSize),
+};
 
+// Create font size mapping
 const getFontSizeMapping = (
   proportionValues: number[],
   actualSizes: number[],
@@ -40,20 +52,33 @@ const getFontSizeMapping = (
     return acc;
   }, {});
 
-const headerFontSizesMapping = getFontSizeMapping(
-  headerProportionValues,
-  headerFontSizes,
+// Create font size getter factory
+const createFontSizeGetter = (
+  proportionValues: number[],
+  actualSizes: number[],
+) => {
+  const mapping = getFontSizeMapping(proportionValues, actualSizes);
+  return (proportionValue: number) =>
+    mapping[proportionValue] ?? actualSizes[actualSizes.length - 1];
+};
+
+// Export getters for each font size
+export const getMetricNameFontSize = createFontSizeGetter(
+  proportionValues.metricName,
+  standardFontSizes,
 );
 
-const comparisonFontSizesMapping = getFontSizeMapping(
-  subheaderProportionValues,
-  comparisonFontSizes,
+export const getHeaderFontSize = createFontSizeGetter(
+  proportionValues.header,
+  headerFontSizes,
 );
 
-export const getHeaderFontSize = (proportionValue: number) =>
-  headerFontSizesMapping[proportionValue] ??
-  headerFontSizes[headerFontSizes.length - 1];
+export const getComparisonFontSize = createFontSizeGetter(
+  proportionValues.subheader,
+  standardFontSizes,
+);
 
-export const getComparisonFontSize = (proportionValue: number) =>
-  comparisonFontSizesMapping[proportionValue] ??
-  comparisonFontSizes[comparisonFontSizes.length - 1];
+export const getSubtitleFontSize = createFontSizeGetter(
+  proportionValues.subtitle,
+  standardFontSizes,
+);

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

@@ -28,6 +28,7 @@ import {
   headerFontSize,
   subtitleFontSize,
   subtitleControl,
+  metricNameFontSize,
 } from '../sharedControls';
 
 export default {
@@ -41,6 +42,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
+        [metricNameFontSize],
         [headerFontSize],
         [subtitleControl],
         [subtitleFontSize],

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

@@ -45,6 +45,7 @@ export default function transformProps(
     datasource: { currencyFormats = {}, columnFormats = {} },
   } = chartProps;
   const {
+    metricNameFontSize,
     headerFontSize,
     metric = 'value',
     subtitle = '',
@@ -98,7 +99,6 @@ export default function transformProps(
   const colorThresholdFormatters =
     getColorFormatters(conditionalFormatting, data, false) ??
     defaultColorFormatters;
-
   return {
     width,
     height,
@@ -112,5 +112,7 @@ export default function transformProps(
     onContextMenu,
     refs,
     colorThresholdFormatters,
+    metricName,
+    metricNameFontSize,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -35,6 +35,7 @@ const defaultNumberFormatter = getNumberFormatter();
 
 const PROPORTION = {
   // text size: proportion of the chart container sans trendline
+  METRIC_NAME: 0.125,
   KICKER: 0.1,
   HEADER: 0.3,
   SUBHEADER: 0.125,
@@ -49,6 +50,8 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     formatTime: getTimeFormatter(SMART_DATE_VERBOSE_ID),
     headerFontSize: PROPORTION.HEADER,
     kickerFontSize: PROPORTION.KICKER,
+    metricNameFontSize: PROPORTION.METRIC_NAME,
+    showMetricName: true,
     mainColor: BRAND_COLOR,
     showTimestamp: false,
     showTrendLine: false,
@@ -92,6 +95,36 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     );
   }
 
+  renderMetricName(maxHeight: number) {
+    const { metricName, width, showMetricName } = this.props;
+    if (!showMetricName || !metricName) return null;
+
+    const text = metricName;
+
+    const container = this.createTemporaryContainer();
+    document.body.append(container);
+    const fontSize = computeMaxFontSize({
+      text,
+      maxWidth: width,
+      maxHeight,
+      className: 'metric-name',
+      container,
+    });
+    container.remove();
+
+    return (
+      <div
+        className="metric-name"
+        style={{
+          fontSize,
+          height: 'auto',
+        }}
+      >
+        {text}
+      </div>
+    );
+  }
+
   renderKicker(maxHeight: number) {
     const { timestamp, showTimestamp, formatTime, width } = this.props;
     if (
@@ -316,6 +349,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
       kickerFontSize,
       headerFontSize,
       subheaderFontSize,
+      metricNameFontSize,
       subtitleFontSize,
     } = this.props;
     const className = this.getClassName();
@@ -333,6 +367,11 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
                 (kickerFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
               ),
             )}
+            {this.renderMetricName(
+              Math.ceil(
+                (metricNameFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
+              ),
+            )}
             {this.renderHeader(
               Math.ceil(headerFontSize * (1 - PROPORTION.TRENDLINE) * height),
             )}
@@ -342,7 +381,9 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
               ),
             )}
             {this.renderSubtitle(
-              Math.ceil(subtitleFontSize * (1 - PROPORTION.TRENDLINE) * height),
+              Math.ceil(
+                (subtitleFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
+              ),
             )}
           </div>
           {this.renderTrendline(chartHeight)}
@@ -354,9 +395,10 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
       <div className={className} style={{ height }}>
         {this.renderFallbackWarning()}
         {this.renderKicker((kickerFontSize || 0) * height)}
+        {this.renderMetricName((metricNameFontSize || 0) * height)}
         {this.renderHeader(Math.ceil(headerFontSize * height))}
         {this.renderSubheader(Math.ceil(subheaderFontSize * height))}
-        {this.renderSubtitle(Math.ceil(subtitleFontSize * height))}
+        {this.renderSubtitle(Math.ceil((subtitleFontSize || 0) * height))}
       </div>
     );
   }
@@ -380,6 +422,7 @@ export default styled(BigNumberVis)`
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
+      width: 100%;
       .alert {
         font-size: ${theme.typography.sizes.s};
         margin: -0.5em 0 0.4em;
@@ -394,6 +437,12 @@ export default styled(BigNumberVis)`
       padding-bottom: 2em;
     }
 
+    .metric-name {
+      line-height: 1em;
+      white-space: nowrap;
+      padding-bottom: ${theme.gridUnit * 4}px;
+    }
+
     .header-line {
       position: relative;
       line-height: 1em;
@@ -412,7 +461,6 @@ export default styled(BigNumberVis)`
 
     .subtitle-line {
       line-height: 1em;
-      padding-top: 0.3em;
     }
 
     &.is-fallback-value {