vccs 0.0.1 → 0.2.0

package/dist/es/chart/ComposedChart.mjs

@@ -0,0 +1,10 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+var ComposedChart = generateCategoricalChart({
+	chartName: "ComposedChart",
+	defaultTooltipEventType: "axis",
+	tooltipPayloadSearcher: arrayTooltipSearcher,
+	validateTooltipEventTypes: ["axis"]
+});
+//#endregion
+export { ComposedChart };

package/dist/es/chart/FunnelChart.mjs

@@ -0,0 +1,11 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+//#region src/chart/FunnelChart.ts
+var FunnelChart = generateCategoricalChart({
+	chartName: "FunnelChart",
+	defaultTooltipEventType: "item",
+	validateTooltipEventTypes: ["item"],
+	tooltipPayloadSearcher: arrayTooltipSearcher
+});
+//#endregion
+export { FunnelChart };

package/dist/es/chart/LegendPortalContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/chart/LegendPortalContext.ts
+var [useLegendPortal, provideLegendPortalRaw] = createContext("LegendPortalContext");
+//#endregion
+export { provideLegendPortalRaw, useLegendPortal };

package/dist/es/chart/LineChart.mjs

@@ -0,0 +1,10 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+var LineChart = generateCategoricalChart({
+	chartName: "LineChart",
+	defaultTooltipEventType: "axis",
+	tooltipPayloadSearcher: arrayTooltipSearcher,
+	validateTooltipEventTypes: ["axis", "item"]
+});
+//#endregion
+export { LineChart };

package/dist/es/chart/PieChart.mjs

@@ -0,0 +1,16 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+//#region src/chart/PieChart.ts
+var PieChart = generateCategoricalChart({
+	chartName: "PieChart",
+	defaultProps: {
+		layout: "centric",
+		startAngle: 0,
+		endAngle: 360
+	},
+	defaultTooltipEventType: "item",
+	validateTooltipEventTypes: ["item"],
+	tooltipPayloadSearcher: arrayTooltipSearcher
+});
+//#endregion
+export { PieChart };

package/dist/es/chart/RadarChart.mjs

@@ -0,0 +1,16 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+//#region src/chart/RadarChart.ts
+var RadarChart = generateCategoricalChart({
+	chartName: "RadarChart",
+	defaultProps: {
+		layout: "centric",
+		startAngle: 90,
+		endAngle: -270
+	},
+	defaultTooltipEventType: "axis",
+	validateTooltipEventTypes: ["axis"],
+	tooltipPayloadSearcher: arrayTooltipSearcher
+});
+//#endregion
+export { RadarChart };

package/dist/es/chart/RadialBarChart.mjs

@@ -0,0 +1,16 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+//#region src/chart/RadialBarChart.ts
+var RadialBarChart = generateCategoricalChart({
+	chartName: "RadialBarChart",
+	defaultProps: {
+		layout: "radial",
+		startAngle: 0,
+		endAngle: 360
+	},
+	defaultTooltipEventType: "axis",
+	validateTooltipEventTypes: ["axis", "item"],
+	tooltipPayloadSearcher: arrayTooltipSearcher
+});
+//#endregion
+export { RadialBarChart };

package/dist/es/chart/RechartsWrapper.mjs

@@ -0,0 +1,160 @@
+import { getChartPointer } from "../utils/chart.mjs";
+import { mouseLeaveChart } from "../state/tooltipSlice.mjs";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { mouseClickAction, mouseMoveAction } from "../state/mouseEventsMiddleware.mjs";
+import { focusAction, keyDownAction } from "../state/keyboardEventsMiddleware.mjs";
+import { externalEventAction } from "../state/externalEventsMiddleware.mjs";
+import { touchEventAction } from "../state/touchEventsMiddleware.mjs";
+import { useSynchronisedEventsFromOtherCharts } from "../events/useChartSynchronisation.mjs";
+import { useReportScale } from "../state/utils/useReportScale.mjs";
+import { providePortalRaw } from "./TooltipPortalContext.mjs";
+import { provideLegendPortalRaw } from "./LegendPortalContext.mjs";
+import { createVNode, defineComponent, ref } from "vue";
+//#region src/chart/RechartsWrapper.tsx
+var RechartsWrapper = /* @__PURE__ */ defineComponent({
+	name: "RechartsWrapper",
+	props: {
+		class: { type: String },
+		height: {
+			type: Number,
+			required: true
+		},
+		onClick: { type: Function },
+		onContextMenu: { type: Function },
+		onDoubleClick: { type: Function },
+		onMouseDown: { type: Function },
+		onMouseEnter: { type: Function },
+		onMouseLeave: { type: Function },
+		onMouseMove: { type: Function },
+		onMouseUp: { type: Function },
+		onTouchEnd: { type: Function },
+		onTouchMove: { type: Function },
+		onTouchStart: { type: Function },
+		style: { type: Object },
+		width: {
+			type: Number,
+			required: true
+		}
+	},
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		useSynchronisedEventsFromOtherCharts();
+		const scaleRef = useReportScale();
+		const tooltipPortal = ref(null);
+		const legendPortal = ref(null);
+		providePortalRaw(tooltipPortal);
+		provideLegendPortalRaw(legendPortal);
+		const innerRef = (node) => {
+			scaleRef.value = node;
+			tooltipPortal.value = node;
+			legendPortal.value = node;
+		};
+		const myOnClick = (e) => {
+			const chartPointer = getChartPointer(e);
+			if (chartPointer) dispatch(mouseClickAction(chartPointer));
+			dispatch(externalEventAction({
+				handler: props.onClick,
+				event: e
+			}));
+		};
+		const myOnMouseEnter = (e) => {
+			const chartPointer = getChartPointer(e);
+			if (chartPointer) dispatch(mouseMoveAction(chartPointer));
+			dispatch(externalEventAction({
+				handler: props.onMouseEnter,
+				event: e
+			}));
+		};
+		const myOnMouseLeave = (e) => {
+			dispatch(mouseLeaveChart());
+			dispatch(externalEventAction({
+				handler: props.onMouseLeave,
+				event: e
+			}));
+		};
+		const myOnMouseMove = (e) => {
+			const chartPointer = getChartPointer(e);
+			if (chartPointer) dispatch(mouseMoveAction(chartPointer));
+			dispatch(externalEventAction({
+				handler: props.onMouseMove,
+				event: e
+			}));
+		};
+		const onFocus = () => {
+			dispatch(focusAction());
+		};
+		const onKeyDown = (e) => {
+			dispatch(keyDownAction(e.key));
+		};
+		const myOnContextMenu = (e) => {
+			dispatch(externalEventAction({
+				handler: props.onContextMenu,
+				event: e
+			}));
+		};
+		const myOnDoubleClick = (e) => {
+			dispatch(externalEventAction({
+				handler: props.onDoubleClick,
+				event: e
+			}));
+		};
+		const myOnMouseDown = (e) => {
+			dispatch(externalEventAction({
+				handler: props.onMouseDown,
+				event: e
+			}));
+		};
+		const myOnMouseUp = (e) => {
+			dispatch(externalEventAction({
+				handler: props.onMouseUp,
+				event: e
+			}));
+		};
+		const myOnTouchStart = (e) => {
+			dispatch(externalEventAction({
+				handler: props.onTouchStart,
+				event: e
+			}));
+		};
+		const myOnTouchMove = (e) => {
+			dispatch(touchEventAction(e));
+			dispatch(externalEventAction({
+				handler: props.onTouchMove,
+				event: e
+			}));
+		};
+		const myOnTouchEnd = (e) => {
+			dispatch(externalEventAction({
+				handler: props.onTouchEnd,
+				event: e
+			}));
+		};
+		return () => createVNode("div", {
+			"class": ["v-charts-wrapper", props.class],
+			"style": {
+				position: "relative",
+				cursor: "default",
+				width: `${props.width}px`,
+				height: `${props.height}px`,
+				...props.style
+			},
+			"role": "application",
+			"onClick": myOnClick,
+			"onContextmenu": myOnContextMenu,
+			"onDblclick": myOnDoubleClick,
+			"onFocus": onFocus,
+			"onKeydown": onKeyDown,
+			"onMousedown": myOnMouseDown,
+			"onMouseenter": myOnMouseEnter,
+			"onMouseleave": myOnMouseLeave,
+			"onMousemove": myOnMouseMove,
+			"onMouseup": myOnMouseUp,
+			"onTouchend": myOnTouchEnd,
+			"onTouchmove": myOnTouchMove,
+			"onTouchstart": myOnTouchStart,
+			"ref": innerRef
+		}, [slots.default?.()]);
+	}
+});
+//#endregion
+export { RechartsWrapper };

package/dist/es/chart/ScatterChart.mjs

@@ -0,0 +1,10 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+var ScatterChart = generateCategoricalChart({
+	chartName: "ScatterChart",
+	defaultTooltipEventType: "item",
+	tooltipPayloadSearcher: arrayTooltipSearcher,
+	validateTooltipEventTypes: ["axis", "item"]
+});
+//#endregion
+export { ScatterChart };

package/dist/es/chart/Surface.mjs

@@ -0,0 +1,5 @@
+import Surface_vue_vue_type_script_setup_true_lang_default from "./Surface.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/chart/Surface.vue
+var Surface_default = Surface_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Surface_default as default };

package/dist/es/chart/Surface.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,72 @@
+import { provideLabelLayerRef } from "../context/labelLayerContext.mjs";
+import { provideGraphicalLayerRef } from "../context/graphicalLayerContext.mjs";
+import { provideCursorLayerRef } from "../context/cursorLayerContext.mjs";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString } from "vue";
+//#region src/chart/Surface.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"width",
+	"height",
+	"viewBox"
+];
+var Surface_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ChartsSurface",
+	inheritAttrs: false,
+	__name: "Surface",
+	props: {
+		width: {},
+		height: {},
+		viewBox: {},
+		class: {},
+		style: {},
+		title: {},
+		desc: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const svgViewBox = computed(() => {
+			const svgView = props.viewBox || {
+				width: props.width,
+				height: props.height,
+				x: 0,
+				y: 0
+			};
+			return `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`;
+		});
+		const cursorLayerRef = ref(null);
+		provideCursorLayerRef(cursorLayerRef);
+		const graphicalLayerRef = ref(null);
+		provideGraphicalLayerRef(graphicalLayerRef);
+		const labelLayerRef = ref(null);
+		provideLabelLayerRef(labelLayerRef);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
+				class: ["vcharts-surface", [props.class]],
+				width: _ctx.width,
+				height: _ctx.height,
+				style: _ctx.style,
+				viewBox: svgViewBox.value
+			}), [
+				createElementVNode("title", null, toDisplayString(_ctx.title), 1),
+				createElementVNode("desc", null, toDisplayString(_ctx.desc), 1),
+				renderSlot(_ctx.$slots, "default"),
+				createElementVNode("g", {
+					ref_key: "cursorLayerRef",
+					ref: cursorLayerRef,
+					class: "v-charts-cursor-layer"
+				}, null, 512),
+				createElementVNode("g", {
+					ref_key: "graphicalLayerRef",
+					ref: graphicalLayerRef,
+					class: "v-charts-graphical-layer"
+				}, null, 512),
+				createElementVNode("g", {
+					ref_key: "labelLayerRef",
+					ref: labelLayerRef,
+					class: "v-charts-label-layer"
+				}, null, 512)
+			], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Surface_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/chart/TooltipPortalContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/chart/TooltipPortalContext.ts
+var [usePortal, providePortalRaw] = createContext("PortalContext");
+//#endregion
+export { providePortalRaw, usePortal };

package/dist/es/chart/const.mjs

@@ -0,0 +1,7 @@
+//#region src/chart/const.ts
+var FULL_WIDTH_AND_HEIGHT = {
+	width: "100%",
+	height: "100%"
+};
+//#endregion
+export { FULL_WIDTH_AND_HEIGHT };

package/dist/es/chart/generateCategoricalChart.mjs

@@ -0,0 +1,175 @@
+import { validateWidthHeight } from "../utils/validate.mjs";
+import { provideClipPathId } from "./provideClipPathId.mjs";
+import { createRechartsStore } from "../state/store.mjs";
+import Surface_default from "./Surface.mjs";
+import { ChartDataContextProvider } from "../context/ChartDataContextProvider.mjs";
+import ClipPath_default from "../container/ClipPath.mjs";
+import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { FULL_WIDTH_AND_HEIGHT } from "./const.mjs";
+import { ReportMainChartProps } from "../state/ReportMainChartProps.mjs";
+import ReportChartProps_default from "../state/ReportChartProps.mjs";
+import { applyDefaultProps } from "../utils/props.mjs";
+import { ReportPolarOptions } from "../state/ReportPolarOptions.mjs";
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { provideStore } from "@reduxjs/vue-redux";
+//#region src/chart/generateCategoricalChart.tsx
+var defaultLayout = "horizontal";
+var defaultMargin = {
+	top: 5,
+	right: 5,
+	bottom: 5,
+	left: 5
+};
+var CategoricalProps = {
+	accessibilityLayer: {
+		type: Boolean,
+		default: true
+	},
+	barCategoryGap: {
+		type: [Number, String],
+		default: "10%"
+	},
+	barGap: {
+		type: [Number, String],
+		default: 4
+	},
+	barSize: { type: [Number, String] },
+	class: { type: String },
+	compact: { type: Boolean },
+	cx: { type: [Number, String] },
+	cy: { type: [Number, String] },
+	data: {
+		type: Array,
+		default: () => []
+	},
+	dataKey: { type: [
+		String,
+		Number,
+		Function
+	] },
+	desc: { type: String },
+	endAngle: { type: Number },
+	height: { type: Number },
+	id: { type: String },
+	innerRadius: { type: [Number, String] },
+	layout: {
+		type: String,
+		default: defaultLayout
+	},
+	margin: {
+		type: Object,
+		default: () => defaultMargin
+	},
+	maxBarSize: { type: Number },
+	outerRadius: { type: [Number, String] },
+	reverseStackOrder: {
+		type: Boolean,
+		default: false
+	},
+	role: { type: String },
+	stackOffset: {
+		type: String,
+		default: "none"
+	},
+	startAngle: { type: Number },
+	style: { type: Object },
+	syncId: { type: [Number, String] },
+	syncMethod: {
+		type: [String, Function],
+		default: "index"
+	},
+	tabIndex: { type: Number },
+	throttleDelay: { type: Number },
+	title: { type: String },
+	width: { type: Number },
+	to: { type: [String, Object] }
+};
+function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltipEventType = "axis", validateTooltipEventTypes = ["axis"], tooltipPayloadSearcher }) {
+	return /* @__PURE__ */ defineComponent({
+		name: chartName,
+		props: applyDefaultProps(CategoricalProps, defaultProps),
+		setup(props, { attrs, slots }) {
+			provideStore({ store: createRechartsStore({ options: {
+				chartName,
+				defaultTooltipEventType,
+				validateTooltipEventTypes,
+				tooltipPayloadSearcher,
+				eventEmitter: void 0
+			} }, props.id ?? chartName) });
+			const clipPathId = provideClipPathId(props);
+			return () => {
+				const { compact, width, height, title, desc, ...rest } = props;
+				const attributes = { ...attrs };
+				if (!validateWidthHeight({
+					width,
+					height
+				})) return null;
+				const layout = props.layout ?? defaultProps.layout ?? defaultLayout;
+				const isPolarChart = layout === "centric" || layout === "radial";
+				if (compact) return createVNode(Fragment, null, [
+					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					createVNode(ReportMainChartProps, {
+						"width": width,
+						"height": height,
+						"layout": layout,
+						"margin": props.margin ?? defaultMargin
+					}, null),
+					isPolarChart && createVNode(ReportPolarOptions, {
+						"cx": props.cx ?? "50%",
+						"cy": props.cy ?? "50%",
+						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+						"innerRadius": props.innerRadius ?? 0,
+						"outerRadius": props.outerRadius ?? "80%"
+					}, null),
+					createVNode(Surface_default, mergeProps(attrs, rest, {
+						"width": width,
+						"height": height,
+						"title": title,
+						"desc": desc
+					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
+				]);
+				if (props.accessibilityLayer) {
+					attributes.tabIndex = props.tabIndex ?? 0;
+					attributes.role = props.role ?? "application";
+				}
+				const eventHandlerAttrs = {};
+				const svgAttributes = {};
+				for (const [key, value] of Object.entries(attributes)) if (key.startsWith("on") && typeof value === "function") eventHandlerAttrs[key] = value;
+				else svgAttributes[key] = value;
+				return createVNode(Fragment, null, [
+					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					createVNode(ReportMainChartProps, {
+						"width": width,
+						"height": height,
+						"layout": layout,
+						"margin": props.margin ?? defaultMargin
+					}, null),
+					isPolarChart && createVNode(ReportPolarOptions, {
+						"cx": props.cx ?? "50%",
+						"cy": props.cy ?? "50%",
+						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+						"innerRadius": props.innerRadius ?? 0,
+						"outerRadius": props.outerRadius ?? "80%"
+					}, null),
+					createVNode(RechartsWrapper, mergeProps({
+						"style": props.style,
+						"class": props.class,
+						"width": width,
+						"height": height
+					}, eventHandlerAttrs), { default: () => [createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": width,
+						"height": height,
+						"title": title,
+						"desc": desc,
+						"style": FULL_WIDTH_AND_HEIGHT
+					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] }), slots.tooltip?.()] }),
+					createVNode(ReportChartProps_default, props, null)
+				]);
+			};
+		}
+	});
+}
+//#endregion
+export { generateCategoricalChart };

package/dist/es/chart/provideClipPathId.mjs

@@ -0,0 +1,15 @@
+import { uniqueId } from "../utils/data-utils.mjs";
+import { createContext } from "../utils/createContext.mjs";
+//#region src/chart/provideClipPathId.ts
+var [useClipPathId, provideClipPathIdRaw] = createContext("clipPathId");
+/**
+* Provide the clipPathId to child components.
+* @param props - The props object from the chart component
+*/
+function provideClipPathId(props) {
+	const clipPathId = `${props.id ?? uniqueId("v-charts")}-clip`;
+	provideClipPathIdRaw(clipPathId);
+	return clipPathId;
+}
+//#endregion
+export { provideClipPathId, useClipPathId };

package/dist/es/components/Cell.mjs

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+//#region src/components/Cell.tsx
+/**
+* Cell is a marker component used to define per-item colors and styles.
+* It renders nothing — parent components (Bar, Pie, etc.) read Cell
+* children from the default slot and apply their props by index.
+*
+* Usage:
+* ```vue
+* <Bar data-key="value">
+*   <Cell v-for="(entry, index) in data" :key="index" :fill="COLORS[index]" />
+* </Bar>
+* ```
+*/
+var Cell = /* @__PURE__ */ defineComponent({
+	name: "Cell",
+	inheritAttrs: false,
+	setup() {
+		return () => null;
+	}
+});
+//#endregion
+export { Cell };

package/dist/es/components/Text.mjs

@@ -0,0 +1,5 @@
+import Text_vue_vue_type_script_setup_true_lang_default from "./Text.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/Text.vue
+var Text_default = Text_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Text_default as default };