@opendata-ai/openchart-vue 8.0.0-rc.8 → 8.0.0

package/dist/index.js

@@ -1,15 +1,23 @@
 // src/index.ts
 export * from "@opendata-ai/openchart-core";
-import { exportCSV, exportJPG, exportPNG, exportSVG } from "@opendata-ai/openchart-vanilla";
+import {
+  exportCSV,
+  exportJPG,
+  exportPNG,
+  exportSpecSequence,
+  exportSVG,
+  exportSVGWithFonts
+} from "@opendata-ai/openchart-vanilla";
 import {
   clearRenderers,
   compile,
   compileBarList,
   compileChart,
+  compileGeoMap,
   compileGraph,
-  compileMap,
   compileSankey,
   compileTable,
+  compileTileMap,
   getChartRenderer,
   normalizeSpec,
   registerChartRenderer,
@@ -175,6 +183,10 @@ var Chart = defineComponent2({
       type: String,
       default: void 0
     },
+    renderer: {
+      type: String,
+      default: void 0
+    },
     class: {
       type: String,
       default: void 0
@@ -190,6 +202,10 @@ var Chart = defineComponent2({
     highlight: {
       type: [Array, null],
       default: void 0
+    },
+    editable: {
+      type: Boolean,
+      default: void 0
     }
   },
   emits: {
@@ -230,6 +246,7 @@ var Chart = defineComponent2({
       const options = {
         theme: resolveTheme(),
         darkMode: resolveDarkMode(),
+        renderer: props.renderer,
         onDataPointClick: (data) => emit("data-point-click", data),
         onMarkClick: (event) => emit("mark-click", event),
         onMarkHover: (event) => emit("mark-hover", event),
@@ -247,6 +264,7 @@ var Chart = defineComponent2({
         ...hasTextEditListener ? {
           onTextEdit: (element, oldText, newText) => emit("text-edit", element, oldText, newText)
         } : {},
+        ...props.editable != null ? { editable: props.editable } : {},
         ...props.selectedElement ? { selectedElement: props.selectedElement } : {},
         responsive: true
       };
@@ -313,6 +331,8 @@ var Chart = defineComponent2({
       [
         () => props.theme,
         () => props.darkMode,
+        () => props.renderer,
+        () => props.editable,
         () => contextTheme?.value,
         () => contextDarkMode?.value
       ],
@@ -491,7 +511,8 @@ function useChart(spec, options) {
       theme: options?.theme,
       darkMode: options?.darkMode,
       onDataPointClick: options?.onDataPointClick,
-      responsive: options?.responsive
+      responsive: options?.responsive,
+      renderer: options?.renderer
     };
     const instance = createChart2(container, spec.value, mountOpts);
     chart.value = instance;
@@ -574,26 +595,66 @@ function useGraph() {
   function clearSearch() {
     graphRef.value?.clearSearch();
   }
-  function zoomToFit() {
-    graphRef.value?.zoomToFit();
+  function getSearchMatches() {
+    return graphRef.value?.getSearchMatches() ?? [];
+  }
+  function zoomToFit(opts) {
+    graphRef.value?.zoomToFit(opts);
   }
-  function zoomToNode(nodeId) {
-    graphRef.value?.zoomToNode(nodeId);
+  function zoomToNode(nodeId, opts) {
+    graphRef.value?.zoomToNode(nodeId, opts);
   }
-  function selectNode(nodeId) {
-    graphRef.value?.selectNode(nodeId);
+  function flyTo(target, opts) {
+    graphRef.value?.flyTo(target, opts);
+  }
+  function centerAt(x, y, opts) {
+    graphRef.value?.centerAt(x, y, opts);
+  }
+  function getCamera() {
+    return graphRef.value?.getCamera() ?? { x: 0, y: 0, k: 1 };
+  }
+  function selectNode(nodeId, opts) {
+    graphRef.value?.selectNode(nodeId, opts);
   }
   function getSelectedNodes() {
     return graphRef.value?.getSelectedNodes() ?? [];
   }
+  function highlight(target, opts) {
+    graphRef.value?.highlight(target, opts);
+  }
+  function clearHighlight() {
+    graphRef.value?.clearHighlight();
+  }
+  function getHighlight() {
+    return graphRef.value?.getHighlight() ?? null;
+  }
+  function getLegend() {
+    return graphRef.value?.getLegend() ?? null;
+  }
+  function setActiveCategories(values) {
+    graphRef.value?.setActiveCategories(values);
+  }
+  function getActiveCategories() {
+    return graphRef.value?.getActiveCategories() ?? [];
+  }
   return {
     graphRef,
     search,
     clearSearch,
+    getSearchMatches,
     zoomToFit,
     zoomToNode,
+    flyTo,
+    centerAt,
+    getCamera,
     selectNode,
-    getSelectedNodes
+    getSelectedNodes,
+    highlight,
+    clearHighlight,
+    getHighlight,
+    getLegend,
+    setActiveCategories,
+    getActiveCategories
   };
 }
 
@@ -828,9 +889,9 @@ var DataTable = defineComponent4({
   }
 });
 
-// src/Graph.ts
+// src/GeoMap.ts
 import {
-  createGraph
+  createGeoMap
 } from "@opendata-ai/openchart-vanilla";
 import {
   defineComponent as defineComponent5,
@@ -841,8 +902,8 @@ import {
   ref as ref10,
   watch as watch8
 } from "vue";
-var Graph = defineComponent5({
-  name: "Graph",
+var GeoMap = defineComponent5({
+  name: "GeoMap",
   props: {
     spec: {
       type: Object,
@@ -866,9 +927,8 @@ var Graph = defineComponent5({
     }
   },
   emits: {
-    "node-click": (_node) => true,
-    "node-double-click": (_node) => true,
-    "selection-change": (_nodeIds) => true
+    "mark-click": (_event) => true,
+    "mark-hover": (_event) => true
   },
   setup(props, { emit, expose }) {
     const containerRef = ref10(null);
@@ -882,53 +942,34 @@ var Graph = defineComponent5({
     function resolveDarkMode() {
       return props.darkMode ?? contextDarkMode?.value;
     }
-    function mountGraph() {
+    function mountMap() {
       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),
+        onMarkClick: (feature) => emit("mark-click", feature),
+        onMarkHover: (feature) => emit("mark-hover", feature),
         responsive: true
       };
-      instance = createGraph(container, props.spec, options);
+      instance = createGeoMap(container, props.spec, options);
       prevSpec = JSON.stringify(props.spec);
     }
-    function destroyGraph() {
+    function destroyMap() {
       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;
       }
     });
     onMounted7(() => {
-      mountGraph();
+      mountMap();
     });
     onUnmounted8(() => {
-      destroyGraph();
+      destroyMap();
     });
     watch8(
       () => JSON.stringify(props.spec),
@@ -949,12 +990,12 @@ var Graph = defineComponent5({
       ],
       () => {
         if (!containerRef.value) return;
-        destroyGraph();
-        mountGraph();
+        destroyMap();
+        mountMap();
       }
     );
     const rootClass = () => {
-      const base = "oc-graph-root";
+      const base = "oc-map-root";
       return props.class ? `${base} ${props.class}` : base;
     };
     return () => h5("div", {
@@ -965,9 +1006,9 @@ var Graph = defineComponent5({
   }
 });
 
-// src/Map.ts
+// src/Graph.ts
 import {
-  createMap
+  createGraph
 } from "@opendata-ai/openchart-vanilla";
 import {
   defineComponent as defineComponent6,
@@ -978,8 +1019,11 @@ import {
   ref as ref11,
   watch as watch9
 } from "vue";
-var GeoMap = defineComponent6({
-  name: "GeoMap",
+function tooltipOn(tooltip) {
+  return tooltip !== false;
+}
+var Graph = defineComponent6({
+  name: "Graph",
   props: {
     spec: {
       type: Object,
@@ -993,6 +1037,18 @@ var GeoMap = defineComponent6({
       type: String,
       default: void 0
     },
+    tooltip: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    legend: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    fitOnLoad: {
+      type: Boolean,
+      default: void 0
+    },
     class: {
       type: String,
       default: void 0
@@ -1003,13 +1059,21 @@ var GeoMap = defineComponent6({
     }
   },
   emits: {
-    "mark-click": (_event) => true,
-    "mark-hover": (_event) => true
+    "node-click": (_node) => true,
+    "node-double-click": (_node) => true,
+    "node-hover": (_node) => true,
+    "edge-hover": (_edge) => true,
+    "selection-change": (_nodeIds) => true,
+    "legend-hover": (_entry) => true,
+    "legend-toggle": (_activeValues) => true,
+    "highlight-change": (_nodeIds) => true,
+    "camera-change": (_camera) => true
   },
   setup(props, { emit, expose }) {
     const containerRef = ref11(null);
     let instance = null;
     let prevSpec = "";
+    let mountedOnce = false;
     const contextTheme = inject6(VizThemeKey, void 0);
     const contextDarkMode = inject6(VizDarkModeKey, void 0);
     function resolveTheme() {
@@ -1018,34 +1082,103 @@ var GeoMap = defineComponent6({
     function resolveDarkMode() {
       return props.darkMode ?? contextDarkMode?.value;
     }
-    function mountMap() {
+    const stableTooltipFormatter = (item, defaults) => {
+      const t = props.tooltip;
+      const fn = t && typeof t === "object" ? t.formatter : void 0;
+      return fn ? fn(item, defaults) : defaults;
+    };
+    function mountGraph() {
       const container = containerRef.value;
       if (!container) return;
+      const tooltipOption = tooltipOn(props.tooltip) ? { formatter: stableTooltipFormatter } : false;
       const options = {
         theme: resolveTheme(),
         darkMode: resolveDarkMode(),
-        onMarkClick: (feature) => emit("mark-click", feature),
-        onMarkHover: (feature) => emit("mark-hover", feature),
-        responsive: true
+        tooltip: tooltipOption,
+        legend: props.legend,
+        fitOnLoad: props.fitOnLoad,
+        onNodeClick: (node) => emit("node-click", node),
+        onNodeDoubleClick: (node) => emit("node-double-click", node),
+        onNodeHover: (node) => emit("node-hover", node),
+        onEdgeHover: (edge) => emit("edge-hover", edge),
+        onSelectionChange: (nodeIds) => emit("selection-change", nodeIds),
+        onLegendHover: (entry) => emit("legend-hover", entry),
+        onLegendToggle: (activeValues) => emit("legend-toggle", activeValues),
+        onHighlightChange: (nodeIds) => emit("highlight-change", nodeIds),
+        onCameraChange: (camera) => emit("camera-change", camera),
+        responsive: true,
+        suppressEntrance: mountedOnce
       };
-      instance = createMap(container, props.spec, options);
+      instance = createGraph(container, props.spec, options);
       prevSpec = JSON.stringify(props.spec);
+      mountedOnce = true;
     }
-    function destroyMap() {
+    function destroyGraph() {
       instance?.destroy();
       instance = null;
       prevSpec = "";
     }
     expose({
+      search(query) {
+        instance?.search(query);
+      },
+      clearSearch() {
+        instance?.clearSearch();
+      },
+      getSearchMatches() {
+        return instance?.getSearchMatches() ?? [];
+      },
+      zoomToFit(opts) {
+        instance?.zoomToFit(opts);
+      },
+      zoomToNode(nodeId, opts) {
+        instance?.zoomToNode(nodeId, opts);
+      },
+      flyTo(target, opts) {
+        instance?.flyTo(target, opts);
+      },
+      centerAt(x, y, opts) {
+        instance?.centerAt(x, y, opts);
+      },
+      getCamera() {
+        return instance?.getCamera() ?? { x: 0, y: 0, k: 1 };
+      },
+      selectNode(nodeId, opts) {
+        instance?.selectNode(nodeId, opts);
+      },
+      getSelectedNodes() {
+        return instance?.getSelectedNodes() ?? [];
+      },
+      highlight(target, opts) {
+        instance?.highlight(target, opts);
+      },
+      clearHighlight() {
+        instance?.clearHighlight();
+      },
+      getHighlight() {
+        return instance?.getHighlight() ?? null;
+      },
+      getLegend() {
+        return instance?.getLegend() ?? null;
+      },
+      setActiveCategories(values) {
+        instance?.setActiveCategories(values);
+      },
+      getActiveCategories() {
+        return instance?.getActiveCategories() ?? [];
+      },
+      updateVisuals(spec) {
+        instance?.updateVisuals(spec);
+      },
       get instance() {
         return instance;
       }
     });
     onMounted8(() => {
-      mountMap();
+      mountGraph();
     });
     onUnmounted9(() => {
-      destroyMap();
+      destroyGraph();
     });
     watch9(
       () => JSON.stringify(props.spec),
@@ -1066,12 +1199,12 @@ var GeoMap = defineComponent6({
       ],
       () => {
         if (!containerRef.value) return;
-        destroyMap();
-        mountMap();
+        destroyGraph();
+        mountGraph();
       }
     );
     const rootClass = () => {
-      const base = "oc-map-root";
+      const base = "oc-graph-root";
       return props.class ? `${base} ${props.class}` : base;
     };
     return () => h6("div", {
@@ -1346,8 +1479,8 @@ var TileMap = defineComponent9({
 // src/Visualization.ts
 import {
   isBarListSpec,
+  isGeoMapSpec,
   isGraphSpec,
-  isMapSpec,
   isSankeySpec,
   isTableSpec,
   isTileMapSpec
@@ -1396,7 +1529,7 @@ var Visualization = defineComponent10({
       if (isBarListSpec(spec)) {
         return h9(BarList, { ...sharedProps, spec });
       }
-      if (isMapSpec(spec)) {
+      if (isGeoMapSpec(spec)) {
         return h9(GeoMap, { ...sharedProps, spec });
       }
       return h9(Chart, { ...sharedProps, spec });
@@ -1420,14 +1553,17 @@ export {
   compile,
   compileBarList,
   compileChart,
+  compileGeoMap,
   compileGraph,
-  compileMap,
   compileSankey,
   compileTable,
+  compileTileMap,
   exportCSV,
   exportJPG,
   exportPNG,
   exportSVG,
+  exportSVGWithFonts,
+  exportSpecSequence,
   getChartRenderer,
   normalizeSpec,
   registerChartRenderer,