[Timeline]: added ranges to lib.

epam · Jul 17, 2024 · df00936 · df00936
1 parent 72b4533
commit df00936
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 25 deletions.
diff --git a/uui-timeline/src/TimelineGrid.tsx b/uui-timeline/src/TimelineGrid.tsx
@@ -58,23 +58,23 @@ export function TimelineGrid({
             ...drawProps,
             drawLine: drawLine ?? timelineGrid.drawLine,
         };
-        if (pxPerDay >= 40000) {
+        if (timelineGrid.shouldDrawMinutes(pxPerDay)) {
             (drawMinutes ?? timelineGrid.drawMinutes)(options);
         }
 
-        if (pxPerDay >= 1600) {
+        if (timelineGrid.shouldDrawQouterHours(pxPerDay)) {
             (drawQuoterHours ?? timelineGrid.drawQuoterHours)(options);
         }
 
-        if (pxPerDay >= 190) {
+        if (timelineGrid.shouldDrawHours(pxPerDay)) {
             (drawHours ?? timelineGrid.drawHours)(options);
         }
 
-        if (pxPerDay > 10) {
+        if (timelineGrid.shouldDrawDays(pxPerDay)) {
             (drawDays ?? timelineGrid.drawDays)(options);
         }
 
-        if (pxPerDay > 6 && pxPerDay < 200) {
+        if (timelineGrid.shouldDrawHolidays(pxPerDay)) {
             (drawHolidays ?? timelineGrid.drawHolidays)({
                 ...options,
                 drawWeekend: drawWeekend ?? timelineGrid.drawWeekend,
@@ -84,11 +84,11 @@ export function TimelineGrid({
             });
         }
 
-        if (pxPerDay > 6) {
+        if (timelineGrid.shouldDrawWeeks(pxPerDay)) {
             (drawWeeks ?? timelineGrid.drawWeeks)(options);
         }
 
-        if (pxPerDay > 0.5) {
+        if (timelineGrid.shouldDrawMonths(pxPerDay)) {
             (drawMonths ?? timelineGrid.drawMonths)(options);
         }
 

diff --git a/uui-timeline/src/TimelineScale.tsx b/uui-timeline/src/TimelineScale.tsx
@@ -119,25 +119,34 @@ export function TimelineScale({
             ...fonts,
         };
 
-        drawPeriod({ minPxPerDay: 40000, maxPxPerDay: null, draw: drawMinutes, ...commonProps });
-        drawPeriod({ minPxPerDay: 800, maxPxPerDay: 40000, draw: drawRemainingHours, ...commonProps });
-        drawPeriod({ minPxPerDay: 200, maxPxPerDay: 20000, draw: drawHours, ...commonProps });
+        drawPeriod({ ...timelineScale.getMinutesScaleRange(), draw: drawMinutes, ...commonProps });
+        drawPeriod({ ...timelineScale.getRemainingHoursScaleRange(), draw: drawRemainingHours, ...commonProps });
+        drawPeriod({ ...timelineScale.getHoursScaleRange(), draw: drawHours, ...commonProps });
         drawPeriod({
-            minPxPerDay: 200,
-            maxPxPerDay: null,
             draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, todayLineColor, drawToday }),
+            ...timelineScale.getTopDaysScaleRange(),
             ...commonProps,
         });
         drawPeriod({
-            minPxPerDay: 20,
-            maxPxPerDay: 200,
             draw: (props) => drawDays({ ...props, weekendTextColor, todayLineColor, drawToday }),
+            ...timelineScale.getDaysScaleRange(),
+            ...commonProps,
+        });
+        drawPeriod({ ...timelineScale.getTopMonthsScaleRange(), draw: drawTopMonths, ...commonProps });
+        drawPeriod({
+            draw: (props) => drawWeeks({ ...props, todayLineColor, drawToday }),
+            ...timelineScale.getWeeksScaleRange(),
+            ...commonProps,
+        });
+        drawPeriod({
+            draw: (props) => drawBottomMonths({ ...props, todayLineColor, drawToday }),
+            ...timelineScale.getBottomMonthsScaleRange(),
+            ...commonProps });
+        drawPeriod({
+            draw: (props) => drawYears({ ...props, todayLineColor, drawToday }),
+            ...timelineScale.getYearsScaleRange(),
             ...commonProps,
         });
-        drawPeriod({ minPxPerDay: 6, maxPxPerDay: 200, draw: drawTopMonths, ...commonProps });
-        drawPeriod({ minPxPerDay: 6, maxPxPerDay: 20, draw: (props) => drawWeeks({ ...props, todayLineColor, drawToday }), ...commonProps });
-        drawPeriod({ minPxPerDay: 1, maxPxPerDay: 6, draw: (props) => drawBottomMonths({ ...props, todayLineColor, drawToday }), ...commonProps });
-        drawPeriod({ minPxPerDay: null, maxPxPerDay: 6, draw: (props) => drawYears({ ...props, todayLineColor, drawToday }), ...commonProps });
     };
 
     useEffect(() => {

diff --git a/uui-timeline/src/draw/grid.ts b/uui-timeline/src/draw/grid.ts
@@ -126,6 +126,14 @@ const drawToday = ({ context, timelineTransform, canvasHeight, todayLineColor =
     context.stroke();
 };
 
+const shouldDrawMinutes = (pxPerDay: number) => pxPerDay >= 4000;
+const shouldDrawQouterHours = (pxPerDay: number) => pxPerDay >= 1600;
+const shouldDrawHours = (pxPerDay: number) => pxPerDay >= 190;
+const shouldDrawDays = (pxPerDay: number) => pxPerDay > 10;
+const shouldDrawHolidays = (pxPerDay: number) => pxPerDay > 6 && pxPerDay < 200;
+const shouldDrawWeeks = (pxPerDay: number) => pxPerDay > 6;
+const shouldDrawMonths = (pxPerDay: number) => pxPerDay > 0.5;
+
 export const timelineGrid = {
     drawLine,
     drawHoliday,
@@ -141,5 +149,13 @@ export const timelineGrid = {
     drawYears,
     drawToday,
 
+    shouldDrawMinutes,
+    shouldDrawQouterHours,
+    shouldDrawHours,
+    shouldDrawDays,
+    shouldDrawHolidays,
+    shouldDrawWeeks,
+    shouldDrawMonths,
+
     defaultColors,
 };
diff --git a/uui-timeline/src/draw/scale.ts b/uui-timeline/src/draw/scale.ts
@@ -8,6 +8,7 @@ import {
     CanvasDrawPeriodProps,
     CanvasDrawPeriodWithTodayProps,
     CanvasDrawTopDaysProps,
+    CanvasScaleRange,
 } from './types';
 
 const defaultFonts = {
@@ -195,8 +196,7 @@ const drawHours = ({
 
 const drawToday = ({ context, scaleBar, todayLineColor = defaultColors.todayLineColor }: CanvasDrawHeaderTodayProps) => {
     if (isCurrentPeriod(scaleBar.leftDate, scaleBar.rightDate)) {
-        // context.fillStyle = todayLineColor;
-        context.fillStyle = 'pink';
+        context.fillStyle = todayLineColor;
         context.fillRect(scaleBar.left, 56, scaleBar.right - scaleBar.left, 4);
     }
 };
@@ -366,6 +366,16 @@ const drawYears = ({
     });
 };
 
+export const getMinutesScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 40000, maxPxPerDay: null });
+export const getRemainingHoursScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 800, maxPxPerDay: 40000 });
+export const getHoursScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 200, maxPxPerDay: 20000 });
+export const getTopDaysScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 200, maxPxPerDay: null });
+export const getDaysScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 20, maxPxPerDay: 200 });
+export const getTopMonthsScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 6, maxPxPerDay: 200 });
+export const getWeeksScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 6, maxPxPerDay: 20 });
+export const getBottomMonthsScaleRange = (): CanvasScaleRange => ({ minPxPerDay: 1, maxPxPerDay: 6 });
+export const getYearsScaleRange = (): CanvasScaleRange => ({ minPxPerDay: null, maxPxPerDay: 6 });
+
 export const timelineScale = {
     drawBottomBorderScale,
     drawPeriod,
@@ -381,6 +391,15 @@ export const timelineScale = {
     drawBottomMonths,
     drawYears,
     isCurrentPeriod,
+    getMinutesScaleRange,
+    getRemainingHoursScaleRange,
+    getHoursScaleRange,
+    getTopDaysScaleRange,
+    getDaysScaleRange,
+    getTopMonthsScaleRange,
+    getWeeksScaleRange,
+    getBottomMonthsScaleRange,
+    getYearsScaleRange,
 
     defaultFonts,
     defaultColors,

diff --git a/uui-timeline/src/draw/types.ts b/uui-timeline/src/draw/types.ts
@@ -83,7 +83,7 @@ export interface TimelineScaleFonts {
     currentPeriodFont?: string;
 }
 
-export interface CanvasDrawPeriodPartProps extends CanvasDrawTimelineHeaderProps, Required<TimelineScaleFonts> {
+export interface CanvasDrawPeriodPartProps extends CanvasDrawTimelineHeaderProps, TimelineScaleFonts {
     visibility: number;
     periodTextColor?: string;
 }
@@ -101,13 +101,19 @@ export interface CanvasDrawTopDaysProps extends CanvasDrawDaysProps, CanvasDrawP
     topDayTextColor?: string;
 }
 
-export interface CanvasDrawPeriodProps extends CanvasDrawTimelineHeaderProps, Required<TimelineScaleFonts> {
-    minPxPerDay: number;
-    maxPxPerDay: number;
+export interface CanvasScaleRange {
+    minPxPerDay: number | null;
+    maxPxPerDay: number | null;
+}
+
+export interface CanvasDrawPeriodProps extends
+    CanvasDrawTimelineHeaderProps,
+    TimelineScaleFonts,
+    CanvasScaleRange {
     draw: (props: CanvasDrawPeriodPartProps) => void;
 }
 
-export interface CanvasDrawPeriodFragmentProps extends CanvasDrawTimelineHeaderProps, Required<TimelineScaleFonts> {
+export interface CanvasDrawPeriodFragmentProps extends CanvasDrawTimelineHeaderProps, TimelineScaleFonts {
     text: string;
     textColor?: string;
     x: number;