@mantine/charts 9.5.1-alpha.1 → 9.5.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.
|
@@ -26,7 +26,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { textColor,
|
|
|
26
26
|
} }));
|
|
27
27
|
const ScatterChart = (0, _mantine_core.factory)((_props) => {
|
|
28
28
|
const props = (0, _mantine_core.useProps)("ScatterChart", defaultProps, _props);
|
|
29
|
-
const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, xAxisProps, yAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
|
|
29
|
+
const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, withRightYAxis, xAxisProps, yAxisProps, rightYAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, rightYAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
|
|
30
30
|
const getFormatter = (axis) => typeof valueFormatter === "function" ? valueFormatter : valueFormatter?.[axis];
|
|
31
31
|
const xFormatter = getFormatter("x");
|
|
32
32
|
const yFormatter = getFormatter("y");
|
|
@@ -86,6 +86,7 @@ const ScatterChart = (0, _mantine_core.factory)((_props) => {
|
|
|
86
86
|
fill: (0, _mantine_core.getThemeColor)(item.color, theme),
|
|
87
87
|
isAnimationActive: false,
|
|
88
88
|
fillOpacity: dimmed ? .1 : 1,
|
|
89
|
+
yAxisId: item.yAxisId || void 0,
|
|
89
90
|
...scatterProps,
|
|
90
91
|
children: [pointLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.LabelList, {
|
|
91
92
|
dataKey: dataKey[pointLabels],
|
|
@@ -94,6 +95,16 @@ const ScatterChart = (0, _mantine_core.factory)((_props) => {
|
|
|
94
95
|
}), scatterProps?.children]
|
|
95
96
|
}, index);
|
|
96
97
|
});
|
|
98
|
+
const sharedYAxisProps = {
|
|
99
|
+
type: "number",
|
|
100
|
+
axisLine: false,
|
|
101
|
+
dataKey: dataKey.y,
|
|
102
|
+
tickLine: withYTickLine ? { stroke: "currentColor" } : false,
|
|
103
|
+
allowDecimals: true,
|
|
104
|
+
unit: unit?.y,
|
|
105
|
+
tickFormatter: yFormatter,
|
|
106
|
+
...getStyles("axis")
|
|
107
|
+
};
|
|
97
108
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
|
|
98
109
|
...getStyles("root"),
|
|
99
110
|
onMouseLeave: handleMouseLeave,
|
|
@@ -105,7 +116,7 @@ const ScatterChart = (0, _mantine_core.factory)((_props) => {
|
|
|
105
116
|
margin: {
|
|
106
117
|
bottom: xAxisLabel ? 30 : void 0,
|
|
107
118
|
left: yAxisLabel ? 10 : void 0,
|
|
108
|
-
right: yAxisLabel ? 5 : void 0
|
|
119
|
+
right: yAxisLabel || rightYAxisLabel ? 5 : void 0
|
|
109
120
|
},
|
|
110
121
|
accessibilityLayer,
|
|
111
122
|
...scatterChartProps,
|
|
@@ -143,20 +154,13 @@ const ScatterChart = (0, _mantine_core.factory)((_props) => {
|
|
|
143
154
|
}), xAxisProps?.children]
|
|
144
155
|
}),
|
|
145
156
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.YAxis, {
|
|
146
|
-
type: "number",
|
|
147
157
|
hide: !withYAxis,
|
|
148
|
-
axisLine: false,
|
|
149
|
-
dataKey: dataKey.y,
|
|
150
|
-
tickLine: withYTickLine ? { stroke: "currentColor" } : false,
|
|
151
158
|
tick: {
|
|
152
159
|
transform: "translate(-10, 0)",
|
|
153
160
|
fontSize: 12,
|
|
154
161
|
fill: "currentColor"
|
|
155
162
|
},
|
|
156
|
-
|
|
157
|
-
unit: unit?.y,
|
|
158
|
-
tickFormatter: yFormatter,
|
|
159
|
-
...getStyles("axis"),
|
|
163
|
+
...sharedYAxisProps,
|
|
160
164
|
...yAxisProps,
|
|
161
165
|
children: [yAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
|
|
162
166
|
position: "insideLeft",
|
|
@@ -168,6 +172,27 @@ const ScatterChart = (0, _mantine_core.factory)((_props) => {
|
|
|
168
172
|
children: yAxisLabel
|
|
169
173
|
}), yAxisProps?.children]
|
|
170
174
|
}),
|
|
175
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.YAxis, {
|
|
176
|
+
yAxisId: "right",
|
|
177
|
+
orientation: "right",
|
|
178
|
+
hide: !withRightYAxis,
|
|
179
|
+
tick: {
|
|
180
|
+
transform: "translate(10, 0)",
|
|
181
|
+
fontSize: 12,
|
|
182
|
+
fill: "currentColor"
|
|
183
|
+
},
|
|
184
|
+
...sharedYAxisProps,
|
|
185
|
+
...rightYAxisProps,
|
|
186
|
+
children: [rightYAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
|
|
187
|
+
position: "insideRight",
|
|
188
|
+
angle: 90,
|
|
189
|
+
textAnchor: "middle",
|
|
190
|
+
fontSize: 12,
|
|
191
|
+
offset: -5,
|
|
192
|
+
...getStyles("axisLabel"),
|
|
193
|
+
children: rightYAxisLabel
|
|
194
|
+
}), rightYAxisProps?.children]
|
|
195
|
+
}),
|
|
171
196
|
withTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
|
|
172
197
|
animationDuration: tooltipAnimationDuration,
|
|
173
198
|
isAnimationActive: tooltipAnimationDuration !== 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScatterChart.cjs","names":["ReferenceLine","Scatter","LabelList","Box","ResponsiveContainer","ReChartsScatterChart","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n ScatterChart as ReChartsScatterChart,\n ReferenceLine,\n ResponsiveContainer,\n Scatter,\n ScatterProps,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n color: MantineColor;\n name: string;\n data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n | 'scatter'\n | Exclude<BaseChartStylesNames, 'brush'>\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n extends\n Omit<\n GridChartBaseProps,\n 'dataKey' | 'data' | 'unit' | 'valueFormatter' | 'withBrush' | 'brushProps'\n >,\n BoxProps,\n StylesApiProps<ScatterChartFactory>,\n ElementProps<'div'> {\n /** Keys that should be used to retrieve data from the data array on x and y axis */\n dataKey: { x: string; y: string };\n\n /** Data that is used to build the chart */\n data: ScatterChartSeries[];\n\n /** Units displayed after value on axis and inside the tooltip */\n unit?: { x?: string; y?: string };\n\n /** Labels that should be used instead of keys names in the tooltip */\n labels?: { x?: string; y?: string };\n\n /** A function to format values on x/y axis and in the tooltip */\n valueFormatter?:\n | GridChartBaseProps['valueFormatter']\n | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n /** Props passed down to recharts `ScatterChart` component */\n scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n /** Props passed down to recharts `Scatter` component */\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /** If set, displays labels next to points for the given axis */\n pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n props: ScatterChartProps;\n ref: HTMLDivElement;\n stylesNames: ScatterChartStylesNames;\n vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n accessibilityLayer: true,\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n const props = useProps('ScatterChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n referenceLines,\n dir,\n withLegend,\n withTooltip,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n orientation,\n scatterChartProps,\n legendProps,\n data,\n gridAxis,\n tickLine,\n strokeDasharray,\n gridProps,\n tooltipAnimationDuration,\n tooltipProps,\n children,\n onMouseLeave,\n dataKey,\n textColor,\n gridColor,\n xAxisLabel,\n yAxisLabel,\n unit,\n labels,\n valueFormatter,\n scatterProps,\n pointLabels,\n attributes,\n accessibilityLayer,\n ...others\n } = props;\n\n const getFormatter = (axis: 'x' | 'y') =>\n typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n const xFormatter = getFormatter('x');\n const yFormatter = getFormatter('y');\n\n const theme = useMantineTheme();\n\n const mappedData = data.map((item) => ({\n ...item,\n data: item.data.map((point) => ({ ...point, name: item.name })),\n }));\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<ScatterChartFactory>({\n name: 'ScatterChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const scatters = mappedData.map((item, index) => {\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n return (\n <Scatter\n data={item.data}\n fill={getThemeColor(item.color, theme)}\n key={index}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : 1}\n {...scatterProps}\n >\n {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n {scatterProps?.children}\n </Scatter>\n );\n });\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsScatterChart\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...scatterChartProps}\n >\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n <XAxis\n type=\"number\"\n hide={!withXAxis}\n dataKey={dataKey.x}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n unit={unit?.x}\n tickFormatter={xFormatter}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n <YAxis\n type=\"number\"\n hide={!withYAxis}\n axisLine={false}\n dataKey={dataKey.y}\n tickLine={withYTickLine ? { stroke: 'currentColor' } : false}\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n allowDecimals\n unit={unit?.y}\n tickFormatter={yFormatter}\n {...getStyles('axis')}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={{ y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n type=\"scatter\"\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={\n labels\n ? payload?.map((item) => ({\n ...item,\n name: labels[getAxis(item.name as string, dataKey)] || item.name,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n : payload?.map((item) => ({\n ...item,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item, index) => ({\n ...item,\n dataKey: data[index].name,\n }))}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n height={44}\n {...legendProps}\n />\n )}\n\n {referenceLinesItems}\n {scatters}\n </ReChartsScatterChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n\nexport namespace ScatterChart {\n export type Props = ScatterChartProps;\n export type StylesNames = ScatterChartStylesNames;\n export type CssVariables = ScatterChartCssVariables;\n export type Factory = ScatterChartFactory;\n export type Series = ScatterChartSeries;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ScatterChart.cjs","names":["ReferenceLine","Scatter","LabelList","Box","ResponsiveContainer","ReChartsScatterChart","CartesianGrid","XAxis","Label","YAxis","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n ScatterChart as ReChartsScatterChart,\n ReferenceLine,\n ResponsiveContainer,\n Scatter,\n ScatterProps,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n color: MantineColor;\n name: string;\n data: Record<string, number>[];\n yAxisId?: string;\n}\n\nexport type ScatterChartStylesNames =\n | 'scatter'\n | Exclude<BaseChartStylesNames, 'brush'>\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n extends\n Omit<\n GridChartBaseProps,\n 'dataKey' | 'data' | 'unit' | 'valueFormatter' | 'withBrush' | 'brushProps'\n >,\n BoxProps,\n StylesApiProps<ScatterChartFactory>,\n ElementProps<'div'> {\n /** Keys that should be used to retrieve data from the data array on x and y axis */\n dataKey: { x: string; y: string };\n\n /** Data that is used to build the chart */\n data: ScatterChartSeries[];\n\n /** Units displayed after value on axis and inside the tooltip */\n unit?: { x?: string; y?: string };\n\n /** Labels that should be used instead of keys names in the tooltip */\n labels?: { x?: string; y?: string };\n\n /** A function to format values on x/y axis and in the tooltip */\n valueFormatter?:\n | GridChartBaseProps['valueFormatter']\n | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n /** Props passed down to recharts `ScatterChart` component */\n scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n /** Props passed down to recharts `Scatter` component */\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /** If set, displays labels next to points for the given axis */\n pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n props: ScatterChartProps;\n ref: HTMLDivElement;\n stylesNames: ScatterChartStylesNames;\n vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n accessibilityLayer: true,\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n const props = useProps('ScatterChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n referenceLines,\n dir,\n withLegend,\n withTooltip,\n withXAxis,\n withYAxis,\n withRightYAxis,\n xAxisProps,\n yAxisProps,\n rightYAxisProps,\n orientation,\n scatterChartProps,\n legendProps,\n data,\n gridAxis,\n tickLine,\n strokeDasharray,\n gridProps,\n tooltipAnimationDuration,\n tooltipProps,\n children,\n onMouseLeave,\n dataKey,\n textColor,\n gridColor,\n xAxisLabel,\n yAxisLabel,\n rightYAxisLabel,\n unit,\n labels,\n valueFormatter,\n scatterProps,\n pointLabels,\n attributes,\n accessibilityLayer,\n ...others\n } = props;\n\n const getFormatter = (axis: 'x' | 'y') =>\n typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n const xFormatter = getFormatter('x');\n const yFormatter = getFormatter('y');\n\n const theme = useMantineTheme();\n\n const mappedData = data.map((item) => ({\n ...item,\n data: item.data.map((point) => ({ ...point, name: item.name })),\n }));\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<ScatterChartFactory>({\n name: 'ScatterChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const scatters = mappedData.map((item, index) => {\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n return (\n <Scatter\n data={item.data}\n fill={getThemeColor(item.color, theme)}\n key={index}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : 1}\n yAxisId={item.yAxisId || undefined}\n {...scatterProps}\n >\n {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n {scatterProps?.children}\n </Scatter>\n );\n });\n\n const sharedYAxisProps = {\n type: 'number' as const,\n axisLine: false,\n dataKey: dataKey.y,\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit: unit?.y,\n tickFormatter: yFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsScatterChart\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel || rightYAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...scatterChartProps}\n >\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n <XAxis\n type=\"number\"\n hide={!withXAxis}\n dataKey={dataKey.x}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n unit={unit?.x}\n tickFormatter={xFormatter}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n <YAxis\n hide={!withYAxis}\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n hide={!withRightYAxis}\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {rightYAxisProps?.children}\n </YAxis>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={{ y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n type=\"scatter\"\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={\n labels\n ? payload?.map((item) => ({\n ...item,\n name: labels[getAxis(item.name as string, dataKey)] || item.name,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n : payload?.map((item) => ({\n ...item,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item, index) => ({\n ...item,\n dataKey: data[index].name,\n }))}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n height={44}\n {...legendProps}\n />\n )}\n\n {referenceLinesItems}\n {scatters}\n </ReChartsScatterChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n\nexport namespace ScatterChart {\n export type Props = ScatterChartProps;\n export type StylesNames = ScatterChartStylesNames;\n export type CssVariables = ScatterChartCssVariables;\n export type Factory = ScatterChartFactory;\n export type Series = ScatterChartSeries;\n}\n"],"mappings":"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"}
|
|
@@ -26,7 +26,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
|
|
|
26
26
|
} }));
|
|
27
27
|
const ScatterChart$1 = factory((_props) => {
|
|
28
28
|
const props = useProps("ScatterChart", defaultProps, _props);
|
|
29
|
-
const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, xAxisProps, yAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
|
|
29
|
+
const { classNames, className, style, styles, unstyled, vars, referenceLines, dir, withLegend, withTooltip, withXAxis, withYAxis, withRightYAxis, xAxisProps, yAxisProps, rightYAxisProps, orientation, scatterChartProps, legendProps, data, gridAxis, tickLine, strokeDasharray, gridProps, tooltipAnimationDuration, tooltipProps, children, onMouseLeave, dataKey, textColor, gridColor, xAxisLabel, yAxisLabel, rightYAxisLabel, unit, labels, valueFormatter, scatterProps, pointLabels, attributes, accessibilityLayer, ...others } = props;
|
|
30
30
|
const getFormatter = (axis) => typeof valueFormatter === "function" ? valueFormatter : valueFormatter?.[axis];
|
|
31
31
|
const xFormatter = getFormatter("x");
|
|
32
32
|
const yFormatter = getFormatter("y");
|
|
@@ -86,6 +86,7 @@ const ScatterChart$1 = factory((_props) => {
|
|
|
86
86
|
fill: getThemeColor(item.color, theme),
|
|
87
87
|
isAnimationActive: false,
|
|
88
88
|
fillOpacity: dimmed ? .1 : 1,
|
|
89
|
+
yAxisId: item.yAxisId || void 0,
|
|
89
90
|
...scatterProps,
|
|
90
91
|
children: [pointLabels && /* @__PURE__ */ jsx(LabelList, {
|
|
91
92
|
dataKey: dataKey[pointLabels],
|
|
@@ -94,6 +95,16 @@ const ScatterChart$1 = factory((_props) => {
|
|
|
94
95
|
}), scatterProps?.children]
|
|
95
96
|
}, index);
|
|
96
97
|
});
|
|
98
|
+
const sharedYAxisProps = {
|
|
99
|
+
type: "number",
|
|
100
|
+
axisLine: false,
|
|
101
|
+
dataKey: dataKey.y,
|
|
102
|
+
tickLine: withYTickLine ? { stroke: "currentColor" } : false,
|
|
103
|
+
allowDecimals: true,
|
|
104
|
+
unit: unit?.y,
|
|
105
|
+
tickFormatter: yFormatter,
|
|
106
|
+
...getStyles("axis")
|
|
107
|
+
};
|
|
97
108
|
return /* @__PURE__ */ jsx(Box, {
|
|
98
109
|
...getStyles("root"),
|
|
99
110
|
onMouseLeave: handleMouseLeave,
|
|
@@ -105,7 +116,7 @@ const ScatterChart$1 = factory((_props) => {
|
|
|
105
116
|
margin: {
|
|
106
117
|
bottom: xAxisLabel ? 30 : void 0,
|
|
107
118
|
left: yAxisLabel ? 10 : void 0,
|
|
108
|
-
right: yAxisLabel ? 5 : void 0
|
|
119
|
+
right: yAxisLabel || rightYAxisLabel ? 5 : void 0
|
|
109
120
|
},
|
|
110
121
|
accessibilityLayer,
|
|
111
122
|
...scatterChartProps,
|
|
@@ -143,20 +154,13 @@ const ScatterChart$1 = factory((_props) => {
|
|
|
143
154
|
}), xAxisProps?.children]
|
|
144
155
|
}),
|
|
145
156
|
/* @__PURE__ */ jsxs(YAxis, {
|
|
146
|
-
type: "number",
|
|
147
157
|
hide: !withYAxis,
|
|
148
|
-
axisLine: false,
|
|
149
|
-
dataKey: dataKey.y,
|
|
150
|
-
tickLine: withYTickLine ? { stroke: "currentColor" } : false,
|
|
151
158
|
tick: {
|
|
152
159
|
transform: "translate(-10, 0)",
|
|
153
160
|
fontSize: 12,
|
|
154
161
|
fill: "currentColor"
|
|
155
162
|
},
|
|
156
|
-
|
|
157
|
-
unit: unit?.y,
|
|
158
|
-
tickFormatter: yFormatter,
|
|
159
|
-
...getStyles("axis"),
|
|
163
|
+
...sharedYAxisProps,
|
|
160
164
|
...yAxisProps,
|
|
161
165
|
children: [yAxisLabel && /* @__PURE__ */ jsx(Label, {
|
|
162
166
|
position: "insideLeft",
|
|
@@ -168,6 +172,27 @@ const ScatterChart$1 = factory((_props) => {
|
|
|
168
172
|
children: yAxisLabel
|
|
169
173
|
}), yAxisProps?.children]
|
|
170
174
|
}),
|
|
175
|
+
/* @__PURE__ */ jsxs(YAxis, {
|
|
176
|
+
yAxisId: "right",
|
|
177
|
+
orientation: "right",
|
|
178
|
+
hide: !withRightYAxis,
|
|
179
|
+
tick: {
|
|
180
|
+
transform: "translate(10, 0)",
|
|
181
|
+
fontSize: 12,
|
|
182
|
+
fill: "currentColor"
|
|
183
|
+
},
|
|
184
|
+
...sharedYAxisProps,
|
|
185
|
+
...rightYAxisProps,
|
|
186
|
+
children: [rightYAxisLabel && /* @__PURE__ */ jsx(Label, {
|
|
187
|
+
position: "insideRight",
|
|
188
|
+
angle: 90,
|
|
189
|
+
textAnchor: "middle",
|
|
190
|
+
fontSize: 12,
|
|
191
|
+
offset: -5,
|
|
192
|
+
...getStyles("axisLabel"),
|
|
193
|
+
children: rightYAxisLabel
|
|
194
|
+
}), rightYAxisProps?.children]
|
|
195
|
+
}),
|
|
171
196
|
withTooltip && /* @__PURE__ */ jsx(Tooltip$1, {
|
|
172
197
|
animationDuration: tooltipAnimationDuration,
|
|
173
198
|
isAnimationActive: tooltipAnimationDuration !== 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScatterChart.mjs","names":["ScatterChart","ReChartsScatterChart","Tooltip","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n ScatterChart as ReChartsScatterChart,\n ReferenceLine,\n ResponsiveContainer,\n Scatter,\n ScatterProps,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n color: MantineColor;\n name: string;\n data: Record<string, number>[];\n}\n\nexport type ScatterChartStylesNames =\n | 'scatter'\n | Exclude<BaseChartStylesNames, 'brush'>\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n extends\n Omit<\n GridChartBaseProps,\n 'dataKey' | 'data' | 'unit' | 'valueFormatter' | 'withBrush' | 'brushProps'\n >,\n BoxProps,\n StylesApiProps<ScatterChartFactory>,\n ElementProps<'div'> {\n /** Keys that should be used to retrieve data from the data array on x and y axis */\n dataKey: { x: string; y: string };\n\n /** Data that is used to build the chart */\n data: ScatterChartSeries[];\n\n /** Units displayed after value on axis and inside the tooltip */\n unit?: { x?: string; y?: string };\n\n /** Labels that should be used instead of keys names in the tooltip */\n labels?: { x?: string; y?: string };\n\n /** A function to format values on x/y axis and in the tooltip */\n valueFormatter?:\n | GridChartBaseProps['valueFormatter']\n | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n /** Props passed down to recharts `ScatterChart` component */\n scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n /** Props passed down to recharts `Scatter` component */\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /** If set, displays labels next to points for the given axis */\n pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n props: ScatterChartProps;\n ref: HTMLDivElement;\n stylesNames: ScatterChartStylesNames;\n vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n accessibilityLayer: true,\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n const props = useProps('ScatterChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n referenceLines,\n dir,\n withLegend,\n withTooltip,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n orientation,\n scatterChartProps,\n legendProps,\n data,\n gridAxis,\n tickLine,\n strokeDasharray,\n gridProps,\n tooltipAnimationDuration,\n tooltipProps,\n children,\n onMouseLeave,\n dataKey,\n textColor,\n gridColor,\n xAxisLabel,\n yAxisLabel,\n unit,\n labels,\n valueFormatter,\n scatterProps,\n pointLabels,\n attributes,\n accessibilityLayer,\n ...others\n } = props;\n\n const getFormatter = (axis: 'x' | 'y') =>\n typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n const xFormatter = getFormatter('x');\n const yFormatter = getFormatter('y');\n\n const theme = useMantineTheme();\n\n const mappedData = data.map((item) => ({\n ...item,\n data: item.data.map((point) => ({ ...point, name: item.name })),\n }));\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<ScatterChartFactory>({\n name: 'ScatterChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const scatters = mappedData.map((item, index) => {\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n return (\n <Scatter\n data={item.data}\n fill={getThemeColor(item.color, theme)}\n key={index}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : 1}\n {...scatterProps}\n >\n {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n {scatterProps?.children}\n </Scatter>\n );\n });\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsScatterChart\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...scatterChartProps}\n >\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n <XAxis\n type=\"number\"\n hide={!withXAxis}\n dataKey={dataKey.x}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n unit={unit?.x}\n tickFormatter={xFormatter}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n <YAxis\n type=\"number\"\n hide={!withYAxis}\n axisLine={false}\n dataKey={dataKey.y}\n tickLine={withYTickLine ? { stroke: 'currentColor' } : false}\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n allowDecimals\n unit={unit?.y}\n tickFormatter={yFormatter}\n {...getStyles('axis')}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={{ y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n type=\"scatter\"\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={\n labels\n ? payload?.map((item) => ({\n ...item,\n name: labels[getAxis(item.name as string, dataKey)] || item.name,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n : payload?.map((item) => ({\n ...item,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item, index) => ({\n ...item,\n dataKey: data[index].name,\n }))}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n height={44}\n {...legendProps}\n />\n )}\n\n {referenceLinesItems}\n {scatters}\n </ReChartsScatterChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n\nexport namespace ScatterChart {\n export type Props = ScatterChartProps;\n export type StylesNames = ScatterChartStylesNames;\n export type CssVariables = ScatterChartCssVariables;\n export type Factory = ScatterChartFactory;\n export type Series = ScatterChartSeries;\n}\n"],"mappings":";;;;;;;;;AAuFA,SAAS,QAAQ,KAAa,SAAmC;CAC/D,OAAO,QAAQ,QAAQ,IAAI,MAAM;AACnC;AASA,MAAM,eAAe;CACnB,WAAW;CACX,WAAW;CACX,aAAa;CACb,0BAA0B;CAC1B,UAAU;CACV,iBAAiB;CACjB,UAAU;CACV,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAAyC,OAAO,EAAE,WAAW,iBAAiB,EACjG,MAAM;CACJ,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;AACtE,EACF,EAAE;AAEF,MAAaA,iBAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,cAAc,MAAM;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,gBACA,KACA,YACA,aACA,WACA,WACA,YACA,YACA,aACA,mBACA,aACA,MACA,UACA,UACA,iBACA,WACA,0BACA,cACA,UACA,cACA,SACA,WACA,WACA,YACA,YACA,MACA,QACA,gBACA,cACA,aACA,YACA,oBACA,GAAG,WACD;CAEJ,MAAM,gBAAgB,SACpB,OAAO,mBAAmB,aAAa,iBAAiB,iBAAiB;CAC3E,MAAM,aAAa,aAAa,GAAG;CACnC,MAAM,aAAa,aAAa,GAAG;CAEnC,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,aAAa,KAAK,KAAK,UAAU;EACrC,GAAG;EACH,MAAM,KAAK,KAAK,KAAK,WAAW;GAAE,GAAG;GAAO,MAAM,KAAK;EAAK,EAAE;CAChE,EAAE;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAA0C;EACvF;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,gBAAgB,aAAa,WAAW,aAAa,OAAO,aAAa;CAC/E,MAAM,CAAC,iBAAiB,sBAAsB,SAAiC,IAAI;CACnF,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,oBAAoB,UAA4C;EACpE,mBAAmB,IAAI;EACvB,eAAe,KAAK;CACtB;CAEA,MAAM,sBAAsB,gBAAgB,KAAK,MAAM,UAAU;EAC/D,MAAM,QAAQ,cAAc,KAAK,OAAO,KAAK;EAC7C,OACE,oBAAC,eAAD;GAEE,QAAQ,KAAK,QAAQ,QAAQ;GAC7B,aAAa;GACb,GAAI;GACJ,OAAO;IACL,MAAM,KAAK,QAAQ,QAAQ;IAC3B,UAAU;IACV,UAAU,KAAK,iBAAiB;IAChC,GAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,EAAE,OAAO,KAAK,MAAM;GACxE;GACA,GAAI,UAAU,eAAe;EAC9B,GAXM,KAWN;CAEL,CAAC;CAED,MAAM,WAAW,WAAW,KAAK,MAAM,UAAU;EAC/C,MAAM,SAAS,mBAAmB,oBAAoB,KAAK;EAC3D,OACE,qBAAC,SAAD;GACE,MAAM,KAAK;GACX,MAAM,cAAc,KAAK,OAAO,KAAK;GAErC,mBAAmB;GACnB,aAAa,SAAS,KAAM;GAC5B,GAAI;aANN,CAQG,eAAe,oBAAC,WAAD;IAAW,SAAS,QAAQ;IAAc,UAAU;IAAG,IAAI;GAAK,CAAA,GAC/E,cAAc,QACR;KAPF,KAOE;CAEb,CAAC;CAED,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,cAAc;EAAkB,KAAK,OAAO;EAAO,GAAI;YACjF,oBAAC,qBAAD;GAAqB,GAAI,UAAU,WAAW;aAC5C,qBAACC,cAAD;IACE,QAAQ;KACN,QAAQ,aAAa,KAAK,KAAA;KAC1B,MAAM,aAAa,KAAK,KAAA;KACxB,OAAO,aAAa,IAAI,KAAA;IAC1B;IACoB;IACpB,GAAI;cAPN;KASE,oBAAC,eAAD;MACmB;MACjB,UAAU,aAAa,OAAO,aAAa;MAC3C,YAAY,aAAa,OAAO,aAAa;MAC7C,GAAI,UAAU,MAAM;MACpB,GAAI;KACL,CAAA;KACD,qBAAC,OAAD;MACE,MAAK;MACL,MAAM,CAAC;MACP,SAAS,QAAQ;MACjB,MAAM;OAAE,WAAW;OAAoB,UAAU;OAAI,MAAM;MAAe;MAC1E,QAAO;MACP,UAAS;MACT,UAAU,gBAAgB,EAAE,QAAQ,eAAe,IAAI;MACvD,YAAY;MACZ,MAAM,MAAM;MACZ,eAAe;MACf,GAAI,UAAU,MAAM;MACpB,GAAI;gBAZN,CAcG,cACC,oBAAC,OAAD;OAAO,UAAS;OAAe,QAAQ;OAAK,UAAU;OAAI,GAAI,UAAU,WAAW;iBAChF;MACI,CAAA,GAER,YAAY,QACR;;KACP,qBAAC,OAAD;MACE,MAAK;MACL,MAAM,CAAC;MACP,UAAU;MACV,SAAS,QAAQ;MACjB,UAAU,gBAAgB,EAAE,QAAQ,eAAe,IAAI;MACvD,MAAM;OAAE,WAAW;OAAqB,UAAU;OAAI,MAAM;MAAe;MAC3E,eAAA;MACA,MAAM,MAAM;MACZ,eAAe;MACf,GAAI,UAAU,MAAM;MACpB,GAAI;gBAXN,CAaG,cACC,oBAAC,OAAD;OACE,UAAS;OACT,OAAO;OACP,YAAW;OACX,UAAU;OACV,QAAQ;OACR,GAAI,UAAU,WAAW;iBAExB;MACI,CAAA,GAER,YAAY,QACR;;KAEN,eACC,oBAACC,WAAD;MACE,mBAAmB;MACnB,mBAAmB,6BAA6B;MAChD,UAAU,EAAE,GAAG,EAAE;MACjB,QAAQ;OACN,QAAQ;OACR,aAAa;OACb;MACF;MACA,UAAU,EAAE,OAAO,SAAS,qBAC1B,oBAAC,cAAD;OACE,MAAK;OACL,OAAO,kBAAkB,UAAU,eAAe,OAAO,OAAO,IAAI;OACpE,SACE,SACI,SAAS,KAAK,UAAU;QACtB,GAAG;QACH,MAAM,OAAO,QAAQ,KAAK,MAAgB,OAAO,MAAM,KAAK;QAC5D,OACE,aAAa,QAAQ,KAAK,MAAgB,OAAO,CAAC,CAAC,GACjD,KAAK,KACP,KAAK,KAAK;OACd,EAAE,IACF,SAAS,KAAK,UAAU;QACtB,GAAG;QACH,OACE,aAAa,QAAQ,KAAK,MAAgB,OAAO,CAAC,CAAC,GACjD,KAAK,KACP,KAAK,KAAK;OACd,EAAE;OAER,YAAY;OACZ,QAAQ;OACR,QAAQ;OACI;MACb,CAAA;MAEH,GAAI;KACL,CAAA;KAGF,cACC,oBAAC,QAAD;MACE,eAAc;MACd,UAAU,YACR,oBAAC,aAAD;OACE,SAAS,QAAQ,SAAS,KAAK,MAAM,WAAW;QAC9C,GAAG;QACH,SAAS,KAAK,MAAM,CAAC;OACvB,EAAE;OACF,aAAa;OACb,gBAAgB,aAAa,iBAAiB;OAC9C,YAAY;OACZ,QAAQ;OACR,QAAQ;OACI;MACb,CAAA;MAEH,QAAQ;MACR,GAAI;KACL,CAAA;KAGF;KACA;IACmB;;EACH,CAAA;CAClB,CAAA;AAET,CAAC;AAED,eAAa,cAAc;AAC3B,eAAa,UAAUC;AACvB,eAAa,eAAe"}
|
|
1
|
+
{"version":3,"file":"ScatterChart.mjs","names":["ScatterChart","ReChartsScatterChart","Tooltip","classes"],"sources":["../../src/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n CartesianGrid,\n Label,\n LabelList,\n Legend,\n ScatterChart as ReChartsScatterChart,\n ReferenceLine,\n ResponsiveContainer,\n Scatter,\n ScatterProps,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { BaseChartStylesNames, GridChartBaseProps } from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport interface ScatterChartSeries {\n color: MantineColor;\n name: string;\n data: Record<string, number>[];\n yAxisId?: string;\n}\n\nexport type ScatterChartStylesNames =\n | 'scatter'\n | Exclude<BaseChartStylesNames, 'brush'>\n | ChartLegendStylesNames\n | ChartTooltipStylesNames;\n\nexport type ScatterChartCssVariables = {\n root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface ScatterChartProps\n extends\n Omit<\n GridChartBaseProps,\n 'dataKey' | 'data' | 'unit' | 'valueFormatter' | 'withBrush' | 'brushProps'\n >,\n BoxProps,\n StylesApiProps<ScatterChartFactory>,\n ElementProps<'div'> {\n /** Keys that should be used to retrieve data from the data array on x and y axis */\n dataKey: { x: string; y: string };\n\n /** Data that is used to build the chart */\n data: ScatterChartSeries[];\n\n /** Units displayed after value on axis and inside the tooltip */\n unit?: { x?: string; y?: string };\n\n /** Labels that should be used instead of keys names in the tooltip */\n labels?: { x?: string; y?: string };\n\n /** A function to format values on x/y axis and in the tooltip */\n valueFormatter?:\n | GridChartBaseProps['valueFormatter']\n | { x?: GridChartBaseProps['valueFormatter']; y?: GridChartBaseProps['valueFormatter'] };\n\n /** Props passed down to recharts `ScatterChart` component */\n scatterChartProps?: React.ComponentProps<typeof ReChartsScatterChart>;\n\n /** Props passed down to recharts `Scatter` component */\n scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;\n\n /** If set, displays labels next to points for the given axis */\n pointLabels?: 'x' | 'y';\n}\n\nfunction getAxis(key: string, dataKey: { x: string; y: string }) {\n return key === dataKey.x ? 'x' : 'y';\n}\n\nexport type ScatterChartFactory = Factory<{\n props: ScatterChartProps;\n ref: HTMLDivElement;\n stylesNames: ScatterChartStylesNames;\n vars: ScatterChartCssVariables;\n}>;\n\nconst defaultProps = {\n withXAxis: true,\n withYAxis: true,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n tickLine: 'y',\n strokeDasharray: '5 5',\n gridAxis: 'x',\n accessibilityLayer: true,\n} satisfies Partial<ScatterChartProps>;\n\nconst varsResolver = createVarsResolver<ScatterChartFactory>((theme, { textColor, gridColor }) => ({\n root: {\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-grid-color': gridColor ? getThemeColor(gridColor, theme) : undefined,\n },\n}));\n\nexport const ScatterChart = factory<ScatterChartFactory>((_props) => {\n const props = useProps('ScatterChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n referenceLines,\n dir,\n withLegend,\n withTooltip,\n withXAxis,\n withYAxis,\n withRightYAxis,\n xAxisProps,\n yAxisProps,\n rightYAxisProps,\n orientation,\n scatterChartProps,\n legendProps,\n data,\n gridAxis,\n tickLine,\n strokeDasharray,\n gridProps,\n tooltipAnimationDuration,\n tooltipProps,\n children,\n onMouseLeave,\n dataKey,\n textColor,\n gridColor,\n xAxisLabel,\n yAxisLabel,\n rightYAxisLabel,\n unit,\n labels,\n valueFormatter,\n scatterProps,\n pointLabels,\n attributes,\n accessibilityLayer,\n ...others\n } = props;\n\n const getFormatter = (axis: 'x' | 'y') =>\n typeof valueFormatter === 'function' ? valueFormatter : valueFormatter?.[axis];\n const xFormatter = getFormatter('x');\n const yFormatter = getFormatter('y');\n\n const theme = useMantineTheme();\n\n const mappedData = data.map((item) => ({\n ...item,\n data: item.data.map((point) => ({ ...point, name: item.name })),\n }));\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ScatterChartFactory>({\n classNames,\n styles,\n props,\n });\n\n const getStyles = useStyles<ScatterChartFactory>({\n name: 'ScatterChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy');\n const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy');\n const [highlightedArea, setHighlightedArea] = useState<string | number | null>(null);\n const shouldHighlight = highlightedArea !== null;\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n setHighlightedArea(null);\n onMouseLeave?.(event);\n };\n\n const referenceLinesItems = referenceLines?.map((line, index) => {\n const color = getThemeColor(line.color, theme);\n return (\n <ReferenceLine\n key={index}\n stroke={line.color ? color : 'var(--chart-grid-color)'}\n strokeWidth={1}\n {...line}\n label={{\n fill: line.color ? color : 'currentColor',\n fontSize: 12,\n position: line.labelPosition ?? 'insideBottomLeft',\n ...(typeof line.label === 'object' ? line.label : { value: line.label }),\n }}\n {...getStyles('referenceLine')}\n />\n );\n });\n\n const scatters = mappedData.map((item, index) => {\n const dimmed = shouldHighlight && highlightedArea !== item.name;\n return (\n <Scatter\n data={item.data}\n fill={getThemeColor(item.color, theme)}\n key={index}\n isAnimationActive={false}\n fillOpacity={dimmed ? 0.1 : 1}\n yAxisId={item.yAxisId || undefined}\n {...scatterProps}\n >\n {pointLabels && <LabelList dataKey={dataKey[pointLabels]} fontSize={8} dy={10} />}\n {scatterProps?.children}\n </Scatter>\n );\n });\n\n const sharedYAxisProps = {\n type: 'number' as const,\n axisLine: false,\n dataKey: dataKey.y,\n tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n allowDecimals: true,\n unit: unit?.y,\n tickFormatter: yFormatter,\n ...getStyles('axis'),\n };\n\n return (\n <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n <ResponsiveContainer {...getStyles('container')}>\n <ReChartsScatterChart\n margin={{\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel || rightYAxisLabel ? 5 : undefined,\n }}\n accessibilityLayer={accessibilityLayer}\n {...scatterChartProps}\n >\n <CartesianGrid\n strokeDasharray={strokeDasharray as string}\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n {...getStyles('grid')}\n {...gridProps}\n />\n <XAxis\n type=\"number\"\n hide={!withXAxis}\n dataKey={dataKey.x}\n tick={{ transform: 'translate(0, 10)', fontSize: 12, fill: 'currentColor' }}\n stroke=\"\"\n interval=\"preserveStartEnd\"\n tickLine={withXTickLine ? { stroke: 'currentColor' } : false}\n minTickGap={5}\n unit={unit?.x}\n tickFormatter={xFormatter}\n {...getStyles('axis')}\n {...xAxisProps}\n >\n {xAxisLabel && (\n <Label position=\"insideBottom\" offset={-20} fontSize={12} {...getStyles('axisLabel')}>\n {xAxisLabel}\n </Label>\n )}\n {xAxisProps?.children}\n </XAxis>\n <YAxis\n hide={!withYAxis}\n tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n {...sharedYAxisProps}\n {...yAxisProps}\n >\n {yAxisLabel && (\n <Label\n position=\"insideLeft\"\n angle={-90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {yAxisLabel}\n </Label>\n )}\n {yAxisProps?.children}\n </YAxis>\n\n <YAxis\n yAxisId=\"right\"\n orientation=\"right\"\n hide={!withRightYAxis}\n tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n {...sharedYAxisProps}\n {...rightYAxisProps}\n >\n {rightYAxisLabel && (\n <Label\n position=\"insideRight\"\n angle={90}\n textAnchor=\"middle\"\n fontSize={12}\n offset={-5}\n {...getStyles('axisLabel')}\n >\n {rightYAxisLabel}\n </Label>\n )}\n {rightYAxisProps?.children}\n </YAxis>\n\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={tooltipAnimationDuration !== 0}\n position={{ y: 0 }}\n cursor={{\n stroke: 'var(--chart-grid-color)',\n strokeWidth: 1,\n strokeDasharray,\n }}\n content={({ label, payload, labelFormatter }) => (\n <ChartTooltip\n type=\"scatter\"\n label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n payload={\n labels\n ? payload?.map((item) => ({\n ...item,\n name: labels[getAxis(item.name as string, dataKey)] || item.name,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n : payload?.map((item) => ({\n ...item,\n value:\n getFormatter(getAxis(item.name as string, dataKey))?.(\n item.value as number\n ) ?? item.value,\n }))\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n {...tooltipProps}\n />\n )}\n\n {withLegend && (\n <Legend\n verticalAlign=\"top\"\n content={(payload) => (\n <ChartLegend\n payload={payload.payload?.map((item, index) => ({\n ...item,\n dataKey: data[index].name,\n }))}\n onHighlight={setHighlightedArea}\n legendPosition={legendProps?.verticalAlign || 'top'}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n series={data}\n attributes={attributes}\n />\n )}\n height={44}\n {...legendProps}\n />\n )}\n\n {referenceLinesItems}\n {scatters}\n </ReChartsScatterChart>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nScatterChart.displayName = '@mantine/charts/ScatterChart';\nScatterChart.classes = classes;\nScatterChart.varsResolver = varsResolver;\n\nexport namespace ScatterChart {\n export type Props = ScatterChartProps;\n export type StylesNames = ScatterChartStylesNames;\n export type CssVariables = ScatterChartCssVariables;\n export type Factory = ScatterChartFactory;\n export type Series = ScatterChartSeries;\n}\n"],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ export interface ScatterChartSeries {
|
|
|
7
7
|
color: MantineColor;
|
|
8
8
|
name: string;
|
|
9
9
|
data: Record<string, number>[];
|
|
10
|
+
yAxisId?: string;
|
|
10
11
|
}
|
|
11
12
|
export type ScatterChartStylesNames = 'scatter' | Exclude<BaseChartStylesNames, 'brush'> | ChartLegendStylesNames | ChartTooltipStylesNames;
|
|
12
13
|
export type ScatterChartCssVariables = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/charts",
|
|
3
|
-
"version": "9.5.1
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "Charts components built with recharts and Mantine",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"directory": "packages/@mantine/charts"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@mantine/core": "9.5.1
|
|
39
|
-
"@mantine/hooks": "9.5.1
|
|
38
|
+
"@mantine/core": "9.5.1",
|
|
39
|
+
"@mantine/hooks": "9.5.1",
|
|
40
40
|
"react": "^19.2.0",
|
|
41
41
|
"react-dom": "^19.2.0",
|
|
42
42
|
"recharts": ">=3.2.1"
|