@opendata-ai/openchart-vue 8.4.0 → 8.5.0

package/README.md

@@ -61,6 +61,49 @@ const props = defineProps<{ spec: VizSpec }>();
 
 If you need event handlers or component-specific props, use the specific component directly instead.
 
+## 3D graphs
+
+`dimensions: 3` on a graph spec renders with WebGL instead of canvas. The 3D
+renderer ships on its own subpath so three.js never lands in the default bundle,
+and its libraries are optional peers you install yourself:
+
+```bash
+npm install three 3d-force-graph three-spritetext
+```
+
+The subpath registers the renderer as an import side effect, so it has to be
+imported before the graph mounts. Import this package's own subpath rather than
+reaching past it into vanilla:
+
+```vue
+<script setup lang="ts">
+import type { GraphSpec } from '@opendata-ai/openchart-core';
+import { Graph } from '@opendata-ai/openchart-vue';
+import { onMounted, ref } from 'vue';
+
+const spec: GraphSpec = {
+  type: 'graph',
+  nodes: [{ id: 'a' }, { id: 'b' }],
+  edges: [{ source: 'a', target: 'b' }],
+};
+
+const ready = ref(false);
+// Client-side only: 3d-force-graph touches `window` at import time.
+onMounted(async () => {
+  await import('@opendata-ai/openchart-vue/graph-3d');
+  ready.value = true;
+});
+</script>
+
+<template>
+  <Graph v-if="ready" :spec="{ ...spec, dimensions: 3 }" />
+</template>
+```
+
+The subpath import is required only when compilation actually resolves to 3D: a
+spec above the 2000-node gate falls back to 2D and renders without it. See the
+[vanilla README](../vanilla/README.md#3d-graphs) for how 3D differs from 2D.
+
 ## Dark mode and theming
 
 Wrap components with `VizThemeProvider` to set theme and dark mode for all child visualizations. It uses Vue's `provide`/`inject` under the hood, so all `Chart`, `DataTable`, and `Graph` components inside the provider inherit its values.

package/dist/graph-3d.d.ts

@@ -0,0 +1 @@
+export * from '@opendata-ai/openchart-vanilla/graph-3d';

package/dist/graph-3d.js

@@ -0,0 +1,3 @@
+// src/graph-3d.ts
+export * from "@opendata-ai/openchart-vanilla/graph-3d";
+//# sourceMappingURL=graph-3d.js.map

package/dist/graph-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/graph-3d.ts"],"sourcesContent":["/**\n * Vue subpath for the 3D graph renderer.\n *\n * Importing this module registers the WebGL renderer with the vanilla graph\n * registry, so a `<Graph />` whose spec sets `dimensions: 3` can mount. It is a\n * side-effect import: there is nothing Vue-specific here beyond the re-export,\n * and it exists so Vue hosts never have to reach past\n * `@opendata-ai/openchart-vue` for a peer (vanilla is a transitive dependency,\n * which strict resolvers refuse to resolve a deep import against).\n *\n * Import it client-side only (three.js touches `window` at module scope):\n *\n * ```ts\n * onMounted(() => {\n *   import('@opendata-ai/openchart-vue/graph-3d');\n * });\n * ```\n */\n\nexport * from '@opendata-ai/openchart-vanilla/graph-3d';\n"],"mappings":";AAmBA,cAAc;","names":[]}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { BarListSpec, ThemeConfig, DarkMode, ChartSpec, LayerSpec, GraphSpec, ElementRef, MarkEvent, Annotation, TextAnnotation, AnnotationOffset, ElementEdit, GeoMapSpec, ChartLayout, TableSpec, SortState, SankeySpec, TileMapSpec, VizSpec } from '@opendata-ai/openchart-core';
 export * from '@opendata-ai/openchart-core';
-import { MountOptions, ChartInstance, CameraFlightOptions, GraphHighlightTarget, GraphLegendData, GraphInstance, TableInstance, TableState, TableMountOptions, GeoMapMarkEvent, GraphTooltipFormatter } from '@opendata-ai/openchart-vanilla';
+import { MountOptions, ChartInstance, CameraFlightOptions, GraphFlyTarget, GraphCamera, GraphHighlightTarget, GraphLegendData, GraphInstance, TableInstance, TableState, TableMountOptions, GeoMapMarkEvent, GraphTooltipFormatter } from '@opendata-ai/openchart-vanilla';
 export { JPGExportOptions, PNGExportOptions, SVGExportOptions, SpecSequenceOptions, exportCSV, exportJPG, exportPNG, exportSVG, exportSVGWithFonts, exportSpecSequence } from '@opendata-ai/openchart-vanilla';
 export { ChartRenderer, CompileResult, CompiledGraphEdge, CompiledGraphNode, GraphCompilation, NormalizedBarListSpec, NormalizedChartSpec, NormalizedChrome, NormalizedGeoMapSpec, NormalizedGraphSpec, NormalizedSankeySpec, NormalizedSpec, NormalizedTableSpec, NormalizedTileMapSpec, SimulationConfig, ValidationError, ValidationErrorCode, ValidationResult, clearRenderers, compile, compileBarList, compileChart, compileGeoMap, compileGraph, compileSankey, compileTable, compileTileMap, getChartRenderer, normalizeSpec, registerChartRenderer, validateSpec } from '@opendata-ai/openchart-engine';
 import * as vue from 'vue';
@@ -334,12 +334,6 @@ declare function useDarkMode(mode: Ref<DarkMode | undefined>): Ref<boolean>;
  * graph instance. The full vanilla GraphInstance API is threaded through.
  */
 
-/** Camera transform components (graph-space). */
-type GraphCamera = {
-    x: number;
-    y: number;
-    k: number;
-};
 /** Handle exposed by Graph component via expose(). */
 interface GraphHandle {
     search: (query: string) => void;
@@ -351,11 +345,7 @@ interface GraphHandle {
     zoomToNode: (nodeId: string, opts?: CameraFlightOptions & {
         scale?: number;
     }) => void;
-    flyTo: (target: {
-        x: number;
-        y: number;
-        k?: number;
-    }, opts?: CameraFlightOptions) => void;
+    flyTo: (target: GraphFlyTarget, opts?: CameraFlightOptions) => void;
     centerAt: (x: number, y: number, opts?: CameraFlightOptions) => void;
     getCamera: () => GraphCamera;
     selectNode: (nodeId: string, opts?: {
@@ -393,11 +383,7 @@ interface UseGraphReturn {
         scale?: number;
     }) => void;
     /** Fly the camera to a graph-space target. */
-    flyTo: (target: {
-        x: number;
-        y: number;
-        k?: number;
-    }, opts?: CameraFlightOptions) => void;
+    flyTo: (target: GraphFlyTarget, opts?: CameraFlightOptions) => void;
     /** Center the camera on a graph-space point (keeps current zoom). */
     centerAt: (x: number, y: number, opts?: CameraFlightOptions) => void;
     /** Current camera transform. */
@@ -761,11 +747,7 @@ declare const Graph: vue.DefineComponent<vue.ExtractPropTypes<{
     } | null) => true;
     'legend-toggle': (_activeValues: string[]) => true;
     'highlight-change': (_nodeIds: string[] | null) => true;
-    'camera-change': (_camera: {
-        x: number;
-        y: number;
-        k: number;
-    }) => true;
+    'camera-change': (_camera: GraphCamera) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     spec: {
         type: PropType<GraphSpec>;
@@ -811,11 +793,7 @@ declare const Graph: vue.DefineComponent<vue.ExtractPropTypes<{
         value: string;
     } | null) => any) | undefined;
     "onHighlight-change"?: ((_nodeIds: string[] | null) => any) | undefined;
-    "onCamera-change"?: ((_camera: {
-        x: number;
-        y: number;
-        k: number;
-    }) => any) | undefined;
+    "onCamera-change"?: ((_camera: GraphCamera) => any) | undefined;
 }>, {
     theme: ThemeConfig;
     darkMode: DarkMode;

package/dist/index.js

@@ -1087,7 +1087,7 @@ var Graph = defineComponent6({
       const fn = t && typeof t === "object" ? t.formatter : void 0;
       return fn ? fn(item, defaults) : defaults;
     };
-    function mountGraph() {
+    function mountGraph(playEntrance = false) {
       const container = containerRef.value;
       if (!container) return;
       const tooltipOption = tooltipOn(props.tooltip) ? { formatter: stableTooltipFormatter } : false;
@@ -1107,7 +1107,7 @@ var Graph = defineComponent6({
         onHighlightChange: (nodeIds) => emit("highlight-change", nodeIds),
         onCameraChange: (camera) => emit("camera-change", camera),
         responsive: true,
-        suppressEntrance: mountedOnce
+        suppressEntrance: mountedOnce && !playEntrance
       };
       instance = createGraph(container, props.spec, options);
       prevSpec = JSON.stringify(props.spec);
@@ -1180,6 +1180,14 @@ var Graph = defineComponent6({
     onUnmounted9(() => {
       destroyGraph();
     });
+    watch9(
+      () => props.spec.dimensions ?? 2,
+      () => {
+        if (!containerRef.value) return;
+        destroyGraph();
+        mountGraph(true);
+      }
+    );
     watch9(
       () => JSON.stringify(props.spec),
       (newVal) => {