vccs 0.0.1 → 0.1.0

package/dist/components/types.d.ts

@@ -0,0 +1,9 @@
+import { Coordinate } from '../types';
+export type RadialCursorPoints = {
+    points: [startPoint: Coordinate, endPoint: Coordinate];
+    cx?: number;
+    cy?: number;
+    radius?: number;
+    startAngle?: number;
+    endAngle?: number;
+};

package/dist/components/utils.d.ts

@@ -0,0 +1,4 @@
+import { RadialCursorPoints } from './types';
+import { ChartCoordinate, Coordinate, LayoutType } from '../types';
+import { ChartOffsetInternal } from '../utils/types';
+export declare function getCursorPoints(layout: LayoutType, activeCoordinate: ChartCoordinate, offset: ChartOffsetInternal): [Coordinate, Coordinate] | RadialCursorPoints;

package/dist/container/ClipPath.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    clipPathId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    clipPathId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/container/Layer.d.ts

@@ -0,0 +1,2 @@
+import { SVGAttributes } from 'vue';
+export declare const Layer: import('vue').DefineComponent<SVGAttributes, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SVGAttributes> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/container/ResponsiveContainer.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties, VNode } from 'vue';
+export interface ResponsiveContainerProps {
+    aspect?: number;
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+    maxHeight?: number;
+    debounce?: number;
+    id?: string | number;
+    class?: string | number;
+    style?: Omit<CSSProperties, keyof ResponsiveContainerProps>;
+    onResize?: (width: number, height: number) => void;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default: () => VNode[];
+    }> & {
+        default: () => VNode[];
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ResponsiveContainerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResponsiveContainerProps> & Readonly<{}>, {
+    width: string | number;
+    height: string | number;
+    minWidth: string | number;
+    initialDimension: {
+        width: number;
+        height: number;
+    };
+    debounce: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    containerRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/container/RootSurface.d.ts

@@ -0,0 +1,17 @@
+export declare const RootSurface: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    title: StringConstructor;
+    desc: StringConstructor;
+    otherAttributes: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: StringConstructor;
+    desc: StringConstructor;
+    otherAttributes: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    otherAttributes: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/container/Surface.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, SVGAttributes } from 'vue';
+interface ViewBox {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBox"> & {
+    width: number;
+    height: number;
+    viewBox?: ViewBox;
+    class?: string;
+    style?: CSSProperties;
+    title?: string;
+    desc?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Omit<SVGAttributes, "viewBox"> & {
+    width: number;
+    height: number;
+    viewBox?: ViewBox;
+    class?: string;
+    style?: CSSProperties;
+    title?: string;
+    desc?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default Surface;

package/dist/container/index.d.ts

@@ -0,0 +1 @@
+export { default as ResponsiveContainer, type ResponsiveContainerProps } from './ResponsiveContainer';

package/dist/container/useSizeContext.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export interface SizeContextValue {
+    sizes: Ref<{
+        width: number;
+        height: number;
+    }>;
+    calculatedWidth: Ref<number>;
+    calculatedHeight: Ref<number>;
+}
+declare const useSizeContext: <T extends SizeContextValue = SizeContextValue>(fallback?: T) => T extends null ? SizeContextValue : SizeContextValue, provideSizeContext: (contextValue: SizeContextValue) => SizeContextValue;
+export { provideSizeContext, useSizeContext };

package/dist/context/ChartDataContextProvider.d.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { ChartData } from '../state/chartDataSlice';
+/**
+ * ChartDataContextProvider for Vue
+ * Sets chartData in store on mount/update, clears on unmount. Renders nothing.
+ */
+export declare const ChartDataContextProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    chartData: {
+        type: PropType<ChartData>;
+        required: true;
+    };
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    chartData: {
+        type: PropType<ChartData>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/context/PanoramaContextProvider.d.ts

@@ -0,0 +1,22 @@
+/**
+ * useIsPanorama composable
+ * Returns the injected isPanorama value (default: false)
+ */
+export declare function useIsPanorama(): boolean;
+/**
+ * PanoramaContextProvider for Vue
+ * Provides isPanorama to descendants via provide/inject. Renders slot.
+ */
+export declare const PanoramaContextProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isPanorama: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isPanorama: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/context/accessibilityContext.d.ts

@@ -0,0 +1 @@
+export declare const useAccessibilityLayer: () => Readonly<import('vue').ShallowRef<boolean>>;

package/dist/context/cartesianLabelListContext.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { Data } from '../components/label/types';
+export declare const useCartesianLabelListData: <T extends Ref<readonly Data[], readonly Data[]> = Ref<readonly Data[], readonly Data[]>>(fallback?: T) => T extends null ? Ref<readonly Data[], readonly Data[]> : Ref<readonly Data[], readonly Data[]>, provideCartesianLabelListData: (contextValue: Ref<readonly Data[], readonly Data[]>) => Ref<readonly Data[], readonly Data[]>;

package/dist/context/chartLayoutContext.d.ts

@@ -0,0 +1,8 @@
+import { Margin } from '../types';
+export declare function useOffset(): Readonly<import('vue').ShallowRef<Required<import('../types').ChartOffset>>>;
+export declare const useChartLayout: () => Readonly<import('vue').ShallowRef<import('../types').LayoutType>>;
+export declare function useViewBox(): import('vue').ComputedRef<Required<import('../cartesian/type').CartesianViewBox>>;
+export declare function useChartWidth(): Readonly<import('vue').ShallowRef<number>>;
+export declare function useChartHeight(): Readonly<import('vue').ShallowRef<number>>;
+export declare function useOffsetInternal(): Readonly<import('vue').ShallowRef<import('../utils/types').ChartOffsetInternal>>;
+export declare function useMargin(): Readonly<import('vue').ShallowRef<Margin>>;

package/dist/context/cursorLayerContext.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useCursorLayerRef: <T extends Ref<SVGGElement, SVGGElement> = Ref<SVGGElement, SVGGElement>>(fallback?: T) => T extends null ? Ref<SVGGElement, SVGGElement> : Ref<SVGGElement, SVGGElement>, provideCursorLayerRef: (contextValue: Ref<SVGGElement, SVGGElement>) => Ref<SVGGElement, SVGGElement>;

package/dist/context/graphicalLayerContext.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useGraphicalLayerRef: <T extends Ref<SVGGElement, SVGGElement> = Ref<SVGGElement, SVGGElement>>(fallback?: T) => T extends null ? Ref<SVGGElement, SVGGElement> : Ref<SVGGElement, SVGGElement>, provideGraphicalLayerRef: (contextValue: Ref<SVGGElement, SVGGElement>) => Ref<SVGGElement, SVGGElement>;

package/dist/context/labelLayerContext.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useLabelLayerRef: <T extends Ref<SVGGElement, SVGGElement> = Ref<SVGGElement, SVGGElement>>(fallback?: T) => T extends null ? Ref<SVGGElement, SVGGElement> : Ref<SVGGElement, SVGGElement>, provideLabelLayerRef: (contextValue: Ref<SVGGElement, SVGGElement>) => Ref<SVGGElement, SVGGElement>;

package/dist/context/polarLabelViewBoxContext.d.ts

@@ -0,0 +1,4 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { PolarViewBox } from '../cartesian/type';
+export declare const POLAR_LABEL_VIEW_BOX_KEY: InjectionKey<ComputedRef<PolarViewBox | undefined>>;
+export declare function usePolarLabelViewBox(): ComputedRef<PolarViewBox | undefined>;

package/dist/context/useTooltipAxis.d.ts

@@ -0,0 +1,2 @@
+export declare const useTooltipAxis: () => Readonly<import('vue').ShallowRef<import('../state/selectors/axisSelectors').AxisWithTicksSettings>>;
+export declare function useTooltipAxisBandSize(): import('vue').ComputedRef<number>;

package/dist/es/animation/Animate.mjs

@@ -0,0 +1,63 @@
+import { defineComponent as e, onUnmounted as t, ref as n, watch as r } from "vue";
+import { animate as i } from "motion-v";
+import { usePreferredReducedMotion as a } from "@vueuse/core";
+//#region src/animation/Animate.tsx
+var o = {
+	duration: .4,
+	ease: "easeOut"
+}, s = /* @__PURE__ */ e({
+	name: "Animate",
+	props: {
+		isActive: {
+			type: Boolean,
+			default: !0
+		},
+		transition: {
+			type: Object,
+			default: void 0
+		},
+		onAnimationStart: {
+			type: Function,
+			default: void 0
+		},
+		onAnimationEnd: {
+			type: Function,
+			default: void 0
+		},
+		onUpdate: {
+			type: Function,
+			default: void 0
+		},
+		from: {
+			type: Number,
+			default: 0
+		},
+		to: {
+			type: Number,
+			default: 1
+		}
+	},
+	setup(e, { slots: s }) {
+		let c = null, l = n(0), u = a(), d = () => {
+			c && c.stop(), e.onAnimationStart && e.onAnimationStart(), c = i(e.from, e.to, {
+				...o,
+				...e.transition,
+				onUpdate: (t) => {
+					l.value = t, e.onUpdate && e.onUpdate(t);
+				},
+				onComplete: () => {
+					l.value = 1, e.onAnimationEnd && e.onAnimationEnd();
+				}
+			});
+		}, f = () => {
+			c &&= (c.stop(), null);
+		};
+		return r([() => e.isActive, u], ([t, n]) => {
+			t ? n === "reduce" ? (f(), e.onAnimationStart && e.onAnimationStart(), l.value = e.to, e.onAnimationEnd && e.onAnimationEnd()) : d() : (f(), l.value = e.to);
+		}, { immediate: !0 }), t(() => {
+			f();
+		}), () => s.default ? s.default(l.value) : null;
+	}
+});
+//#endregion
+export { s as Animate };

package/dist/es/cartesian/GraphicalItemClipPath.mjs

@@ -0,0 +1,36 @@
+import { useOffset as e } from "../context/chartLayoutContext.mjs";
+import { useNeedsClip as t } from "./useNeedsClip.mjs";
+import { createVNode as n, defineComponent as r } from "vue";
+//#region src/cartesian/GraphicalItemClipPath.tsx
+var i = /* @__PURE__ */ r({
+	name: "GraphicalItemClipPath",
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		clipPathId: {
+			type: String,
+			required: !0
+		}
+	},
+	setup(r) {
+		let i = e(), { needClipX: a, needClipY: o, needClip: s } = t(r.xAxisId, r.yAxisId);
+		return () => {
+			if (!s) return null;
+			let { left: e, top: t, width: c, height: l } = i.value;
+			return n("clipPath", { id: `clipPath-${r.clipPathId}` }, [n("rect", {
+				x: a ? e : e - c / 2,
+				y: o ? t : t - l / 2,
+				width: a ? c : c * 2,
+				height: o ? l : l * 2
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { i as GraphicalItemClipPath };

package/dist/es/cartesian/area/ActivePoints.mjs

@@ -0,0 +1,74 @@
+import { isNullish as e } from "../../utils/validate.mjs";
+import { selectActiveTooltipIndex as t } from "../../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector as n } from "../../state/hooks.mjs";
+import { Layer as r } from "../../container/Layer.mjs";
+import { Dot as i } from "../../shape/Dot.mjs";
+import { createVNode as a, defineComponent as o, isVNode as s } from "vue";
+//#region src/cartesian/area/ActivePoints.tsx
+function c(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !s(e);
+}
+var l = /* @__PURE__ */ o({
+	name: "ActivePoints",
+	props: {
+		points: {
+			type: Array,
+			required: !0
+		},
+		mainColor: {
+			type: String,
+			required: !0
+		},
+		itemDataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: !0
+		},
+		activeDot: {
+			type: [
+				Object,
+				Boolean,
+				Function
+			],
+			required: !0
+		}
+	},
+	slots: Object,
+	setup(r, { slots: i }) {
+		let a = n(t);
+		return () => {
+			let { points: t } = r;
+			if (!t?.length || e(a.value)) return null;
+			let n = t[Number(a.value)];
+			return e(n) ? null : u({
+				point: n,
+				childIndex: Number(a.value),
+				mainColor: r.mainColor,
+				dataKey: r.itemDataKey,
+				activeDot: r.activeDot,
+				slots: i
+			});
+		};
+	}
+});
+function u({ point: e, childIndex: t, mainColor: n, activeDot: o, dataKey: s, slots: l }) {
+	if (o === !1) return null;
+	let u = {
+		index: t,
+		dataKey: s,
+		cx: e.x,
+		cy: e.y,
+		r: 4,
+		fill: n,
+		"stroke-width": 2,
+		stroke: "#fff",
+		payload: e.payload,
+		value: e.value
+	}, d;
+	return d = l.activeDot ? l.activeDot(u) : a(i, u, null), a(r, { class: "v-charts-active-dot" }, c(d) ? d : { default: () => [d] });
+}
+//#endregion
+export { l as ActivePoints };

package/dist/es/cartesian/area/Area.mjs

@@ -0,0 +1,41 @@
+import { AreaVueProps as e } from "./type.mjs";
+import { useArea as t } from "./hooks/useArea.mjs";
+import { Layer as n } from "../../container/Layer.mjs";
+import { StaticArea as r } from "./RenderArea.mjs";
+import { ClipRect as i } from "./ClipRect.mjs";
+import { ActivePoints as a } from "./ActivePoints.mjs";
+import { useSetupGraphicalItem as o } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef as s } from "../../context/graphicalLayerContext.mjs";
+import { Fragment as c, Teleport as l, createVNode as u, defineComponent as d, isVNode as f } from "vue";
+//#region src/cartesian/area/Area.tsx
+function p(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
+}
+var m = /* @__PURE__ */ d({
+	name: "Area",
+	props: e,
+	inheritAttrs: !1,
+	slots: Object,
+	setup(e, { attrs: d, slots: f }) {
+		o(e, "area");
+		let { shouldRender: m, areaData: g, points: _, clipPathId: v, shouldShowAnimation: y } = t(e, d, f.dot), b = s(null);
+		return () => {
+			let t;
+			if (!m.value) return null;
+			let o;
+			f.activeDot && (o = { activeDot: f.activeDot });
+			let s = u(c, null, [u(n, { class: ["v-charts-area", d.class] }, p(t = y.value ? u(n, { key: "area-with-animation" }, { default: () => [u("defs", null, [u("clipPath", { id: `animationClipPath-${v.value}` }, [u(i, null, null)])]), u(n, { "clip-path": `url(#animationClipPath-${v.value})` }, { default: () => [u(r, null, null)] })] }) : u(r, { key: "static-area" }, null)) ? t : { default: () => [t] }), u(a, {
+				points: g.value?.points ?? [],
+				mainColor: h(d.stroke, e.fill),
+				itemDataKey: e.dataKey,
+				activeDot: e.activeDot
+			}, p(o) ? o : { default: () => [o] })]);
+			return b?.value ? u(l, { to: b.value }, p(s) ? s : { default: () => [s] }) : s;
+		};
+	}
+});
+function h(e, t) {
+	return e && e !== "none" ? e : t;
+}
+//#endregion
+export { m as Area };

package/dist/es/cartesian/area/ClipRect.mjs

@@ -0,0 +1,104 @@
+import { isNumber as e, isWellBehavedNumber as t } from "../../utils/validate.mjs";
+import { useAreaContext as n } from "./hooks/useArea.mjs";
+import { Animate as r } from "../../animation/Animate.mjs";
+import { createVNode as i, defineComponent as a, ref as o, watch as s } from "vue";
+//#region src/cartesian/area/ClipRect.tsx
+var c = /* @__PURE__ */ a({
+	name: "HorizontalRect",
+	props: {
+		alpha: {
+			type: Number,
+			required: !0
+		},
+		points: {
+			type: Array,
+			required: !0
+		},
+		baseLine: {
+			type: [Number, Array],
+			required: !0
+		},
+		strokeWidth: {
+			type: Number,
+			required: !0
+		}
+	},
+	setup(t) {
+		let { points: n } = t;
+		return () => {
+			let { alpha: r, baseLine: a, strokeWidth: o } = t, s = n[0].x, c = n[n.length - 1].x, l = r * Math.abs(s - c), u = Math.max(...n.map((e) => e.y || 0));
+			return e(a) ? u = Math.max(a, u) : a && Array.isArray(a) && a.length && (u = Math.max(...a.map((e) => e.y || 0), u)), e(u) ? i("rect", {
+				x: s < c ? s : s - l,
+				y: 0,
+				width: l,
+				height: Math.floor(u + (o ? parseInt(`${o}`, 10) : 1))
+			}, null) : null;
+		};
+	}
+}), l = /* @__PURE__ */ a({
+	name: "VerticalRect",
+	props: {
+		alpha: {
+			type: Number,
+			required: !0
+		},
+		points: {
+			type: Array,
+			required: !0
+		},
+		baseLine: {
+			type: [Number, Array],
+			required: !0
+		},
+		strokeWidth: {
+			type: Number,
+			required: !0
+		}
+	},
+	setup(n) {
+		let { points: r } = n;
+		return () => {
+			let { alpha: a, baseLine: o, strokeWidth: s } = n, c = r[0].y, l = r[r.length - 1].y;
+			if (!t(c) || !t(l)) return null;
+			let u = a * Math.abs(c - l), d = Math.max(...r.map((e) => e.x || 0));
+			return e(o) ? d = Math.max(o, d) : o && Array.isArray(o) && o.length && (d = Math.max(...o.map((e) => e.x || 0), d)), i("rect", {
+				x: 0,
+				y: c < l ? c : c - u,
+				width: d + (s ? parseInt(`${s}`, 10) : 1),
+				height: Math.floor(u)
+			}, null);
+		};
+	}
+}), u = /* @__PURE__ */ a({
+	name: "ClipRect",
+	setup() {
+		let { points: e, props: t, areaData: a, layout: u, isClipRectAnimating: d } = n(), f = o(!1);
+		s(e, (e) => {
+			e && e.length > 0 && !f.value && (f.value = !0);
+		}, { immediate: !0 });
+		let p = () => {
+			f.value = !1, d.value = !1, t.onAnimationEnd?.();
+		};
+		return () => {
+			let n = a.value?.baseLine;
+			return !e.value || e.value.length === 0 ? null : i(r, {
+				isActive: f.value,
+				transition: t.transition,
+				onAnimationStart: t.onAnimationStart,
+				onAnimationEnd: p
+			}, { default: (r) => u.value === "horizontal" ? i(c, {
+				alpha: r,
+				points: e.value,
+				baseLine: n,
+				strokeWidth: t.strokeWidth || 2
+			}, null) : i(l, {
+				alpha: r,
+				points: e.value,
+				baseLine: n,
+				strokeWidth: t.strokeWidth || 2
+			}, null) });
+		};
+	}
+});
+//#endregion
+export { u as ClipRect };