@opendata-ai/openchart-vanilla 6.15.1 → 6.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.15.1",
+  "version": "6.17.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "6.15.1",
-    "@opendata-ai/openchart-engine": "6.15.1",
+    "@opendata-ai/openchart-core": "6.17.0",
+    "@opendata-ai/openchart-engine": "6.17.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/events.test.ts

@@ -114,7 +114,13 @@ describe('chart event handlers', () => {
   describe('onLegendToggle', () => {
     it('fires when a legend entry is clicked', () => {
       const onLegendToggle = vi.fn();
-      const chart = createChart(container, lineSpec, { onLegendToggle });
+      const chart = createChart(
+        container,
+        { ...lineSpec, legend: { show: true } },
+        {
+          onLegendToggle,
+        },
+      );
 
       const legendEntry = container.querySelector('[data-legend-index]');
       expect(legendEntry).not.toBeNull();

package/src/__tests__/svg-renderer.test.ts

@@ -565,8 +565,11 @@ describe('gridline rendering', () => {
 // ---------------------------------------------------------------------------
 
 describe('legend rendering', () => {
+  /** Legend is auto-suppressed for line charts with endpoint labels; force it on for these tests. */
+  const lineSpecWithLegend = { ...lineSpec, legend: { show: true } };
+
   it('multi-series chart renders legend entries', () => {
-    const { svg } = renderSpec(lineSpec);
+    const { svg } = renderSpec(lineSpecWithLegend);
     const legend = svg.querySelector('.oc-legend');
     expect(legend).not.toBeNull();
     const entries = legend!.querySelectorAll('.oc-legend-entry');
@@ -575,7 +578,7 @@ describe('legend rendering', () => {
   });
 
   it('legend entries have labels with series names', () => {
-    const { svg } = renderSpec(lineSpec);
+    const { svg } = renderSpec(lineSpecWithLegend);
     const entries = svg.querySelectorAll('.oc-legend-entry');
     const labels: string[] = [];
     for (const entry of entries) {
@@ -587,7 +590,7 @@ describe('legend rendering', () => {
   });
 
   it('legend entries have data-legend-label attribute', () => {
-    const { svg } = renderSpec(lineSpec);
+    const { svg } = renderSpec(lineSpecWithLegend);
     const entries = svg.querySelectorAll('.oc-legend-entry');
     for (const entry of entries) {
       expect(entry.getAttribute('data-legend-label')).not.toBeNull();
@@ -595,7 +598,7 @@ describe('legend rendering', () => {
   });
 
   it('legend has ARIA attributes for accessibility', () => {
-    const { svg } = renderSpec(lineSpec);
+    const { svg } = renderSpec(lineSpecWithLegend);
     const legend = svg.querySelector('.oc-legend');
     expect(legend!.getAttribute('role')).toBe('list');
     expect(legend!.getAttribute('aria-label')).toBe('Chart legend');

package/src/gradient-utils.ts

@@ -89,25 +89,31 @@ function appendStop(
   parent.appendChild(stopEl);
 }
 
+/**
+ * Global counter for gradient IDs. Ensures uniqueness across all charts
+ * on the same page, since SVG url(#id) resolves globally in the document.
+ */
+let globalGradientCounter = 0;
+
 /**
  * Scan all marks for GradientDef fill values, create SVG gradient elements
  * in the provided <defs> node, and return a map from gradient key to element ID.
  *
- * Identical gradients (by key) share a single SVG element.
+ * Identical gradients (by key) share a single SVG element within one chart.
+ * IDs are globally unique across charts to avoid SVG url(#id) collisions.
  */
 export function buildGradientDefs(
   marks: Array<{ fill?: unknown }>,
   defs: SVGElement,
 ): Map<string, string> {
   const map = new Map<string, string>();
-  let counter = 0;
 
   for (const mark of marks) {
     const fill = mark.fill;
     if (fill && isGradientDef(fill)) {
       const key = gradientKey(fill);
       if (!map.has(key)) {
-        const id = `oc-grad-${counter++}`;
+        const id = `oc-grad-${globalGradientCounter++}`;
         const el = createGradientElement(fill, id);
         defs.appendChild(el);
         map.set(key, id);