@mantine/charts 7.4.2 → 7.5.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.
- package/cjs/AreaChart/AreaChart.cjs +7 -3
- package/cjs/AreaChart/AreaChart.cjs.map +1 -1
- package/cjs/BarChart/BarChart.cjs +7 -3
- package/cjs/BarChart/BarChart.cjs.map +1 -1
- package/cjs/ChartLegend/ChartLegend.cjs +6 -2
- package/cjs/ChartLegend/ChartLegend.cjs.map +1 -1
- package/cjs/ChartTooltip/ChartTooltip.cjs +39 -8
- package/cjs/ChartTooltip/ChartTooltip.cjs.map +1 -1
- package/cjs/DonutChart/DonutChart.cjs +143 -0
- package/cjs/DonutChart/DonutChart.cjs.map +1 -0
- package/cjs/DonutChart/DonutChart.module.css.cjs +7 -0
- package/cjs/DonutChart/DonutChart.module.css.cjs.map +1 -0
- package/cjs/LineChart/LineChart.cjs +7 -2
- package/cjs/LineChart/LineChart.cjs.map +1 -1
- package/cjs/PieChart/PieChart.cjs +149 -0
- package/cjs/PieChart/PieChart.cjs.map +1 -0
- package/cjs/PieChart/PieChart.module.css.cjs +7 -0
- package/cjs/PieChart/PieChart.module.css.cjs.map +1 -0
- package/cjs/index.cjs +4 -0
- package/cjs/index.cjs.map +1 -1
- package/cjs/utils/get-series-labels/get-series-labels.cjs +15 -0
- package/cjs/utils/get-series-labels/get-series-labels.cjs.map +1 -0
- package/esm/AreaChart/AreaChart.mjs +7 -3
- package/esm/AreaChart/AreaChart.mjs.map +1 -1
- package/esm/BarChart/BarChart.mjs +7 -3
- package/esm/BarChart/BarChart.mjs.map +1 -1
- package/esm/ChartLegend/ChartLegend.mjs +6 -2
- package/esm/ChartLegend/ChartLegend.mjs.map +1 -1
- package/esm/ChartTooltip/ChartTooltip.mjs +40 -9
- package/esm/ChartTooltip/ChartTooltip.mjs.map +1 -1
- package/esm/DonutChart/DonutChart.mjs +141 -0
- package/esm/DonutChart/DonutChart.mjs.map +1 -0
- package/esm/DonutChart/DonutChart.module.css.mjs +5 -0
- package/esm/DonutChart/DonutChart.module.css.mjs.map +1 -0
- package/esm/LineChart/LineChart.mjs +7 -2
- package/esm/LineChart/LineChart.mjs.map +1 -1
- package/esm/PieChart/PieChart.mjs +147 -0
- package/esm/PieChart/PieChart.mjs.map +1 -0
- package/esm/PieChart/PieChart.module.css.mjs +5 -0
- package/esm/PieChart/PieChart.module.css.mjs.map +1 -0
- package/esm/index.mjs +2 -0
- package/esm/index.mjs.map +1 -1
- package/esm/utils/get-series-labels/get-series-labels.mjs +13 -0
- package/esm/utils/get-series-labels/get-series-labels.mjs.map +1 -0
- package/lib/ChartLegend/ChartLegend.d.ts +6 -0
- package/lib/ChartTooltip/ChartTooltip.d.ts +10 -1
- package/lib/DonutChart/DonutChart.d.ts +66 -0
- package/lib/DonutChart/index.d.ts +2 -0
- package/lib/PieChart/PieChart.d.ts +64 -0
- package/lib/PieChart/index.d.ts +2 -0
- package/lib/index.d.mts +2 -0
- package/lib/index.d.ts +2 -0
- package/lib/types.d.ts +3 -0
- package/lib/utils/get-series-labels/get-series-labels.d.ts +4 -0
- package/lib/utils/index.d.ts +1 -0
- package/package.json +5 -5
- package/styles.css +1 -1
- package/styles.layer.css +1 -1
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Cell, ResponsiveContainer, PieChart as PieChart$1, Pie, Tooltip } from 'recharts';
|
|
4
|
+
import { createVarsResolver, getThemeColor, rem, factory, useProps, useMantineTheme, useStyles, useResolvedStylesApi, Box } from '@mantine/core';
|
|
5
|
+
import { ChartTooltip } from '../ChartTooltip/ChartTooltip.mjs';
|
|
6
|
+
import classes from './PieChart.module.css.mjs';
|
|
7
|
+
|
|
8
|
+
const defaultProps = {
|
|
9
|
+
withTooltip: false,
|
|
10
|
+
withLabelsLine: true,
|
|
11
|
+
paddingAngle: 0,
|
|
12
|
+
size: 160,
|
|
13
|
+
strokeWidth: 1,
|
|
14
|
+
startAngle: 0,
|
|
15
|
+
endAngle: 360,
|
|
16
|
+
tooltipDataSource: "all",
|
|
17
|
+
labelsPosition: "outside"
|
|
18
|
+
};
|
|
19
|
+
const varsResolver = createVarsResolver(
|
|
20
|
+
(theme, { strokeColor, labelColor, withLabels, size, labelsPosition }) => ({
|
|
21
|
+
root: {
|
|
22
|
+
"--chart-stroke-color": strokeColor ? getThemeColor(strokeColor, theme) : void 0,
|
|
23
|
+
"--chart-labels-color": labelColor ? getThemeColor(labelColor, theme) : void 0,
|
|
24
|
+
"--chart-size": withLabels && labelsPosition === "outside" ? rem(size + 80) : rem(size)
|
|
25
|
+
}
|
|
26
|
+
})
|
|
27
|
+
);
|
|
28
|
+
const insideLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
|
|
29
|
+
const RADIAN = Math.PI / 180;
|
|
30
|
+
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
31
|
+
const x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
32
|
+
const y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
33
|
+
return /* @__PURE__ */ React.createElement(
|
|
34
|
+
"text",
|
|
35
|
+
{
|
|
36
|
+
x,
|
|
37
|
+
y,
|
|
38
|
+
textAnchor: x > cx ? "start" : "end",
|
|
39
|
+
dominantBaseline: "central",
|
|
40
|
+
className: classes.label
|
|
41
|
+
},
|
|
42
|
+
value
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
const PieChart = factory((_props, ref) => {
|
|
46
|
+
const props = useProps("PieChart", defaultProps, _props);
|
|
47
|
+
const {
|
|
48
|
+
classNames,
|
|
49
|
+
className,
|
|
50
|
+
style,
|
|
51
|
+
styles,
|
|
52
|
+
unstyled,
|
|
53
|
+
vars,
|
|
54
|
+
data,
|
|
55
|
+
withTooltip,
|
|
56
|
+
tooltipAnimationDuration,
|
|
57
|
+
tooltipProps,
|
|
58
|
+
pieProps,
|
|
59
|
+
paddingAngle,
|
|
60
|
+
withLabels,
|
|
61
|
+
withLabelsLine,
|
|
62
|
+
size,
|
|
63
|
+
strokeWidth,
|
|
64
|
+
startAngle,
|
|
65
|
+
endAngle,
|
|
66
|
+
tooltipDataSource,
|
|
67
|
+
children,
|
|
68
|
+
pieChartProps,
|
|
69
|
+
labelsPosition,
|
|
70
|
+
valueFormatter,
|
|
71
|
+
...others
|
|
72
|
+
} = props;
|
|
73
|
+
const theme = useMantineTheme();
|
|
74
|
+
const getStyles = useStyles({
|
|
75
|
+
name: "PieChart",
|
|
76
|
+
classes,
|
|
77
|
+
props,
|
|
78
|
+
className,
|
|
79
|
+
style,
|
|
80
|
+
classNames,
|
|
81
|
+
styles,
|
|
82
|
+
unstyled,
|
|
83
|
+
vars,
|
|
84
|
+
varsResolver
|
|
85
|
+
});
|
|
86
|
+
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
|
|
87
|
+
classNames,
|
|
88
|
+
styles,
|
|
89
|
+
props
|
|
90
|
+
});
|
|
91
|
+
const cells = data.map((item, index) => /* @__PURE__ */ React.createElement(
|
|
92
|
+
Cell,
|
|
93
|
+
{
|
|
94
|
+
key: index,
|
|
95
|
+
fill: getThemeColor(item.color, theme),
|
|
96
|
+
stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
|
|
97
|
+
strokeWidth
|
|
98
|
+
}
|
|
99
|
+
));
|
|
100
|
+
return /* @__PURE__ */ React.createElement(Box, { ref, size, ...getStyles("root"), ...others }, /* @__PURE__ */ React.createElement(ResponsiveContainer, null, /* @__PURE__ */ React.createElement(PieChart$1, { ...pieChartProps }, /* @__PURE__ */ React.createElement(
|
|
101
|
+
Pie,
|
|
102
|
+
{
|
|
103
|
+
data,
|
|
104
|
+
innerRadius: 0,
|
|
105
|
+
outerRadius: size / 2,
|
|
106
|
+
dataKey: "value",
|
|
107
|
+
isAnimationActive: false,
|
|
108
|
+
paddingAngle,
|
|
109
|
+
startAngle,
|
|
110
|
+
endAngle,
|
|
111
|
+
label: withLabels ? labelsPosition === "inside" ? insideLabel : {
|
|
112
|
+
fill: "var(--chart-labels-color, var(--mantine-color-dimmed))",
|
|
113
|
+
fontSize: 12,
|
|
114
|
+
fontFamily: "var(--mantine-font-family)"
|
|
115
|
+
} : false,
|
|
116
|
+
labelLine: withLabelsLine && labelsPosition === "outside" ? {
|
|
117
|
+
stroke: "var(--chart-label-color, var(--mantine-color-dimmed))",
|
|
118
|
+
strokeWidth: 1
|
|
119
|
+
} : false,
|
|
120
|
+
...pieProps
|
|
121
|
+
},
|
|
122
|
+
cells
|
|
123
|
+
), withTooltip && /* @__PURE__ */ React.createElement(
|
|
124
|
+
Tooltip,
|
|
125
|
+
{
|
|
126
|
+
animationDuration: tooltipAnimationDuration,
|
|
127
|
+
isAnimationActive: false,
|
|
128
|
+
content: ({ payload }) => /* @__PURE__ */ React.createElement(
|
|
129
|
+
ChartTooltip,
|
|
130
|
+
{
|
|
131
|
+
payload: data,
|
|
132
|
+
classNames: resolvedClassNames,
|
|
133
|
+
styles: resolvedStyles,
|
|
134
|
+
type: "radial",
|
|
135
|
+
segmentId: tooltipDataSource === "segment" ? payload?.[0]?.name : void 0,
|
|
136
|
+
valueFormatter
|
|
137
|
+
}
|
|
138
|
+
),
|
|
139
|
+
...tooltipProps
|
|
140
|
+
}
|
|
141
|
+
), children)));
|
|
142
|
+
});
|
|
143
|
+
PieChart.displayName = "@mantine/charts/PieChart";
|
|
144
|
+
PieChart.classes = classes;
|
|
145
|
+
|
|
146
|
+
export { PieChart };
|
|
147
|
+
//# sourceMappingURL=PieChart.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PieChart.mjs","sources":["../../src/PieChart/PieChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Cell,\n Pie,\n PieLabel,\n PieProps,\n PieChart as ReChartsPieChart,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartTooltip } from '../ChartTooltip/ChartTooltip';\nimport classes from './PieChart.module.css';\n\nexport interface PieChartCell {\n name: string;\n value: number;\n color: MantineColor;\n}\n\nexport type PieChartStylesNames = 'root';\nexport type PieChartCssVariables = {\n root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface PieChartProps\n extends BoxProps,\n StylesApiProps<PieChartFactory>,\n ElementProps<'div'> {\n /** Data used to render chart */\n data: PieChartCell[];\n\n /** Determines whether the tooltip should be displayed when one of the section is hovered, `true` by default */\n withTooltip?: boolean;\n\n /** Tooltip animation duration in ms, `0` by default */\n tooltipAnimationDuration?: number;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /** Props passed down to recharts `Pie` component */\n pieProps?: Omit<PieProps, 'ref'>;\n\n /** Controls color of the segments stroke, by default depends on color scheme */\n strokeColor?: MantineColor;\n\n /** Controls text color of all labels, white by default */\n labelColor?: MantineColor;\n\n /** Controls padding between segments, `0` by default */\n paddingAngle?: number;\n\n /** Determines whether each segment should have associated label, `false` by default */\n withLabels?: boolean;\n\n /** Determines whether segments labels should have lines that connect the segment with the label, `true` by default */\n withLabelsLine?: boolean;\n\n /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. `80` by default */\n size?: number;\n\n /** Controls width of segments stroke, `1` by default */\n strokeWidth?: number;\n\n /** Controls angle at which chart starts, `0` by default. Set to `180` to render the chart as semicircle. */\n startAngle?: number;\n\n /** Controls angle at which charts ends, `360` by default. Set to `0` to render the chart as semicircle. */\n endAngle?: number;\n\n /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. `'all'` by default. */\n tooltipDataSource?: 'segment' | 'all';\n\n /** Additional elements rendered inside `PieChart` component */\n children?: React.ReactNode;\n\n /** Props passed down to recharts `PieChart` component */\n pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;\n\n /** Controls labels position relative to the segment, `'outside'` by default */\n labelsPosition?: 'inside' | 'outside';\n\n /** A function to format values inside the tooltip */\n valueFormatter?: (value: number) => string;\n}\n\nexport type PieChartFactory = Factory<{\n props: PieChartProps;\n ref: HTMLDivElement;\n stylesNames: PieChartStylesNames;\n vars: PieChartCssVariables;\n}>;\n\nconst defaultProps: Partial<PieChartProps> = {\n withTooltip: false,\n withLabelsLine: true,\n paddingAngle: 0,\n size: 160,\n strokeWidth: 1,\n startAngle: 0,\n endAngle: 360,\n tooltipDataSource: 'all',\n labelsPosition: 'outside',\n};\n\nconst varsResolver = createVarsResolver<PieChartFactory>(\n (theme, { strokeColor, labelColor, withLabels, size, labelsPosition }) => ({\n root: {\n '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n '--chart-size': withLabels && labelsPosition === 'outside' ? rem(size! + 80) : rem(size!),\n },\n })\n);\n\nconst insideLabel: PieLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {\n const RADIAN = Math.PI / 180;\n const radius = innerRadius + (outerRadius - innerRadius) * 0.5;\n const x = cx + radius * Math.cos(-midAngle * RADIAN);\n const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n return (\n <text\n x={x}\n y={y}\n textAnchor={x > cx ? 'start' : 'end'}\n dominantBaseline=\"central\"\n className={classes.label}\n >\n {value}\n </text>\n );\n};\n\nexport const PieChart = factory<PieChartFactory>((_props, ref) => {\n const props = useProps('PieChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n pieProps,\n paddingAngle,\n withLabels,\n withLabelsLine,\n size,\n strokeWidth,\n startAngle,\n endAngle,\n tooltipDataSource,\n children,\n pieChartProps,\n labelsPosition,\n valueFormatter,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const getStyles = useStyles<PieChartFactory>({\n name: 'PieChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PieChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const cells = data.map((item, index) => (\n <Cell\n key={index}\n fill={getThemeColor(item.color, theme)}\n stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n strokeWidth={strokeWidth}\n />\n ));\n\n return (\n <Box ref={ref} size={size} {...getStyles('root')} {...others}>\n <ResponsiveContainer>\n <ReChartsPieChart {...pieChartProps}>\n <Pie\n data={data}\n innerRadius={0}\n outerRadius={size! / 2}\n dataKey=\"value\"\n isAnimationActive={false}\n paddingAngle={paddingAngle}\n startAngle={startAngle}\n endAngle={endAngle}\n label={\n withLabels\n ? labelsPosition === 'inside'\n ? insideLabel\n : {\n fill: 'var(--chart-labels-color, var(--mantine-color-dimmed))',\n fontSize: 12,\n fontFamily: 'var(--mantine-font-family)',\n }\n : false\n }\n labelLine={\n withLabelsLine && labelsPosition === 'outside'\n ? {\n stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n strokeWidth: 1,\n }\n : false\n }\n {...pieProps}\n >\n {cells}\n </Pie>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => (\n <ChartTooltip\n payload={data}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n segmentId={tooltipDataSource === 'segment' ? payload?.[0]?.name : undefined}\n valueFormatter={valueFormatter}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {children}\n </ReChartsPieChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nPieChart.displayName = '@mantine/charts/PieChart';\nPieChart.classes = classes;\n"],"names":["ReChartsPieChart"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PieChart.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/esm/index.mjs
CHANGED
|
@@ -6,4 +6,6 @@ export { AreaGradient } from './AreaChart/AreaGradient.mjs';
|
|
|
6
6
|
export { BarChart } from './BarChart/BarChart.mjs';
|
|
7
7
|
export { LineChart } from './LineChart/LineChart.mjs';
|
|
8
8
|
export { Sparkline } from './Sparkline/Sparkline.mjs';
|
|
9
|
+
export { DonutChart } from './DonutChart/DonutChart.mjs';
|
|
10
|
+
export { PieChart } from './PieChart/PieChart.mjs';
|
|
9
11
|
//# sourceMappingURL=index.mjs.map
|
package/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
function getSeriesLabels(series) {
|
|
3
|
+
if (!series) {
|
|
4
|
+
return {};
|
|
5
|
+
}
|
|
6
|
+
return series.reduce((acc, item) => {
|
|
7
|
+
acc[item.name] = item.label;
|
|
8
|
+
return acc;
|
|
9
|
+
}, {});
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { getSeriesLabels };
|
|
13
|
+
//# sourceMappingURL=get-series-labels.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-series-labels.mjs","sources":["../../../src/utils/get-series-labels/get-series-labels.ts"],"sourcesContent":["import { ChartSeries } from '../../types';\n\ntype ChartSeriesLabels = Record<string, string | undefined>;\n\nexport function getSeriesLabels(series: ChartSeries[] | undefined): ChartSeriesLabels {\n if (!series) {\n return {};\n }\n\n return series.reduce<ChartSeriesLabels>((acc, item) => {\n acc[item.name] = item.label;\n return acc;\n }, {});\n}\n"],"names":[],"mappings":";AACO,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAe,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAE,CAAA,CAAA;AACxC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAE,CAAA,CAAA;AACf,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAAC;AACd,CAAG,CAAA,CAAA;AACH,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,MAAM,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAC,CAAA,CAAA,CAAG,CAAE,CAAA,CAAA,CAAA,CAAA,CAAI,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AACtC,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAG,CAAC,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAI,CAAC,CAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC;AAChC,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,GAAG,CAAC;AACf,CAAG,CAAA,CAAA,CAAA,CAAE,CAAE,CAAA,CAAC,CAAC;AACT,CAAA;;"}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
|
|
2
|
+
import { ChartSeries } from '../types';
|
|
2
3
|
export declare function getFilteredChartLegendPayload(payload: Record<string, any>[]): Record<string, any>[];
|
|
3
4
|
export type ChartLegendStylesNames = 'legendItem' | 'legendItemColor' | 'legendItemName' | 'legend';
|
|
4
5
|
export interface ChartLegendProps extends BoxProps, StylesApiProps<ChartLegendFactory>, ElementProps<'div'> {
|
|
6
|
+
/** Chart data provided by recharts */
|
|
5
7
|
payload: Record<string, any>[] | undefined;
|
|
8
|
+
/** Function called when mouse enters/leaves one of the legend items */
|
|
6
9
|
onHighlight: (area: string | null) => void;
|
|
10
|
+
/** Position of the legend relative to the chart, used to apply margin on the corresponding side */
|
|
7
11
|
legendPosition: 'top' | 'bottom' | 'middle';
|
|
12
|
+
/** Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart */
|
|
13
|
+
series?: ChartSeries[];
|
|
8
14
|
}
|
|
9
15
|
export type ChartLegendFactory = Factory<{
|
|
10
16
|
props: ChartLegendProps;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
|
|
3
|
-
|
|
3
|
+
import { ChartSeries } from '../types';
|
|
4
|
+
export declare function getFilteredChartTooltipPayload(payload: Record<string, any>[], segmentId?: string): Record<string, any>[];
|
|
4
5
|
export type ChartTooltipStylesNames = 'tooltip' | 'tooltipItem' | 'tooltipItemBody' | 'tooltipItemColor' | 'tooltipItemName' | 'tooltipItemData' | 'tooltipLabel' | 'tooltipBody';
|
|
5
6
|
export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltipFactory>, ElementProps<'div'> {
|
|
6
7
|
/** Main tooltip label */
|
|
@@ -9,6 +10,14 @@ export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltip
|
|
|
9
10
|
payload: Record<string, any>[] | undefined;
|
|
10
11
|
/** Data units, provided by parent component */
|
|
11
12
|
unit?: string;
|
|
13
|
+
/** Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart, `'area'` by default */
|
|
14
|
+
type?: 'area' | 'radial';
|
|
15
|
+
/** Id of the segment to display data for. Only applicable when `type="radial"`. If not set, all data is rendered. */
|
|
16
|
+
segmentId?: string;
|
|
17
|
+
/** Chart series data, applicable only for `area` type */
|
|
18
|
+
series?: ChartSeries[];
|
|
19
|
+
/** A function to format values */
|
|
20
|
+
valueFormatter?: (value: number) => string;
|
|
12
21
|
}
|
|
13
22
|
export type ChartTooltipFactory = Factory<{
|
|
14
23
|
props: ChartTooltipProps;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
|
|
3
|
+
import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
|
|
4
|
+
export interface DonutChartCell {
|
|
5
|
+
name: string;
|
|
6
|
+
value: number;
|
|
7
|
+
color: MantineColor;
|
|
8
|
+
}
|
|
9
|
+
export type DonutChartStylesNames = 'root' | 'label';
|
|
10
|
+
export type DonutChartCssVariables = {
|
|
11
|
+
root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
|
|
12
|
+
};
|
|
13
|
+
export interface DonutChartProps extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {
|
|
14
|
+
/** Data used to render chart */
|
|
15
|
+
data: DonutChartCell[];
|
|
16
|
+
/** Determines whether the tooltip should be displayed when one of the section is hovered, `true` by default */
|
|
17
|
+
withTooltip?: boolean;
|
|
18
|
+
/** Tooltip animation duration in ms, `0` by default */
|
|
19
|
+
tooltipAnimationDuration?: number;
|
|
20
|
+
/** Props passed down to `Tooltip` recharts component */
|
|
21
|
+
tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
|
|
22
|
+
/** Props passed down to recharts `Pie` component */
|
|
23
|
+
pieProps?: Omit<PieProps, 'ref'>;
|
|
24
|
+
/** Controls color of the segments stroke, by default depends on color scheme */
|
|
25
|
+
strokeColor?: MantineColor;
|
|
26
|
+
/** Controls text color of all labels, by default depends on color scheme */
|
|
27
|
+
labelColor?: MantineColor;
|
|
28
|
+
/** Controls padding between segments, `0` by default */
|
|
29
|
+
paddingAngle?: number;
|
|
30
|
+
/** Determines whether each segment should have associated label, `false` by default */
|
|
31
|
+
withLabels?: boolean;
|
|
32
|
+
/** Determines whether segments labels should have lines that connect the segment with the label, `true` by default */
|
|
33
|
+
withLabelsLine?: boolean;
|
|
34
|
+
/** Controls thickness of the chart segments, `20` by default */
|
|
35
|
+
thickness?: number;
|
|
36
|
+
/** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. `80` by default */
|
|
37
|
+
size?: number;
|
|
38
|
+
/** Controls width of segments stroke, `1` by default */
|
|
39
|
+
strokeWidth?: number;
|
|
40
|
+
/** Controls angle at which chart starts, `0` by default. Set to `180` to render the chart as semicircle. */
|
|
41
|
+
startAngle?: number;
|
|
42
|
+
/** Controls angle at which charts ends, `360` by default. Set to `0` to render the chart as semicircle. */
|
|
43
|
+
endAngle?: number;
|
|
44
|
+
/** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. `'all'` by default. */
|
|
45
|
+
tooltipDataSource?: 'segment' | 'all';
|
|
46
|
+
/** Chart label, displayed in the center of the chart */
|
|
47
|
+
chartLabel?: string | number;
|
|
48
|
+
/** Additional elements rendered inside `PieChart` component */
|
|
49
|
+
children?: React.ReactNode;
|
|
50
|
+
/** Props passed down to recharts `PieChart` component */
|
|
51
|
+
pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
|
|
52
|
+
/** A function to format values inside the tooltip */
|
|
53
|
+
valueFormatter?: (value: number) => string;
|
|
54
|
+
}
|
|
55
|
+
export type DonutChartFactory = Factory<{
|
|
56
|
+
props: DonutChartProps;
|
|
57
|
+
ref: HTMLDivElement;
|
|
58
|
+
stylesNames: DonutChartStylesNames;
|
|
59
|
+
vars: DonutChartCssVariables;
|
|
60
|
+
}>;
|
|
61
|
+
export declare const DonutChart: import("@mantine/core").MantineComponent<{
|
|
62
|
+
props: DonutChartProps;
|
|
63
|
+
ref: HTMLDivElement;
|
|
64
|
+
stylesNames: DonutChartStylesNames;
|
|
65
|
+
vars: DonutChartCssVariables;
|
|
66
|
+
}>;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
|
|
3
|
+
import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
|
|
4
|
+
export interface PieChartCell {
|
|
5
|
+
name: string;
|
|
6
|
+
value: number;
|
|
7
|
+
color: MantineColor;
|
|
8
|
+
}
|
|
9
|
+
export type PieChartStylesNames = 'root';
|
|
10
|
+
export type PieChartCssVariables = {
|
|
11
|
+
root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
|
|
12
|
+
};
|
|
13
|
+
export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>, ElementProps<'div'> {
|
|
14
|
+
/** Data used to render chart */
|
|
15
|
+
data: PieChartCell[];
|
|
16
|
+
/** Determines whether the tooltip should be displayed when one of the section is hovered, `true` by default */
|
|
17
|
+
withTooltip?: boolean;
|
|
18
|
+
/** Tooltip animation duration in ms, `0` by default */
|
|
19
|
+
tooltipAnimationDuration?: number;
|
|
20
|
+
/** Props passed down to `Tooltip` recharts component */
|
|
21
|
+
tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
|
|
22
|
+
/** Props passed down to recharts `Pie` component */
|
|
23
|
+
pieProps?: Omit<PieProps, 'ref'>;
|
|
24
|
+
/** Controls color of the segments stroke, by default depends on color scheme */
|
|
25
|
+
strokeColor?: MantineColor;
|
|
26
|
+
/** Controls text color of all labels, white by default */
|
|
27
|
+
labelColor?: MantineColor;
|
|
28
|
+
/** Controls padding between segments, `0` by default */
|
|
29
|
+
paddingAngle?: number;
|
|
30
|
+
/** Determines whether each segment should have associated label, `false` by default */
|
|
31
|
+
withLabels?: boolean;
|
|
32
|
+
/** Determines whether segments labels should have lines that connect the segment with the label, `true` by default */
|
|
33
|
+
withLabelsLine?: boolean;
|
|
34
|
+
/** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. `80` by default */
|
|
35
|
+
size?: number;
|
|
36
|
+
/** Controls width of segments stroke, `1` by default */
|
|
37
|
+
strokeWidth?: number;
|
|
38
|
+
/** Controls angle at which chart starts, `0` by default. Set to `180` to render the chart as semicircle. */
|
|
39
|
+
startAngle?: number;
|
|
40
|
+
/** Controls angle at which charts ends, `360` by default. Set to `0` to render the chart as semicircle. */
|
|
41
|
+
endAngle?: number;
|
|
42
|
+
/** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. `'all'` by default. */
|
|
43
|
+
tooltipDataSource?: 'segment' | 'all';
|
|
44
|
+
/** Additional elements rendered inside `PieChart` component */
|
|
45
|
+
children?: React.ReactNode;
|
|
46
|
+
/** Props passed down to recharts `PieChart` component */
|
|
47
|
+
pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
|
|
48
|
+
/** Controls labels position relative to the segment, `'outside'` by default */
|
|
49
|
+
labelsPosition?: 'inside' | 'outside';
|
|
50
|
+
/** A function to format values inside the tooltip */
|
|
51
|
+
valueFormatter?: (value: number) => string;
|
|
52
|
+
}
|
|
53
|
+
export type PieChartFactory = Factory<{
|
|
54
|
+
props: PieChartProps;
|
|
55
|
+
ref: HTMLDivElement;
|
|
56
|
+
stylesNames: PieChartStylesNames;
|
|
57
|
+
vars: PieChartCssVariables;
|
|
58
|
+
}>;
|
|
59
|
+
export declare const PieChart: import("@mantine/core").MantineComponent<{
|
|
60
|
+
props: PieChartProps;
|
|
61
|
+
ref: HTMLDivElement;
|
|
62
|
+
stylesNames: PieChartStylesNames;
|
|
63
|
+
vars: PieChartCssVariables;
|
|
64
|
+
}>;
|
package/lib/index.d.mts
CHANGED
package/lib/index.d.ts
CHANGED
package/lib/types.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export interface ChartReferenceLineProps extends Omit<ReferenceLineProps, 'ref'
|
|
|
8
8
|
export interface ChartSeries {
|
|
9
9
|
name: string;
|
|
10
10
|
color: MantineColor;
|
|
11
|
+
label?: string;
|
|
11
12
|
}
|
|
12
13
|
export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine';
|
|
13
14
|
export type ChartData = Record<string, any>[];
|
|
@@ -52,4 +53,6 @@ export interface GridChartBaseProps {
|
|
|
52
53
|
gridColor?: MantineColor;
|
|
53
54
|
/** Chart orientation, `'horizontal'` by default */
|
|
54
55
|
orientation?: 'horizontal' | 'vertical';
|
|
56
|
+
/** A function to format values on Y axis and inside the tooltip */
|
|
57
|
+
valueFormatter?: (value: number) => string;
|
|
55
58
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getSeriesLabels } from './get-series-labels/get-series-labels';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/charts",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.5.0",
|
|
4
4
|
"description": "Charts components built with recharts and Mantine",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"directory": "packages/@mantine/charts"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@mantine/core": "7.
|
|
39
|
-
"@mantine/hooks": "7.
|
|
38
|
+
"@mantine/core": "7.5.0",
|
|
39
|
+
"@mantine/hooks": "7.5.0",
|
|
40
40
|
"react": "^18.2.0",
|
|
41
41
|
"react-dom": "^18.2.0",
|
|
42
42
|
"recharts": "^2.10.3"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@mantine-tests/core": "1.0.1",
|
|
46
|
-
"@mantine/core": "7.
|
|
47
|
-
"@mantine/hooks": "7.
|
|
46
|
+
"@mantine/core": "7.5.0",
|
|
47
|
+
"@mantine/hooks": "7.5.0"
|
|
48
48
|
}
|
|
49
49
|
}
|
package/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}
|
|
1
|
+
.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}
|
package/styles.layer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mantine {.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}}
|
|
1
|
+
@layer mantine {.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}}
|