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

package/dist/index.js

@@ -7,6 +7,7 @@ import {
   compileBarList,
   compileChart,
   compileGraph,
+  compileMap,
   compileSankey,
   compileTable,
   getChartRenderer,
@@ -333,11 +334,154 @@ var Chart = defineComponent2({
   }
 });
 
+// src/ChartStory.ts
+import {
+  createChartStory
+} from "@opendata-ai/openchart-vanilla/story";
+import {
+  defineComponent as defineComponent3,
+  h as h3,
+  onMounted as onMounted3,
+  onUnmounted as onUnmounted3,
+  ref as ref3,
+  watch as watch3
+} from "vue";
+var sectionStyle = {
+  position: "relative",
+  display: "grid",
+  gridTemplateColumns: "minmax(0, 26rem) minmax(0, 1fr)",
+  gap: "3rem",
+  alignItems: "start"
+};
+var stepStyle = {
+  minHeight: "80vh",
+  display: "flex",
+  alignItems: "center"
+};
+var panelStyle = {
+  position: "sticky",
+  top: "2rem",
+  height: "calc(100vh - 4rem)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var ChartStory = defineComponent3({
+  name: "ChartStory",
+  props: {
+    spec: {
+      type: Object,
+      required: true
+    },
+    steps: {
+      type: Array,
+      required: true
+    },
+    narrative: {
+      type: Array,
+      default: void 0
+    },
+    step: {
+      type: Number,
+      default: void 0
+    },
+    triggerPosition: {
+      type: Number,
+      default: void 0
+    },
+    cameraMode: {
+      type: String,
+      default: void 0
+    },
+    mountOptions: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, expose }) {
+    const sectionRef = ref3(null);
+    const mountRef = ref3(null);
+    const stepEls = ref3([]);
+    let story = null;
+    onMounted3(() => {
+      const mount = mountRef.value;
+      if (!mount) return;
+      const blocks = props.narrative ?? [];
+      if (blocks.length > 0 && blocks.length !== props.steps.length) {
+        console.warn(
+          `[openchart] ChartStory: narrative length (${blocks.length}) does not match steps length (${props.steps.length}). Each step should have a corresponding narrative element.`
+        );
+      }
+      story = createChartStory(
+        mount,
+        {
+          spec: props.spec,
+          steps: props.steps,
+          triggerPosition: props.triggerPosition,
+          cameraMode: props.cameraMode
+        },
+        props.mountOptions
+      );
+      if (sectionRef.value) story.setContainer(sectionRef.value);
+      stepEls.value.forEach((el, i) => {
+        if (el) story?.registerStep(i, el);
+      });
+      if (props.step !== void 0) story.goTo(props.step);
+    });
+    watch3(
+      () => props.step,
+      (next) => {
+        if (next !== void 0) story?.goTo(next);
+      }
+    );
+    onUnmounted3(() => {
+      story?.destroy();
+      story = null;
+    });
+    expose({
+      goTo(index) {
+        story?.goTo(index);
+      },
+      get instance() {
+        return story;
+      }
+    });
+    return () => {
+      const blocks = props.narrative ?? slots.default?.() ?? [];
+      return h3("section", { ref: sectionRef, style: sectionStyle }, [
+        h3(
+          "div",
+          { style: { position: "relative" } },
+          blocks.map(
+            (content, i) => h3(
+              "div",
+              {
+                // Steps are a fixed ordered list, so the index is the stable
+                // identity. Do not reorder or splice narrative entries at runtime
+                // (that would remap step refs to the wrong content); rebuild the
+                // whole story instead.
+                key: i,
+                ref: (el) => {
+                  stepEls.value[i] = el;
+                },
+                "data-oc-story-step": i,
+                style: stepStyle
+              },
+              [h3("div", { style: { maxWidth: "36rem" } }, [content])]
+            )
+          )
+        ),
+        h3("div", { style: panelStyle }, [h3("div", { ref: mountRef, style: { width: "100%" } })])
+      ]);
+    };
+  }
+});
+
 // src/composables/useChart.ts
 import { createChart as createChart2 } from "@opendata-ai/openchart-vanilla";
-import { onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref3, shallowRef, watch as watch3 } from "vue";
+import { onMounted as onMounted4, onUnmounted as onUnmounted4, ref as ref4, shallowRef, watch as watch4 } from "vue";
 function useChart(spec, options) {
-  const containerRef = ref3(null);
+  const containerRef = ref4(null);
   const chart = shallowRef(null);
   const layout = shallowRef(null);
   function mount() {
@@ -358,13 +502,13 @@ function useChart(spec, options) {
     chart.value = null;
     layout.value = null;
   }
-  onMounted3(() => {
+  onMounted4(() => {
     mount();
   });
-  onUnmounted3(() => {
+  onUnmounted4(() => {
     destroy();
   });
-  watch3(spec, (newSpec) => {
+  watch4(spec, (newSpec) => {
     const instance = chart.value;
     if (!instance) return;
     instance.update(newSpec);
@@ -378,9 +522,9 @@ function useChart(spec, options) {
 }
 
 // src/composables/useDarkMode.ts
-import { onUnmounted as onUnmounted4, ref as ref4, watch as watch4 } from "vue";
+import { onUnmounted as onUnmounted5, ref as ref5, watch as watch5 } from "vue";
 function useDarkMode(mode) {
-  const isDark = ref4(resolveInitial(mode.value));
+  const isDark = ref5(resolveInitial(mode.value));
   let cleanup = null;
   function setup(currentMode) {
     cleanup?.();
@@ -402,10 +546,10 @@ function useDarkMode(mode) {
     cleanup = () => mq.removeEventListener("change", handler);
   }
   setup(mode.value);
-  watch4(mode, (newMode) => {
+  watch5(mode, (newMode) => {
     setup(newMode);
   });
-  onUnmounted4(() => {
+  onUnmounted5(() => {
     cleanup?.();
     cleanup = null;
   });
@@ -421,9 +565,9 @@ function resolveInitial(mode) {
 }
 
 // src/composables/useGraph.ts
-import { ref as ref5 } from "vue";
+import { ref as ref6 } from "vue";
 function useGraph() {
-  const graphRef = ref5(null);
+  const graphRef = ref6(null);
   function search(query) {
     graphRef.value?.search(query);
   }
@@ -457,11 +601,11 @@ function useGraph() {
 import {
   createTable
 } from "@opendata-ai/openchart-vanilla";
-import { onMounted as onMounted4, onUnmounted as onUnmounted5, ref as ref6, shallowRef as shallowRef2, watch as watch5 } from "vue";
+import { onMounted as onMounted5, onUnmounted as onUnmounted6, ref as ref7, shallowRef as shallowRef2, watch as watch6 } from "vue";
 function useTable(spec, options) {
-  const containerRef = ref6(null);
+  const containerRef = ref7(null);
   const table = shallowRef2(null);
-  const state = ref6({
+  const state = ref7({
     sort: null,
     search: "",
     page: 0
@@ -486,13 +630,13 @@ function useTable(spec, options) {
     table.value?.destroy();
     table.value = null;
   }
-  onMounted4(() => {
+  onMounted5(() => {
     mount();
   });
-  onUnmounted5(() => {
+  onUnmounted6(() => {
     destroy();
   });
-  watch5(spec, (newSpec) => {
+  watch6(spec, (newSpec) => {
     const instance = table.value;
     if (!instance) return;
     instance.update(newSpec);
@@ -506,11 +650,11 @@ function useTable(spec, options) {
 }
 
 // src/composables/useTableState.ts
-import { ref as ref7 } from "vue";
+import { ref as ref8 } from "vue";
 function useTableState(initialState) {
-  const sort = ref7(initialState?.sort ?? null);
-  const search = ref7(initialState?.search ?? "");
-  const page = ref7(initialState?.page ?? 0);
+  const sort = ref8(initialState?.sort ?? null);
+  const search = ref8(initialState?.search ?? "");
+  const page = ref8(initialState?.page ?? 0);
   function setSort(newSort) {
     sort.value = newSort;
   }
@@ -541,15 +685,15 @@ import {
   createTable as createTable2
 } from "@opendata-ai/openchart-vanilla";
 import {
-  defineComponent as defineComponent3,
-  h as h3,
+  defineComponent as defineComponent4,
+  h as h4,
   inject as inject4,
-  onMounted as onMounted5,
-  onUnmounted as onUnmounted6,
-  ref as ref8,
-  watch as watch6
+  onMounted as onMounted6,
+  onUnmounted as onUnmounted7,
+  ref as ref9,
+  watch as watch7
 } from "vue";
-var DataTable = defineComponent3({
+var DataTable = defineComponent4({
   name: "DataTable",
   props: {
     spec: {
@@ -592,7 +736,7 @@ var DataTable = defineComponent3({
     "update:page": (_page) => true
   },
   setup(props, { emit }) {
-    const containerRef = ref8(null);
+    const containerRef = ref9(null);
     let instance = null;
     const contextTheme = inject4(VizThemeKey, void 0);
     const contextDarkMode = inject4(VizDarkModeKey, void 0);
@@ -635,13 +779,13 @@ var DataTable = defineComponent3({
       instance = null;
       prevSpec = "";
     }
-    onMounted5(() => {
+    onMounted6(() => {
       mountTable();
     });
-    onUnmounted6(() => {
+    onUnmounted7(() => {
       destroyTable();
     });
-    watch6(
+    watch7(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -651,7 +795,7 @@ var DataTable = defineComponent3({
         }
       }
     );
-    watch6(
+    watch7(
       [
         () => props.theme,
         () => props.darkMode,
@@ -664,7 +808,7 @@ var DataTable = defineComponent3({
         mountTable();
       }
     );
-    watch6([() => props.sort, () => props.search, () => props.page], () => {
+    watch7([() => props.sort, () => props.search, () => props.page], () => {
       if (!instance || !isControlled()) return;
       instance.setState({
         sort: props.sort ?? null,
@@ -676,7 +820,7 @@ var DataTable = defineComponent3({
       const base = "oc-table-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h3("div", {
+    return () => h4("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -689,15 +833,15 @@ import {
   createGraph
 } from "@opendata-ai/openchart-vanilla";
 import {
-  defineComponent as defineComponent4,
-  h as h4,
+  defineComponent as defineComponent5,
+  h as h5,
   inject as inject5,
-  onMounted as onMounted6,
-  onUnmounted as onUnmounted7,
-  ref as ref9,
-  watch as watch7
+  onMounted as onMounted7,
+  onUnmounted as onUnmounted8,
+  ref as ref10,
+  watch as watch8
 } from "vue";
-var Graph = defineComponent4({
+var Graph = defineComponent5({
   name: "Graph",
   props: {
     spec: {
@@ -727,7 +871,7 @@ var Graph = defineComponent4({
     "selection-change": (_nodeIds) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref9(null);
+    const containerRef = ref10(null);
     let instance = null;
     let prevSpec = "";
     const contextTheme = inject5(VizThemeKey, void 0);
@@ -780,13 +924,13 @@ var Graph = defineComponent4({
         return instance;
       }
     });
-    onMounted6(() => {
+    onMounted7(() => {
       mountGraph();
     });
-    onUnmounted7(() => {
+    onUnmounted8(() => {
       destroyGraph();
     });
-    watch7(
+    watch8(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -796,7 +940,7 @@ var Graph = defineComponent4({
         }
       }
     );
-    watch7(
+    watch8(
       [
         () => props.theme,
         () => props.darkMode,
@@ -813,7 +957,122 @@ var Graph = defineComponent4({
       const base = "oc-graph-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h4("div", {
+    return () => h5("div", {
+      ref: containerRef,
+      class: rootClass(),
+      style: props.style
+    });
+  }
+});
+
+// src/Map.ts
+import { createMap } from "@opendata-ai/openchart-vanilla";
+import {
+  defineComponent as defineComponent6,
+  h as h6,
+  inject as inject6,
+  onMounted as onMounted8,
+  onUnmounted as onUnmounted9,
+  ref as ref11,
+  watch as watch9
+} from "vue";
+var GeoMap = defineComponent6({
+  name: "GeoMap",
+  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
+  },
+  setup(props, { emit, expose }) {
+    const containerRef = ref11(null);
+    let instance = null;
+    let prevSpec = "";
+    const contextTheme = inject6(VizThemeKey, void 0);
+    const contextDarkMode = inject6(VizDarkModeKey, void 0);
+    function resolveTheme() {
+      return props.theme ?? contextTheme?.value;
+    }
+    function resolveDarkMode() {
+      return props.darkMode ?? contextDarkMode?.value;
+    }
+    function mountMap() {
+      const container = containerRef.value;
+      if (!container) return;
+      const options = {
+        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({
+      get instance() {
+        return instance;
+      }
+    });
+    onMounted8(() => {
+      mountMap();
+    });
+    onUnmounted9(() => {
+      destroyMap();
+    });
+    watch9(
+      () => JSON.stringify(props.spec),
+      (newVal) => {
+        if (!instance) return;
+        if (newVal !== prevSpec) {
+          prevSpec = newVal;
+          instance.update(props.spec);
+        }
+      }
+    );
+    watch9(
+      [
+        () => 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 () => h6("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -826,15 +1085,15 @@ import {
   createSankey
 } from "@opendata-ai/openchart-vanilla";
 import {
-  defineComponent as defineComponent5,
-  h as h5,
-  inject as inject6,
-  onMounted as onMounted7,
-  onUnmounted as onUnmounted8,
-  ref as ref10,
-  watch as watch8
+  defineComponent as defineComponent7,
+  h as h7,
+  inject as inject7,
+  onMounted as onMounted9,
+  onUnmounted as onUnmounted10,
+  ref as ref12,
+  watch as watch10
 } from "vue";
-var Sankey = defineComponent5({
+var Sankey = defineComponent7({
   name: "Sankey",
   props: {
     spec: {
@@ -865,11 +1124,11 @@ var Sankey = defineComponent5({
     "link-hover": (_link) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref10(null);
+    const containerRef = ref12(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;
     }
@@ -901,13 +1160,13 @@ var Sankey = defineComponent5({
         return instance;
       }
     });
-    onMounted7(() => {
+    onMounted9(() => {
       mountSankey();
     });
-    onUnmounted8(() => {
+    onUnmounted10(() => {
       destroySankey();
     });
-    watch8(
+    watch10(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -917,7 +1176,7 @@ var Sankey = defineComponent5({
         }
       }
     );
-    watch8(
+    watch10(
       [
         () => props.theme,
         () => props.darkMode,
@@ -934,7 +1193,7 @@ var Sankey = defineComponent5({
       const base = "oc-sankey-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h5("div", {
+    return () => h7("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -943,8 +1202,8 @@ var Sankey = defineComponent5({
 });
 
 // src/ThemeProvider.ts
-import { computed as computed2, defineComponent as defineComponent6, provide } from "vue";
-var VizThemeProvider = defineComponent6({
+import { computed as computed2, defineComponent as defineComponent8, provide } from "vue";
+var VizThemeProvider = defineComponent8({
   name: "VizThemeProvider",
   props: {
     theme: {
@@ -970,15 +1229,15 @@ import {
   createTileMap
 } from "@opendata-ai/openchart-vanilla";
 import {
-  defineComponent as defineComponent7,
-  h as h6,
-  inject as inject7,
-  onMounted as onMounted8,
-  onUnmounted as onUnmounted9,
-  ref as ref11,
-  watch as watch9
+  defineComponent as defineComponent9,
+  h as h8,
+  inject as inject8,
+  onMounted as onMounted10,
+  onUnmounted as onUnmounted11,
+  ref as ref13,
+  watch as watch11
 } from "vue";
-var TileMap = defineComponent7({
+var TileMap = defineComponent9({
   name: "TileMap",
   props: {
     spec: {
@@ -1007,11 +1266,11 @@ var TileMap = defineComponent7({
     "tile-hover": (_tile) => true
   },
   setup(props, { emit, expose }) {
-    const containerRef = ref11(null);
+    const containerRef = ref13(null);
     let instance = null;
     let prevSpec = "";
-    const contextTheme = inject7(VizThemeKey, void 0);
-    const contextDarkMode = inject7(VizDarkModeKey, void 0);
+    const contextTheme = inject8(VizThemeKey, void 0);
+    const contextDarkMode = inject8(VizDarkModeKey, void 0);
     function resolveTheme() {
       return props.theme ?? contextTheme?.value;
     }
@@ -1041,13 +1300,13 @@ var TileMap = defineComponent7({
         return instance;
       }
     });
-    onMounted8(() => {
+    onMounted10(() => {
       mountTileMap();
     });
-    onUnmounted9(() => {
+    onUnmounted11(() => {
       destroyTileMap();
     });
-    watch9(
+    watch11(
       () => JSON.stringify(props.spec),
       (newVal) => {
         if (!instance) return;
@@ -1057,7 +1316,7 @@ var TileMap = defineComponent7({
         }
       }
     );
-    watch9(
+    watch11(
       [
         () => props.theme,
         () => props.darkMode,
@@ -1074,7 +1333,7 @@ var TileMap = defineComponent7({
       const base = "oc-tilemap-root";
       return props.class ? `${base} ${props.class}` : base;
     };
-    return () => h6("div", {
+    return () => h8("div", {
       ref: containerRef,
       class: rootClass(),
       style: props.style
@@ -1086,12 +1345,13 @@ var TileMap = defineComponent7({
 import {
   isBarListSpec,
   isGraphSpec,
+  isMapSpec,
   isSankeySpec,
   isTableSpec,
   isTileMapSpec
 } from "@opendata-ai/openchart-core";
-import { defineComponent as defineComponent8, h as h7 } from "vue";
-var Visualization = defineComponent8({
+import { defineComponent as defineComponent10, h as h9 } from "vue";
+var Visualization = defineComponent10({
   name: "Visualization",
   props: {
     spec: {
@@ -1120,28 +1380,33 @@ var Visualization = defineComponent8({
       const { spec, theme, darkMode, class: className, style } = props;
       const sharedProps = { theme, darkMode, class: className, style };
       if (isTableSpec(spec)) {
-        return h7(DataTable, { ...sharedProps, spec });
+        return h9(DataTable, { ...sharedProps, spec });
       }
       if (isGraphSpec(spec)) {
-        return h7(Graph, { ...sharedProps, spec });
+        return h9(Graph, { ...sharedProps, spec });
       }
       if (isSankeySpec(spec)) {
-        return h7(Sankey, { ...sharedProps, spec });
+        return h9(Sankey, { ...sharedProps, spec });
       }
       if (isTileMapSpec(spec)) {
-        return h7(TileMap, { ...sharedProps, spec });
+        return h9(TileMap, { ...sharedProps, spec });
       }
       if (isBarListSpec(spec)) {
-        return h7(BarList, { ...sharedProps, spec });
+        return h9(BarList, { ...sharedProps, spec });
+      }
+      if (isMapSpec(spec)) {
+        return h9(GeoMap, { ...sharedProps, spec });
       }
-      return h7(Chart, { ...sharedProps, spec });
+      return h9(Chart, { ...sharedProps, spec });
     };
   }
 });
 export {
   BarList,
   Chart,
+  ChartStory,
   DataTable,
+  GeoMap,
   Graph,
   Sankey,
   TileMap,
@@ -1154,6 +1419,7 @@ export {
   compileBarList,
   compileChart,
   compileGraph,
+  compileMap,
   compileSankey,
   compileTable,
   exportCSV,