@opendata-ai/openchart-vue 8.0.0-rc.2 → 8.0.0-rc.21

package/src/Graph.ts

@@ -1,179 +0,0 @@
-/**
- * Vue Graph component: thin wrapper around the vanilla adapter.
- *
- * Mounts a graph instance on render, updates when spec changes,
- * and cleans up on unmount. All heavy lifting is done by the vanilla
- * createGraph() function.
- *
- * Exposes imperative methods via defineExpose for use with useGraph().
- */
-
-import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
-import {
-  createGraph,
-  type GraphInstance,
-  type GraphMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import {
-  type CSSProperties,
-  defineComponent,
-  h,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  watch,
-} from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface GraphProps {
-  spec: GraphSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string | CSSProperties;
-}
-
-export const Graph = defineComponent({
-  name: 'Graph',
-  props: {
-    spec: {
-      type: Object as PropType<GraphSpec>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<ThemeConfig>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    style: {
-      type: [String, Object] as PropType<string | CSSProperties>,
-      default: undefined,
-    },
-  },
-  emits: {
-    'node-click': (_node: Record<string, unknown>) => true,
-    'node-double-click': (_node: Record<string, unknown>) => true,
-    'selection-change': (_nodeIds: string[]) => true,
-  },
-  setup(props, { emit, expose }) {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    let instance: GraphInstance | null = null;
-    let prevSpec = '';
-
-    // Inject theme/darkMode from provider as fallbacks
-    const contextTheme = inject(VizThemeKey, undefined);
-    const contextDarkMode = inject(VizDarkModeKey, undefined);
-
-    function resolveTheme(): ThemeConfig | undefined {
-      return props.theme ?? contextTheme?.value;
-    }
-
-    function resolveDarkMode(): DarkMode | undefined {
-      return props.darkMode ?? contextDarkMode?.value;
-    }
-
-    function mountGraph() {
-      const container = containerRef.value;
-      if (!container) return;
-
-      const options: GraphMountOptions = {
-        theme: resolveTheme(),
-        darkMode: resolveDarkMode(),
-        onNodeClick: (node: Record<string, unknown>) => emit('node-click', node),
-        onNodeDoubleClick: (node: Record<string, unknown>) => emit('node-double-click', node),
-        onSelectionChange: (nodeIds: string[]) => emit('selection-change', nodeIds),
-        responsive: true,
-      };
-
-      instance = createGraph(container, props.spec, options);
-      prevSpec = JSON.stringify(props.spec);
-    }
-
-    function destroyGraph() {
-      instance?.destroy();
-      instance = null;
-      prevSpec = '';
-    }
-
-    // Expose imperative methods for useGraph() composable
-    expose({
-      search(query: string) {
-        instance?.search(query);
-      },
-      clearSearch() {
-        instance?.clearSearch();
-      },
-      zoomToFit() {
-        instance?.zoomToFit();
-      },
-      zoomToNode(nodeId: string) {
-        instance?.zoomToNode(nodeId);
-      },
-      selectNode(nodeId: string) {
-        instance?.selectNode(nodeId);
-      },
-      getSelectedNodes(): string[] {
-        return instance?.getSelectedNodes() ?? [];
-      },
-      get instance() {
-        return instance;
-      },
-    });
-
-    onMounted(() => {
-      mountGraph();
-    });
-
-    onUnmounted(() => {
-      destroyGraph();
-    });
-
-    // Watch spec changes
-    watch(
-      () => JSON.stringify(props.spec),
-      (newVal) => {
-        if (!instance) return;
-        if (newVal !== prevSpec) {
-          prevSpec = newVal;
-          instance.update(props.spec);
-        }
-      },
-    );
-
-    // Recreate graph when theme or darkMode change
-    watch(
-      [
-        () => props.theme,
-        () => props.darkMode,
-        () => contextTheme?.value,
-        () => contextDarkMode?.value,
-      ],
-      () => {
-        if (!containerRef.value) return;
-        destroyGraph();
-        mountGraph();
-      },
-    );
-
-    const rootClass = () => {
-      const base = 'oc-graph-root';
-      return props.class ? `${base} ${props.class}` : base;
-    };
-
-    return () =>
-      h('div', {
-        ref: containerRef,
-        class: rootClass(),
-        style: props.style,
-      });
-  },
-});

package/src/Map.ts

@@ -1,160 +0,0 @@
-/**
- * Vue Map component: thin wrapper around the vanilla adapter.
- *
- * Mounts a map instance on render, updates when spec changes,
- * and cleans up on unmount. All heavy lifting is done by the vanilla
- * createMap() function.
- */
-
-import type { DarkMode, MapSpec, ThemeConfig } from '@opendata-ai/openchart-core';
-
-type MapFeatureEvent = {
-  id: string | number;
-  name?: string;
-  data: Record<string, unknown> | null;
-};
-
-import { createMap, type MapInstance, type MapMountOptions } from '@opendata-ai/openchart-vanilla';
-import {
-  type CSSProperties,
-  defineComponent,
-  h,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  watch,
-} from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface MapProps {
-  spec: MapSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string | CSSProperties;
-}
-
-export const GeoMap = defineComponent({
-  name: 'GeoMap',
-  props: {
-    spec: {
-      type: Object as PropType<MapSpec>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<ThemeConfig>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    style: {
-      type: [String, Object] as PropType<string | CSSProperties>,
-      default: undefined,
-    },
-  },
-  emits: {
-    'mark-click': (_event: MapFeatureEvent) => true,
-    'mark-hover': (_event: MapFeatureEvent | null) => true,
-  },
-  setup(props, { emit, expose }) {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    let instance: MapInstance | null = null;
-    let prevSpec = '';
-
-    // Inject theme/darkMode from provider as fallbacks
-    const contextTheme = inject(VizThemeKey, undefined);
-    const contextDarkMode = inject(VizDarkModeKey, undefined);
-
-    function resolveTheme(): ThemeConfig | undefined {
-      return props.theme ?? contextTheme?.value;
-    }
-
-    function resolveDarkMode(): DarkMode | undefined {
-      return props.darkMode ?? contextDarkMode?.value;
-    }
-
-    function mountMap() {
-      const container = containerRef.value;
-      if (!container) return;
-
-      const options: MapMountOptions = {
-        theme: resolveTheme(),
-        darkMode: resolveDarkMode(),
-        onMarkClick: (feature) => emit('mark-click', feature),
-        onMarkHover: (feature) => emit('mark-hover', feature),
-        responsive: true,
-      };
-
-      instance = createMap(container, props.spec, options);
-      prevSpec = JSON.stringify(props.spec);
-    }
-
-    function destroyMap() {
-      instance?.destroy();
-      instance = null;
-      prevSpec = '';
-    }
-
-    // Expose imperative access to the instance
-    expose({
-      get instance() {
-        return instance;
-      },
-    });
-
-    onMounted(() => {
-      mountMap();
-    });
-
-    onUnmounted(() => {
-      destroyMap();
-    });
-
-    // Watch spec changes
-    watch(
-      () => JSON.stringify(props.spec),
-      (newVal) => {
-        if (!instance) return;
-        if (newVal !== prevSpec) {
-          prevSpec = newVal;
-          instance.update(props.spec);
-        }
-      },
-    );
-
-    // Recreate map when theme or darkMode change
-    watch(
-      [
-        () => props.theme,
-        () => props.darkMode,
-        () => contextTheme?.value,
-        () => contextDarkMode?.value,
-      ],
-      () => {
-        if (!containerRef.value) return;
-        destroyMap();
-        mountMap();
-      },
-    );
-
-    const rootClass = () => {
-      const base = 'oc-map-root';
-      return props.class ? `${base} ${props.class}` : base;
-    };
-
-    return () =>
-      h('div', {
-        ref: containerRef,
-        class: rootClass(),
-        style: props.style,
-      });
-  },
-});

package/src/Sankey.ts

@@ -1,161 +0,0 @@
-/**
- * Vue Sankey component: thin wrapper around the vanilla adapter.
- *
- * Mounts a sankey instance on render, updates when spec changes,
- * and cleans up on unmount. All heavy lifting is done by the vanilla
- * createSankey() function.
- */
-
-import type { DarkMode, SankeySpec, ThemeConfig } from '@opendata-ai/openchart-core';
-import {
-  createSankey,
-  type SankeyInstance,
-  type SankeyMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import {
-  type CSSProperties,
-  defineComponent,
-  h,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  watch,
-} from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface SankeyProps {
-  spec: SankeySpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string | CSSProperties;
-}
-
-export const Sankey = defineComponent({
-  name: 'Sankey',
-  props: {
-    spec: {
-      type: Object as PropType<SankeySpec>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<ThemeConfig>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    style: {
-      type: [String, Object] as PropType<string | CSSProperties>,
-      default: undefined,
-    },
-  },
-  emits: {
-    'node-click': (_node: Record<string, unknown>) => true,
-    'link-click': (_link: Record<string, unknown>) => true,
-    'node-hover': (_node: Record<string, unknown> | null) => true,
-    'link-hover': (_link: Record<string, unknown> | null) => true,
-  },
-  setup(props, { emit, expose }) {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    let instance: SankeyInstance | null = null;
-    let prevSpec = '';
-
-    // Inject theme/darkMode from provider as fallbacks
-    const contextTheme = inject(VizThemeKey, undefined);
-    const contextDarkMode = inject(VizDarkModeKey, undefined);
-
-    function resolveTheme(): ThemeConfig | undefined {
-      return props.theme ?? contextTheme?.value;
-    }
-
-    function resolveDarkMode(): DarkMode | undefined {
-      return props.darkMode ?? contextDarkMode?.value;
-    }
-
-    function mountSankey() {
-      const container = containerRef.value;
-      if (!container) return;
-
-      const options: SankeyMountOptions = {
-        theme: resolveTheme(),
-        darkMode: resolveDarkMode(),
-        onNodeClick: (node: Record<string, unknown>) => emit('node-click', node),
-        onLinkClick: (link: Record<string, unknown>) => emit('link-click', link),
-        onNodeHover: (node: Record<string, unknown> | null) => emit('node-hover', node),
-        onLinkHover: (link: Record<string, unknown> | null) => emit('link-hover', link),
-        responsive: true,
-      };
-
-      instance = createSankey(container, props.spec, options);
-      prevSpec = JSON.stringify(props.spec);
-    }
-
-    function destroySankey() {
-      instance?.destroy();
-      instance = null;
-      prevSpec = '';
-    }
-
-    // Expose imperative access to the instance
-    expose({
-      get instance() {
-        return instance;
-      },
-    });
-
-    onMounted(() => {
-      mountSankey();
-    });
-
-    onUnmounted(() => {
-      destroySankey();
-    });
-
-    // Watch spec changes
-    watch(
-      () => JSON.stringify(props.spec),
-      (newVal) => {
-        if (!instance) return;
-        if (newVal !== prevSpec) {
-          prevSpec = newVal;
-          instance.update(props.spec);
-        }
-      },
-    );
-
-    // Recreate sankey when theme or darkMode change
-    watch(
-      [
-        () => props.theme,
-        () => props.darkMode,
-        () => contextTheme?.value,
-        () => contextDarkMode?.value,
-      ],
-      () => {
-        if (!containerRef.value) return;
-        destroySankey();
-        mountSankey();
-      },
-    );
-
-    const rootClass = () => {
-      const base = 'oc-sankey-root';
-      return props.class ? `${base} ${props.class}` : base;
-    };
-
-    return () =>
-      h('div', {
-        ref: containerRef,
-        class: rootClass(),
-        style: props.style,
-      });
-  },
-});

package/src/ThemeProvider.ts

@@ -1,41 +0,0 @@
-/**
- * VizThemeProvider: provides a theme and dark mode preference to all
- * descendant Chart, DataTable, and Graph components without prop drilling.
- *
- * Components use the context values as fallbacks when no explicit
- * `theme` or `darkMode` prop is passed.
- */
-
-import type { DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
-import { computed, defineComponent, type PropType, provide } from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface VizThemeProviderProps {
-  theme: ThemeConfig | undefined;
-  darkMode?: DarkMode;
-}
-
-export const VizThemeProvider = defineComponent({
-  name: 'VizThemeProvider',
-  props: {
-    theme: {
-      type: Object as PropType<ThemeConfig | undefined>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-  },
-  setup(props, { slots }) {
-    // Wrap in computed() so changes to props propagate reactively
-    // through the injection system.
-    const themeRef = computed(() => props.theme);
-    const darkModeRef = computed(() => props.darkMode);
-
-    provide(VizThemeKey, themeRef);
-    provide(VizDarkModeKey, darkModeRef);
-
-    return () => slots.default?.();
-  },
-});

package/src/TileMap.ts

@@ -1,164 +0,0 @@
-/**
- * Vue TileMap component: thin wrapper around the vanilla adapter.
- *
- * Mounts a tilemap instance on render, updates when spec changes,
- * and cleans up on unmount. All heavy lifting is done by the vanilla
- * createTileMap() function.
- */
-
-import type { DarkMode, ThemeConfig, TileMapSpec } from '@opendata-ai/openchart-core';
-import {
-  createTileMap,
-  type TileMapInstance,
-  type TileMapMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import {
-  type CSSProperties,
-  defineComponent,
-  h,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  watch,
-} from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface TileMapTileEvent {
-  stateCode: string;
-  stateName: string;
-  value: number | null;
-  data: Record<string, unknown>;
-}
-
-export interface TileMapProps {
-  spec: TileMapSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string | CSSProperties;
-}
-
-export const TileMap = defineComponent({
-  name: 'TileMap',
-  props: {
-    spec: {
-      type: Object as PropType<TileMapSpec>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<ThemeConfig>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    style: {
-      type: [String, Object] as PropType<string | CSSProperties>,
-      default: undefined,
-    },
-  },
-  emits: {
-    'tile-click': (_tile: TileMapTileEvent) => true,
-    'tile-hover': (_tile: TileMapTileEvent | null) => true,
-  },
-  setup(props, { emit, expose }) {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    let instance: TileMapInstance | null = null;
-    let prevSpec = '';
-
-    // Inject theme/darkMode from provider as fallbacks
-    const contextTheme = inject(VizThemeKey, undefined);
-    const contextDarkMode = inject(VizDarkModeKey, undefined);
-
-    function resolveTheme(): ThemeConfig | undefined {
-      return props.theme ?? contextTheme?.value;
-    }
-
-    function resolveDarkMode(): DarkMode | undefined {
-      return props.darkMode ?? contextDarkMode?.value;
-    }
-
-    function mountTileMap() {
-      const container = containerRef.value;
-      if (!container) return;
-
-      const options: TileMapMountOptions = {
-        theme: resolveTheme(),
-        darkMode: resolveDarkMode(),
-        onTileClick: (tile: TileMapTileEvent) => emit('tile-click', tile),
-        onTileHover: (tile: TileMapTileEvent | null) => emit('tile-hover', tile),
-        responsive: true,
-      };
-
-      instance = createTileMap(container, props.spec, options);
-      prevSpec = JSON.stringify(props.spec);
-    }
-
-    function destroyTileMap() {
-      instance?.destroy();
-      instance = null;
-      prevSpec = '';
-    }
-
-    // Expose imperative access to the instance
-    expose({
-      get instance() {
-        return instance;
-      },
-    });
-
-    onMounted(() => {
-      mountTileMap();
-    });
-
-    onUnmounted(() => {
-      destroyTileMap();
-    });
-
-    // Watch spec changes
-    watch(
-      () => JSON.stringify(props.spec),
-      (newVal) => {
-        if (!instance) return;
-        if (newVal !== prevSpec) {
-          prevSpec = newVal;
-          instance.update(props.spec);
-        }
-      },
-    );
-
-    // Recreate tilemap when theme or darkMode change
-    watch(
-      [
-        () => props.theme,
-        () => props.darkMode,
-        () => contextTheme?.value,
-        () => contextDarkMode?.value,
-      ],
-      () => {
-        if (!containerRef.value) return;
-        destroyTileMap();
-        mountTileMap();
-      },
-    );
-
-    const rootClass = () => {
-      const base = 'oc-tilemap-root';
-      return props.class ? `${base} ${props.class}` : base;
-    };
-
-    return () =>
-      h('div', {
-        ref: containerRef,
-        class: rootClass(),
-        style: props.style,
-      });
-  },
-});