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

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

@@ -16,22 +16,166 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { NumberFormats } from '@superset-ui/core';
-import { getPercentFormatter } from '../../src/utils/formatters';
+import {
+  NumberFormats,
+  SMART_DATE_ID,
+  TimeFormatter,
+  TimeGranularity,
+} from '@superset-ui/core';
+import {
+  getPercentFormatter,
+  getXAxisFormatter,
+} from '../../src/utils/formatters';
 
-describe('getPercentFormatter', () => {
+test('getPercentFormatter should format as percent if no format is specified', () => {
   const value = 0.6;
-  test('should format as percent if no format is specified', () => {
-    expect(getPercentFormatter().format(value)).toEqual('60%');
-  });
-  test('should format as percent if SMART_NUMBER is specified', () => {
-    expect(
-      getPercentFormatter(NumberFormats.SMART_NUMBER).format(value),
-    ).toEqual('60%');
-  });
-  test('should format using a provided format', () => {
-    expect(
-      getPercentFormatter(NumberFormats.PERCENT_2_POINT).format(value),
-    ).toEqual('60.00%');
+  expect(getPercentFormatter().format(value)).toEqual('60%');
+});
+
+test('getPercentFormatter should format as percent if SMART_NUMBER is specified', () => {
+  const value = 0.6;
+  expect(getPercentFormatter(NumberFormats.SMART_NUMBER).format(value)).toEqual(
+    '60%',
+  );
+});
+
+test('getPercentFormatter should format using a provided format', () => {
+  const value = 0.6;
+  expect(
+    getPercentFormatter(NumberFormats.PERCENT_2_POINT).format(value),
+  ).toEqual('60.00%');
+});
+
+test('getXAxisFormatter should return smart date formatter for SMART_DATE_ID format', () => {
+  const formatter = getXAxisFormatter(SMART_DATE_ID);
+  expect(formatter).toBeDefined();
+  expect(formatter).toBeInstanceOf(TimeFormatter);
+  expect((formatter as TimeFormatter).id).toBe(SMART_DATE_ID);
+});
+
+test('getXAxisFormatter should return smart date formatter for undefined format', () => {
+  const formatter = getXAxisFormatter();
+  expect(formatter).toBeDefined();
+  expect(formatter).toBeInstanceOf(TimeFormatter);
+  expect((formatter as TimeFormatter).id).toBe(SMART_DATE_ID);
+});
+
+test('getXAxisFormatter should return custom time formatter for custom format', () => {
+  const customFormat = '%Y-%m-%d';
+  const formatter = getXAxisFormatter(customFormat);
+  expect(formatter).toBeDefined();
+  expect(formatter).toBeInstanceOf(TimeFormatter);
+  expect((formatter as TimeFormatter).id).toBe(customFormat);
+});
+
+test('getXAxisFormatter smart date formatter should be returned and not undefined', () => {
+  const formatter = getXAxisFormatter(SMART_DATE_ID);
+  expect(formatter).toBeDefined();
+  expect(formatter).toBeInstanceOf(TimeFormatter);
+  expect((formatter as TimeFormatter).id).toBe(SMART_DATE_ID);
+
+  const undefinedFormatter = getXAxisFormatter(undefined);
+  expect(undefinedFormatter).toBeDefined();
+  expect(undefinedFormatter).toBeInstanceOf(TimeFormatter);
+  expect((undefinedFormatter as TimeFormatter).id).toBe(SMART_DATE_ID);
+
+  const emptyFormatter = getXAxisFormatter();
+  expect(emptyFormatter).toBeDefined();
+  expect(emptyFormatter).toBeInstanceOf(TimeFormatter);
+  expect((emptyFormatter as TimeFormatter).id).toBe(SMART_DATE_ID);
+});
+
+test('getXAxisFormatter time grain aware formatter should prevent millisecond and timestamp formats', () => {
+  const formatter = getXAxisFormatter(SMART_DATE_ID, TimeGranularity.MONTH);
+
+  // Test that dates with milliseconds don't show millisecond format
+  const dateWithMs = new Date('2025-03-15T21:13:32.389Z');
+  const result = (formatter as TimeFormatter).format(dateWithMs);
+  expect(result).not.toContain('.389ms');
+  expect(result).not.toMatch(/\.\d+ms/);
+  expect(result).not.toContain('PM');
+  expect(result).not.toContain('AM');
+  expect(result).not.toMatch(/\d{1,2}:\d{2}/); // No time format
+});
+
+test('getXAxisFormatter time grain aware formatting should prevent problematic formats', () => {
+  // Test that time grain aware formatter prevents the specific issues we solved
+  const monthFormatter = getXAxisFormatter(
+    SMART_DATE_ID,
+    TimeGranularity.MONTH,
+  );
+  const yearFormatter = getXAxisFormatter(SMART_DATE_ID, TimeGranularity.YEAR);
+  const dayFormatter = getXAxisFormatter(SMART_DATE_ID, TimeGranularity.DAY);
+
+  // Test dates that previously caused issues
+  const problematicDates = [
+    new Date('2025-03-15T21:13:32.389Z'), // Had .389ms issue
+    new Date('2025-04-01T02:30:00.000Z'), // Timezone edge case
+    new Date('2025-07-01T00:00:00.000Z'), // Month boundary
+  ];
+
+  problematicDates.forEach(date => {
+    // Month formatter should not show milliseconds or PM/AM
+    const monthResult = (monthFormatter as TimeFormatter).format(date);
+    expect(monthResult).not.toMatch(/\.\d+ms/);
+    expect(monthResult).not.toMatch(/PM|AM/);
+    expect(monthResult).not.toMatch(/\d{1,2}:\d{2}:\d{2}/);
+
+    // Year formatter should not show milliseconds or PM/AM
+    const yearResult = (yearFormatter as TimeFormatter).format(date);
+    expect(yearResult).not.toMatch(/\.\d+ms/);
+    expect(yearResult).not.toMatch(/PM|AM/);
+    expect(yearResult).not.toMatch(/\d{1,2}:\d{2}:\d{2}/);
+
+    // Day formatter should not show milliseconds or seconds
+    const dayResult = (dayFormatter as TimeFormatter).format(date);
+    expect(dayResult).not.toMatch(/\.\d+ms/);
+    expect(dayResult).not.toMatch(/:\d{2}:\d{2}/); // No seconds
   });
 });
+
+test('getXAxisFormatter time grain parameter should be passed correctly', () => {
+  // Test that formatter with time grain is different from formatter without
+  const formatterWithGrain = getXAxisFormatter(
+    SMART_DATE_ID,
+    TimeGranularity.MONTH,
+  );
+  const formatterWithoutGrain = getXAxisFormatter(SMART_DATE_ID);
+
+  expect(formatterWithGrain).toBeDefined();
+  expect(formatterWithoutGrain).toBeDefined();
+  expect(formatterWithGrain).toBeInstanceOf(TimeFormatter);
+  expect(formatterWithoutGrain).toBeInstanceOf(TimeFormatter);
+
+  // Both should be valid formatters
+  const testDate = new Date('2025-04-15T12:30:45.789Z');
+  const resultWithGrain = (formatterWithGrain as TimeFormatter).format(
+    testDate,
+  );
+  const resultWithoutGrain = (formatterWithoutGrain as TimeFormatter).format(
+    testDate,
+  );
+
+  expect(typeof resultWithGrain).toBe('string');
+  expect(typeof resultWithoutGrain).toBe('string');
+  expect(resultWithGrain.length).toBeGreaterThan(0);
+  expect(resultWithoutGrain.length).toBeGreaterThan(0);
+});
+
+test('getXAxisFormatter without time grain should use standard smart date behavior', () => {
+  const standardFormatter = getXAxisFormatter(SMART_DATE_ID);
+  const timeGrainFormatter = getXAxisFormatter(SMART_DATE_ID, undefined);
+
+  // Both should be equivalent when no time grain is provided
+  expect(standardFormatter).toBeDefined();
+  expect(timeGrainFormatter).toBeDefined();
+
+  // Test with a date that has time components
+  const testDate = new Date('2025-01-01T00:00:00.000Z');
+  const standardResult = (standardFormatter as TimeFormatter).format(testDate);
+  const timeGrainResult = (timeGrainFormatter as TimeFormatter).format(
+    testDate,
+  );
+
+  expect(standardResult).toBe(timeGrainResult);
+});