allow including weekday to formatted date strings (#27531)

* allow including weekday to formatted dates

* specs

frontend/src/metabase/lib/formatting/date.tsx

@@ -8,6 +8,7 @@ import {
   DEFAULT_DATE_STYLE,
   DEFAULT_TIME_STYLE,
   getTimeFormatFromStyle,
+  hasDay,
   hasHour,
 } from "./datetime-utils";
 
@@ -65,6 +66,7 @@ export function getDateFormatFromStyle(
   style: string,
   unit: DatetimeUnit,
   separator: string,
+  includeWeekday?: boolean,
 ) {
   const replaceSeparators = (format: string) =>
     separator && format ? format.replace(/\//g, separator) : format;
@@ -73,17 +75,27 @@ export function getDateFormatFromStyle(
     unit = "default";
   }
 
+  let format = null;
+
   if (DATE_STYLE_TO_FORMAT[style]) {
     if (DATE_STYLE_TO_FORMAT[style][unit]) {
-      return replaceSeparators(DATE_STYLE_TO_FORMAT[style][unit]);
+      format = replaceSeparators(DATE_STYLE_TO_FORMAT[style][unit]);
     }
   } else {
     console.warn("Unknown date style", style);
   }
-  if (DEFAULT_DATE_FORMATS[unit]) {
-    return replaceSeparators(DEFAULT_DATE_FORMATS[unit]);
+
+  if (format == null) {
+    format = DEFAULT_DATE_FORMATS[unit]
+      ? replaceSeparators(DEFAULT_DATE_FORMATS[unit])
+      : replaceSeparators(style);
   }
-  return replaceSeparators(style);
+
+  if (includeWeekday && hasDay(unit)) {
+    format = `ddd, ${format}`;
+  }
+
+  return format;
 }
 
 export function formatDateTimeForParameter(value: string, unit: DatetimeUnit) {
@@ -295,6 +307,7 @@ export function formatDateTimeWithUnit(
       options.date_style as string,
       unit,
       options.date_separator as string,
+      options.weekday_enabled,
     );
   }
 

frontend/src/metabase/lib/formatting/types.ts

@@ -25,6 +25,7 @@ export interface OptionsType {
   rich?: boolean;
   suffix?: string;
   time_enabled?: "minutes" | "milliseconds" | "seconds" | null;
+  weekday_enabled?: boolean;
   time_format?: string;
   time_style?: string;
   type?: string;

frontend/test/metabase/lib/formatting.unit.spec.js

@@ -643,6 +643,26 @@ describe("formatting", () => {
         ),
       ).toEqual("6 AM");
     });
+
+    test.each([
+      ["minute", "Wed, April 27, 2022, 6:00 AM"],
+      ["hour", "Wed, April 27, 2022, 6:00 AM"],
+      ["day", "Wed, April 27, 2022"],
+      ["week", "Wed, April 27, 2022"],
+      ["month", "April, 2022"],
+      ["year", "2022"],
+    ])(
+      "should include weekday when date unit is smaller or equal whan a week",
+      (unit, formatted) => {
+        const dateString = "2022-04-27T06:00:00.000Z";
+
+        expect(
+          formatDateTimeWithUnit(dateString, unit, {
+            weekday_enabled: true,
+          }),
+        ).toEqual(formatted);
+      },
+    );
   });
 
   describe("formatTime", () => {

frontend/test/metabase/visualizations/components/LineAreaBarRenderer.tz.unit.spec.js

@@ -97,8 +97,8 @@ describe("LineAreaBarRenderer-bar", () => {
     );
     sharedMonthTests(rows, "all months");
 
-    sharedIntervalTests("hour", "MMMM D, YYYY, h:mm A");
-    sharedIntervalTests("day", "MMMM D, YYYY");
+    sharedIntervalTests("hour", "ddd, MMMM D, YYYY, h:mm A");
+    sharedIntervalTests("day", "ddd, MMMM D, YYYY");
     // sharedIntervalTests("week", "wo - gggg"); // weeks have differing formats for ticks and tooltips, disable this test for now
     sharedIntervalTests("month", "MMMM, YYYY");
     sharedIntervalTests("quarter", "[Q]Q - YYYY");
@@ -177,8 +177,9 @@ describe("LineAreaBarRenderer-bar", () => {
           );
         });
         it("should have labels that match tooltips", () => {
-          expect(qsa(".bar").map(getClosestLabelText)).toEqual(
-            getTooltipDimensionValueText(),
+          const labels = qsa(".bar").map(getClosestLabelText);
+          getTooltipDimensionValueText().map((tooltipValue, index) =>
+            expect(tooltipValue).toContain(labels[index]),
           );
         });
       });