@opendata-ai/openchart-engine 2.3.5 → 2.5.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

@@ -1299,27 +1299,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 +1907,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) {
@@ -2801,6 +2810,22 @@ var TICK_COUNTS = {
   reduced: 5,
   minimal: 3
 };
+var HEIGHT_MINIMAL_THRESHOLD = 120;
+var HEIGHT_REDUCED_THRESHOLD = 200;
+var WIDTH_MINIMAL_THRESHOLD = 150;
+var WIDTH_REDUCED_THRESHOLD = 300;
+var DENSITY_ORDER = ["full", "reduced", "minimal"];
+function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThreshold) {
+  let density = baseDensity;
+  if (axisLength < minimalThreshold) {
+    density = "minimal";
+  } else if (axisLength < reducedThreshold) {
+    const baseIdx = DENSITY_ORDER.indexOf(baseDensity);
+    const reducedIdx = DENSITY_ORDER.indexOf("reduced");
+    density = DENSITY_ORDER[Math.max(baseIdx, reducedIdx)];
+  }
+  return density;
+}
 function continuousTicks(resolvedScale, density) {
   const scale = resolvedScale.scale;
   const count = resolvedScale.channel.axis?.tickCount ?? TICK_COUNTS[density];
@@ -2847,7 +2872,19 @@ function formatTickLabel(value, resolvedScale) {
 }
 function computeAxes(scales, chartArea, strategy, theme) {
   const result = {};
-  const density = strategy.axisLabelDensity;
+  const baseDensity = strategy.axisLabelDensity;
+  const yDensity = effectiveDensity(
+    baseDensity,
+    chartArea.height,
+    HEIGHT_MINIMAL_THRESHOLD,
+    HEIGHT_REDUCED_THRESHOLD
+  );
+  const xDensity = effectiveDensity(
+    baseDensity,
+    chartArea.width,
+    WIDTH_MINIMAL_THRESHOLD,
+    WIDTH_REDUCED_THRESHOLD
+  );
   const tickLabelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.axisTick,
@@ -2864,7 +2901,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
     lineHeight: 1.3
   };
   if (scales.x) {
-    const ticks = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, density) : continuousTicks(scales.x, density);
+    const ticks = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity) : continuousTicks(scales.x, xDensity);
     const gridlines = ticks.map((t) => ({
       position: t.position,
       major: true
@@ -2875,12 +2912,13 @@ function computeAxes(scales, chartArea, strategy, theme) {
       label: scales.x.channel.axis?.label,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
+      tickAngle: scales.x.channel.axis?.tickAngle,
       start: { x: chartArea.x, y: chartArea.y + chartArea.height },
       end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height }
     };
   }
   if (scales.y) {
-    const ticks = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, density) : continuousTicks(scales.y, density);
+    const ticks = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity) : continuousTicks(scales.y, yDensity);
     const gridlines = ticks.map((t) => ({
       position: t.position,
       major: true
@@ -2892,6 +2930,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
       label: scales.y.channel.axis?.label,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
+      tickAngle: scales.y.channel.axis?.tickAngle,
       start: { x: chartArea.x, y: chartArea.y },
       end: { x: chartArea.x, y: chartArea.y + chartArea.height }
     };
@@ -2918,8 +2957,29 @@ function computeDimensions(spec, options, legendLayout, theme) {
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.type === "pie" || spec.type === "donut";
   const encoding = spec.encoding;
-  const hasXAxisLabel = !!encoding.x?.axis?.label;
-  const xAxisHeight = isRadial ? 0 : hasXAxisLabel ? 48 : 26;
+  const xAxis = encoding.x?.axis;
+  const hasXAxisLabel = !!xAxis?.label;
+  const xTickAngle = xAxis?.tickAngle;
+  let xAxisHeight;
+  if (isRadial) {
+    xAxisHeight = 0;
+  } else if (xTickAngle && Math.abs(xTickAngle) > 10) {
+    const angleRad = Math.abs(xTickAngle) * (Math.PI / 180);
+    const xField = encoding.x?.field;
+    let maxLabelWidth = 40;
+    if (xField) {
+      for (const row of spec.data) {
+        const label = String(row[xField] ?? "");
+        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+    }
+    const rotatedHeight = maxLabelWidth * Math.sin(angleRad) + 6;
+    const labelHeight = Math.min(rotatedHeight, 120);
+    xAxisHeight = hasXAxisLabel ? labelHeight + 20 : labelHeight;
+  } else {
+    xAxisHeight = hasXAxisLabel ? 48 : 26;
+  }
   const margins = {
     top: padding + chrome.topHeight + axisMargin,
     right: padding + (isRadial ? padding : axisMargin),