Date time axes

canvas · Jun 13, 2024 · f50eb8d · f50eb8d
1 parent c46b7bc
commit f50eb8d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/react/src/charts/lib/format.ts b/react/src/charts/lib/format.ts
@@ -4,7 +4,7 @@ export type ValueFormat = { type: 'decimal' } | { type: 'currency'; currency: st
 
 export function formatValue(value: Ordinal, format: ValueFormat = { type: 'decimal' }): string {
     if (value instanceof Date) {
-        return Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short' }).format(value);
+        return Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: 'numeric' }).format(value);
     }
 
     if (typeof value === 'string') {

diff --git a/react/src/charts/scale/datetime.ts b/react/src/charts/scale/datetime.ts
@@ -14,12 +14,27 @@ export function dateTimeScale(domain: Date[], range: [number, number]): Scale<Da
     }
 
     const ticks: Date[] = [];
-    if (Math.abs(domainMax.getTime() - domainMin.getTime()) > 1000 * 60 * 60 * 24 * 365) {
+    const dateRangeDays = Math.abs(domainMax.getTime() - domainMin.getTime()) / 1000 / 60 / 60 / 24;
+    if (dateRangeDays > 700) {
         for (let year = domainMin.getFullYear() + 1; year <= domainMax.getFullYear(); year += 1) {
             ticks.push(new Date(year, 0, 1));
         }
     } else {
         ticks.push(domainMin);
+
+        const tickCount = 6;
+
+        const tickDelta = Math.floor(dateRangeDays / (tickCount - 1));
+
+        for (let i = 1; i < 7; i++) {
+            const tick = new Date(domainMin);
+            tick.setDate(domainMin.getDate() + tickDelta * i);
+            if (tick.getTime() > domainMax.getTime()) {
+                break;
+            }
+            ticks.push(tick);
+        }
+
         ticks.push(domainMax);
     }