@opendata-ai/openchart-vue 6.3.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vue",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description": "Vue 3 components for openchart: <Chart />, <DataTable />, <Graph />, <VizThemeProvider />",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -49,9 +49,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.3.0",
-    "@opendata-ai/openchart-engine": "6.3.0",
-    "@opendata-ai/openchart-vanilla": "6.3.0"
+    "@opendata-ai/openchart-core": "6.5.0",
+    "@opendata-ai/openchart-engine": "6.5.0",
+    "@opendata-ai/openchart-vanilla": "6.5.0"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"

package/src/Chart.ts

@@ -12,6 +12,7 @@ import type {
   ChartSpec,
   DarkMode,
   ElementEdit,
+  ElementRef,
   GraphSpec,
   LayerSpec,
   MarkEvent,
@@ -64,6 +65,10 @@ export const Chart = defineComponent({
       type: [String, Object] as PropType<string | CSSProperties>,
       default: undefined,
     },
+    selectedElement: {
+      type: Object as PropType<ElementRef>,
+      default: undefined,
+    },
   },
   emits: {
     'mark-click': (_event: MarkEvent) => true,
@@ -73,9 +78,12 @@ export const Chart = defineComponent({
     'annotation-click': (_annotation: Annotation, _event: MouseEvent) => true,
     'annotation-edit': (_annotation: TextAnnotation, _updatedOffset: AnnotationOffset) => true,
     edit: (_edit: ElementEdit) => true,
+    select: (_element: ElementRef) => true,
+    deselect: (_element: ElementRef) => true,
+    'text-edit': (_element: ElementRef, _oldText: string, _newText: string) => true,
     'data-point-click': (_data: Record<string, unknown>) => true,
   },
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const containerRef = ref<HTMLDivElement | null>(null);
     let instance: ChartInstance | null = null;
     let prevSpec = '';
@@ -92,6 +100,9 @@ export const Chart = defineComponent({
     const hasAnnotationEditListener =
       'onAnnotation-edit' in vnodeProps || 'onAnnotationEdit' in vnodeProps;
     const hasEditListener = 'onEdit' in vnodeProps;
+    const hasSelectListener = 'onSelect' in vnodeProps;
+    const hasDeselectListener = 'onDeselect' in vnodeProps;
+    const hasTextEditListener = 'onText-edit' in vnodeProps || 'onTextEdit' in vnodeProps;
 
     function resolveTheme(): ThemeConfig | undefined {
       return props.theme ?? contextTheme?.value;
@@ -125,6 +136,19 @@ export const Chart = defineComponent({
             }
           : {}),
         ...(hasEditListener ? { onEdit: (edit: ElementEdit) => emit('edit', edit) } : {}),
+        ...(hasSelectListener
+          ? { onSelect: (element: ElementRef) => emit('select', element) }
+          : {}),
+        ...(hasDeselectListener
+          ? { onDeselect: (element: ElementRef) => emit('deselect', element) }
+          : {}),
+        ...(hasTextEditListener
+          ? {
+              onTextEdit: (element: ElementRef, oldText: string, newText: string) =>
+                emit('text-edit', element, oldText, newText),
+            }
+          : {}),
+        ...(props.selectedElement ? { selectedElement: props.selectedElement } : {}),
         responsive: true,
       };
 
@@ -138,6 +162,22 @@ export const Chart = defineComponent({
       prevSpec = '';
     }
 
+    // Expose imperative methods for parent ref access
+    expose({
+      getSelectedElement(): ElementRef | null {
+        return instance?.getSelectedElement() ?? null;
+      },
+      select(elementRef: ElementRef): void {
+        instance?.select(elementRef);
+      },
+      deselect(): void {
+        instance?.deselect();
+      },
+      get instance() {
+        return instance;
+      },
+    });
+
     onMounted(() => {
       mountChart();
     });
@@ -153,7 +193,20 @@ export const Chart = defineComponent({
         if (!instance) return;
         if (newVal !== prevSpec) {
           prevSpec = newVal;
-          instance.update(props.spec);
+          instance.update(props.spec, { selectedElement: props.selectedElement });
+        }
+      },
+    );
+
+    // Watch selectedElement prop changes
+    watch(
+      () => props.selectedElement,
+      (newVal) => {
+        if (!instance) return;
+        if (newVal) {
+          instance.select(newVal);
+        } else {
+          instance.deselect();
         }
       },
     );
@@ -174,7 +227,7 @@ export const Chart = defineComponent({
     );
 
     const rootClass = () => {
-      const base = 'viz-chart-root';
+      const base = 'oc-chart-root';
       return props.class ? `${base} ${props.class}` : base;
     };
 

package/src/DataTable.ts

@@ -180,7 +180,7 @@ export const DataTable = defineComponent({
     });
 
     const rootClass = () => {
-      const base = 'viz-table-root';
+      const base = 'oc-table-root';
       return props.class ? `${base} ${props.class}` : base;
     };
 

package/src/Graph.ts

@@ -165,7 +165,7 @@ export const Graph = defineComponent({
     );
 
     const rootClass = () => {
-      const base = 'viz-graph-root';
+      const base = 'oc-graph-root';
       return props.class ? `${base} ${props.class}` : base;
     };
 

package/src/__tests__/Chart.test.ts

@@ -67,21 +67,21 @@ describe('Chart', () => {
     const wrapper = await mountChart({ spec: lineSpec });
     const svg = wrapper.find('svg');
     expect(svg.exists()).toBe(true);
-    expect(svg.attributes('class')).toBe('viz-chart');
+    expect(svg.attributes('class')).toBe('oc-chart');
     wrapper.unmount();
   });
 
   it('renders chrome text elements', async () => {
     const wrapper = await mountChart({ spec: lineSpec });
 
-    const title = wrapper.find('.viz-title');
+    const title = wrapper.find('.oc-title');
     expect(title.exists()).toBe(true);
     expect(title.text()).toBe('GDP Growth');
 
-    const subtitle = wrapper.find('.viz-subtitle');
+    const subtitle = wrapper.find('.oc-subtitle');
     expect(subtitle.text()).toBe('US vs UK over time');
 
-    const source = wrapper.find('.viz-source');
+    const source = wrapper.find('.oc-source');
     expect(source.text()).toBe('World Bank');
     wrapper.unmount();
   });
@@ -89,13 +89,13 @@ describe('Chart', () => {
   it('spec changes trigger re-render', async () => {
     const wrapper = await mountChart({ spec: lineSpec });
 
-    const titleBefore = wrapper.find('.viz-title');
+    const titleBefore = wrapper.find('.oc-title');
     expect(titleBefore.text()).toBe('GDP Growth');
 
     await wrapper.setProps({ spec: barSpec });
     await flushPromises();
 
-    const titleAfter = wrapper.find('.viz-title');
+    const titleAfter = wrapper.find('.oc-title');
     expect(titleAfter.text()).toBe('Updated Title');
     wrapper.unmount();
   });

package/src/__tests__/DataTable.test.ts

@@ -79,13 +79,13 @@ describe('DataTable', () => {
   it('spec changes trigger re-render', async () => {
     const wrapper = await mountTable({ spec: tableSpec });
 
-    const titleBefore = wrapper.find('.viz-table-title');
+    const titleBefore = wrapper.find('.oc-table-title');
     expect(titleBefore.text()).toBe('People Table');
 
     await wrapper.setProps({ spec: updatedSpec });
     await flushPromises();
 
-    const titleAfter = wrapper.find('.viz-table-title');
+    const titleAfter = wrapper.find('.oc-table-title');
     expect(titleAfter.text()).toBe('Updated Table');
 
     const headersAfter = wrapper.findAll('thead th');

package/src/__tests__/Graph.test.ts

@@ -72,11 +72,11 @@ describe('Graph', () => {
   it('renders chrome text elements', async () => {
     const wrapper = await mountGraph({ spec: basicSpec });
 
-    const title = wrapper.find('.viz-title');
+    const title = wrapper.find('.oc-title');
     expect(title.exists()).toBe(true);
     expect(title.text()).toBe('Test Graph');
 
-    const subtitle = wrapper.find('.viz-subtitle');
+    const subtitle = wrapper.find('.oc-subtitle');
     expect(subtitle.text()).toBe('A simple test graph');
     wrapper.unmount();
   });
@@ -84,13 +84,13 @@ describe('Graph', () => {
   it('spec changes trigger re-render', async () => {
     const wrapper = await mountGraph({ spec: basicSpec });
 
-    const titleBefore = wrapper.find('.viz-title');
+    const titleBefore = wrapper.find('.oc-title');
     expect(titleBefore.text()).toBe('Test Graph');
 
     await wrapper.setProps({ spec: updatedSpec });
     await flushPromises();
 
-    const titleAfter = wrapper.find('.viz-title');
+    const titleAfter = wrapper.find('.oc-title');
     expect(titleAfter.text()).toBe('Updated Graph');
     wrapper.unmount();
   });