@opendata-ai/openchart-vue 6.27.0 → 6.28.2

package/dist/index.js

@@ -4,6 +4,7 @@ import { exportCSV, exportJPG, exportPNG, exportSVG } from "@opendata-ai/opencha
 import {
   clearRenderers,
   compile,
+  compileBarList,
   compileChart,
   compileGraph,
   compileSankey,
@@ -14,11 +15,12 @@ import {
   validateSpec
 } from "@opendata-ai/openchart-engine";
 
-// src/Chart.ts
-import { createChart } from "@opendata-ai/openchart-vanilla";
+// src/BarList.ts
+import {
+  createBarList
+} from "@opendata-ai/openchart-vanilla";
 import {
   defineComponent,
-  getCurrentInstance,
   h,
   inject as inject2,
   onMounted,
@@ -40,8 +42,124 @@ function useVizDarkMode() {
   return computed(() => darkMode?.value);
 }
 
+// src/BarList.ts
+var BarList = defineComponent({
+  name: "BarList",
+  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: {
+    "row-click": (_row) => true,
+    "row-hover": (_row) => true
+  },
+  setup(props, { emit, expose }) {
+    const containerRef = ref(null);
+    let instance = null;
+    let prevSpec = "";
+    const contextTheme = inject2(VizThemeKey, void 0);
+    const contextDarkMode = inject2(VizDarkModeKey, void 0);
+    function resolveTheme() {
+      return props.theme ?? contextTheme?.value;
+    }
+    function resolveDarkMode() {
+      return props.darkMode ?? contextDarkMode?.value;
+    }
+    function mountBarList() {
+      const container = containerRef.value;
+      if (!container) return;
+      const options = {
+        theme: resolveTheme(),
+        darkMode: resolveDarkMode(),
+        onRowClick: (row) => emit("row-click", row),
+        onRowHover: (row) => emit("row-hover", row),
+        responsive: true
+      };
+      instance = createBarList(container, props.spec, options);
+      prevSpec = JSON.stringify(props.spec);
+    }
+    function destroyBarList() {
+      instance?.destroy();
+      instance = null;
+      prevSpec = "";
+    }
+    expose({
+      get instance() {
+        return instance;
+      }
+    });
+    onMounted(() => {
+      mountBarList();
+    });
+    onUnmounted(() => {
+      destroyBarList();
+    });
+    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;
+        destroyBarList();
+        mountBarList();
+      }
+    );
+    const rootClass = () => {
+      const base = "oc-barlist-root";
+      return props.class ? `${base} ${props.class}` : base;
+    };
+    return () => h("div", {
+      ref: containerRef,
+      class: rootClass(),
+      style: props.style
+    });
+  }
+});
+
 // src/Chart.ts
-var Chart = defineComponent({
+import { createChart } from "@opendata-ai/openchart-vanilla";
+import {
+  defineComponent as defineComponent2,
+  getCurrentInstance,
+  h as h2,
+  inject as inject3,
+  onMounted as onMounted2,
+  onUnmounted as onUnmounted2,
+  ref as ref2,
+  watch as watch2
+} from "vue";
+var Chart = defineComponent2({
   name: "Chart",
   props: {
     spec: {
@@ -83,11 +201,11 @@ var Chart = defineComponent({
     "data-point-click": (_data) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref(null);
+    const containerRef = ref2(null);
     let instance = null;
     let prevSpec = "";
-    const contextTheme = inject2(VizThemeKey, void 0);
-    const contextDarkMode = inject2(VizDarkModeKey, void 0);
+    const contextTheme = inject3(VizThemeKey, void 0);
+    const contextDarkMode = inject3(VizDarkModeKey, void 0);
     const vm = getCurrentInstance();
     const vnodeProps = vm?.vnode.props ?? {};
     const hasAnnotationEditListener = "onAnnotation-edit" in vnodeProps || "onAnnotationEdit" in vnodeProps;
@@ -149,13 +267,13 @@ var Chart = defineComponent({
         return instance;
       }
     });
-    onMounted(() => {
+    onMounted2(() => {
       mountChart();
     });
-    onUnmounted(() => {
+    onUnmounted2(() => {
       destroyChart();
     });
-    watch(
+    watch2(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -165,7 +283,7 @@ var Chart = defineComponent({
         }
       }
     );
-    watch(
+    watch2(
       () => props.selectedElement,
       (newVal) => {
         if (!instance) return;
@@ -176,7 +294,7 @@ var Chart = defineComponent({
         }
       }
     );
-    watch(
+    watch2(
       [
         () => props.theme,
         () => props.darkMode,
@@ -193,7 +311,7 @@ var Chart = defineComponent({
       const base = "oc-chart-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h("div", {
+    return () => h2("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -203,9 +321,9 @@ var Chart = defineComponent({
 
 // 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";
+import { onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref3, shallowRef, watch as watch3 } from "vue";
 function useChart(spec, options) {
-  const containerRef = ref2(null);
+  const containerRef = ref3(null);
   const chart = shallowRef(null);
   const layout = shallowRef(null);
   function mount() {
@@ -226,13 +344,13 @@ function useChart(spec, options) {
     chart.value = null;
     layout.value = null;
   }
-  onMounted2(() => {
+  onMounted3(() => {
     mount();
   });
-  onUnmounted2(() => {
+  onUnmounted3(() => {
     destroy();
   });
-  watch2(spec, (newSpec) => {
+  watch3(spec, (newSpec) => {
     const instance = chart.value;
     if (!instance) return;
     instance.update(newSpec);
@@ -246,9 +364,9 @@ function useChart(spec, options) {
 }
 
 // src/composables/useDarkMode.ts
-import { onUnmounted as onUnmounted3, ref as ref3, watch as watch3 } from "vue";
+import { onUnmounted as onUnmounted4, ref as ref4, watch as watch4 } from "vue";
 function useDarkMode(mode) {
-  const isDark = ref3(resolveInitial(mode.value));
+  const isDark = ref4(resolveInitial(mode.value));
   let cleanup = null;
   function setup(currentMode) {
     cleanup?.();
@@ -270,10 +388,10 @@ function useDarkMode(mode) {
     cleanup = () => mq.removeEventListener("change", handler);
   }
   setup(mode.value);
-  watch3(mode, (newMode) => {
+  watch4(mode, (newMode) => {
     setup(newMode);
   });
-  onUnmounted3(() => {
+  onUnmounted4(() => {
     cleanup?.();
     cleanup = null;
   });
@@ -289,9 +407,9 @@ function resolveInitial(mode) {
 }
 
 // src/composables/useGraph.ts
-import { ref as ref4 } from "vue";
+import { ref as ref5 } from "vue";
 function useGraph() {
-  const graphRef = ref4(null);
+  const graphRef = ref5(null);
   function search(query) {
     graphRef.value?.search(query);
   }
@@ -325,11 +443,11 @@ function useGraph() {
 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";
+import { onMounted as onMounted4, onUnmounted as onUnmounted5, ref as ref6, shallowRef as shallowRef2, watch as watch5 } from "vue";
 function useTable(spec, options) {
-  const containerRef = ref5(null);
+  const containerRef = ref6(null);
   const table = shallowRef2(null);
-  const state = ref5({
+  const state = ref6({
     sort: null,
     search: "",
     page: 0
@@ -354,13 +472,13 @@ function useTable(spec, options) {
     table.value?.destroy();
     table.value = null;
   }
-  onMounted3(() => {
+  onMounted4(() => {
     mount();
   });
-  onUnmounted4(() => {
+  onUnmounted5(() => {
     destroy();
   });
-  watch4(spec, (newSpec) => {
+  watch5(spec, (newSpec) => {
     const instance = table.value;
     if (!instance) return;
     instance.update(newSpec);
@@ -374,11 +492,11 @@ function useTable(spec, options) {
 }
 
 // src/composables/useTableState.ts
-import { ref as ref6 } from "vue";
+import { ref as ref7 } from "vue";
 function useTableState(initialState) {
-  const sort = ref6(initialState?.sort ?? null);
-  const search = ref6(initialState?.search ?? "");
-  const page = ref6(initialState?.page ?? 0);
+  const sort = ref7(initialState?.sort ?? null);
+  const search = ref7(initialState?.search ?? "");
+  const page = ref7(initialState?.page ?? 0);
   function setSort(newSort) {
     sort.value = newSort;
   }
@@ -409,15 +527,15 @@ 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
+  defineComponent as defineComponent3,
+  h as h3,
+  inject as inject4,
+  onMounted as onMounted5,
+  onUnmounted as onUnmounted6,
+  ref as ref8,
+  watch as watch6
 } from "vue";
-var DataTable = defineComponent2({
+var DataTable = defineComponent3({
   name: "DataTable",
   props: {
     spec: {
@@ -460,10 +578,10 @@ var DataTable = defineComponent2({
     "update:page": (_page) => true
   },
   setup(props, { emit }) {
-    const containerRef = ref7(null);
+    const containerRef = ref8(null);
     let instance = null;
-    const contextTheme = inject3(VizThemeKey, void 0);
-    const contextDarkMode = inject3(VizDarkModeKey, void 0);
+    const contextTheme = inject4(VizThemeKey, void 0);
+    const contextDarkMode = inject4(VizDarkModeKey, void 0);
     function resolveTheme() {
       return props.theme ?? contextTheme?.value;
     }
@@ -503,13 +621,13 @@ var DataTable = defineComponent2({
       instance = null;
       prevSpec = "";
     }
-    onMounted4(() => {
+    onMounted5(() => {
       mountTable();
     });
-    onUnmounted5(() => {
+    onUnmounted6(() => {
       destroyTable();
     });
-    watch5(
+    watch6(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -519,7 +637,7 @@ var DataTable = defineComponent2({
         }
       }
     );
-    watch5(
+    watch6(
       [
         () => props.theme,
         () => props.darkMode,
@@ -532,7 +650,7 @@ var DataTable = defineComponent2({
         mountTable();
       }
     );
-    watch5([() => props.sort, () => props.search, () => props.page], () => {
+    watch6([() => props.sort, () => props.search, () => props.page], () => {
       if (!instance || !isControlled()) return;
       instance.setState({
         sort: props.sort ?? null,
@@ -544,7 +662,7 @@ var DataTable = defineComponent2({
       const base = "oc-table-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h2("div", {
+    return () => h3("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -557,15 +675,15 @@ 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
+  defineComponent as defineComponent4,
+  h as h4,
+  inject as inject5,
+  onMounted as onMounted6,
+  onUnmounted as onUnmounted7,
+  ref as ref9,
+  watch as watch7
 } from "vue";
-var Graph = defineComponent3({
+var Graph = defineComponent4({
   name: "Graph",
   props: {
     spec: {
@@ -595,11 +713,11 @@ var Graph = defineComponent3({
     "selection-change": (_nodeIds) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref8(null);
+    const containerRef = ref9(null);
     let instance = null;
     let prevSpec = "";
-    const contextTheme = inject4(VizThemeKey, void 0);
-    const contextDarkMode = inject4(VizDarkModeKey, void 0);
+    const contextTheme = inject5(VizThemeKey, void 0);
+    const contextDarkMode = inject5(VizDarkModeKey, void 0);
     function resolveTheme() {
       return props.theme ?? contextTheme?.value;
     }
@@ -648,13 +766,13 @@ var Graph = defineComponent3({
         return instance;
       }
     });
-    onMounted5(() => {
+    onMounted6(() => {
       mountGraph();
     });
-    onUnmounted6(() => {
+    onUnmounted7(() => {
       destroyGraph();
     });
-    watch6(
+    watch7(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -664,7 +782,7 @@ var Graph = defineComponent3({
         }
       }
     );
-    watch6(
+    watch7(
       [
         () => props.theme,
         () => props.darkMode,
@@ -681,7 +799,7 @@ var Graph = defineComponent3({
       const base = "oc-graph-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h3("div", {
+    return () => h4("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -694,15 +812,15 @@ import {
   createSankey
 } from "@opendata-ai/openchart-vanilla";
 import {
-  defineComponent as defineComponent4,
-  h as h4,
-  inject as inject5,
-  onMounted as onMounted6,
-  onUnmounted as onUnmounted7,
-  ref as ref9,
-  watch as watch7
+  defineComponent as defineComponent5,
+  h as h5,
+  inject as inject6,
+  onMounted as onMounted7,
+  onUnmounted as onUnmounted8,
+  ref as ref10,
+  watch as watch8
 } from "vue";
-var Sankey = defineComponent4({
+var Sankey = defineComponent5({
   name: "Sankey",
   props: {
     spec: {
@@ -733,11 +851,11 @@ var Sankey = defineComponent4({
     "link-hover": (_link) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref9(null);
+    const containerRef = ref10(null);
     let instance = null;
     let prevSpec = "";
-    const contextTheme = inject5(VizThemeKey, void 0);
-    const contextDarkMode = inject5(VizDarkModeKey, void 0);
+    const contextTheme = inject6(VizThemeKey, void 0);
+    const contextDarkMode = inject6(VizDarkModeKey, void 0);
     function resolveTheme() {
       return props.theme ?? contextTheme?.value;
     }
@@ -769,13 +887,13 @@ var Sankey = defineComponent4({
         return instance;
       }
     });
-    onMounted6(() => {
+    onMounted7(() => {
       mountSankey();
     });
-    onUnmounted7(() => {
+    onUnmounted8(() => {
       destroySankey();
     });
-    watch7(
+    watch8(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -785,7 +903,7 @@ var Sankey = defineComponent4({
         }
       }
     );
-    watch7(
+    watch8(
       [
         () => props.theme,
         () => props.darkMode,
@@ -802,7 +920,7 @@ var Sankey = defineComponent4({
       const base = "oc-sankey-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h4("div", {
+    return () => h5("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -811,8 +929,8 @@ var Sankey = defineComponent4({
 });
 
 // src/ThemeProvider.ts
-import { computed as computed2, defineComponent as defineComponent5, provide } from "vue";
-var VizThemeProvider = defineComponent5({
+import { computed as computed2, defineComponent as defineComponent6, provide } from "vue";
+var VizThemeProvider = defineComponent6({
   name: "VizThemeProvider",
   props: {
     theme: {
@@ -838,15 +956,15 @@ import {
   createTileMap
 } from "@opendata-ai/openchart-vanilla";
 import {
-  defineComponent as defineComponent6,
-  h as h5,
-  inject as inject6,
-  onMounted as onMounted7,
-  onUnmounted as onUnmounted8,
-  ref as ref10,
-  watch as watch8
+  defineComponent as defineComponent7,
+  h as h6,
+  inject as inject7,
+  onMounted as onMounted8,
+  onUnmounted as onUnmounted9,
+  ref as ref11,
+  watch as watch9
 } from "vue";
-var TileMap = defineComponent6({
+var TileMap = defineComponent7({
   name: "TileMap",
   props: {
     spec: {
@@ -875,11 +993,11 @@ var TileMap = defineComponent6({
     "tile-hover": (_tile) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref10(null);
+    const containerRef = ref11(null);
     let instance = null;
     let prevSpec = "";
-    const contextTheme = inject6(VizThemeKey, void 0);
-    const contextDarkMode = inject6(VizDarkModeKey, void 0);
+    const contextTheme = inject7(VizThemeKey, void 0);
+    const contextDarkMode = inject7(VizDarkModeKey, void 0);
     function resolveTheme() {
       return props.theme ?? contextTheme?.value;
     }
@@ -909,13 +1027,13 @@ var TileMap = defineComponent6({
         return instance;
       }
     });
-    onMounted7(() => {
+    onMounted8(() => {
       mountTileMap();
     });
-    onUnmounted8(() => {
+    onUnmounted9(() => {
       destroyTileMap();
     });
-    watch8(
+    watch9(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -925,7 +1043,7 @@ var TileMap = defineComponent6({
         }
       }
     );
-    watch8(
+    watch9(
       [
         () => props.theme,
         () => props.darkMode,
@@ -942,7 +1060,7 @@ var TileMap = defineComponent6({
       const base = "oc-tilemap-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h5("div", {
+    return () => h6("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -951,9 +1069,15 @@ var TileMap = defineComponent6({
 });
 
 // src/Visualization.ts
-import { isGraphSpec, isSankeySpec, isTableSpec, isTileMapSpec } from "@opendata-ai/openchart-core";
-import { defineComponent as defineComponent7, h as h6 } from "vue";
-var Visualization = defineComponent7({
+import {
+  isBarListSpec,
+  isGraphSpec,
+  isSankeySpec,
+  isTableSpec,
+  isTileMapSpec
+} from "@opendata-ai/openchart-core";
+import { defineComponent as defineComponent8, h as h7 } from "vue";
+var Visualization = defineComponent8({
   name: "Visualization",
   props: {
     spec: {
@@ -982,22 +1106,26 @@ var Visualization = defineComponent7({
       const { spec, theme, darkMode, class: className, style } = props;
       const sharedProps = { theme, darkMode, class: className, style };
       if (isTableSpec(spec)) {
-        return h6(DataTable, { ...sharedProps, spec });
+        return h7(DataTable, { ...sharedProps, spec });
       }
       if (isGraphSpec(spec)) {
-        return h6(Graph, { ...sharedProps, spec });
+        return h7(Graph, { ...sharedProps, spec });
       }
       if (isSankeySpec(spec)) {
-        return h6(Sankey, { ...sharedProps, spec });
+        return h7(Sankey, { ...sharedProps, spec });
       }
       if (isTileMapSpec(spec)) {
-        return h6(TileMap, { ...sharedProps, spec });
+        return h7(TileMap, { ...sharedProps, spec });
+      }
+      if (isBarListSpec(spec)) {
+        return h7(BarList, { ...sharedProps, spec });
       }
-      return h6(Chart, { ...sharedProps, spec });
+      return h7(Chart, { ...sharedProps, spec });
     };
   }
 });
 export {
+  BarList,
   Chart,
   DataTable,
   Graph,
@@ -1009,6 +1137,7 @@ export {
   VizThemeProvider,
   clearRenderers,
   compile,
+  compileBarList,
   compileChart,
   compileGraph,
   compileSankey,