@opendata-ai/openchart-engine 2.4.0 → 2.6.0

package/dist/index.d.ts

@@ -180,6 +180,8 @@ interface NormalizedChartSpec {
     darkMode: DarkMode;
     /** Series names to hide from rendering. */
     hiddenSeries: string[];
+    /** Per-series visual style overrides. */
+    seriesStyles: Record<string, _opendata_ai_openchart_core.SeriesStyle>;
 }
 /** A TableSpec with all optional fields filled with sensible defaults. */
 interface NormalizedTableSpec {

package/dist/index.js

@@ -202,14 +202,23 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
   const rect = { x, y, width, height };
   let label;
   if (annotation.label) {
-    const baseDx = 4;
+    const anchor = annotation.labelAnchor ?? "left";
+    const centered = anchor === "top" || anchor === "bottom" || anchor === "auto";
+    const baseDx = centered ? 0 : anchor === "right" ? -4 : 4;
     const baseDy = 14;
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
+    const style = makeAnnotationLabelStyle(11, 500, void 0, isDark);
+    if (centered) {
+      style.textAnchor = "middle";
+    } else if (anchor === "right") {
+      style.textAnchor = "end";
+    }
+    const baseX = centered ? x + width / 2 : anchor === "right" ? x + width : x;
     label = {
       text: annotation.label,
-      x: x + labelDelta.dx,
+      x: baseX + labelDelta.dx,
       y: y + labelDelta.dy,
-      style: makeAnnotationLabelStyle(11, 500, void 0, isDark),
+      style,
       visible: true
     };
   }
@@ -249,8 +258,9 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
   let label;
   if (annotation.label) {
     const isHorizontal = annotation.y !== void 0;
+    const anchor = annotation.labelAnchor ?? "top";
     const baseDx = isHorizontal ? -4 : 4;
-    const baseDy = -4;
+    const baseDy = anchor === "bottom" ? 14 : -4;
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
     const defaultStroke2 = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
     const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke2, isDark);
@@ -580,19 +590,41 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 
 // src/charts/bar/labels.ts
 import { estimateTextWidth as estimateTextWidth2, resolveCollisions } from "@opendata-ai/openchart-core";
+import { format as d3Format } from "d3-format";
 var LABEL_FONT_SIZE = 11;
 var LABEL_FONT_WEIGHT = 600;
 var LABEL_PADDING = 6;
 var MIN_WIDTH_FOR_INSIDE_LABEL = 40;
-function computeBarLabels(marks, _chartArea, density = "auto") {
+function computeBarLabels(marks, _chartArea, density = "auto", labelFormat) {
   if (density === "none") return [];
   const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
   const candidates = [];
+  let formatter = null;
+  if (labelFormat) {
+    try {
+      formatter = d3Format(labelFormat);
+    } catch {
+      const suffixMatch = labelFormat.match(/^(.+[a-z])([^a-z]+)$/i);
+      if (suffixMatch) {
+        try {
+          const d3Fmt = d3Format(suffixMatch[1]);
+          const suffix = suffixMatch[2];
+          formatter = (v) => d3Fmt(v) + suffix;
+        } catch {
+        }
+      }
+    }
+  }
   for (const mark of targetMarks) {
     const ariaLabel = mark.aria.label;
     const lastColon = ariaLabel.lastIndexOf(":");
-    const valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
-    if (!valuePart) continue;
+    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+    if (!rawValue) continue;
+    let valuePart = rawValue;
+    if (formatter) {
+      const num = Number(rawValue.replace(/[^0-9.-]/g, ""));
+      if (!Number.isNaN(num)) valuePart = formatter(num);
+    }
     const textWidth = estimateTextWidth2(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
     const textHeight = LABEL_FONT_SIZE * 1.2;
     const isStacked = mark.cornerRadius === 0;
@@ -648,7 +680,7 @@ function computeBarLabels(marks, _chartArea, density = "auto") {
 // src/charts/bar/index.ts
 var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
-  const labels = computeBarLabels(marks, chartArea, spec.labels.density);
+  const labels = computeBarLabels(marks, chartArea, spec.labels.density, spec.labels.format);
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
   }
@@ -1299,27 +1331,35 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
       label: ariaLabel
     };
     const combinedPath = pathParts.join(" ");
+    const seriesStyleKey = seriesKey === "__default__" ? void 0 : seriesKey;
+    const styleOverride = seriesStyleKey ? spec.seriesStyles?.[seriesStyleKey] : void 0;
+    let strokeDasharray;
+    if (styleOverride?.lineStyle === "dashed") strokeDasharray = "6 4";
+    else if (styleOverride?.lineStyle === "dotted") strokeDasharray = "2 3";
     const lineMark = {
       type: "line",
       points: allPoints,
       path: combinedPath,
       stroke: color,
-      strokeWidth: DEFAULT_STROKE_WIDTH,
-      seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
+      strokeWidth: styleOverride?.strokeWidth ?? DEFAULT_STROKE_WIDTH,
+      strokeDasharray,
+      opacity: styleOverride?.opacity,
+      seriesKey: seriesStyleKey,
       data: pointsWithData.map((p) => p.row),
       aria
     };
     marks.push(lineMark);
+    const showPoints = styleOverride?.showPoints !== false;
     for (let i = 0; i < pointsWithData.length; i++) {
       const p = pointsWithData[i];
       const pointMark = {
         type: "point",
         cx: p.x,
         cy: p.y,
-        r: DEFAULT_POINT_RADIUS,
+        r: showPoints ? DEFAULT_POINT_RADIUS : 0,
         fill: color,
-        stroke: "#ffffff",
-        strokeWidth: 1.5,
+        stroke: showPoints ? "#ffffff" : "transparent",
+        strokeWidth: showPoints ? 1.5 : 0,
         fillOpacity: 0,
         data: p.row,
         aria: {
@@ -1899,7 +1939,8 @@ function normalizeChartSpec(spec, warnings) {
     responsive: spec.responsive ?? true,
     theme: spec.theme ?? {},
     darkMode: spec.darkMode ?? "off",
-    hiddenSeries: spec.hiddenSeries ?? []
+    hiddenSeries: spec.hiddenSeries ?? [],
+    seriesStyles: spec.seriesStyles ?? {}
   };
 }
 function normalizeTableSpec(spec, _warnings) {
@@ -2796,6 +2837,7 @@ var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/axes.ts
 import { abbreviateNumber as abbreviateNumber3, formatDate, formatNumber as formatNumber3 } from "@opendata-ai/openchart-core";
+import { format as d3Format2 } from "d3-format";
 var TICK_COUNTS = {
   full: 8,
   reduced: 5,
@@ -2855,7 +2897,19 @@ function formatTickLabel(value, resolvedScale) {
   }
   if (resolvedScale.type === "linear" || resolvedScale.type === "log") {
     const num = value;
-    if (formatStr) return formatNumber3(num);
+    if (formatStr) {
+      try {
+        return d3Format2(formatStr)(num);
+      } catch {
+        const suffixMatch = formatStr.match(/^(.+[a-z])([^a-z]+)$/i);
+        if (suffixMatch) {
+          try {
+            return d3Format2(suffixMatch[1])(num) + suffixMatch[2];
+          } catch {
+          }
+        }
+      }
+    }
     if (Math.abs(num) >= 1e3) return abbreviateNumber3(num);
     return formatNumber3(num);
   }
@@ -2977,7 +3031,8 @@ function computeDimensions(spec, options, legendLayout, theme) {
     bottom: padding + chrome.bottomHeight + xAxisHeight,
     left: padding + (isRadial ? padding : axisMargin)
   };
-  if (spec.type === "line" || spec.type === "area") {
+  const labelDensity = spec.labels.density;
+  if ((spec.type === "line" || spec.type === "area") && labelDensity !== "none") {
     const colorField = encoding.color?.field;
     if (colorField) {
       let maxLabelWidth = 0;
@@ -3508,7 +3563,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
 
 // src/tables/format-cells.ts
 import { formatDate as formatDate2, formatNumber as formatNumber4 } from "@opendata-ai/openchart-core";
-import { format as d3Format } from "d3-format";
+import { format as d3Format3 } from "d3-format";
 function isNumericValue(value) {
   if (typeof value === "number") return Number.isFinite(value);
   return false;
@@ -3528,7 +3583,7 @@ function formatCell(value, column) {
   }
   if (column.format && isNumericValue(value)) {
     try {
-      const formatter = d3Format(column.format);
+      const formatter = d3Format3(column.format);
       return {
         value,
         formattedValue: formatter(value),
@@ -3561,7 +3616,7 @@ function formatValueForSearch(value, column) {
   if (value == null) return "";
   if (column.format && isNumericValue(value)) {
     try {
-      return d3Format(column.format)(value);
+      return d3Format3(column.format)(value);
     } catch {
     }
   }
@@ -4035,7 +4090,7 @@ function compileTableLayout(spec, options, theme) {
 
 // src/tooltips/compute.ts
 import { formatDate as formatDate3, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
-import { format as d3Format2 } from "d3-format";
+import { format as d3Format4 } from "d3-format";
 function formatValue(value, fieldType, format) {
   if (value == null) return "";
   if (fieldType === "temporal" || value instanceof Date) {
@@ -4044,7 +4099,7 @@ function formatValue(value, fieldType, format) {
   if (typeof value === "number") {
     if (format) {
       try {
-        return d3Format2(format)(value);
+        return d3Format4(format)(value);
       } catch {
         return formatNumber5(value);
       }