@opendata-ai/openchart-vue 2.0.0

package/dist/index.js

@@ -0,0 +1,715 @@
+// src/Chart.ts
+import { createChart } from "@opendata-ai/openchart-vanilla";
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject as inject2,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch
+} from "vue";
+
+// src/context.ts
+import { computed, inject } from "vue";
+var VizThemeKey = /* @__PURE__ */ Symbol("VizTheme");
+var VizDarkModeKey = /* @__PURE__ */ Symbol("VizDarkMode");
+function useVizTheme() {
+  const theme = inject(VizThemeKey, void 0);
+  return computed(() => theme?.value);
+}
+function useVizDarkMode() {
+  const darkMode = inject(VizDarkModeKey, void 0);
+  return computed(() => darkMode?.value);
+}
+
+// src/Chart.ts
+var Chart = defineComponent({
+  name: "Chart",
+  props: {
+    spec: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    darkMode: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    }
+  },
+  emits: {
+    "mark-click": (_event) => true,
+    "mark-hover": (_event) => true,
+    "mark-leave": () => true,
+    "legend-toggle": (_series, _visible) => true,
+    "annotation-click": (_annotation, _event) => true,
+    "annotation-edit": (_annotation, _updatedOffset) => true,
+    edit: (_edit) => true,
+    "data-point-click": (_data) => true
+  },
+  setup(props, { emit }) {
+    const containerRef = ref(null);
+    let instance = null;
+    let prevSpec = "";
+    const contextTheme = inject2(VizThemeKey, void 0);
+    const contextDarkMode = inject2(VizDarkModeKey, void 0);
+    const vm = getCurrentInstance();
+    const vnodeProps = vm?.vnode.props ?? {};
+    const hasAnnotationEditListener = "onAnnotation-edit" in vnodeProps || "onAnnotationEdit" in vnodeProps;
+    const hasEditListener = "onEdit" in vnodeProps;
+    function resolveTheme() {
+      return props.theme ?? contextTheme?.value;
+    }
+    function resolveDarkMode() {
+      return props.darkMode ?? contextDarkMode?.value;
+    }
+    function mountChart() {
+      const container = containerRef.value;
+      if (!container) return;
+      const options = {
+        theme: resolveTheme(),
+        darkMode: resolveDarkMode(),
+        onDataPointClick: (data) => emit("data-point-click", data),
+        onMarkClick: (event) => emit("mark-click", event),
+        onMarkHover: (event) => emit("mark-hover", event),
+        onMarkLeave: () => emit("mark-leave"),
+        onLegendToggle: (series, visible) => emit("legend-toggle", series, visible),
+        onAnnotationClick: (annotation, event) => emit("annotation-click", annotation, event),
+        // Only include editing callbacks when the parent binds a listener.
+        // Without this gate, every chart gets drag editing wired up.
+        ...hasAnnotationEditListener ? {
+          onAnnotationEdit: (annotation, updatedOffset) => emit("annotation-edit", annotation, updatedOffset)
+        } : {},
+        ...hasEditListener ? { onEdit: (edit) => emit("edit", edit) } : {},
+        responsive: true
+      };
+      instance = createChart(container, props.spec, options);
+      prevSpec = JSON.stringify(props.spec);
+    }
+    function destroyChart() {
+      instance?.destroy();
+      instance = null;
+      prevSpec = "";
+    }
+    onMounted(() => {
+      mountChart();
+    });
+    onUnmounted(() => {
+      destroyChart();
+    });
+    watch(
+      () => JSON.stringify(props.spec),
+      (newVal) => {
+        if (!instance) return;
+        if (newVal !== prevSpec) {
+          prevSpec = newVal;
+          instance.update(props.spec);
+        }
+      }
+    );
+    watch(
+      [
+        () => props.theme,
+        () => props.darkMode,
+        () => contextTheme?.value,
+        () => contextDarkMode?.value
+      ],
+      () => {
+        if (!containerRef.value) return;
+        destroyChart();
+        mountChart();
+      }
+    );
+    const rootClass = () => {
+      const base = "viz-chart-root";
+      return props.class ? `${base} ${props.class}` : base;
+    };
+    return () => h("div", {
+      ref: containerRef,
+      class: rootClass(),
+      style: props.style
+    });
+  }
+});
+
+// src/composables/useChart.ts
+import { createChart as createChart2 } from "@opendata-ai/openchart-vanilla";
+import { onMounted as onMounted2, onUnmounted as onUnmounted2, ref as ref2, shallowRef, watch as watch2 } from "vue";
+function useChart(spec, options) {
+  const containerRef = ref2(null);
+  const chart = shallowRef(null);
+  const layout = shallowRef(null);
+  function mount() {
+    const container = containerRef.value;
+    if (!container) return;
+    const mountOpts = {
+      theme: options?.theme,
+      darkMode: options?.darkMode,
+      onDataPointClick: options?.onDataPointClick,
+      responsive: options?.responsive
+    };
+    const instance = createChart2(container, spec.value, mountOpts);
+    chart.value = instance;
+    layout.value = instance.layout;
+  }
+  function destroy() {
+    chart.value?.destroy();
+    chart.value = null;
+    layout.value = null;
+  }
+  onMounted2(() => {
+    mount();
+  });
+  onUnmounted2(() => {
+    destroy();
+  });
+  watch2(spec, (newSpec) => {
+    const instance = chart.value;
+    if (!instance) return;
+    instance.update(newSpec);
+    layout.value = instance.layout;
+  });
+  return {
+    containerRef,
+    chart,
+    layout
+  };
+}
+
+// src/composables/useDarkMode.ts
+import { onUnmounted as onUnmounted3, ref as ref3, watch as watch3 } from "vue";
+function useDarkMode(mode) {
+  const isDark = ref3(resolveInitial(mode.value));
+  let cleanup = null;
+  function setup(currentMode) {
+    cleanup?.();
+    cleanup = null;
+    if (currentMode !== "auto") {
+      isDark.value = currentMode === "force";
+      return;
+    }
+    if (typeof window === "undefined" || !window.matchMedia) {
+      isDark.value = false;
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    isDark.value = mq.matches;
+    const handler = (e) => {
+      isDark.value = e.matches;
+    };
+    mq.addEventListener("change", handler);
+    cleanup = () => mq.removeEventListener("change", handler);
+  }
+  setup(mode.value);
+  watch3(mode, (newMode) => {
+    setup(newMode);
+  });
+  onUnmounted3(() => {
+    cleanup?.();
+    cleanup = null;
+  });
+  return isDark;
+}
+function resolveInitial(mode) {
+  if (mode === "force") return true;
+  if (mode === "off" || mode === void 0) return false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+
+// src/composables/useGraph.ts
+import { ref as ref4 } from "vue";
+function useGraph() {
+  const graphRef = ref4(null);
+  function search(query) {
+    graphRef.value?.search(query);
+  }
+  function clearSearch() {
+    graphRef.value?.clearSearch();
+  }
+  function zoomToFit() {
+    graphRef.value?.zoomToFit();
+  }
+  function zoomToNode(nodeId) {
+    graphRef.value?.zoomToNode(nodeId);
+  }
+  function selectNode(nodeId) {
+    graphRef.value?.selectNode(nodeId);
+  }
+  function getSelectedNodes() {
+    return graphRef.value?.getSelectedNodes() ?? [];
+  }
+  return {
+    graphRef,
+    search,
+    clearSearch,
+    zoomToFit,
+    zoomToNode,
+    selectNode,
+    getSelectedNodes
+  };
+}
+
+// src/composables/useTable.ts
+import {
+  createTable
+} from "@opendata-ai/openchart-vanilla";
+import { onMounted as onMounted3, onUnmounted as onUnmounted4, ref as ref5, shallowRef as shallowRef2, watch as watch4 } from "vue";
+function useTable(spec, options) {
+  const containerRef = ref5(null);
+  const table = shallowRef2(null);
+  const state = ref5({
+    sort: null,
+    search: "",
+    page: 0
+  });
+  const originalOnStateChange = options?.onStateChange;
+  function handleStateChange(newState) {
+    state.value = newState;
+    originalOnStateChange?.(newState);
+  }
+  function mount() {
+    const container = containerRef.value;
+    if (!container) return;
+    const mountOpts = {
+      ...options,
+      onStateChange: handleStateChange
+    };
+    const instance = createTable(container, spec.value, mountOpts);
+    table.value = instance;
+    state.value = instance.getState();
+  }
+  function destroy() {
+    table.value?.destroy();
+    table.value = null;
+  }
+  onMounted3(() => {
+    mount();
+  });
+  onUnmounted4(() => {
+    destroy();
+  });
+  watch4(spec, (newSpec) => {
+    const instance = table.value;
+    if (!instance) return;
+    instance.update(newSpec);
+    state.value = instance.getState();
+  });
+  return {
+    containerRef,
+    table,
+    state
+  };
+}
+
+// src/composables/useTableState.ts
+import { ref as ref6 } from "vue";
+function useTableState(initialState) {
+  const sort = ref6(initialState?.sort ?? null);
+  const search = ref6(initialState?.search ?? "");
+  const page = ref6(initialState?.page ?? 0);
+  function setSort(newSort) {
+    sort.value = newSort;
+  }
+  function setSearch(query) {
+    search.value = query;
+  }
+  function setPage(newPage) {
+    page.value = newPage;
+  }
+  function resetState() {
+    sort.value = initialState?.sort ?? null;
+    search.value = initialState?.search ?? "";
+    page.value = initialState?.page ?? 0;
+  }
+  return {
+    sort,
+    setSort,
+    search,
+    setSearch,
+    page,
+    setPage,
+    resetState
+  };
+}
+
+// src/DataTable.ts
+import {
+  createTable as createTable2
+} from "@opendata-ai/openchart-vanilla";
+import {
+  defineComponent as defineComponent2,
+  h as h2,
+  inject as inject3,
+  onMounted as onMounted4,
+  onUnmounted as onUnmounted5,
+  ref as ref7,
+  watch as watch5
+} from "vue";
+var DataTable = defineComponent2({
+  name: "DataTable",
+  props: {
+    spec: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    darkMode: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    sort: {
+      type: [Object, null],
+      default: void 0
+    },
+    search: {
+      type: String,
+      default: void 0
+    },
+    page: {
+      type: Number,
+      default: void 0
+    }
+  },
+  emits: {
+    "row-click": (_row) => true,
+    "update:sort": (_sort) => true,
+    "update:search": (_query) => true,
+    "update:page": (_page) => true
+  },
+  setup(props, { emit }) {
+    const containerRef = ref7(null);
+    let instance = null;
+    const contextTheme = inject3(VizThemeKey, void 0);
+    const contextDarkMode = inject3(VizDarkModeKey, void 0);
+    function resolveTheme() {
+      return props.theme ?? contextTheme?.value;
+    }
+    function resolveDarkMode() {
+      return props.darkMode ?? contextDarkMode?.value;
+    }
+    function isControlled() {
+      return props.sort !== void 0 || props.search !== void 0 || props.page !== void 0;
+    }
+    let prevSpec = "";
+    function mountTable() {
+      const container = containerRef.value;
+      if (!container) return;
+      const mountOptions = {
+        theme: resolveTheme(),
+        darkMode: resolveDarkMode(),
+        onRowClick: (row) => emit("row-click", row),
+        responsive: true,
+        onStateChange: (state) => {
+          if (state.sort !== void 0) emit("update:sort", state.sort);
+          if (state.search !== void 0) emit("update:search", state.search);
+          if (state.page !== void 0) emit("update:page", state.page);
+        }
+      };
+      if (isControlled()) {
+        mountOptions.externalState = {
+          sort: props.sort ?? null,
+          search: props.search ?? "",
+          page: props.page ?? 0
+        };
+      }
+      instance = createTable2(container, props.spec, mountOptions);
+      prevSpec = JSON.stringify(props.spec);
+    }
+    function destroyTable() {
+      instance?.destroy();
+      instance = null;
+      prevSpec = "";
+    }
+    onMounted4(() => {
+      mountTable();
+    });
+    onUnmounted5(() => {
+      destroyTable();
+    });
+    watch5(
+      () => JSON.stringify(props.spec),
+      (newVal) => {
+        if (!instance) return;
+        if (newVal !== prevSpec) {
+          prevSpec = newVal;
+          instance.update(props.spec);
+        }
+      }
+    );
+    watch5(
+      [
+        () => props.theme,
+        () => props.darkMode,
+        () => contextTheme?.value,
+        () => contextDarkMode?.value
+      ],
+      () => {
+        if (!containerRef.value) return;
+        destroyTable();
+        mountTable();
+      }
+    );
+    watch5([() => props.sort, () => props.search, () => props.page], () => {
+      if (!instance || !isControlled()) return;
+      instance.setState({
+        sort: props.sort ?? null,
+        search: props.search ?? "",
+        page: props.page ?? 0
+      });
+    });
+    const rootClass = () => {
+      const base = "viz-table-root";
+      return props.class ? `${base} ${props.class}` : base;
+    };
+    return () => h2("div", {
+      ref: containerRef,
+      class: rootClass(),
+      style: props.style
+    });
+  }
+});
+
+// src/Graph.ts
+import {
+  createGraph
+} from "@opendata-ai/openchart-vanilla";
+import {
+  defineComponent as defineComponent3,
+  h as h3,
+  inject as inject4,
+  onMounted as onMounted5,
+  onUnmounted as onUnmounted6,
+  ref as ref8,
+  watch as watch6
+} from "vue";
+var Graph = defineComponent3({
+  name: "Graph",
+  props: {
+    spec: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    darkMode: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    }
+  },
+  emits: {
+    "node-click": (_node) => true,
+    "node-double-click": (_node) => true,
+    "selection-change": (_nodeIds) => true
+  },
+  setup(props, { emit, expose }) {
+    const containerRef = ref8(null);
+    let instance = null;
+    let prevSpec = "";
+    const contextTheme = inject4(VizThemeKey, void 0);
+    const contextDarkMode = inject4(VizDarkModeKey, void 0);
+    function resolveTheme() {
+      return props.theme ?? contextTheme?.value;
+    }
+    function resolveDarkMode() {
+      return props.darkMode ?? contextDarkMode?.value;
+    }
+    function mountGraph() {
+      const container = containerRef.value;
+      if (!container) return;
+      const options = {
+        theme: resolveTheme(),
+        darkMode: resolveDarkMode(),
+        onNodeClick: (node) => emit("node-click", node),
+        onNodeDoubleClick: (node) => emit("node-double-click", node),
+        onSelectionChange: (nodeIds) => 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({
+      search(query) {
+        instance?.search(query);
+      },
+      clearSearch() {
+        instance?.clearSearch();
+      },
+      zoomToFit() {
+        instance?.zoomToFit();
+      },
+      zoomToNode(nodeId) {
+        instance?.zoomToNode(nodeId);
+      },
+      selectNode(nodeId) {
+        instance?.selectNode(nodeId);
+      },
+      getSelectedNodes() {
+        return instance?.getSelectedNodes() ?? [];
+      },
+      get instance() {
+        return instance;
+      }
+    });
+    onMounted5(() => {
+      mountGraph();
+    });
+    onUnmounted6(() => {
+      destroyGraph();
+    });
+    watch6(
+      () => JSON.stringify(props.spec),
+      (newVal) => {
+        if (!instance) return;
+        if (newVal !== prevSpec) {
+          prevSpec = newVal;
+          instance.update(props.spec);
+        }
+      }
+    );
+    watch6(
+      [
+        () => props.theme,
+        () => props.darkMode,
+        () => contextTheme?.value,
+        () => contextDarkMode?.value
+      ],
+      () => {
+        if (!containerRef.value) return;
+        destroyGraph();
+        mountGraph();
+      }
+    );
+    const rootClass = () => {
+      const base = "viz-graph-root";
+      return props.class ? `${base} ${props.class}` : base;
+    };
+    return () => h3("div", {
+      ref: containerRef,
+      class: rootClass(),
+      style: props.style
+    });
+  }
+});
+
+// src/ThemeProvider.ts
+import { computed as computed2, defineComponent as defineComponent4, provide } from "vue";
+var VizThemeProvider = defineComponent4({
+  name: "VizThemeProvider",
+  props: {
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    darkMode: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const themeRef = computed2(() => props.theme);
+    const darkModeRef = computed2(() => props.darkMode);
+    provide(VizThemeKey, themeRef);
+    provide(VizDarkModeKey, darkModeRef);
+    return () => slots.default?.();
+  }
+});
+
+// src/Visualization.ts
+import { isGraphSpec, isTableSpec } from "@opendata-ai/openchart-core";
+import { defineComponent as defineComponent5, h as h4 } from "vue";
+var Visualization = defineComponent5({
+  name: "Visualization",
+  props: {
+    spec: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    darkMode: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    }
+  },
+  setup(props) {
+    return () => {
+      const { spec, theme, darkMode, class: className, style } = props;
+      const sharedProps = { theme, darkMode, class: className, style };
+      if (isTableSpec(spec)) {
+        return h4(DataTable, { ...sharedProps, spec });
+      }
+      if (isGraphSpec(spec)) {
+        return h4(Graph, { ...sharedProps, spec });
+      }
+      return h4(Chart, { ...sharedProps, spec });
+    };
+  }
+});
+export {
+  Chart,
+  DataTable,
+  Graph,
+  Visualization,
+  VizDarkModeKey,
+  VizThemeKey,
+  VizThemeProvider,
+  useChart,
+  useDarkMode,
+  useGraph,
+  useTable,
+  useTableState,
+  useVizDarkMode,
+  useVizTheme
+};
+//# sourceMappingURL=index.js.map