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

package/cjs/ScatterChart/ScatterChart.cjs

@@ -1,286 +1,227 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var recharts = require('recharts');
-var core = require('@mantine/core');
-var ChartLegend = require('../ChartLegend/ChartLegend.cjs');
-var ChartTooltip = require('../ChartTooltip/ChartTooltip.cjs');
-var gridChart_module = require('../grid-chart.module.css.cjs');
-
+"use client";
+require("../_virtual/_rolldown/runtime.cjs");
+const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
+const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
+const require_grid_chart_module = require("../grid-chart.module.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let recharts = require("recharts");
+//#region packages/@mantine/charts/src/ScatterChart/ScatterChart.tsx
 function getAxis(key, dataKey) {
-  return key === dataKey.x ? "x" : "y";
+	return key === dataKey.x ? "x" : "y";
 }
 const defaultProps = {
-  withXAxis: true,
-  withYAxis: true,
-  withTooltip: true,
-  tooltipAnimationDuration: 0,
-  tickLine: "y",
-  strokeDasharray: "5 5",
-  gridAxis: "x"
+	withXAxis: true,
+	withYAxis: true,
+	withTooltip: true,
+	tooltipAnimationDuration: 0,
+	tickLine: "y",
+	strokeDasharray: "5 5",
+	gridAxis: "x"
 };
-const varsResolver = core.createVarsResolver((theme, { textColor, gridColor }) => ({
-  root: {
-    "--chart-text-color": textColor ? core.getThemeColor(textColor, theme) : void 0,
-    "--chart-grid-color": gridColor ? core.getThemeColor(gridColor, theme) : void 0
-  }
-}));
-const ScatterChart = core.factory((_props) => {
-  const props = core.useProps("ScatterChart", defaultProps, _props);
-  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,
-    ...others
-  } = props;
-  const getFormatter = (axis) => typeof valueFormatter === "function" ? valueFormatter : valueFormatter?.[axis];
-  const xFormatter = getFormatter("x");
-  const yFormatter = getFormatter("y");
-  const theme = core.useMantineTheme();
-  const mappedData = data.map((item) => ({
-    ...item,
-    data: item.data.map((point) => ({ ...point, name: item.name }))
-  }));
-  const { resolvedClassNames, resolvedStyles } = core.useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const getStyles = core.useStyles({
-    name: "ScatterChart",
-    classes: gridChart_module,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver
-  });
-  const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
-  const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
-  const [highlightedArea, setHighlightedArea] = react.useState(null);
-  const shouldHighlight = highlightedArea !== null;
-  const handleMouseLeave = (event) => {
-    setHighlightedArea(null);
-    onMouseLeave?.(event);
-  };
-  const referenceLinesItems = referenceLines?.map((line, index) => {
-    const color = core.getThemeColor(line.color, theme);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.ReferenceLine,
-      {
-        stroke: line.color ? color : "var(--chart-grid-color)",
-        strokeWidth: 1,
-        ...line,
-        label: {
-          value: line.label,
-          fill: line.color ? color : "currentColor",
-          fontSize: 12,
-          position: line.labelPosition ?? "insideBottomLeft"
-        },
-        ...getStyles("referenceLine")
-      },
-      index
-    );
-  });
-  const scatters = mappedData.map((item, index) => {
-    const dimmed = shouldHighlight && highlightedArea !== item.name;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      recharts.Scatter,
-      {
-        data: item.data,
-        fill: core.getThemeColor(item.color, theme),
-        isAnimationActive: false,
-        fillOpacity: dimmed ? 0.1 : 1,
-        ...scatterProps,
-        children: [
-          pointLabels && /* @__PURE__ */ jsxRuntime.jsx(recharts.LabelList, { dataKey: dataKey[pointLabels], fontSize: 8, dy: 10 }),
-          scatterProps?.children
-        ]
-      },
-      index
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("root"), onMouseLeave: handleMouseLeave, dir: dir || "ltr", ...others, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
-    recharts.ScatterChart,
-    {
-      margin: {
-        bottom: xAxisLabel ? 30 : void 0,
-        left: yAxisLabel ? 10 : void 0,
-        right: yAxisLabel ? 5 : void 0
-      },
-      ...scatterChartProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.CartesianGrid,
-          {
-            strokeDasharray,
-            vertical: gridAxis === "y" || gridAxis === "xy",
-            horizontal: gridAxis === "x" || gridAxis === "xy",
-            ...getStyles("grid"),
-            ...gridProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          recharts.XAxis,
-          {
-            type: "number",
-            hide: !withXAxis,
-            dataKey: dataKey.x,
-            tick: { transform: "translate(0, 10)", fontSize: 12, fill: "currentColor" },
-            stroke: "",
-            interval: "preserveStartEnd",
-            tickLine: withXTickLine ? { stroke: "currentColor" } : false,
-            minTickGap: 5,
-            unit: unit?.x,
-            tickFormatter: xFormatter,
-            ...getStyles("axis"),
-            ...xAxisProps,
-            children: [
-              xAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(recharts.Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel"), children: xAxisLabel }),
-              xAxisProps?.children
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          recharts.YAxis,
-          {
-            type: "number",
-            hide: !withYAxis,
-            axisLine: false,
-            dataKey: dataKey.y,
-            tickLine: withYTickLine ? { stroke: "currentColor" } : false,
-            tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
-            allowDecimals: true,
-            unit: unit?.y,
-            tickFormatter: yFormatter,
-            ...getStyles("axis"),
-            ...yAxisProps,
-            children: [
-              yAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Label,
-                {
-                  position: "insideLeft",
-                  angle: -90,
-                  textAnchor: "middle",
-                  fontSize: 12,
-                  offset: -5,
-                  ...getStyles("axisLabel"),
-                  children: yAxisLabel
-                }
-              ),
-              yAxisProps?.children
-            ]
-          }
-        ),
-        withTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Tooltip,
-          {
-            animationDuration: tooltipAnimationDuration,
-            isAnimationActive: tooltipAnimationDuration !== 0,
-            position: { y: 0 },
-            cursor: {
-              stroke: "var(--chart-grid-color)",
-              strokeWidth: 1,
-              strokeDasharray
-            },
-            content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsxRuntime.jsx(
-              ChartTooltip.ChartTooltip,
-              {
-                type: "scatter",
-                label: labelFormatter && payload ? labelFormatter(label, payload) : label,
-                payload: labels ? payload?.map((item) => ({
-                  ...item,
-                  name: labels[getAxis(item.name, dataKey)] || item.name,
-                  value: getFormatter(getAxis(item.name, dataKey))?.(
-                    item.value
-                  ) ?? item.value
-                })) : payload?.map((item) => ({
-                  ...item,
-                  value: getFormatter(getAxis(item.name, dataKey))?.(
-                    item.value
-                  ) ?? item.value
-                })),
-                classNames: resolvedClassNames,
-                styles: resolvedStyles,
-                series: data,
-                attributes
-              }
-            ),
-            ...tooltipProps
-          }
-        ),
-        withLegend && /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Legend,
-          {
-            verticalAlign: "top",
-            content: (payload) => /* @__PURE__ */ jsxRuntime.jsx(
-              ChartLegend.ChartLegend,
-              {
-                payload: payload.payload?.map((item, index) => ({
-                  ...item,
-                  dataKey: data[index].name
-                })),
-                onHighlight: setHighlightedArea,
-                legendPosition: legendProps?.verticalAlign || "top",
-                classNames: resolvedClassNames,
-                styles: resolvedStyles,
-                series: data,
-                attributes
-              }
-            ),
-            height: 44,
-            ...legendProps
-          }
-        ),
-        referenceLinesItems,
-        scatters
-      ]
-    }
-  ) }) });
+const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { textColor, gridColor }) => ({ root: {
+	"--chart-text-color": textColor ? (0, _mantine_core.getThemeColor)(textColor, theme) : void 0,
+	"--chart-grid-color": gridColor ? (0, _mantine_core.getThemeColor)(gridColor, theme) : void 0
+} }));
+const ScatterChart = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("ScatterChart", defaultProps, _props);
+	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, ...others } = props;
+	const getFormatter = (axis) => typeof valueFormatter === "function" ? valueFormatter : valueFormatter?.[axis];
+	const xFormatter = getFormatter("x");
+	const yFormatter = getFormatter("y");
+	const theme = (0, _mantine_core.useMantineTheme)();
+	const mappedData = data.map((item) => ({
+		...item,
+		data: item.data.map((point) => ({
+			...point,
+			name: item.name
+		}))
+	}));
+	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
+		classNames,
+		styles,
+		props
+	});
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: "ScatterChart",
+		classes: require_grid_chart_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
+	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
+	const [highlightedArea, setHighlightedArea] = (0, react.useState)(null);
+	const shouldHighlight = highlightedArea !== null;
+	const handleMouseLeave = (event) => {
+		setHighlightedArea(null);
+		onMouseLeave?.(event);
+	};
+	const referenceLinesItems = referenceLines?.map((line, index) => {
+		const color = (0, _mantine_core.getThemeColor)(line.color, theme);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
+			stroke: line.color ? color : "var(--chart-grid-color)",
+			strokeWidth: 1,
+			...line,
+			label: {
+				value: line.label,
+				fill: line.color ? color : "currentColor",
+				fontSize: 12,
+				position: line.labelPosition ?? "insideBottomLeft"
+			},
+			...getStyles("referenceLine")
+		}, index);
+	});
+	const scatters = mappedData.map((item, index) => {
+		const dimmed = shouldHighlight && highlightedArea !== item.name;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.Scatter, {
+			data: item.data,
+			fill: (0, _mantine_core.getThemeColor)(item.color, theme),
+			isAnimationActive: false,
+			fillOpacity: dimmed ? .1 : 1,
+			...scatterProps,
+			children: [pointLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.LabelList, {
+				dataKey: dataKey[pointLabels],
+				fontSize: 8,
+				dy: 10
+			}), scatterProps?.children]
+		}, index);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+		...getStyles("root"),
+		onMouseLeave: handleMouseLeave,
+		dir: dir || "ltr",
+		...others,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+			...getStyles("container"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.ScatterChart, {
+				margin: {
+					bottom: xAxisLabel ? 30 : void 0,
+					left: yAxisLabel ? 10 : void 0,
+					right: yAxisLabel ? 5 : void 0
+				},
+				...scatterChartProps,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, {
+						strokeDasharray,
+						vertical: gridAxis === "y" || gridAxis === "xy",
+						horizontal: gridAxis === "x" || gridAxis === "xy",
+						...getStyles("grid"),
+						...gridProps
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.XAxis, {
+						type: "number",
+						hide: !withXAxis,
+						dataKey: dataKey.x,
+						tick: {
+							transform: "translate(0, 10)",
+							fontSize: 12,
+							fill: "currentColor"
+						},
+						stroke: "",
+						interval: "preserveStartEnd",
+						tickLine: withXTickLine ? { stroke: "currentColor" } : false,
+						minTickGap: 5,
+						unit: unit?.x,
+						tickFormatter: xFormatter,
+						...getStyles("axis"),
+						...xAxisProps,
+						children: [xAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
+							position: "insideBottom",
+							offset: -20,
+							fontSize: 12,
+							...getStyles("axisLabel"),
+							children: xAxisLabel
+						}), xAxisProps?.children]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.YAxis, {
+						type: "number",
+						hide: !withYAxis,
+						axisLine: false,
+						dataKey: dataKey.y,
+						tickLine: withYTickLine ? { stroke: "currentColor" } : false,
+						tick: {
+							transform: "translate(-10, 0)",
+							fontSize: 12,
+							fill: "currentColor"
+						},
+						allowDecimals: true,
+						unit: unit?.y,
+						tickFormatter: yFormatter,
+						...getStyles("axis"),
+						...yAxisProps,
+						children: [yAxisLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Label, {
+							position: "insideLeft",
+							angle: -90,
+							textAnchor: "middle",
+							fontSize: 12,
+							offset: -5,
+							...getStyles("axisLabel"),
+							children: yAxisLabel
+						}), yAxisProps?.children]
+					}),
+					withTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+						animationDuration: tooltipAnimationDuration,
+						isAnimationActive: tooltipAnimationDuration !== 0,
+						position: { y: 0 },
+						cursor: {
+							stroke: "var(--chart-grid-color)",
+							strokeWidth: 1,
+							strokeDasharray
+						},
+						content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartTooltip.ChartTooltip, {
+							type: "scatter",
+							label: labelFormatter && payload ? labelFormatter(label, payload) : label,
+							payload: labels ? payload?.map((item) => ({
+								...item,
+								name: labels[getAxis(item.name, dataKey)] || item.name,
+								value: getFormatter(getAxis(item.name, dataKey))?.(item.value) ?? item.value
+							})) : payload?.map((item) => ({
+								...item,
+								value: getFormatter(getAxis(item.name, dataKey))?.(item.value) ?? item.value
+							})),
+							classNames: resolvedClassNames,
+							styles: resolvedStyles,
+							series: data,
+							attributes
+						}),
+						...tooltipProps
+					}),
+					withLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
+						verticalAlign: "top",
+						content: (payload) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartLegend.ChartLegend, {
+							payload: payload.payload?.map((item, index) => ({
+								...item,
+								dataKey: data[index].name
+							})),
+							onHighlight: setHighlightedArea,
+							legendPosition: legendProps?.verticalAlign || "top",
+							classNames: resolvedClassNames,
+							styles: resolvedStyles,
+							series: data,
+							attributes
+						}),
+						height: 44,
+						...legendProps
+					}),
+					referenceLinesItems,
+					scatters
+				]
+			})
+		})
+	});
 });
 ScatterChart.displayName = "@mantine/charts/ScatterChart";
-ScatterChart.classes = gridChart_module;
+ScatterChart.classes = require_grid_chart_module.default;
 ScatterChart.varsResolver = varsResolver;
-
+//#endregion
 exports.ScatterChart = ScatterChart;
-//# sourceMappingURL=ScatterChart.cjs.map
+
+//# sourceMappingURL=ScatterChart.cjs.map