@opendata-ai/openchart-core 6.7.1 → 6.9.0

package/package.json

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

package/src/layout/__tests__/chrome.test.ts

@@ -144,6 +144,41 @@ describe('computeChrome', () => {
     expect(narrow.subtitle!.y).toBeGreaterThan(wide.subtitle!.y);
   });
 
+  it('reserves extra height when subtitle contains newline characters', () => {
+    const chrome: Chrome = { title: 'Title', subtitle: 'Line one\nLine two' };
+    const withNewline = computeChrome(chrome, theme, 600);
+
+    const chromeNoNewline: Chrome = { title: 'Title', subtitle: 'Line one Line two' };
+    const withoutNewline = computeChrome(chromeNoNewline, theme, 600);
+
+    // The newline version should reserve more top height since it forces two lines
+    expect(withNewline.topHeight).toBeGreaterThan(withoutNewline.topHeight);
+  });
+
+  it('handles consecutive newlines in chrome text', () => {
+    const chrome: Chrome = { title: 'Title', subtitle: 'Above\n\nBelow' };
+    const result = computeChrome(chrome, theme, 600);
+
+    // Three segments: "Above", "", "Below" -> 3 lines total
+    // This should be taller than a simple two-line subtitle
+    const twoLine: Chrome = { title: 'Title', subtitle: 'Above\nBelow' };
+    const twoLineResult = computeChrome(twoLine, theme, 600);
+
+    expect(result.topHeight).toBeGreaterThan(twoLineResult.topHeight);
+  });
+
+  it('handles newlines combined with long text that also word-wraps', () => {
+    const longSegment = 'This is a very long segment that should wrap at narrow widths on its own';
+    const chrome: Chrome = { title: 'Title', subtitle: `${longSegment}\nShort` };
+    const result = computeChrome(chrome, theme, 300);
+
+    // At narrow width, the long segment wraps AND the \n adds another line
+    const noNewline: Chrome = { title: 'Title', subtitle: longSegment };
+    const noNewlineResult = computeChrome(noNewline, theme, 300);
+
+    expect(result.topHeight).toBeGreaterThan(noNewlineResult.topHeight);
+  });
+
   it('uses measureText function when provided', () => {
     const measureText = (text: string, fontSize: number) => ({
       width: text.length * fontSize * 0.6,

package/src/layout/chrome.ts

@@ -91,6 +91,17 @@ function estimateLineCount(
 ): number {
   if (maxWidth <= 0) return 1;
 
+  // Split on explicit newlines first, then estimate wrapping per segment
+  const segments = text.split('\n');
+  if (segments.length > 1) {
+    return segments.reduce((total, segment) => {
+      return (
+        total +
+        (segment.length === 0 ? 1 : estimateLineCount(segment, style, maxWidth, _measureText))
+      );
+    }, 0);
+  }
+
   const charWidth = estimateCharWidth(style.fontSize, style.fontWeight);
   const maxChars = Math.floor(maxWidth / charWidth);
 

package/src/types/spec.ts

@@ -483,9 +483,17 @@ export type Annotation = TextAnnotation | RangeAnnotation | RefLineAnnotation;
 
 /**
  * Dark mode behavior.
- * - "auto": respect system preference (prefers-color-scheme)
- * - "force": always render in dark mode
- * - "off": always render in light mode (default)
+ *
+ * - `"auto"` - Checks the `prefers-color-scheme` media query to detect the
+ *   user's system-level preference. This does NOT detect class-based dark mode
+ *   toggles (e.g. `document.documentElement.classList.toggle('dark')`). If your
+ *   app uses class-based dark mode, use VizThemeProvider with `"force"` or
+ *   `"off"` instead of `"auto"` and toggle based on your app's state.
+ * - `"force"` - Always render in dark mode regardless of system preference.
+ * - `"off"` - Always render in light mode (default).
+ *
+ * All components (Chart, Sankey, Graph) inherit darkMode from VizThemeProvider
+ * when no explicit prop is passed.
  */
 export type DarkMode = 'auto' | 'force' | 'off';
 
@@ -576,6 +584,8 @@ export interface LegendConfig {
   columns?: number;
   /** Max number of legend entries before truncation. Remaining entries show as "+N more". */
   symbolLimit?: number;
+  /** Maximum number of rows for top-positioned legends before truncation. Defaults to 2. */
+  maxRows?: number;
 }
 
 // ---------------------------------------------------------------------------
@@ -916,6 +926,15 @@ export interface SankeySpec {
   iterations?: number;
   /** Link coloring strategy. Defaults to 'gradient'. */
   linkStyle?: SankeyLinkColor;
+  /** Link fill opacity (0-1). Defaults to 0.5 in light mode, 0.75 in dark mode. */
+  linkOpacity?: number;
+  /**
+   * Which side of each node to place labels. 'auto' uses the default heuristic
+   * (left-column right, right-column left, middle right). 'right' forces all
+   * labels to the right of their nodes. 'left' forces all labels to the left.
+   * Defaults to 'auto'.
+   */
+  nodeLabelAlign?: 'auto' | 'left' | 'right';
   /** Editorial chrome (title, subtitle, source, byline, footer). */
   chrome?: Chrome;
   /** Legend display configuration. */
@@ -926,6 +945,14 @@ export interface SankeySpec {
   darkMode?: DarkMode;
   /** Animation configuration for entrance animations. */
   animation?: AnimationSpec;
+  /**
+   * d3-format string applied to flow values in tooltips and ARIA labels.
+   * Uses the literal suffix extension: ".0f%" appends "%" to the formatted
+   * number (data value 28 renders as "28%"). For currency: "$,.0f" or "$~s".
+   * For SI suffixes: "~s" (renders 1000 as "1k"). When not set, values use
+   * the default number formatter.
+   */
+  valueFormat?: string;
 }
 
 /**