Fix - useTimeLabels composable - Fix display of months when timestamps corresponding to hours intervals are passed

Author: graphieros

src/useDateTime.js

@@ -23,14 +23,17 @@ export function useDateTime({
     // VALIDATION & PARSING
 
     function isValidDate(date) {
-        if (typeof date === 'number') return false;
+        if (typeof date === 'number') return true;
         return !isNaN(parseDate(date));
     }
 
     function getTimeStamp(dateStr) {
-        if (!Date.parse(dateStr)) return dateStr;
+        const parsed = Date.parse(dateStr);
+        if (isNaN(parsed)) {
+            return dateStr;
+        }
         if (!useUTC) {
-            return new Date(dateStr).getTime();
+            return parsed;
         }
         const stripped = String(dateStr).replace(/([+-]\d{2}:\d{2}|Z)$/, '');
         return Date.parse(stripped + 'Z');

src/useTimeLabels.js

@@ -5,66 +5,102 @@ import locales from "./locales/locales.json";
  * @param {Array<string|number>} values
  * @param {number} maxDatapoints
  * @param {{ enable:boolean, useUTC:boolean, locale:string, januaryAsYear:boolean, options:Record<string,string> }} formatter
- * @param {number} start
- * @param {number} end
+ * @param {number} start  // index de début (inclus)
+ * @param {number} end    // index de fin (exclus)
  */
 export function useTimeLabels({
     values,
     maxDatapoints,
-    formatter,
-    start,
-    end
+    formatter: xl,
+    start: sliceStart,
+    end: sliceEnd
 }) {
     const raw = values;
-    const xl = formatter;
-    const max = maxDatapoints;
     const out = [];
 
     if (!xl.enable) {
-        for (let i = 0; i < max; i += 1) {
-            out.push({
-                text: raw[i] ?? String(i),
-                absoluteIndex: i,
-            });
+        for (let i = sliceStart; i < sliceEnd; i += 1) {
+            out.push({ text: raw[i] ?? String(i), absoluteIndex: i });
         }
-    } else {
-        const dt = useDateTime({
-            useUTC: xl.useUTC,
-            min: raw[0] ?? "0",
-            max: raw[max - 1] ?? String(max - 1),
-            locale: locales[xl.locale],
-            januaryAsYear: xl.januaryAsYear,
-        });
+        return out;
+    }
 
-        const start = new Date(raw[0]);
-        const end = new Date(raw[max - 1]);
-        const monthsDiff = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
+    const windowValues = raw.slice(sliceStart, sliceEnd);
 
-        let xUnit = "second";
-        const u = dt.getTimeUnitsfromTimestamp(raw[0], raw[max - 1]);
+    const dt = useDateTime({
+        useUTC: xl.useUTC,
+        min: windowValues[0],
+        max: windowValues[windowValues.length - 1],
+        locale: locales[xl.locale],
+        januaryAsYear: xl.januaryAsYear,
+    });
 
-        if (monthsDiff >= 1) xUnit = "month";
-        else if (u.minDate !== u.maxDate) xUnit = "day";
-        else if (u.minHour !== u.maxHour) xUnit = "hour";
-        else if (u.minMinute !== u.maxMinute) xUnit = "minute";
+    const ws = new Date(windowValues[0]);
+    const we = new Date(windowValues[windowValues.length - 1]);
+    const getMonthFn = xl.useUTC ? "getUTCMonth" : "getMonth";
+    const getYearFn = xl.useUTC ? "getUTCFullYear" : "getFullYear";
+    const monthsDiff =
+        (we[getYearFn]() - ws[getYearFn]()) * 12 +
+        (we[getMonthFn]() - ws[getMonthFn]());
 
-        const fmt = xl.options[xUnit];
-        const yearFmt = xl.options.year;
+    const u = dt.getTimeUnitsfromTimestamp(
+        windowValues[0],
+        windowValues[windowValues.length - 1]
+    );
 
-        for (let i = 0; i < max; i += 1) {
-            const d = new Date(raw[i]);
-            const m = xl.useUTC ? d.getUTCMonth() : d.getMonth();
+    let xUnit = "second";
+    if (u.minMinute !== u.maxMinute) xUnit = "minute";
+    else if (u.minHour !== u.maxHour) xUnit = "hour";
+    else if (u.minDate !== u.maxDate) xUnit = "day";
+    else if (monthsDiff >= 1) xUnit = "month";
 
-            let text;
-            if (xl.januaryAsYear && xUnit === "month" && m === 0) {
-                text = dt.formatDate(d, yearFmt);
+    const fmt = xl.options[xUnit];
+    const yearFmt = xl.options.year;
+    const monthFmt = xl.options.month;
+    const dayFmt = xl.options.day;
+
+    windowValues.forEach((ts, idx) => {
+        const d = new Date(ts);
+        const hours = xl.useUTC ? d.getUTCHours() : d.getHours();
+        const minutes = xl.useUTC ? d.getUTCMinutes() : d.getMinutes();
+
+        let text;
+        if (idx === 0) {
+            if (xUnit === "month" && (hours === 0 && minutes === 0) && ((xl.useUTC ? d.getUTCDate() : d.getDate()) === 1)) {
+                text = dt.formatDate(d, monthFmt);
+            } else if (hours === 0 && minutes === 0) {
+                text = dt.formatDate(d, dayFmt);
             } else {
                 text = dt.formatDate(d, fmt);
             }
+        } else {
+            const prev = new Date(windowValues[idx - 1]);
+            const prevY = xl.useUTC ? prev.getUTCFullYear() : prev.getFullYear();
+            const prevM = xl.useUTC ? prev.getUTCMonth() : prev.getMonth();
+            const prevD = xl.useUTC ? prev.getUTCDate() : prev.getDate();
+            const currY = xl.useUTC ? d.getUTCFullYear() : d.getFullYear();
+            const currM = xl.useUTC ? d.getUTCMonth() : d.getMonth();
+            const currD = xl.useUTC ? d.getUTCDate() : d.getDate();
 
-            out.push({ text, absoluteIndex: i });
+            if (currY !== prevY) {
+                text = dt.formatDate(d, yearFmt);
+            } else if (currM !== prevM) {
+                text = xUnit === "month"
+                    ? dt.formatDate(d, monthFmt)
+                    : dt.formatDate(d, dayFmt);
+            } else if (currD !== prevD) {
+                text = dt.formatDate(d, dayFmt);
+            } else if (hours === 0 && minutes === 0) {
+                text = dt.formatDate(d, dayFmt);
+            } else if (xl.januaryAsYear && xUnit === "month" && currM === 0) {
+                text = dt.formatDate(d, yearFmt);
+            } else {
+                text = dt.formatDate(d, fmt);
+            }
         }
-    }
 
-    return out.slice(start, end);
-}
+        out.push({ text, absoluteIndex: sliceStart + idx });
+    });
+
+    return out;
+}

tests/useDateTime.test.js

@@ -23,7 +23,7 @@ describe('useDateTime composable', () => {
 
     test('isValidDate returns true for ISO date string and false for number or invalid', () => {
         expect(dtLocal.isValidDate('2021-08-15')).toBe(true)
-        expect(dtLocal.isValidDate(1628985600000)).toBe(false)
+        expect(dtLocal.isValidDate(1628985600000)).toBe(true)
         expect(dtLocal.isValidDate('not-a-date')).toBe(false)
     })