@opendata-ai/openchart-core 2.6.0 → 2.8.0

package/package.json

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

package/src/index.ts

@@ -92,6 +92,7 @@ export { resolveCollisions } from './labels/index';
 export type { DateGranularity } from './locale/index';
 export {
   abbreviateNumber,
+  buildD3Formatter,
   formatDate,
   formatNumber,
 } from './locale/index';

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { abbreviateNumber, formatDate, formatNumber } from '../format';
+import { abbreviateNumber, buildD3Formatter, formatDate, formatNumber } from '../format';
 
 describe('formatNumber', () => {
   it('formats integers with commas', () => {
@@ -59,6 +59,45 @@ describe('abbreviateNumber', () => {
   });
 });
 
+describe('buildD3Formatter', () => {
+  it('returns a formatter for a valid d3 format string', () => {
+    const fmt = buildD3Formatter('$,.0f');
+    expect(fmt).not.toBeNull();
+    expect(fmt!(1234)).toBe('$1,234');
+  });
+
+  it('handles tilde trim modifier', () => {
+    const fmt = buildD3Formatter('$,.2~f');
+    expect(fmt).not.toBeNull();
+    expect(fmt!(3.1)).toBe('$3.1');
+    expect(fmt!(3.75)).toBe('$3.75');
+  });
+
+  it('handles literal alpha suffix after d3 format', () => {
+    const fmt = buildD3Formatter('$,.2~fT');
+    expect(fmt).not.toBeNull();
+    expect(fmt!(3.75)).toBe('$3.75T');
+  });
+
+  it('handles non-alpha suffix like %', () => {
+    const fmt = buildD3Formatter('.0f%');
+    expect(fmt).not.toBeNull();
+    expect(fmt!(50)).toBe('50%');
+  });
+
+  it('returns null for undefined input', () => {
+    expect(buildD3Formatter(undefined)).toBeNull();
+  });
+
+  it('returns null for empty string', () => {
+    expect(buildD3Formatter('')).toBeNull();
+  });
+
+  it('returns null for completely invalid format', () => {
+    expect(buildD3Formatter('not-a-format!!!')).toBeNull();
+  });
+});
+
 describe('formatDate', () => {
   it('formats a Date object', () => {
     const result = formatDate(new Date('2020-06-15'), undefined, 'day');

package/src/locale/format.ts

@@ -69,6 +69,49 @@ export function abbreviateNumber(value: number): string {
   return formatNumber(value);
 }
 
+// ---------------------------------------------------------------------------
+// d3-format with suffix support
+// ---------------------------------------------------------------------------
+
+/**
+ * Regex that matches a valid d3-format specifier (with optional ~ trim flag)
+ * followed by a literal suffix. The first capture group is the d3 format part,
+ * the second is the trailing literal suffix (e.g. "T", "pp", etc.).
+ *
+ * Examples:
+ * - "$,.2~fT"  -> ["$,.2~f", "T"]
+ * - ".0f%"     -> [".0f", "%"]  (% here is literal, not d3 percent type)
+ * - "$,.0f"    -> no match (valid d3 format, no suffix)
+ */
+const D3_FORMAT_SUFFIX_RE = /^(.*~?[efgsrdxXobcnp%])(.+)$/;
+
+/**
+ * Build a number formatter from a d3-format string, with support for a
+ * trailing literal suffix that d3-format itself would reject.
+ *
+ * Returns null if the format string is falsy or unparseable.
+ */
+export function buildD3Formatter(formatStr: string | undefined): ((v: number) => string) | null {
+  if (!formatStr) return null;
+
+  try {
+    return d3Format(formatStr);
+  } catch {
+    // If d3-format rejects it, try stripping a trailing literal suffix
+    const m = formatStr.match(D3_FORMAT_SUFFIX_RE);
+    if (m) {
+      try {
+        const fmt = d3Format(m[1]);
+        const suffix = m[2];
+        return (v: number) => fmt(v) + suffix;
+      } catch {
+        // Unparseable even after suffix stripping
+      }
+    }
+  }
+  return null;
+}
+
 // ---------------------------------------------------------------------------
 // Date formatting
 // ---------------------------------------------------------------------------

package/src/locale/index.ts

@@ -3,4 +3,4 @@
  */
 
 export type { DateGranularity } from './format';
-export { abbreviateNumber, formatDate, formatNumber } from './format';
+export { abbreviateNumber, buildD3Formatter, formatDate, formatNumber } from './format';

package/src/theme/__tests__/resolve.test.ts

@@ -58,4 +58,19 @@ describe('resolveTheme', () => {
     const resolved = resolveTheme(undefined, customBase);
     expect(resolved.borderRadius).toBe(12);
   });
+
+  it('accepts flat string[] as shorthand for categorical colors', () => {
+    const colors = ['#ff0000', '#94a3b8', '#94a3b8'];
+    const resolved = resolveTheme({ colors });
+    expect(resolved.colors.categorical).toEqual(colors);
+    // Other color fields preserved from defaults
+    expect(resolved.colors.background).toBe(DEFAULT_THEME.colors.background);
+    expect(resolved.colors.text).toBe(DEFAULT_THEME.colors.text);
+  });
+
+  it('flat color array does not clobber non-color theme fields', () => {
+    const resolved = resolveTheme({ colors: ['#ff0000'] });
+    expect(resolved.fonts.family).toBe(DEFAULT_THEME.fonts.family);
+    expect(resolved.spacing.padding).toBe(DEFAULT_THEME.spacing.padding);
+  });
 });

package/src/types/index.ts

@@ -79,6 +79,7 @@ export type {
   AnnotationOffset,
   AxisConfig,
   ChartSpec,
+  ChartSpecOverride,
   ChartSpecWithoutData,
   ChartType,
   Chrome,

package/src/types/spec.ts

@@ -8,8 +8,8 @@
  * with editorial extensions for chrome, annotations, responsive, and dark mode.
  */
 
-// Re-import for use in LegendConfig (avoids circular by importing from sibling)
-import type { LegendPosition } from '../responsive/breakpoints';
+// Re-import for use in LegendConfig and overrides (avoids circular by importing from sibling)
+import type { Breakpoint, LegendPosition } from '../responsive/breakpoints';
 import type { ColumnConfig } from './table';
 
 // ---------------------------------------------------------------------------
@@ -395,6 +395,8 @@ export interface LegendConfig {
   position?: LegendPosition;
   /** Pixel offset for fine-tuning legend position. */
   offset?: AnnotationOffset;
+  /** Whether to show the legend. Defaults to true. Set to false to hide. */
+  show?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -416,6 +418,24 @@ export interface SeriesStyle {
   opacity?: number;
 }
 
+/**
+ * Breakpoint-conditional overrides for chart specs.
+ *
+ * Allows specifying different chrome, labels, legend, or annotations
+ * per breakpoint. Merged shallowly into the base spec at compile time
+ * when the container matches the breakpoint.
+ */
+export interface ChartSpecOverride {
+  /** Override editorial chrome at this breakpoint. */
+  chrome?: Chrome;
+  /** Override label configuration at this breakpoint. */
+  labels?: LabelConfig;
+  /** Override legend configuration at this breakpoint. */
+  legend?: LegendConfig;
+  /** Override annotations at this breakpoint. */
+  annotations?: Annotation[];
+}
+
 /**
  * Chart specification: the primary input for standard chart types.
  *
@@ -448,6 +468,12 @@ export interface ChartSpec {
   hiddenSeries?: string[];
   /** Per-series visual overrides, keyed by series name (the color field value). */
   seriesStyles?: Record<string, SeriesStyle>;
+  /**
+   * Breakpoint-conditional overrides. Keys are breakpoint names.
+   * At compile time, if the container matches a breakpoint, its overrides
+   * are shallow-merged into the spec before layout computation.
+   */
+  overrides?: Partial<Record<Breakpoint, ChartSpecOverride>>;
 }
 
 /**