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

package/esm/BarChart/BarChart.mjs

@@ -1,374 +1,293 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, createElement } from 'react';
-import { Bar, Cell, LabelList, ReferenceLine, ResponsiveContainer, BarChart as BarChart$1, Legend, XAxis, Label, YAxis, CartesianGrid, Tooltip } from 'recharts';
-import { createVarsResolver, getThemeColor, factory, useProps, useMantineTheme, useResolvedStylesApi, useStyles, Box } from '@mantine/core';
-import { ChartLegend } from '../ChartLegend/ChartLegend.mjs';
-import { ChartTooltip } from '../ChartTooltip/ChartTooltip.mjs';
-import classes from '../grid-chart.module.css.mjs';
-
+"use client";
+import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
+import { ChartLegend } from "../ChartLegend/ChartLegend.mjs";
+import grid_chart_module_default from "../grid-chart.module.mjs";
+import { Box, createVarsResolver, factory, getThemeColor, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createElement, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Label, LabelList, Legend, Rectangle, ReferenceLine, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+//#region packages/@mantine/charts/src/BarChart/BarChart.tsx
 function valueToPercent(value) {
-  return `${(value * 100).toFixed(0)}%`;
+	return `${(value * 100).toFixed(0)}%`;
 }
 const defaultProps = {
-  withXAxis: true,
-  withYAxis: true,
-  withTooltip: true,
-  tooltipAnimationDuration: 0,
-  fillOpacity: 1,
-  tickLine: "y",
-  strokeDasharray: "5 5",
-  gridAxis: "x",
-  type: "default"
+	withXAxis: true,
+	withYAxis: true,
+	withTooltip: true,
+	tooltipAnimationDuration: 0,
+	fillOpacity: 1,
+	tickLine: "y",
+	strokeDasharray: "5 5",
+	gridAxis: "x",
+	type: "default"
 };
-const varsResolver = createVarsResolver(
-  (theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({
-    root: {
-      "--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
-      "--chart-grid-color": gridColor ? getThemeColor(gridColor, theme) : void 0,
-      "--chart-cursor-fill": cursorFill ? getThemeColor(cursorFill, theme) : void 0,
-      "--chart-bar-label-color": barLabelColor ? getThemeColor(barLabelColor, theme) : void 0
-    }
-  })
-);
+const varsResolver = createVarsResolver((theme, { textColor, gridColor, cursorFill, barLabelColor }) => ({ root: {
+	"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
+	"--chart-grid-color": gridColor ? getThemeColor(gridColor, theme) : void 0,
+	"--chart-cursor-fill": cursorFill ? getThemeColor(cursorFill, theme) : void 0,
+	"--chart-bar-label-color": barLabelColor ? getThemeColor(barLabelColor, theme) : void 0
+} }));
 function calculateCumulativeTotal(waterfallData, dataKey) {
-  let start = 0;
-  let end = 0;
-  return waterfallData.map((item) => {
-    if (item.standalone) {
-      for (const prop in item) {
-        if (typeof item[prop] === "number" && prop !== dataKey) {
-          item[prop] = [0, item[prop]];
-        }
-      }
-    } else {
-      for (const prop in item) {
-        if (typeof item[prop] === "number" && prop !== dataKey) {
-          end += item[prop];
-          item[prop] = [start, end];
-          start = end;
-        }
-      }
-    }
-    return item;
-  });
+	let start = 0;
+	let end = 0;
+	return waterfallData.map((item) => {
+		if (item.standalone) {
+			for (const prop in item) if (typeof item[prop] === "number" && prop !== dataKey) item[prop] = [0, item[prop]];
+		} else for (const prop in item) if (typeof item[prop] === "number" && prop !== dataKey) {
+			end += item[prop];
+			item[prop] = [start, end];
+			start = end;
+		}
+		return item;
+	});
 }
 function getBarFill(barProps, series) {
-  if (typeof barProps === "function") {
-    return barProps(series).fill;
-  }
-  return barProps?.fill;
+	if (typeof barProps === "function") return barProps(series).fill;
+	return barProps?.fill;
 }
-const BarChart = factory((_props) => {
-  const props = useProps("BarChart", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    vars,
-    data,
-    withLegend,
-    legendProps,
-    series,
-    onMouseLeave,
-    dataKey,
-    withTooltip,
-    withXAxis,
-    withYAxis,
-    gridAxis,
-    tickLine,
-    xAxisProps,
-    yAxisProps,
-    unit,
-    tooltipAnimationDuration,
-    strokeDasharray,
-    gridProps,
-    tooltipProps,
-    referenceLines,
-    fillOpacity,
-    barChartProps,
-    type,
-    orientation,
-    dir,
-    valueFormatter,
-    children,
-    barProps,
-    xAxisLabel,
-    yAxisLabel,
-    withBarValueLabel,
-    valueLabelProps,
-    withRightYAxis,
-    rightYAxisLabel,
-    rightYAxisProps,
-    minBarSize,
-    maxBarWidth,
-    mod,
-    getBarColor,
-    gridColor,
-    textColor,
-    attributes,
-    ...others
-  } = props;
-  const theme = useMantineTheme();
-  const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
-  const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
-  const [highlightedArea, setHighlightedArea] = useState(null);
-  const shouldHighlight = highlightedArea !== null;
-  const stacked = type === "stacked" || type === "percent";
-  const tickFormatter = type === "percent" ? valueToPercent : valueFormatter;
-  const handleMouseLeave = (event) => {
-    setHighlightedArea(null);
-    onMouseLeave?.(event);
-  };
-  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const inputData = type === "waterfall" ? calculateCumulativeTotal(data, dataKey) : data;
-  const getStyles = useStyles({
-    name: "BarChart",
-    classes,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver
-  });
-  const bars = series.map((item) => {
-    const color = getThemeColor(item.color, theme);
-    const dimmed = shouldHighlight && highlightedArea !== item.name;
-    return /* @__PURE__ */ createElement(
-      Bar,
-      {
-        ...getStyles("bar"),
-        key: item.name,
-        name: item.name,
-        dataKey: item.name,
-        fill: color,
-        stroke: color,
-        isAnimationActive: false,
-        fillOpacity: dimmed ? 0.1 : fillOpacity,
-        strokeOpacity: dimmed ? 0.2 : 0,
-        stackId: stacked ? "stack" : item.stackId || void 0,
-        yAxisId: item.yAxisId || void 0,
-        minPointSize: minBarSize,
-        ...typeof barProps === "function" ? barProps(item) : barProps
-      },
-      inputData.map((entry, index) => {
-        const cellColor = entry.color ? getThemeColor(entry.color, theme) : typeof getBarColor === "function" ? getThemeColor(getBarColor(entry[item.name], item), theme) : getBarFill(barProps, item) || color;
-        return /* @__PURE__ */ jsx(Cell, { fill: cellColor }, `cell-${index}`);
-      }),
-      withBarValueLabel && /* @__PURE__ */ jsx(
-        LabelList,
-        {
-          position: orientation === "vertical" ? "right" : "top",
-          fontSize: 12,
-          fill: "var(--chart-bar-label-color, var(--mantine-color-dimmed))",
-          formatter: (val) => tickFormatter?.(val),
-          ...typeof valueLabelProps === "function" ? valueLabelProps(item) : valueLabelProps
-        }
-      )
-    );
-  });
-  const referenceLinesItems = referenceLines?.map((line, index) => {
-    const color = getThemeColor(line.color, theme);
-    return /* @__PURE__ */ jsx(
-      ReferenceLine,
-      {
-        stroke: line.color ? color : "var(--chart-grid-color)",
-        strokeWidth: 1,
-        yAxisId: line.yAxisId || void 0,
-        ...line,
-        label: {
-          value: line.label,
-          fill: line.color ? color : "currentColor",
-          fontSize: 12,
-          position: line.labelPosition ?? "insideBottomLeft"
-        },
-        ...getStyles("referenceLine")
-      },
-      index
-    );
-  });
-  const sharedYAxisProps = {
-    axisLine: false,
-    ...orientation === "vertical" ? { dataKey, type: "category" } : { type: "number" },
-    tickLine: withYTickLine ? { stroke: "currentColor" } : false,
-    allowDecimals: true,
-    unit,
-    tickFormatter: orientation === "vertical" ? void 0 : tickFormatter,
-    ...getStyles("axis")
-  };
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...getStyles("root"),
-      onMouseLeave: handleMouseLeave,
-      dir: dir || "ltr",
-      mod: [{ orientation }, mod],
-      ...others,
-      children: /* @__PURE__ */ jsx(ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxs(
-        BarChart$1,
-        {
-          data: inputData,
-          stackOffset: type === "percent" ? "expand" : void 0,
-          layout: orientation,
-          maxBarSize: maxBarWidth,
-          margin: {
-            bottom: xAxisLabel ? 30 : void 0,
-            left: yAxisLabel ? 10 : void 0,
-            right: yAxisLabel ? 5 : void 0
-          },
-          ...barChartProps,
-          children: [
-            withLegend && /* @__PURE__ */ jsx(
-              Legend,
-              {
-                verticalAlign: "top",
-                content: (payload) => /* @__PURE__ */ jsx(
-                  ChartLegend,
-                  {
-                    payload: payload.payload,
-                    onHighlight: setHighlightedArea,
-                    legendPosition: legendProps?.verticalAlign || "top",
-                    classNames: resolvedClassNames,
-                    styles: resolvedStyles,
-                    series,
-                    showColor: type !== "waterfall",
-                    attributes
-                  }
-                ),
-                ...legendProps
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              XAxis,
-              {
-                hide: !withXAxis,
-                ...orientation === "vertical" ? { type: "number" } : { dataKey },
-                tick: { transform: "translate(0, 10)", fontSize: 12, fill: "currentColor" },
-                stroke: "",
-                interval: "preserveStartEnd",
-                tickLine: withXTickLine ? { stroke: "currentColor" } : false,
-                minTickGap: 5,
-                tickFormatter: orientation === "vertical" ? tickFormatter : void 0,
-                ...getStyles("axis"),
-                ...xAxisProps,
-                children: [
-                  xAxisLabel && /* @__PURE__ */ jsx(Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel"), children: xAxisLabel }),
-                  xAxisProps?.children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              YAxis,
-              {
-                orientation: "left",
-                tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
-                hide: !withYAxis,
-                ...sharedYAxisProps,
-                ...yAxisProps,
-                children: [
-                  yAxisLabel && /* @__PURE__ */ jsx(
-                    Label,
-                    {
-                      position: "insideLeft",
-                      angle: -90,
-                      textAnchor: "middle",
-                      fontSize: 12,
-                      offset: -5,
-                      ...getStyles("axisLabel"),
-                      children: yAxisLabel
-                    }
-                  ),
-                  yAxisProps?.children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              YAxis,
-              {
-                yAxisId: "right",
-                orientation: "right",
-                tick: { transform: "translate(10, 0)", fontSize: 12, fill: "currentColor" },
-                hide: !withRightYAxis,
-                ...sharedYAxisProps,
-                ...rightYAxisProps,
-                children: [
-                  rightYAxisLabel && /* @__PURE__ */ jsx(
-                    Label,
-                    {
-                      position: "insideRight",
-                      angle: 90,
-                      textAnchor: "middle",
-                      fontSize: 12,
-                      offset: -5,
-                      ...getStyles("axisLabel"),
-                      children: rightYAxisLabel
-                    }
-                  ),
-                  yAxisProps?.children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CartesianGrid,
-              {
-                strokeDasharray,
-                vertical: gridAxis === "y" || gridAxis === "xy",
-                horizontal: gridAxis === "x" || gridAxis === "xy",
-                ...getStyles("grid"),
-                ...gridProps
-              }
-            ),
-            withTooltip && /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                animationDuration: tooltipAnimationDuration,
-                isAnimationActive: tooltipAnimationDuration !== 0,
-                position: orientation === "vertical" ? {} : { y: 0 },
-                cursor: {
-                  stroke: "var(--chart-grid-color)",
-                  strokeWidth: 1,
-                  strokeDasharray,
-                  fill: "var(--chart-cursor-fill)"
-                },
-                content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsx(
-                  ChartTooltip,
-                  {
-                    label: labelFormatter && payload ? labelFormatter(label, payload) : label,
-                    payload,
-                    type: type === "waterfall" ? "scatter" : void 0,
-                    unit,
-                    classNames: resolvedClassNames,
-                    styles: resolvedStyles,
-                    series,
-                    valueFormatter,
-                    attributes
-                  }
-                ),
-                ...tooltipProps
-              }
-            ),
-            bars,
-            referenceLinesItems,
-            children
-          ]
-        }
-      ) })
-    }
-  );
+const BarChart$1 = factory((_props) => {
+	const props = useProps("BarChart", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, data, withLegend, legendProps, series, onMouseLeave, dataKey, withTooltip, withXAxis, withYAxis, gridAxis, tickLine, xAxisProps, yAxisProps, unit, tooltipAnimationDuration, strokeDasharray, gridProps, tooltipProps, referenceLines, fillOpacity, barChartProps, type, orientation, dir, valueFormatter, children, barProps, xAxisLabel, yAxisLabel, withBarValueLabel, valueLabelProps, withRightYAxis, rightYAxisLabel, rightYAxisProps, minBarSize, maxBarWidth, mod, getBarColor, gridColor, textColor, attributes, ...others } = props;
+	const theme = useMantineTheme();
+	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
+	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
+	const [highlightedArea, setHighlightedArea] = useState(null);
+	const shouldHighlight = highlightedArea !== null;
+	const stacked = type === "stacked" || type === "percent";
+	const tickFormatter = type === "percent" ? valueToPercent : valueFormatter;
+	const handleMouseLeave = (event) => {
+		setHighlightedArea(null);
+		onMouseLeave?.(event);
+	};
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const inputData = type === "waterfall" ? calculateCumulativeTotal(data, dataKey) : data;
+	const getStyles = useStyles({
+		name: "BarChart",
+		classes: grid_chart_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const bars = series.map((item) => {
+		const color = getThemeColor(item.color, theme);
+		const dimmed = shouldHighlight && highlightedArea !== item.name;
+		const resolvedBarProps = typeof barProps === "function" ? barProps(item) : barProps;
+		const userShape = resolvedBarProps?.shape;
+		return /* @__PURE__ */ createElement(Bar, {
+			...getStyles("bar"),
+			key: item.name,
+			name: item.name,
+			dataKey: item.name,
+			fill: color,
+			stroke: color,
+			isAnimationActive: false,
+			fillOpacity: dimmed ? .1 : fillOpacity,
+			strokeOpacity: dimmed ? .2 : 0,
+			stackId: stacked ? "stack" : item.stackId || void 0,
+			yAxisId: item.yAxisId || void 0,
+			minPointSize: minBarSize,
+			...resolvedBarProps,
+			shape: (shapeProps) => {
+				const entry = shapeProps.payload;
+				const cellColor = entry?.color ? getThemeColor(entry.color, theme) : typeof getBarColor === "function" ? getThemeColor(getBarColor(entry?.[item.name], item), theme) : getBarFill(barProps, item) || color;
+				const coloredProps = {
+					...shapeProps,
+					fill: cellColor
+				};
+				if (typeof userShape === "function") return userShape(coloredProps);
+				if (React.isValidElement(userShape)) return React.cloneElement(userShape, coloredProps);
+				if (typeof userShape === "object" && userShape) return /* @__PURE__ */ jsx(Rectangle, {
+					...coloredProps,
+					...userShape
+				});
+				return /* @__PURE__ */ jsx(Rectangle, { ...coloredProps });
+			}
+		}, withBarValueLabel && /* @__PURE__ */ jsx(LabelList, {
+			position: orientation === "vertical" ? "right" : "top",
+			fontSize: 12,
+			fill: "var(--chart-bar-label-color, var(--mantine-color-dimmed))",
+			formatter: (val) => tickFormatter?.(val),
+			...typeof valueLabelProps === "function" ? valueLabelProps(item) : valueLabelProps
+		}));
+	});
+	const referenceLinesItems = referenceLines?.map((line, index) => {
+		const color = getThemeColor(line.color, theme);
+		return /* @__PURE__ */ jsx(ReferenceLine, {
+			stroke: line.color ? color : "var(--chart-grid-color)",
+			strokeWidth: 1,
+			yAxisId: line.yAxisId || void 0,
+			...line,
+			label: {
+				value: line.label,
+				fill: line.color ? color : "currentColor",
+				fontSize: 12,
+				position: line.labelPosition ?? "insideBottomLeft"
+			},
+			...getStyles("referenceLine")
+		}, index);
+	});
+	const sharedYAxisProps = {
+		axisLine: false,
+		...orientation === "vertical" ? {
+			dataKey,
+			type: "category"
+		} : { type: "number" },
+		tickLine: withYTickLine ? { stroke: "currentColor" } : false,
+		allowDecimals: true,
+		unit,
+		tickFormatter: orientation === "vertical" ? void 0 : tickFormatter,
+		...getStyles("axis")
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		...getStyles("root"),
+		onMouseLeave: handleMouseLeave,
+		dir: dir || "ltr",
+		mod: [{ orientation }, mod],
+		...others,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			...getStyles("container"),
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data: inputData,
+				stackOffset: type === "percent" ? "expand" : void 0,
+				layout: orientation,
+				maxBarSize: maxBarWidth,
+				margin: {
+					bottom: xAxisLabel ? 30 : void 0,
+					left: yAxisLabel ? 10 : void 0,
+					right: yAxisLabel ? 5 : void 0
+				},
+				...barChartProps,
+				children: [
+					withLegend && /* @__PURE__ */ jsx(Legend, {
+						verticalAlign: "top",
+						content: (payload) => /* @__PURE__ */ jsx(ChartLegend, {
+							payload: payload.payload,
+							onHighlight: setHighlightedArea,
+							legendPosition: legendProps?.verticalAlign || "top",
+							classNames: resolvedClassNames,
+							styles: resolvedStyles,
+							series,
+							showColor: type !== "waterfall",
+							attributes
+						}),
+						...legendProps
+					}),
+					/* @__PURE__ */ jsxs(XAxis, {
+						hide: !withXAxis,
+						...orientation === "vertical" ? { type: "number" } : { dataKey },
+						tick: {
+							transform: "translate(0, 10)",
+							fontSize: 12,
+							fill: "currentColor"
+						},
+						stroke: "",
+						interval: "preserveStartEnd",
+						tickLine: withXTickLine ? { stroke: "currentColor" } : false,
+						minTickGap: 5,
+						tickFormatter: orientation === "vertical" ? tickFormatter : void 0,
+						...getStyles("axis"),
+						...xAxisProps,
+						children: [xAxisLabel && /* @__PURE__ */ jsx(Label, {
+							position: "insideBottom",
+							offset: -20,
+							fontSize: 12,
+							...getStyles("axisLabel"),
+							children: xAxisLabel
+						}), xAxisProps?.children]
+					}),
+					/* @__PURE__ */ jsxs(YAxis, {
+						orientation: "left",
+						tick: {
+							transform: "translate(-10, 0)",
+							fontSize: 12,
+							fill: "currentColor"
+						},
+						hide: !withYAxis,
+						...sharedYAxisProps,
+						...yAxisProps,
+						children: [yAxisLabel && /* @__PURE__ */ jsx(Label, {
+							position: "insideLeft",
+							angle: -90,
+							textAnchor: "middle",
+							fontSize: 12,
+							offset: -5,
+							...getStyles("axisLabel"),
+							children: yAxisLabel
+						}), yAxisProps?.children]
+					}),
+					/* @__PURE__ */ jsxs(YAxis, {
+						yAxisId: "right",
+						orientation: "right",
+						tick: {
+							transform: "translate(10, 0)",
+							fontSize: 12,
+							fill: "currentColor"
+						},
+						hide: !withRightYAxis,
+						...sharedYAxisProps,
+						...rightYAxisProps,
+						children: [rightYAxisLabel && /* @__PURE__ */ jsx(Label, {
+							position: "insideRight",
+							angle: 90,
+							textAnchor: "middle",
+							fontSize: 12,
+							offset: -5,
+							...getStyles("axisLabel"),
+							children: rightYAxisLabel
+						}), yAxisProps?.children]
+					}),
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray,
+						vertical: gridAxis === "y" || gridAxis === "xy",
+						horizontal: gridAxis === "x" || gridAxis === "xy",
+						...getStyles("grid"),
+						...gridProps
+					}),
+					withTooltip && /* @__PURE__ */ jsx(Tooltip$1, {
+						animationDuration: tooltipAnimationDuration,
+						isAnimationActive: tooltipAnimationDuration !== 0,
+						position: orientation === "vertical" ? {} : { y: 0 },
+						cursor: {
+							stroke: "var(--chart-grid-color)",
+							strokeWidth: 1,
+							strokeDasharray,
+							fill: "var(--chart-cursor-fill)"
+						},
+						content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsx(ChartTooltip, {
+							label: labelFormatter && payload ? labelFormatter(label, payload) : label,
+							payload,
+							type: type === "waterfall" ? "scatter" : void 0,
+							unit,
+							classNames: resolvedClassNames,
+							styles: resolvedStyles,
+							series,
+							valueFormatter,
+							attributes
+						}),
+						...tooltipProps
+					}),
+					bars,
+					referenceLinesItems,
+					children
+				]
+			})
+		})
+	});
 });
-BarChart.displayName = "@mantine/charts/BarChart";
-BarChart.classes = classes;
-BarChart.varsResolver = varsResolver;
+BarChart$1.displayName = "@mantine/charts/BarChart";
+BarChart$1.classes = grid_chart_module_default;
+BarChart$1.varsResolver = varsResolver;
+//#endregion
+export { BarChart$1 as BarChart };
 
-export { BarChart };
-//# sourceMappingURL=BarChart.mjs.map
+//# sourceMappingURL=BarChart.mjs.map