vccs 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/README.md +151 -0
  2. package/dist/animation/Animate.d.ts +1 -1
  3. package/dist/cartesian/area/type.d.ts +3 -3
  4. package/dist/cartesian/axis/XAxis.d.ts +3 -3
  5. package/dist/cartesian/bar/type.d.ts +1 -13
  6. package/dist/cartesian/brush/components/Slide.d.ts +1 -1
  7. package/dist/cartesian/brush/components/TravellerLayer.d.ts +1 -1
  8. package/dist/cartesian/brush/type.d.ts +2 -1
  9. package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts +7 -6
  10. package/dist/cartesian/funnel/type.d.ts +4 -5
  11. package/dist/cartesian/index.d.ts +1 -0
  12. package/dist/cartesian/line/Line.d.ts +7 -13
  13. package/dist/cartesian/line/type.d.ts +4 -17
  14. package/dist/cartesian/reference-area/ReferenceArea.d.ts +16 -16
  15. package/dist/cartesian/reference-dot/ReferenceDot.d.ts +143 -0
  16. package/dist/cartesian/reference-dot/index.d.ts +2 -0
  17. package/dist/cartesian/reference-line/ReferenceLine.d.ts +8 -8
  18. package/dist/cartesian/scatter/Scatter.d.ts +1 -1
  19. package/dist/chart/RechartsWrapper.d.ts +7 -3
  20. package/dist/chart/Surface.d.ts +2 -1
  21. package/dist/chart/Treemap.d.ts +237 -0
  22. package/dist/chart/generateCategoricalChart.d.ts +2 -1
  23. package/dist/chart/index.d.ts +1 -0
  24. package/dist/chart/treemapUtils.d.ts +22 -0
  25. package/dist/components/Customized.d.ts +23 -0
  26. package/dist/components/Text.d.ts +20 -5
  27. package/dist/components/Tooltip.d.ts +47 -3
  28. package/dist/components/index.d.ts +2 -0
  29. package/dist/components/label/Label.d.ts +3 -3
  30. package/dist/components/label/types.d.ts +1 -1
  31. package/dist/container/Surface.d.ts +3 -2
  32. package/dist/es/cartesian/area/type.mjs +2 -4
  33. package/dist/es/cartesian/axis/XAxis.mjs +2 -2
  34. package/dist/es/cartesian/axis/YAxis.mjs +1 -1
  35. package/dist/es/cartesian/bar/Bar.mjs +2 -17
  36. package/dist/es/cartesian/bar/type.mjs +2 -16
  37. package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs +2 -3
  38. package/dist/es/cartesian/cartesian-grid/const.mjs +7 -1
  39. package/dist/es/cartesian/funnel/Funnel.mjs +3 -18
  40. package/dist/es/cartesian/funnel/type.mjs +3 -5
  41. package/dist/es/cartesian/line/type.mjs +2 -7
  42. package/dist/es/cartesian/reference-area/ReferenceArea.mjs +6 -22
  43. package/dist/es/cartesian/reference-dot/ReferenceDot.mjs +134 -0
  44. package/dist/es/cartesian/reference-line/ReferenceLine.mjs +6 -19
  45. package/dist/es/chart/RechartsWrapper.mjs +2 -1
  46. package/dist/es/chart/Treemap.mjs +379 -0
  47. package/dist/es/chart/generateCategoricalChart.mjs +3 -2
  48. package/dist/es/chart/treemapUtils.mjs +32 -0
  49. package/dist/es/components/Customized.mjs +43 -0
  50. package/dist/es/components/Text.vue_vue_type_script_setup_true_lang.mjs +3 -3
  51. package/dist/es/components/Tooltip.mjs +14 -7
  52. package/dist/es/components/label/types.mjs +2 -1
  53. package/dist/es/components/legend/Legend.mjs +1 -1
  54. package/dist/es/components/legend/hooks/useLegend.mjs +8 -3
  55. package/dist/es/container/Surface.mjs +2 -4
  56. package/dist/es/hooks/publicHooks.mjs +207 -0
  57. package/dist/es/index.mjs +9 -1
  58. package/dist/es/polar/pie/Pie.mjs +1 -1
  59. package/dist/es/polar/pie/type.mjs +2 -4
  60. package/dist/es/shape/Curve.mjs +2 -1
  61. package/dist/es/shape/Polygon.mjs +19 -0
  62. package/dist/es/shape/Rectangle.mjs +0 -4
  63. package/dist/es/shape/Sector.mjs +4 -6
  64. package/dist/es/shape/Symbols.mjs +1 -1
  65. package/dist/es/shape/Trapezoid.mjs +5 -7
  66. package/dist/es/state/ReportChartProps.mjs +2 -4
  67. package/dist/es/state/hooks.mjs +21 -1
  68. package/dist/es/state/referenceElementsSlice.mjs +1 -1
  69. package/dist/es/state/selectors/axisSelectors.mjs +30 -1
  70. package/dist/es/state/selectors/tooltipSelectors.mjs +2 -2
  71. package/dist/es/types/common.mjs +12 -0
  72. package/dist/es/utils/VueUtils.mjs +1 -1
  73. package/dist/es/utils/cell.mjs +28 -0
  74. package/dist/es/utils/createCategoricalInverse.mjs +46 -0
  75. package/dist/es/utils/scale.mjs +46 -0
  76. package/dist/hooks/publicHooks.d.ts +143 -0
  77. package/dist/index.d.ts +1 -0
  78. package/dist/polar/pie/type.d.ts +2 -2
  79. package/dist/polar/radar/Radar.d.ts +4 -4
  80. package/dist/shape/Curve.d.ts +2 -1
  81. package/dist/shape/Polygon.d.ts +9 -0
  82. package/dist/shape/Rectangle.d.ts +0 -4
  83. package/dist/shape/Sector.d.ts +2 -2
  84. package/dist/shape/Symbols.d.ts +2 -1
  85. package/dist/shape/Trapezoid.d.ts +9 -10
  86. package/dist/shape/index.d.ts +1 -0
  87. package/dist/shape/types.d.ts +4 -5
  88. package/dist/state/ReportChartProps.d.ts +3 -3
  89. package/dist/state/rootPropsSlice.d.ts +2 -2
  90. package/dist/state/selectors/axisSelectors.d.ts +5 -0
  91. package/dist/types/axis.d.ts +2 -2
  92. package/dist/types/bar.d.ts +2 -6
  93. package/dist/types/categorical.d.ts +2 -2
  94. package/dist/types/common.d.ts +7 -1
  95. package/dist/types/tooltip.d.ts +2 -2
  96. package/dist/utils/cell.d.ts +11 -0
  97. package/dist/utils/createCategoricalInverse.d.ts +16 -0
  98. package/dist/utils/scale.d.ts +23 -0
  99. package/package.json +2 -1
@@ -0,0 +1,46 @@
1
+ import { isWellBehavedNumber } from "./validate.mjs";
2
+ //#region src/utils/scale.ts
3
+ /**
4
+ * Convert a data value to pixel coordinate using a D3 scale.
5
+ * Automatically centers on band-scale categories by adding half the bandwidth.
6
+ */
7
+ function scaleCoord(scale, value) {
8
+ const coord = scale(value);
9
+ if (!isWellBehavedNumber(coord)) return void 0;
10
+ return coord + (scale.bandwidth?.() ?? 0) / 2;
11
+ }
12
+ /**
13
+ * Convert a data value to pixel coordinate for range boundaries.
14
+ * `start` returns the left/top edge; `end` returns the right/bottom edge (adding full bandwidth).
15
+ */
16
+ function scaleValue(scale, value, position) {
17
+ const coord = scale(value);
18
+ if (!isWellBehavedNumber(coord)) return void 0;
19
+ const bandwidth = scale.bandwidth?.() ?? 0;
20
+ return position === "start" ? coord : coord + bandwidth;
21
+ }
22
+ /**
23
+ * Check whether a pixel coordinate falls within the scale's output range.
24
+ */
25
+ function isInRange(scale, coord) {
26
+ const r = scale.range();
27
+ const min = Math.min(r[0], r[1]);
28
+ const max = Math.max(r[0], r[1]);
29
+ return coord >= min && coord <= max;
30
+ }
31
+ /**
32
+ * Get the minimum value of a scale's range.
33
+ */
34
+ function rangeMin(scale) {
35
+ const r = scale.range();
36
+ return Math.min(r[0], r[1]);
37
+ }
38
+ /**
39
+ * Get the maximum value of a scale's range.
40
+ */
41
+ function rangeMax(scale) {
42
+ const r = scale.range();
43
+ return Math.max(r[0], r[1]);
44
+ }
45
+ //#endregion
46
+ export { isInRange, rangeMax, rangeMin, scaleCoord, scaleValue };
@@ -0,0 +1,143 @@
1
+ import { ComputedRef } from 'vue';
2
+ import { useChartHeight, useChartWidth, useMargin, useOffset } from '../context/chartLayoutContext';
3
+ import { AxisId } from '../state/cartesianAxisSlice';
4
+ import { Coordinate } from '../types/common';
5
+ export type { InverseScaleFunction } from '../utils/createCategoricalInverse';
6
+ export type ScaleFunction = (value: unknown) => number | undefined;
7
+ export interface CartesianDataPoint {
8
+ x: number | string;
9
+ y: number | string;
10
+ }
11
+ export { useChartWidth, useChartHeight, useMargin, useOffset };
12
+ export { useActiveTooltipDataPoints } from '../state/hooks';
13
+ /**
14
+ * Returns whether the tooltip is currently active (visible).
15
+ *
16
+ * Must be used inside a chart component tree (where the Redux store is provided).
17
+ *
18
+ * @returns A reactive boolean indicating tooltip active state
19
+ */
20
+ export declare function useIsTooltipActive(): Readonly<import('vue').ShallowRef<boolean>>;
21
+ /**
22
+ * Returns the current coordinate of the active tooltip.
23
+ *
24
+ * Must be used inside a chart component tree (where the Redux store is provided).
25
+ *
26
+ * @returns A reactive Coordinate ({ x, y }) or undefined when no tooltip is active
27
+ */
28
+ export declare function useActiveTooltipCoordinate(): Readonly<import('vue').ShallowRef<Coordinate>>;
29
+ /**
30
+ * Returns the label of the currently active tooltip (the value from the axis dataKey at the hovered index).
31
+ *
32
+ * Must be used inside a chart component tree (where the Redux store is provided).
33
+ *
34
+ * @returns A reactive string label or undefined when no tooltip is active
35
+ */
36
+ export declare function useActiveTooltipLabel(): Readonly<import('vue').ShallowRef<string>>;
37
+ /**
38
+ * Returns the plot area rectangle { x, y, width, height }.
39
+ * This is the area inside all axes, legend, and brush — where graphical items render.
40
+ *
41
+ * Must be used inside a chart component tree (where the Redux store is provided).
42
+ *
43
+ * @returns A reactive object with x, y, width, height or undefined if offset is not yet available
44
+ */
45
+ export declare function usePlotArea(): ComputedRef<{
46
+ x: number;
47
+ y: number;
48
+ width: number;
49
+ height: number;
50
+ }>;
51
+ /**
52
+ * Returns the computed domain of an X axis.
53
+ *
54
+ * @param axisId - The axis ID (defaults to 0)
55
+ * @returns A reactive domain (categorical or numerical) or undefined
56
+ */
57
+ export declare function useXAxisDomain(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../types/axis').NumberDomain | import('../types').CategoricalDomain>>;
58
+ /**
59
+ * Returns the computed domain of a Y axis.
60
+ *
61
+ * @param axisId - The axis ID (defaults to 0)
62
+ * @returns A reactive domain (categorical or numerical) or undefined
63
+ */
64
+ export declare function useYAxisDomain(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../types/axis').NumberDomain | import('../types').CategoricalDomain>>;
65
+ /**
66
+ * Returns the computed tick items of an X axis.
67
+ *
68
+ * @param axisId - The axis ID (defaults to 0)
69
+ * @returns A reactive array of TickItem or undefined
70
+ */
71
+ export declare function useXAxisTicks(axisId?: AxisId): Readonly<import('vue').ShallowRef<readonly import('../types/common').TickItem[]>>;
72
+ /**
73
+ * Returns the computed tick items of a Y axis.
74
+ *
75
+ * @param axisId - The axis ID (defaults to 0)
76
+ * @returns A reactive array of TickItem or undefined
77
+ */
78
+ export declare function useYAxisTicks(axisId?: AxisId): Readonly<import('vue').ShallowRef<readonly import('../types/common').TickItem[]>>;
79
+ /**
80
+ * Returns the scale function for an X axis, mapping data values to pixel coordinates.
81
+ *
82
+ * @param axisId - The axis ID (defaults to 0)
83
+ * @returns A reactive ScaleFunction or undefined if the axis is not yet initialized
84
+ */
85
+ export declare function useXAxisScale(axisId?: AxisId): ComputedRef<ScaleFunction | undefined>;
86
+ /**
87
+ * Returns the scale function for a Y axis, mapping data values to pixel coordinates.
88
+ *
89
+ * @param axisId - The axis ID (defaults to 0)
90
+ * @returns A reactive ScaleFunction or undefined if the axis is not yet initialized
91
+ */
92
+ export declare function useYAxisScale(axisId?: AxisId): ComputedRef<ScaleFunction | undefined>;
93
+ /**
94
+ * Returns the inverse scale function for an X axis, mapping pixel coordinates back to data values.
95
+ *
96
+ * @param axisId - The axis ID (defaults to 0)
97
+ * @returns A reactive InverseScaleFunction or undefined
98
+ */
99
+ export declare function useXAxisInverseScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
100
+ /**
101
+ * Returns the inverse scale function for a Y axis, mapping pixel coordinates back to data values.
102
+ *
103
+ * @param axisId - The axis ID (defaults to 0)
104
+ * @returns A reactive InverseScaleFunction or undefined
105
+ */
106
+ export declare function useYAxisInverseScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
107
+ /**
108
+ * Returns the inverse scale function for an X axis that snaps to the nearest data point.
109
+ *
110
+ * @param axisId - The axis ID (defaults to 0)
111
+ * @returns A reactive InverseScaleFunction or undefined
112
+ */
113
+ export declare function useXAxisInverseDataSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
114
+ /**
115
+ * Returns the inverse scale function for a Y axis that snaps to the nearest data point.
116
+ *
117
+ * @param axisId - The axis ID (defaults to 0)
118
+ * @returns A reactive InverseScaleFunction or undefined
119
+ */
120
+ export declare function useYAxisInverseDataSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
121
+ /**
122
+ * Returns the inverse scale function for an X axis that snaps to the nearest tick.
123
+ *
124
+ * @param axisId - The axis ID (defaults to 0)
125
+ * @returns A reactive InverseScaleFunction or undefined
126
+ */
127
+ export declare function useXAxisInverseTickSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
128
+ /**
129
+ * Returns the inverse scale function for a Y axis that snaps to the nearest tick.
130
+ *
131
+ * @param axisId - The axis ID (defaults to 0)
132
+ * @returns A reactive InverseScaleFunction or undefined
133
+ */
134
+ export declare function useYAxisInverseTickSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
135
+ /**
136
+ * Convenience hook that maps a data point to pixel coordinates using both X and Y axis scales.
137
+ *
138
+ * @param dataPoint - An object with x and y data values
139
+ * @param xAxisId - The X axis ID (defaults to 0)
140
+ * @param yAxisId - The Y axis ID (defaults to 0)
141
+ * @returns A reactive Coordinate ({ x, y }) or undefined if either scale is unavailable
142
+ */
143
+ export declare function useCartesianScale(dataPoint: CartesianDataPoint, xAxisId?: AxisId, yAxisId?: AxisId): ComputedRef<Coordinate | undefined>;
package/dist/index.d.ts CHANGED
@@ -4,3 +4,4 @@ export * from './container';
4
4
  export * from './components';
5
5
  export * from './polar';
6
6
  export * from './shape';
7
+ export * from './hooks/publicHooks';
@@ -79,8 +79,8 @@ export declare const PieVueProps: {
79
79
  type: BooleanConstructor;
80
80
  default: boolean;
81
81
  };
82
- className: {
83
- type: StringConstructor;
82
+ class: {
83
+ type: PropType<import('../../types').VueClassValue>;
84
84
  default: any;
85
85
  };
86
86
  };
@@ -142,14 +142,14 @@ export declare const Radar: import('vue').DefineComponent<import('vue').ExtractP
142
142
  };
143
143
  }>> & Readonly<{}>, {
144
144
  fill: string;
145
- name: string;
145
+ fillOpacity: number;
146
146
  stroke: string;
147
- label: boolean | Record<string, any>;
148
- connectNulls: boolean;
149
147
  strokeDasharray: string;
150
148
  strokeWidth: number;
149
+ name: string;
150
+ label: boolean | Record<string, any>;
151
+ connectNulls: boolean;
151
152
  hide: boolean;
152
- fillOpacity: number;
153
153
  tooltipType: "none";
154
154
  legendType: LegendType;
155
155
  isAnimationActive: boolean;
@@ -33,7 +33,8 @@ export declare const CurveVueProps: {
33
33
  type: StringConstructor;
34
34
  };
35
35
  class: {
36
- type: (StringConstructor | ArrayConstructor)[];
36
+ type: PropType<import('../types').VueClassValue>;
37
+ default: any;
37
38
  };
38
39
  };
39
40
  export type CurvePropsWithOutSVG = VuePropsToType<typeof CurveVueProps>;
@@ -0,0 +1,9 @@
1
+ import { SVGAttributes } from 'vue';
2
+ export interface PolygonPoint {
3
+ x: number;
4
+ y: number;
5
+ }
6
+ export interface PolygonProps {
7
+ points?: PolygonPoint[];
8
+ }
9
+ export declare function Polygon(props: PolygonProps & SVGAttributes): import("vue/jsx-runtime").JSX.Element;
@@ -2,10 +2,6 @@ import { PropType } from 'vue';
2
2
  import { VuePropsToType, WithSVGProps } from '../types';
3
3
  import { RectRadius } from '../types/bar';
4
4
  declare const RectangleVueProps: {
5
- className: {
6
- type: PropType<string>;
7
- default: any;
8
- };
9
5
  x: {
10
6
  type: PropType<number>;
11
7
  default: number;
@@ -37,8 +37,8 @@ declare const SectorVueProps: {
37
37
  type: PropType<boolean>;
38
38
  default: boolean;
39
39
  };
40
- className: {
41
- type: PropType<string>;
40
+ class: {
41
+ type: PropType<import('../types').VueClassValue>;
42
42
  default: any;
43
43
  };
44
44
  };
@@ -1,7 +1,8 @@
1
+ import { VueClassValue } from '../types/common';
1
2
  export type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
2
3
  type SizeType = 'area' | 'diameter';
3
4
  export interface SymbolsProps {
4
- className?: string;
5
+ class?: VueClassValue;
5
6
  type?: SymbolType;
6
7
  cx?: number;
7
8
  cy?: number;
@@ -1,30 +1,29 @@
1
- import { PropType } from 'vue';
2
1
  import { WithSVGProps } from '../types';
3
2
  declare const TrapezoidVueProps: {
4
- className: {
5
- type: PropType<string>;
6
- default: any;
7
- };
8
3
  x: {
9
- type: PropType<number>;
4
+ type: NumberConstructor;
10
5
  default: number;
11
6
  };
12
7
  y: {
13
- type: PropType<number>;
8
+ type: NumberConstructor;
14
9
  default: number;
15
10
  };
16
11
  upperWidth: {
17
- type: PropType<number>;
12
+ type: NumberConstructor;
18
13
  default: number;
19
14
  };
20
15
  lowerWidth: {
21
- type: PropType<number>;
16
+ type: NumberConstructor;
22
17
  default: number;
23
18
  };
24
19
  height: {
25
- type: PropType<number>;
20
+ type: NumberConstructor;
26
21
  default: number;
27
22
  };
23
+ class: {
24
+ type: import('vue').PropType<import('../types').VueClassValue>;
25
+ default: any;
26
+ };
28
27
  };
29
28
  export type TrapezoidComponentProps = WithSVGProps<typeof TrapezoidVueProps>;
30
29
  export declare const Trapezoid: import('vue').DefineComponent<TrapezoidComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TrapezoidComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
@@ -3,6 +3,7 @@ export * from './Cross';
3
3
  export { Curve, CurveVueProps, getPath } from './Curve';
4
4
  export type { CurveType, CurvePropsWithOutSVG, CurveProps } from './Curve';
5
5
  export * from './Dot';
6
+ export * from './Polygon';
6
7
  export * from './Rectangle';
7
8
  export * from './Symbols';
8
9
  export * from './Sector';
@@ -1,4 +1,5 @@
1
- import { AnimationEasing } from '../types/bar';
1
+ import { AnimationOptions } from 'motion-v';
2
+ import { VueClassValue } from '../types/common';
2
3
  export interface Point {
3
4
  readonly x: number;
4
5
  readonly y: number;
@@ -6,7 +7,7 @@ export interface Point {
6
7
  export type MinPointSize = number | ((value: number, index: number) => number);
7
8
  export type NormalizedStackId = string;
8
9
  export interface TrapezoidProps {
9
- className?: string;
10
+ class?: VueClassValue;
10
11
  x?: number;
11
12
  y?: number;
12
13
  width?: number;
@@ -14,7 +15,5 @@ export interface TrapezoidProps {
14
15
  lowerWidth?: number;
15
16
  height?: number;
16
17
  isUpdateAnimationActive?: boolean;
17
- animationBegin?: number;
18
- animationDuration?: number;
19
- animationEasing?: AnimationEasing;
18
+ transition?: AnimationOptions;
20
19
  }
@@ -18,7 +18,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
18
18
  default: any;
19
19
  };
20
20
  class: {
21
- type: StringConstructor;
21
+ type: PropType<import('../types').VueClassValue>;
22
22
  default: any;
23
23
  };
24
24
  maxBarSize: {
@@ -55,7 +55,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
55
55
  default: any;
56
56
  };
57
57
  class: {
58
- type: StringConstructor;
58
+ type: PropType<import('../types').VueClassValue>;
59
59
  default: any;
60
60
  };
61
61
  maxBarSize: {
@@ -79,7 +79,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
79
79
  barCategoryGap: string | number;
80
80
  barGap: number;
81
81
  barSize: string | number;
82
- class: string;
82
+ class: import('../types').VueClassValue;
83
83
  maxBarSize: number;
84
84
  stackOffset: StackOffsetType;
85
85
  syncId: string | number;
@@ -1,4 +1,4 @@
1
- import { StackOffsetType, SyncMethod } from '../types';
1
+ import { StackOffsetType, SyncMethod, VueClassValue } from '../types';
2
2
  /**
3
3
  * These are chart options that users can choose - which means they can also
4
4
  * choose to change them which should trigger a re-render.
@@ -12,7 +12,7 @@ export type UpdatableChartOptions = {
12
12
  * Useful for debugging which chart is which when synchronising.
13
13
  * The className is also passed to the root element of the chart but that's done in the JSX, not through Redux.
14
14
  */
15
- class: string | undefined;
15
+ class: VueClassValue | undefined;
16
16
  maxBarSize: number | undefined;
17
17
  stackOffset: StackOffsetType;
18
18
  /**
@@ -10,6 +10,7 @@ import { AxisDomain, AxisType, NumberDomain } from '../../types/axis';
10
10
  import { CategoricalDomain, Coordinate, DataKey, LayoutType, Size, StackOffsetType, TickItem } from '../../types';
11
11
  import { StackId } from '../../types/tick';
12
12
  import { RechartsScale } from '../../types/scale';
13
+ import { InverseScaleFunction } from '../../utils/createCategoricalInverse';
13
14
  import { AxisPropsForCartesianGridTicksGeneration } from '../../cartesian/cartesian-grid/type';
14
15
  /**
15
16
  * angle, radius, X, Y, and Z axes all have domain and range and scale and associated settings
@@ -876,6 +877,9 @@ export declare const selectAxisScale: ((state: {
876
877
  argsMemoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
877
878
  memoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
878
879
  };
880
+ export declare const selectSortedDataPoints: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => ReadonlyArray<unknown> | undefined;
881
+ export declare const selectAxisInverseScale: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => InverseScaleFunction | undefined;
882
+ export declare const selectAxisInverseDataSnapScale: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => InverseScaleFunction | undefined;
879
883
  export declare const selectErrorBarsSettings: ((state: {
880
884
  brush: import('../brushSlice').BrushSettings;
881
885
  cartesianAxis: {
@@ -1702,6 +1706,7 @@ export declare const selectTicksOfAxis: ((state: {
1702
1706
  argsMemoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
1703
1707
  memoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
1704
1708
  };
1709
+ export declare const selectAxisInverseTickSnapScale: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => InverseScaleFunction | undefined;
1705
1710
  export declare function combineGraphicalItemTicks(layout: LayoutType, axis: AxisWithTicksSettings, scale: RechartsScale | undefined, axisRange: AxisRange | undefined, duplicateDomain: ReadonlyArray<unknown> | undefined, categoricalDomain: ReadonlyArray<unknown> | undefined, axisType: XorYType): TickItem[] | null;
1706
1711
  export declare const selectTicksOfGraphicalItem: (state: RechartsRootState, axisType: XorYType, axisId: AxisId, isPanorama: boolean) => TickItem[] | null;
1707
1712
  export type BaseAxisWithScale = BaseCartesianAxis & {
@@ -1,4 +1,4 @@
1
- import { DataKey } from './common';
1
+ import { DataKey, VueClassValue } from './common';
2
2
  import { RechartsScale, ScaleType } from './scale';
3
3
  import { TickFormatter, TicksSettings } from './tick';
4
4
  export type AxisId = string | number;
@@ -113,7 +113,7 @@ export interface XAxisProps {
113
113
  angle?: number;
114
114
  minTickGap?: number;
115
115
  label?: string | number | any;
116
- className?: string;
116
+ class?: VueClassValue;
117
117
  }
118
118
  /**
119
119
  * NumberDomain is an evaluated {@link AxisDomain}.
@@ -1,4 +1,4 @@
1
- import { Coordinate } from './common';
1
+ import { Coordinate, VueClassValue } from './common';
2
2
  import { CartesianViewBox } from '../cartesian/type';
3
3
  export type BarPositionPosition = {
4
4
  /**
@@ -16,9 +16,8 @@ export type BarPositionPosition = {
16
16
  size: number | undefined | typeof NaN;
17
17
  };
18
18
  export type RectRadius = [number, number, number, number];
19
- export type AnimationEasing = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
20
19
  interface RectangleProps {
21
- className?: string;
20
+ class?: VueClassValue;
22
21
  x?: number;
23
22
  y?: number;
24
23
  width?: number;
@@ -26,9 +25,6 @@ interface RectangleProps {
26
25
  radius?: number | RectRadius;
27
26
  isAnimationActive?: boolean;
28
27
  isUpdateAnimationActive?: boolean;
29
- animationBegin?: number;
30
- animationDuration?: number;
31
- animationEasing?: AnimationEasing;
32
28
  }
33
29
  export interface BarRectangleItem extends RectangleProps {
34
30
  value?: number | [number, number];
@@ -1,4 +1,4 @@
1
- import { DataKey, LayoutType, Margin, StackOffsetType, SyncMethod } from './common';
1
+ import { DataKey, LayoutType, Margin, StackOffsetType, SyncMethod, VueClassValue } from './common';
2
2
  import { ExternalMouseEvents } from './event';
3
3
  export interface CategoricalChartProps extends Partial<ExternalMouseEvents> {
4
4
  accessibilityLayer?: boolean;
@@ -6,7 +6,7 @@ export interface CategoricalChartProps extends Partial<ExternalMouseEvents> {
6
6
  barGap?: number | string;
7
7
  barSize?: number | string;
8
8
  children?: any;
9
- class?: string;
9
+ class?: VueClassValue;
10
10
  compact?: boolean;
11
11
  cx?: number | string;
12
12
  cy?: number | string;
@@ -73,7 +73,6 @@ export interface Size {
73
73
  width: number;
74
74
  height: number;
75
75
  }
76
- export type AnimationDuration = number;
77
76
  /**
78
77
  * Coordinates relative to the top-left corner of the chart.
79
78
  * Also include scale which means that a chart that's scaled will return the same coordinates as a chart that's not scaled.
@@ -126,4 +125,11 @@ export type AllowInDimension = {
126
125
  x?: boolean;
127
126
  y?: boolean;
128
127
  };
128
+ /** Vue class binding type: string, string[], or { [className]: boolean } */
129
+ export type VueClassValue = string | string[] | Record<string, boolean>;
130
+ /** Shared Vue prop definition for `class` — use in VueProps objects to avoid repetition */
131
+ export declare const classProp: {
132
+ type: PropType<VueClassValue>;
133
+ default: any;
134
+ };
129
135
  export {};
@@ -1,4 +1,4 @@
1
- import { DataKey } from './common';
1
+ import { DataKey, VueClassValue } from './common';
2
2
  /**
3
3
  * null means no active index
4
4
  * string means: whichever index from the chart data it is.
@@ -27,7 +27,7 @@ export interface Payload<TValue extends ValueType, TName extends NameType> {
27
27
  stroke?: string;
28
28
  strokeDasharray?: string | number;
29
29
  strokeWidth?: number | string;
30
- className?: string;
30
+ class?: VueClassValue;
31
31
  hide?: boolean;
32
32
  formatter?: Formatter<TValue, TName>;
33
33
  }
@@ -0,0 +1,11 @@
1
+ import { VNode } from 'vue';
2
+ /**
3
+ * Extract Cell VNode props from a VNode tree.
4
+ * Handles Fragment wrapping from v-for.
5
+ */
6
+ export declare function extractCellProps(vnodes: VNode[]): Record<string, any>[];
7
+ /**
8
+ * Filter out Cell VNodes from a VNode tree, preserving non-Cell siblings.
9
+ * Recursively descends Fragment children to preserve co-located content (e.g. LabelList).
10
+ */
11
+ export declare function filterOutCells(vnodes: VNode[]): VNode[];
@@ -0,0 +1,16 @@
1
+ import { RechartsScale } from '../types/scale';
2
+ export type InverseScaleFunction = (pixelValue: number) => unknown;
3
+ /**
4
+ * Binary search for sorted arrays (ascending or descending).
5
+ */
6
+ export declare function bisect(haystack: ReadonlyArray<number>, needle: number): number;
7
+ /**
8
+ * Creates an inverse scale function for categorical/ordinal scales.
9
+ * Uses bisect to find the closest domain value for a given pixel coordinate.
10
+ */
11
+ export declare function createCategoricalInverse(scale: RechartsScale | undefined, allDataPointsOnAxis?: ReadonlyArray<unknown>): InverseScaleFunction | undefined;
12
+ /**
13
+ * Creates an inverse function: uses native `.invert` for numeric scales,
14
+ * falls back to categorical bisect for ordinal/band/point scales.
15
+ */
16
+ export declare function combineInverseScaleFunction(scale: RechartsScale | undefined): InverseScaleFunction | undefined;
@@ -0,0 +1,23 @@
1
+ import { RechartsScale } from '../types/scale';
2
+ /**
3
+ * Convert a data value to pixel coordinate using a D3 scale.
4
+ * Automatically centers on band-scale categories by adding half the bandwidth.
5
+ */
6
+ export declare function scaleCoord(scale: RechartsScale, value: number | string): number | undefined;
7
+ /**
8
+ * Convert a data value to pixel coordinate for range boundaries.
9
+ * `start` returns the left/top edge; `end` returns the right/bottom edge (adding full bandwidth).
10
+ */
11
+ export declare function scaleValue(scale: RechartsScale, value: number | string, position: 'start' | 'end'): number | undefined;
12
+ /**
13
+ * Check whether a pixel coordinate falls within the scale's output range.
14
+ */
15
+ export declare function isInRange(scale: RechartsScale, coord: number): boolean;
16
+ /**
17
+ * Get the minimum value of a scale's range.
18
+ */
19
+ export declare function rangeMin(scale: RechartsScale): number;
20
+ /**
21
+ * Get the maximum value of a scale's range.
22
+ */
23
+ export declare function rangeMax(scale: RechartsScale): number;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vccs",
3
3
  "type": "module",
4
- "version": "0.2.0",
4
+ "version": "0.4.0",
5
5
  "description": "Composable charting components for Vue 3 — an unofficial port of Recharts",
6
6
  "author": "rick-hup",
7
7
  "license": "MIT",
@@ -47,6 +47,7 @@
47
47
  "@reduxjs/toolkit": "^2.8.2",
48
48
  "@reduxjs/vue-redux": "^1.0.1",
49
49
  "@vueuse/core": "^13.1.0",
50
+ "d3-hierarchy": "^3.1.2",
50
51
  "decimal.js-light": "^2.5.1",
51
52
  "es-toolkit": "^1.39.3",
52
53
  "eventemitter3": "^5.0.1",