fix: ensure unique ticks (#106)

* fix(Axes): fixed formatting of X-Axis, to prevent doubling ticks * chore: fixed tests
gravity-ui · Jul 17, 2023 · 67bd3d0 · 67bd3d0
1 parent 104334f
commit 67bd3d0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/YagrCore/defaults.ts b/src/YagrCore/defaults.ts
@@ -62,6 +62,7 @@ export const MINUTE = SECOND * 60;
 export const HOUR = MINUTE * 60;
 export const DAY = HOUR * 24;
 export const YEAR = DAY * 365;
+export const DECADE = YEAR * 10;
 
 export const X_AXIS_TICK_GAP = 6;
 export const X_AXIS_SIZE = 32;

diff --git a/src/YagrCore/utils/axes.ts b/src/YagrCore/utils/axes.ts
@@ -69,15 +69,20 @@ const dayTimeFormatter = uPlot.fmtDate('{DD}.{MM}.{YYYY}');
 const dateTimeFormatter = uPlot.fmtDate('{HH}:{mm}:{ss}');
 const minuteFormatter = uPlot.fmtDate('{mm}:{ss}');
 const secondFormatter = uPlot.fmtDate('{mm}:{ss}.{fff}');
+const yearFormatter = uPlot.fmtDate('{YYYY}');
 
-function getTimeFormatterByRange(rangeMs: number) {
+function getTimeFormatterByRange(range: number, ticksCount: number) {
     let formatter = dayTimeFormatter;
-    if (rangeMs <= defaults.SECOND) {
+    const minRange = Math.ceil(range / ticksCount);
+
+    if (minRange <= defaults.SECOND) {
         formatter = secondFormatter;
-    } else if (rangeMs <= defaults.MINUTE) {
+    } else if (minRange <= defaults.MINUTE) {
         formatter = minuteFormatter;
-    } else if (rangeMs <= defaults.DAY) {
+    } else if (minRange <= defaults.DAY) {
         formatter = dateTimeFormatter;
+    } else if (minRange >= defaults.YEAR) {
+        formatter = yearFormatter;
     }
 
     return (x: number) => formatter(new Date(x));
@@ -88,7 +93,7 @@ export const getTimeFormatter = (config: YagrConfig) => {
     return (_: unknown, ticks: number[]) => {
         const range = ticks[ticks.length - 1] - ticks[0];
         const rangeMs = range / msm;
-        const formatter = getTimeFormatterByRange(rangeMs);
+        const formatter = getTimeFormatterByRange(rangeMs, ticks.length);
 
         return ticks.map((rawValue) => {
             return formatter(rawValue / msm);

diff --git a/tests/utils/axes.test.ts b/tests/utils/axes.test.ts
@@ -27,12 +27,16 @@ describe('axes:getTimeFormatter', () => {
         });
 
         it('< day', () => {
-            expect(formatter(null, [1, 71])).toEqual(['00:00:01', '00:01:11']);
+            expect(formatter(null, [1, 71])).toEqual(['00:01', '01:11']);
         });
 
         it('> days', () => {
             expect(formatter(null, [1, 3000000])).toEqual(['01.01.1970', '04.02.1970']);
         });
+
+        it('>= years', () => {
+            expect(formatter(null, [1, 300000000])).toEqual(['1970', '1979']);
+        });
     });
 
     describe('timeMultiplier: 1', () => {
@@ -45,11 +49,15 @@ describe('axes:getTimeFormatter', () => {
         });
 
         it('< day', () => {
-            expect(formatterMs(null, [1000, 71000])).toEqual(['00:00:01', '00:01:11']);
+            expect(formatterMs(null, [1000, 71000])).toEqual(['00:01', '01:11']);
         });
 
         it('> days', () => {
             expect(formatterMs(null, [1000, 3000000000])).toEqual(['01.01.1970', '04.02.1970']);
         });
+
+        it('>= years', () => {
+            expect(formatter(null, [1, 300000000])).toEqual(['1970', '1979']);
+        });
     });
 });