@opendata-ai/openchart-core 7.9.2 → 7.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-core",
-  "version": "7.9.2",
+  "version": "7.10.0",
   "description": "Types, theme, colors, accessibility, and utilities for openchart",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",

package/src/index.ts

@@ -112,9 +112,11 @@ export {
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
   TICK_LABEL_OFFSET,
+  TICK_LINE_HEIGHT_FACTOR,
   TOP_PAD_EXTRA_NARROW,
   TOP_PAD_NARROW_MAX,
   X_AXIS_BAND_HEIGHT,
+  X_AXIS_ROTATED_EXTENT_CAP,
   X_AXIS_TITLE_BAND,
   X_AXIS_TITLE_BAND_ROTATED,
 } from './responsive/index';

package/src/locale/__tests__/format.test.ts

@@ -171,6 +171,54 @@ describe('formatDate', () => {
     expect(result).toContain('15');
     expect(result).toContain('Jun');
   });
+
+  describe('compact formats', () => {
+    it('formats months as bare month name', () => {
+      expect(formatDate('2025-02-01', undefined, undefined, true, true)).toBe('Feb');
+    });
+
+    it('infers year granularity at year boundaries (compact stays %Y)', () => {
+      expect(formatDate('2025-01-01', undefined, undefined, true, true)).toBe('2025');
+    });
+
+    it('formats days without the year', () => {
+      expect(formatDate('2025-03-05', undefined, undefined, true, true)).toBe('Mar 05');
+    });
+
+    it('formats quarters with apostrophe year', () => {
+      expect(formatDate('2025-04-15', undefined, 'quarter', true, true)).toBe("Q2 '25");
+    });
+
+    it('formats quarters with local-time year when useUtc is false', () => {
+      // Mid-quarter local date: quarter and year agree between local and UTC,
+      // exercising the getFullYear() arm of the compact branch.
+      expect(formatDate(new Date(2025, 4, 15), undefined, 'quarter', false, true)).toBe("Q2 '25");
+    });
+
+    it('formats weeks as month and day', () => {
+      expect(formatDate('2025-03-10', undefined, 'week', true, true)).toBe('Mar 10');
+    });
+
+    it('formats hours as time only', () => {
+      expect(formatDate('2025-03-05T14:00:00Z', undefined, undefined, true, true)).toBe('14:00');
+    });
+
+    it('formats minutes as time only', () => {
+      expect(formatDate('2025-03-05T14:30:00Z', undefined, undefined, true, true)).toBe('14:30');
+    });
+
+    it('default (compact: false) output is unchanged', () => {
+      expect(formatDate('2025-02-01')).toBe('Feb 2025');
+      expect(formatDate('2025-03-05')).toBe('Mar 05, 2025');
+      expect(formatDate('2025-04-15', undefined, 'quarter')).toBe('Q2 2025');
+    });
+
+    it('full quarter year follows useUtc at year boundaries', () => {
+      // In negative-offset timezones this instant is still Dec 31 2025 locally;
+      // the UTC quarter (Q1) must pair with the UTC year (2026), not the local one.
+      expect(formatDate(new Date('2026-01-01T00:00:00Z'), undefined, 'quarter')).toBe('Q1 2026');
+    });
+  });
 });
 
 describe('buildTemporalFormatter', () => {

package/src/locale/format.ts

@@ -135,6 +135,22 @@ const GRANULARITY_FORMATS: Record<DateGranularity, string> = {
   minute: '%H:%M',
 };
 
+/**
+ * Compact format strings used by axis ticks when full-format labels overlap.
+ * Month is bare '%b': granularity inference runs per tick, so year-boundary
+ * ticks already render as '2025' and the axis reads "2025 · Feb · Mar".
+ * Year stays '%Y' — abbreviating to "'25" saves too little for the ambiguity.
+ */
+const GRANULARITY_FORMATS_COMPACT: Record<DateGranularity, string> = {
+  year: '%Y',
+  quarter: '', // special-cased below, like GRANULARITY_FORMATS
+  month: '%b',
+  week: '%b %d',
+  day: '%b %d',
+  hour: '%H:%M',
+  minute: '%H:%M',
+};
+
 /**
  * Format a date value for display.
  *
@@ -145,12 +161,15 @@ const GRANULARITY_FORMATS: Record<DateGranularity, string> = {
  *   Pass `false` when formatting ticks from a local-time scale (d3 scaleTime),
  *   so that e.g. midnight local isn't misread as an intra-day UTC time.
  *   Defaults to `true` for backward compatibility.
+ * @param compact - Use the compact format table (axis ticks whose full-format
+ *   labels would overlap). Defaults to `false`.
  */
 export function formatDate(
   value: Date | string | number,
   _locale?: string,
   granularity?: DateGranularity,
   useUtc: boolean = true,
+  compact: boolean = false,
 ): string {
   const date = value instanceof Date ? value : new Date(value);
   if (Number.isNaN(date.getTime())) return String(value);
@@ -162,10 +181,14 @@ export function formatDate(
     const q = useUtc
       ? Math.ceil((date.getUTCMonth() + 1) / 3)
       : Math.ceil((date.getMonth() + 1) / 3);
-    return `Q${q} ${date.getFullYear()}`;
+    const year = useUtc ? date.getUTCFullYear() : date.getFullYear();
+    if (compact) {
+      return `Q${q} '${String(year).slice(-2)}`;
+    }
+    return `Q${q} ${year}`;
   }
 
-  const formatStr = GRANULARITY_FORMATS[gran];
+  const formatStr = (compact ? GRANULARITY_FORMATS_COMPACT : GRANULARITY_FORMATS)[gran];
   if (useUtc) {
     return utcFormat(formatStr)(date);
   }

package/src/responsive/index.ts

@@ -41,9 +41,11 @@ export {
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
   TICK_LABEL_OFFSET,
+  TICK_LINE_HEIGHT_FACTOR,
   TOP_PAD_EXTRA_NARROW,
   TOP_PAD_NARROW_MAX,
   X_AXIS_BAND_HEIGHT,
+  X_AXIS_ROTATED_EXTENT_CAP,
   X_AXIS_TITLE_BAND,
   X_AXIS_TITLE_BAND_ROTATED,
 } from './metrics';

package/src/responsive/metrics.ts

@@ -173,6 +173,22 @@ export const X_AXIS_BAND_HEIGHT = 26;
 export const X_AXIS_TITLE_BAND = 22;
 export const X_AXIS_TITLE_BAND_ROTATED = 20;
 
+/**
+ * Ceiling on the vertical extent reserved for rotated x tick labels. Labels
+ * whose rotated projection exceeds this clip at the reservation edge, so the
+ * angle ladder (engine layout/axes/rotation) avoids -90° for labels longer
+ * than this.
+ */
+export const X_AXIS_ROTATED_EXTENT_CAP = 120;
+
+/**
+ * Line-height multiplier for a tick label's text ribbon. Shared by the
+ * rotated-extent reservation below and the engine's rotation collision test
+ * (layout/axes/rotation) so the reserved space and the fit threshold can't
+ * drift apart.
+ */
+export const TICK_LINE_HEIGHT_FACTOR = 1.2;
+
 export interface XAxisExtentInput {
   labels: string[];
   tickAngle?: number;
@@ -199,7 +215,7 @@ export function computeXAxisExtentFromLabels(input: XAxisExtentInput): number {
     // lineHeight*|cos θ| (the label's own height, which still contributes
     // unless the text is fully vertical). Measuring only the sin term
     // under-reserved space, letting rotated ticks spill into the source line.
-    const lineHeight = input.tickFontSize * 1.2;
+    const lineHeight = input.tickFontSize * TICK_LINE_HEIGHT_FACTOR;
     // Small gap between the axis line and the top of the rotated label band.
     // Mirrors the tick-mark-to-label offset used for flat labels; keeps the
     // reservation matched to the drawn footprint across Blink and WebKit,
@@ -207,7 +223,7 @@ export function computeXAxisExtentFromLabels(input: XAxisExtentInput): number {
     const AXIS_TO_LABEL_GAP = 3;
     const rotatedHeight = Math.min(
       maxLabelWidth * Math.sin(angleRad) + lineHeight * Math.cos(angleRad) + AXIS_TO_LABEL_GAP,
-      120,
+      X_AXIS_ROTATED_EXTENT_CAP,
     );
     return input.hasTitle ? rotatedHeight + X_AXIS_TITLE_BAND_ROTATED : rotatedHeight;
   }