@mantine/charts 9.0.0-alpha.5 → 9.0.0-alpha.7

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 (233) hide show
  1. package/cjs/AreaChart/AreaChart.cjs +305 -376
  2. package/cjs/AreaChart/AreaChart.cjs.map +1 -1
  3. package/cjs/AreaChart/AreaGradient.cjs +33 -11
  4. package/cjs/AreaChart/AreaGradient.cjs.map +1 -1
  5. package/cjs/AreaChart/AreaSplit.cjs +25 -27
  6. package/cjs/AreaChart/AreaSplit.cjs.map +1 -1
  7. package/cjs/AreaChart/get-split-offset.cjs +18 -19
  8. package/cjs/AreaChart/get-split-offset.cjs.map +1 -1
  9. package/cjs/BarChart/BarChart.cjs +283 -364
  10. package/cjs/BarChart/BarChart.cjs.map +1 -1
  11. package/cjs/BarsList/BarsList.cjs +86 -115
  12. package/cjs/BarsList/BarsList.cjs.map +1 -1
  13. package/cjs/BarsList/BarsList.module.cjs +13 -0
  14. package/cjs/BarsList/BarsList.module.cjs.map +1 -0
  15. package/cjs/BubbleChart/BubbleChart.cjs +124 -143
  16. package/cjs/BubbleChart/BubbleChart.cjs.map +1 -1
  17. package/cjs/ChartLegend/ChartLegend.cjs +66 -83
  18. package/cjs/ChartLegend/ChartLegend.cjs.map +1 -1
  19. package/cjs/ChartLegend/ChartLegend.module.cjs +12 -0
  20. package/cjs/ChartLegend/ChartLegend.module.cjs.map +1 -0
  21. package/cjs/ChartTooltip/ChartTooltip.cjs +101 -116
  22. package/cjs/ChartTooltip/ChartTooltip.cjs.map +1 -1
  23. package/cjs/ChartTooltip/ChartTooltip.module.cjs +16 -0
  24. package/cjs/ChartTooltip/ChartTooltip.module.cjs.map +1 -0
  25. package/cjs/CompositeChart/CompositeChart.cjs +301 -389
  26. package/cjs/CompositeChart/CompositeChart.cjs.map +1 -1
  27. package/cjs/DonutChart/DonutChart.cjs +122 -168
  28. package/cjs/DonutChart/DonutChart.cjs.map +1 -1
  29. package/cjs/DonutChart/DonutChart.module.cjs +10 -0
  30. package/cjs/DonutChart/DonutChart.module.cjs.map +1 -0
  31. package/cjs/FunnelChart/FunnelChart.cjs +91 -129
  32. package/cjs/FunnelChart/FunnelChart.cjs.map +1 -1
  33. package/cjs/FunnelChart/FunnelChart.module.cjs +7 -0
  34. package/cjs/FunnelChart/FunnelChart.module.cjs.map +1 -0
  35. package/cjs/Heatmap/Heatmap.cjs +156 -188
  36. package/cjs/Heatmap/Heatmap.cjs.map +1 -1
  37. package/cjs/Heatmap/Heatmap.module.cjs +12 -0
  38. package/cjs/Heatmap/Heatmap.module.cjs.map +1 -0
  39. package/cjs/Heatmap/HeatmapSplitWeeks.cjs +48 -72
  40. package/cjs/Heatmap/HeatmapSplitWeeks.cjs.map +1 -1
  41. package/cjs/Heatmap/HeatmapWeeks.cjs +45 -57
  42. package/cjs/Heatmap/HeatmapWeeks.cjs.map +1 -1
  43. package/cjs/Heatmap/get-boundaries/get-boundaries.cjs +8 -10
  44. package/cjs/Heatmap/get-boundaries/get-boundaries.cjs.map +1 -1
  45. package/cjs/Heatmap/get-columns/get-columns.cjs +74 -64
  46. package/cjs/Heatmap/get-columns/get-columns.cjs.map +1 -1
  47. package/cjs/Heatmap/get-dates-range/get-dates-range.cjs +43 -54
  48. package/cjs/Heatmap/get-dates-range/get-dates-range.cjs.map +1 -1
  49. package/cjs/Heatmap/get-heat-color/get-heat-color.cjs +7 -8
  50. package/cjs/Heatmap/get-heat-color/get-heat-color.cjs.map +1 -1
  51. package/cjs/Heatmap/get-months-range/get-months-range.cjs +23 -19
  52. package/cjs/Heatmap/get-months-range/get-months-range.cjs.map +1 -1
  53. package/cjs/Heatmap/rotate-weekdays-names/rotate-weekdays-names.cjs +8 -10
  54. package/cjs/Heatmap/rotate-weekdays-names/rotate-weekdays-names.cjs.map +1 -1
  55. package/cjs/LineChart/LineChart.cjs +275 -341
  56. package/cjs/LineChart/LineChart.cjs.map +1 -1
  57. package/cjs/PieChart/PieChart.cjs +125 -171
  58. package/cjs/PieChart/PieChart.cjs.map +1 -1
  59. package/cjs/PieChart/PieChart.module.cjs +7 -0
  60. package/cjs/PieChart/PieChart.module.cjs.map +1 -0
  61. package/cjs/PointLabel/PointLabel.cjs +20 -20
  62. package/cjs/PointLabel/PointLabel.cjs.map +1 -1
  63. package/cjs/RadarChart/RadarChart.cjs +128 -157
  64. package/cjs/RadarChart/RadarChart.cjs.map +1 -1
  65. package/cjs/RadarChart/RadarChart.module.cjs +10 -0
  66. package/cjs/RadarChart/RadarChart.module.cjs.map +1 -0
  67. package/cjs/RadialBarChart/RadialBarChart.cjs +117 -147
  68. package/cjs/RadialBarChart/RadialBarChart.cjs.map +1 -1
  69. package/cjs/RadialBarChart/RadialBarChart.module.cjs +10 -0
  70. package/cjs/RadialBarChart/RadialBarChart.module.cjs.map +1 -0
  71. package/cjs/ScatterChart/ScatterChart.cjs +219 -278
  72. package/cjs/ScatterChart/ScatterChart.cjs.map +1 -1
  73. package/cjs/Sparkline/Sparkline.cjs +71 -99
  74. package/cjs/Sparkline/Sparkline.cjs.map +1 -1
  75. package/cjs/Sparkline/Sparkline.module.cjs +7 -0
  76. package/cjs/Sparkline/Sparkline.module.cjs.map +1 -0
  77. package/cjs/_virtual/_rolldown/runtime.cjs +24 -0
  78. package/cjs/grid-chart.module.cjs +14 -0
  79. package/cjs/grid-chart.module.cjs.map +1 -0
  80. package/cjs/index.cjs +39 -44
  81. package/cjs/utils/get-series-labels/get-series-labels.cjs +16 -18
  82. package/cjs/utils/get-series-labels/get-series-labels.cjs.map +1 -1
  83. package/esm/AreaChart/AreaChart.mjs +306 -376
  84. package/esm/AreaChart/AreaChart.mjs.map +1 -1
  85. package/esm/AreaChart/AreaGradient.mjs +32 -9
  86. package/esm/AreaChart/AreaGradient.mjs.map +1 -1
  87. package/esm/AreaChart/AreaSplit.mjs +24 -25
  88. package/esm/AreaChart/AreaSplit.mjs.map +1 -1
  89. package/esm/AreaChart/get-split-offset.mjs +18 -17
  90. package/esm/AreaChart/get-split-offset.mjs.map +1 -1
  91. package/esm/BarChart/BarChart.mjs +283 -364
  92. package/esm/BarChart/BarChart.mjs.map +1 -1
  93. package/esm/BarsList/BarsList.mjs +84 -112
  94. package/esm/BarsList/BarsList.mjs.map +1 -1
  95. package/esm/BarsList/BarsList.module.mjs +13 -0
  96. package/esm/BarsList/BarsList.module.mjs.map +1 -0
  97. package/esm/BubbleChart/BubbleChart.mjs +122 -140
  98. package/esm/BubbleChart/BubbleChart.mjs.map +1 -1
  99. package/esm/ChartLegend/ChartLegend.mjs +64 -80
  100. package/esm/ChartLegend/ChartLegend.mjs.map +1 -1
  101. package/esm/ChartLegend/ChartLegend.module.mjs +12 -0
  102. package/esm/ChartLegend/ChartLegend.module.mjs.map +1 -0
  103. package/esm/ChartTooltip/ChartTooltip.mjs +99 -113
  104. package/esm/ChartTooltip/ChartTooltip.mjs.map +1 -1
  105. package/esm/ChartTooltip/ChartTooltip.module.mjs +16 -0
  106. package/esm/ChartTooltip/ChartTooltip.module.mjs.map +1 -0
  107. package/esm/CompositeChart/CompositeChart.mjs +299 -386
  108. package/esm/CompositeChart/CompositeChart.mjs.map +1 -1
  109. package/esm/DonutChart/DonutChart.mjs +120 -165
  110. package/esm/DonutChart/DonutChart.mjs.map +1 -1
  111. package/esm/DonutChart/DonutChart.module.mjs +10 -0
  112. package/esm/DonutChart/DonutChart.module.mjs.map +1 -0
  113. package/esm/FunnelChart/FunnelChart.mjs +92 -129
  114. package/esm/FunnelChart/FunnelChart.mjs.map +1 -1
  115. package/esm/FunnelChart/FunnelChart.module.mjs +7 -0
  116. package/esm/FunnelChart/FunnelChart.module.mjs.map +1 -0
  117. package/esm/Heatmap/Heatmap.mjs +154 -185
  118. package/esm/Heatmap/Heatmap.mjs.map +1 -1
  119. package/esm/Heatmap/Heatmap.module.mjs +12 -0
  120. package/esm/Heatmap/Heatmap.module.mjs.map +1 -0
  121. package/esm/Heatmap/HeatmapSplitWeeks.mjs +47 -70
  122. package/esm/Heatmap/HeatmapSplitWeeks.mjs.map +1 -1
  123. package/esm/Heatmap/HeatmapWeeks.mjs +44 -55
  124. package/esm/Heatmap/HeatmapWeeks.mjs.map +1 -1
  125. package/esm/Heatmap/get-boundaries/get-boundaries.mjs +8 -8
  126. package/esm/Heatmap/get-boundaries/get-boundaries.mjs.map +1 -1
  127. package/esm/Heatmap/get-columns/get-columns.mjs +74 -62
  128. package/esm/Heatmap/get-columns/get-columns.mjs.map +1 -1
  129. package/esm/Heatmap/get-dates-range/get-dates-range.mjs +43 -52
  130. package/esm/Heatmap/get-dates-range/get-dates-range.mjs.map +1 -1
  131. package/esm/Heatmap/get-heat-color/get-heat-color.mjs +7 -6
  132. package/esm/Heatmap/get-heat-color/get-heat-color.mjs.map +1 -1
  133. package/esm/Heatmap/get-months-range/get-months-range.mjs +23 -17
  134. package/esm/Heatmap/get-months-range/get-months-range.mjs.map +1 -1
  135. package/esm/Heatmap/rotate-weekdays-names/rotate-weekdays-names.mjs +8 -8
  136. package/esm/Heatmap/rotate-weekdays-names/rotate-weekdays-names.mjs.map +1 -1
  137. package/esm/LineChart/LineChart.mjs +276 -341
  138. package/esm/LineChart/LineChart.mjs.map +1 -1
  139. package/esm/PieChart/PieChart.mjs +126 -171
  140. package/esm/PieChart/PieChart.mjs.map +1 -1
  141. package/esm/PieChart/PieChart.module.mjs +7 -0
  142. package/esm/PieChart/PieChart.module.mjs.map +1 -0
  143. package/esm/PointLabel/PointLabel.mjs +19 -18
  144. package/esm/PointLabel/PointLabel.mjs.map +1 -1
  145. package/esm/RadarChart/RadarChart.mjs +129 -157
  146. package/esm/RadarChart/RadarChart.mjs.map +1 -1
  147. package/esm/RadarChart/RadarChart.module.mjs +10 -0
  148. package/esm/RadarChart/RadarChart.module.mjs.map +1 -0
  149. package/esm/RadialBarChart/RadialBarChart.mjs +118 -147
  150. package/esm/RadialBarChart/RadialBarChart.mjs.map +1 -1
  151. package/esm/RadialBarChart/RadialBarChart.module.mjs +10 -0
  152. package/esm/RadialBarChart/RadialBarChart.module.mjs.map +1 -0
  153. package/esm/ScatterChart/ScatterChart.mjs +220 -278
  154. package/esm/ScatterChart/ScatterChart.mjs.map +1 -1
  155. package/esm/Sparkline/Sparkline.mjs +69 -96
  156. package/esm/Sparkline/Sparkline.mjs.map +1 -1
  157. package/esm/Sparkline/Sparkline.module.mjs +7 -0
  158. package/esm/Sparkline/Sparkline.module.mjs.map +1 -0
  159. package/esm/grid-chart.module.mjs +14 -0
  160. package/esm/grid-chart.module.mjs.map +1 -0
  161. package/esm/index.mjs +19 -19
  162. package/esm/utils/get-series-labels/get-series-labels.mjs +16 -16
  163. package/esm/utils/get-series-labels/get-series-labels.mjs.map +1 -1
  164. package/lib/BarChart/BarChart.d.ts +1 -0
  165. package/lib/DonutChart/DonutChart.d.ts +3 -3
  166. package/lib/PieChart/PieChart.d.ts +3 -3
  167. package/package.json +3 -3
  168. package/cjs/BarsList/BarsList.module.css.cjs +0 -7
  169. package/cjs/BarsList/BarsList.module.css.cjs.map +0 -1
  170. package/cjs/ChartLegend/ChartLegend.module.css.cjs +0 -7
  171. package/cjs/ChartLegend/ChartLegend.module.css.cjs.map +0 -1
  172. package/cjs/ChartTooltip/ChartTooltip.module.css.cjs +0 -7
  173. package/cjs/ChartTooltip/ChartTooltip.module.css.cjs.map +0 -1
  174. package/cjs/DonutChart/DonutChart.module.css.cjs +0 -7
  175. package/cjs/DonutChart/DonutChart.module.css.cjs.map +0 -1
  176. package/cjs/FunnelChart/FunnelChart.module.css.cjs +0 -7
  177. package/cjs/FunnelChart/FunnelChart.module.css.cjs.map +0 -1
  178. package/cjs/Heatmap/Heatmap.module.css.cjs +0 -7
  179. package/cjs/Heatmap/Heatmap.module.css.cjs.map +0 -1
  180. package/cjs/PieChart/PieChart.module.css.cjs +0 -7
  181. package/cjs/PieChart/PieChart.module.css.cjs.map +0 -1
  182. package/cjs/RadarChart/RadarChart.module.css.cjs +0 -7
  183. package/cjs/RadarChart/RadarChart.module.css.cjs.map +0 -1
  184. package/cjs/RadialBarChart/RadialBarChart.module.css.cjs +0 -7
  185. package/cjs/RadialBarChart/RadialBarChart.module.css.cjs.map +0 -1
  186. package/cjs/SankeyChart/SankeyChart.cjs +0 -276
  187. package/cjs/SankeyChart/SankeyChart.cjs.map +0 -1
  188. package/cjs/SankeyChart/SankeyChart.module.css.cjs +0 -7
  189. package/cjs/SankeyChart/SankeyChart.module.css.cjs.map +0 -1
  190. package/cjs/Sparkline/Sparkline.module.css.cjs +0 -7
  191. package/cjs/Sparkline/Sparkline.module.css.cjs.map +0 -1
  192. package/cjs/Treemap/Treemap.cjs +0 -198
  193. package/cjs/Treemap/Treemap.cjs.map +0 -1
  194. package/cjs/Treemap/Treemap.module.css.cjs +0 -7
  195. package/cjs/Treemap/Treemap.module.css.cjs.map +0 -1
  196. package/cjs/grid-chart.module.css.cjs +0 -7
  197. package/cjs/grid-chart.module.css.cjs.map +0 -1
  198. package/cjs/index.cjs.map +0 -1
  199. package/esm/BarsList/BarsList.module.css.mjs +0 -5
  200. package/esm/BarsList/BarsList.module.css.mjs.map +0 -1
  201. package/esm/ChartLegend/ChartLegend.module.css.mjs +0 -5
  202. package/esm/ChartLegend/ChartLegend.module.css.mjs.map +0 -1
  203. package/esm/ChartTooltip/ChartTooltip.module.css.mjs +0 -5
  204. package/esm/ChartTooltip/ChartTooltip.module.css.mjs.map +0 -1
  205. package/esm/DonutChart/DonutChart.module.css.mjs +0 -5
  206. package/esm/DonutChart/DonutChart.module.css.mjs.map +0 -1
  207. package/esm/FunnelChart/FunnelChart.module.css.mjs +0 -5
  208. package/esm/FunnelChart/FunnelChart.module.css.mjs.map +0 -1
  209. package/esm/Heatmap/Heatmap.module.css.mjs +0 -5
  210. package/esm/Heatmap/Heatmap.module.css.mjs.map +0 -1
  211. package/esm/PieChart/PieChart.module.css.mjs +0 -5
  212. package/esm/PieChart/PieChart.module.css.mjs.map +0 -1
  213. package/esm/RadarChart/RadarChart.module.css.mjs +0 -5
  214. package/esm/RadarChart/RadarChart.module.css.mjs.map +0 -1
  215. package/esm/RadialBarChart/RadialBarChart.module.css.mjs +0 -5
  216. package/esm/RadialBarChart/RadialBarChart.module.css.mjs.map +0 -1
  217. package/esm/SankeyChart/SankeyChart.mjs +0 -274
  218. package/esm/SankeyChart/SankeyChart.mjs.map +0 -1
  219. package/esm/SankeyChart/SankeyChart.module.css.mjs +0 -5
  220. package/esm/SankeyChart/SankeyChart.module.css.mjs.map +0 -1
  221. package/esm/Sparkline/Sparkline.module.css.mjs +0 -5
  222. package/esm/Sparkline/Sparkline.module.css.mjs.map +0 -1
  223. package/esm/Treemap/Treemap.mjs +0 -196
  224. package/esm/Treemap/Treemap.mjs.map +0 -1
  225. package/esm/Treemap/Treemap.module.css.mjs +0 -5
  226. package/esm/Treemap/Treemap.module.css.mjs.map +0 -1
  227. package/esm/grid-chart.module.css.mjs +0 -5
  228. package/esm/grid-chart.module.css.mjs.map +0 -1
  229. package/esm/index.mjs.map +0 -1
  230. package/lib/SankeyChart/SankeyChart.d.ts +0 -71
  231. package/lib/SankeyChart/index.d.ts +0 -12
  232. package/lib/Treemap/Treemap.d.ts +0 -57
  233. package/lib/Treemap/index.d.ts +0 -10
@@ -1,395 +1,307 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var react = require('react');
6
- var recharts = require('recharts');
7
- var core = require('@mantine/core');
8
- var ChartLegend = require('../ChartLegend/ChartLegend.cjs');
9
- var ChartTooltip = require('../ChartTooltip/ChartTooltip.cjs');
10
- var PointLabel = require('../PointLabel/PointLabel.cjs');
11
- var gridChart_module = require('../grid-chart.module.css.cjs');
12
-
1
+ "use client";
2
+ require("../_virtual/_rolldown/runtime.cjs");
3
+ const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
4
+ const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
5
+ const require_PointLabel = require("../PointLabel/PointLabel.cjs");
6
+ const require_grid_chart_module = require("../grid-chart.module.cjs");
7
+ let _mantine_core = require("@mantine/core");
8
+ let react_jsx_runtime = require("react/jsx-runtime");
9
+ let react = require("react");
10
+ let recharts = require("recharts");
11
+ //#region packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx
13
12
  const defaultProps = {
14
- withXAxis: true,
15
- withYAxis: true,
16
- withTooltip: true,
17
- tooltipAnimationDuration: 0,
18
- tickLine: "y",
19
- strokeDasharray: "5 5",
20
- gridAxis: "x",
21
- withDots: true,
22
- connectNulls: true,
23
- strokeWidth: 2,
24
- curveType: "monotone"
13
+ withXAxis: true,
14
+ withYAxis: true,
15
+ withTooltip: true,
16
+ tooltipAnimationDuration: 0,
17
+ tickLine: "y",
18
+ strokeDasharray: "5 5",
19
+ gridAxis: "x",
20
+ withDots: true,
21
+ connectNulls: true,
22
+ strokeWidth: 2,
23
+ curveType: "monotone"
25
24
  };
26
- const varsResolver = core.createVarsResolver(
27
- (theme, { textColor, gridColor }) => ({
28
- root: {
29
- "--chart-text-color": textColor ? core.getThemeColor(textColor, theme) : void 0,
30
- "--chart-grid-color": gridColor ? core.getThemeColor(gridColor, theme) : void 0
31
- }
32
- })
33
- );
34
- const CompositeChart = core.factory((_props) => {
35
- const props = core.useProps("CompositeChart", defaultProps, _props);
36
- const {
37
- classNames,
38
- className,
39
- style,
40
- styles,
41
- unstyled,
42
- vars,
43
- data,
44
- withLegend,
45
- legendProps,
46
- series,
47
- onMouseLeave,
48
- dataKey,
49
- withTooltip,
50
- withXAxis,
51
- withYAxis,
52
- gridAxis,
53
- tickLine,
54
- xAxisProps,
55
- yAxisProps,
56
- unit,
57
- tooltipAnimationDuration,
58
- strokeDasharray,
59
- gridProps,
60
- tooltipProps,
61
- referenceLines,
62
- withDots,
63
- dotProps,
64
- activeDotProps,
65
- strokeWidth,
66
- connectNulls,
67
- curveType,
68
- dir,
69
- valueFormatter,
70
- children,
71
- lineProps,
72
- xAxisLabel,
73
- yAxisLabel,
74
- withRightYAxis,
75
- rightYAxisLabel,
76
- rightYAxisProps,
77
- withPointLabels,
78
- areaProps,
79
- barProps,
80
- withBarValueLabel,
81
- minBarSize,
82
- maxBarWidth,
83
- composedChartProps,
84
- attributes,
85
- ...others
86
- } = props;
87
- const theme = core.useMantineTheme();
88
- const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
89
- const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
90
- const [highlightedArea, setHighlightedArea] = react.useState(null);
91
- const shouldHighlight = highlightedArea !== null;
92
- const handleMouseLeave = (event) => {
93
- setHighlightedArea(null);
94
- onMouseLeave?.(event);
95
- };
96
- const { resolvedClassNames, resolvedStyles } = core.useResolvedStylesApi({
97
- classNames,
98
- styles,
99
- props
100
- });
101
- const getStyles = core.useStyles({
102
- name: "CompositeChart",
103
- classes: gridChart_module,
104
- props,
105
- className,
106
- style,
107
- classNames,
108
- styles,
109
- unstyled,
110
- attributes,
111
- vars,
112
- varsResolver
113
- });
114
- const lines = series.map((item) => {
115
- const color = core.getThemeColor(item.color, theme);
116
- const dimmed = shouldHighlight && highlightedArea !== item.name;
117
- if (item.type === "line") {
118
- return /* @__PURE__ */ react.createElement(
119
- recharts.Line,
120
- {
121
- ...getStyles("line"),
122
- key: item.name,
123
- name: item.name,
124
- dataKey: item.name,
125
- dot: withDots ? {
126
- fillOpacity: dimmed ? 0 : 1,
127
- strokeOpacity: dimmed ? 0 : 1,
128
- strokeWidth: 1,
129
- fill: color,
130
- stroke: color,
131
- ...dotProps
132
- } : false,
133
- activeDot: withDots ? { fill: "var(--mantine-color-white)", stroke: color, ...activeDotProps } : false,
134
- fill: color,
135
- stroke: color,
136
- strokeWidth,
137
- isAnimationActive: false,
138
- fillOpacity: dimmed ? 0 : 1,
139
- strokeOpacity: dimmed ? 0.5 : 1,
140
- connectNulls,
141
- type: curveType,
142
- strokeDasharray: item.strokeDasharray,
143
- yAxisId: item.yAxisId || void 0,
144
- label: withPointLabels ? /* @__PURE__ */ jsxRuntime.jsx(PointLabel.PointLabel, { valueFormatter }) : void 0,
145
- ...typeof lineProps === "function" ? lineProps(item) : lineProps
146
- }
147
- );
148
- }
149
- if (item.type === "area") {
150
- return /* @__PURE__ */ react.createElement(
151
- recharts.Area,
152
- {
153
- ...getStyles("area"),
154
- key: item.name,
155
- name: item.name,
156
- type: curveType,
157
- dataKey: item.name,
158
- fill: color,
159
- strokeWidth,
160
- stroke: color,
161
- isAnimationActive: false,
162
- connectNulls,
163
- dot: withDots ? {
164
- fillOpacity: dimmed ? 0 : 1,
165
- strokeOpacity: dimmed ? 0 : 1,
166
- strokeWidth: 1,
167
- fill: color,
168
- stroke: color,
169
- ...dotProps
170
- } : false,
171
- activeDot: withDots ? {
172
- fill: theme.white,
173
- stroke: color,
174
- strokeWidth: 2,
175
- r: 4,
176
- ...activeDotProps
177
- } : false,
178
- fillOpacity: dimmed ? 0 : 0.2,
179
- strokeOpacity: dimmed ? 0.5 : 1,
180
- strokeDasharray: item.strokeDasharray,
181
- yAxisId: item.yAxisId || void 0,
182
- label: withPointLabels ? /* @__PURE__ */ jsxRuntime.jsx(PointLabel.PointLabel, { valueFormatter }) : void 0,
183
- ...typeof areaProps === "function" ? areaProps(item) : areaProps
184
- }
185
- );
186
- }
187
- if (item.type === "bar") {
188
- return /* @__PURE__ */ react.createElement(
189
- recharts.Bar,
190
- {
191
- ...getStyles("bar"),
192
- key: item.name,
193
- name: item.name,
194
- dataKey: item.name,
195
- fill: color,
196
- stroke: color,
197
- isAnimationActive: false,
198
- fillOpacity: dimmed ? 0.1 : 1,
199
- strokeOpacity: dimmed ? 0.2 : 0,
200
- yAxisId: item.yAxisId || void 0,
201
- minPointSize: minBarSize,
202
- ...typeof barProps === "function" ? barProps(item) : barProps
203
- },
204
- withBarValueLabel && /* @__PURE__ */ jsxRuntime.jsx(
205
- recharts.LabelList,
206
- {
207
- position: "top",
208
- fontSize: 12,
209
- fill: "var(--chart-bar-label-color, var(--mantine-color-dimmed))",
210
- formatter: (val) => valueFormatter?.(val)
211
- }
212
- )
213
- );
214
- }
215
- return null;
216
- });
217
- const referenceLinesItems = referenceLines?.map((line, index) => {
218
- const color = core.getThemeColor(line.color, theme);
219
- return /* @__PURE__ */ jsxRuntime.jsx(
220
- recharts.ReferenceLine,
221
- {
222
- stroke: line.color ? color : "var(--chart-grid-color)",
223
- strokeWidth: 1,
224
- yAxisId: line.yAxisId || void 0,
225
- ...line,
226
- label: {
227
- value: line.label,
228
- fill: line.color ? color : "currentColor",
229
- fontSize: 12,
230
- position: line.labelPosition ?? "insideBottomLeft"
231
- },
232
- ...getStyles("referenceLine")
233
- },
234
- index
235
- );
236
- });
237
- const sharedYAxisProps = {
238
- axisLine: false,
239
- type: "number",
240
- tickLine: withYTickLine ? { stroke: "currentColor" } : false,
241
- allowDecimals: true,
242
- unit,
243
- tickFormatter: valueFormatter,
244
- ...getStyles("axis")
245
- };
246
- return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("root"), onMouseLeave: handleMouseLeave, dir: dir || "ltr", ...others, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
247
- recharts.ComposedChart,
248
- {
249
- data,
250
- maxBarSize: maxBarWidth,
251
- margin: {
252
- bottom: xAxisLabel ? 30 : void 0,
253
- left: yAxisLabel ? 10 : void 0,
254
- right: yAxisLabel ? 5 : void 0
255
- },
256
- ...composedChartProps,
257
- children: [
258
- withLegend && /* @__PURE__ */ jsxRuntime.jsx(
259
- recharts.Legend,
260
- {
261
- verticalAlign: "top",
262
- content: (payload) => /* @__PURE__ */ jsxRuntime.jsx(
263
- ChartLegend.ChartLegend,
264
- {
265
- payload: payload.payload,
266
- onHighlight: setHighlightedArea,
267
- legendPosition: legendProps?.verticalAlign || "top",
268
- classNames: resolvedClassNames,
269
- styles: resolvedStyles,
270
- series,
271
- attributes
272
- }
273
- ),
274
- ...legendProps
275
- }
276
- ),
277
- /* @__PURE__ */ jsxRuntime.jsxs(
278
- recharts.XAxis,
279
- {
280
- hide: !withXAxis,
281
- dataKey,
282
- tick: { transform: "translate(0, 10)", fontSize: 12, fill: "currentColor" },
283
- stroke: "",
284
- interval: "preserveStartEnd",
285
- tickLine: withXTickLine ? { stroke: "currentColor" } : false,
286
- minTickGap: 5,
287
- ...getStyles("axis"),
288
- ...xAxisProps,
289
- children: [
290
- xAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(recharts.Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel"), children: xAxisLabel }),
291
- xAxisProps?.children
292
- ]
293
- }
294
- ),
295
- /* @__PURE__ */ jsxRuntime.jsxs(
296
- recharts.YAxis,
297
- {
298
- orientation: "left",
299
- tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
300
- hide: !withYAxis,
301
- ...sharedYAxisProps,
302
- ...yAxisProps,
303
- children: [
304
- yAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
305
- recharts.Label,
306
- {
307
- position: "insideLeft",
308
- angle: -90,
309
- textAnchor: "middle",
310
- fontSize: 12,
311
- offset: -5,
312
- ...getStyles("axisLabel"),
313
- children: yAxisLabel
314
- }
315
- ),
316
- yAxisProps?.children
317
- ]
318
- }
319
- ),
320
- /* @__PURE__ */ jsxRuntime.jsxs(
321
- recharts.YAxis,
322
- {
323
- yAxisId: "right",
324
- orientation: "right",
325
- tick: { transform: "translate(10, 0)", fontSize: 12, fill: "currentColor" },
326
- hide: !withRightYAxis,
327
- ...sharedYAxisProps,
328
- ...rightYAxisProps,
329
- children: [
330
- rightYAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
331
- recharts.Label,
332
- {
333
- position: "insideRight",
334
- angle: 90,
335
- textAnchor: "middle",
336
- fontSize: 12,
337
- offset: -5,
338
- ...getStyles("axisLabel"),
339
- children: rightYAxisLabel
340
- }
341
- ),
342
- yAxisProps?.children
343
- ]
344
- }
345
- ),
346
- /* @__PURE__ */ jsxRuntime.jsx(
347
- recharts.CartesianGrid,
348
- {
349
- strokeDasharray,
350
- vertical: gridAxis === "y" || gridAxis === "xy",
351
- horizontal: gridAxis === "x" || gridAxis === "xy",
352
- ...getStyles("grid"),
353
- ...gridProps
354
- }
355
- ),
356
- withTooltip && /* @__PURE__ */ jsxRuntime.jsx(
357
- recharts.Tooltip,
358
- {
359
- animationDuration: tooltipAnimationDuration,
360
- isAnimationActive: tooltipAnimationDuration !== 0,
361
- position: { y: 0 },
362
- cursor: {
363
- stroke: "var(--chart-grid-color)",
364
- strokeWidth: 1,
365
- strokeDasharray
366
- },
367
- content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsxRuntime.jsx(
368
- ChartTooltip.ChartTooltip,
369
- {
370
- label: labelFormatter && payload ? labelFormatter(label, payload) : label,
371
- payload,
372
- unit,
373
- classNames: resolvedClassNames,
374
- styles: resolvedStyles,
375
- series,
376
- valueFormatter,
377
- attributes
378
- }
379
- ),
380
- ...tooltipProps
381
- }
382
- ),
383
- lines,
384
- referenceLinesItems,
385
- children
386
- ]
387
- }
388
- ) }) });
25
+ const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { textColor, gridColor }) => ({ root: {
26
+ "--chart-text-color": textColor ? (0, _mantine_core.getThemeColor)(textColor, theme) : void 0,
27
+ "--chart-grid-color": gridColor ? (0, _mantine_core.getThemeColor)(gridColor, theme) : void 0
28
+ } }));
29
+ const CompositeChart = (0, _mantine_core.factory)((_props) => {
30
+ const props = (0, _mantine_core.useProps)("CompositeChart", defaultProps, _props);
31
+ const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, ...others } = props;
32
+ const theme = (0, _mantine_core.useMantineTheme)();
33
+ const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
34
+ const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
35
+ const [highlightedArea, setHighlightedArea] = (0, react.useState)(null);
36
+ const shouldHighlight = highlightedArea !== null;
37
+ const handleMouseLeave = (event) => {
38
+ setHighlightedArea(null);
39
+ onMouseLeave?.(event);
40
+ };
41
+ const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
42
+ classNames,
43
+ styles,
44
+ props
45
+ });
46
+ const getStyles = (0, _mantine_core.useStyles)({
47
+ name: "CompositeChart",
48
+ classes: require_grid_chart_module.default,
49
+ props,
50
+ className,
51
+ style,
52
+ classNames,
53
+ styles,
54
+ unstyled,
55
+ attributes,
56
+ vars,
57
+ varsResolver
58
+ });
59
+ const lines = series.map((item) => {
60
+ const color = (0, _mantine_core.getThemeColor)(item.color, theme);
61
+ const dimmed = shouldHighlight && highlightedArea !== item.name;
62
+ if (item.type === "line") return /* @__PURE__ */ (0, react.createElement)(recharts.Line, {
63
+ ...getStyles("line"),
64
+ key: item.name,
65
+ name: item.name,
66
+ dataKey: item.name,
67
+ dot: withDots ? {
68
+ fillOpacity: dimmed ? 0 : 1,
69
+ strokeOpacity: dimmed ? 0 : 1,
70
+ strokeWidth: 1,
71
+ fill: color,
72
+ stroke: color,
73
+ ...dotProps
74
+ } : false,
75
+ activeDot: withDots ? {
76
+ fill: "var(--mantine-color-white)",
77
+ stroke: color,
78
+ ...activeDotProps
79
+ } : false,
80
+ fill: color,
81
+ stroke: color,
82
+ strokeWidth,
83
+ isAnimationActive: false,
84
+ fillOpacity: dimmed ? 0 : 1,
85
+ strokeOpacity: dimmed ? .5 : 1,
86
+ connectNulls,
87
+ type: curveType,
88
+ strokeDasharray: item.strokeDasharray,
89
+ yAxisId: item.yAxisId || void 0,
90
+ label: withPointLabels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PointLabel.PointLabel, { valueFormatter }) : void 0,
91
+ ...typeof lineProps === "function" ? lineProps(item) : lineProps
92
+ });
93
+ if (item.type === "area") return /* @__PURE__ */ (0, react.createElement)(recharts.Area, {
94
+ ...getStyles("area"),
95
+ key: item.name,
96
+ name: item.name,
97
+ type: curveType,
98
+ dataKey: item.name,
99
+ fill: color,
100
+ strokeWidth,
101
+ stroke: color,
102
+ isAnimationActive: false,
103
+ connectNulls,
104
+ dot: withDots ? {
105
+ fillOpacity: dimmed ? 0 : 1,
106
+ strokeOpacity: dimmed ? 0 : 1,
107
+ strokeWidth: 1,
108
+ fill: color,
109
+ stroke: color,
110
+ ...dotProps
111
+ } : false,
112
+ activeDot: withDots ? {
113
+ fill: theme.white,
114
+ stroke: color,
115
+ strokeWidth: 2,
116
+ r: 4,
117
+ ...activeDotProps
118
+ } : false,
119
+ fillOpacity: dimmed ? 0 : .2,
120
+ strokeOpacity: dimmed ? .5 : 1,
121
+ strokeDasharray: item.strokeDasharray,
122
+ yAxisId: item.yAxisId || void 0,
123
+ label: withPointLabels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PointLabel.PointLabel, { valueFormatter }) : void 0,
124
+ ...typeof areaProps === "function" ? areaProps(item) : areaProps
125
+ });
126
+ if (item.type === "bar") return /* @__PURE__ */ (0, react.createElement)(recharts.Bar, {
127
+ ...getStyles("bar"),
128
+ key: item.name,
129
+ name: item.name,
130
+ dataKey: item.name,
131
+ fill: color,
132
+ stroke: color,
133
+ isAnimationActive: false,
134
+ fillOpacity: dimmed ? .1 : 1,
135
+ strokeOpacity: dimmed ? .2 : 0,
136
+ yAxisId: item.yAxisId || void 0,
137
+ minPointSize: minBarSize,
138
+ ...typeof barProps === "function" ? barProps(item) : barProps
139
+ }, withBarValueLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.LabelList, {
140
+ position: "top",
141
+ fontSize: 12,
142
+ fill: "var(--chart-bar-label-color, var(--mantine-color-dimmed))",
143
+ formatter: (val) => valueFormatter?.(val)
144
+ }));
145
+ return null;
146
+ });
147
+ const referenceLinesItems = referenceLines?.map((line, index) => {
148
+ const color = (0, _mantine_core.getThemeColor)(line.color, theme);
149
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
150
+ stroke: line.color ? color : "var(--chart-grid-color)",
151
+ strokeWidth: 1,
152
+ yAxisId: line.yAxisId || void 0,
153
+ ...line,
154
+ label: {
155
+ value: line.label,
156
+ fill: line.color ? color : "currentColor",
157
+ fontSize: 12,
158
+ position: line.labelPosition ?? "insideBottomLeft"
159
+ },
160
+ ...getStyles("referenceLine")
161
+ }, index);
162
+ });
163
+ const sharedYAxisProps = {
164
+ axisLine: false,
165
+ type: "number",
166
+ tickLine: withYTickLine ? { stroke: "currentColor" } : false,
167
+ allowDecimals: true,
168
+ unit,
169
+ tickFormatter: valueFormatter,
170
+ ...getStyles("axis")
171
+ };
172
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
173
+ ...getStyles("root"),
174
+ onMouseLeave: handleMouseLeave,
175
+ dir: dir || "ltr",
176
+ ...others,
177
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
178
+ ...getStyles("container"),
179
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.ComposedChart, {
180
+ data,
181
+ maxBarSize: maxBarWidth,
182
+ margin: {
183
+ bottom: xAxisLabel ? 30 : void 0,
184
+ left: yAxisLabel ? 10 : void 0,
185
+ right: yAxisLabel ? 5 : void 0
186
+ },
187
+ ...composedChartProps,
188
+ children: [
189
+ withLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
190
+ verticalAlign: "top",
191
+ content: (payload) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartLegend.ChartLegend, {
192
+ payload: payload.payload,
193
+ onHighlight: setHighlightedArea,
194
+ legendPosition: legendProps?.verticalAlign || "top",
195
+ classNames: resolvedClassNames,
196
+ styles: resolvedStyles,
197
+ series,
198
+ attributes
199
+ }),
200
+ ...legendProps
201
+ }),
202
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.XAxis, {
203
+ hide: !withXAxis,
204
+ dataKey,
205
+ tick: {
206
+ transform: "translate(0, 10)",
207
+ fontSize: 12,
208
+ fill: "currentColor"
209
+ },
210
+ stroke: "",
211
+ interval: "preserveStartEnd",
212
+ tickLine: withXTickLine ? { stroke: "currentColor" } : false,
213
+ minTickGap: 5,
214
+ ...getStyles("axis"),
215
+ ...xAxisProps,
216
+ children: [xAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
217
+ position: "insideBottom",
218
+ offset: -20,
219
+ fontSize: 12,
220
+ ...getStyles("axisLabel"),
221
+ children: xAxisLabel
222
+ }), xAxisProps?.children]
223
+ }),
224
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.YAxis, {
225
+ orientation: "left",
226
+ tick: {
227
+ transform: "translate(-10, 0)",
228
+ fontSize: 12,
229
+ fill: "currentColor"
230
+ },
231
+ hide: !withYAxis,
232
+ ...sharedYAxisProps,
233
+ ...yAxisProps,
234
+ children: [yAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
235
+ position: "insideLeft",
236
+ angle: -90,
237
+ textAnchor: "middle",
238
+ fontSize: 12,
239
+ offset: -5,
240
+ ...getStyles("axisLabel"),
241
+ children: yAxisLabel
242
+ }), yAxisProps?.children]
243
+ }),
244
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.YAxis, {
245
+ yAxisId: "right",
246
+ orientation: "right",
247
+ tick: {
248
+ transform: "translate(10, 0)",
249
+ fontSize: 12,
250
+ fill: "currentColor"
251
+ },
252
+ hide: !withRightYAxis,
253
+ ...sharedYAxisProps,
254
+ ...rightYAxisProps,
255
+ children: [rightYAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
256
+ position: "insideRight",
257
+ angle: 90,
258
+ textAnchor: "middle",
259
+ fontSize: 12,
260
+ offset: -5,
261
+ ...getStyles("axisLabel"),
262
+ children: rightYAxisLabel
263
+ }), yAxisProps?.children]
264
+ }),
265
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, {
266
+ strokeDasharray,
267
+ vertical: gridAxis === "y" || gridAxis === "xy",
268
+ horizontal: gridAxis === "x" || gridAxis === "xy",
269
+ ...getStyles("grid"),
270
+ ...gridProps
271
+ }),
272
+ withTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
273
+ animationDuration: tooltipAnimationDuration,
274
+ isAnimationActive: tooltipAnimationDuration !== 0,
275
+ position: { y: 0 },
276
+ cursor: {
277
+ stroke: "var(--chart-grid-color)",
278
+ strokeWidth: 1,
279
+ strokeDasharray
280
+ },
281
+ content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartTooltip.ChartTooltip, {
282
+ label: labelFormatter && payload ? labelFormatter(label, payload) : label,
283
+ payload,
284
+ unit,
285
+ classNames: resolvedClassNames,
286
+ styles: resolvedStyles,
287
+ series,
288
+ valueFormatter,
289
+ attributes
290
+ }),
291
+ ...tooltipProps
292
+ }),
293
+ lines,
294
+ referenceLinesItems,
295
+ children
296
+ ]
297
+ })
298
+ })
299
+ });
389
300
  });
390
301
  CompositeChart.displayName = "@mantine/charts/CompositeChart";
391
- CompositeChart.classes = gridChart_module;
302
+ CompositeChart.classes = require_grid_chart_module.default;
392
303
  CompositeChart.varsResolver = varsResolver;
393
-
304
+ //#endregion
394
305
  exports.CompositeChart = CompositeChart;
395
- //# sourceMappingURL=CompositeChart.cjs.map
306
+
307
+ //# sourceMappingURL=CompositeChart.cjs.map