vccs 0.1.0 → 0.3.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 (273) 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/bar/type.d.ts +1 -13
  5. package/dist/cartesian/brush/components/Slide.d.ts +1 -1
  6. package/dist/cartesian/brush/components/TravellerLayer.d.ts +1 -1
  7. package/dist/cartesian/brush/type.d.ts +2 -1
  8. package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts +2 -1
  9. package/dist/cartesian/funnel/Funnel.d.ts +2 -0
  10. package/dist/cartesian/funnel/index.d.ts +2 -0
  11. package/dist/cartesian/funnel/type.d.ts +74 -6
  12. package/dist/cartesian/index.d.ts +2 -0
  13. package/dist/cartesian/line/Line.d.ts +7 -13
  14. package/dist/cartesian/line/type.d.ts +4 -17
  15. package/dist/cartesian/reference-area/ReferenceArea.d.ts +16 -16
  16. package/dist/cartesian/reference-dot/ReferenceDot.d.ts +143 -0
  17. package/dist/cartesian/reference-dot/index.d.ts +2 -0
  18. package/dist/cartesian/reference-line/ReferenceLine.d.ts +8 -8
  19. package/dist/cartesian/scatter/Scatter.d.ts +1 -1
  20. package/dist/chart/FunnelChart.d.ts +1 -0
  21. package/dist/chart/RechartsWrapper.d.ts +7 -3
  22. package/dist/chart/Surface.d.ts +2 -1
  23. package/dist/chart/Treemap.d.ts +237 -0
  24. package/dist/chart/generateCategoricalChart.d.ts +2 -1
  25. package/dist/chart/index.d.ts +2 -0
  26. package/dist/chart/treemapUtils.d.ts +22 -0
  27. package/dist/components/Customized.d.ts +23 -0
  28. package/dist/components/Text.d.ts +4 -4
  29. package/dist/components/Tooltip.d.ts +1 -1
  30. package/dist/components/index.d.ts +2 -0
  31. package/dist/components/label/Label.d.ts +3 -3
  32. package/dist/components/label/types.d.ts +1 -1
  33. package/dist/container/Surface.d.ts +3 -2
  34. package/dist/es/animation/Animate.mjs +48 -22
  35. package/dist/es/cartesian/GraphicalItemClipPath.mjs +16 -15
  36. package/dist/es/cartesian/area/ActivePoints.mjs +44 -40
  37. package/dist/es/cartesian/area/Area.mjs +42 -31
  38. package/dist/es/cartesian/area/ClipRect.mjs +79 -58
  39. package/dist/es/cartesian/area/RenderArea.mjs +142 -108
  40. package/dist/es/cartesian/area/hooks/useArea.mjs +71 -47
  41. package/dist/es/cartesian/area/type.mjs +13 -15
  42. package/dist/es/cartesian/area/utils.mjs +69 -49
  43. package/dist/es/cartesian/axis/XAxis.mjs +87 -73
  44. package/dist/es/cartesian/axis/YAxis.mjs +67 -56
  45. package/dist/es/cartesian/bar/Bar.mjs +78 -71
  46. package/dist/es/cartesian/bar/components/BarBackground.mjs +22 -19
  47. package/dist/es/cartesian/bar/components/BarRectangles.mjs +117 -80
  48. package/dist/es/cartesian/bar/hooks/useBar.mjs +49 -37
  49. package/dist/es/cartesian/bar/type.mjs +11 -25
  50. package/dist/es/cartesian/bar/utils.mjs +97 -70
  51. package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs +165 -115
  52. package/dist/es/cartesian/cartesian-grid/Background.mjs +19 -16
  53. package/dist/es/cartesian/cartesian-grid/CartesianGrid.mjs +116 -97
  54. package/dist/es/cartesian/cartesian-grid/HorizontalGridLines.mjs +24 -23
  55. package/dist/es/cartesian/cartesian-grid/HorizontalStripes.mjs +24 -24
  56. package/dist/es/cartesian/cartesian-grid/VerticalGridLines.mjs +23 -22
  57. package/dist/es/cartesian/cartesian-grid/VerticalStripes.mjs +24 -24
  58. package/dist/es/cartesian/cartesian-grid/const.mjs +317 -10
  59. package/dist/es/cartesian/cartesian-grid/utils.mjs +18 -13
  60. package/dist/es/cartesian/error-bar/ErrorBar.mjs +111 -83
  61. package/dist/es/cartesian/error-bar/ErrorBarContext.mjs +13 -12
  62. package/dist/es/cartesian/funnel/Funnel.mjs +162 -0
  63. package/dist/es/cartesian/funnel/type.mjs +78 -0
  64. package/dist/es/cartesian/funnel/utils.mjs +102 -0
  65. package/dist/es/cartesian/line/ActivePoints.mjs +45 -41
  66. package/dist/es/cartesian/line/Line.mjs +41 -37
  67. package/dist/es/cartesian/line/StaticLine.mjs +191 -122
  68. package/dist/es/cartesian/line/hooks/useLine.mjs +60 -44
  69. package/dist/es/cartesian/line/type.mjs +13 -18
  70. package/dist/es/cartesian/line/utils.mjs +27 -26
  71. package/dist/es/cartesian/reference-area/ReferenceArea.mjs +79 -78
  72. package/dist/es/cartesian/reference-dot/ReferenceDot.mjs +134 -0
  73. package/dist/es/cartesian/reference-line/ReferenceLine.mjs +93 -84
  74. package/dist/es/cartesian/scatter/Scatter.mjs +168 -140
  75. package/dist/es/cartesian/scatter/hooks/useScatter.mjs +18 -14
  76. package/dist/es/cartesian/useNeedsClip.mjs +18 -9
  77. package/dist/es/cartesian/utils/get-ticks.mjs +103 -68
  78. package/dist/es/cartesian/z-axis/ZAxis.mjs +30 -28
  79. package/dist/es/chart/AreaChart.mjs +5 -5
  80. package/dist/es/chart/BarChart.mjs +5 -5
  81. package/dist/es/chart/ComposedChart.mjs +5 -5
  82. package/dist/es/chart/FunnelChart.mjs +11 -0
  83. package/dist/es/chart/LegendPortalContext.mjs +3 -3
  84. package/dist/es/chart/LineChart.mjs +5 -5
  85. package/dist/es/chart/PieChart.mjs +5 -5
  86. package/dist/es/chart/RadarChart.mjs +5 -5
  87. package/dist/es/chart/RadialBarChart.mjs +5 -5
  88. package/dist/es/chart/RechartsWrapper.mjs +113 -89
  89. package/dist/es/chart/ScatterChart.mjs +5 -5
  90. package/dist/es/chart/Surface.mjs +3 -3
  91. package/dist/es/chart/Surface.vue_vue_type_script_setup_true_lang.mjs +51 -45
  92. package/dist/es/chart/TooltipPortalContext.mjs +3 -3
  93. package/dist/es/chart/Treemap.mjs +379 -0
  94. package/dist/es/chart/const.mjs +2 -2
  95. package/dist/es/chart/generateCategoricalChart.mjs +99 -89
  96. package/dist/es/chart/provideClipPathId.mjs +12 -7
  97. package/dist/es/chart/treemapUtils.mjs +32 -0
  98. package/dist/es/components/Cell.mjs +16 -4
  99. package/dist/es/components/Customized.mjs +43 -0
  100. package/dist/es/components/Text.mjs +3 -3
  101. package/dist/es/components/Text.vue_vue_type_script_setup_true_lang.mjs +106 -69
  102. package/dist/es/components/Tooltip.mjs +274 -199
  103. package/dist/es/components/label/Label.mjs +30 -26
  104. package/dist/es/components/label/LabelList.mjs +45 -39
  105. package/dist/es/components/label/types.mjs +10 -6
  106. package/dist/es/components/label/utils.mjs +194 -162
  107. package/dist/es/components/legend/Legend.mjs +82 -71
  108. package/dist/es/components/legend/LegendSymbol.mjs +40 -38
  109. package/dist/es/components/legend/hooks/useLegend.mjs +71 -46
  110. package/dist/es/components/legend/hooks/useLegendContent.mjs +52 -31
  111. package/dist/es/components/legend/type.mjs +2 -2
  112. package/dist/es/components/legend/utils.mjs +19 -11
  113. package/dist/es/components/utils.mjs +35 -22
  114. package/dist/es/container/ClipPath.mjs +14 -14
  115. package/dist/es/container/Layer.mjs +9 -7
  116. package/dist/es/container/ResponsiveContainer.mjs +3 -3
  117. package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs +109 -77
  118. package/dist/es/container/Surface.mjs +25 -23
  119. package/dist/es/container/useSizeContext.mjs +3 -3
  120. package/dist/es/context/ChartDataContextProvider.mjs +19 -13
  121. package/dist/es/context/PanoramaContextProvider.mjs +15 -10
  122. package/dist/es/context/accessibilityContext.mjs +3 -3
  123. package/dist/es/context/cartesianLabelListContext.mjs +3 -3
  124. package/dist/es/context/chartLayoutContext.mjs +33 -30
  125. package/dist/es/context/cursorLayerContext.mjs +3 -3
  126. package/dist/es/context/graphicalLayerContext.mjs +3 -3
  127. package/dist/es/context/labelLayerContext.mjs +3 -3
  128. package/dist/es/context/polarLabelViewBoxContext.mjs +5 -5
  129. package/dist/es/context/useTooltipAxis.mjs +14 -12
  130. package/dist/es/events/useChartSynchronisation.mjs +91 -66
  131. package/dist/es/hooks/publicHooks.mjs +207 -0
  132. package/dist/es/hooks/useIsAnimating.mjs +28 -0
  133. package/dist/es/hooks/useSetupGraphicalItem.mjs +52 -43
  134. package/dist/es/index.mjs +54 -42
  135. package/dist/es/polar/pie/Pie.mjs +131 -115
  136. package/dist/es/polar/pie/type.mjs +8 -10
  137. package/dist/es/polar/radar/PolarAngleAxis.mjs +103 -84
  138. package/dist/es/polar/radar/PolarGrid.mjs +72 -59
  139. package/dist/es/polar/radar/PolarRadiusAxis.mjs +90 -65
  140. package/dist/es/polar/radar/Radar.mjs +181 -145
  141. package/dist/es/polar/radial-bar/RadialBar.mjs +161 -140
  142. package/dist/es/polar/radial-bar/type.mjs +9 -9
  143. package/dist/es/shape/Cross.mjs +11 -10
  144. package/dist/es/shape/Curve.mjs +71 -44
  145. package/dist/es/shape/Dot.mjs +12 -11
  146. package/dist/es/shape/Polygon.mjs +19 -0
  147. package/dist/es/shape/Rectangle.mjs +41 -30
  148. package/dist/es/shape/Sector.mjs +105 -79
  149. package/dist/es/shape/Symbols.mjs +45 -34
  150. package/dist/es/shape/Trapezoid.mjs +50 -0
  151. package/dist/es/state/ReportChartProps.mjs +23 -24
  152. package/dist/es/state/ReportMainChartProps.mjs +26 -21
  153. package/dist/es/state/ReportPolarOptions.mjs +23 -22
  154. package/dist/es/state/SetGraphicalItem.mjs +42 -27
  155. package/dist/es/state/SetLegendPayload.mjs +17 -13
  156. package/dist/es/state/SetTooltipEntrySettings.mjs +14 -12
  157. package/dist/es/state/brushSlice.mjs +12 -8
  158. package/dist/es/state/cartesianAxisSlice.mjs +23 -17
  159. package/dist/es/state/chartDataSlice.mjs +18 -13
  160. package/dist/es/state/externalEventsMiddleware.mjs +25 -15
  161. package/dist/es/state/graphicalItemsSlice.mjs +29 -25
  162. package/dist/es/state/hooks.mjs +24 -3
  163. package/dist/es/state/keyboardEventsMiddleware.mjs +50 -42
  164. package/dist/es/state/layoutSlice.mjs +18 -12
  165. package/dist/es/state/legendSlice.mjs +19 -14
  166. package/dist/es/state/mouseEventsMiddleware.mjs +31 -24
  167. package/dist/es/state/optionsSlice.mjs +14 -11
  168. package/dist/es/state/polarAxisSlice.mjs +15 -13
  169. package/dist/es/state/polarOptionsSlice.mjs +8 -6
  170. package/dist/es/state/reduxDevtoolsJsonStringifyReplacer.mjs +5 -3
  171. package/dist/es/state/referenceElementsSlice.mjs +21 -19
  172. package/dist/es/state/rootPropsSlice.mjs +20 -9
  173. package/dist/es/state/selectors/areaSelectors.mjs +65 -55
  174. package/dist/es/state/selectors/axisSelectors.mjs +784 -569
  175. package/dist/es/state/selectors/barSelectors.mjs +225 -162
  176. package/dist/es/state/selectors/brushSelectors.mjs +15 -14
  177. package/dist/es/state/selectors/combiners/combineActiveLabel.mjs +6 -5
  178. package/dist/es/state/selectors/combiners/combineActiveTooltipIndex.mjs +36 -27
  179. package/dist/es/state/selectors/combiners/combineAxisRangeWithReverse.mjs +5 -3
  180. package/dist/es/state/selectors/combiners/combineCoordinateForDefaultIndex.mjs +13 -11
  181. package/dist/es/state/selectors/combiners/combineTooltipInteractionState.mjs +26 -21
  182. package/dist/es/state/selectors/combiners/combineTooltipPayloadConfigurations.mjs +10 -6
  183. package/dist/es/state/selectors/common.mjs +2 -2
  184. package/dist/es/state/selectors/containerSelectors.mjs +5 -2
  185. package/dist/es/state/selectors/dataSelectors.mjs +28 -9
  186. package/dist/es/state/selectors/funnelSelectors.mjs +38 -0
  187. package/dist/es/state/selectors/legendSelectors.mjs +7 -6
  188. package/dist/es/state/selectors/lineSelectors.mjs +54 -47
  189. package/dist/es/state/selectors/pickAxisId.mjs +2 -2
  190. package/dist/es/state/selectors/pickAxisType.mjs +2 -2
  191. package/dist/es/state/selectors/pieSelectors.mjs +116 -81
  192. package/dist/es/state/selectors/polarAxisSelectors.mjs +113 -94
  193. package/dist/es/state/selectors/polarGridSelectors.mjs +13 -11
  194. package/dist/es/state/selectors/polarScaleSelectors.mjs +49 -46
  195. package/dist/es/state/selectors/polarSelectors.mjs +79 -62
  196. package/dist/es/state/selectors/radarSelectors.mjs +111 -91
  197. package/dist/es/state/selectors/radialBarSelectors.mjs +230 -183
  198. package/dist/es/state/selectors/rootPropsSelectors.mjs +11 -5
  199. package/dist/es/state/selectors/scatterSelectors.mjs +111 -95
  200. package/dist/es/state/selectors/selectActivePropsFromChartPointer.mjs +19 -17
  201. package/dist/es/state/selectors/selectAllAxes.mjs +8 -3
  202. package/dist/es/state/selectors/selectChartOffset.mjs +59 -50
  203. package/dist/es/state/selectors/selectChartOffsetInternal.mjs +55 -44
  204. package/dist/es/state/selectors/selectTooltipEventType.mjs +15 -14
  205. package/dist/es/state/selectors/selectTooltipPayloadSearcher.mjs +3 -3
  206. package/dist/es/state/selectors/selectTooltipSettings.mjs +2 -2
  207. package/dist/es/state/selectors/selectTooltipState.mjs +2 -2
  208. package/dist/es/state/selectors/selectors.mjs +94 -75
  209. package/dist/es/state/selectors/tooltipSelectors.mjs +253 -204
  210. package/dist/es/state/selectors/touchSelectors.mjs +17 -14
  211. package/dist/es/state/store.mjs +46 -46
  212. package/dist/es/state/tooltipSlice.mjs +64 -37
  213. package/dist/es/state/touchEventsMiddleware.mjs +35 -29
  214. package/dist/es/state/utils/useReportScale.mjs +16 -13
  215. package/dist/es/synchronisation/syncSelectors.mjs +3 -3
  216. package/dist/es/synchronisation/useChartSynchronisation.mjs +33 -19
  217. package/dist/es/types/common.mjs +12 -0
  218. package/dist/es/types/event.mjs +164 -2
  219. package/dist/es/utils/ReduceCSSCalc.mjs +81 -49
  220. package/dist/es/utils/VueUtils.mjs +35 -14
  221. package/dist/es/utils/attrs.mjs +43 -26
  222. package/dist/es/utils/cartesian.mjs +47 -15
  223. package/dist/es/utils/cell.mjs +28 -0
  224. package/dist/es/utils/chart.mjs +298 -197
  225. package/dist/es/utils/const.mjs +30 -2
  226. package/dist/es/utils/createCategoricalInverse.mjs +46 -0
  227. package/dist/es/utils/createContext.mjs +28 -9
  228. package/dist/es/utils/data-utils.mjs +9 -8
  229. package/dist/es/utils/data.mjs +35 -21
  230. package/dist/es/utils/events.mjs +5 -3
  231. package/dist/es/utils/getLinearRegression.mjs +28 -11
  232. package/dist/es/utils/grid.mjs +20 -5
  233. package/dist/es/utils/isDomainSpecifiedByUser.mjs +105 -54
  234. package/dist/es/utils/legend.mjs +13 -12
  235. package/dist/es/utils/log.mjs +10 -7
  236. package/dist/es/utils/payload/getUniqPayload.mjs +6 -4
  237. package/dist/es/utils/polar.mjs +37 -30
  238. package/dist/es/utils/props.mjs +16 -10
  239. package/dist/es/utils/resolveDefaultProps.mjs +23 -4
  240. package/dist/es/utils/scale/getNiceTickValues.mjs +127 -49
  241. package/dist/es/utils/scale/utils/arithmetic.mjs +49 -19
  242. package/dist/es/utils/scale/utils/utils.mjs +43 -24
  243. package/dist/es/utils/scale.mjs +46 -0
  244. package/dist/es/utils/style.mjs +24 -13
  245. package/dist/es/utils/tick.mjs +34 -23
  246. package/dist/es/utils/tooltip/translate.mjs +63 -49
  247. package/dist/es/utils/validate.mjs +40 -29
  248. package/dist/hooks/publicHooks.d.ts +143 -0
  249. package/dist/hooks/useIsAnimating.d.ts +14 -0
  250. package/dist/index.d.ts +1 -0
  251. package/dist/polar/pie/type.d.ts +2 -2
  252. package/dist/polar/radar/Radar.d.ts +4 -4
  253. package/dist/shape/Curve.d.ts +2 -1
  254. package/dist/shape/Polygon.d.ts +9 -0
  255. package/dist/shape/Rectangle.d.ts +0 -4
  256. package/dist/shape/Sector.d.ts +2 -2
  257. package/dist/shape/Symbols.d.ts +2 -1
  258. package/dist/shape/Trapezoid.d.ts +30 -0
  259. package/dist/shape/index.d.ts +2 -0
  260. package/dist/shape/types.d.ts +4 -5
  261. package/dist/state/ReportChartProps.d.ts +3 -3
  262. package/dist/state/graphicalItemsSlice.d.ts +1 -1
  263. package/dist/state/rootPropsSlice.d.ts +2 -2
  264. package/dist/state/selectors/axisSelectors.d.ts +5 -0
  265. package/dist/types/axis.d.ts +2 -2
  266. package/dist/types/bar.d.ts +2 -6
  267. package/dist/types/categorical.d.ts +2 -2
  268. package/dist/types/common.d.ts +7 -1
  269. package/dist/types/tooltip.d.ts +2 -2
  270. package/dist/utils/cell.d.ts +11 -0
  271. package/dist/utils/createCategoricalInverse.d.ts +16 -0
  272. package/dist/utils/scale.d.ts +23 -0
  273. package/package.json +2 -1
@@ -1,9 +1,13 @@
1
1
  //#region src/state/selectors/combiners/combineTooltipPayloadConfigurations.ts
2
- function e(e, t, n, r) {
3
- if (t === "axis") return e.tooltipItemPayloads;
4
- if (e.tooltipItemPayloads.length === 0) return [];
5
- let i;
6
- return i = n === "hover" ? e.itemInteraction.hover.dataKey : e.itemInteraction.click.dataKey, e.syncInteraction.active && i == null ? e.tooltipItemPayloads : i == null && r != null ? [e.tooltipItemPayloads[0]] : e.tooltipItemPayloads.filter((e) => e.settings?.dataKey === i);
2
+ function combineTooltipPayloadConfigurations(tooltipState, tooltipEventType, trigger, defaultIndex) {
3
+ if (tooltipEventType === "axis") return tooltipState.tooltipItemPayloads;
4
+ if (tooltipState.tooltipItemPayloads.length === 0) return [];
5
+ let filterByDataKey;
6
+ if (trigger === "hover") filterByDataKey = tooltipState.itemInteraction.hover.dataKey;
7
+ else filterByDataKey = tooltipState.itemInteraction.click.dataKey;
8
+ if (tooltipState.syncInteraction.active && filterByDataKey == null) return tooltipState.tooltipItemPayloads;
9
+ if (filterByDataKey == null && defaultIndex != null) return [tooltipState.tooltipItemPayloads[0]];
10
+ return tooltipState.tooltipItemPayloads.filter((tpc) => tpc.settings?.dataKey === filterByDataKey);
7
11
  }
8
12
  //#endregion
9
- export { e as combineTooltipPayloadConfigurations };
13
+ export { combineTooltipPayloadConfigurations };
@@ -1,4 +1,4 @@
1
1
  //#region src/state/selectors/common.ts
2
- var e = (e) => e.layout.layoutType;
2
+ var selectChartLayout = (state) => state.layout.layoutType;
3
3
  //#endregion
4
- export { e as selectChartLayout };
4
+ export { selectChartLayout };
@@ -1,4 +1,7 @@
1
1
  //#region src/state/selectors/containerSelectors.ts
2
- var e = (e) => e.layout.width, t = (e) => e.layout.height, n = (e) => e.layout.scale, r = (e) => e.layout.margin;
2
+ var selectChartWidth = (state) => state.layout.width;
3
+ var selectChartHeight = (state) => state.layout.height;
4
+ var selectContainerScale = (state) => state.layout.scale;
5
+ var selectMargin = (state) => state.layout.margin;
3
6
  //#endregion
4
- export { t as selectChartHeight, e as selectChartWidth, n as selectContainerScale, r as selectMargin };
7
+ export { selectChartHeight, selectChartWidth, selectContainerScale, selectMargin };
@@ -1,16 +1,35 @@
1
- import { createSelector as e } from "@reduxjs/toolkit";
1
+ import { createSelector } from "@reduxjs/toolkit";
2
2
  //#region src/state/selectors/dataSelectors.ts
3
- var t = (e) => e.chartData, n = e([t], (e) => {
4
- let t = e.chartData == null ? 0 : e.chartData.length - 1;
3
+ /**
4
+ * This selector always returns the data with the indexes set by a Brush.
5
+ * Trouble is, that might or might not be what you want.
6
+ *
7
+ * In charts with Brush, you will sometimes want to select the full range of data, and sometimes the one decided by the Brush
8
+ * - even if the Brush is active, the panorama inside the Brush should show the full range of data.
9
+ *
10
+ * So instead of this selector, consider using either selectChartDataAndAlwaysIgnoreIndexes or selectChartDataWithIndexesIfNotInPanorama
11
+ *
12
+ * @param state RechartsRootState
13
+ * @returns data defined on the chart root element, such as BarChart or ScatterChart
14
+ */
15
+ var selectChartDataWithIndexes = (state) => state.chartData;
16
+ /**
17
+ * This selector will always return the full range of data, ignoring the indexes set by a Brush.
18
+ * Useful for when you want to render the full range of data, even if a Brush is active.
19
+ * For example: in the Brush panorama, in Legend, in Tooltip.
20
+ */
21
+ var selectChartDataAndAlwaysIgnoreIndexes = createSelector([selectChartDataWithIndexes], (dataState) => {
22
+ const dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0;
5
23
  return {
6
- chartData: e.chartData,
7
- computedData: e.computedData,
8
- dataEndIndex: t,
24
+ chartData: dataState.chartData,
25
+ computedData: dataState.computedData,
26
+ dataEndIndex,
9
27
  dataStartIndex: 0
10
28
  };
11
29
  });
12
- function r(e, r, i, a) {
13
- return a ? n(e) : t(e);
30
+ function selectChartDataWithIndexesIfNotInPanorama(state, _xAxisId, _yAxisId, isPanorama) {
31
+ if (isPanorama) return selectChartDataAndAlwaysIgnoreIndexes(state);
32
+ return selectChartDataWithIndexes(state);
14
33
  }
15
34
  //#endregion
16
- export { n as selectChartDataAndAlwaysIgnoreIndexes, t as selectChartDataWithIndexes, r as selectChartDataWithIndexesIfNotInPanorama };
35
+ export { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes, selectChartDataWithIndexesIfNotInPanorama };
@@ -0,0 +1,38 @@
1
+ import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
2
+ import { selectChartOffset } from "./selectChartOffset.mjs";
3
+ import { computeFunnelTrapezoids } from "../../cartesian/funnel/utils.mjs";
4
+ import { createSelector } from "@reduxjs/toolkit";
5
+ //#region src/state/selectors/funnelSelectors.ts
6
+ function pickFunnelSettings(_state, funnelSettings) {
7
+ return funnelSettings;
8
+ }
9
+ var selectFunnelTrapezoids = createSelector([
10
+ selectChartOffset,
11
+ pickFunnelSettings,
12
+ selectChartDataAndAlwaysIgnoreIndexes
13
+ ], (offset, { data, dataKey, nameKey, tooltipType, lastShapeType, reversed, customWidth, presentationProps }, { chartData }) => {
14
+ let displayedData;
15
+ if (data != null && data.length > 0) displayedData = data;
16
+ else if (chartData != null && chartData.length > 0) displayedData = chartData;
17
+ if (displayedData && displayedData.length) displayedData = displayedData.map((entry, index) => ({
18
+ payload: entry,
19
+ ...presentationProps,
20
+ ...entry
21
+ }));
22
+ else return {
23
+ trapezoids: [],
24
+ data: displayedData
25
+ };
26
+ return computeFunnelTrapezoids({
27
+ dataKey,
28
+ nameKey,
29
+ displayedData,
30
+ tooltipType,
31
+ lastShapeType,
32
+ reversed,
33
+ offset,
34
+ customWidth
35
+ });
36
+ });
37
+ //#endregion
38
+ export { selectFunnelTrapezoids };
@@ -1,9 +1,10 @@
1
- import { createSelector as e } from "@reduxjs/toolkit";
1
+ import { createSelector } from "@reduxjs/toolkit";
2
2
  //#region src/state/selectors/legendSelectors.ts
3
- var t = (e) => e.legend.settings, n = (e) => e.legend.size;
4
- function r(e) {
5
- return e.legend.payload;
3
+ var selectLegendSettings = (state) => state.legend.settings;
4
+ var selectLegendSize = (state) => state.legend.size;
5
+ function selectAllLegendPayload2DArray(state) {
6
+ return state.legend.payload;
6
7
  }
7
- var i = e([r], (e) => e.flat(1));
8
+ var selectLegendPayload = createSelector([selectAllLegendPayload2DArray], (payloads) => payloads.flat(1));
8
9
  //#endregion
9
- export { i as selectLegendPayload, t as selectLegendSettings, n as selectLegendSize };
10
+ export { selectLegendPayload, selectLegendSettings, selectLegendSize };
@@ -1,57 +1,64 @@
1
- import { isCategoricalAxis as e } from "../../utils/validate.mjs";
2
- import { selectChartDataWithIndexesIfNotInPanorama as t } from "./dataSelectors.mjs";
3
- import { selectChartLayout as n } from "./common.mjs";
4
- import { getBandSizeOfAxis as r } from "../../utils/chart.mjs";
5
- import { selectAxisWithScale as i, selectTicksOfGraphicalItem as a, selectUnfilteredCartesianItems as o } from "./axisSelectors.mjs";
6
- import { computeLinePoints as s } from "../../cartesian/line/utils.mjs";
7
- import { createSelector as c } from "@reduxjs/toolkit";
1
+ import { isCategoricalAxis } from "../../utils/validate.mjs";
2
+ import { selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
3
+ import { selectChartLayout } from "./common.mjs";
4
+ import { getBandSizeOfAxis } from "../../utils/chart.mjs";
5
+ import { selectAxisWithScale, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from "./axisSelectors.mjs";
6
+ import { computeLinePoints } from "../../cartesian/line/utils.mjs";
7
+ import { createSelector } from "@reduxjs/toolkit";
8
8
  //#region src/state/selectors/lineSelectors.ts
9
- function l(e, t, n, r) {
10
- return i(e, "xAxis", t, r);
9
+ function selectXAxisWithScale(state, xAxisId, _yAxisId, isPanorama) {
10
+ return selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
11
11
  }
12
- function u(e, t, n, r) {
13
- return a(e, "xAxis", t, r);
12
+ function selectXAxisTicks(state, xAxisId, _yAxisId, isPanorama) {
13
+ return selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
14
14
  }
15
- function d(e, t, n, r) {
16
- return i(e, "yAxis", n, r);
15
+ function selectYAxisWithScale(state, _xAxisId, yAxisId, isPanorama) {
16
+ return selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
17
17
  }
18
- function f(e, t, n, r) {
19
- return a(e, "yAxis", n, r);
18
+ function selectYAxisTicks(state, _xAxisId, yAxisId, isPanorama) {
19
+ return selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
20
20
  }
21
- var p = c([
22
- n,
23
- l,
24
- d,
25
- u,
26
- f
27
- ], (t, n, i, a, o) => e(t, "xAxis") ? r(n, a, !1) : r(i, o, !1));
28
- function m(e, t, n, r, i) {
29
- return i;
21
+ var selectBandSize = createSelector([
22
+ selectChartLayout,
23
+ selectXAxisWithScale,
24
+ selectYAxisWithScale,
25
+ selectXAxisTicks,
26
+ selectYAxisTicks
27
+ ], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {
28
+ if (isCategoricalAxis(layout, "xAxis")) return getBandSizeOfAxis(xAxis, xAxisTicks, false);
29
+ return getBandSizeOfAxis(yAxis, yAxisTicks, false);
30
+ });
31
+ function pickLineSettings(_state, _xAxisId, _yAxisId, _isPanorama, lineSettings) {
32
+ return lineSettings;
30
33
  }
31
- var h = c([
32
- n,
33
- l,
34
- d,
35
- u,
36
- f,
37
- c([o, m], (e, t) => {
38
- if (e.some((e) => e.type === "line" && t.dataKey === e.dataKey && t.data === e.data)) return t;
34
+ var selectLinePoints = createSelector([
35
+ selectChartLayout,
36
+ selectXAxisWithScale,
37
+ selectYAxisWithScale,
38
+ selectXAxisTicks,
39
+ selectYAxisTicks,
40
+ createSelector([selectUnfilteredCartesianItems, pickLineSettings], (graphicalItems, lineSettingsFromProps) => {
41
+ if (graphicalItems.some((cgis) => cgis.type === "line" && lineSettingsFromProps.dataKey === cgis.dataKey && lineSettingsFromProps.data === cgis.data)) return lineSettingsFromProps;
39
42
  }),
40
- p,
41
- t
42
- ], (e, t, n, r, i, a, o, { chartData: c, dataStartIndex: l, dataEndIndex: u }) => {
43
- if (a == null || t == null || n == null || r == null || i == null || r.length === 0 || i.length === 0) return;
44
- let { dataKey: d, data: f } = a, p;
45
- if (p = f?.length > 0 ? f : c?.slice(l, u + 1), p != null) return s({
46
- layout: e,
47
- xAxis: t,
48
- yAxis: n,
49
- xAxisTicks: r,
50
- yAxisTicks: i,
51
- dataKey: d,
52
- bandSize: o,
53
- displayedData: p
43
+ selectBandSize,
44
+ selectChartDataWithIndexesIfNotInPanorama
45
+ ], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks, lineSettings, bandSize, { chartData, dataStartIndex, dataEndIndex }) => {
46
+ if (lineSettings == null || xAxis == null || yAxis == null || xAxisTicks == null || yAxisTicks == null || xAxisTicks.length === 0 || yAxisTicks.length === 0) return;
47
+ const { dataKey, data } = lineSettings;
48
+ let displayedData;
49
+ if (data?.length > 0) displayedData = data;
50
+ else displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
51
+ if (displayedData == null) return;
52
+ return computeLinePoints({
53
+ layout,
54
+ xAxis,
55
+ yAxis,
56
+ xAxisTicks,
57
+ yAxisTicks,
58
+ dataKey,
59
+ bandSize,
60
+ displayedData
54
61
  });
55
62
  });
56
63
  //#endregion
57
- export { h as selectLinePoints };
64
+ export { selectLinePoints };
@@ -1,4 +1,4 @@
1
1
  //#region src/state/selectors/pickAxisId.ts
2
- var e = (e, t, n) => n;
2
+ var pickAxisId = (_state, _axisType, axisId) => axisId;
3
3
  //#endregion
4
- export { e as pickAxisId };
4
+ export { pickAxisId };
@@ -1,4 +1,4 @@
1
1
  //#region src/state/selectors/pickAxisType.ts
2
- var e = (e, t) => t;
2
+ var pickAxisType = (_state, axisType) => axisType;
3
3
  //#endregion
4
- export { e as pickAxisType };
4
+ export { pickAxisType };
@@ -1,97 +1,132 @@
1
- import { isNumber as e } from "../../utils/validate.mjs";
2
- import { selectChartDataAndAlwaysIgnoreIndexes as t } from "./dataSelectors.mjs";
3
- import { selectChartOffset as n } from "./selectChartOffset.mjs";
4
- import { getMaxRadius as r, polarToCartesian as i } from "../../utils/polar.mjs";
5
- import { getPercentValue as a, mathSign as o } from "../../utils/data.mjs";
6
- import { getValueByDataKey as s } from "../../utils/chart.mjs";
7
- import { selectUnfilteredPolarItems as c } from "./polarSelectors.mjs";
8
- import { createSelector as l } from "@reduxjs/toolkit";
1
+ import { isNumber } from "../../utils/validate.mjs";
2
+ import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
3
+ import { selectChartOffset } from "./selectChartOffset.mjs";
4
+ import { getMaxRadius, polarToCartesian } from "../../utils/polar.mjs";
5
+ import { getPercentValue, mathSign } from "../../utils/data.mjs";
6
+ import { getValueByDataKey } from "../../utils/chart.mjs";
7
+ import { selectUnfilteredPolarItems } from "./polarSelectors.mjs";
8
+ import { createSelector } from "@reduxjs/toolkit";
9
9
  //#region src/state/selectors/pieSelectors.ts
10
- var u = (e, t) => t, d = [];
11
- function f(e, t) {
12
- return d;
10
+ var pickPieSettings = (_state, pieSettings) => pieSettings;
11
+ var EMPTY_CELLS = [];
12
+ function pickCells(_state, _pieSettings) {
13
+ return EMPTY_CELLS;
13
14
  }
14
- var p = l([
15
- t,
16
- u,
17
- f
18
- ], ({ chartData: e }, t, n) => {
19
- let r;
20
- if (r = t.data != null && t.data.length > 0 ? t.data : e, !r || r.length, r != null) return r;
21
- }), m = l([p, u], (e, t) => {
22
- if (e != null) return e.map((e, n) => {
23
- let r = s(e, t.nameKey, t.name), i;
24
- return i = typeof e == "object" && e && "fill" in e && typeof e.fill == "string" ? e.fill : t.fill, {
25
- value: r ?? String(t.dataKey ?? n),
26
- color: i,
27
- payload: e,
28
- type: t.legendType
15
+ var selectDisplayedData = createSelector([
16
+ selectChartDataAndAlwaysIgnoreIndexes,
17
+ pickPieSettings,
18
+ pickCells
19
+ ], ({ chartData }, pieSettings, cells) => {
20
+ let displayedData;
21
+ if (pieSettings.data != null && pieSettings.data.length > 0) displayedData = pieSettings.data;
22
+ else displayedData = chartData;
23
+ if (!displayedData || !displayedData.length) {}
24
+ if (displayedData == null) return;
25
+ return displayedData;
26
+ });
27
+ var selectPieLegend = createSelector([selectDisplayedData, pickPieSettings], (displayedData, pieSettings) => {
28
+ if (displayedData == null) return;
29
+ return displayedData.map((entry, i) => {
30
+ const name = getValueByDataKey(entry, pieSettings.nameKey, pieSettings.name);
31
+ let color;
32
+ if (typeof entry === "object" && entry != null && "fill" in entry && typeof entry.fill === "string") color = entry.fill;
33
+ else color = pieSettings.fill;
34
+ return {
35
+ value: name ?? String(pieSettings.dataKey ?? i),
36
+ color,
37
+ payload: entry,
38
+ type: pieSettings.legendType
29
39
  };
30
40
  });
31
- }), h = l([c, u], (e, t) => {
32
- if (e.some((e) => e.type === "pie" && t.dataKey === e.dataKey)) return t;
33
41
  });
34
- function g(e, t) {
35
- return o(t - e) * Math.min(Math.abs(t - e), 360);
42
+ var selectSynchronisedPieSettings = createSelector([selectUnfilteredPolarItems, pickPieSettings], (graphicalItems, pieSettingsFromProps) => {
43
+ if (graphicalItems.some((pgis) => pgis.type === "pie" && pieSettingsFromProps.dataKey === pgis.dataKey)) return pieSettingsFromProps;
44
+ });
45
+ function parseDeltaAngle(startAngle, endAngle) {
46
+ return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 360);
36
47
  }
37
- function _(e, t, n) {
38
- return a(typeof t == "function" ? t(e) : t ?? n * .8, n, n * .8);
48
+ function getOuterRadius(dataPoint, outerRadius, maxPieRadius) {
49
+ if (typeof outerRadius === "function") return getPercentValue(outerRadius(dataPoint), maxPieRadius, maxPieRadius * .8);
50
+ return getPercentValue(outerRadius ?? maxPieRadius * .8, maxPieRadius, maxPieRadius * .8);
39
51
  }
40
- function v(e, t, n) {
41
- let { top: i, left: o, width: s, height: c } = t, l = r(s, c);
52
+ function parseCoordinateOfPie(pieSettings, offset, dataPoint) {
53
+ const { top, left, width, height } = offset;
54
+ const maxPieRadius = getMaxRadius(width, height);
42
55
  return {
43
- cx: o + a(e.cx ?? s / 2, s, s / 2),
44
- cy: i + a(e.cy ?? c / 2, c, c / 2),
45
- innerRadius: a(e.innerRadius ?? 0, l, 0),
46
- outerRadius: _(n, e.outerRadius, l),
47
- maxRadius: Math.sqrt(s * s + c * c) / 2
56
+ cx: left + getPercentValue(pieSettings.cx ?? width / 2, width, width / 2),
57
+ cy: top + getPercentValue(pieSettings.cy ?? height / 2, height, height / 2),
58
+ innerRadius: getPercentValue(pieSettings.innerRadius ?? 0, maxPieRadius, 0),
59
+ outerRadius: getOuterRadius(dataPoint, pieSettings.outerRadius, maxPieRadius),
60
+ maxRadius: Math.sqrt(width * width + height * height) / 2
48
61
  };
49
62
  }
50
- function y({ pieSettings: t, displayedData: n, offset: r }) {
51
- if (!n || n.length === 0) return;
52
- let { cornerRadius: a, dataKey: c, nameKey: l, tooltipType: u } = t, d = t.startAngle ?? 0, f = t.endAngle ?? 360, p = Math.abs(t.minAngle ?? 0), m = g(d, f), h = Math.abs(m), _ = n.length <= 1 ? 0 : t.paddingAngle ?? 0, y = n.filter((e) => s(e, c, 0) !== 0).length, b = (h >= 360 ? y : y - 1) * _, x = h - y * p - b, S = n.reduce((t, n) => {
53
- let r = s(n, c, 0);
54
- return t + (e(r) ? r : 0);
63
+ function computePieSectors({ pieSettings, displayedData, offset }) {
64
+ if (!displayedData || displayedData.length === 0) return;
65
+ const { cornerRadius, dataKey, nameKey, tooltipType } = pieSettings;
66
+ const startAngle = pieSettings.startAngle ?? 0;
67
+ const endAngle = pieSettings.endAngle ?? 360;
68
+ const minAngle = Math.abs(pieSettings.minAngle ?? 0);
69
+ const deltaAngle = parseDeltaAngle(startAngle, endAngle);
70
+ const absDeltaAngle = Math.abs(deltaAngle);
71
+ const paddingAngle = displayedData.length <= 1 ? 0 : pieSettings.paddingAngle ?? 0;
72
+ const notZeroItemCount = displayedData.filter((entry) => getValueByDataKey(entry, dataKey, 0) !== 0).length;
73
+ const totalPaddingAngle = (absDeltaAngle >= 360 ? notZeroItemCount : notZeroItemCount - 1) * paddingAngle;
74
+ const realTotalAngle = absDeltaAngle - notZeroItemCount * minAngle - totalPaddingAngle;
75
+ const sum = displayedData.reduce((result, entry) => {
76
+ const val = getValueByDataKey(entry, dataKey, 0);
77
+ return result + (isNumber(val) ? val : 0);
55
78
  }, 0);
56
- if (S <= 0) return;
57
- let C;
58
- return n.map((n, f) => {
59
- let h = s(n, c, 0), g = s(n, l, f), y = v(t, r, n), b = (e(h) ? h : 0) / S, w = { ...n }, T = w != null && "fill" in w && typeof w.fill == "string" ? w.fill : t.fill, E;
60
- E = f ? C.endAngle + o(m) * _ * (h === 0 ? 0 : 1) : d;
61
- let D = E + o(m) * ((h === 0 ? 0 : p) + b * x), O = (E + D) / 2, k = (y.innerRadius + y.outerRadius) / 2, A = i(y.cx, y.cy, k, O);
62
- return C = {
63
- ...t.presentationProps,
64
- percent: b,
65
- cornerRadius: typeof a == "string" ? parseFloat(a) : a,
66
- name: g,
67
- midAngle: O,
68
- middleRadius: k,
69
- tooltipPosition: A,
70
- ...w,
71
- ...y,
72
- value: h,
73
- dataKey: c,
74
- startAngle: E,
75
- endAngle: D,
76
- payload: w,
77
- paddingAngle: o(m) * _,
78
- fill: T,
79
- nameKey: l,
80
- tooltipType: u
81
- }, C;
79
+ if (sum <= 0) return;
80
+ let prev;
81
+ return displayedData.map((entry, i) => {
82
+ const val = getValueByDataKey(entry, dataKey, 0);
83
+ const name = getValueByDataKey(entry, nameKey, i);
84
+ const coordinate = parseCoordinateOfPie(pieSettings, offset, entry);
85
+ const percent = (isNumber(val) ? val : 0) / sum;
86
+ const entryWithInfo = { ...entry };
87
+ const sectorColor = entryWithInfo != null && "fill" in entryWithInfo && typeof entryWithInfo.fill === "string" ? entryWithInfo.fill : pieSettings.fill;
88
+ let tempStartAngle;
89
+ if (i) tempStartAngle = prev.endAngle + mathSign(deltaAngle) * paddingAngle * (val !== 0 ? 1 : 0);
90
+ else tempStartAngle = startAngle;
91
+ const tempEndAngle = tempStartAngle + mathSign(deltaAngle) * ((val !== 0 ? minAngle : 0) + percent * realTotalAngle);
92
+ const midAngle = (tempStartAngle + tempEndAngle) / 2;
93
+ const middleRadius = (coordinate.innerRadius + coordinate.outerRadius) / 2;
94
+ const tooltipPosition = polarToCartesian(coordinate.cx, coordinate.cy, middleRadius, midAngle);
95
+ prev = {
96
+ ...pieSettings.presentationProps,
97
+ percent,
98
+ cornerRadius: typeof cornerRadius === "string" ? parseFloat(cornerRadius) : cornerRadius,
99
+ name,
100
+ midAngle,
101
+ middleRadius,
102
+ tooltipPosition,
103
+ ...entryWithInfo,
104
+ ...coordinate,
105
+ value: val,
106
+ dataKey,
107
+ startAngle: tempStartAngle,
108
+ endAngle: tempEndAngle,
109
+ payload: entryWithInfo,
110
+ paddingAngle: mathSign(deltaAngle) * paddingAngle,
111
+ fill: sectorColor,
112
+ nameKey,
113
+ tooltipType
114
+ };
115
+ return prev;
82
116
  });
83
117
  }
84
- l([
85
- p,
86
- h,
87
- f,
88
- n
89
- ], (e, t, n, r) => {
90
- if (!(t == null || e == null)) return y({
91
- offset: r,
92
- pieSettings: t,
93
- displayedData: e
118
+ createSelector([
119
+ selectDisplayedData,
120
+ selectSynchronisedPieSettings,
121
+ pickCells,
122
+ selectChartOffset
123
+ ], (displayedData, pieSettings, _cells, offset) => {
124
+ if (pieSettings == null || displayedData == null) return;
125
+ return computePieSectors({
126
+ offset,
127
+ pieSettings,
128
+ displayedData
94
129
  });
95
130
  });
96
131
  //#endregion
97
- export { y as computePieSectors, p as selectDisplayedData, m as selectPieLegend, h as selectSynchronisedPieSettings };
132
+ export { computePieSectors, selectDisplayedData, selectPieLegend, selectSynchronisedPieSettings };