@mantine/charts 7.6.2 → 7.7.1

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 (50) hide show
  1. package/cjs/AreaChart/AreaChart.cjs +26 -4
  2. package/cjs/AreaChart/AreaChart.cjs.map +1 -1
  3. package/cjs/BarChart/BarChart.cjs +24 -3
  4. package/cjs/BarChart/BarChart.cjs.map +1 -1
  5. package/cjs/ChartLegend/ChartLegend.module.css.cjs +1 -1
  6. package/cjs/ChartTooltip/ChartTooltip.cjs +6 -4
  7. package/cjs/ChartTooltip/ChartTooltip.cjs.map +1 -1
  8. package/cjs/ChartTooltip/ChartTooltip.module.css.cjs +1 -1
  9. package/cjs/DonutChart/DonutChart.module.css.cjs +1 -1
  10. package/cjs/LineChart/LineChart.cjs +112 -76
  11. package/cjs/LineChart/LineChart.cjs.map +1 -1
  12. package/cjs/PieChart/PieChart.module.css.cjs +1 -1
  13. package/cjs/RadarChart/RadarChart.module.css.cjs +1 -1
  14. package/cjs/ScatterChart/ScatterChart.cjs +279 -0
  15. package/cjs/ScatterChart/ScatterChart.cjs.map +1 -0
  16. package/cjs/Sparkline/Sparkline.cjs +6 -2
  17. package/cjs/Sparkline/Sparkline.cjs.map +1 -1
  18. package/cjs/grid-chart.module.css.cjs +1 -1
  19. package/cjs/index.cjs +2 -0
  20. package/cjs/index.cjs.map +1 -1
  21. package/esm/AreaChart/AreaChart.mjs +27 -5
  22. package/esm/AreaChart/AreaChart.mjs.map +1 -1
  23. package/esm/BarChart/BarChart.mjs +25 -4
  24. package/esm/BarChart/BarChart.mjs.map +1 -1
  25. package/esm/ChartLegend/ChartLegend.module.css.mjs +1 -1
  26. package/esm/ChartTooltip/ChartTooltip.mjs +6 -4
  27. package/esm/ChartTooltip/ChartTooltip.mjs.map +1 -1
  28. package/esm/ChartTooltip/ChartTooltip.module.css.mjs +1 -1
  29. package/esm/DonutChart/DonutChart.module.css.mjs +1 -1
  30. package/esm/LineChart/LineChart.mjs +113 -77
  31. package/esm/LineChart/LineChart.mjs.map +1 -1
  32. package/esm/PieChart/PieChart.module.css.mjs +1 -1
  33. package/esm/RadarChart/RadarChart.module.css.mjs +1 -1
  34. package/esm/ScatterChart/ScatterChart.mjs +273 -0
  35. package/esm/ScatterChart/ScatterChart.mjs.map +1 -0
  36. package/esm/Sparkline/Sparkline.mjs +6 -2
  37. package/esm/Sparkline/Sparkline.mjs.map +1 -1
  38. package/esm/grid-chart.module.css.mjs +1 -1
  39. package/esm/index.mjs +1 -0
  40. package/esm/index.mjs.map +1 -1
  41. package/lib/ChartTooltip/ChartTooltip.d.ts +1 -1
  42. package/lib/ScatterChart/ScatterChart.d.ts +55 -0
  43. package/lib/ScatterChart/index.d.ts +2 -0
  44. package/lib/Sparkline/Sparkline.d.ts +5 -0
  45. package/lib/index.d.mts +1 -0
  46. package/lib/index.d.ts +1 -0
  47. package/lib/types.d.ts +7 -3
  48. package/package.json +5 -5
  49. package/styles.css +45 -37
  50. package/styles.layer.css +45 -37
package/styles.layer.css CHANGED
@@ -1,61 +1,65 @@
1
- @layer mantine {.m-e4d36c9b {
1
+ @layer mantine {.m_e4d36c9b {
2
2
  min-width: calc(12.5rem * var(--mantine-scale));
3
3
  background-color: var(--mantine-color-body);
4
4
  box-shadow: var(--mantine-shadow-md);
5
5
  border-radius: var(--mantine-radius-default);
6
6
  }
7
7
 
8
- :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
8
+ :where([data-mantine-color-scheme='light']) .m_e4d36c9b {
9
9
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
10
10
  }
11
11
 
12
- :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
12
+ :where([data-mantine-color-scheme='dark']) .m_e4d36c9b {
13
13
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
14
14
  }
15
15
 
16
- .m-7f4bcb19 {
16
+ .m_7f4bcb19 {
17
17
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
18
18
  font-size: var(--mantine-font-size-md);
19
19
  font-weight: 500;
20
20
  color: var(--mantine-color-bright);
21
21
  }
22
22
 
23
- .m-3de554dd {
23
+ .m_3de554dd {
24
24
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
25
25
  padding-top: 0;
26
26
  }
27
27
 
28
- .m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
28
+ .m_e4d36c9b:where([data-type='radial']) :where(.m_3de554dd) {
29
29
  padding-top: var(--mantine-spacing-sm);
30
30
  }
31
31
 
32
- .m-3de8964e {
32
+ .m_3de8964e {
33
33
  font-size: var(--mantine-font-size-sm);
34
34
  display: flex;
35
35
  justify-content: space-between;
36
36
  }
37
37
 
38
- .m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
38
+ .m_3de8964e:where(.m_3de8964e + .m_3de8964e) {
39
39
  margin-top: calc(var(--mantine-spacing-sm) / 2);
40
40
  }
41
41
 
42
- .m-50186d10 {
42
+ .m_3de8964e[data-type='scatter'] .m_b30369b5 {
43
+ display: none;
44
+ }
45
+
46
+ .m_50186d10 {
43
47
  display: flex;
44
48
  align-items: center;
45
49
  gap: var(--mantine-spacing-sm);
46
50
  margin-inline-end: var(--mantine-spacing-xl);
47
51
  }
48
52
 
49
- .m-501dadf9 {
53
+ .m_501dadf9 {
50
54
  color: var(--mantine-color-text);
51
55
  font-size: var(--mantine-font-size-sm);
52
56
  }
53
57
 
54
- .m-50192318 {
58
+ .m_50192318 {
55
59
  color: var(--mantine-color-bright);
56
60
  }
57
61
 
58
- .m-847eaf {
62
+ .m_847eaf {
59
63
  display: flex;
60
64
  flex-wrap: wrap;
61
65
  align-items: center;
@@ -63,15 +67,15 @@
63
67
  height: 100%;
64
68
  }
65
69
 
66
- .m-847eaf:where([data-position='top']) {
70
+ .m_847eaf:where([data-position='top']) {
67
71
  padding-bottom: var(--mantine-spacing-md);
68
72
  }
69
73
 
70
- .m-847eaf:where([data-position='bottom']) {
74
+ .m_847eaf:where([data-position='bottom']) {
71
75
  padding-top: var(--mantine-spacing-md);
72
76
  }
73
77
 
74
- .m-17da7e62 {
78
+ .m_17da7e62 {
75
79
  display: flex;
76
80
  align-items: center;
77
81
  gap: calc(0.4375rem * var(--mantine-scale));
@@ -81,112 +85,116 @@
81
85
  }
82
86
 
83
87
  @media (hover: hover) {
84
- :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
88
+ :where([data-mantine-color-scheme='light']) .m_17da7e62:where(:hover) {
85
89
  background-color: var(--mantine-color-gray-0);
86
90
  }
87
91
 
88
- :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
92
+ :where([data-mantine-color-scheme='dark']) .m_17da7e62:where(:hover) {
89
93
  background-color: var(--mantine-color-dark-5);
90
94
  }
91
95
  }
92
96
 
93
97
  @media (hover: none) {
94
- :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
98
+ :where([data-mantine-color-scheme='light']) .m_17da7e62:where(:active) {
95
99
  background-color: var(--mantine-color-gray-0);
96
100
  }
97
101
 
98
- :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
102
+ :where([data-mantine-color-scheme='dark']) .m_17da7e62:where(:active) {
99
103
  background-color: var(--mantine-color-dark-5);
100
104
  }
101
105
  }
102
106
 
103
- .m-8ff56c0d {
107
+ .m_8ff56c0d {
104
108
  font-size: var(--mantine-font-size-sm);
105
109
  margin: 0;
106
110
  padding: 0;
107
111
  }
108
112
 
109
- .m-a50f3e58 {
113
+ .m_a50f3e58 {
110
114
  display: block;
111
115
  width: 100%;
112
116
  }
113
117
 
114
- :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
118
+ :where([data-mantine-color-scheme='light']) .m_a50f3e58 {
115
119
  --chart-grid-color: rgba(173, 181, 189, 0.6);
116
120
  --chart-cursor-fill: rgba(173, 181, 189, 0.15);
117
121
  }
118
122
 
119
- :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
123
+ :where([data-mantine-color-scheme='dark']) .m_a50f3e58 {
120
124
  --chart-cursor-fill: rgba(105, 105, 105, 0.15);
121
125
  --chart-grid-color: rgba(105, 105, 105, 0.6);
122
126
  }
123
127
 
124
- .m-a50f3e58 :where(text) {
128
+ .m_a50f3e58 :where(text) {
125
129
  font-family: var(--mantine-font-family);
126
130
  color: var(--chart-text-color, var(--mantine-color-dimmed));
127
131
  }
128
132
 
129
- .m-af9188cb {
133
+ .m_af9188cb {
130
134
  height: 100%;
131
135
  width: 100%;
132
136
  }
133
137
 
134
- .m-a50a48bc {
138
+ .m_a50a48bc {
135
139
  stroke: var(--chart-grid-color);
136
140
  }
137
141
 
138
- .m-a507a517 {
142
+ .m_a507a517 {
139
143
  color: var(--chart-grid-color);
140
144
  }
141
145
 
142
- .m-a410e613 {
146
+ .m_2293801d {
147
+ color: var(--chart-text-color, var(--mantine-color-dimmed));
148
+ }
149
+
150
+ .m_a410e613 {
143
151
  min-height: var(--chart-size, auto);
144
152
  height: var(--chart-size, auto);
145
153
  width: var(--chart-size, auto);
146
154
  min-width: var(--chart-size, auto);
147
155
  }
148
156
 
149
- .m-a410e613 :where(*) {
157
+ .m_a410e613 :where(*) {
150
158
  outline: 0;
151
159
  }
152
160
 
153
- .m-ddb0bfe3 {
161
+ .m_ddb0bfe3 {
154
162
  fill: var(--mantine-color-text);
155
163
  font-size: var(--mantine-font-size-sm);
156
164
  }
157
165
 
158
- .m-cd8943fd {
166
+ .m_cd8943fd {
159
167
  min-height: var(--chart-size, auto);
160
168
  height: var(--chart-size, auto);
161
169
  width: var(--chart-size, auto);
162
170
  min-width: var(--chart-size, auto);
163
171
  }
164
172
 
165
- .m-cd8943fd :where(*) {
173
+ .m_cd8943fd :where(*) {
166
174
  outline: 0;
167
175
  }
168
176
 
169
- .m-e3441f39 {
177
+ .m_e3441f39 {
170
178
  fill: var(--mantine-color-white);
171
179
  font-size: var(--mantine-font-size-xs);
172
180
  }
173
181
 
174
- :where([data-mantine-color-scheme='light']) .m-1f271cf7 {
182
+ :where([data-mantine-color-scheme='light']) .m_1f271cf7 {
175
183
  --chart-grid-color: rgba(173, 181, 189, 0.6);
176
184
  --chart-text-color: var(--mantine-color-gray-7);
177
185
  }
178
- :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
186
+ :where([data-mantine-color-scheme='dark']) .m_1f271cf7 {
179
187
  --chart-grid-color: rgba(105, 105, 105, 0.6);
180
188
  --chart-text-color: var(--mantine-color-dark-1);
181
189
  }
182
190
 
183
- .m-1f271cf7 :where(text) {
191
+ .m_1f271cf7 :where(text) {
184
192
  font-size: var(--mantine-font-size-xs);
185
193
  fill: var(--chart-text-color, var(--mantine-color-dimmed));
186
194
  user-select: none;
187
195
  }
188
196
 
189
- .m-cf06f58c {
197
+ .m_cf06f58c {
190
198
  height: 100%;
191
199
  width: 100%;
192
200
  }