@opendata-ai/openchart-core 6.23.1 → 6.24.1

package/package.json

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

package/src/colors/contrast.ts

@@ -65,30 +65,42 @@ export function findAccessibleColor(baseColor: string, bg: string, targetRatio =
   if (c == null) return baseColor;
 
   const bgLum = relativeLuminance(bg);
-  // Determine direction: darken if bg is light, lighten if bg is dark.
-  const bgIsLight = bgLum > 0.5;
-
-  // Binary search for the lightness adjustment that hits the target ratio.
-  let lo = 0;
-  let hi = 1;
-  let best = baseColor;
-
-  for (let i = 0; i < 20; i++) {
-    const mid = (lo + hi) / 2;
-    const adjusted = bgIsLight
-      ? rgb(c.r * (1 - mid), c.g * (1 - mid), c.b * (1 - mid))
-      : rgb(c.r + (255 - c.r) * mid, c.g + (255 - c.g) * mid, c.b + (255 - c.b) * mid);
-
-    const hex = adjusted.formatHex();
-    const ratio = contrastRatio(hex, bg);
-
-    if (ratio >= targetRatio) {
-      best = hex;
-      hi = mid; // try less adjustment
-    } else {
-      lo = mid; // need more adjustment
+  const baseLum = relativeLuminance(baseColor);
+
+  // Try both directions: prefer the one matching bg luminance, but fall back
+  // to the other if the base color is already at the extreme (e.g. white on
+  // a medium-luminance background can't be lightened, so darken instead).
+  const preferDarken = bgLum > 0.5;
+  const directions = preferDarken ? [true, false] : [false, true];
+
+  for (const darken of directions) {
+    // Skip impossible directions: can't lighten white or darken black.
+    if (!darken && baseLum > 0.95) continue;
+    if (darken && baseLum < 0.05) continue;
+
+    let lo = 0;
+    let hi = 1;
+    let best: string | null = null;
+
+    for (let i = 0; i < 20; i++) {
+      const mid = (lo + hi) / 2;
+      const adjusted = darken
+        ? rgb(c.r * (1 - mid), c.g * (1 - mid), c.b * (1 - mid))
+        : rgb(c.r + (255 - c.r) * mid, c.g + (255 - c.g) * mid, c.b + (255 - c.b) * mid);
+
+      const hex = adjusted.formatHex();
+      const ratio = contrastRatio(hex, bg);
+
+      if (ratio >= targetRatio) {
+        best = hex;
+        hi = mid;
+      } else {
+        lo = mid;
+      }
     }
+
+    if (best) return best;
   }
 
-  return best;
+  return baseColor;
 }

package/src/index.ts

@@ -56,6 +56,7 @@ export {
   BRAND_FONT_SIZE,
   BRAND_MIN_WIDTH,
   BRAND_RESERVE_WIDTH,
+  COMPACT_WIDTH,
   computeChrome,
   estimateTextWidth,
   wrapText,

package/src/layout/chrome.ts

@@ -26,6 +26,7 @@ import {
   BRAND_FONT_SIZE,
   BRAND_MIN_WIDTH,
   BRAND_RESERVE_WIDTH,
+  COMPACT_WIDTH,
   estimateCharWidth,
   estimateTextHeight,
 } from './text-measure';
@@ -236,9 +237,12 @@ export function computeChrome(
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
 
-  // Add chromeToChart gap if there are any top elements
+  // Add chromeToChart gap if there are any top elements. Tighten on narrow
+  // viewports so the subtitle doesn't float far above a legend or chart area.
   const hasTopChrome = titleNorm || subtitleNorm;
-  const topHeight = hasTopChrome ? topY - pad + theme.spacing.chromeToChart - chromeGap : 0;
+  const chromeToChart =
+    width < COMPACT_WIDTH ? Math.min(theme.spacing.chromeToChart, 2) : theme.spacing.chromeToChart;
+  const topHeight = hasTopChrome ? topY - pad + chromeToChart - chromeGap : 0;
 
   // Bottom chrome text hidden in compact mode, but brand watermark still
   // renders for wide-enough charts. Reserve space so it doesn't overflow.

package/src/layout/index.ts

@@ -7,6 +7,7 @@ export {
   BRAND_FONT_SIZE,
   BRAND_MIN_WIDTH,
   BRAND_RESERVE_WIDTH,
+  COMPACT_WIDTH,
   estimateCharWidth,
   estimateTextHeight,
   estimateTextWidth,

package/src/layout/text-measure.ts

@@ -73,6 +73,16 @@ export const BRAND_FONT_SIZE = 12;
 /** Minimum chart width to render the brand watermark (px). */
 export const BRAND_MIN_WIDTH = 120;
 
+// ---------------------------------------------------------------------------
+// Responsive breakpoints
+// ---------------------------------------------------------------------------
+
+/**
+ * Width threshold below which layout tightens spacing (legend gaps, chrome
+ * padding, label gaps) to maximize data area on small screens.
+ */
+export const COMPACT_WIDTH = 420;
+
 /**
  * Estimate the rendered height of a text block.
  *

package/src/layout/text-wrap.ts

@@ -6,8 +6,8 @@
  * accurate wrapping. Otherwise falls back to a character-width
  * heuristic driven by `estimateCharWidth` from text-measure.ts.
  *
- * Callers that want heuristic-only behavior (e.g. sankey) should omit
- * the measureText argument. Do not change the signature without
+ * Non-browser callers (SSR, tests) omit the measureText argument to
+ * use the heuristic fallback. Do not change the signature without
  * re-verifying visual baselines for every caller.
  */
 

package/src/types/layout.ts

@@ -1030,6 +1030,8 @@ export interface SankeyLayout {
   animation?: ResolvedAnimation;
   /** Whether the tryOpenData.ai watermark is enabled. */
   watermark: boolean;
+  /** Real text measurement function from the adapter (for accurate SVG text wrapping). */
+  measureText?: MeasureTextFn;
 }
 
 // ---------------------------------------------------------------------------

package/src/types/spec.ts

@@ -523,6 +523,8 @@ interface AnnotationBase {
   opacity?: number;
   /** Z-index for render ordering. Higher values render on top. */
   zIndex?: number;
+  /** When false, the annotation is always shown even at compact breakpoints. Default true. */
+  responsive?: boolean;
 }
 
 /**
@@ -588,13 +590,15 @@ export interface RangeAnnotation extends AnnotationBase {
  * Useful for baselines (zero), targets, or thresholds.
  */
 export interface RefLineAnnotation extends AnnotationBase {
-  type: 'refline';
+  type: 'refline' | 'rule';
   /** X-axis value for a vertical reference line. */
   x?: string | number;
   /** Y-axis value for a horizontal reference line. */
   y?: string | number;
   /** Line style. */
   style?: 'solid' | 'dashed' | 'dotted';
+  /** Raw SVG dash pattern override, e.g. [4, 4]. Takes precedence over style. */
+  strokeDash?: number[];
   /** Line width in pixels. */
   strokeWidth?: number;
   /** Pixel offset for the reference line label. */
@@ -715,6 +719,8 @@ export interface LegendConfig {
   symbolLimit?: number;
   /** Maximum number of rows for top-positioned legends before truncation. Defaults to 2. */
   maxRows?: number;
+  /** Series names to exclude from the legend. Excluded series still render in the chart. */
+  exclude?: string[];
 }
 
 // ---------------------------------------------------------------------------
@@ -1408,7 +1414,7 @@ export function isRangeAnnotation(annotation: Annotation): annotation is RangeAn
 
 /** Check if an annotation is a RefLineAnnotation. */
 export function isRefLineAnnotation(annotation: Annotation): annotation is RefLineAnnotation {
-  return annotation.type === 'refline';
+  return annotation.type === 'refline' || annotation.type === 'rule';
 }
 
 // ---------------------------------------------------------------------------