minerva-design 1.3.0 → 1.4.0

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

@@ -0,0 +1,107 @@
+import { raw as e } from "./engine.js";
+import { engineOptions as t, useCartesianChart as n } from "./cartesian.js";
+import { chartCommonProps as r } from "./props.js";
+import { createElementBlock as i, createElementVNode as a, defineComponent as o, getCurrentInstance as s, normalizeStyle as c, openBlock as l, unref as u } from "vue";
+import { quadrantChartOptions as d, quadrantOf as f } from "../../../charts/core.js";
+//#region src/components/Chart/QuadrantChart.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ o({
+	name: "QuadrantChart",
+	__name: "QuadrantChart",
+	props: {
+		...r,
+		points: {
+			type: Array,
+			required: !0
+		},
+		xDomain: Array,
+		yDomain: Array,
+		xSplit: Number,
+		ySplit: Number,
+		quadrants: Object,
+		xLabel: String,
+		yLabel: String,
+		axisLabels: Object,
+		showTicks: {
+			type: Boolean,
+			default: void 0
+		},
+		reverseX: {
+			type: Boolean,
+			default: void 0
+		},
+		showLabels: {
+			type: Boolean,
+			default: void 0
+		},
+		pointSize: Number,
+		name: String,
+		draggable: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"hover",
+		"pointClick",
+		"quadrantClick",
+		"pointDrop",
+		"zoom",
+		"rendererChange"
+	],
+	setup(r, { expose: o, emit: p }) {
+		let m = r, h = p, g = s()?.vnode, _ = () => ({
+			xDomain: e(m.xDomain),
+			yDomain: e(m.yDomain),
+			xSplit: m.xSplit,
+			ySplit: m.ySplit,
+			reverseX: m.reverseX
+		}), { setContainer: v, rootStyle: y, handle: b } = n(m, () => d({
+			..._(),
+			points: e(m.points).map(e),
+			quadrants: e(m.quadrants),
+			xLabel: m.xLabel,
+			yLabel: m.yLabel,
+			axisLabels: e(m.axisLabels),
+			showTicks: m.showTicks,
+			showLabels: m.showLabels,
+			pointSize: m.pointSize,
+			name: m.name,
+			draggable: m.draggable ?? !!g?.props?.onPointDrop
+		}, (({ series: e, ...t }) => t)(t(m, []))), {
+			hover: (e) => h("hover", e),
+			click: (e) => {
+				let t = e.items[0]?.index, n = t === void 0 ? void 0 : m.points[t];
+				n && t !== void 0 && h("pointClick", n, t);
+			},
+			plotClick: (e) => h("quadrantClick", f(_(), e.x, e.y), {
+				x: e.x,
+				y: e.y
+			}),
+			drop: (e) => {
+				let t = e.item.index, n = m.points[t];
+				n && h("pointDrop", n, t, {
+					x: e.x,
+					y: e.y,
+					quadrant: f(_(), e.x, e.y)
+				});
+			},
+			zoom: (e) => h("zoom", e),
+			renderer: (e) => h("rendererChange", e)
+		});
+		return o(b), (e, t) => (l(), i("div", {
+			class: "mn-chart mn-quadrant-chart",
+			"data-minerva": "chart",
+			style: c(u(y))
+		}, [a("div", {
+			ref: u(v),
+			style: {
+				position: "absolute",
+				inset: "0"
+			}
+		}, null, 512)], 4));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=QuadrantChart.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuadrantChart.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_createElementVNode","QuadrantChart_vue_vue_type_script_setup_true_lang_default","chartCommonProps","__expose","__emit","props","__props","emit","vnode","getCurrentInstance","geometry","raw","useCartesianChart","quadrantChartOptions","_series","rest","engineOptions","event","index","point","quadrantOf","at","view","renderer","handle","openBlock","createElementBlock","normalizeStyle","unref","rootStyle","createElementVNode","setContainer","\"position\"","\"inset\""],"sources":["../../../../../vue/src/components/Chart/QuadrantChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance, type PropType } from \"vue\";\nimport {\n  quadrantChartOptions,\n  quadrantOf,\n  type ChartHoverEvent,\n  type ChartRendererKind,\n  type ChartView,\n  type QuadrantAxisLabels,\n  type QuadrantCorner,\n  type QuadrantPoint,\n  type QuadrantRegions,\n} from \"minerva-design/charts/core\";\nimport { engineOptions, useCartesianChart } from \"./cartesian\";\nimport { raw } from \"./engine\";\nimport { chartCommonProps } from \"./props\";\nimport type { QuadrantDropTarget } from \"./types\";\n\n/**\n * Four-quadrant matrix (priority matrix, Eisenhower, BCG, ...): tinted\n * quadrants with titles, dividers, and labelled dots placed without\n * overlapping labels. Dots can be dragged to another quadrant.\n */\ndefineOptions({ name: \"QuadrantChart\" });\nconst props = defineProps({\n  ...chartCommonProps,\n  /** Points to place (replace the array to update the chart) */\n  points: { type: Array as PropType<readonly QuadrantPoint[]>, required: true },\n  /** Range of the horizontal axis (default `[0, 10]`) */\n  xDomain: Array as unknown as PropType<[number, number]>,\n  /** Range of the vertical axis (default `[0, 10]`) */\n  yDomain: Array as unknown as PropType<[number, number]>,\n  /** X value of the vertical divider (the middle of `xDomain` by default) */\n  xSplit: Number,\n  /** Y value of the horizontal divider (the middle of `yDomain` by default) */\n  ySplit: Number,\n  /** Titles and colors of the quadrants */\n  quadrants: Object as PropType<QuadrantRegions>,\n  /** Title of the horizontal axis */\n  xLabel: String,\n  /** Title of the vertical axis */\n  yLabel: String,\n  /** Texts at the ends of the dividers, drawn inside the plot */\n  axisLabels: Object as PropType<QuadrantAxisLabels>,\n  /** Shows the numeric ticks of the axes (default `true`) */\n  showTicks: { type: Boolean, default: undefined },\n  /** Reverses the horizontal axis (e.g. \"urgent\" on the left) */\n  reverseX: { type: Boolean, default: undefined },\n  /** Draws the labels next to the dots (default `true`) */\n  showLabels: { type: Boolean, default: undefined },\n  /** Dot diameter in pixels (default 12) */\n  pointSize: Number,\n  /** Name of the points in the tooltip */\n  name: String,\n  /** Lets the user drag the dots (default: when a `pointDrop` listener is set) */\n  draggable: { type: Boolean, default: undefined },\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) point changed (`null`: none) */\n  hover: [event: ChartHoverEvent | null];\n  /** A point was clicked */\n  pointClick: [point: QuadrantPoint, index: number];\n  /** The empty area of a quadrant was clicked */\n  quadrantClick: [quadrant: QuadrantCorner, position: { x: number; y: number }];\n  /** A dragged point was released (the chart does not move it: update `points`) */\n  pointDrop: [point: QuadrantPoint, index: number, target: QuadrantDropTarget];\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 vnode = getCurrentInstance()?.vnode;\nconst geometry = () => ({\n  xDomain: raw(props.xDomain),\n  yDomain: raw(props.yDomain),\n  xSplit: props.xSplit,\n  ySplit: props.ySplit,\n  reverseX: props.reverseX,\n});\nconst { setContainer, rootStyle, handle } = useCartesianChart(\n  props,\n  () =>\n    quadrantChartOptions(\n      {\n        ...geometry(),\n        points: raw(props.points).map(raw),\n        quadrants: raw(props.quadrants),\n        xLabel: props.xLabel,\n        yLabel: props.yLabel,\n        axisLabels: raw(props.axisLabels),\n        showTicks: props.showTicks,\n        showLabels: props.showLabels,\n        pointSize: props.pointSize,\n        name: props.name,\n        draggable: props.draggable ?? !!vnode?.props?.onPointDrop,\n      },\n      (({ series: _series, ...rest }) => rest)(engineOptions(props, [])),\n    ),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => {\n      const index = event.items[0]?.index;\n      const point = index === undefined ? undefined : props.points[index];\n      if (point && index !== undefined) emit(\"pointClick\", point, index);\n    },\n    plotClick: (at) =>\n      emit(\"quadrantClick\", quadrantOf(geometry(), at.x, at.y), {\n        x: at.x,\n        y: at.y,\n      }),\n    drop: (event) => {\n      const index = event.item.index;\n      const point = props.points[index];\n      if (!point) return;\n      emit(\"pointDrop\", point, index, {\n        x: event.x,\n        y: event.y,\n        quadrant: quadrantOf(geometry(), event.x, event.y),\n      });\n    },\n    zoom: (view) => emit(\"zoom\", view),\n    renderer: (renderer) => emit(\"rendererChange\", renderer),\n  },\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div\n    class=\"mn-chart mn-quadrant-chart\"\n    data-minerva=\"chart\"\n    :style=\"rootStyle\"\n  >\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAMS,IAAQC,GAiCRC,IAAOH,GAcPI,IAAQC,EAAmB,CAAC,EAAE,OAC9BC,WAAkB;GACtB,SAASC,EAAIN,EAAM,OAAO;GAC1B,SAASM,EAAIN,EAAM,OAAO;GAC1B,QAAQA,EAAM;GACd,QAAQA,EAAM;GACd,UAAUA,EAAM;EAClB,IACM,EAAE,iBAAc,cAAW,cAAWO,EAC1CP,SAEEQ,EACE;GACE,GAAGH,EAAS;GACZ,QAAQC,EAAIN,EAAM,MAAM,CAAC,CAAC,IAAIM,CAAG;GACjC,WAAWA,EAAIN,EAAM,SAAS;GAC9B,QAAQA,EAAM;GACd,QAAQA,EAAM;GACd,YAAYM,EAAIN,EAAM,UAAU;GAChC,WAAWA,EAAM;GACjB,YAAYA,EAAM;GAClB,WAAWA,EAAM;GACjB,MAAMA,EAAM;GACZ,WAAWA,EAAM,aAAa,CAAC,CAACG,GAAO,OAAO;EAChD,KACE,EAAE,QAAQM,GAAS,GAAGC,QAAWA,EAAA,CAAMC,EAAcX,GAAO,CAAC,CAAC,CAAC,CACnE,GACF;GACE,QAAQ,MAAUE,EAAK,SAASU,CAAK;GACrC,QAAQ,MAAU;IAChB,IAAMC,IAAQD,EAAM,MAAM,EAAE,EAAE,OACxBE,IAAQD,MAAU,KAAA,IAAY,KAAA,IAAYb,EAAM,OAAOa;IAC7D,AAAIC,KAASD,MAAU,KAAA,KAAWX,EAAK,cAAcY,GAAOD,CAAK;GACnE;GACA,YAAY,MACVX,EAAK,iBAAiBa,EAAWV,EAAS,GAAGW,EAAG,GAAGA,EAAG,CAAC,GAAG;IACxD,GAAGA,EAAG;IACN,GAAGA,EAAG;GACR,CAAC;GACH,OAAO,MAAU;IACf,IAAMH,IAAQD,EAAM,KAAK,OACnBE,IAAQd,EAAM,OAAOa;IAC3B,AAAKC,KACLZ,EAAK,aAAaY,GAAOD,GAAO;KAC9B,GAAGD,EAAM;KACT,GAAGA,EAAM;KACT,UAAUG,EAAWV,EAAS,GAAGO,EAAM,GAAGA,EAAM,CAAC;IACnD,CAAC;GACH;GACA,OAAO,MAASV,EAAK,QAAQe,CAAI;GACjC,WAAW,MAAaf,EAAK,kBAAkBgB,CAAQ;EACzD,CACF;SACApB,EAAaqB,CAAM,cAIjB5B,EAAA,GAAAC,EAMM,OAAA;GALJ,OAAM;GACN,gBAAa;GACZ,OAAKC,EAAEC,EAAA8B,CAAA,CAAS;EAEjB7B,GAAAA,CAAAA,EAAoE,OAAA;GAA9D,KAAKD,EAAAgC,CAAA;GAAc,OAAA;IAAAC,UAAA;IAAAC,OAAA;GAAA"}

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

@@ -0,0 +1,111 @@
+import { PropType } from 'vue';
+import { RadarIndicator, RadarSeries, ShapeHoverEvent, ShapeToggleEvent } from '../../../charts/core.js';
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Axes of the chart `{ name, max }`, clockwise from 12 o'clock */
+    indicators: {
+        type: PropType<readonly RadarIndicator[]>;
+        required: true;
+    };
+    /** Polygons `{ name, values }`: one value per indicator */
+    series: {
+        type: PropType<readonly RadarSeries[]>;
+        required: true;
+    };
+    /** Grid shape (default `polygon`) */
+    shape: PropType<"polygon" | "circle">;
+    /** Number of grid rings (default 4) */
+    levels: NumberConstructor;
+    /** Dots on the vertices (default `true`) */
+    dots: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    palette: PropType<readonly string[]>;
+    legend: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeTooltipOptions>;
+        default: undefined;
+    };
+    format: PropType<(value: number) => string>;
+    percentFormat: PropType<(share: number) => string>;
+    hidden: PropType<readonly number[]>;
+    animation: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    padding: PropType<import('../../../charts/core.js').ChartPadding>;
+    ariaLabel: StringConstructor;
+    locale: StringConstructor;
+    texts: PropType<import('../../../charts/core.js').ShapeChartCommonOptions["texts"]>;
+    height: PropType<number | string>;
+    width: PropType<number | string>;
+    deep: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, import('./types.js').ShapeChartHandle, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: ShapeHoverEvent) => any;
+    toggle: (event: ShapeToggleEvent) => any;
+    hover: (event: ShapeHoverEvent | null) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Axes of the chart `{ name, max }`, clockwise from 12 o'clock */
+    indicators: {
+        type: PropType<readonly RadarIndicator[]>;
+        required: true;
+    };
+    /** Polygons `{ name, values }`: one value per indicator */
+    series: {
+        type: PropType<readonly RadarSeries[]>;
+        required: true;
+    };
+    /** Grid shape (default `polygon`) */
+    shape: PropType<"polygon" | "circle">;
+    /** Number of grid rings (default 4) */
+    levels: NumberConstructor;
+    /** Dots on the vertices (default `true`) */
+    dots: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    palette: PropType<readonly string[]>;
+    legend: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeTooltipOptions>;
+        default: undefined;
+    };
+    format: PropType<(value: number) => string>;
+    percentFormat: PropType<(share: number) => string>;
+    hidden: PropType<readonly number[]>;
+    animation: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    padding: PropType<import('../../../charts/core.js').ChartPadding>;
+    ariaLabel: StringConstructor;
+    locale: StringConstructor;
+    texts: PropType<import('../../../charts/core.js').ShapeChartCommonOptions["texts"]>;
+    height: PropType<number | string>;
+    width: PropType<number | string>;
+    deep: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((event: ShapeHoverEvent) => any) | undefined;
+    onToggle?: ((event: ShapeToggleEvent) => any) | undefined;
+    onHover?: ((event: ShapeHoverEvent | null) => any) | undefined;
+}>, {
+    tooltip: boolean | import('../../../charts/core.js').ShapeTooltipOptions;
+    legend: boolean | import('../../../charts/core.js').ShapeLegendOptions;
+    animation: boolean;
+    deep: boolean;
+    dots: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+import e from "./RadarChart.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Chart/RadarChart.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=RadarChart.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadarChart.vue.js","names":["_sfc_main","RadarChart_vue_vue_type_script_setup_true_lang_default","RadarChart_default"],"sources":["../../../../../vue/src/components/Chart/RadarChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport type {\n  RadarIndicator,\n  RadarSeries,\n  ShapeHoverEvent,\n  ShapeToggleEvent,\n} from \"minerva-design/charts/core\";\nimport { raw } from \"./engine\";\nimport { shapeCommonProps } from \"./props\";\nimport { shapeCommonOptions, useShapeChart } from \"./shape\";\n\n/** Radar (spider) chart comparing series over several indicators */\ndefineOptions({ name: \"RadarChart\" });\nconst props = defineProps({\n  ...shapeCommonProps,\n  /** Axes of the chart `{ name, max }`, clockwise from 12 o'clock */\n  indicators: {\n    type: Array as PropType<readonly RadarIndicator[]>,\n    required: true,\n  },\n  /** Polygons `{ name, values }`: one value per indicator */\n  series: { type: Array as PropType<readonly RadarSeries[]>, required: true },\n  /** Grid shape (default `polygon`) */\n  shape: String as PropType<\"polygon\" | \"circle\">,\n  /** Number of grid rings (default 4) */\n  levels: Number,\n  /** Dots on the vertices (default `true`) */\n  dots: { type: Boolean, default: undefined },\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) series changed (`null`: none) */\n  hover: [event: ShapeHoverEvent | null];\n  /** A series was clicked, tapped or activated with Enter */\n  click: [event: ShapeHoverEvent];\n  /** A legend item was clicked (or `toggle()` was called) */\n  toggle: [event: ShapeToggleEvent];\n}>();\nconst { setContainer, rootStyle, handle } = useShapeChart(\n  props,\n  () => ({\n    ...shapeCommonOptions(props),\n    type: \"radar\",\n    indicators: raw(props.indicators),\n    series: raw(props.series),\n    shape: props.shape,\n    levels: props.levels,\n    dots: props.dots,\n  }),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => emit(\"click\", event),\n    toggle: (event) => emit(\"toggle\", event),\n  },\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div class=\"mn-chart mn-shape-chart\" data-minerva=\"chart\" :style=\"rootStyle\">\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,61 @@
+import { raw as e } from "./engine.js";
+import { shapeCommonProps as t } from "./props.js";
+import { shapeCommonOptions as n, useShapeChart as r } from "./shape.js";
+import { createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, unref as l } from "vue";
+//#region src/components/Chart/RadarChart.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ o({
+	name: "RadarChart",
+	__name: "RadarChart",
+	props: {
+		...t,
+		indicators: {
+			type: Array,
+			required: !0
+		},
+		series: {
+			type: Array,
+			required: !0
+		},
+		shape: String,
+		levels: Number,
+		dots: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"hover",
+		"click",
+		"toggle"
+	],
+	setup(t, { expose: o, emit: u }) {
+		let d = t, f = u, { setContainer: p, rootStyle: m, handle: h } = r(d, () => ({
+			...n(d),
+			type: "radar",
+			indicators: e(d.indicators),
+			series: e(d.series),
+			shape: d.shape,
+			levels: d.levels,
+			dots: d.dots
+		}), {
+			hover: (e) => f("hover", e),
+			click: (e) => f("click", e),
+			toggle: (e) => f("toggle", e)
+		});
+		return o(h), (e, t) => (c(), i("div", {
+			class: "mn-chart mn-shape-chart",
+			"data-minerva": "chart",
+			style: s(l(m))
+		}, [a("div", {
+			ref: l(p),
+			style: {
+				position: "absolute",
+				inset: "0"
+			}
+		}, null, 512)], 4));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=RadarChart.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadarChart.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_createElementVNode","RadarChart_vue_vue_type_script_setup_true_lang_default","shapeCommonProps","__expose","__emit","props","__props","emit","useShapeChart","shapeCommonOptions","raw","event","handle","openBlock","createElementBlock","normalizeStyle","unref","rootStyle","createElementVNode","setContainer","\"position\"","\"inset\""],"sources":["../../../../../vue/src/components/Chart/RadarChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport type {\n  RadarIndicator,\n  RadarSeries,\n  ShapeHoverEvent,\n  ShapeToggleEvent,\n} from \"minerva-design/charts/core\";\nimport { raw } from \"./engine\";\nimport { shapeCommonProps } from \"./props\";\nimport { shapeCommonOptions, useShapeChart } from \"./shape\";\n\n/** Radar (spider) chart comparing series over several indicators */\ndefineOptions({ name: \"RadarChart\" });\nconst props = defineProps({\n  ...shapeCommonProps,\n  /** Axes of the chart `{ name, max }`, clockwise from 12 o'clock */\n  indicators: {\n    type: Array as PropType<readonly RadarIndicator[]>,\n    required: true,\n  },\n  /** Polygons `{ name, values }`: one value per indicator */\n  series: { type: Array as PropType<readonly RadarSeries[]>, required: true },\n  /** Grid shape (default `polygon`) */\n  shape: String as PropType<\"polygon\" | \"circle\">,\n  /** Number of grid rings (default 4) */\n  levels: Number,\n  /** Dots on the vertices (default `true`) */\n  dots: { type: Boolean, default: undefined },\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) series changed (`null`: none) */\n  hover: [event: ShapeHoverEvent | null];\n  /** A series was clicked, tapped or activated with Enter */\n  click: [event: ShapeHoverEvent];\n  /** A legend item was clicked (or `toggle()` was called) */\n  toggle: [event: ShapeToggleEvent];\n}>();\nconst { setContainer, rootStyle, handle } = useShapeChart(\n  props,\n  () => ({\n    ...shapeCommonOptions(props),\n    type: \"radar\",\n    indicators: raw(props.indicators),\n    series: raw(props.series),\n    shape: props.shape,\n    levels: props.levels,\n    dots: props.dots,\n  }),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => emit(\"click\", event),\n    toggle: (event) => emit(\"toggle\", event),\n  },\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div class=\"mn-chart mn-shape-chart\" data-minerva=\"chart\" :style=\"rootStyle\">\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAMS,IAAQC,GAgBRC,IAAOH,GAQP,EAAE,iBAAc,cAAW,cAAWI,EAC1CH,UACO;GACL,GAAGI,EAAmBJ,CAAK;GAC3B,MAAM;GACN,YAAYK,EAAIL,EAAM,UAAU;GAChC,QAAQK,EAAIL,EAAM,MAAM;GACxB,OAAOA,EAAM;GACb,QAAQA,EAAM;GACd,MAAMA,EAAM;EACd,IACA;GACE,QAAQ,MAAUE,EAAK,SAASI,CAAK;GACrC,QAAQ,MAAUJ,EAAK,SAASI,CAAK;GACrC,SAAS,MAAUJ,EAAK,UAAUI,CAAK;EACzC,CACF;SACAR,EAAaS,CAAM,cAIjBhB,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAA0B,gBAAa;GAAS,OAAKC,EAAEC,EAAAkB,CAAA,CAAS;EACzEjB,GAAAA,CAAAA,EAAoE,OAAA;GAA9D,KAAKD,EAAAoB,CAAA;GAAc,OAAA;IAAAC,UAAA;IAAAC,OAAA;GAAA"}

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

@@ -0,0 +1,147 @@
+import { PropType } from 'vue';
+import { RadialBarDatum, ShapeHoverEvent, ShapeToggleEvent } from '../../../charts/core.js';
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Bars, from the outermost ring inward: a name, a value, an optional `max` and color */
+    data: {
+        type: PropType<readonly RadialBarDatum[]>;
+        required: true;
+    };
+    /** Value of a full bar for the data without `max` (default: the largest value) */
+    max: NumberConstructor;
+    /** Radius of the innermost ring's inner edge, as a fraction of the outer radius (default 0.3) */
+    innerRadius: NumberConstructor;
+    /** Angle where the bars start, degrees clockwise from 12 o'clock (default 0) */
+    startAngle: NumberConstructor;
+    /** Angle of a full bar, degrees; 360 = full rings (default 270) */
+    sweep: NumberConstructor;
+    /** Gap between the rings, as a fraction of a ring's slot (default 0.28) */
+    gap: NumberConstructor;
+    /** Background tracks behind the bars (default `true`) */
+    track: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Rounded bar ends (default `true`) */
+    rounded: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Labels before the start of the bars (default: when `sweep` leaves room for them) */
+    labels: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** What a label shows: name, value, percent of the bar's max (default `["name", "value"]`) */
+    labelContent: PropType<readonly ("name" | "value" | "percent")[]>;
+    /** Big text in the center (e.g. the overall completion) */
+    centerValue: StringConstructor;
+    /** Small text under `centerValue` */
+    centerLabel: StringConstructor;
+    palette: PropType<readonly string[]>;
+    legend: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeTooltipOptions>;
+        default: undefined;
+    };
+    format: PropType<(value: number) => string>;
+    percentFormat: PropType<(share: number) => string>;
+    hidden: PropType<readonly number[]>;
+    animation: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    padding: PropType<import('../../../charts/core.js').ChartPadding>;
+    ariaLabel: StringConstructor;
+    locale: StringConstructor;
+    texts: PropType<import('../../../charts/core.js').ShapeChartCommonOptions["texts"]>;
+    height: PropType<number | string>;
+    width: PropType<number | string>;
+    deep: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, import('./types.js').ShapeChartHandle, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: ShapeHoverEvent) => any;
+    toggle: (event: ShapeToggleEvent) => any;
+    hover: (event: ShapeHoverEvent | null) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Bars, from the outermost ring inward: a name, a value, an optional `max` and color */
+    data: {
+        type: PropType<readonly RadialBarDatum[]>;
+        required: true;
+    };
+    /** Value of a full bar for the data without `max` (default: the largest value) */
+    max: NumberConstructor;
+    /** Radius of the innermost ring's inner edge, as a fraction of the outer radius (default 0.3) */
+    innerRadius: NumberConstructor;
+    /** Angle where the bars start, degrees clockwise from 12 o'clock (default 0) */
+    startAngle: NumberConstructor;
+    /** Angle of a full bar, degrees; 360 = full rings (default 270) */
+    sweep: NumberConstructor;
+    /** Gap between the rings, as a fraction of a ring's slot (default 0.28) */
+    gap: NumberConstructor;
+    /** Background tracks behind the bars (default `true`) */
+    track: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Rounded bar ends (default `true`) */
+    rounded: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Labels before the start of the bars (default: when `sweep` leaves room for them) */
+    labels: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** What a label shows: name, value, percent of the bar's max (default `["name", "value"]`) */
+    labelContent: PropType<readonly ("name" | "value" | "percent")[]>;
+    /** Big text in the center (e.g. the overall completion) */
+    centerValue: StringConstructor;
+    /** Small text under `centerValue` */
+    centerLabel: StringConstructor;
+    palette: PropType<readonly string[]>;
+    legend: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: PropType<boolean | import('../../../charts/core.js').ShapeTooltipOptions>;
+        default: undefined;
+    };
+    format: PropType<(value: number) => string>;
+    percentFormat: PropType<(share: number) => string>;
+    hidden: PropType<readonly number[]>;
+    animation: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    padding: PropType<import('../../../charts/core.js').ChartPadding>;
+    ariaLabel: StringConstructor;
+    locale: StringConstructor;
+    texts: PropType<import('../../../charts/core.js').ShapeChartCommonOptions["texts"]>;
+    height: PropType<number | string>;
+    width: PropType<number | string>;
+    deep: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((event: ShapeHoverEvent) => any) | undefined;
+    onToggle?: ((event: ShapeToggleEvent) => any) | undefined;
+    onHover?: ((event: ShapeHoverEvent | null) => any) | undefined;
+}>, {
+    rounded: boolean;
+    tooltip: boolean | import('../../../charts/core.js').ShapeTooltipOptions;
+    track: boolean;
+    legend: boolean | import('../../../charts/core.js').ShapeLegendOptions;
+    animation: boolean;
+    labels: boolean;
+    deep: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+import e from "./RadialBarChart.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Chart/RadialBarChart.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=RadialBarChart.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialBarChart.vue.js","names":["_sfc_main","RadialBarChart_vue_vue_type_script_setup_true_lang_default","RadialBarChart_default"],"sources":["../../../../../vue/src/components/Chart/RadialBarChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport type {\n  RadialBarDatum,\n  ShapeHoverEvent,\n  ShapeToggleEvent,\n} from \"minerva-design/charts/core\";\nimport { raw } from \"./engine\";\nimport { shapeCommonProps } from \"./props\";\nimport { shapeCommonOptions, useShapeChart } from \"./shape\";\n\n/**\n * Radial bar chart: concentric progress rings (activity rings, KPI completion)\n */\ndefineOptions({ name: \"RadialBarChart\" });\nconst props = defineProps({\n  ...shapeCommonProps,\n  /** Bars, from the outermost ring inward: a name, a value, an optional `max` and color */\n  data: { type: Array as PropType<readonly RadialBarDatum[]>, required: true },\n  /** Value of a full bar for the data without `max` (default: the largest value) */\n  max: Number,\n  /** Radius of the innermost ring's inner edge, as a fraction of the outer radius (default 0.3) */\n  innerRadius: Number,\n  /** Angle where the bars start, degrees clockwise from 12 o'clock (default 0) */\n  startAngle: Number,\n  /** Angle of a full bar, degrees; 360 = full rings (default 270) */\n  sweep: Number,\n  /** Gap between the rings, as a fraction of a ring's slot (default 0.28) */\n  gap: Number,\n  /** Background tracks behind the bars (default `true`) */\n  track: { type: Boolean, default: undefined },\n  /** Rounded bar ends (default `true`) */\n  rounded: { type: Boolean, default: undefined },\n  /** Labels before the start of the bars (default: when `sweep` leaves room for them) */\n  labels: { type: Boolean, default: undefined },\n  /** What a label shows: name, value, percent of the bar's max (default `[\"name\", \"value\"]`) */\n  labelContent: Array as PropType<readonly (\"name\" | \"value\" | \"percent\")[]>,\n  /** Big text in the center (e.g. the overall completion) */\n  centerValue: String,\n  /** Small text under `centerValue` */\n  centerLabel: String,\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) bar changed (`null`: none) */\n  hover: [event: ShapeHoverEvent | null];\n  /** A bar was clicked, tapped or activated with Enter */\n  click: [event: ShapeHoverEvent];\n  /** A legend item was clicked (or `toggle()` was called) */\n  toggle: [event: ShapeToggleEvent];\n}>();\nconst { setContainer, rootStyle, handle } = useShapeChart(\n  props,\n  () => ({\n    ...shapeCommonOptions(props),\n    type: \"radialBar\",\n    data: raw(props.data),\n    max: props.max,\n    innerRadius: props.innerRadius,\n    startAngle: props.startAngle,\n    sweep: props.sweep,\n    gap: props.gap,\n    track: props.track,\n    rounded: props.rounded,\n    labels: props.labels,\n    labelContent: raw(props.labelContent),\n    centerValue: props.centerValue,\n    centerLabel: props.centerLabel,\n  }),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => emit(\"click\", event),\n    toggle: (event) => emit(\"toggle\", event),\n  },\n  300,\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div class=\"mn-chart mn-shape-chart\" data-minerva=\"chart\" :style=\"rootStyle\">\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,78 @@
+import { raw as e } from "./engine.js";
+import { shapeCommonProps as t } from "./props.js";
+import { shapeCommonOptions as n, useShapeChart as r } from "./shape.js";
+import { createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, unref as l } from "vue";
+//#region src/components/Chart/RadialBarChart.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ o({
+	name: "RadialBarChart",
+	__name: "RadialBarChart",
+	props: {
+		...t,
+		data: {
+			type: Array,
+			required: !0
+		},
+		max: Number,
+		innerRadius: Number,
+		startAngle: Number,
+		sweep: Number,
+		gap: Number,
+		track: {
+			type: Boolean,
+			default: void 0
+		},
+		rounded: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: {
+			type: Boolean,
+			default: void 0
+		},
+		labelContent: Array,
+		centerValue: String,
+		centerLabel: String
+	},
+	emits: [
+		"hover",
+		"click",
+		"toggle"
+	],
+	setup(t, { expose: o, emit: u }) {
+		let d = t, f = u, { setContainer: p, rootStyle: m, handle: h } = r(d, () => ({
+			...n(d),
+			type: "radialBar",
+			data: e(d.data),
+			max: d.max,
+			innerRadius: d.innerRadius,
+			startAngle: d.startAngle,
+			sweep: d.sweep,
+			gap: d.gap,
+			track: d.track,
+			rounded: d.rounded,
+			labels: d.labels,
+			labelContent: e(d.labelContent),
+			centerValue: d.centerValue,
+			centerLabel: d.centerLabel
+		}), {
+			hover: (e) => f("hover", e),
+			click: (e) => f("click", e),
+			toggle: (e) => f("toggle", e)
+		}, 300);
+		return o(h), (e, t) => (c(), i("div", {
+			class: "mn-chart mn-shape-chart",
+			"data-minerva": "chart",
+			style: s(l(m))
+		}, [a("div", {
+			ref: l(p),
+			style: {
+				position: "absolute",
+				inset: "0"
+			}
+		}, null, 512)], 4));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=RadialBarChart.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialBarChart.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_createElementVNode","RadialBarChart_vue_vue_type_script_setup_true_lang_default","shapeCommonProps","__expose","__emit","props","__props","emit","useShapeChart","shapeCommonOptions","raw","event","handle","openBlock","createElementBlock","normalizeStyle","unref","rootStyle","createElementVNode","setContainer","\"position\"","\"inset\""],"sources":["../../../../../vue/src/components/Chart/RadialBarChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport type {\n  RadialBarDatum,\n  ShapeHoverEvent,\n  ShapeToggleEvent,\n} from \"minerva-design/charts/core\";\nimport { raw } from \"./engine\";\nimport { shapeCommonProps } from \"./props\";\nimport { shapeCommonOptions, useShapeChart } from \"./shape\";\n\n/**\n * Radial bar chart: concentric progress rings (activity rings, KPI completion)\n */\ndefineOptions({ name: \"RadialBarChart\" });\nconst props = defineProps({\n  ...shapeCommonProps,\n  /** Bars, from the outermost ring inward: a name, a value, an optional `max` and color */\n  data: { type: Array as PropType<readonly RadialBarDatum[]>, required: true },\n  /** Value of a full bar for the data without `max` (default: the largest value) */\n  max: Number,\n  /** Radius of the innermost ring's inner edge, as a fraction of the outer radius (default 0.3) */\n  innerRadius: Number,\n  /** Angle where the bars start, degrees clockwise from 12 o'clock (default 0) */\n  startAngle: Number,\n  /** Angle of a full bar, degrees; 360 = full rings (default 270) */\n  sweep: Number,\n  /** Gap between the rings, as a fraction of a ring's slot (default 0.28) */\n  gap: Number,\n  /** Background tracks behind the bars (default `true`) */\n  track: { type: Boolean, default: undefined },\n  /** Rounded bar ends (default `true`) */\n  rounded: { type: Boolean, default: undefined },\n  /** Labels before the start of the bars (default: when `sweep` leaves room for them) */\n  labels: { type: Boolean, default: undefined },\n  /** What a label shows: name, value, percent of the bar's max (default `[\"name\", \"value\"]`) */\n  labelContent: Array as PropType<readonly (\"name\" | \"value\" | \"percent\")[]>,\n  /** Big text in the center (e.g. the overall completion) */\n  centerValue: String,\n  /** Small text under `centerValue` */\n  centerLabel: String,\n});\nconst emit = defineEmits<{\n  /** The hovered (or keyboard-focused) bar changed (`null`: none) */\n  hover: [event: ShapeHoverEvent | null];\n  /** A bar was clicked, tapped or activated with Enter */\n  click: [event: ShapeHoverEvent];\n  /** A legend item was clicked (or `toggle()` was called) */\n  toggle: [event: ShapeToggleEvent];\n}>();\nconst { setContainer, rootStyle, handle } = useShapeChart(\n  props,\n  () => ({\n    ...shapeCommonOptions(props),\n    type: \"radialBar\",\n    data: raw(props.data),\n    max: props.max,\n    innerRadius: props.innerRadius,\n    startAngle: props.startAngle,\n    sweep: props.sweep,\n    gap: props.gap,\n    track: props.track,\n    rounded: props.rounded,\n    labels: props.labels,\n    labelContent: raw(props.labelContent),\n    centerValue: props.centerValue,\n    centerLabel: props.centerLabel,\n  }),\n  {\n    hover: (event) => emit(\"hover\", event),\n    click: (event) => emit(\"click\", event),\n    toggle: (event) => emit(\"toggle\", event),\n  },\n  300,\n);\ndefineExpose(handle);\n</script>\n\n<template>\n  <div class=\"mn-chart mn-shape-chart\" data-minerva=\"chart\" :style=\"rootStyle\">\n    <div :ref=\"setContainer\" style=\"position: absolute; inset: 0\"></div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAMS,IAAQC,GA2BRC,IAAOH,GAQP,EAAE,iBAAc,cAAW,cAAWI,EAC1CH,UACO;GACL,GAAGI,EAAmBJ,CAAK;GAC3B,MAAM;GACN,MAAMK,EAAIL,EAAM,IAAI;GACpB,KAAKA,EAAM;GACX,aAAaA,EAAM;GACnB,YAAYA,EAAM;GAClB,OAAOA,EAAM;GACb,KAAKA,EAAM;GACX,OAAOA,EAAM;GACb,SAASA,EAAM;GACf,QAAQA,EAAM;GACd,cAAcK,EAAIL,EAAM,YAAY;GACpC,aAAaA,EAAM;GACnB,aAAaA,EAAM;EACrB,IACA;GACE,QAAQ,MAAUE,EAAK,SAASI,CAAK;GACrC,QAAQ,MAAUJ,EAAK,SAASI,CAAK;GACrC,SAAS,MAAUJ,EAAK,UAAUI,CAAK;EACzC,GACA,GACF;SACAR,EAAaS,CAAM,cAIjBhB,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAA0B,gBAAa;GAAS,OAAKC,EAAEC,EAAAkB,CAAA,CAAS;EACzEjB,GAAAA,CAAAA,EAAoE,OAAA;GAA9D,KAAKD,EAAAoB,CAAA;GAAc,OAAA;IAAAC,UAAA;IAAAC,OAAA;GAAA"}