minerva-design 1.2.0 → 1.4.0

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

@@ -0,0 +1,68 @@
+import { raw as e } from "./engine.js";
+import { engineOptions as t, useCartesianChart as n } from "./cartesian.js";
+import { chartAxisProps as r, chartCommonProps as i, chartOrientationProp as a } from "./props.js";
+import { createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeStyle as l, openBlock as u, unref as d } from "vue";
+import { waterfallSeries as f } from "../../../charts/core.js";
+//#region src/components/Chart/WaterfallChart.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ c({
+	name: "WaterfallChart",
+	__name: "WaterfallChart",
+	props: {
+		...i,
+		...r,
+		...a,
+		steps: {
+			type: Array,
+			required: !0
+		},
+		name: String,
+		upColor: String,
+		downColor: String,
+		totalColor: String,
+		start: Number,
+		labels: {
+			type: Boolean,
+			default: !0
+		},
+		format: Function
+	},
+	emits: [
+		"hover",
+		"pointClick",
+		"plotClick",
+		"zoom",
+		"rendererChange"
+	],
+	setup(r, { expose: i, emit: a }) {
+		let c = r, p = a, { setContainer: m, rootStyle: h, handle: g } = n(c, () => t(c, [f(e(c.steps), {
+			name: c.name,
+			upColor: c.upColor,
+			downColor: c.downColor,
+			totalColor: c.totalColor,
+			start: c.start,
+			labels: c.labels,
+			format: c.format
+		})]), {
+			hover: (e) => p("hover", e),
+			click: (e) => p("pointClick", e),
+			plotClick: (e) => p("plotClick", e),
+			zoom: (e) => p("zoom", e),
+			renderer: (e) => p("rendererChange", e)
+		});
+		return i(g), (e, t) => (u(), o("div", {
+			class: "mn-chart",
+			"data-minerva": "chart",
+			style: l(d(h))
+		}, [s("div", {
+			ref: d(m),
+			style: {
+				position: "absolute",
+				inset: "0"
+			}
+		}, null, 512)], 4));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=WaterfallChart.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,47 @@
+import { ChartAnnotation, ChartAxisOptions, ChartCurve, ChartDragEvent, ChartHoverEvent, ChartInteractionOptions, ChartLegendOptions, ChartOptions, ChartPadding, ChartPlotClickEvent, ChartRendererKind, ChartRendererPreference, ChartSeries, ChartSeriesType, ChartTooltipOptions, ChartView } from '../../../charts/core.js';
+import { ChartHandle } from './types.js';
+/** The common props read by `engineOptions` */
+interface CommonProps {
+    xAxis?: ChartAxisOptions;
+    yAxis?: ChartAxisOptions;
+    renderer?: ChartRendererPreference;
+    legend?: boolean | ChartLegendOptions;
+    tooltip?: boolean | ChartTooltipOptions;
+    crosshair?: boolean;
+    annotations?: readonly ChartAnnotation[];
+    interaction?: boolean | ChartInteractionOptions;
+    padding?: ChartPadding;
+    palette?: readonly string[];
+    ariaLabel?: string;
+    locale?: string;
+    labels?: ChartOptions["labels"] | boolean;
+    yAxis2?: ChartAxisOptions;
+    orientation?: ChartOptions["orientation"];
+}
+/** Engine options of the common props */
+export declare const engineOptions: (props: CommonProps, series: readonly ChartSeries[], stackMode?: ChartOptions["stackMode"]) => ChartOptions;
+/**
+ * Gives the series without a `type` the type of the component: `stack` /
+ * `curve` apply to the series of that type that do not set their own.
+ */
+export declare const withSeriesType: (series: readonly ChartSeries[], type: ChartSeriesType, stack?: string, curve?: ChartCurve) => ChartSeries[];
+/** Engine events forwarded by a cartesian chart */
+export interface CartesianHandlers {
+    hover?: (event: ChartHoverEvent | null) => void;
+    click?: (event: ChartHoverEvent) => void;
+    plotClick?: (event: ChartPlotClickEvent) => void;
+    zoom?: (view: ChartView) => void;
+    renderer?: (renderer: ChartRendererKind) => void;
+    drop?: (event: ChartDragEvent) => void;
+}
+/** Engine (`createChart`), root style and template handle of a cartesian chart */
+export declare function useCartesianChart(props: object & {
+    deep?: boolean;
+    width?: number | string;
+    height?: number | string;
+}, build: () => ChartOptions | null, handlers: CartesianHandlers, defaultHeight?: number): {
+    setContainer: (el: unknown) => void;
+    rootStyle: import('vue').ComputedRef<import('vue').CSSProperties>;
+    handle: ChartHandle;
+};
+export {};

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

@@ -0,0 +1,56 @@
+import { raw as e, useChartEngine as t, useRootStyle as n } from "./engine.js";
+import { createChart as r } from "../../../charts/core.js";
+//#region src/components/Chart/cartesian.ts
+var i = (t, n, r) => ({
+	series: n,
+	xAxis: e(t.xAxis),
+	yAxis: e(t.yAxis),
+	renderer: t.renderer,
+	legend: e(t.legend),
+	tooltip: e(t.tooltip),
+	crosshair: t.crosshair,
+	annotations: e(t.annotations),
+	interaction: e(t.interaction),
+	padding: e(t.padding),
+	palette: e(t.palette),
+	ariaLabel: t.ariaLabel,
+	locale: t.locale,
+	labels: typeof t.labels == "object" ? e(t.labels) : void 0,
+	yAxis2: e(t.yAxis2),
+	orientation: t.orientation,
+	stackMode: r
+}), a = (t, n, r, i) => e(t).map((t) => {
+	let a = e(t), o = a.type ?? n;
+	return {
+		...a,
+		data: e(a.data),
+		type: o,
+		...r !== void 0 && o === n ? { stack: a.stack ?? r } : {},
+		...i !== void 0 && (o === "line" || o === "area") ? { curve: a.curve ?? i } : {}
+	};
+});
+function o(e, i, a, o = 320) {
+	let { setContainer: s, instance: c } = t(r, e, i, (e) => [
+		e.on("hover", (e) => a.hover?.(e)),
+		e.on("click", (e) => a.click?.(e)),
+		e.on("plotClick", (e) => a.plotClick?.(e)),
+		e.on("zoom", (e) => a.zoom?.(e)),
+		e.on("renderer", (e) => a.renderer?.(e)),
+		e.on("drop", (e) => a.drop?.(e))
+	]);
+	return {
+		setContainer: s,
+		rootStyle: n(e, o),
+		handle: {
+			resetZoom: () => c.value?.resetZoom(),
+			getView: () => c.value?.getView() ?? null,
+			setView: (e) => c.value?.setView(e),
+			getRenderer: () => c.value?.getRenderer() ?? null,
+			getInstance: () => c.value
+		}
+	};
+}
+//#endregion
+export { i as engineOptions, o as useCartesianChart, a as withSeriesType };
+
+//# sourceMappingURL=cartesian.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian.js","names":["engineOptions","raw","props","withSeriesType","series","s","item","t","type","stack","curve","useCartesianChart","useChartEngine","createChart","build","chart","handlers","event","view","renderer","useRootStyle","defaultHeight","instance"],"sources":["../../../../../vue/src/components/Chart/cartesian.ts"],"sourcesContent":["import {\n  createChart,\n  type ChartAnnotation,\n  type ChartAxisOptions,\n  type ChartCurve,\n  type ChartDragEvent,\n  type ChartHoverEvent,\n  type ChartInstance,\n  type ChartInteractionOptions,\n  type ChartLegendOptions,\n  type ChartOptions,\n  type ChartPadding,\n  type ChartPlotClickEvent,\n  type ChartRendererKind,\n  type ChartRendererPreference,\n  type ChartSeries,\n  type ChartSeriesType,\n  type ChartTooltipOptions,\n  type ChartView,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, useRootStyle } from \"./engine\";\nimport type { ChartHandle } from \"./types\";\n\n/** The common props read by `engineOptions` */\ninterface CommonProps {\n  xAxis?: ChartAxisOptions;\n  yAxis?: ChartAxisOptions;\n  renderer?: ChartRendererPreference;\n  legend?: boolean | ChartLegendOptions;\n  tooltip?: boolean | ChartTooltipOptions;\n  crosshair?: boolean;\n  annotations?: readonly ChartAnnotation[];\n  interaction?: boolean | ChartInteractionOptions;\n  padding?: ChartPadding;\n  palette?: readonly string[];\n  ariaLabel?: string;\n  locale?: string;\n  labels?: ChartOptions[\"labels\"] | boolean;\n  yAxis2?: ChartAxisOptions;\n  orientation?: ChartOptions[\"orientation\"];\n}\n\n/** Engine options of the common props */\nexport const engineOptions = (\n  props: CommonProps,\n  series: readonly ChartSeries[],\n  stackMode?: ChartOptions[\"stackMode\"],\n): ChartOptions => ({\n  series,\n  xAxis: raw(props.xAxis),\n  yAxis: raw(props.yAxis),\n  renderer: props.renderer,\n  legend: raw(props.legend),\n  tooltip: raw(props.tooltip),\n  crosshair: props.crosshair,\n  annotations: raw(props.annotations),\n  interaction: raw(props.interaction),\n  padding: raw(props.padding),\n  palette: raw(props.palette),\n  ariaLabel: props.ariaLabel,\n  locale: props.locale,\n  // BarChart / WaterfallChart: `labels` writes the values (a boolean)\n  labels: typeof props.labels === \"object\" ? raw(props.labels) : undefined,\n  yAxis2: raw(props.yAxis2),\n  orientation: props.orientation,\n  stackMode,\n});\n\n/**\n * Gives the series without a `type` the type of the component: `stack` /\n * `curve` apply to the series of that type that do not set their own.\n */\nexport const withSeriesType = (\n  series: readonly ChartSeries[],\n  type: ChartSeriesType,\n  stack?: string,\n  curve?: ChartCurve,\n): ChartSeries[] =>\n  raw(series).map((item) => {\n    const s = raw(item);\n    const t = s.type ?? type;\n    return {\n      ...s,\n      data: raw(s.data),\n      type: t,\n      ...(stack !== undefined && t === type ? { stack: s.stack ?? stack } : {}),\n      ...(curve !== undefined && (t === \"line\" || t === \"area\")\n        ? { curve: s.curve ?? curve }\n        : {}),\n    };\n  });\n\n/** Engine events forwarded by a cartesian chart */\nexport interface CartesianHandlers {\n  hover?: (event: ChartHoverEvent | null) => void;\n  click?: (event: ChartHoverEvent) => void;\n  plotClick?: (event: ChartPlotClickEvent) => void;\n  zoom?: (view: ChartView) => void;\n  renderer?: (renderer: ChartRendererKind) => void;\n  drop?: (event: ChartDragEvent) => void;\n}\n\n/** Engine (`createChart`), root style and template handle of a cartesian chart */\nexport function useCartesianChart(\n  props: object & {\n    deep?: boolean;\n    width?: number | string;\n    height?: number | string;\n  },\n  build: () => ChartOptions | null,\n  handlers: CartesianHandlers,\n  defaultHeight = 320,\n) {\n  const { setContainer, instance } = useChartEngine<\n    ChartOptions,\n    ChartInstance\n  >(createChart, props, build, (chart) => [\n    chart.on(\"hover\", (event) => handlers.hover?.(event)),\n    chart.on(\"click\", (event) => handlers.click?.(event)),\n    chart.on(\"plotClick\", (event) => handlers.plotClick?.(event)),\n    chart.on(\"zoom\", (view) => handlers.zoom?.(view)),\n    chart.on(\"renderer\", (renderer) => handlers.renderer?.(renderer)),\n    chart.on(\"drop\", (event) => handlers.drop?.(event)),\n  ]);\n  const handle: ChartHandle = {\n    resetZoom: () => instance.value?.resetZoom(),\n    getView: () => instance.value?.getView() ?? null,\n    setView: (view) => instance.value?.setView(view),\n    getRenderer: () => instance.value?.getRenderer() ?? null,\n    getInstance: () => instance.value,\n  };\n  return {\n    setContainer,\n    rootStyle: useRootStyle(props, defaultHeight),\n    handle,\n  };\n}\n"],"mappings":";;;AA2CA,IAAaA,KACX,GACA,GACA,OACkB;CAClB;CACA,OAAOC,EAAIC,EAAM,KAAK;CACtB,OAAOD,EAAIC,EAAM,KAAK;CACtB,UAAUA,EAAM;CAChB,QAAQD,EAAIC,EAAM,MAAM;CACxB,SAASD,EAAIC,EAAM,OAAO;CAC1B,WAAWA,EAAM;CACjB,aAAaD,EAAIC,EAAM,WAAW;CAClC,aAAaD,EAAIC,EAAM,WAAW;CAClC,SAASD,EAAIC,EAAM,OAAO;CAC1B,SAASD,EAAIC,EAAM,OAAO;CAC1B,WAAWA,EAAM;CACjB,QAAQA,EAAM;CAEd,QAAQ,OAAOA,EAAM,UAAW,WAAWD,EAAIC,EAAM,MAAM,IAAI,KAAA;CAC/D,QAAQD,EAAIC,EAAM,MAAM;CACxB,aAAaA,EAAM;CACnB;AACF,IAMaC,KACX,GACA,GACA,GACA,MAEAF,EAAIG,CAAM,CAAC,CAAC,KAAK,MAAS;CACxB,IAAMC,IAAIJ,EAAIK,CAAI,GACZC,IAAIF,EAAE,QAAQG;CACpB,OAAO;EACL,GAAGH;EACH,MAAMJ,EAAII,EAAE,IAAI;EAChB,MAAME;EACN,GAAIE,MAAU,KAAA,KAAaF,MAAMC,IAAO,EAAE,OAAOH,EAAE,SAASI,EAAM,IAAI,CAAC;EACvE,GAAIC,MAAU,KAAA,MAAcH,MAAM,UAAUA,MAAM,UAC9C,EAAE,OAAOF,EAAE,SAASK,EAAM,IAC1B,CAAC;CACP;AACF,CAAC;AAaH,SAAgBC,EACd,GAKA,GACA,GACA,IAAgB,KAChB;CACA,IAAM,EAAE,iBAAc,gBAAaC,EAGjCC,GAAaX,GAAOY,IAAQ,MAAU;EACtCC,EAAM,GAAG,UAAU,MAAUC,EAAS,QAAQC,CAAK,CAAC;EACpDF,EAAM,GAAG,UAAU,MAAUC,EAAS,QAAQC,CAAK,CAAC;EACpDF,EAAM,GAAG,cAAc,MAAUC,EAAS,YAAYC,CAAK,CAAC;EAC5DF,EAAM,GAAG,SAAS,MAASC,EAAS,OAAOE,CAAI,CAAC;EAChDH,EAAM,GAAG,aAAa,MAAaC,EAAS,WAAWG,CAAQ,CAAC;EAChEJ,EAAM,GAAG,SAAS,MAAUC,EAAS,OAAOC,CAAK,CAAC;CACpD,CAAC;CAQD,OAAO;EACL;EACA,WAAWG,EAAalB,GAAOmB,CAAa;EAC5C,QAAA;GATA,iBAAiBC,EAAS,OAAO,UAAU;GAC3C,eAAeA,EAAS,OAAO,QAAQ,KAAK;GAC5C,UAAU,MAASA,EAAS,OAAO,QAAQJ,CAAI;GAC/C,mBAAmBI,EAAS,OAAO,YAAY,KAAK;GACpD,mBAAmBA,EAAS;EAK5B;CACF;AACF"}

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

@@ -0,0 +1,35 @@
+import { CSSProperties, Ref, ShallowRef } from 'vue';
+/**
+ * What a chart engine factory of `minerva-design/charts/core` returns
+ * (`createChart`, `createShapeChart`, ...): options can be replaced, the
+ * instance destroyed.
+ */
+export interface EngineInstance<O> {
+    setOptions(options: O): void;
+    destroy(): void;
+}
+/** The raw object behind a reactive proxy (the engine never reads through proxies) */
+export declare const raw: <T>(value: T) => T;
+/**
+ * Mounts a chart engine of `minerva-design/charts/core` into `container`
+ * on mount (client only: nothing runs during SSR), passes new options when
+ * a prop changes (`deep: true` also follows in-place mutations of nested
+ * data), and destroys it before unmount. `build` returns the engine options
+ * of the current props, `null` while there is nothing to draw.
+ *
+ * Any engine works: `useChartEngine(createTradingChart, props, build, bind)`.
+ * `source` narrows what triggers `setOptions` (every prop by default), for
+ * the props passed through engine methods instead (an order book's `book`).
+ */
+export declare function useChartEngine<O, I extends EngineInstance<O>>(factory: (container: HTMLElement, options: O) => I, props: object & {
+    deep?: boolean;
+}, build: () => O | null, bind?: (engine: I) => Array<() => void>, source?: () => unknown): {
+    container: Ref<HTMLElement | null>;
+    setContainer: (el: unknown) => void;
+    instance: ShallowRef<I | null>;
+};
+/** Style of the sized root box of a chart */
+export declare const useRootStyle: (props: {
+    width?: number | string;
+    height?: number | string;
+}, defaultHeight: number | (() => number)) => import('vue').ComputedRef<CSSProperties>;

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

@@ -0,0 +1,35 @@
+import { computed as e, onBeforeUnmount as t, onMounted as n, ref as r, shallowRef as i, toRaw as a, watch as o } from "vue";
+//#region src/components/Chart/engine.ts
+var s = (e) => typeof e == "object" && e ? a(e) : e;
+function c(e, a, s, c, l = () => ({ ...a })) {
+	let u = r(null), d = i(null), f = [], p = () => {
+		if (d.value || !u.value) return;
+		let t = s();
+		if (!t) return;
+		let n = e(u.value, t);
+		d.value = n, f = c?.(n) ?? [];
+	};
+	return n(p), o(l, () => {
+		if (!d.value) return p();
+		let e = s();
+		e && d.value.setOptions(e);
+	}, { deep: !!a.deep }), t(() => {
+		for (let e of f) e();
+		f = [], d.value?.destroy(), d.value = null;
+	}), {
+		container: u,
+		setContainer: (e) => {
+			u.value = e ?? null;
+		},
+		instance: d
+	};
+}
+var l = (e) => typeof e == "number" ? `${e}px` : e, u = (t, n) => e(() => ({
+	position: "relative",
+	width: l(t.width ?? "100%"),
+	height: l(t.height ?? (typeof n == "number" ? n : n()))
+}));
+//#endregion
+export { s as raw, c as useChartEngine, u as useRootStyle };
+
+//# sourceMappingURL=engine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"engine.js","names":["raw","value","toRaw","useChartEngine","props","container","ref","instance","shallowRef","offs","mount","options","build","engine","factory","bind","onMounted","watch","source","onBeforeUnmount","off","el","cssSize","useRootStyle","computed","defaultHeight"],"sources":["../../../../../vue/src/components/Chart/engine.ts"],"sourcesContent":["import {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  toRaw,\n  watch,\n  type CSSProperties,\n  type Ref,\n  type ShallowRef,\n} from \"vue\";\n\n/**\n * What a chart engine factory of `minerva-design/charts/core` returns\n * (`createChart`, `createShapeChart`, ...): options can be replaced, the\n * instance destroyed.\n */\nexport interface EngineInstance<O> {\n  setOptions(options: O): void;\n  destroy(): void;\n}\n\n/** The raw object behind a reactive proxy (the engine never reads through proxies) */\nexport const raw = <T>(value: T): T =>\n  value !== null && typeof value === \"object\" ? toRaw(value) : value;\n\n/**\n * Mounts a chart engine of `minerva-design/charts/core` into `container`\n * on mount (client only: nothing runs during SSR), passes new options when\n * a prop changes (`deep: true` also follows in-place mutations of nested\n * data), and destroys it before unmount. `build` returns the engine options\n * of the current props, `null` while there is nothing to draw.\n *\n * Any engine works: `useChartEngine(createTradingChart, props, build, bind)`.\n * `source` narrows what triggers `setOptions` (every prop by default), for\n * the props passed through engine methods instead (an order book's `book`).\n */\nexport function useChartEngine<O, I extends EngineInstance<O>>(\n  factory: (container: HTMLElement, options: O) => I,\n  props: object & { deep?: boolean },\n  build: () => O | null,\n  bind?: (engine: I) => Array<() => void>,\n  source: () => unknown = () => ({ ...props }),\n): {\n  container: Ref<HTMLElement | null>;\n  setContainer: (el: unknown) => void;\n  instance: ShallowRef<I | null>;\n} {\n  const container = ref<HTMLElement | null>(null);\n  const instance = shallowRef(null) as ShallowRef<I | null>;\n  let offs: Array<() => void> = [];\n\n  const mount = () => {\n    if (instance.value || !container.value) return;\n    const options = build();\n    if (!options) return;\n    const engine = factory(container.value, options);\n    instance.value = engine;\n    offs = bind?.(engine) ?? [];\n  };\n\n  onMounted(mount);\n  watch(\n    // every prop (by identity; nested values too with `deep`)\n    source,\n    () => {\n      if (!instance.value) return mount();\n      const options = build();\n      if (options) instance.value.setOptions(options);\n    },\n    { deep: !!props.deep },\n  );\n  onBeforeUnmount(() => {\n    for (const off of offs) off();\n    offs = [];\n    instance.value?.destroy();\n    instance.value = null;\n  });\n  return {\n    container,\n    // template function ref: `<div :ref=\"setContainer\">`\n    setContainer: (el) => {\n      container.value = (el as HTMLElement | null) ?? null;\n    },\n    instance,\n  };\n}\n\nconst cssSize = (value: number | string) =>\n  typeof value === \"number\" ? `${value}px` : value;\n\n/** Style of the sized root box of a chart */\nexport const useRootStyle = (\n  props: { width?: number | string; height?: number | string },\n  defaultHeight: number | (() => number),\n) =>\n  computed<CSSProperties>(() => ({\n    position: \"relative\",\n    width: cssSize(props.width ?? \"100%\"),\n    height: cssSize(\n      props.height ??\n        (typeof defaultHeight === \"number\" ? defaultHeight : defaultHeight()),\n    ),\n  }));\n"],"mappings":";;AAwBA,IAAaA,KAAU,MACH,OAAOC,KAAU,YAAnCA,IAA8CC,EAAMD,CAAK,IAAIA;AAa/D,SAAgBE,EACd,GACA,GACA,GACA,GACA,WAA+B,EAAE,GAAGC,EAAM,IAK1C;CACA,IAAMC,IAAYC,EAAwB,IAAI,GACxCC,IAAWC,EAAW,IAAI,GAC5BC,IAA0B,CAAC,GAEzBC,UAAc;EAClB,IAAIH,EAAS,SAAS,CAACF,EAAU,OAAO;EACxC,IAAMM,IAAUC,EAAM;EACtB,IAAI,CAACD,GAAS;EACd,IAAME,IAASC,EAAQT,EAAU,OAAOM,CAAO;EAE/C,AADA,EAAS,QAAQE,GACjB,IAAOE,IAAOF,CAAM,KAAK,CAAC;CAC5B;CAmBA,OAjBAG,EAAUN,CAAK,GACfO,EAEEC,SACM;EACJ,IAAI,CAACX,EAAS,OAAO,OAAOG,EAAM;EAClC,IAAMC,IAAUC,EAAM;EACtB,AAAID,KAASJ,EAAS,MAAM,WAAWI,CAAO;CAChD,GACA,EAAE,MAAM,CAAC,CAACP,EAAM,KAAK,CACvB,GACAe,QAAsB;EACpB,KAAK,IAAMC,KAAOX,GAAM,EAAI;EAG5B,AAFA,IAAO,CAAC,GACRF,EAAS,OAAO,QAAQ,GACxB,EAAS,QAAQ;CACnB,CAAC,GACM;EACL;EAEA,eAAe,MAAO;GACpB,EAAU,QAASc,KAA6B;EAClD;EACA;CACF;AACF;AAEA,IAAMC,KAAW,MACf,OAAOrB,KAAU,WAAW,GAAGA,EAAM,MAAMA,GAGhCsB,KACX,GACA,MAEAC,SAA+B;CAC7B,UAAU;CACV,OAAOF,EAAQlB,EAAM,SAAS,MAAM;CACpC,QAAQkB,EACNlB,EAAM,WACH,OAAOqB,KAAkB,WAAWA,IAAgBA,EAAc,EACvE;AACF,EAAE"}

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

@@ -0,0 +1,41 @@
+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';
+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, };
+export { useChartEngine, type EngineInstance } from './engine.js';
+export type * from './types.js';

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

@@ -0,0 +1,40 @@
+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";
+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 };