Merge pull request #2602 from epam/feature/timeline-scale-month-text

[TimelineScale]: month text customisation added.
epam · Nov 5, 2024 · 7b5f2da · 7b5f2da
2 parents 0ca2f3a + 57f3881
commit 7b5f2da
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/changelog.md b/changelog.md
@@ -7,6 +7,7 @@
 * [TabButton][VerticalTabButton]: decreased paddings, added gaps `3px` between internal items for all sizes according to design
 * [Tag]: changed layout - added gaps between internal items, changed padding
 * [Data Sources]: cursor-based pagination support. More details [here](http://uui.epam.com/documents?id=dataSources-lazy-dataSource&mode=doc&category=dataSources&theme=loveship#using_cursor-based_pagination)
+* [TimelineScale]: added bottom/top month text customisation.
 * [TimelineScale]: customisation of today line height was added.
 
 **What's Fixed**

diff --git a/uui-timeline/src/TimelineScale.tsx b/uui-timeline/src/TimelineScale.tsx
@@ -11,6 +11,8 @@ import { TimelineCanvas, TimelineCanvasProps } from './TimelineCanvas';
 import { useTimelineTransform } from './useTimelineTransform';
 import { CanvasDrawPeriodPartProps, CanvasDrawPeriodProps, CanvasDrawScaleBottomBorderProps, TimelineScaleFonts,
     timelineScale, CanvasDrawTopDaysProps, CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps, CanvasDrawHeaderTodayProps,
+    CanvasDrawTopMonthProps,
+    CanvasDrawBottomMonthProps,
 } from './draw';
 
 /**
@@ -70,6 +72,14 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
      * Overrides weekend/holiday cell background color.
      */
     weekendCellBackgroundColor?: string;
+    /**
+     * Overrides month text on the scale's top line. 
+     */
+    getTopMonth?(month: number): string;
+    /**
+     * Overrides month text on the scale's bottom line.
+     */
+    getBottomMonth?(month: number): string;
     /**
      * Overrides movement arrows icons.
      * @param direction - arrow direction.
@@ -109,15 +119,15 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
     /**
      * Overrides drawing months on the top of the scale.
      */
-    drawTopMonths?: (props: CanvasDrawPeriodPartProps) => void;
+    drawTopMonths?: (props: CanvasDrawTopMonthProps) => void;
     /**
      * Overrides drawing weeks on the scale.
      */
     drawWeeks?: (props: CanvasDrawPeriodWithTodayProps) => void;
     /**
      * Overrides drawing months on the bottom of the scale.
      */
-    drawBottomMonths?: (props: CanvasDrawPeriodWithTodayProps) => void;
+    drawBottomMonths?: (props: CanvasDrawBottomMonthProps) => void;
     /**
      * Overrides drawing years on the scale.
      */
@@ -153,7 +163,8 @@ export function TimelineScale({
     cellBackgroundColor = timelineScale.defaultColors.cellBackgroundColor,
     evenPeriodCellBackgroundColor = timelineScale.defaultColors.evenPeriodCellBackgroundColor,
     weekendCellBackgroundColor = timelineScale.defaultColors.weekendCellBackgroundColor,
-
+    getTopMonth = timelineScale.getTopMonth,
+    getBottomMonth = timelineScale.getBottomMonth,
     drawPeriod = timelineScale.drawPeriod,
     drawMinutes = timelineScale.drawMinutes,
     drawRemainingHours = timelineScale.drawRemainingHours,
@@ -227,7 +238,7 @@ export function TimelineScale({
         drawPeriod({ ...timelineScale.getRemainingHoursScaleRange(), draw: drawRemainingHours, ...commonProps });
         drawPeriod({ ...timelineScale.getHoursScaleRange(), draw: (...props) => drawHours(...props), ...commonProps });
         drawPeriod({
-            draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, weekendCellBackgroundColor, ...todayProps }),
+            draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, weekendCellBackgroundColor, getTopMonth, ...todayProps }),
             ...timelineScale.getTopDaysScaleRange(),
             ...withGridLinesProps,
         });
@@ -237,7 +248,7 @@ export function TimelineScale({
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor }),
+            draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor, getTopMonth }),
             ...timelineScale.getTopMonthsScaleRange(),
             ...withGridLinesProps,
         });
@@ -247,7 +258,7 @@ export function TimelineScale({
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawBottomMonths({ ...props, drawToday, ...todayProps }),
+            draw: (props) => drawBottomMonths({ ...props, getBottomMonth, drawToday, ...todayProps }),
             ...timelineScale.getBottomMonthsScaleRange(),
             ...withGridLinesProps });
         drawPeriod({

diff --git a/uui-timeline/src/draw/scale.ts b/uui-timeline/src/draw/scale.ts
@@ -14,6 +14,8 @@ import {
     CanvasScaleRange,
     CanvasDrawBottomGridLine,
     CanvasDrawWeekendHoursCell,
+    CanvasDrawBottomMonthProps,
+    CanvasDrawTopMonthProps,
 } from './types';
 
 const defaultFonts = {
@@ -46,6 +48,8 @@ const isCurrentPeriod = (leftDate: Date, rightDate: Date) => new Date() >= leftD
 
 const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2 - 1;
 const getBottomCellY = (canvasHeight: number) => getCanvasVerticalCenter(canvasHeight);
+const getTopMonth = (month: number) => months[month]?.toUpperCase() ?? '';
+const getBottomMonth = (month: number) => months[month] ?? '';
 
 const drawScaleBottomBorder = ({
     context,
@@ -398,6 +402,7 @@ const drawTopDays = ({
     todayLineColor = defaultColors.todayLineColor,
     todayLineHeight = defaultWidth.todayLineHeight,
     drawToday: customDrawToday,
+    getTopMonth: customGetMonth = getTopMonth,
     canvasHeight,
     cellBorderColor = defaultColors.cellBorderColor,
     cellBorderWidth = defaultWidth.cellBorderWidth,
@@ -406,7 +411,7 @@ const drawTopDays = ({
     ...restProps
 }: CanvasDrawTopDaysProps) => {
     timelineTransform.getVisibleDays().forEach((w) => {
-        const header = months[w.leftDate.getMonth()] + ' ' + w.leftDate.getDate().toString() + ', ' + w.leftDate.getFullYear();
+        const header = customGetMonth(w.leftDate.getMonth()) + ' ' + w.leftDate.getDate().toString() + ', ' + w.leftDate.getFullYear();
         const isHoliday = timelineTransform.isWeekend(w.leftDate) || timelineTransform.isHoliday(w.leftDate);
         const color = isHoliday ? weekendCellBackgroundColor : cellBackgroundColor;
         drawCellBackground({ context, scaleBar: w, canvasHeight, color });
@@ -416,7 +421,7 @@ const drawTopDays = ({
         drawPeriodText({
             context,
             timelineTransform,
-            text: header.toUpperCase(),
+            text: header,
             x: w.left,
             width: w.right - w.left,
             line: getTopLine(visibility),
@@ -481,8 +486,9 @@ const drawTopMonths = ({
     cellBorderWidth = defaultWidth.cellBorderWidth,
     cellBackgroundColor = defaultColors.cellBackgroundColor,
     evenPeriodCellBackgroundColor = defaultColors.evenPeriodCellBackgroundColor,
+    getTopMonth: customGetMonth = getTopMonth,
     ...restProps
-}: CanvasDrawPeriodPartProps) => {
+}: CanvasDrawTopMonthProps) => {
     timelineTransform.getVisibleMonths().forEach((w) => {
         const color = w.leftDate.getMonth() % 2 === 0
             ? cellBackgroundColor
@@ -491,12 +497,12 @@ const drawTopMonths = ({
         drawCellBackground({ context, scaleBar: w, canvasHeight, color });
         drawBorderForTopCell({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
 
-        const header = months[w.leftDate.getMonth()] + ' ' + w.leftDate.getFullYear();
+        const header = customGetMonth(w.leftDate.getMonth()) + ' ' + w.leftDate.getFullYear();
         const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate);
         drawPeriodText({
             context,
             timelineTransform,
-            text: header.toUpperCase(),
+            text: header,
             x: w.left,
             width: w.right - w.left,
             line: getTopLine(visibility),
@@ -555,11 +561,11 @@ const drawBottomMonths = ({
     cellBorderColor = defaultColors.cellBorderColor,
     cellBorderWidth = defaultWidth.cellBorderWidth,
     cellBackgroundColor = defaultColors.cellBackgroundColor,
-
+    getBottomMonth: customGetMonth = getBottomMonth,
     ...restProps
-}: CanvasDrawPeriodWithTodayProps) => {
+}: CanvasDrawBottomMonthProps) => {
     timelineTransform.getVisibleMonths().forEach((w) => {
-        const text = months[w.leftDate.getMonth()].toString();
+        const text = customGetMonth(w.leftDate.getMonth()).toString();
         const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate);
         drawCellBackground({ context, scaleBar: w, canvasHeight, y: getCanvasVerticalCenter(canvasHeight), color: cellBackgroundColor });
 
@@ -669,7 +675,8 @@ export const timelineScale = {
     getBottomMonthsScaleRange,
     getYearsScaleRange,
     drawHoursCells,
-
+    getTopMonth,
+    getBottomMonth,
     defaultFonts,
     defaultColors,
     defaultWidth,

diff --git a/uui-timeline/src/draw/types.ts b/uui-timeline/src/draw/types.ts
@@ -126,13 +126,22 @@ export interface CanvasDrawPeriodWithTodayProps extends CanvasDrawPeriodPartProp
     drawToday?: (props: CanvasDrawHeaderTodayProps) => void;
 }
 
+export interface CanvasDrawBottomMonthProps extends CanvasDrawPeriodWithTodayProps {
+    getBottomMonth?: (month: number) => string;
+}
+
+export interface CanvasDrawTopMonthProps extends CanvasDrawPeriodPartProps {
+    getTopMonth?: (month: number) => string;
+}
+
 export interface CanvasDrawDaysProps extends CanvasDrawPeriodPartProps, CanvasDrawPeriodWithTodayProps {
     weekendTextColor?: string;
     weekendCellBackgroundColor?: string;
 }
 
 export interface CanvasDrawTopDaysProps extends CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps {
     topDayTextColor?: string;
+    getTopMonth?: (month: number) => string;
 }
 
 export interface CanvasScaleRange {