feat(chart): add axes settings for trendline (#36002)

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

@@ -20,6 +20,7 @@ import { SMART_DATE_ID, t } from '@superset-ui/core';
 import {
   aggregationControl,
   ControlPanelConfig,
+  ControlPanelsContainerProps,
   ControlSubSectionHeader,
   D3_FORMAT_DOCS,
   D3_TIME_FORMAT_OPTIONS,
@@ -145,6 +146,64 @@ const config: ControlPanelConfig = {
         [subtitleFontSize],
         [showMetricNameControl],
         [metricNameFontSizeWithVisibility],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
+        [
+          {
+            name: 'show_x_axis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show X-axis'),
+              renderTrigger: true,
+              default: false,
+              description: t('Whether to display the X Axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'show_x_axis_min_max_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show min/max axis labels'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'When enabled, the axis will display labels for the minimum and maximum values of your data',
+              ),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.show_x_axis?.value),
+            },
+          },
+        ],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
+        [
+          {
+            name: 'show_y_axis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Y-axis'),
+              renderTrigger: true,
+              default: false,
+              description: t('Whether to display the Y Axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'show_y_axis_min_max_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show min/max axis labels'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'When enabled, the axis will display labels for the minimum and maximum values of your data',
+              ),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.show_y_axis?.value),
+            },
+          },
+        ],
         ['y_axis_format'],
         ['currency_format'],
         [

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

@@ -84,6 +84,19 @@ jest.mock('../../utils/tooltip', () => ({
   getDefaultTooltip: jest.fn(() => ({})),
 }));
 
+jest.mock('../../utils/formatters', () => ({
+  getXAxisFormatter: jest.fn(() => String),
+}));
+
+jest.mock('../../constants', () => ({
+  TIMESERIES_CONSTANTS: {
+    gridOffsetBottom: 20,
+    gridOffsetLeft: 20,
+    gridOffsetRight: 20,
+    gridOffsetTop: 20,
+  },
+}));
+
 describe('BigNumberWithTrendline transformProps', () => {
   const onContextMenu = jest.fn();
   const baseFormData = {

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

@@ -30,6 +30,8 @@ import {
 import { GenericDataType } from '@apache-superset/core/api/core';
 import { EChartsCoreOption, graphic } from 'echarts/core';
 import { aggregationChoices } from '@superset-ui/chart-controls';
+import { TIMESERIES_CONSTANTS } from '../../constants';
+import { getXAxisFormatter } from '../../utils/formatters';
 import {
   BigNumberVizProps,
   BigNumberDatum,
@@ -103,6 +105,10 @@ export default function transformProps(
     yAxisFormat,
     currencyFormat,
     timeRangeFixed,
+    showXAxis = false,
+    showXAxisMinMaxLabels = false,
+    showYAxis = false,
+    showYAxisMinMaxLabels = false,
   } = formData;
   const granularity = extractTimegrain(rawFormData);
   const {
@@ -234,21 +240,6 @@ export default function transformProps(
     metricEntry?.d3format,
   );
 
-  const numberFormatter = getValueFormatter(
-    metric,
-    currencyFormats,
-    columnFormats,
-    metricEntry?.d3format || yAxisFormat,
-    currencyFormat,
-  );
-
-  const headerFormatter =
-    metricColtype === GenericDataType.Temporal ||
-    metricColtype === GenericDataType.String ||
-    forceTimestampFormatting
-      ? formatTime
-      : numberFormatter;
-
   if (trendLineData && timeRangeFixed && fromDatetime) {
     const toDatetimeOrToday = toDatetime ?? Date.now();
     if (!trendLineData[0][0] || trendLineData[0][0] > fromDatetime) {
@@ -262,6 +253,21 @@ export default function transformProps(
     }
   }
 
+  const numberFormatter = getValueFormatter(
+    metric,
+    currencyFormats,
+    columnFormats,
+    metricEntry?.d3format || yAxisFormat,
+    currencyFormat,
+  );
+  const xAxisFormatter = getXAxisFormatter(timeFormat);
+  const yAxisFormatter =
+    metricColtype === GenericDataType.Temporal ||
+    metricColtype === GenericDataType.String ||
+    forceTimestampFormatting
+      ? formatTime
+      : numberFormatter;
+
   const echartOptions: EChartsCoreOption = trendLineData
     ? {
         series: [
@@ -288,21 +294,49 @@ export default function transformProps(
           },
         ],
         xAxis: {
-          min: trendLineData[0][0],
-          max: trendLineData[trendLineData.length - 1][0],
-          show: false,
-          type: 'value',
+          type: 'time',
+          show: showXAxis,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            hideOverlap: true,
+            formatter: xAxisFormatter,
+            alignMinLabel: 'left',
+            alignMaxLabel: 'right',
+            showMinLabel: showXAxisMinMaxLabels,
+            showMaxLabel: showXAxisMinMaxLabels,
+          },
         },
         yAxis: {
+          type: 'value',
+          show: showYAxis,
           scale: !startYAxisAtZero,
-          show: false,
-        },
-        grid: {
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            hideOverlap: true,
+            formatter: yAxisFormatter,
+            showMinLabel: showYAxisMinMaxLabels,
+            showMaxLabel: showYAxisMinMaxLabels,
+          },
         },
+        grid:
+          showXAxis || showYAxis
+            ? {
+                containLabel: true,
+                bottom: TIMESERIES_CONSTANTS.gridOffsetBottom,
+                left: TIMESERIES_CONSTANTS.gridOffsetLeft,
+                right: TIMESERIES_CONSTANTS.gridOffsetRight,
+                top: TIMESERIES_CONSTANTS.gridOffsetTop,
+              }
+            : {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+              },
         tooltip: {
           ...getDefaultTooltip(refs),
           show: !inContextMenu,
@@ -314,7 +348,7 @@ export default function transformProps(
                   metricName,
                   params[0].data[1] === null
                     ? t('N/A')
-                    : headerFormatter.format(params[0].data[1]),
+                    : yAxisFormatter.format(params[0].data[1]),
                 ],
               ],
               formatTime(params[0].data[0]),
@@ -326,6 +360,7 @@ export default function transformProps(
             description: `Big number visualization ${subheader}`,
           },
         },
+        useUTC: true,
       }
     : {};
 
@@ -338,7 +373,7 @@ export default function transformProps(
     // @ts-ignore
     bigNumberFallback,
     className,
-    headerFormatter,
+    headerFormatter: yAxisFormatter,
     formatTime,
     formData,
     metricName: originalLabel,

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

@@ -47,6 +47,10 @@ export type BigNumberWithTrendlineFormData = BigNumberTotalFormData & {
     b: number;
   };
   compareLag?: string | number;
+  showXAxis?: boolean;
+  showXAxisMinMaxLabels?: boolean;
+  showYAxis?: boolean;
+  showYAxisMinMaxLabels?: boolean;
 };
 
 export interface BigNumberTotalChartDataResponseResult