fix(echarts): adaptive formatting labels (#38017)

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

@@ -619,7 +619,7 @@ export default function transformProps(
       : String;
   const xAxisFormatter =
     xAxisDataType === GenericDataType.Temporal
-      ? getXAxisFormatter(xAxisTimeFormat)
+      ? getXAxisFormatter(xAxisTimeFormat, timeGrainSqla)
       : xAxisDataType === GenericDataType.Numeric
         ? getNumberFormatter(xAxisNumberFormat)
         : String;

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

@@ -29,13 +29,99 @@ import {
   SMART_DATE_ID,
   SMART_DATE_VERBOSE_ID,
   TimeFormatter,
+  TimeGranularity,
   ValueFormatter,
 } from '@superset-ui/core';
 
 export const getSmartDateDetailedFormatter = () =>
   getTimeFormatter(SMART_DATE_DETAILED_ID);
 
-export const getSmartDateFormatter = () => getTimeFormatter(SMART_DATE_ID);
+export const getSmartDateFormatter = (timeGrain?: string) => {
+  const baseFormatter = getTimeFormatter(SMART_DATE_ID);
+
+  // If no time grain provided, use the standard smart date formatter
+  if (!timeGrain) {
+    return baseFormatter;
+  }
+
+  // Create a wrapper that normalizes dates based on time grain
+  return new TimeFormatter({
+    id: SMART_DATE_ID,
+    label: baseFormatter.label,
+    formatFunc: (date: Date) => {
+      // Create a normalized date based on time grain to ensure consistent smart formatting
+      const normalizedDate = new Date(date);
+
+      // Always remove milliseconds to prevent .XXXms format
+      normalizedDate.setMilliseconds(0);
+
+      // For all time grains, normalize using UTC methods to avoid timezone issues
+      if (timeGrain === TimeGranularity.YEAR) {
+        // Set to January 1st at midnight UTC - smart formatter will show year
+        const year = normalizedDate.getUTCFullYear();
+        const cleanDate = new Date(Date.UTC(year, 0, 1, 0, 0, 0, 0));
+        return baseFormatter(cleanDate);
+      } else if (timeGrain === TimeGranularity.QUARTER) {
+        // Set to first month of quarter, first day, midnight UTC
+        const year = normalizedDate.getUTCFullYear();
+        const month = normalizedDate.getUTCMonth();
+        const quarterStartMonth = Math.floor(month / 3) * 3;
+        const cleanDate = new Date(
+          Date.UTC(year, quarterStartMonth, 1, 0, 0, 0, 0),
+        );
+        return baseFormatter(cleanDate);
+      } else if (timeGrain === TimeGranularity.MONTH) {
+        // Set to first of month at midnight UTC - smart formatter will show month name or year
+        const year = normalizedDate.getUTCFullYear();
+        const month = normalizedDate.getUTCMonth();
+        const cleanDate = new Date(Date.UTC(year, month, 1, 0, 0, 0, 0));
+        return baseFormatter(cleanDate);
+      } else if (
+        timeGrain === TimeGranularity.WEEK ||
+        timeGrain === TimeGranularity.WEEK_STARTING_SUNDAY ||
+        timeGrain === TimeGranularity.WEEK_STARTING_MONDAY ||
+        timeGrain === TimeGranularity.WEEK_ENDING_SATURDAY ||
+        timeGrain === TimeGranularity.WEEK_ENDING_SUNDAY
+      ) {
+        // Set to midnight UTC, keep the day
+        const year = normalizedDate.getUTCFullYear();
+        const month = normalizedDate.getUTCMonth();
+        const day = normalizedDate.getUTCDate();
+        const cleanDate = new Date(Date.UTC(year, month, day, 0, 0, 0, 0));
+        return baseFormatter(cleanDate);
+      } else if (
+        timeGrain === TimeGranularity.DAY ||
+        timeGrain === TimeGranularity.DATE
+      ) {
+        // Set to midnight UTC
+        const year = normalizedDate.getUTCFullYear();
+        const month = normalizedDate.getUTCMonth();
+        const day = normalizedDate.getUTCDate();
+        const cleanDate = new Date(Date.UTC(year, month, day, 0, 0, 0, 0));
+        return baseFormatter(cleanDate);
+      } else if (
+        timeGrain === TimeGranularity.HOUR ||
+        timeGrain === TimeGranularity.THIRTY_MINUTES ||
+        timeGrain === TimeGranularity.FIFTEEN_MINUTES ||
+        timeGrain === TimeGranularity.TEN_MINUTES ||
+        timeGrain === TimeGranularity.FIVE_MINUTES ||
+        timeGrain === TimeGranularity.MINUTE ||
+        timeGrain === TimeGranularity.SECOND
+      ) {
+        // Set to top of hour UTC
+        const year = normalizedDate.getUTCFullYear();
+        const month = normalizedDate.getUTCMonth();
+        const day = normalizedDate.getUTCDate();
+        const hour = normalizedDate.getUTCHours();
+        const cleanDate = new Date(Date.UTC(year, month, day, hour, 0, 0, 0));
+        return baseFormatter(cleanDate);
+      }
+
+      // Use the base formatter on the normalized date
+      return baseFormatter(normalizedDate);
+    },
+  });
+};
 
 export const getSmartDateVerboseFormatter = () =>
   getTimeFormatter(SMART_DATE_VERBOSE_ID);
@@ -88,9 +174,10 @@ export function getTooltipTimeFormatter(
 
 export function getXAxisFormatter(
   format?: string,
+  timeGrain?: string,
 ): TimeFormatter | StringConstructor | undefined {
   if (format === SMART_DATE_ID || !format) {
-    return undefined;
+    return getSmartDateFormatter(timeGrain);
   }
   if (format) {
     return getTimeFormatter(format);