minerva-design 1.3.0 → 1.5.0

package/dist/vue/components/Chart/graph.d.ts

@@ -0,0 +1,153 @@
+import { PropType } from 'vue';
+import { ChartRendererKind, ChartRendererPreference, GraphChartLabels, GraphChartOptions, GraphEdge, GraphEdgeStyle, GraphGroup, GraphGroupToggleEvent, GraphHoverEvent, GraphInteractionOptions, GraphLayoutEndEvent, GraphLegendOptions, GraphNode, GraphNodeShape, GraphToggleEvent, GraphTooltipOptions } from '../../../charts/core.js';
+import { GraphChartHandle } from './types.js';
+/** Props shared by GraphChart, DependencyGraph and TreeChart */
+export declare const graphCommonProps: {
+    /** The nodes (a new array re-runs the layout; an array rebuilt with the same node objects does not) */
+    readonly nodes: {
+        readonly type: PropType<readonly GraphNode[]>;
+        readonly required: true;
+    };
+    /** The edges (parent → child in trees, prerequisite → dependent in DAGs) */
+    readonly edges: {
+        readonly type: PropType<readonly GraphEdge[]>;
+        readonly required: true;
+    };
+    /** Groups: legend order, names and colors */
+    readonly groups: PropType<readonly GraphGroup[]>;
+    /** Shape of the nodes without `shape` (boxes for DAGs, org charts and mind maps, circles otherwise) */
+    readonly nodeShape: PropType<GraphNodeShape>;
+    /** Circle diameter in layout units, or `[min, max]` scaled by the node `value` */
+    readonly nodeSize: PropType<number | readonly [number, number]>;
+    /** Edge shape; depends on the layout when omitted */
+    readonly edgeStyle: PropType<GraphEdgeStyle>;
+    /** Edge width in CSS pixels, or `[min, max]` scaled by the edge `value` */
+    readonly edgeWidth: PropType<number | readonly [number, number]>;
+    /** Edge colors: neutral or tinted with the source / target node (default `neutral`) */
+    readonly edgeColor: PropType<"neutral" | "source" | "target">;
+    /** Arrowheads on the edges without `directed` (on for DAGs) */
+    readonly arrows: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** Node labels; `auto` hides minor and overlapping labels when zoomed out (default `auto`) */
+    readonly nodeLabels: {
+        readonly type: PropType<boolean | "auto">;
+        readonly default: undefined;
+    };
+    /** Edge labels: always, `auto` (zoomed in or highlighted), only `hover`, or never (default `auto`) */
+    readonly edgeLabels: {
+        readonly type: PropType<boolean | "auto" | "hover">;
+        readonly default: undefined;
+    };
+    /** What hovering / selecting a node highlights */
+    readonly highlight: PropType<"neighbors" | "lineage" | "none">;
+    /** Ids of the selected nodes (changing it updates the selection) */
+    readonly selected: PropType<readonly string[]>;
+    /** Animates layout and data changes; a number is the duration in ms (default `true`) */
+    readonly animation: {
+        readonly type: PropType<boolean | number>;
+        readonly default: undefined;
+    };
+    /** Padding around the graph when fitting it, in CSS pixels (default 24) */
+    readonly fitPadding: NumberConstructor;
+    /** Zoom buttons (zoom in, zoom out, fit; default `true`) */
+    readonly controls: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** Legend of the groups; shown by default with several groups */
+    readonly legend: {
+        readonly type: PropType<boolean | GraphLegendOptions>;
+        readonly default: undefined;
+    };
+    /** Tooltip; `false` disables it */
+    readonly tooltip: {
+        readonly type: PropType<boolean | GraphTooltipOptions>;
+        readonly default: undefined;
+    };
+    /** Drag pans, Ctrl / ⌘ + wheel and pinch zoom, nodes can be dragged, click selects, arrow keys move; `false` makes the chart static (default `true`) */
+    readonly interaction: {
+        readonly type: PropType<boolean | GraphInteractionOptions>;
+        readonly default: undefined;
+    };
+    /** Backend of the nodes and edges: `auto` tries WebGPU, then WebGL2, then WebGL, then Canvas2D (default `auto`) */
+    readonly renderer: PropType<ChartRendererPreference>;
+    /** Group colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    readonly palette: PropType<readonly string[]>;
+    /** Accessible name of the chart */
+    readonly ariaLabel: StringConstructor;
+    /** Language of the built-in texts (summary, announcements, tooltip, buttons); the page language by default */
+    readonly locale: StringConstructor;
+    /** Overrides of the built-in texts of the `locale` */
+    readonly labels: PropType<Partial<GraphChartLabels>>;
+    readonly height: PropType<number | string>;
+    readonly width: PropType<number | string>;
+    readonly deep: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+/** Values of `graphCommonProps` */
+export interface GraphCommonProps {
+    nodes: readonly GraphNode[];
+    edges: readonly GraphEdge[];
+    groups?: readonly GraphGroup[];
+    height?: number | string;
+    width?: number | string;
+    deep?: boolean;
+    nodeShape?: GraphNodeShape;
+    nodeSize?: number | readonly [number, number];
+    edgeStyle?: GraphEdgeStyle;
+    edgeWidth?: number | readonly [number, number];
+    edgeColor?: "neutral" | "source" | "target";
+    arrows?: boolean;
+    nodeLabels?: boolean | "auto";
+    edgeLabels?: boolean | "auto" | "hover";
+    highlight?: "neighbors" | "lineage" | "none";
+    selected?: readonly string[];
+    animation?: boolean | number;
+    fitPadding?: number;
+    controls?: boolean;
+    legend?: boolean | GraphLegendOptions;
+    tooltip?: boolean | GraphTooltipOptions;
+    interaction?: boolean | GraphInteractionOptions;
+    renderer?: ChartRendererPreference;
+    palette?: readonly string[];
+    ariaLabel?: string;
+    locale?: string;
+    labels?: Partial<GraphChartLabels>;
+}
+/** Layout part of the options (what each component sets) */
+export type GraphLayoutOptions = Pick<GraphChartOptions, "layout" | "direction" | "force" | "circular" | "dag" | "tree">;
+/** Engine events re-emitted by the graph components */
+export interface GraphHandlers {
+    hover: (event: GraphHoverEvent | null) => void;
+    itemClick: (event: GraphHoverEvent) => void;
+    selectionChange: (ids: string[]) => void;
+    toggle: (event: GraphToggleEvent) => void;
+    groupToggle: (event: GraphGroupToggleEvent) => void;
+    layoutEnd: (event: GraphLayoutEndEvent) => void;
+    rendererChange: (renderer: ChartRendererKind) => void;
+}
+/**
+ * Whether two option objects describe the same chart: top-level values by
+ * identity, one level deep for inline arrays / objects (node and edge
+ * arrays rebuilt with the same objects are the same data, so the layout is
+ * not run again), like the React components
+ */
+export declare const sameGraphOptions: (a: GraphChartOptions, b: GraphChartOptions) => boolean;
+/** Engine options of the common props and the layout of a component */
+export declare const graphOptions: (props: GraphCommonProps, layout: GraphLayoutOptions) => GraphChartOptions;
+/**
+ * Engine (`createGraphChart`), root style and template handle of a graph
+ * component. New options are passed only when they describe another chart
+ * (`sameGraphOptions`): `setOptions` re-runs the layout when the node, edge
+ * or group arrays change. With `deep`, in-place mutations of the data are
+ * followed by passing copies of the arrays (the layout runs again).
+ */
+export declare function useGraphChart(props: GraphCommonProps, layout: () => GraphLayoutOptions, emit: GraphHandlers): {
+    setContainer: (el: unknown) => void;
+    rootStyle: import('vue').ComputedRef<import('vue').CSSProperties>;
+    handle: GraphChartHandle;
+};

package/dist/vue/components/Chart/graph.js

@@ -0,0 +1,135 @@
+import { raw as e, useChartEngine as t, useRootStyle as n } from "./engine.js";
+import { chartFrameProps as r } from "./props.js";
+import { createGraphChart as i } from "../../../charts/core.js";
+//#region src/components/Chart/graph.ts
+var a = {
+	...r,
+	nodes: {
+		type: Array,
+		required: !0
+	},
+	edges: {
+		type: Array,
+		required: !0
+	},
+	groups: Array,
+	nodeShape: String,
+	nodeSize: [Number, Array],
+	edgeStyle: String,
+	edgeWidth: [Number, Array],
+	edgeColor: String,
+	arrows: {
+		type: Boolean,
+		default: void 0
+	},
+	nodeLabels: {
+		type: [Boolean, String],
+		default: void 0
+	},
+	edgeLabels: {
+		type: [Boolean, String],
+		default: void 0
+	},
+	highlight: String,
+	selected: Array,
+	animation: {
+		type: [Boolean, Number],
+		default: void 0
+	},
+	fitPadding: Number,
+	controls: {
+		type: Boolean,
+		default: void 0
+	},
+	legend: {
+		type: [Boolean, Object],
+		default: void 0
+	},
+	tooltip: {
+		type: [Boolean, Object],
+		default: void 0
+	},
+	interaction: {
+		type: [Boolean, Object],
+		default: void 0
+	},
+	renderer: String,
+	palette: Array,
+	ariaLabel: String,
+	locale: String,
+	labels: Object
+}, o = (e) => {
+	if (typeof e != "object" || !e) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}, s = (t, n) => e(t) === e(n), c = (e, t) => {
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => Object.prototype.hasOwnProperty.call(t, n) && s(e[n], t[n]));
+}, l = (e, t) => s(e, t) ? !0 : Array.isArray(e) && Array.isArray(t) ? e.length === t.length && e.every((e, n) => s(e, t[n])) : o(e) && o(t) && c(e, t), u = (e, t) => {
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => Object.prototype.hasOwnProperty.call(t, n) && l(e[n], t[n]));
+}, d = (t, n) => ({
+	nodes: e(t.nodes),
+	edges: e(t.edges),
+	groups: e(t.groups),
+	...n,
+	nodeShape: t.nodeShape,
+	nodeSize: e(t.nodeSize),
+	edgeStyle: t.edgeStyle,
+	edgeWidth: e(t.edgeWidth),
+	edgeColor: t.edgeColor,
+	arrows: t.arrows,
+	nodeLabels: t.nodeLabels,
+	edgeLabels: t.edgeLabels,
+	highlight: t.highlight,
+	selected: e(t.selected),
+	animation: t.animation,
+	fitPadding: t.fitPadding,
+	controls: t.controls,
+	legend: e(t.legend),
+	tooltip: e(t.tooltip),
+	interaction: e(t.interaction),
+	renderer: t.renderer,
+	palette: e(t.palette),
+	ariaLabel: t.ariaLabel,
+	locale: t.locale,
+	labels: e(t.labels)
+});
+function f(e, r, a) {
+	let o = null, { setContainer: s, instance: c } = t(i, e, () => {
+		let t = d(e, r());
+		if (o && e.deep) t.nodes = [...t.nodes], t.edges = [...t.edges], t.groups &&= [...t.groups];
+		else if (o && u(o, t)) return null;
+		return o = t, t;
+	}, (e) => [
+		e.on("hover", (e) => a.hover(e)),
+		e.on("click", (e) => a.itemClick(e)),
+		e.on("select", (e) => a.selectionChange(e.ids)),
+		e.on("toggle", (e) => a.toggle(e)),
+		e.on("groupToggle", (e) => a.groupToggle(e)),
+		e.on("layoutEnd", (e) => a.layoutEnd(e)),
+		e.on("renderer", (e) => a.rendererChange(e))
+	]);
+	return {
+		setContainer: s,
+		rootStyle: n(e, 480),
+		handle: {
+			fit: (e) => c.value?.fit(e),
+			focusNode: (e, t) => c.value?.focusNode(e, t),
+			setData: (e) => c.value?.setData(e),
+			select: (e) => c.value?.select(e),
+			getSelection: () => c.value?.getSelection() ?? [],
+			expand: (e) => c.value?.expand(e),
+			collapse: (e) => c.value?.collapse(e),
+			toggle: (e) => c.value?.toggle(e),
+			getPositions: () => c.value?.getPositions() ?? {},
+			relayout: () => c.value?.relayout(),
+			getRenderer: () => c.value?.getRenderer() ?? null,
+			getInstance: () => c.value
+		}
+	};
+}
+//#endregion
+export { a as graphCommonProps, d as graphOptions, u as sameGraphOptions, f as useGraphChart };
+
+//# sourceMappingURL=graph.js.map

package/dist/vue/components/Chart/graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.js","names":["graphCommonProps","chartFrameProps","isPlainObject","value","proto","same","raw","a","b","shallowEqual","keys","key","sameValue","v","i","sameGraphOptions","graphOptions","props","layout","useGraphChart","previous","useChartEngine","createGraphChart","next","chart","emit","event","renderer","useRootStyle","instance","animate","id","options","data","ids"],"sources":["../../../../../vue/src/components/Chart/graph.ts"],"sourcesContent":["import type { PropType } from \"vue\";\nimport {\n  createGraphChart,\n  type ChartRendererKind,\n  type ChartRendererPreference,\n  type GraphChartInstance,\n  type GraphChartLabels,\n  type GraphChartOptions,\n  type GraphEdge,\n  type GraphEdgeStyle,\n  type GraphGroup,\n  type GraphGroupToggleEvent,\n  type GraphHoverEvent,\n  type GraphInteractionOptions,\n  type GraphLayoutEndEvent,\n  type GraphLegendOptions,\n  type GraphNode,\n  type GraphNodeShape,\n  type GraphToggleEvent,\n  type GraphTooltipOptions,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, useRootStyle } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport type { GraphChartHandle } from \"./types\";\n\n/** Props shared by GraphChart, DependencyGraph and TreeChart */\nexport const graphCommonProps = {\n  ...chartFrameProps,\n  /** The nodes (a new array re-runs the layout; an array rebuilt with the same node objects does not) */\n  nodes: { type: Array as PropType<readonly GraphNode[]>, required: true },\n  /** The edges (parent → child in trees, prerequisite → dependent in DAGs) */\n  edges: { type: Array as PropType<readonly GraphEdge[]>, required: true },\n  /** Groups: legend order, names and colors */\n  groups: Array as PropType<readonly GraphGroup[]>,\n  /** Shape of the nodes without `shape` (boxes for DAGs, org charts and mind maps, circles otherwise) */\n  nodeShape: String as PropType<GraphNodeShape>,\n  /** Circle diameter in layout units, or `[min, max]` scaled by the node `value` */\n  nodeSize: [Number, Array] as PropType<number | readonly [number, number]>,\n  /** Edge shape; depends on the layout when omitted */\n  edgeStyle: String as PropType<GraphEdgeStyle>,\n  /** Edge width in CSS pixels, or `[min, max]` scaled by the edge `value` */\n  edgeWidth: [Number, Array] as PropType<number | readonly [number, number]>,\n  /** Edge colors: neutral or tinted with the source / target node (default `neutral`) */\n  edgeColor: String as PropType<\"neutral\" | \"source\" | \"target\">,\n  /** Arrowheads on the edges without `directed` (on for DAGs) */\n  arrows: { type: Boolean, default: undefined },\n  /** Node labels; `auto` hides minor and overlapping labels when zoomed out (default `auto`) */\n  nodeLabels: {\n    type: [Boolean, String] as PropType<boolean | \"auto\">,\n    default: undefined,\n  },\n  /** Edge labels: always, `auto` (zoomed in or highlighted), only `hover`, or never (default `auto`) */\n  edgeLabels: {\n    type: [Boolean, String] as PropType<boolean | \"auto\" | \"hover\">,\n    default: undefined,\n  },\n  /** What hovering / selecting a node highlights */\n  highlight: String as PropType<\"neighbors\" | \"lineage\" | \"none\">,\n  /** Ids of the selected nodes (changing it updates the selection) */\n  selected: Array as PropType<readonly string[]>,\n  /** Animates layout and data changes; a number is the duration in ms (default `true`) */\n  animation: {\n    type: [Boolean, Number] as PropType<boolean | number>,\n    default: undefined,\n  },\n  /** Padding around the graph when fitting it, in CSS pixels (default 24) */\n  fitPadding: Number,\n  /** Zoom buttons (zoom in, zoom out, fit; default `true`) */\n  controls: { type: Boolean, default: undefined },\n  /** Legend of the groups; shown by default with several groups */\n  legend: {\n    type: [Boolean, Object] as PropType<boolean | GraphLegendOptions>,\n    default: undefined,\n  },\n  /** Tooltip; `false` disables it */\n  tooltip: {\n    type: [Boolean, Object] as PropType<boolean | GraphTooltipOptions>,\n    default: undefined,\n  },\n  /** Drag pans, Ctrl / ⌘ + wheel and pinch zoom, nodes can be dragged, click selects, arrow keys move; `false` makes the chart static (default `true`) */\n  interaction: {\n    type: [Boolean, Object] as PropType<boolean | GraphInteractionOptions>,\n    default: undefined,\n  },\n  /** Backend of the nodes and edges: `auto` tries WebGPU, then WebGL2, then WebGL, then Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Group colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */\n  palette: Array as PropType<readonly string[]>,\n  /** Accessible name of the chart */\n  ariaLabel: String,\n  /** Language of the built-in texts (summary, announcements, tooltip, buttons); the page language by default */\n  locale: String,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<GraphChartLabels>>,\n} as const;\n\n/** Values of `graphCommonProps` */\nexport interface GraphCommonProps {\n  nodes: readonly GraphNode[];\n  edges: readonly GraphEdge[];\n  groups?: readonly GraphGroup[];\n  height?: number | string;\n  width?: number | string;\n  deep?: boolean;\n  nodeShape?: GraphNodeShape;\n  nodeSize?: number | readonly [number, number];\n  edgeStyle?: GraphEdgeStyle;\n  edgeWidth?: number | readonly [number, number];\n  edgeColor?: \"neutral\" | \"source\" | \"target\";\n  arrows?: boolean;\n  nodeLabels?: boolean | \"auto\";\n  edgeLabels?: boolean | \"auto\" | \"hover\";\n  highlight?: \"neighbors\" | \"lineage\" | \"none\";\n  selected?: readonly string[];\n  animation?: boolean | number;\n  fitPadding?: number;\n  controls?: boolean;\n  legend?: boolean | GraphLegendOptions;\n  tooltip?: boolean | GraphTooltipOptions;\n  interaction?: boolean | GraphInteractionOptions;\n  renderer?: ChartRendererPreference;\n  palette?: readonly string[];\n  ariaLabel?: string;\n  locale?: string;\n  labels?: Partial<GraphChartLabels>;\n}\n\n/** Layout part of the options (what each component sets) */\nexport type GraphLayoutOptions = Pick<\n  GraphChartOptions,\n  \"layout\" | \"direction\" | \"force\" | \"circular\" | \"dag\" | \"tree\"\n>;\n\n/** Engine events re-emitted by the graph components */\nexport interface GraphHandlers {\n  hover: (event: GraphHoverEvent | null) => void;\n  itemClick: (event: GraphHoverEvent) => void;\n  selectionChange: (ids: string[]) => void;\n  toggle: (event: GraphToggleEvent) => void;\n  groupToggle: (event: GraphGroupToggleEvent) => void;\n  layoutEnd: (event: GraphLayoutEndEvent) => void;\n  rendererChange: (renderer: ChartRendererKind) => void;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> => {\n  if (typeof value !== \"object\" || value === null) return false;\n  const proto = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n};\n\nconst same = (a: unknown, b: unknown) => raw(a) === raw(b);\n\nconst shallowEqual = (\n  a: Record<string, unknown>,\n  b: Record<string, unknown>,\n): boolean => {\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every(\n      (key) =>\n        Object.prototype.hasOwnProperty.call(b, key) && same(a[key], b[key]),\n    )\n  );\n};\n\nconst sameValue = (a: unknown, b: unknown): boolean => {\n  if (same(a, b)) return true;\n  if (Array.isArray(a) && Array.isArray(b))\n    return a.length === b.length && a.every((v, i) => same(v, b[i]));\n  return isPlainObject(a) && isPlainObject(b) && shallowEqual(a, b);\n};\n\n/**\n * Whether two option objects describe the same chart: top-level values by\n * identity, one level deep for inline arrays / objects (node and edge\n * arrays rebuilt with the same objects are the same data, so the layout is\n * not run again), like the React components\n */\nexport const sameGraphOptions = (\n  a: GraphChartOptions,\n  b: GraphChartOptions,\n): boolean => {\n  const keys = Object.keys(a) as (keyof GraphChartOptions)[];\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every(\n      (key) =>\n        Object.prototype.hasOwnProperty.call(b, key) &&\n        sameValue(a[key], b[key]),\n    )\n  );\n};\n\n/** Engine options of the common props and the layout of a component */\nexport const graphOptions = (\n  props: GraphCommonProps,\n  layout: GraphLayoutOptions,\n): GraphChartOptions => ({\n  nodes: raw(props.nodes),\n  edges: raw(props.edges),\n  groups: raw(props.groups),\n  ...layout,\n  nodeShape: props.nodeShape,\n  nodeSize: raw(props.nodeSize),\n  edgeStyle: props.edgeStyle,\n  edgeWidth: raw(props.edgeWidth),\n  edgeColor: props.edgeColor,\n  arrows: props.arrows,\n  nodeLabels: props.nodeLabels,\n  edgeLabels: props.edgeLabels,\n  highlight: props.highlight,\n  selected: raw(props.selected),\n  animation: props.animation,\n  fitPadding: props.fitPadding,\n  controls: props.controls,\n  legend: raw(props.legend),\n  tooltip: raw(props.tooltip),\n  interaction: raw(props.interaction),\n  renderer: props.renderer,\n  palette: raw(props.palette),\n  ariaLabel: props.ariaLabel,\n  locale: props.locale,\n  labels: raw(props.labels),\n});\n\n/**\n * Engine (`createGraphChart`), root style and template handle of a graph\n * component. New options are passed only when they describe another chart\n * (`sameGraphOptions`): `setOptions` re-runs the layout when the node, edge\n * or group arrays change. With `deep`, in-place mutations of the data are\n * followed by passing copies of the arrays (the layout runs again).\n */\nexport function useGraphChart(\n  props: GraphCommonProps,\n  layout: () => GraphLayoutOptions,\n  emit: GraphHandlers,\n) {\n  let previous: GraphChartOptions | null = null;\n  const build = (): GraphChartOptions | null => {\n    const next = graphOptions(props, layout());\n    if (previous && props.deep) {\n      next.nodes = [...next.nodes];\n      next.edges = [...next.edges];\n      if (next.groups) next.groups = [...next.groups];\n    } else if (previous && sameGraphOptions(previous, next)) return null;\n    previous = next;\n    return next;\n  };\n  const { setContainer, instance } = useChartEngine<\n    GraphChartOptions,\n    GraphChartInstance\n  >(createGraphChart, props, build, (chart) => [\n    chart.on(\"hover\", (event) => emit.hover(event)),\n    chart.on(\"click\", (event) => emit.itemClick(event)),\n    chart.on(\"select\", (event) => emit.selectionChange(event.ids)),\n    chart.on(\"toggle\", (event) => emit.toggle(event)),\n    chart.on(\"groupToggle\", (event) => emit.groupToggle(event)),\n    chart.on(\"layoutEnd\", (event) => emit.layoutEnd(event)),\n    chart.on(\"renderer\", (renderer) => emit.rendererChange(renderer)),\n  ]);\n  const handle: GraphChartHandle = {\n    fit: (animate) => instance.value?.fit(animate),\n    focusNode: (id, options) => instance.value?.focusNode(id, options),\n    setData: (data) => instance.value?.setData(data),\n    select: (ids) => instance.value?.select(ids),\n    getSelection: () => instance.value?.getSelection() ?? [],\n    expand: (id) => instance.value?.expand(id),\n    collapse: (id) => instance.value?.collapse(id),\n    toggle: (id) => instance.value?.toggle(id),\n    getPositions: () => instance.value?.getPositions() ?? {},\n    relayout: () => instance.value?.relayout(),\n    getRenderer: () => instance.value?.getRenderer() ?? null,\n    getInstance: () => instance.value,\n  };\n  return { setContainer, rootStyle: useRootStyle(props, 480), handle };\n}\n"],"mappings":"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"}

package/dist/vue/components/Chart/index.d.ts

@@ -0,0 +1,45 @@
+import { default as Chart } from './Chart.vue.js';
+import { default as LineChart } from './LineChart.vue.js';
+import { default as AreaChart } from './AreaChart.vue.js';
+import { default as BarChart } from './BarChart.vue.js';
+import { default as ScatterChart } from './ScatterChart.vue.js';
+import { default as CandlestickChart } from './CandlestickChart.vue.js';
+import { default as HeatmapChart } from './HeatmapChart.vue.js';
+import { default as Sparkline } from './Sparkline.vue.js';
+import { default as QuadrantChart } from './QuadrantChart.vue.js';
+import { default as ShapeChart } from './ShapeChart.vue.js';
+import { default as PieChart } from './PieChart.vue.js';
+import { default as DonutChart } from './DonutChart.vue.js';
+import { default as RadarChart } from './RadarChart.vue.js';
+import { default as GaugeChart } from './GaugeChart.vue.js';
+import { default as FunnelChart } from './FunnelChart.vue.js';
+import { default as TreemapChart } from './TreemapChart.vue.js';
+import { default as HorizontalBarChart } from './HorizontalBarChart.vue.js';
+import { default as RangeAreaChart } from './RangeAreaChart.vue.js';
+import { default as MixedChart } from './MixedChart.vue.js';
+import { default as BubbleChart } from './BubbleChart.vue.js';
+import { default as HistogramChart } from './HistogramChart.vue.js';
+import { default as BoxPlotChart } from './BoxPlotChart.vue.js';
+import { default as WaterfallChart } from './WaterfallChart.vue.js';
+import { default as GanttChart } from './GanttChart.vue.js';
+import { default as SankeyChart } from './SankeyChart.vue.js';
+import { default as SunburstChart } from './SunburstChart.vue.js';
+import { default as RadialBarChart } from './RadialBarChart.vue.js';
+import { default as CalendarHeatmap } from './CalendarHeatmap.vue.js';
+import { default as BulletChart } from './BulletChart.vue.js';
+import { default as TradingChart } from './TradingChart.vue.js';
+import { default as DepthChart } from './DepthChart.vue.js';
+import { default as OrderBook } from './OrderBook.vue.js';
+import { default as OrderBookHeatmap } from './OrderBookHeatmap.vue.js';
+import { default as TimeAndSales } from './TimeAndSales.vue.js';
+import { default as Scatter3DChart } from './Scatter3DChart.vue.js';
+import { default as Line3DChart } from './Line3DChart.vue.js';
+import { default as Surface3DChart } from './Surface3DChart.vue.js';
+import { default as Bar3DChart } from './Bar3DChart.vue.js';
+import { default as ChordChart } from './ChordChart.vue.js';
+import { default as GraphChart } from './GraphChart.vue.js';
+import { default as DependencyGraph } from './DependencyGraph.vue.js';
+import { default as TreeChart } from './TreeChart.vue.js';
+export { Chart, LineChart, AreaChart, BarChart, ScatterChart, CandlestickChart, HeatmapChart, Sparkline, QuadrantChart, ShapeChart, PieChart, DonutChart, RadarChart, GaugeChart, FunnelChart, TreemapChart, HorizontalBarChart, RangeAreaChart, MixedChart, BubbleChart, HistogramChart, BoxPlotChart, WaterfallChart, GanttChart, SankeyChart, SunburstChart, RadialBarChart, CalendarHeatmap, BulletChart, TradingChart, DepthChart, OrderBook, OrderBookHeatmap, TimeAndSales, Scatter3DChart, Line3DChart, Surface3DChart, Bar3DChart, ChordChart, GraphChart, DependencyGraph, TreeChart, };
+export { useChartEngine, type EngineInstance } from './engine.js';
+export type * from './types.js';

package/dist/vue/components/Chart/index.js

@@ -0,0 +1,44 @@
+import { useChartEngine as e } from "./engine.js";
+import t from "./Chart.vue.js";
+import n from "./LineChart.vue.js";
+import r from "./AreaChart.vue.js";
+import i from "./BarChart.vue.js";
+import a from "./ScatterChart.vue.js";
+import o from "./CandlestickChart.vue.js";
+import s from "./HeatmapChart.vue.js";
+import c from "./Sparkline.vue.js";
+import l from "./QuadrantChart.vue.js";
+import u from "./ShapeChart.vue.js";
+import d from "./PieChart.vue.js";
+import f from "./DonutChart.vue.js";
+import p from "./RadarChart.vue.js";
+import m from "./GaugeChart.vue.js";
+import h from "./FunnelChart.vue.js";
+import g from "./TreemapChart.vue.js";
+import _ from "./HorizontalBarChart.vue.js";
+import v from "./RangeAreaChart.vue.js";
+import y from "./MixedChart.vue.js";
+import b from "./BubbleChart.vue.js";
+import x from "./HistogramChart.vue.js";
+import S from "./BoxPlotChart.vue.js";
+import C from "./WaterfallChart.vue.js";
+import w from "./GanttChart.vue.js";
+import T from "./SankeyChart.vue.js";
+import E from "./SunburstChart.vue.js";
+import D from "./RadialBarChart.vue.js";
+import O from "./CalendarHeatmap.vue.js";
+import k from "./BulletChart.vue.js";
+import A from "./TradingChart.vue.js";
+import j from "./DepthChart.vue.js";
+import M from "./OrderBook.vue.js";
+import N from "./OrderBookHeatmap.vue.js";
+import P from "./TimeAndSales.vue.js";
+import F from "./Scatter3DChart.vue.js";
+import I from "./Line3DChart.vue.js";
+import L from "./Surface3DChart.vue.js";
+import R from "./Bar3DChart.vue.js";
+import z from "./ChordChart.vue.js";
+import B from "./GraphChart.vue.js";
+import V from "./DependencyGraph.vue.js";
+import H from "./TreeChart.vue.js";
+export { r as AreaChart, R as Bar3DChart, i as BarChart, S as BoxPlotChart, b as BubbleChart, k as BulletChart, O as CalendarHeatmap, o as CandlestickChart, t as Chart, z as ChordChart, V as DependencyGraph, j as DepthChart, f as DonutChart, h as FunnelChart, w as GanttChart, m as GaugeChart, B as GraphChart, s as HeatmapChart, x as HistogramChart, _ as HorizontalBarChart, I as Line3DChart, n as LineChart, y as MixedChart, M as OrderBook, N as OrderBookHeatmap, d as PieChart, l as QuadrantChart, p as RadarChart, D as RadialBarChart, v as RangeAreaChart, T as SankeyChart, F as Scatter3DChart, a as ScatterChart, u as ShapeChart, c as Sparkline, E as SunburstChart, L as Surface3DChart, P as TimeAndSales, A as TradingChart, H as TreeChart, g as TreemapChart, C as WaterfallChart, e as useChartEngine };