feat: add metric name for big number chart types apache#33013 (apache#33099)

Co-authored-by: Fardin Mustaque <[email protected]>

Author: fardin-developer

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

@@ -36,13 +36,25 @@ import {
 } from './types';
 import { useOverflowDetection } from './useOverflowDetection';
 
+const MetricNameText = styled.div<{ metricNameFontSize?: number }>`
+  ${({ theme, metricNameFontSize }) => `
+    font-family: ${theme.typography.families.sansSerif};
+    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;
   align-items: center;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   overflow: auto;
+  padding: 12px;
 `;
 
 const ComparisonValue = styled.div<PopKPIComparisonValueStyleProps>`
@@ -73,6 +85,8 @@ export default function PopKPI(props: PopKPIProps) {
     prevNumber,
     valueDifference,
     percentDifferenceFormattedString,
+    metricName,
+    metricNameFontSize,
     headerFontSize,
     subheaderFontSize,
     comparisonColorEnabled,
@@ -84,8 +98,8 @@ export default function PopKPI(props: PopKPIProps) {
     subtitle,
     subtitleFontSize,
     dashboardTimeRange,
+    showMetricName,
   } = props;
-
   const [comparisonRange, setComparisonRange] = useState<string>('');
 
   useEffect(() => {
@@ -260,9 +274,16 @@ export default function PopKPI(props: PopKPIProps) {
             width: fit-content;
             margin: auto;
             align-items: flex-start;
+            overflow: auto;
           `
         }
       >
+        {showMetricName && metricName && (
+          <MetricNameText metricNameFontSize={metricNameFontSize}>
+            {metricName}
+          </MetricNameText>
+        )}
+
         <div css={bigValueContainerStyles}>
           {bigNumber}
           {percentDifferenceNumber !== 0 && (

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

@@ -28,6 +28,8 @@ import {
   subheaderFontSize,
   subtitleControl,
   subtitleFontSize,
+  showMetricNameControl,
+  metricNameFontSizeWithVisibility,
 } from '../sharedControls';
 import { ColorSchemeEnum } from './types';
 
@@ -70,6 +72,8 @@ const config: ControlPanelConfig = {
         ],
         [subtitleControl],
         [subtitleFontSize],
+        [showMetricNameControl],
+        [metricNameFontSizeWithVisibility],
         [
           {
             ...subheaderFontSize,

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

@@ -26,7 +26,13 @@ import {
   SimpleAdhocFilter,
   ensureIsArray,
 } from '@superset-ui/core';
-import { getComparisonFontSize, getHeaderFontSize } from './utils';
+import {
+  getComparisonFontSize,
+  getHeaderFontSize,
+  getMetricNameFontSize,
+} from './utils';
+
+import { getOriginalLabel } from '../utils';
 
 dayjs.extend(utc);
 
@@ -83,6 +89,7 @@ export default function transformProps(chartProps: ChartProps) {
     headerFontSize,
     headerText,
     metric,
+    metricNameFontSize,
     yAxisFormat,
     currencyFormat,
     subheaderFontSize,
@@ -91,11 +98,14 @@ export default function transformProps(chartProps: ChartProps) {
     percentDifferenceFormat,
     subtitle = '',
     subtitleFontSize,
-    columnConfig,
+    columnConfig = {},
   } = formData;
   const { data: dataA = [] } = queriesData[0];
   const data = dataA;
   const metricName = metric ? getMetricLabel(metric) : '';
+  const metrics = chartProps.datasource?.metrics || [];
+  const originalLabel = getOriginalLabel(metric, metrics);
+  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(
@@ -179,14 +189,16 @@ export default function transformProps(chartProps: ChartProps) {
     width,
     height,
     data,
-    metricName,
+    metricName: originalLabel,
     bigNumber,
     prevNumber,
     valueDifference,
     percentDifferenceFormattedString: percentDifference,
     boldText,
     subtitle,
     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,10 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import {
+  headerFontSize,
+  subheaderFontSize,
+  metricNameFontSize,
+} from '../sharedControls';
 
 const headerFontSizes = [16, 20, 30, 48, 60];
-const comparisonFontSizes = [16, 20, 26, 32, 40];
+const sharedFontSizes = [16, 20, 26, 32, 40];
+
+const metricNameProportionValues =
+  metricNameFontSize.config.options.map(
+    (option: { label: string; value: number }) => option.value,
+  ) ?? [];
 
 const headerProportionValues =
   headerFontSize.config.options.map(
@@ -40,20 +49,28 @@ const getFontSizeMapping = (
     return acc;
   }, {});
 
+const metricNameFontSizesMapping = getFontSizeMapping(
+  metricNameProportionValues,
+  sharedFontSizes,
+);
 const headerFontSizesMapping = getFontSizeMapping(
   headerProportionValues,
   headerFontSizes,
 );
 
 const comparisonFontSizesMapping = getFontSizeMapping(
   subheaderProportionValues,
-  comparisonFontSizes,
+  sharedFontSizes,
 );
 
+export const getMetricNameFontSize = (proportionValue: number) =>
+  metricNameFontSizesMapping[proportionValue] ??
+  sharedFontSizes[sharedFontSizes.length - 1];
+
 export const getHeaderFontSize = (proportionValue: number) =>
   headerFontSizesMapping[proportionValue] ??
   headerFontSizes[headerFontSizes.length - 1];
 
 export const getComparisonFontSize = (proportionValue: number) =>
   comparisonFontSizesMapping[proportionValue] ??
-  comparisonFontSizes[comparisonFontSizes.length - 1];
+  sharedFontSizes[sharedFontSizes.length - 1];

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

@@ -28,6 +28,8 @@ import {
   headerFontSize,
   subtitleFontSize,
   subtitleControl,
+  showMetricNameControl,
+  metricNameFontSizeWithVisibility,
 } from '../sharedControls';
 
 export default {
@@ -44,6 +46,8 @@ export default {
         [headerFontSize],
         [subtitleControl],
         [subtitleFontSize],
+        [showMetricNameControl],
+        [metricNameFontSizeWithVisibility],
         ['y_axis_format'],
         ['currency_format'],
         [

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

@@ -36,6 +36,7 @@ jest.mock('@superset-ui/core', () => ({
 jest.mock('../utils', () => ({
   getDateFormatter: jest.fn(() => (v: any) => `${v}pm`),
   parseMetricValue: jest.fn(val => Number(val)),
+  getOriginalLabel: jest.fn((metric, metrics) => metric),
 }));
 
 describe('BigNumberTotal transformProps', () => {

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

@@ -29,7 +29,7 @@ import {
   getValueFormatter,
 } from '@superset-ui/core';
 import { BigNumberTotalChartProps, BigNumberVizProps } from '../types';
-import { getDateFormatter, parseMetricValue } from '../utils';
+import { getDateFormatter, getOriginalLabel, parseMetricValue } from '../utils';
 import { Refs } from '../../types';
 
 export default function transformProps(
@@ -45,6 +45,7 @@ export default function transformProps(
     datasource: { currencyFormats = {}, columnFormats = {} },
   } = chartProps;
   const {
+    metricNameFontSize,
     headerFontSize,
     metric = 'value',
     subtitle,
@@ -58,9 +59,12 @@ export default function transformProps(
     subheaderFontSize,
   } = formData;
   const refs: Refs = {};
-  const { data = [], coltypes = [] } = queriesData[0];
+  const { data = [], coltypes = [] } = queriesData[0] || {};
   const granularity = extractTimegrain(rawFormData as QueryFormData);
+  const metrics = chartProps.datasource?.metrics || [];
+  const originalLabel = getOriginalLabel(metric, metrics);
   const metricName = getMetricLabel(metric);
+  const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
   const formattedSubtitle = subtitle?.trim() ? subtitle : subheader || '';
   const formattedSubtitleFontSize = subtitle?.trim()
     ? (subtitleFontSize ?? 1)
@@ -103,7 +107,6 @@ export default function transformProps(
   const colorThresholdFormatters =
     getColorFormatters(conditionalFormatting, data, false) ??
     defaultColorFormatters;
-
   return {
     width,
     height,
@@ -116,5 +119,8 @@ export default function transformProps(
     onContextMenu,
     refs,
     colorThresholdFormatters,
+    metricName: originalLabel,
+    showMetricName,
+    metricNameFontSize,
   };
 }