@opendata-ai/openchart-core 7.1.4 → 7.2.0

package/dist/index.d.ts

@@ -334,6 +334,8 @@ interface AxisConfig {
     labelPadding?: number;
     /** Color override for axis tick labels and title. Useful in dual-axis charts to match axis color to its series. */
     labelColor?: string;
+    /** Literal string appended to every formatted tick label. e.g. "B" gives "$4.5B" when format is "$,.1~f". */
+    labelSuffix?: string;
     /** Secondary data field to display alongside each tick label. Renders in lighter weight/color. Only effective on categorical y-axis labels (horizontal bar charts). */
     labelField?: string;
     /**
@@ -847,6 +849,19 @@ interface ThemeConfig {
         family?: string;
         /** Monospace font family (for tabular numbers). */
         mono?: string;
+        /** Font size overrides in pixels. Partial — only specified keys are overridden. */
+        sizes?: {
+            /** Chart title. Default: 26. */
+            title?: number;
+            /** Subtitle below the title. Default: 14. */
+            subtitle?: number;
+            /** Body text (tooltips, legend labels). Default: 13. */
+            body?: number;
+            /** Small text (source line, footer). Default: 11. */
+            small?: number;
+            /** Axis tick labels. Default: 11. */
+            axisTick?: number;
+        };
     };
     /** Spacing overrides in pixels. */
     spacing?: {
@@ -854,6 +869,10 @@ interface ThemeConfig {
         padding?: number;
         /** Gap between chrome elements (title to subtitle, etc.). */
         chromeGap?: number;
+        /** Height reserved below chart area for x-axis tick labels. Increase when large axisTick font sizes cause label clipping. */
+        xAxisHeight?: number;
+        /** Gap in pixels between the x-axis line and tick label text. Increase when larger axisTick fonts sit too close to the axis line. */
+        xAxisLabelPadding?: number;
     };
     /** Border radius for chart container and tooltips. */
     borderRadius?: number;
@@ -894,10 +913,14 @@ interface LabelConfig {
     format?: string;
     /** Literal string prepended to each formatted label value (e.g. "-" or "$"). */
     prefix?: string;
+    /** Literal string appended to each formatted label value (e.g. "%" or "x"). */
+    suffix?: string;
     /** Fixed CSS color for all labels. Overrides the default fill-derived color. */
     color?: string;
     /** Per-series pixel offsets for fine-tuning label positions, keyed by series name. */
     offsets?: Record<string, AnnotationOffset>;
+    /** Font size in pixels for bar/column value labels. */
+    fontSize?: number;
 }
 /** Shorthand: `false` disables all labels, `true` uses defaults, or pass a full config object. */
 type LabelSpec = boolean | LabelConfig;
@@ -2220,6 +2243,10 @@ interface ThemeSpacing {
     chartToFooter: number;
     /** Internal padding within the chart area (axes margins). */
     axisMargin: number;
+    /** Height reserved below the chart area for x-axis tick labels (and optional axis title). */
+    xAxisHeight: number;
+    /** Gap in pixels between the x-axis line and the top of non-rotated tick label text. */
+    xAxisLabelPadding: number;
 }
 /** Default style configuration for a chrome text element. */
 interface ChromeDefaults {
@@ -3653,8 +3680,11 @@ declare function findAccessibleColor(baseColor: string, bg: string, targetRatio?
  * -> sRGB pipeline. Documented OKLCH source values are the contract; if
  * the conversion math changes, regenerate from the source rather than
  * editing hex literals directly.
+ *
+ * Tuned at L≈0.65, C≈0.20 (vs prior L≈0.70, C≈0.15) for more vivid,
+ * saturated color on dark backgrounds where the lighter pastels read soft.
  */
-declare const CATEGORICAL_PALETTE: readonly ["#06b6d4", "#eb7289", "#3bb974", "#ad87ed", "#e69c3a", "#4ba3f7", "#eb8656", "#8494fa", "#00b9c3"];
+declare const CATEGORICAL_PALETTE: readonly ["#06b6d4", "#ee4a73", "#00b054", "#a46bf5", "#e07d00", "#0091ff", "#f36000", "#6f7dff", "#00afbf"];
 type CategoricalPalette = typeof CATEGORICAL_PALETTE;
 /** Sequential palette definition: an array of color stops from light to dark. */
 interface SequentialPalette {

package/dist/index.js

@@ -726,22 +726,22 @@ var ACHROMATIC_RAMP = {
 var CATEGORICAL_PALETTE = [
   "#06b6d4",
   // cyan,    primary accent (sRGB literal, ~205°)
-  "#eb7289",
-  // rose     — oklch(70% 0.15 10)
-  "#3bb974",
-  // emerald  — oklch(70% 0.15 155)
-  "#ad87ed",
-  // violet   — oklch(70% 0.15 300)
-  "#e69c3a",
-  // amber    — oklch(75% 0.14 70)
-  "#4ba3f7",
-  // sky      — oklch(70% 0.15 250)
-  "#eb8656",
-  // orange   — oklch(72% 0.14 45)
-  "#8494fa",
-  // indigo   — oklch(70% 0.15 275)
-  "#00b9c3"
-  // teal     — oklch(70% 0.15 200)
+  "#ee4a73",
+  // rose     — oklch(65% 0.20 10)
+  "#00b054",
+  // emerald  — oklch(65% 0.20 155)
+  "#a46bf5",
+  // violet   — oklch(65% 0.20 300)
+  "#e07d00",
+  // amber    — oklch(68% 0.19 70)
+  "#0091ff",
+  // sky      — oklch(65% 0.20 250)
+  "#f36000",
+  // orange   — oklch(67% 0.20 45)
+  "#6f7dff",
+  // indigo   — oklch(65% 0.20 275)
+  "#00afbf"
+  // teal     — oklch(65% 0.20 200)
 ];
 var SEQUENTIAL_BLUE = {
   name: "blue",
@@ -853,7 +853,9 @@ var DEFAULT_THEME = {
     chromeGap: 4,
     chromeToChart: 8,
     chartToFooter: 8,
-    axisMargin: 6
+    axisMargin: 6,
+    xAxisHeight: 26,
+    xAxisLabelPadding: 14
   },
   borderRadius: 2,
   chrome: {
@@ -1048,12 +1050,16 @@ function themeConfigToPartial(config) {
     const fonts = {};
     if (config.fonts.family) fonts.family = config.fonts.family;
     if (config.fonts.mono) fonts.mono = config.fonts.mono;
+    if (config.fonts.sizes) fonts.sizes = config.fonts.sizes;
     partial.fonts = fonts;
   }
   if (config.spacing) {
     const spacing = {};
     if (config.spacing.padding !== void 0) spacing.padding = config.spacing.padding;
     if (config.spacing.chromeGap !== void 0) spacing.chromeGap = config.spacing.chromeGap;
+    if (config.spacing.xAxisHeight !== void 0) spacing.xAxisHeight = config.spacing.xAxisHeight;
+    if (config.spacing.xAxisLabelPadding !== void 0)
+      spacing.xAxisLabelPadding = config.spacing.xAxisLabelPadding;
     partial.spacing = spacing;
   }
   if (config.borderRadius !== void 0) {
@@ -1123,6 +1129,26 @@ function adjustOpacity(hex2, opacity) {
 }
 function resolveTheme(userTheme, base = DEFAULT_THEME) {
   let merged = userTheme ? deepMerge(base, themeConfigToPartial(userTheme)) : { ...base };
+  if (userTheme?.fonts?.sizes) {
+    const s = userTheme.fonts.sizes;
+    merged = {
+      ...merged,
+      chrome: {
+        ...merged.chrome,
+        ...s.title !== void 0 && {
+          title: { ...merged.chrome.title, fontSize: s.title }
+        },
+        ...s.subtitle !== void 0 && {
+          subtitle: { ...merged.chrome.subtitle, fontSize: s.subtitle }
+        },
+        ...s.small !== void 0 && {
+          source: { ...merged.chrome.source, fontSize: s.small },
+          byline: { ...merged.chrome.byline, fontSize: s.small },
+          footer: { ...merged.chrome.footer, fontSize: s.small }
+        }
+      }
+    };
+  }
   const dark = isDarkBackground(merged.colors.background);
   if (dark) {
     merged = adaptChromeForDarkBg(merged, merged.colors.text);