minerva-design 1.4.0 → 1.6.0

package/dist/vue/components/Chart/WaterfallChart.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"WaterfallChart.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_createElementVNode","WaterfallChart_vue_vue_type_script_setup_true_lang_default","chartCommonProps","chartAxisProps","chartOrientationProp","__expose","__emit","props","__props","emit","useCartesianChart","engineOptions","waterfallSeries","raw","event","view","renderer","handle","openBlock","createElementBlock","normalizeStyle","unref","rootStyle","createElementVNode","setContainer","\"position\"","\"inset\""],"sources":["../../../../../vue/src/components/Chart/WaterfallChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport {\n  waterfallSeries,\n  type WaterfallStep,\n  type ChartHoverEvent,\n  type ChartPlotClickEvent,\n  type ChartRendererKind,\n  type ChartView,\n} from \"minerva-design/charts/core\";\nimport { engineOptions, useCartesianChart } from \"./cartesian\";\nimport { raw } from \"./engine\";\nimport {\n  chartAxisProps,\n  chartCommonProps,\n  chartOrientationProp,\n} from \"./props\";\n\n/**\n * Waterfall (bridge) chart: how changes take a value from a start to an\n * end, with subtotals and totals (P&L bridges, budget variances)\n */\ndefineOptions({ name: \"WaterfallChart\" });\nconst props = defineProps({\n  ...chartCommonProps,\n  ...chartAxisProps,\n  ...chartOrientationProp,\n  /** Changes, subtotals and totals, in order */\n  steps: { type: Array as PropType<readonly WaterfallStep[]>, required: true },\n  /** Name of the series (tooltip; default \"Change\") */\n  name: String,\n  /** Color of the increases (the success color by default) */\n  upColor: String,\n  /** Color of the decreases (the danger color by default) */\n  downColor: String,\n  /** Color of the totals and subtotals (the primary color by default) */\n  totalColor: String,\n  /** Value the first change starts from (default 0) */\n  start: Number,\n  /** Writes the change (or the total) at the end of every bar */\n  labels: { type: Boolean, default: true },\n  /** Formats the values (labels, tooltip) */\n  format: Function as PropType<(value: number) => string>,\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) bars changed (`null`: none) */\n  hover: [event: ChartHoverEvent | null];\n  /** A bar was clicked */\n  pointClick: [event: ChartHoverEvent];\n  /** The plot area was clicked where there is no bar */\n  plotClick: [event: ChartPlotClickEvent];\n  /** The user zoomed or panned */\n  zoom: [view: ChartView];\n  /** The backend is ready (or fell back after a GPU loss) */\n  rendererChange: [renderer: ChartRendererKind];\n}>();\nconst { setContainer, rootStyle, handle } = useCartesianChart(\n  props,\n  () =>\n    engineOptions(props, [\n      waterfallSeries(raw(props.steps), {\n        name: props.name,\n        upColor: props.upColor,\n        downColor: props.downColor,\n        totalColor: props.totalColor,\n        start: props.start,\n        labels: props.labels,\n        format: props.format,\n      }),\n    ]),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => emit(\"pointClick\", event),\n    plotClick: (event) => emit(\"plotClick\", event),\n    zoom: (view) => emit(\"zoom\", view),\n    renderer: (renderer) => emit(\"rendererChange\", renderer),\n  },\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div class=\"mn-chart\" data-minerva=\"chart\" :style=\"rootStyle\">\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAMW,IAAQC,GAqBRC,IAAOH,GAYP,EAAE,iBAAc,cAAW,cAAWI,EAC1CH,SAEEI,EAAcJ,GAAO,CACnBK,EAAgBC,EAAIN,EAAM,KAAK,GAAG;GAChC,MAAMA,EAAM;GACZ,SAASA,EAAM;GACf,WAAWA,EAAM;GACjB,YAAYA,EAAM;GAClB,OAAOA,EAAM;GACb,QAAQA,EAAM;GACd,QAAQA,EAAM;EAChB,CAAC,CACH,CAAC,GACH;GACE,QAAQ,MAAUE,EAAK,SAASK,CAAK;GACrC,QAAQ,MAAUL,EAAK,cAAcK,CAAK;GAC1C,YAAY,MAAUL,EAAK,aAAaK,CAAK;GAC7C,OAAO,MAASL,EAAK,QAAQM,CAAI;GACjC,WAAW,MAAaN,EAAK,kBAAkBO,CAAQ;EACzD,CACF;SACAX,EAAaY,CAAM,cAIjBrB,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAAW,gBAAa;GAAS,OAAKC,EAAEC,EAAAuB,CAAA,CAAS;EAC1DtB,GAAAA,CAAAA,EAAoE,OAAA;GAA9D,KAAKD,EAAAyB,CAAA;GAAc,OAAA;IAAAC,UAAA;IAAAC,OAAA;GAAA"}
+{"version":3,"file":"WaterfallChart.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_createElementVNode","WaterfallChart_vue_vue_type_script_setup_true_lang_default","chartCommonProps","chartAxisProps","chartOrientationProp","__expose","__emit","props","__props","emit","useCartesianChart","engineOptions","waterfallSeries","raw","event","view","renderer","handle","openBlock","createElementBlock","normalizeStyle","unref","rootStyle","createElementVNode","setContainer","\"position\"","\"inset\""],"sources":["../../../../../vue/src/components/Chart/WaterfallChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport {\n  waterfallSeries,\n  type WaterfallStep,\n  type ChartConnectorOptions,\n  type ChartHoverEvent,\n  type ChartPlotClickEvent,\n  type ChartRendererKind,\n  type ChartView,\n} from \"minerva-design/charts/core\";\nimport { engineOptions, useCartesianChart } from \"./cartesian\";\nimport { raw } from \"./engine\";\nimport {\n  chartAxisProps,\n  chartCommonProps,\n  chartOrientationProp,\n} from \"./props\";\n\n/**\n * Waterfall (bridge) chart: how changes take a value from a start to an\n * end, with subtotals and totals (P&L bridges, budget variances)\n */\ndefineOptions({ name: \"WaterfallChart\" });\nconst props = defineProps({\n  ...chartCommonProps,\n  ...chartAxisProps,\n  ...chartOrientationProp,\n  /** Changes, subtotals and totals, in order */\n  steps: { type: Array as PropType<readonly WaterfallStep[]>, required: true },\n  /** Name of the series (tooltip; default \"Change\") */\n  name: String,\n  /** Color of the increases (the success color by default) */\n  upColor: String,\n  /** Color of the decreases (the danger color by default) */\n  downColor: String,\n  /** Color of the totals and subtotals (the primary color by default) */\n  totalColor: String,\n  /** Value the first change starts from (default 0) */\n  start: Number,\n  /** Writes the change (or the total) at the end of every bar */\n  labels: { type: Boolean, default: true },\n  /** Formats the values (labels, tooltip) */\n  format: Function as PropType<(value: number) => string>,\n  /** Thin lines from the end of every bar to the next one; an object styles them (default `true`: dashed, secondary text color) */\n  connector: {\n    type: [Boolean, Object] as PropType<boolean | ChartConnectorOptions>,\n    default: undefined,\n  },\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) bars changed (`null`: none) */\n  hover: [event: ChartHoverEvent | null];\n  /** A bar was clicked */\n  pointClick: [event: ChartHoverEvent];\n  /** The plot area was clicked where there is no bar */\n  plotClick: [event: ChartPlotClickEvent];\n  /** The user zoomed or panned */\n  zoom: [view: ChartView];\n  /** The backend is ready (or fell back after a GPU loss) */\n  rendererChange: [renderer: ChartRendererKind];\n}>();\nconst { setContainer, rootStyle, handle } = useCartesianChart(\n  props,\n  () =>\n    engineOptions(props, [\n      waterfallSeries(raw(props.steps), {\n        name: props.name,\n        upColor: props.upColor,\n        downColor: props.downColor,\n        totalColor: props.totalColor,\n        start: props.start,\n        labels: props.labels,\n        format: props.format,\n        connector: raw(props.connector),\n        locale: props.locale,\n      }),\n    ]),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => emit(\"pointClick\", event),\n    plotClick: (event) => emit(\"plotClick\", event),\n    zoom: (view) => emit(\"zoom\", view),\n    renderer: (renderer) => emit(\"rendererChange\", renderer),\n  },\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div class=\"mn-chart\" data-minerva=\"chart\" :style=\"rootStyle\">\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAMW,IAAQC,GA0BRC,IAAOH,GAYP,EAAE,iBAAc,cAAW,cAAWI,EAC1CH,SAEEI,EAAcJ,GAAO,CACnBK,EAAgBC,EAAIN,EAAM,KAAK,GAAG;GAChC,MAAMA,EAAM;GACZ,SAASA,EAAM;GACf,WAAWA,EAAM;GACjB,YAAYA,EAAM;GAClB,OAAOA,EAAM;GACb,QAAQA,EAAM;GACd,QAAQA,EAAM;GACd,WAAWM,EAAIN,EAAM,SAAS;GAC9B,QAAQA,EAAM;EAChB,CAAC,CACH,CAAC,GACH;GACE,QAAQ,MAAUE,EAAK,SAASK,CAAK;GACrC,QAAQ,MAAUL,EAAK,cAAcK,CAAK;GAC1C,YAAY,MAAUL,EAAK,aAAaK,CAAK;GAC7C,OAAO,MAASL,EAAK,QAAQM,CAAI;GACjC,WAAW,MAAaN,EAAK,kBAAkBO,CAAQ;EACzD,CACF;SACAX,EAAaY,CAAM,cAIjBrB,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAAW,gBAAa;GAAS,OAAKC,EAAEC,EAAAuB,CAAA,CAAS;EAC1DtB,GAAAA,CAAAA,EAAoE,OAAA;GAA9D,KAAKD,EAAAyB,CAAA;GAAc,OAAA;IAAAC,UAAA;IAAAC,OAAA;GAAA"}

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

@@ -0,0 +1,156 @@
+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;
+    };
+    /** Shape of the arrowheads: `open` (a slim outlined head) or `filled` (a solid head in the edge color; default `open`) */
+    readonly arrowStyle: PropType<"open" | "filled">;
+    /** 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;
+    arrowStyle?: "open" | "filled";
+    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,137 @@
+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
+	},
+	arrowStyle: String,
+	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,
+	arrowStyle: t.arrowStyle,
+	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  /** Shape of the arrowheads: `open` (a slim outlined head) or `filled` (a solid head in the edge color; default `open`) */\n  arrowStyle: String as PropType<\"open\" | \"filled\">,\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  arrowStyle?: \"open\" | \"filled\";\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  arrowStyle: props.arrowStyle,\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":";;;;AA0BA,IAAaA,IAAmB;CAC9B,GAAGC;CAEH,OAAO;EAAE,MAAM;EAAyC,UAAU;CAAK;CAEvE,OAAO;EAAE,MAAM;EAAyC,UAAU;CAAK;CAEvE,QAAQ;CAER,WAAW;CAEX,UAAU,CAAC,QAAQ,KAAK;CAExB,WAAW;CAEX,WAAW,CAAC,QAAQ,KAAK;CAEzB,WAAW;CAEX,QAAQ;EAAE,MAAM;EAAS,SAAS,KAAA;CAAU;CAE5C,YAAY;CAEZ,YAAY;EACV,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,YAAY;EACV,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,WAAW;CAEX,UAAU;CAEV,WAAW;EACT,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,YAAY;CAEZ,UAAU;EAAE,MAAM;EAAS,SAAS,KAAA;CAAU;CAE9C,QAAQ;EACN,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,SAAS;EACP,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,aAAa;EACX,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,UAAU;CAEV,SAAS;CAET,WAAW;CAEX,QAAQ;CAER,QAAQ;AACV,GAmDMC,KAAiB,MAAqD;CAC1E,IAAI,OAAOC,KAAU,aAAYA,GAAgB,OAAO;CACxD,IAAMC,IAAQ,OAAO,eAAeD,CAAK;CACzC,OAAOC,MAAU,OAAO,aAAaA,MAAU;AACjD,GAEMC,KAAQ,GAAY,MAAeC,EAAIC,CAAC,MAAMD,EAAIE,CAAC,GAEnDC,KACJ,GACA,MACY;CACZ,IAAMC,IAAO,OAAO,KAAKH,CAAC;CAC1B,OACEG,EAAK,WAAW,OAAO,KAAKF,CAAC,CAAC,CAAC,UAC/BE,EAAK,OACF,MACC,OAAO,UAAU,eAAe,KAAKF,GAAGG,CAAG,KAAKN,EAAKE,EAAEI,IAAMH,EAAEG,EAAI,CACvE;AAEJ,GAEMC,KAAa,GAAY,MACzBP,EAAKE,GAAGC,CAAC,IAAU,KACnB,MAAM,QAAQD,CAAC,KAAK,MAAM,QAAQC,CAAC,IAC9BD,EAAE,WAAWC,EAAE,UAAUD,EAAE,OAAO,GAAG,MAAMF,EAAKQ,GAAGL,EAAEM,EAAE,CAAC,IAC1DZ,EAAcK,CAAC,KAAKL,EAAcM,CAAC,KAAKC,EAAaF,GAAGC,CAAC,GASrDO,KACX,GACA,MACY;CACZ,IAAML,IAAO,OAAO,KAAKH,CAAC;CAC1B,OACEG,EAAK,WAAW,OAAO,KAAKF,CAAC,CAAC,CAAC,UAC/BE,EAAK,OACF,MACC,OAAO,UAAU,eAAe,KAAKF,GAAGG,CAAG,KAC3CC,EAAUL,EAAEI,IAAMH,EAAEG,EAAI,CAC5B;AAEJ,GAGaK,KACX,GACA,OACuB;CACvB,OAAOV,EAAIW,EAAM,KAAK;CACtB,OAAOX,EAAIW,EAAM,KAAK;CACtB,QAAQX,EAAIW,EAAM,MAAM;CACxB,GAAGC;CACH,WAAWD,EAAM;CACjB,UAAUX,EAAIW,EAAM,QAAQ;CAC5B,WAAWA,EAAM;CACjB,WAAWX,EAAIW,EAAM,SAAS;CAC9B,WAAWA,EAAM;CACjB,QAAQA,EAAM;CACd,YAAYA,EAAM;CAClB,YAAYA,EAAM;CAClB,YAAYA,EAAM;CAClB,WAAWA,EAAM;CACjB,UAAUX,EAAIW,EAAM,QAAQ;CAC5B,WAAWA,EAAM;CACjB,YAAYA,EAAM;CAClB,UAAUA,EAAM;CAChB,QAAQX,EAAIW,EAAM,MAAM;CACxB,SAASX,EAAIW,EAAM,OAAO;CAC1B,aAAaX,EAAIW,EAAM,WAAW;CAClC,UAAUA,EAAM;CAChB,SAASX,EAAIW,EAAM,OAAO;CAC1B,WAAWA,EAAM;CACjB,QAAQA,EAAM;CACd,QAAQX,EAAIW,EAAM,MAAM;AAC1B;AASA,SAAgBE,EACd,GACA,GACA,GACA;CACA,IAAIC,IAAqC,MAWnC,EAAE,iBAAc,gBAAaC,EAGjCC,GAAkBL,SAb0B;EAC5C,IAAMM,IAAOP,EAAaC,GAAOC,EAAO,CAAC;EACzC,IAAIE,KAAYH,EAAM,MAGpB,AAFA,EAAK,QAAQ,CAAC,GAAGM,EAAK,KAAK,GAC3B,EAAK,QAAQ,CAAC,GAAGA,EAAK,KAAK,GAC3B,AAAiBA,EAAK,WAAS,CAAC,GAAGA,EAAK,MAAM;OACzC,IAAIH,KAAYL,EAAiBK,GAAUG,CAAI,GAAG,OAAO;EAEhE,OADA,IAAWA,GACJA;CACT,IAImC,MAAU;EAC3CC,EAAM,GAAG,UAAU,MAAUC,EAAK,MAAMC,CAAK,CAAC;EAC9CF,EAAM,GAAG,UAAU,MAAUC,EAAK,UAAUC,CAAK,CAAC;EAClDF,EAAM,GAAG,WAAW,MAAUC,EAAK,gBAAgBC,EAAM,GAAG,CAAC;EAC7DF,EAAM,GAAG,WAAW,MAAUC,EAAK,OAAOC,CAAK,CAAC;EAChDF,EAAM,GAAG,gBAAgB,MAAUC,EAAK,YAAYC,CAAK,CAAC;EAC1DF,EAAM,GAAG,cAAc,MAAUC,EAAK,UAAUC,CAAK,CAAC;EACtDF,EAAM,GAAG,aAAa,MAAaC,EAAK,eAAeE,CAAQ,CAAC;CAClE,CAAC;CAeD,OAAO;EAAE;EAAc,WAAWC,EAAaX,GAAO,GAAG;EAAG,QAAA;GAb1D,MAAM,MAAYY,EAAS,OAAO,IAAIC,CAAO;GAC7C,YAAY,GAAI,MAAYD,EAAS,OAAO,UAAUE,GAAIC,CAAO;GACjE,UAAU,MAASH,EAAS,OAAO,QAAQI,CAAI;GAC/C,SAAS,MAAQJ,EAAS,OAAO,OAAOK,CAAG;GAC3C,oBAAoBL,EAAS,OAAO,aAAa,KAAK,CAAC;GACvD,SAAS,MAAOA,EAAS,OAAO,OAAOE,CAAE;GACzC,WAAW,MAAOF,EAAS,OAAO,SAASE,CAAE;GAC7C,SAAS,MAAOF,EAAS,OAAO,OAAOE,CAAE;GACzC,oBAAoBF,EAAS,OAAO,aAAa,KAAK,CAAC;GACvD,gBAAgBA,EAAS,OAAO,SAAS;GACzC,mBAAmBA,EAAS,OAAO,YAAY,KAAK;GACpD,mBAAmBA,EAAS;EAE8B;CAAO;AACrE"}

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

@@ -36,6 +36,10 @@ 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';
-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, };
+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

@@ -37,4 +37,8 @@ import F from "./Scatter3DChart.vue.js";
 import I from "./Line3DChart.vue.js";
 import L from "./Surface3DChart.vue.js";
 import R from "./Bar3DChart.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, j as DepthChart, f as DonutChart, h as FunnelChart, w as GanttChart, m as GaugeChart, 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, g as TreemapChart, C as WaterfallChart, e as useChartEngine };
+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 };

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ChartRendererPreference, DepthChartLabels, DepthChartPriceLine, OrderBookColorConvention, OrderBookDelta, OrderBookHeatmapLabels, OrderBookHeatmapScale, OrderBookLabels, OrderBookMode, OrderBookSnapshot, TimeAndSalesColumn, TimeAndSalesLabels } from '../../../charts/core.js';
+import { ChartRendererPreference, ChartTimeZone, DepthChartLabels, DepthChartPriceLine, OrderBookColorConvention, OrderBookDelta, OrderBookHeatmapLabels, OrderBookHeatmapScale, OrderBookLabels, OrderBookMode, OrderBookSnapshot, TimeAndSalesColumn, TimeAndSalesLabels } from '../../../charts/core.js';
 import { EngineInstance } from './engine.js';
 import { ChartTrades } from './types.js';
 /** Props of DepthChart */
@@ -229,6 +229,8 @@ export declare const orderBookHeatmapProps: {
     };
     /** Backend: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */
     renderer: PropType<ChartRendererPreference>;
+    /** Clock of the time axis and the tooltip: the local time or UTC, the clock of most exchanges (default `local`) */
+    timeZone: PropType<ChartTimeZone>;
     /** Overrides of the built-in texts of the `locale` */
     labels: PropType<Partial<OrderBookHeatmapLabels>>;
     /** Color of the bids / buys (any CSS color); from `colorConvention` by default */
@@ -301,6 +303,8 @@ export declare const timeAndSalesProps: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
+    /** Clock of the default time format: the local time or UTC, the clock of most exchanges (default `local`) */
+    timeZone: PropType<ChartTimeZone>;
     /** Formats the times */
     formatTime: PropType<(time: number) => string>;
     /** Overrides of the built-in texts of the `locale` */

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

@@ -81,6 +81,7 @@ var a = {
 	interactive: a,
 	tooltip: a,
 	renderer: String,
+	timeZone: String,
 	labels: Object
 }, u = {
 	...o,
@@ -96,6 +97,7 @@ var a = {
 	animate: a,
 	header: a,
 	milliseconds: a,
+	timeZone: String,
 	formatTime: Function,
 	labels: Object
 }, d = [

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

@@ -1 +1 @@
-{"version":3,"file":"orderbook.js","names":["optionalBoolean","commonProps","chartFrameProps","depthChartProps","orderBookProps","orderBookHeatmapProps","timeAndSalesProps","STREAMED","useBookWidget","previous","feed","list","raw","props","before","trades","n","engine","useChartEngine","factory","definedOptions","instance","bind","watch","book"],"sources":["../../../../../vue/src/components/Chart/orderbook.ts"],"sourcesContent":["import { watch, type PropType } from \"vue\";\nimport type {\n  ChartRendererPreference,\n  DepthChartLabels,\n  DepthChartPriceLine,\n  OrderBookColorConvention,\n  OrderBookDelta,\n  OrderBookHeatmapLabels,\n  OrderBookHeatmapScale,\n  OrderBookLabels,\n  OrderBookMode,\n  OrderBookSnapshot,\n  TimeAndSalesColumn,\n  TimeAndSalesLabels,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, type EngineInstance } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport { definedOptions } from \"./trading\";\nimport type { ChartTrades } from \"./types\";\n\nconst optionalBoolean = { type: Boolean, default: undefined } as const;\n\n/** Options shared by the order book components */\nconst commonProps = {\n  ...chartFrameProps,\n  /** Color of the bids / buys (any CSS color); from `colorConvention` by default */\n  upColor: String,\n  /** Color of the asks / sells */\n  downColor: String,\n  /** `red-up` swaps the default colors (default `green-up`) */\n  colorConvention: String as PropType<OrderBookColorConvention>,\n  /** Decimals of the prices; detected from the data by default */\n  pricePrecision: Number,\n  /** Decimals of the sizes; detected from the data by default */\n  sizePrecision: Number,\n  /** Locale of the numbers and texts (`\"zh-CN\"`); the page language by default */\n  locale: String,\n  /** Formats the prices; overrides `pricePrecision` */\n  formatPrice: Function as PropType<(price: number) => string>,\n  /** Formats the sizes; overrides `sizePrecision` */\n  formatSize: Function as PropType<(size: number) => string>,\n  /** Font family of the texts (default: the theme font) */\n  fontFamily: String,\n  /** Font size of the texts, in pixels (default 12) */\n  fontSize: Number,\n  /** Accessible label */\n  ariaLabel: String,\n};\n\n/** Props of DepthChart */\nexport const depthChartProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Visible range on each side of the mid price, as a fraction of the mid; fits the book by default */\n  range: Number,\n  /** Smallest and largest `range` reachable by zooming (default `[0.0005, 0.5]`) */\n  rangeLimits: Array as unknown as PropType<readonly [number, number]>,\n  /** Zoom around the mid with the wheel / pinch (default `true`) */\n  zoomable: optionalBoolean,\n  /** Stepped or straight curves (default `step`) */\n  curve: String as PropType<\"step\" | \"linear\">,\n  /** Cumulative amount in the base asset or the quote notional (default `base`) */\n  amount: String as PropType<\"base\" | \"quote\">,\n  /** Eased transitions between books (default `true`) */\n  animate: optionalBoolean,\n  /** Opacity of the areas, 0-1 (default 0.28) */\n  fillOpacity: Number,\n  /** Line and label at the mid price (default `true`) */\n  midLine: optionalBoolean,\n  /** Legend with the spread (default `true`) */\n  legend: optionalBoolean,\n  /** Grid lines (default `true`) */\n  grid: optionalBoolean,\n  /** Price and amount axes (default `true`) */\n  axes: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Mirrored readout on the other side (default `true`) */\n  mirror: optionalBoolean,\n  /** Reference lines at prices (an order, a liquidation) */\n  priceLines: Array as PropType<readonly DepthChartPriceLine[]>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<DepthChartLabels>>,\n};\n\n/** Props of OrderBook */\nexport const orderBookProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice: { type: Number as PropType<number | null>, default: undefined },\n  /** Sides shown (default `both`) */\n  mode: String as PropType<OrderBookMode>,\n  /** Price step the levels are grouped by (default 0: none) */\n  grouping: Number,\n  /** Rows per side; fills the height by default */\n  rows: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Depth bars behind the rows (default `cumulative`) */\n  depthBars: String as PropType<\"cumulative\" | \"level\" | \"none\">,\n  /** Total column in the base asset or the quote notional (default `base`) */\n  total: String as PropType<\"base\" | \"quote\">,\n  /** Columns, in order (default `[\"price\", \"size\", \"total\"]`) */\n  columns: Array as PropType<readonly (\"price\" | \"size\" | \"total\")[]>,\n  /** Flashes the changed sizes (default `true`) */\n  flash: optionalBoolean,\n  /** Duration of a flash, in ms (default 450) */\n  flashDuration: Number,\n  /** Highlights the levels at or above this size */\n  largeOrderThreshold: Number,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Spread row between the sides (default `true`) */\n  spreadRow: optionalBoolean,\n  /** Bid / ask imbalance bar (default `true`) */\n  imbalance: optionalBoolean,\n  /** Hover summary of the cumulative levels (default `true`) */\n  tooltip: optionalBoolean,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookLabels>>,\n};\n\n/** Props of OrderBookHeatmap */\nexport const orderBookHeatmapProps = {\n  ...commonProps,\n  /** Book, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Trades; when the array grows, only the appended ones are added */\n  trades: Array as PropType<ChartTrades>,\n  /** Price step of the rows; detected from the book by default */\n  tickSize: Number,\n  /** Duration of a column, in ms (default 100) */\n  interval: Number,\n  /** Time shown, in ms (default 60000) */\n  window: Number,\n  /** Time kept for panning back, in ms (default 300000) */\n  history: Number,\n  /** Price levels kept on each side (default 160) */\n  depth: Number,\n  /** Price range shown around the mid; from `depth` by default */\n  priceSpan: Number,\n  /** Scale of the sizes to the colors (default `log`) */\n  colorScale: String as PropType<OrderBookHeatmapScale>,\n  /** Contrast of the colors (default 1) */\n  contrast: Number,\n  /** Size drawn with the last color; follows the data by default */\n  maxSize: Number,\n  /** Colors from no liquidity to `maxSize` (any CSS colors) */\n  colors: Array as PropType<readonly string[]>,\n  /** Trades as bubbles (default `true`) */\n  bubbles: optionalBoolean,\n  /** Diameter of the largest bubble, in pixels (default 28) */\n  bubbleSize: Number,\n  /** Trade volume of the largest bubble; follows the data by default */\n  bubbleVolume: Number,\n  /** Best bid / ask lines (default `true`) */\n  bestLines: optionalBoolean,\n  /** Size profile of the current book at the right (default `true`) */\n  profile: optionalBoolean,\n  /** Zoom and pan (default `true`) */\n  interactive: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Backend: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookHeatmapLabels>>,\n};\n\n/** Props of TimeAndSales */\nexport const timeAndSalesProps = {\n  ...commonProps,\n  /** Trades, oldest first; when the array grows, only the appended ones are added (other changes replace the tape) */\n  trades: Array as PropType<ChartTrades>,\n  /** Trades kept (default 200000) */\n  capacity: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Columns, in order (default `[\"time\", \"price\", \"size\"]`) */\n  columns: Array as PropType<readonly TimeAndSalesColumn[]>,\n  /** Hides the trades below this size (default 0) */\n  minSize: Number,\n  /** Highlights the trades at or above this size */\n  largeTradeThreshold: Number,\n  /** Merges the consecutive trades of the same side and price (default `false`) */\n  aggregate: optionalBoolean,\n  /** Price color: the side of the trade or the tick direction (default `side`) */\n  priceColor: String as PropType<\"side\" | \"tick\">,\n  /** Pauses the tape while hovered (default `true`) */\n  pauseOnHover: optionalBoolean,\n  /** Slides the new rows in (default `true`) */\n  animate: optionalBoolean,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Milliseconds in the times (default `true`) */\n  milliseconds: optionalBoolean,\n  /** Formats the times */\n  formatTime: Function as PropType<(time: number) => string>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<TimeAndSalesLabels>>,\n};\n\n/** Props passed through engine methods rather than the options */\nconst STREAMED = [\"book\", \"trades\", \"lastPrice\"];\n\ninterface Widget<O> extends EngineInstance<O> {\n  setBook?(snapshot: OrderBookSnapshot): void;\n  applyDeltas?(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n}\n\n/**\n * Mounts an order book engine: the options are every set prop but the\n * streamed ones; `book` goes through `setBook` when the object changes,\n * `trades` through `add` (the appended trades) / `replace` (any other\n * change)\n */\nexport function useBookWidget<O, I extends Widget<O>>(\n  factory: (container: HTMLElement, options: O) => I,\n  props: Record<string, unknown> & {\n    book?: OrderBookSnapshot;\n    trades?: ChartTrades;\n    deep?: boolean;\n  },\n  bind: (engine: I) => Array<() => void>,\n  trades?: {\n    add: (engine: I, trades: ChartTrades) => void;\n    replace: (engine: I, trades: ChartTrades) => void;\n  },\n) {\n  let previous: ChartTrades | undefined;\n  const feed = (engine: I) => {\n    const list = raw(props.trades);\n    const before = previous;\n    previous = list;\n    if (!trades || !list || list === before) return;\n    const n = before?.length ?? 0;\n    if (\n      before &&\n      n > 0 &&\n      list.length >= n &&\n      list[0] === before[0] &&\n      list[n - 1] === before[n - 1]\n    ) {\n      if (list.length > n) trades.add(engine, list.slice(n));\n      return;\n    }\n    trades.replace(engine, list);\n  };\n  const engine = useChartEngine<O, I>(\n    factory,\n    props,\n    () => definedOptions<O>(props, STREAMED),\n    (instance) => {\n      previous = undefined;\n      if (props.book) instance.setBook?.(raw(props.book));\n      feed(instance);\n      return bind(instance);\n    },\n    () => definedOptions(props, STREAMED),\n  );\n  watch(\n    () => props.book,\n    (book) => {\n      if (book) engine.instance.value?.setBook?.(raw(book));\n    },\n  );\n  watch(\n    () => props.trades,\n    () => {\n      if (engine.instance.value) feed(engine.instance.value);\n    },\n  );\n  return engine;\n}\n"],"mappings":";;;;;AAoBA,IAAMA,IAAkB;CAAE,MAAM;CAAS,SAAS,KAAA;AAAU,GAGtDC,IAAc;CAClB,GAAGC;CAEH,SAAS;CAET,WAAW;CAEX,iBAAiB;CAEjB,gBAAgB;CAEhB,eAAe;CAEf,QAAQ;CAER,aAAa;CAEb,YAAY;CAEZ,YAAY;CAEZ,UAAU;CAEV,WAAW;AACb,GAGaC,IAAkB;CAC7B,GAAGF;CAEH,MAAM;CAEN,OAAO;CAEP,aAAa;CAEb,UAAUD;CAEV,OAAO;CAEP,QAAQ;CAER,SAASA;CAET,aAAa;CAEb,SAASA;CAET,QAAQA;CAER,MAAMA;CAEN,MAAMA;CAEN,SAASA;CAET,QAAQA;CAER,YAAY;CAEZ,QAAQ;AACV,GAGaI,IAAiB;CAC5B,GAAGH;CAEH,MAAM;CAEN,WAAW;EAAE,MAAM;EAAmC,SAAS,KAAA;CAAU;CAEzE,MAAM;CAEN,UAAU;CAEV,MAAM;CAEN,WAAW;CAEX,WAAW;CAEX,OAAO;CAEP,SAAS;CAET,OAAOD;CAEP,eAAe;CAEf,qBAAqB;CAErB,QAAQA;CAER,WAAWA;CAEX,WAAWA;CAEX,SAASA;CAET,QAAQ;AACV,GAGaK,IAAwB;CACnC,GAAGJ;CAEH,MAAM;CAEN,QAAQ;CAER,UAAU;CAEV,UAAU;CAEV,QAAQ;CAER,SAAS;CAET,OAAO;CAEP,WAAW;CAEX,YAAY;CAEZ,UAAU;CAEV,SAAS;CAET,QAAQ;CAER,SAASD;CAET,YAAY;CAEZ,cAAc;CAEd,WAAWA;CAEX,SAASA;CAET,aAAaA;CAEb,SAASA;CAET,UAAU;CAEV,QAAQ;AACV,GAGaM,IAAoB;CAC/B,GAAGL;CAEH,QAAQ;CAER,UAAU;CAEV,WAAW;CAEX,SAAS;CAET,SAAS;CAET,qBAAqB;CAErB,WAAWD;CAEX,YAAY;CAEZ,cAAcA;CAEd,SAASA;CAET,QAAQA;CAER,cAAcA;CAEd,YAAY;CAEZ,QAAQ;AACV,GAGMO,IAAW;CAAC;CAAQ;CAAU;AAAW;AAa/C,SAAgBC,EACd,GACA,GAKA,GACA,GAIA;CACA,IAAIC,GACEC,KAAQ,MAAc;EAC1B,IAAMC,IAAOC,EAAIC,EAAM,MAAM,GACvBC,IAASL;EAEf,IADA,IAAWE,GACP,CAACI,KAAU,CAACJ,KAAQA,MAASG,GAAQ;EACzC,IAAME,IAAIF,GAAQ,UAAU;EAC5B,IACEA,KACAE,IAAI,KACJL,EAAK,UAAUK,KACfL,EAAK,OAAOG,EAAO,MACnBH,EAAKK,IAAI,OAAOF,EAAOE,IAAI,IAC3B;GACA,AAAIL,EAAK,SAASK,KAAGD,EAAO,IAAIE,GAAQN,EAAK,MAAMK,CAAC,CAAC;GACrD;EACF;EACA,EAAO,QAAQC,GAAQN,CAAI;CAC7B,GACMM,IAASC,EACbC,GACAN,SACMO,EAAkBP,GAAON,CAAQ,IACtC,OACC,IAAW,KAAA,GACPM,EAAM,QAAMQ,EAAS,UAAUT,EAAIC,EAAM,IAAI,CAAC,GAClDH,EAAKW,CAAQ,GACNC,EAAKD,CAAQ,UAEhBD,EAAeP,GAAON,CAAQ,CACtC;CAaA,OAZAgB,QACQV,EAAM,OACX,MAAS;EACR,AAAIW,KAAMP,EAAO,SAAS,OAAO,UAAUL,EAAIY,CAAI,CAAC;CACtD,CACF,GACAD,QACQV,EAAM,cACN;EACJ,AAAII,EAAO,SAAS,SAAOP,EAAKO,EAAO,SAAS,KAAK;CACvD,CACF,GACOA;AACT"}
+{"version":3,"file":"orderbook.js","names":["optionalBoolean","commonProps","chartFrameProps","depthChartProps","orderBookProps","orderBookHeatmapProps","timeAndSalesProps","STREAMED","useBookWidget","previous","feed","list","raw","props","before","trades","n","engine","useChartEngine","factory","definedOptions","instance","bind","watch","book"],"sources":["../../../../../vue/src/components/Chart/orderbook.ts"],"sourcesContent":["import { watch, type PropType } from \"vue\";\nimport type {\n  ChartRendererPreference,\n  ChartTimeZone,\n  DepthChartLabels,\n  DepthChartPriceLine,\n  OrderBookColorConvention,\n  OrderBookDelta,\n  OrderBookHeatmapLabels,\n  OrderBookHeatmapScale,\n  OrderBookLabels,\n  OrderBookMode,\n  OrderBookSnapshot,\n  TimeAndSalesColumn,\n  TimeAndSalesLabels,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, type EngineInstance } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport { definedOptions } from \"./trading\";\nimport type { ChartTrades } from \"./types\";\n\nconst optionalBoolean = { type: Boolean, default: undefined } as const;\n\n/** Options shared by the order book components */\nconst commonProps = {\n  ...chartFrameProps,\n  /** Color of the bids / buys (any CSS color); from `colorConvention` by default */\n  upColor: String,\n  /** Color of the asks / sells */\n  downColor: String,\n  /** `red-up` swaps the default colors (default `green-up`) */\n  colorConvention: String as PropType<OrderBookColorConvention>,\n  /** Decimals of the prices; detected from the data by default */\n  pricePrecision: Number,\n  /** Decimals of the sizes; detected from the data by default */\n  sizePrecision: Number,\n  /** Locale of the numbers and texts (`\"zh-CN\"`); the page language by default */\n  locale: String,\n  /** Formats the prices; overrides `pricePrecision` */\n  formatPrice: Function as PropType<(price: number) => string>,\n  /** Formats the sizes; overrides `sizePrecision` */\n  formatSize: Function as PropType<(size: number) => string>,\n  /** Font family of the texts (default: the theme font) */\n  fontFamily: String,\n  /** Font size of the texts, in pixels (default 12) */\n  fontSize: Number,\n  /** Accessible label */\n  ariaLabel: String,\n};\n\n/** Props of DepthChart */\nexport const depthChartProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Visible range on each side of the mid price, as a fraction of the mid; fits the book by default */\n  range: Number,\n  /** Smallest and largest `range` reachable by zooming (default `[0.0005, 0.5]`) */\n  rangeLimits: Array as unknown as PropType<readonly [number, number]>,\n  /** Zoom around the mid with the wheel / pinch (default `true`) */\n  zoomable: optionalBoolean,\n  /** Stepped or straight curves (default `step`) */\n  curve: String as PropType<\"step\" | \"linear\">,\n  /** Cumulative amount in the base asset or the quote notional (default `base`) */\n  amount: String as PropType<\"base\" | \"quote\">,\n  /** Eased transitions between books (default `true`) */\n  animate: optionalBoolean,\n  /** Opacity of the areas, 0-1 (default 0.28) */\n  fillOpacity: Number,\n  /** Line and label at the mid price (default `true`) */\n  midLine: optionalBoolean,\n  /** Legend with the spread (default `true`) */\n  legend: optionalBoolean,\n  /** Grid lines (default `true`) */\n  grid: optionalBoolean,\n  /** Price and amount axes (default `true`) */\n  axes: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Mirrored readout on the other side (default `true`) */\n  mirror: optionalBoolean,\n  /** Reference lines at prices (an order, a liquidation) */\n  priceLines: Array as PropType<readonly DepthChartPriceLine[]>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<DepthChartLabels>>,\n};\n\n/** Props of OrderBook */\nexport const orderBookProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice: { type: Number as PropType<number | null>, default: undefined },\n  /** Sides shown (default `both`) */\n  mode: String as PropType<OrderBookMode>,\n  /** Price step the levels are grouped by (default 0: none) */\n  grouping: Number,\n  /** Rows per side; fills the height by default */\n  rows: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Depth bars behind the rows (default `cumulative`) */\n  depthBars: String as PropType<\"cumulative\" | \"level\" | \"none\">,\n  /** Total column in the base asset or the quote notional (default `base`) */\n  total: String as PropType<\"base\" | \"quote\">,\n  /** Columns, in order (default `[\"price\", \"size\", \"total\"]`) */\n  columns: Array as PropType<readonly (\"price\" | \"size\" | \"total\")[]>,\n  /** Flashes the changed sizes (default `true`) */\n  flash: optionalBoolean,\n  /** Duration of a flash, in ms (default 450) */\n  flashDuration: Number,\n  /** Highlights the levels at or above this size */\n  largeOrderThreshold: Number,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Spread row between the sides (default `true`) */\n  spreadRow: optionalBoolean,\n  /** Bid / ask imbalance bar (default `true`) */\n  imbalance: optionalBoolean,\n  /** Hover summary of the cumulative levels (default `true`) */\n  tooltip: optionalBoolean,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookLabels>>,\n};\n\n/** Props of OrderBookHeatmap */\nexport const orderBookHeatmapProps = {\n  ...commonProps,\n  /** Book, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Trades; when the array grows, only the appended ones are added */\n  trades: Array as PropType<ChartTrades>,\n  /** Price step of the rows; detected from the book by default */\n  tickSize: Number,\n  /** Duration of a column, in ms (default 100) */\n  interval: Number,\n  /** Time shown, in ms (default 60000) */\n  window: Number,\n  /** Time kept for panning back, in ms (default 300000) */\n  history: Number,\n  /** Price levels kept on each side (default 160) */\n  depth: Number,\n  /** Price range shown around the mid; from `depth` by default */\n  priceSpan: Number,\n  /** Scale of the sizes to the colors (default `log`) */\n  colorScale: String as PropType<OrderBookHeatmapScale>,\n  /** Contrast of the colors (default 1) */\n  contrast: Number,\n  /** Size drawn with the last color; follows the data by default */\n  maxSize: Number,\n  /** Colors from no liquidity to `maxSize` (any CSS colors) */\n  colors: Array as PropType<readonly string[]>,\n  /** Trades as bubbles (default `true`) */\n  bubbles: optionalBoolean,\n  /** Diameter of the largest bubble, in pixels (default 28) */\n  bubbleSize: Number,\n  /** Trade volume of the largest bubble; follows the data by default */\n  bubbleVolume: Number,\n  /** Best bid / ask lines (default `true`) */\n  bestLines: optionalBoolean,\n  /** Size profile of the current book at the right (default `true`) */\n  profile: optionalBoolean,\n  /** Zoom and pan (default `true`) */\n  interactive: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Backend: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Clock of the time axis and the tooltip: the local time or UTC, the clock of most exchanges (default `local`) */\n  timeZone: String as PropType<ChartTimeZone>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookHeatmapLabels>>,\n};\n\n/** Props of TimeAndSales */\nexport const timeAndSalesProps = {\n  ...commonProps,\n  /** Trades, oldest first; when the array grows, only the appended ones are added (other changes replace the tape) */\n  trades: Array as PropType<ChartTrades>,\n  /** Trades kept (default 200000) */\n  capacity: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Columns, in order (default `[\"time\", \"price\", \"size\"]`) */\n  columns: Array as PropType<readonly TimeAndSalesColumn[]>,\n  /** Hides the trades below this size (default 0) */\n  minSize: Number,\n  /** Highlights the trades at or above this size */\n  largeTradeThreshold: Number,\n  /** Merges the consecutive trades of the same side and price (default `false`) */\n  aggregate: optionalBoolean,\n  /** Price color: the side of the trade or the tick direction (default `side`) */\n  priceColor: String as PropType<\"side\" | \"tick\">,\n  /** Pauses the tape while hovered (default `true`) */\n  pauseOnHover: optionalBoolean,\n  /** Slides the new rows in (default `true`) */\n  animate: optionalBoolean,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Milliseconds in the times (default `true`) */\n  milliseconds: optionalBoolean,\n  /** Clock of the default time format: the local time or UTC, the clock of most exchanges (default `local`) */\n  timeZone: String as PropType<ChartTimeZone>,\n  /** Formats the times */\n  formatTime: Function as PropType<(time: number) => string>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<TimeAndSalesLabels>>,\n};\n\n/** Props passed through engine methods rather than the options */\nconst STREAMED = [\"book\", \"trades\", \"lastPrice\"];\n\ninterface Widget<O> extends EngineInstance<O> {\n  setBook?(snapshot: OrderBookSnapshot): void;\n  applyDeltas?(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n}\n\n/**\n * Mounts an order book engine: the options are every set prop but the\n * streamed ones; `book` goes through `setBook` when the object changes,\n * `trades` through `add` (the appended trades) / `replace` (any other\n * change)\n */\nexport function useBookWidget<O, I extends Widget<O>>(\n  factory: (container: HTMLElement, options: O) => I,\n  props: Record<string, unknown> & {\n    book?: OrderBookSnapshot;\n    trades?: ChartTrades;\n    deep?: boolean;\n  },\n  bind: (engine: I) => Array<() => void>,\n  trades?: {\n    add: (engine: I, trades: ChartTrades) => void;\n    replace: (engine: I, trades: ChartTrades) => void;\n  },\n) {\n  let previous: ChartTrades | undefined;\n  const feed = (engine: I) => {\n    const list = raw(props.trades);\n    const before = previous;\n    previous = list;\n    if (!trades || !list || list === before) return;\n    const n = before?.length ?? 0;\n    if (\n      before &&\n      n > 0 &&\n      list.length >= n &&\n      list[0] === before[0] &&\n      list[n - 1] === before[n - 1]\n    ) {\n      if (list.length > n) trades.add(engine, list.slice(n));\n      return;\n    }\n    trades.replace(engine, list);\n  };\n  const engine = useChartEngine<O, I>(\n    factory,\n    props,\n    () => definedOptions<O>(props, STREAMED),\n    (instance) => {\n      previous = undefined;\n      if (props.book) instance.setBook?.(raw(props.book));\n      feed(instance);\n      return bind(instance);\n    },\n    () => definedOptions(props, STREAMED),\n  );\n  watch(\n    () => props.book,\n    (book) => {\n      if (book) engine.instance.value?.setBook?.(raw(book));\n    },\n  );\n  watch(\n    () => props.trades,\n    () => {\n      if (engine.instance.value) feed(engine.instance.value);\n    },\n  );\n  return engine;\n}\n"],"mappings":";;;;;AAqBA,IAAMA,IAAkB;CAAE,MAAM;CAAS,SAAS,KAAA;AAAU,GAGtDC,IAAc;CAClB,GAAGC;CAEH,SAAS;CAET,WAAW;CAEX,iBAAiB;CAEjB,gBAAgB;CAEhB,eAAe;CAEf,QAAQ;CAER,aAAa;CAEb,YAAY;CAEZ,YAAY;CAEZ,UAAU;CAEV,WAAW;AACb,GAGaC,IAAkB;CAC7B,GAAGF;CAEH,MAAM;CAEN,OAAO;CAEP,aAAa;CAEb,UAAUD;CAEV,OAAO;CAEP,QAAQ;CAER,SAASA;CAET,aAAa;CAEb,SAASA;CAET,QAAQA;CAER,MAAMA;CAEN,MAAMA;CAEN,SAASA;CAET,QAAQA;CAER,YAAY;CAEZ,QAAQ;AACV,GAGaI,IAAiB;CAC5B,GAAGH;CAEH,MAAM;CAEN,WAAW;EAAE,MAAM;EAAmC,SAAS,KAAA;CAAU;CAEzE,MAAM;CAEN,UAAU;CAEV,MAAM;CAEN,WAAW;CAEX,WAAW;CAEX,OAAO;CAEP,SAAS;CAET,OAAOD;CAEP,eAAe;CAEf,qBAAqB;CAErB,QAAQA;CAER,WAAWA;CAEX,WAAWA;CAEX,SAASA;CAET,QAAQ;AACV,GAGaK,IAAwB;CACnC,GAAGJ;CAEH,MAAM;CAEN,QAAQ;CAER,UAAU;CAEV,UAAU;CAEV,QAAQ;CAER,SAAS;CAET,OAAO;CAEP,WAAW;CAEX,YAAY;CAEZ,UAAU;CAEV,SAAS;CAET,QAAQ;CAER,SAASD;CAET,YAAY;CAEZ,cAAc;CAEd,WAAWA;CAEX,SAASA;CAET,aAAaA;CAEb,SAASA;CAET,UAAU;CAEV,UAAU;CAEV,QAAQ;AACV,GAGaM,IAAoB;CAC/B,GAAGL;CAEH,QAAQ;CAER,UAAU;CAEV,WAAW;CAEX,SAAS;CAET,SAAS;CAET,qBAAqB;CAErB,WAAWD;CAEX,YAAY;CAEZ,cAAcA;CAEd,SAASA;CAET,QAAQA;CAER,cAAcA;CAEd,UAAU;CAEV,YAAY;CAEZ,QAAQ;AACV,GAGMO,IAAW;CAAC;CAAQ;CAAU;AAAW;AAa/C,SAAgBC,EACd,GACA,GAKA,GACA,GAIA;CACA,IAAIC,GACEC,KAAQ,MAAc;EAC1B,IAAMC,IAAOC,EAAIC,EAAM,MAAM,GACvBC,IAASL;EAEf,IADA,IAAWE,GACP,CAACI,KAAU,CAACJ,KAAQA,MAASG,GAAQ;EACzC,IAAME,IAAIF,GAAQ,UAAU;EAC5B,IACEA,KACAE,IAAI,KACJL,EAAK,UAAUK,KACfL,EAAK,OAAOG,EAAO,MACnBH,EAAKK,IAAI,OAAOF,EAAOE,IAAI,IAC3B;GACA,AAAIL,EAAK,SAASK,KAAGD,EAAO,IAAIE,GAAQN,EAAK,MAAMK,CAAC,CAAC;GACrD;EACF;EACA,EAAO,QAAQC,GAAQN,CAAI;CAC7B,GACMM,IAASC,EACbC,GACAN,SACMO,EAAkBP,GAAON,CAAQ,IACtC,OACC,IAAW,KAAA,GACPM,EAAM,QAAMQ,EAAS,UAAUT,EAAIC,EAAM,IAAI,CAAC,GAClDH,EAAKW,CAAQ,GACNC,EAAKD,CAAQ,UAEhBD,EAAeP,GAAON,CAAQ,CACtC;CAaA,OAZAgB,QACQV,EAAM,OACX,MAAS;EACR,AAAIW,KAAMP,EAAO,SAAS,OAAO,UAAUL,EAAIY,CAAI,CAAC;CACtD,CACF,GACAD,QACQV,EAAM,cACN;EACJ,AAAII,EAAO,SAAS,SAAOP,EAAKO,EAAO,SAAS,KAAK;CACvD,CACF,GACOA;AACT"}

package/dist/vue/components/Chart/three-d.d.ts

@@ -49,6 +49,8 @@ export declare const chart3DCommonProps: {
     };
     /** Lighting of the surfaces and bars */
     lighting: PropType<Chart3DLightingOptions>;
+    /** Brightness of the light of `blend: "additive"` series, tone mapped on WebGPU and WebGL2 (default 1) */
+    exposure: NumberConstructor;
     /** Backend of the data layer: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */
     renderer: PropType<ChartRendererPreference>;
     /** Series colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
@@ -91,6 +93,7 @@ interface Common3DProps {
     tooltip?: boolean | Chart3DTooltipOptions;
     interaction?: boolean | Chart3DInteractionOptions;
     lighting?: Chart3DLightingOptions;
+    exposure?: number;
     renderer?: ChartRendererPreference;
     palette?: readonly string[];
     ariaLabel?: string;

package/dist/vue/components/Chart/three-d.js

@@ -36,6 +36,7 @@ var a = {
 		default: void 0
 	},
 	lighting: Object,
+	exposure: Number,
 	renderer: String,
 	palette: Array,
 	ariaLabel: String,
@@ -59,6 +60,7 @@ function o(r, a, o) {
 		tooltip: e(r.tooltip),
 		interaction: e(r.interaction),
 		lighting: e(r.lighting),
+		exposure: r.exposure,
 		renderer: r.renderer,
 		palette: e(r.palette),
 		ariaLabel: r.ariaLabel,

package/dist/vue/components/Chart/three-d.js.map

@@ -1 +1 @@
-{"version":3,"file":"three-d.js","names":["chart3DCommonProps","chartFrameProps","useChart3D","useChartEngine","createChart3D","props","series","raw","chart","handlers","c","r","useRootStyle","instance","camera"],"sources":["../../../../../vue/src/components/Chart/three-d.ts"],"sourcesContent":["import type { PropType } from \"vue\";\nimport {\n  createChart3D,\n  type Chart3DAxisOptions,\n  type Chart3DCameraOptions,\n  type Chart3DCameraState,\n  type Chart3DColorBarOptions,\n  type Chart3DColorScale,\n  type Chart3DHoverEvent,\n  type Chart3DInstance,\n  type Chart3DInteractionOptions,\n  type Chart3DLegendOptions,\n  type Chart3DLightingOptions,\n  type Chart3DOptions,\n  type Chart3DSeries,\n  type Chart3DTooltipOptions,\n  type ChartRendererKind,\n  type ChartRendererPreference,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, useRootStyle } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport type { Chart3DHandle } from \"./types\";\n\n/** Props shared by the 3D chart components (engine `createChart3D`) */\nexport const chart3DCommonProps = {\n  ...chartFrameProps,\n  /** X axis (width of the box) */\n  xAxis: Object as PropType<Chart3DAxisOptions>,\n  /** Y axis (depth of the box) */\n  yAxis: Object as PropType<Chart3DAxisOptions>,\n  /** Z axis (height of the box) */\n  zAxis: Object as PropType<Chart3DAxisOptions>,\n  /** Initial camera, also restored by a double click (changing it moves the camera) */\n  camera: Object as PropType<Chart3DCameraOptions>,\n  /** Turns the camera around the box: `true` at 12°/s or a speed in degrees per second (default `false`) */\n  autoRotate: {\n    type: [Boolean, Number] as PropType<boolean | number>,\n    default: undefined,\n  },\n  /** Proportions of the box (x, y, z; default `[1, 1, 0.7]`) */\n  aspect: Array as unknown as PropType<readonly [number, number, number]>,\n  /** Draws the axis box: back walls, grid lines, tick labels and axis titles (default `true`) */\n  box: { type: Boolean, default: undefined },\n  /** Colors of `colorBy: \"z\"` / `\"value\"`: a built-in ramp or CSS colors (default `viridis`) */\n  colorScale: [String, Array] as PropType<Chart3DColorScale>,\n  /** Values mapped to the ends of the color scale; the data range by default */\n  valueRange: Array as unknown as PropType<readonly [number, number]>,\n  /** Color bar; shown by default when a visible series uses the color scale */\n  colorBar: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DColorBarOptions>,\n    default: undefined,\n  },\n  /** Legend; shown by default when several series have a name */\n  legend: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DLegendOptions>,\n    default: undefined,\n  },\n  /** Tooltip; `false` disables it */\n  tooltip: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DTooltipOptions>,\n    default: undefined,\n  },\n  /** Drag rotates, right / Shift + drag pans, Ctrl / ⌘ + wheel and pinch zoom; `false` makes the chart static (default `true`) */\n  interaction: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DInteractionOptions>,\n    default: undefined,\n  },\n  /** Lighting of the surfaces and bars */\n  lighting: Object as PropType<Chart3DLightingOptions>,\n  /** Backend of the data layer: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Series 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  /** BCP 47 locale of the texts and numbers the engine writes (tooltip, axes); the page language by default */\n  locale: String,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Chart3DOptions[\"labels\"]>,\n};\n\n/** Engine events forwarded by a 3D chart */\nexport interface Chart3DHandlers {\n  hover: (event: Chart3DHoverEvent | null) => void;\n  click: (event: Chart3DHoverEvent) => void;\n  camera: (camera: Chart3DCameraState) => void;\n  renderer: (renderer: ChartRendererKind) => void;\n}\n\ninterface Common3DProps {\n  deep?: boolean;\n  width?: number | string;\n  height?: number | string;\n  xAxis?: Chart3DAxisOptions;\n  yAxis?: Chart3DAxisOptions;\n  zAxis?: Chart3DAxisOptions;\n  camera?: Chart3DCameraOptions;\n  autoRotate?: boolean | number;\n  aspect?: readonly [number, number, number];\n  box?: boolean;\n  colorScale?: Chart3DColorScale;\n  valueRange?: readonly [number, number];\n  colorBar?: boolean | Chart3DColorBarOptions;\n  legend?: boolean | Chart3DLegendOptions;\n  tooltip?: boolean | Chart3DTooltipOptions;\n  interaction?: boolean | Chart3DInteractionOptions;\n  lighting?: Chart3DLightingOptions;\n  renderer?: ChartRendererPreference;\n  palette?: readonly string[];\n  ariaLabel?: string;\n  locale?: string;\n  labels?: Chart3DOptions[\"labels\"];\n}\n\n/** Engine (`createChart3D`), root style and template handle of a 3D chart */\nexport function useChart3D(\n  props: Common3DProps,\n  series: () => Chart3DSeries[],\n  handlers: Chart3DHandlers,\n) {\n  const { setContainer, instance } = useChartEngine<\n    Chart3DOptions,\n    Chart3DInstance\n  >(\n    createChart3D,\n    props,\n    () => ({\n      series: series(),\n      xAxis: raw(props.xAxis),\n      yAxis: raw(props.yAxis),\n      zAxis: raw(props.zAxis),\n      camera: raw(props.camera),\n      autoRotate: props.autoRotate,\n      aspect: raw(props.aspect),\n      box: props.box,\n      colorScale: raw(props.colorScale),\n      valueRange: raw(props.valueRange),\n      colorBar: raw(props.colorBar),\n      legend: raw(props.legend),\n      tooltip: raw(props.tooltip),\n      interaction: raw(props.interaction),\n      lighting: raw(props.lighting),\n      renderer: props.renderer,\n      palette: raw(props.palette),\n      ariaLabel: props.ariaLabel,\n      locale: props.locale,\n      labels: raw(props.labels),\n    }),\n    (chart) => [\n      chart.on(\"hover\", (e) => handlers.hover(e)),\n      chart.on(\"click\", (e) => handlers.click(e)),\n      chart.on(\"camera\", (c) => handlers.camera(c)),\n      chart.on(\"renderer\", (r) => handlers.renderer(r)),\n    ],\n  );\n  const handle: Chart3DHandle = {\n    resetCamera: () => instance.value?.resetCamera(),\n    getCamera: () => instance.value?.getCamera() ?? null,\n    setCamera: (camera) => instance.value?.setCamera(camera),\n    getRenderer: () => instance.value?.getRenderer() ?? null,\n    getInstance: () => instance.value,\n  };\n  return { setContainer, rootStyle: useRootStyle(props, 400), handle };\n}\n"],"mappings":";;;;AAwBA,IAAaA,IAAqB;CAChC,GAAGC;CAEH,OAAO;CAEP,OAAO;CAEP,OAAO;CAEP,QAAQ;CAER,YAAY;EACV,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,QAAQ;CAER,KAAK;EAAE,MAAM;EAAS,SAAS,KAAA;CAAU;CAEzC,YAAY,CAAC,QAAQ,KAAK;CAE1B,YAAY;CAEZ,UAAU;EACR,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,QAAQ;EACN,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,SAAS;EACP,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,aAAa;EACX,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,UAAU;CAEV,UAAU;CAEV,SAAS;CAET,WAAW;CAEX,QAAQ;CAER,QAAQ;AACV;AAoCA,SAAgBC,EACd,GACA,GACA,GACA;CACA,IAAM,EAAE,iBAAc,gBAAaC,EAIjCC,GACAC,UACO;EACL,QAAQC,EAAO;EACf,OAAOC,EAAIF,EAAM,KAAK;EACtB,OAAOE,EAAIF,EAAM,KAAK;EACtB,OAAOE,EAAIF,EAAM,KAAK;EACtB,QAAQE,EAAIF,EAAM,MAAM;EACxB,YAAYA,EAAM;EAClB,QAAQE,EAAIF,EAAM,MAAM;EACxB,KAAKA,EAAM;EACX,YAAYE,EAAIF,EAAM,UAAU;EAChC,YAAYE,EAAIF,EAAM,UAAU;EAChC,UAAUE,EAAIF,EAAM,QAAQ;EAC5B,QAAQE,EAAIF,EAAM,MAAM;EACxB,SAASE,EAAIF,EAAM,OAAO;EAC1B,aAAaE,EAAIF,EAAM,WAAW;EAClC,UAAUE,EAAIF,EAAM,QAAQ;EAC5B,UAAUA,EAAM;EAChB,SAASE,EAAIF,EAAM,OAAO;EAC1B,WAAWA,EAAM;EACjB,QAAQA,EAAM;EACd,QAAQE,EAAIF,EAAM,MAAM;CAC1B,KACC,MAAU;EACTG,EAAM,GAAG,UAAU,MAAMC,EAAS,MAAM,CAAC,CAAC;EAC1CD,EAAM,GAAG,UAAU,MAAMC,EAAS,MAAM,CAAC,CAAC;EAC1CD,EAAM,GAAG,WAAW,MAAMC,EAAS,OAAOC,CAAC,CAAC;EAC5CF,EAAM,GAAG,aAAa,MAAMC,EAAS,SAASE,CAAC,CAAC;CAClD,CACF;CAQA,OAAO;EAAE;EAAc,WAAWC,EAAaP,GAAO,GAAG;EAAG,QAAA;GAN1D,mBAAmBQ,EAAS,OAAO,YAAY;GAC/C,iBAAiBA,EAAS,OAAO,UAAU,KAAK;GAChD,YAAY,MAAWA,EAAS,OAAO,UAAUC,CAAM;GACvD,mBAAmBD,EAAS,OAAO,YAAY,KAAK;GACpD,mBAAmBA,EAAS;EAE8B;CAAO;AACrE"}
+{"version":3,"file":"three-d.js","names":["chart3DCommonProps","chartFrameProps","useChart3D","useChartEngine","createChart3D","props","series","raw","chart","handlers","c","r","useRootStyle","instance","camera"],"sources":["../../../../../vue/src/components/Chart/three-d.ts"],"sourcesContent":["import type { PropType } from \"vue\";\nimport {\n  createChart3D,\n  type Chart3DAxisOptions,\n  type Chart3DCameraOptions,\n  type Chart3DCameraState,\n  type Chart3DColorBarOptions,\n  type Chart3DColorScale,\n  type Chart3DHoverEvent,\n  type Chart3DInstance,\n  type Chart3DInteractionOptions,\n  type Chart3DLegendOptions,\n  type Chart3DLightingOptions,\n  type Chart3DOptions,\n  type Chart3DSeries,\n  type Chart3DTooltipOptions,\n  type ChartRendererKind,\n  type ChartRendererPreference,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, useRootStyle } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport type { Chart3DHandle } from \"./types\";\n\n/** Props shared by the 3D chart components (engine `createChart3D`) */\nexport const chart3DCommonProps = {\n  ...chartFrameProps,\n  /** X axis (width of the box) */\n  xAxis: Object as PropType<Chart3DAxisOptions>,\n  /** Y axis (depth of the box) */\n  yAxis: Object as PropType<Chart3DAxisOptions>,\n  /** Z axis (height of the box) */\n  zAxis: Object as PropType<Chart3DAxisOptions>,\n  /** Initial camera, also restored by a double click (changing it moves the camera) */\n  camera: Object as PropType<Chart3DCameraOptions>,\n  /** Turns the camera around the box: `true` at 12°/s or a speed in degrees per second (default `false`) */\n  autoRotate: {\n    type: [Boolean, Number] as PropType<boolean | number>,\n    default: undefined,\n  },\n  /** Proportions of the box (x, y, z; default `[1, 1, 0.7]`) */\n  aspect: Array as unknown as PropType<readonly [number, number, number]>,\n  /** Draws the axis box: back walls, grid lines, tick labels and axis titles (default `true`) */\n  box: { type: Boolean, default: undefined },\n  /** Colors of `colorBy: \"z\"` / `\"value\"`: a built-in ramp or CSS colors (default `viridis`) */\n  colorScale: [String, Array] as PropType<Chart3DColorScale>,\n  /** Values mapped to the ends of the color scale; the data range by default */\n  valueRange: Array as unknown as PropType<readonly [number, number]>,\n  /** Color bar; shown by default when a visible series uses the color scale */\n  colorBar: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DColorBarOptions>,\n    default: undefined,\n  },\n  /** Legend; shown by default when several series have a name */\n  legend: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DLegendOptions>,\n    default: undefined,\n  },\n  /** Tooltip; `false` disables it */\n  tooltip: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DTooltipOptions>,\n    default: undefined,\n  },\n  /** Drag rotates, right / Shift + drag pans, Ctrl / ⌘ + wheel and pinch zoom; `false` makes the chart static (default `true`) */\n  interaction: {\n    type: [Boolean, Object] as PropType<boolean | Chart3DInteractionOptions>,\n    default: undefined,\n  },\n  /** Lighting of the surfaces and bars */\n  lighting: Object as PropType<Chart3DLightingOptions>,\n  /** Brightness of the light of `blend: \"additive\"` series, tone mapped on WebGPU and WebGL2 (default 1) */\n  exposure: Number,\n  /** Backend of the data layer: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Series 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  /** BCP 47 locale of the texts and numbers the engine writes (tooltip, axes); the page language by default */\n  locale: String,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Chart3DOptions[\"labels\"]>,\n};\n\n/** Engine events forwarded by a 3D chart */\nexport interface Chart3DHandlers {\n  hover: (event: Chart3DHoverEvent | null) => void;\n  click: (event: Chart3DHoverEvent) => void;\n  camera: (camera: Chart3DCameraState) => void;\n  renderer: (renderer: ChartRendererKind) => void;\n}\n\ninterface Common3DProps {\n  deep?: boolean;\n  width?: number | string;\n  height?: number | string;\n  xAxis?: Chart3DAxisOptions;\n  yAxis?: Chart3DAxisOptions;\n  zAxis?: Chart3DAxisOptions;\n  camera?: Chart3DCameraOptions;\n  autoRotate?: boolean | number;\n  aspect?: readonly [number, number, number];\n  box?: boolean;\n  colorScale?: Chart3DColorScale;\n  valueRange?: readonly [number, number];\n  colorBar?: boolean | Chart3DColorBarOptions;\n  legend?: boolean | Chart3DLegendOptions;\n  tooltip?: boolean | Chart3DTooltipOptions;\n  interaction?: boolean | Chart3DInteractionOptions;\n  lighting?: Chart3DLightingOptions;\n  exposure?: number;\n  renderer?: ChartRendererPreference;\n  palette?: readonly string[];\n  ariaLabel?: string;\n  locale?: string;\n  labels?: Chart3DOptions[\"labels\"];\n}\n\n/** Engine (`createChart3D`), root style and template handle of a 3D chart */\nexport function useChart3D(\n  props: Common3DProps,\n  series: () => Chart3DSeries[],\n  handlers: Chart3DHandlers,\n) {\n  const { setContainer, instance } = useChartEngine<\n    Chart3DOptions,\n    Chart3DInstance\n  >(\n    createChart3D,\n    props,\n    () => ({\n      series: series(),\n      xAxis: raw(props.xAxis),\n      yAxis: raw(props.yAxis),\n      zAxis: raw(props.zAxis),\n      camera: raw(props.camera),\n      autoRotate: props.autoRotate,\n      aspect: raw(props.aspect),\n      box: props.box,\n      colorScale: raw(props.colorScale),\n      valueRange: raw(props.valueRange),\n      colorBar: raw(props.colorBar),\n      legend: raw(props.legend),\n      tooltip: raw(props.tooltip),\n      interaction: raw(props.interaction),\n      lighting: raw(props.lighting),\n      exposure: props.exposure,\n      renderer: props.renderer,\n      palette: raw(props.palette),\n      ariaLabel: props.ariaLabel,\n      locale: props.locale,\n      labels: raw(props.labels),\n    }),\n    (chart) => [\n      chart.on(\"hover\", (e) => handlers.hover(e)),\n      chart.on(\"click\", (e) => handlers.click(e)),\n      chart.on(\"camera\", (c) => handlers.camera(c)),\n      chart.on(\"renderer\", (r) => handlers.renderer(r)),\n    ],\n  );\n  const handle: Chart3DHandle = {\n    resetCamera: () => instance.value?.resetCamera(),\n    getCamera: () => instance.value?.getCamera() ?? null,\n    setCamera: (camera) => instance.value?.setCamera(camera),\n    getRenderer: () => instance.value?.getRenderer() ?? null,\n    getInstance: () => instance.value,\n  };\n  return { setContainer, rootStyle: useRootStyle(props, 400), handle };\n}\n"],"mappings":";;;;AAwBA,IAAaA,IAAqB;CAChC,GAAGC;CAEH,OAAO;CAEP,OAAO;CAEP,OAAO;CAEP,QAAQ;CAER,YAAY;EACV,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,QAAQ;CAER,KAAK;EAAE,MAAM;EAAS,SAAS,KAAA;CAAU;CAEzC,YAAY,CAAC,QAAQ,KAAK;CAE1B,YAAY;CAEZ,UAAU;EACR,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,QAAQ;EACN,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,SAAS;EACP,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,aAAa;EACX,MAAM,CAAC,SAAS,MAAM;EACtB,SAAS,KAAA;CACX;CAEA,UAAU;CAEV,UAAU;CAEV,UAAU;CAEV,SAAS;CAET,WAAW;CAEX,QAAQ;CAER,QAAQ;AACV;AAqCA,SAAgBC,EACd,GACA,GACA,GACA;CACA,IAAM,EAAE,iBAAc,gBAAaC,EAIjCC,GACAC,UACO;EACL,QAAQC,EAAO;EACf,OAAOC,EAAIF,EAAM,KAAK;EACtB,OAAOE,EAAIF,EAAM,KAAK;EACtB,OAAOE,EAAIF,EAAM,KAAK;EACtB,QAAQE,EAAIF,EAAM,MAAM;EACxB,YAAYA,EAAM;EAClB,QAAQE,EAAIF,EAAM,MAAM;EACxB,KAAKA,EAAM;EACX,YAAYE,EAAIF,EAAM,UAAU;EAChC,YAAYE,EAAIF,EAAM,UAAU;EAChC,UAAUE,EAAIF,EAAM,QAAQ;EAC5B,QAAQE,EAAIF,EAAM,MAAM;EACxB,SAASE,EAAIF,EAAM,OAAO;EAC1B,aAAaE,EAAIF,EAAM,WAAW;EAClC,UAAUE,EAAIF,EAAM,QAAQ;EAC5B,UAAUA,EAAM;EAChB,UAAUA,EAAM;EAChB,SAASE,EAAIF,EAAM,OAAO;EAC1B,WAAWA,EAAM;EACjB,QAAQA,EAAM;EACd,QAAQE,EAAIF,EAAM,MAAM;CAC1B,KACC,MAAU;EACTG,EAAM,GAAG,UAAU,MAAMC,EAAS,MAAM,CAAC,CAAC;EAC1CD,EAAM,GAAG,UAAU,MAAMC,EAAS,MAAM,CAAC,CAAC;EAC1CD,EAAM,GAAG,WAAW,MAAMC,EAAS,OAAOC,CAAC,CAAC;EAC5CF,EAAM,GAAG,aAAa,MAAMC,EAAS,SAASE,CAAC,CAAC;CAClD,CACF;CAQA,OAAO;EAAE;EAAc,WAAWC,EAAaP,GAAO,GAAG;EAAG,QAAA;GAN1D,mBAAmBQ,EAAS,OAAO,YAAY;GAC/C,iBAAiBA,EAAS,OAAO,UAAU,KAAK;GAChD,YAAY,MAAWA,EAAS,OAAO,UAAUC,CAAM;GACvD,mBAAmBD,EAAS,OAAO,YAAY,KAAK;GACpD,mBAAmBA,EAAS;EAE8B;CAAO;AACrE"}