@mantine/charts 9.0.0-alpha.4 → 9.0.0-alpha.6

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