Merge pull request #177 from melfore/175-grid-improve-display-of-times

[Grid] Improve display of time
melfore · Jan 18, 2024 · 653296e · 653296e
2 parents 0217753 + a6f352f
commit 653296e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/src/grid/Cell/index.tsx b/src/grid/Cell/index.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from "react";
 import { Interval } from "luxon";
 
-import { KonvaGroup, KonvaLine, KonvaRect, KonvaText } from "../../@konva";
+import { KonvaGroup, KonvaLine, KonvaText } from "../../@konva";
 import { useTimelineContext } from "../../timeline/TimelineContext";
 import { DEFAULT_STROKE_DARK_MODE, DEFAULT_STROKE_LIGHT_MODE } from "../../utils/theme";
 import { displayInterval } from "../../utils/time-resolution";
@@ -22,10 +22,14 @@ const GridCell = ({ column, height, index, hourInfo: visibleDayInfo }: GridCellP
     columnWidth,
     resolution: { unit: resolutionUnit },
     rowHeight,
+    dateLocale,
     theme: { color: themeColor },
   } = useTimelineContext();
 
-  const cellLabel = useMemo(() => displayInterval(column, resolutionUnit), [column, resolutionUnit]);
+  const cellLabel = useMemo(
+    () => displayInterval(column, resolutionUnit, dateLocale!),
+    [column, resolutionUnit, dateLocale]
+  );
 
   const xPos = useMemo(() => {
     if (resolutionUnit === "day") {
@@ -58,12 +62,10 @@ const GridCell = ({ column, height, index, hourInfo: visibleDayInfo }: GridCellP
     }
     return DEFAULT_STROKE_DARK_MODE;
   }, [themeColor]);
-
   return (
     <KonvaGroup key={`timeslot-${index}`}>
       <KonvaLine x={xPos} y={yPos} points={[0, 0, 0, height]} stroke={stroke} strokeWidth={1} />
-      <KonvaRect fill="transparent" x={xPos - 15} y={yPos - 10} height={15} width={30} />
-      <KonvaText fill={themeColor} x={xPos - 15} y={yPos - 8} text={cellLabel} />
+      <KonvaText fill={themeColor} x={xPos} y={yPos - 8} text={cellLabel} width={columnWidth} align="center" />
     </KonvaGroup>
   );
 };

diff --git a/src/grid/CellGroup/index.tsx b/src/grid/CellGroup/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Duration, Interval } from "luxon";
 
-import { KonvaGroup, KonvaLine, KonvaRect, KonvaText } from "../../@konva";
+import { KonvaGroup, KonvaLine, KonvaText } from "../../@konva";
 import { useTimelineContext } from "../../timeline/TimelineContext";
 import { DEFAULT_STROKE_DARK_MODE, DEFAULT_STROKE_LIGHT_MODE } from "../../utils/theme";
 import { displayAboveInterval } from "../../utils/time-resolution";
@@ -117,7 +117,6 @@ const GridCellGroup = ({ column, index, dayInfo, hourInfo }: GridCellGroupProps)
   return (
     <KonvaGroup key={`timeslot-${index}`}>
       <KonvaLine x={xPos} y={0} points={points} stroke={stroke} strokeWidth={1} />
-      <KonvaRect fill="transparent" x={xPos} y={yPos - 10} height={15} width={unitAboveSpanInPx} />
       <KonvaText
         align="center"
         fill={themeColor}

diff --git a/src/utils/time-resolution.ts b/src/utils/time-resolution.ts
@@ -147,11 +147,11 @@ export const displayAboveInterval = (interval: Interval, unit: Scale, locale: st
     case "hour":
       return start.setLocale(locale).toFormat("dd/MM/yy HH:mm");
     case "day":
-      return start.setLocale(locale).toFormat("ccc dd yyyy");
+      return start.setLocale(locale).toFormat("DDDD");
     case "week":
-      return `${start.setLocale(locale).toFormat("MMM yyyy")} CW ${start.toFormat("WW")}`;
+      return `${start.setLocale(locale).toFormat("MMMM yyyy")} CW ${start.toFormat("WW")}`;
     case "month":
-      return start.setLocale(locale).toFormat("MMM yyyy");
+      return start.setLocale(locale).toFormat("MMMM yyyy");
     default:
       return "N/A";
   }
@@ -191,23 +191,23 @@ export const daysInMonth = (month: number, year: number) => {
  * @param interval the interval to display
  * @param unit the unit in which to display the interval
  */
-export const displayInterval = (interval: Interval, unit: Scale): string => {
+export const displayInterval = (interval: Interval, unit: Scale, locale: string): string => {
   const { start } = interval;
   if (!start) {
     return "-";
   }
 
   switch (unit) {
     case "minute":
-      return start.toFormat("mm");
+      return start.setLocale(locale).toFormat("mm");
     case "hour":
-      return start.toFormat("HH:mm");
+      return start.setLocale(locale).toFormat("HH:mm");
     case "day":
-      return start.toFormat("ccc dd");
+      return start.setLocale(locale).toFormat("ccc dd");
     case "week":
-      return `CW ${start.toFormat("WW")}`;
+      return `CW ${start.setLocale(locale).toFormat("WW")}`;
     case "month":
-      return start.toFormat("MMM yyyy");
+      return start.setLocale(locale).toFormat("MMM yyyy");
     default:
       return "N/A";
   }