@opendata-ai/openchart-engine 7.1.4 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.1.4",
+  "version": "7.2.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "7.1.4",
+    "@opendata-ai/openchart-core": "7.2.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -360,14 +360,14 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "background": "transparent",
       "categorical": [
         "#06b6d4",
-        "#eb7289",
-        "#3bb974",
-        "#ad87ed",
-        "#e69c3a",
-        "#4ba3f7",
-        "#eb8656",
-        "#8494fa",
-        "#00b9c3",
+        "#ee4a73",
+        "#00b054",
+        "#a46bf5",
+        "#e07d00",
+        "#0091ff",
+        "#f36000",
+        "#6f7dff",
+        "#00afbf",
       ],
       "diverging": {
         "brownTeal": [
@@ -461,6 +461,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "chromeGap": 4,
       "chromeToChart": 8,
       "padding": 20,
+      "xAxisHeight": 26,
+      "xAxisLabelPadding": 14,
     },
   },
   "tooltipDescriptors": [
@@ -790,7 +792,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "value": "40",
       },
       {
-        "color": "#eb7289",
+        "color": "#ee4a73",
         "dataY": 143.375,
         "labelLines": [
           "UK",
@@ -800,7 +802,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "dataX": 657.899,
           "fill": "transparent",
           "radius": 4,
-          "stroke": "#eb7289",
+          "stroke": "#ee4a73",
           "strokeWidth": 2,
           "x": 661.899,
           "y": 143.375,
@@ -810,7 +812,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "value": "35",
       },
       {
-        "color": "#3bb974",
+        "color": "#00b054",
         "dataY": 242.62999999999997,
         "labelLines": [
           "FR",
@@ -820,7 +822,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "dataX": 657.899,
           "fill": "transparent",
           "radius": 4,
-          "stroke": "#3bb974",
+          "stroke": "#00b054",
           "strokeWidth": 2,
           "x": 661.899,
           "y": 242.62999999999997,
@@ -830,7 +832,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "value": "22",
       },
       {
-        "color": "#ad87ed",
+        "color": "#a46bf5",
         "dataY": 196.82,
         "labelLines": [
           "DE",
@@ -840,7 +842,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "dataX": 657.899,
           "fill": "transparent",
           "radius": 4,
-          "stroke": "#ad87ed",
+          "stroke": "#a46bf5",
           "strokeWidth": 2,
           "x": 661.899,
           "y": 196.82,
@@ -885,19 +887,19 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       },
       {
         "active": true,
-        "color": "#eb7289",
+        "color": "#ee4a73",
         "label": "UK",
         "shape": "line",
       },
       {
         "active": true,
-        "color": "#3bb974",
+        "color": "#00b054",
         "label": "FR",
         "shape": "line",
       },
       {
         "active": true,
-        "color": "#ad87ed",
+        "color": "#a46bf5",
         "label": "DE",
         "shape": "line",
       },
@@ -1035,7 +1037,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#eb7289",
+                "color": "#ee4a73",
                 "label": "country",
                 "value": "UK",
               },
@@ -1063,7 +1065,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#eb7289",
+                "color": "#ee4a73",
                 "label": "country",
                 "value": "UK",
               },
@@ -1096,7 +1098,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         },
       ],
       "seriesKey": "UK",
-      "stroke": "#eb7289",
+      "stroke": "#ee4a73",
       "strokeDasharray": undefined,
       "strokeWidth": 1.5,
       "type": "line",
@@ -1127,7 +1129,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#3bb974",
+                "color": "#00b054",
                 "label": "country",
                 "value": "FR",
               },
@@ -1155,7 +1157,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#3bb974",
+                "color": "#00b054",
                 "label": "country",
                 "value": "FR",
               },
@@ -1188,7 +1190,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         },
       ],
       "seriesKey": "FR",
-      "stroke": "#3bb974",
+      "stroke": "#00b054",
       "strokeDasharray": undefined,
       "strokeWidth": 1.5,
       "type": "line",
@@ -1219,7 +1221,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#ad87ed",
+                "color": "#a46bf5",
                 "label": "country",
                 "value": "DE",
               },
@@ -1247,7 +1249,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "tooltip": {
             "fields": [
               {
-                "color": "#ad87ed",
+                "color": "#a46bf5",
                 "label": "country",
                 "value": "DE",
               },
@@ -1280,7 +1282,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         },
       ],
       "seriesKey": "DE",
-      "stroke": "#ad87ed",
+      "stroke": "#a46bf5",
       "strokeDasharray": undefined,
       "strokeWidth": 1.5,
       "type": "line",
@@ -1334,14 +1336,14 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "background": "transparent",
       "categorical": [
         "#06b6d4",
-        "#eb7289",
-        "#3bb974",
-        "#ad87ed",
-        "#e69c3a",
-        "#4ba3f7",
-        "#eb8656",
-        "#8494fa",
-        "#00b9c3",
+        "#ee4a73",
+        "#00b054",
+        "#a46bf5",
+        "#e07d00",
+        "#0091ff",
+        "#f36000",
+        "#6f7dff",
+        "#00afbf",
       ],
       "diverging": {
         "brownTeal": [
@@ -1435,6 +1437,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "chromeGap": 4,
       "chromeToChart": 8,
       "padding": 20,
+      "xAxisHeight": 26,
+      "xAxisLabelPadding": 14,
     },
   },
   "tooltipDescriptors": [],
@@ -1923,14 +1927,14 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "background": "transparent",
       "categorical": [
         "#06b6d4",
-        "#eb7289",
-        "#3bb974",
-        "#ad87ed",
-        "#e69c3a",
-        "#4ba3f7",
-        "#eb8656",
-        "#8494fa",
-        "#00b9c3",
+        "#ee4a73",
+        "#00b054",
+        "#a46bf5",
+        "#e07d00",
+        "#0091ff",
+        "#f36000",
+        "#6f7dff",
+        "#00afbf",
       ],
       "diverging": {
         "brownTeal": [
@@ -2024,6 +2028,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "chromeGap": 4,
       "chromeToChart": 8,
       "padding": 20,
+      "xAxisHeight": 26,
+      "xAxisLabelPadding": 14,
     },
   },
   "tooltipDescriptors": [

package/src/charts/bar/index.ts

@@ -28,6 +28,8 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, th
     valueField,
     spec.labels.color,
     theme.isDark,
+    spec.labels.fontSize,
+    spec.labels.suffix,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -96,7 +96,10 @@ export function computeBarLabels(
   valueField?: string,
   labelColor?: string,
   darkMode = false,
+  fontSize?: number,
+  labelSuffix?: string,
 ): ResolvedLabel[] {
+  const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE;
   const targetMarks = filterByDensity(marks, density);
 
   const candidates: LabelCandidate[] = [];
@@ -132,9 +135,10 @@ export function computeBarLabels(
       }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
+    if (labelSuffix) valuePart = valuePart + labelSuffix;
 
-    const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
-    const textHeight = LABEL_FONT_SIZE * 1.2;
+    const textWidth = estimateTextWidth(valuePart, FONT_SIZE, LABEL_FONT_WEIGHT);
+    const textHeight = FONT_SIZE * 1.2;
 
     // Detect stacked bars: cornerRadius 0 indicates stacked segment
     const isStacked = mark.stackGroup !== undefined;
@@ -196,7 +200,7 @@ export function computeBarLabels(
       priority: 'data',
       style: {
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: LABEL_FONT_SIZE,
+        fontSize: FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
         fill,
         lineHeight: 1.2,

package/src/charts/column/index.ts

@@ -27,6 +27,8 @@ export const columnRenderer: ChartRenderer = (spec, scales, chartArea, strategy,
     spec.labels.prefix,
     valueField,
     spec.labels.color,
+    spec.labels.fontSize,
+    spec.labels.suffix,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/column/labels.ts

@@ -51,7 +51,10 @@ export function computeColumnLabels(
   labelPrefix?: string,
   valueField?: string,
   labelColor?: string,
+  fontSize?: number,
+  labelSuffix?: string,
 ): ResolvedLabel[] {
+  const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE;
   const targetMarks = filterByDensity(marks, density);
 
   const formatter = buildD3Formatter(labelFormat);
@@ -83,13 +86,14 @@ export function computeColumnLabels(
         valuePart = rawValue;
       }
     }
-    if (labelPrefix) valuePart = labelPrefix + valuePart;
-
     const numericValue = parseFloat(valuePart);
     const isNegative = Number.isFinite(numericValue) && numericValue < 0;
 
-    const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
-    const textHeight = LABEL_FONT_SIZE * 1.2;
+    if (labelPrefix) valuePart = labelPrefix + valuePart;
+    if (labelSuffix) valuePart = valuePart + labelSuffix;
+
+    const textWidth = estimateTextWidth(valuePart, FONT_SIZE, LABEL_FONT_WEIGHT);
+    const textHeight = FONT_SIZE * 1.2;
 
     // anchorY is the TOP of the label bounding box so the collision system's
     // AABB check (rect = { y: anchorY, height: textHeight }) is geometrically
@@ -110,7 +114,7 @@ export function computeColumnLabels(
       priority: 'data',
       style: {
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: LABEL_FONT_SIZE,
+        fontSize: FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,

package/src/compiler/normalize.ts

@@ -210,8 +210,10 @@ function normalizeLabels(labels?: LabelSpec): NormalizedChartSpec['labels'] {
     density: labels.density ?? 'auto',
     format: labels.format ?? '',
     prefix: labels.prefix ?? '',
+    suffix: labels.suffix,
     offsets: labels.offsets,
     color: labels.color,
+    fontSize: labels.fontSize,
   };
 }
 

package/src/compiler/types.ts

@@ -110,7 +110,7 @@ export interface NormalizedChartSpec {
   annotations: Annotation[];
   /** Normalized label configuration with defaults applied. density, format, and prefix are always set; offsets and color stay optional. */
   labels: Required<Pick<LabelConfig, 'density' | 'format' | 'prefix'>> &
-    Pick<LabelConfig, 'offsets' | 'color'>;
+    Pick<LabelConfig, 'offsets' | 'color' | 'fontSize' | 'suffix'>;
   /** Legend configuration (position override). */
   legend?: LegendConfig;
   /** Right-side endpoint labels column config (multi-series line/area only). */

package/src/layout/axes/ticks.ts

@@ -126,26 +126,27 @@ const TEMPORAL_SCALE_TYPES = new Set(['time', 'utc']);
 function formatTickLabel(value: unknown, resolvedScale: ResolvedScale): string {
   const axisConfig = resolvedScale.channel.axis || undefined;
   const formatStr = axisConfig?.format;
+  const suffix = axisConfig?.labelSuffix ?? '';
 
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     const temporalFmt = buildTemporalFormatter(formatStr);
-    if (temporalFmt) return temporalFmt(value as Date);
+    if (temporalFmt) return temporalFmt(value as Date) + suffix;
     const useUtc = resolvedScale.type === 'utc';
-    return formatDate(value as Date, undefined, undefined, useUtc);
+    return formatDate(value as Date, undefined, undefined, useUtc) + suffix;
   }
 
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value as number;
     if (formatStr) {
       const fmt = buildD3Formatter(formatStr);
-      if (fmt) return fmt(num);
+      if (fmt) return fmt(num) + suffix;
     }
     // Abbreviate large numbers for axis labels
-    if (Math.abs(num) >= 1000) return abbreviateNumber(num);
-    return formatNumber(num);
+    if (Math.abs(num) >= 1000) return abbreviateNumber(num) + suffix;
+    return formatNumber(num) + suffix;
   }
 
-  return String(value);
+  return String(value) + suffix;
 }
 
 /**

package/src/layout/dimensions.ts

@@ -338,7 +338,8 @@ export function computeDimensions(
     const labelHeight = Math.min(rotatedHeight, 120);
     xAxisHeight = hasXAxisLabel ? labelHeight + 20 : labelHeight;
   } else {
-    xAxisHeight = hasXAxisLabel ? 48 : 26;
+    const base = theme.spacing.xAxisHeight;
+    xAxisHeight = hasXAxisLabel ? base + 22 : base;
   }
 
   // Resolve effective y-axis tickPosition early so margin math can account