@opendata-ai/openchart-engine 2.1.0 → 2.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _opendata_ai_openchart_core from '@opendata-ai/openchart-core';
-import { LegendLayout, ResolvedChrome, TooltipContent, A11yMetadata, ResolvedTheme, CompileOptions, ChartLayout, CompileTableOptions, TableLayout, ChartType, DataRow, Encoding, ChromeText, Annotation, LabelConfig, LegendConfig, ThemeConfig, DarkMode, ColumnConfig, GraphSpec, GraphEncoding, GraphLayoutConfig, VizSpec, EncodingChannel, Rect, LayoutStrategy, Mark } from '@opendata-ai/openchart-core';
+import { LegendLayout, ResolvedChrome, TooltipContent, A11yMetadata, ResolvedTheme, CompileOptions, ChartLayout, CompileTableOptions, TableLayout, ChartType, DataRow, Encoding, ChromeText, Annotation, LabelConfig, LegendConfig, ThemeConfig, DarkMode, ColumnConfig, GraphSpec, GraphEncoding, GraphLayoutConfig, NodeOverride, VizSpec, EncodingChannel, Rect, LayoutStrategy, Mark } from '@opendata-ai/openchart-core';
 export { ChartLayout, ChartSpec, CompileOptions, CompileTableOptions, GraphLayout, GraphSpec, TableLayout, TableSpec, VizSpec } from '@opendata-ai/openchart-core';
 import { ScaleLinear, ScaleTime, ScaleLogarithmic, ScaleBand, ScalePoint, ScaleOrdinal } from 'd3-scale';
 
@@ -65,6 +65,12 @@ interface SimulationConfig {
     velocityDecay: number;
     /** Collision radius: max node radius + padding. */
     collisionRadius: number;
+    /** Extra px added to node radius for collision (default 2). */
+    collisionPadding?: number;
+    /** Link force strength override. */
+    linkStrength?: number;
+    /** Whether to apply center force (default true). */
+    centerForce?: boolean;
 }
 /**
  * The complete engine output for graph specs.
@@ -172,6 +178,8 @@ interface NormalizedChartSpec {
     responsive: boolean;
     theme: ThemeConfig;
     darkMode: DarkMode;
+    /** Series names to hide from rendering. */
+    hiddenSeries: string[];
 }
 /** A TableSpec with all optional fields filled with sensible defaults. */
 interface NormalizedTableSpec {
@@ -197,6 +205,7 @@ interface NormalizedGraphSpec {
     edges: GraphSpec['edges'];
     encoding: GraphEncoding;
     layout: GraphLayoutConfig;
+    nodeOverrides?: Record<string, NodeOverride>;
     chrome: NormalizedChrome;
     annotations: Annotation[];
     theme: ThemeConfig;

package/dist/index.js

@@ -1898,7 +1898,8 @@ function normalizeChartSpec(spec, warnings) {
     legend: spec.legend,
     responsive: spec.responsive ?? true,
     theme: spec.theme ?? {},
-    darkMode: spec.darkMode ?? "off"
+    darkMode: spec.darkMode ?? "off",
+    hiddenSeries: spec.hiddenSeries ?? []
   };
 }
 function normalizeTableSpec(spec, _warnings) {
@@ -1933,6 +1934,7 @@ function normalizeGraphSpec(spec, _warnings) {
     edges: spec.edges,
     encoding: spec.encoding ?? {},
     layout,
+    nodeOverrides: spec.nodeOverrides,
     chrome: normalizeChrome(spec.chrome),
     annotations: normalizeAnnotations(spec.annotations),
     theme: spec.theme ?? {},
@@ -2463,7 +2465,7 @@ function computeDegrees(nodes, edges) {
   }
   return degrees;
 }
-function resolveNodeVisuals(nodes, encoding, edges, theme) {
+function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
   const degrees = computeDegrees(nodes, edges);
   const maxDegree = Math.max(1, ...degrees.values());
   let sizeScale;
@@ -2517,14 +2519,20 @@ function resolveNodeVisuals(nodes, encoding, edges, theme) {
     const labelPriority = maxDegree > 0 ? degree / maxDegree : 0;
     const { id: _id, ...rest } = node;
     const data = { id: node.id, ...rest };
+    const override = nodeOverrides?.[node.id];
+    const finalFill = override?.fill ?? fill;
+    const finalRadius = override?.radius ?? radius;
+    const finalStrokeWidth = override?.strokeWidth ?? DEFAULT_STROKE_WIDTH2;
+    const finalStroke = override?.stroke ?? stroke;
+    const finalLabelPriority = override?.alwaysShowLabel ? Infinity : labelPriority;
     return {
       id: node.id,
-      radius,
-      fill,
-      stroke,
-      strokeWidth: DEFAULT_STROKE_WIDTH2,
+      radius: finalRadius,
+      fill: finalFill,
+      stroke: finalStroke,
+      strokeWidth: finalStrokeWidth,
       label,
-      labelPriority,
+      labelPriority: finalLabelPriority,
       community: void 0,
       data
     };
@@ -2561,6 +2569,17 @@ function resolveEdgeVisuals(edges, encoding, theme) {
     }
   }
   const defaultEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
+  const EDGE_STYLES = ["solid", "dashed", "dotted"];
+  let styleFn;
+  if (encoding.edgeStyle?.field) {
+    const field = encoding.edgeStyle.field;
+    const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? "")))];
+    const styleMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < uniqueValues.length; i++) {
+      styleMap.set(uniqueValues[i], EDGE_STYLES[i % EDGE_STYLES.length]);
+    }
+    styleFn = (edge) => styleMap.get(String(edge[field] ?? "")) ?? "solid";
+  }
   return edges.map((edge) => {
     const { source, target, ...rest } = edge;
     let strokeWidth = DEFAULT_EDGE_WIDTH;
@@ -2571,12 +2590,13 @@ function resolveEdgeVisuals(edges, encoding, theme) {
       }
     }
     const stroke = edgeColorFn ? edgeColorFn(edge) : defaultEdgeColor;
+    const style = styleFn ? styleFn(edge) : "solid";
     return {
       source,
       target,
       stroke,
       strokeWidth,
-      style: "solid",
+      style,
       data: { source, target, ...rest }
     };
   });
@@ -2705,7 +2725,8 @@ function compileGraph(spec, options) {
     graphSpec.nodes,
     graphSpec.encoding,
     graphSpec.edges,
-    theme
+    theme,
+    graphSpec.nodeOverrides
   );
   const clusteringField = graphSpec.layout.clustering?.field;
   const hasCommunities = !!clusteringField;
@@ -2731,6 +2752,7 @@ function compileGraph(spec, options) {
     role: "img",
     keyboardNavigable: compiledNodes.length > 0
   };
+  const collisionPadding = graphSpec.layout.collisionPadding ?? 2;
   const maxRadius = compiledNodes.length > 0 ? Math.max(...compiledNodes.map((n) => n.radius)) : DEFAULT_COLLISION_PADDING;
   const simulationConfig = {
     chargeStrength: graphSpec.layout.chargeStrength ?? -300,
@@ -2738,7 +2760,10 @@ function compileGraph(spec, options) {
     clustering: clusteringField ? { field: clusteringField, strength: 0.5 } : null,
     alphaDecay: 0.0228,
     velocityDecay: 0.4,
-    collisionRadius: maxRadius + 2
+    collisionRadius: maxRadius + collisionPadding,
+    collisionPadding,
+    linkStrength: graphSpec.layout.linkStrength,
+    centerForce: graphSpec.layout.centerForce
   };
   const chrome = computeChrome(
     {
@@ -4182,7 +4207,27 @@ function compileChart(spec, options) {
     }
   }
   const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea);
-  const scales = computeScales(chartSpec, chartArea, chartSpec.data);
+  let renderData = chartSpec.data;
+  if (chartSpec.hiddenSeries.length > 0 && chartSpec.encoding.color) {
+    const colorField = chartSpec.encoding.color.field;
+    const hiddenSet = new Set(chartSpec.hiddenSeries);
+    renderData = renderData.filter((row) => !hiddenSet.has(String(row[colorField])));
+  }
+  for (const channel of ["x", "y"]) {
+    const enc = chartSpec.encoding[channel];
+    if (!enc?.scale?.clip || !enc.scale.domain) continue;
+    const domain = enc.scale.domain;
+    const field = enc.field;
+    if (Array.isArray(domain) && domain.length === 2 && typeof domain[0] === "number") {
+      const [lo, hi] = domain;
+      renderData = renderData.filter((row) => {
+        const v = Number(row[field]);
+        return Number.isFinite(v) && v >= lo && v <= hi;
+      });
+    }
+  }
+  const renderSpec = renderData !== chartSpec.data ? { ...chartSpec, data: renderData } : chartSpec;
+  const scales = computeScales(renderSpec, chartArea, renderSpec.data);
   if (scales.color) {
     if (scales.color.type === "sequential") {
       const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
@@ -4202,8 +4247,8 @@ function compileChart(spec, options) {
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
-  const renderer = getChartRenderer(chartSpec.type);
-  const marks = renderer ? renderer(chartSpec, scales, chartArea, strategy, theme) : [];
+  const renderer = getChartRenderer(renderSpec.type);
+  const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
   const obstacles = [];
   if (finalLegend.bounds.width > 0) {
     obstacles.push(finalLegend.bounds);