@opendata-ai/openchart-vanilla 6.4.1 → 6.5.1

package/src/__tests__/events.test.ts

@@ -142,7 +142,7 @@ describe('chart event handlers', () => {
       const onAnnotationClick = vi.fn();
       const chart = createChart(container, annotatedSpec, { onAnnotationClick });
 
-      const annotation = container.querySelector('.viz-annotation');
+      const annotation = container.querySelector('.oc-annotation');
       if (!annotation) {
         // Refline at y=0 may resolve outside the chart area in test env
         chart.destroy();
@@ -166,7 +166,7 @@ describe('chart event handlers', () => {
       const onAnnotationEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -180,7 +180,7 @@ describe('chart event handlers', () => {
       const onAnnotationEdit = vi.fn();
       const chart = createChart(container, annotatedSpec, { onAnnotationEdit });
 
-      const annotation = container.querySelector('.viz-annotation-refline') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-refline') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -194,7 +194,7 @@ describe('chart event handlers', () => {
       const onAnnotationEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -220,7 +220,7 @@ describe('chart event handlers', () => {
       const onAnnotationEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -243,7 +243,7 @@ describe('chart event handlers', () => {
         onAnnotationEdit,
       });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -268,7 +268,7 @@ describe('chart event handlers', () => {
       const onAnnotationEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;

package/src/__tests__/export.test.ts

@@ -67,7 +67,7 @@ describe('exportSVG', () => {
     const result = exportSVG(svg);
     // Bar chart should have rect elements
     expect(result).toContain('<rect');
-    expect(result).toContain('viz-mark-rect');
+    expect(result).toContain('oc-mark-rect');
   });
 
   it('returned string is well-formed XML (ends with closing svg tag)', () => {

package/src/__tests__/mount.test.ts

@@ -23,7 +23,7 @@ describe('createChart', () => {
 
     const svg = container.querySelector('svg');
     expect(svg).not.toBeNull();
-    expect(svg?.getAttribute('class')).toBe('viz-chart');
+    expect(svg?.getAttribute('class')).toBe('oc-chart');
 
     chart.destroy();
   });
@@ -41,15 +41,15 @@ describe('createChart', () => {
   it('chrome text elements are present with correct content', () => {
     const chart = createChart(container, lineSpec);
 
-    const title = container.querySelector('.viz-title');
+    const title = container.querySelector('.oc-title');
     expect(title).not.toBeNull();
     expect(title?.textContent).toBe('GDP Growth');
 
-    const subtitle = container.querySelector('.viz-subtitle');
+    const subtitle = container.querySelector('.oc-subtitle');
     expect(subtitle).not.toBeNull();
     expect(subtitle?.textContent).toBe('US vs UK over time');
 
-    const source = container.querySelector('.viz-source');
+    const source = container.querySelector('.oc-source');
     expect(source).not.toBeNull();
     expect(source?.textContent).toBe('World Bank');
 
@@ -59,12 +59,12 @@ describe('createChart', () => {
   it('update() re-renders with new data', () => {
     const chart = createChart(container, lineSpec);
 
-    const titleBefore = container.querySelector('.viz-title');
+    const titleBefore = container.querySelector('.oc-title');
     expect(titleBefore?.textContent).toBe('GDP Growth');
 
     chart.update(barSpec);
 
-    const titleAfter = container.querySelector('.viz-title');
+    const titleAfter = container.querySelector('.oc-title');
     expect(titleAfter?.textContent).toBe('Updated Chart');
 
     chart.destroy();
@@ -82,7 +82,7 @@ describe('createChart', () => {
     expect(svgAfter).toBeNull();
 
     // Tooltip div should also be removed
-    const tooltip = container.querySelector('.viz-tooltip');
+    const tooltip = container.querySelector('.oc-tooltip');
     expect(tooltip).toBeNull();
   });
 
@@ -132,8 +132,8 @@ describe('createChart', () => {
   it('renders axis elements', () => {
     const chart = createChart(container, lineSpec);
 
-    const xAxis = container.querySelector('.viz-axis-x');
-    const yAxis = container.querySelector('.viz-axis-y');
+    const xAxis = container.querySelector('.oc-axis-x');
+    const yAxis = container.querySelector('.oc-axis-y');
     expect(xAxis).not.toBeNull();
     expect(yAxis).not.toBeNull();
 
@@ -143,7 +143,7 @@ describe('createChart', () => {
   it('renders chrome wrapper group', () => {
     const chart = createChart(container, lineSpec);
 
-    const chromeGroup = container.querySelector('.viz-chrome');
+    const chromeGroup = container.querySelector('.oc-chrome');
     expect(chromeGroup).not.toBeNull();
 
     chart.destroy();

package/src/__tests__/selection-events.test.ts

@@ -319,7 +319,7 @@ describe('selection events', () => {
   // 3. Selection overlay
   // =========================================================================
   describe('selection overlay', () => {
-    it('viz-selection-overlay group appears after selection', () => {
+    it('oc-selection-overlay group appears after selection', () => {
       const onSelect = vi.fn();
       const chart = createChart(container, selectionSpec, { onSelect });
 
@@ -330,12 +330,12 @@ describe('selection events', () => {
       }
 
       // No overlay initially
-      expect(container.querySelector('.viz-selection-overlay')).toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).toBeNull();
 
       simulateClick(titleEl);
 
       // Overlay should now exist
-      expect(container.querySelector('.viz-selection-overlay')).not.toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).not.toBeNull();
 
       chart.destroy();
     });
@@ -353,13 +353,13 @@ describe('selection events', () => {
 
       // Select
       simulateClick(titleEl);
-      expect(container.querySelector('.viz-selection-overlay')).not.toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).not.toBeNull();
 
       // Deselect by clicking empty area
       const svg = getSvg(container);
       svg.dispatchEvent(new MouseEvent('click', { bubbles: false }));
 
-      expect(container.querySelector('.viz-selection-overlay')).toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).toBeNull();
 
       chart.destroy();
     });
@@ -538,13 +538,13 @@ describe('selection events', () => {
       }
 
       simulateClick(titleEl);
-      expect(container.querySelector('.viz-selection-overlay')).not.toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).not.toBeNull();
 
       // Update with same spec (should re-render but preserve selection)
       chart.update(selectionSpec);
 
       // Selection overlay should still be present
-      expect(container.querySelector('.viz-selection-overlay')).not.toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).not.toBeNull();
       expect(chart.getSelectedElement()?.type).toBe('chrome');
 
       chart.destroy();
@@ -573,7 +573,7 @@ describe('selection events', () => {
 
       // Selection should be cleared because source no longer exists
       expect(chart.getSelectedElement()).toBeNull();
-      expect(container.querySelector('.viz-selection-overlay')).toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).toBeNull();
 
       chart.destroy();
     });
@@ -614,7 +614,7 @@ describe('selection events', () => {
   // 7. Hover feedback
   // =========================================================================
   describe('hover feedback', () => {
-    it('mouse enter on editable element adds viz-editable-hover class', () => {
+    it('mouse enter on editable element adds oc-editable-hover class', () => {
       const onSelect = vi.fn();
       const chart = createChart(container, selectionSpec, { onSelect });
 
@@ -627,12 +627,12 @@ describe('selection events', () => {
       // Trigger mouseenter (uses capture so dispatch on the target itself)
       titleEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
 
-      expect(titleEl.classList.contains('viz-editable-hover')).toBe(true);
+      expect(titleEl.classList.contains('oc-editable-hover')).toBe(true);
 
       chart.destroy();
     });
 
-    it('mouse leave removes viz-editable-hover class', () => {
+    it('mouse leave removes oc-editable-hover class', () => {
       const onSelect = vi.fn();
       const chart = createChart(container, selectionSpec, { onSelect });
 
@@ -644,11 +644,11 @@ describe('selection events', () => {
 
       // Add hover class first
       titleEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-      expect(titleEl.classList.contains('viz-editable-hover')).toBe(true);
+      expect(titleEl.classList.contains('oc-editable-hover')).toBe(true);
 
       // Remove hover class
       titleEl.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
-      expect(titleEl.classList.contains('viz-editable-hover')).toBe(false);
+      expect(titleEl.classList.contains('oc-editable-hover')).toBe(false);
 
       chart.destroy();
     });
@@ -834,7 +834,7 @@ describe('selection events', () => {
       });
 
       // The overlay should be rendered
-      expect(container.querySelector('.viz-selection-overlay')).not.toBeNull();
+      expect(container.querySelector('.oc-selection-overlay')).not.toBeNull();
       expect(chart.getSelectedElement()?.type).toBe('chrome');
 
       chart.destroy();