@mantine/charts 9.4.2 → 9.5.0

package/cjs/BulletChart/BulletChart.cjs

@@ -0,0 +1,137 @@
+"use client";
+const require_BulletChart_module = require("./BulletChart.module.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/charts/src/BulletChart/BulletChart.tsx
+const defaultProps = {
+	orientation: "horizontal",
+	size: 32,
+	barSize: 16,
+	targetRatio: .7,
+	targetSize: 2,
+	withTooltip: false
+};
+const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { size, barSize }) => ({ root: {
+	"--bullet-size": (0, _mantine_core.rem)(size),
+	"--bullet-bar-size": (0, _mantine_core.rem)(barSize)
+} }));
+const BulletChart = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("BulletChart", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, value, target, ranges, orientation, label, valueFormatter, barColor, targetColor, size, barSize, targetRatio, targetSize, withTooltip, getTooltipLabel, variant, ...others } = props;
+	const theme = (0, _mantine_core.useMantineTheme)();
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: "BulletChart",
+		classes: require_BulletChart_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const isVertical = orientation === "vertical";
+	const maxRange = Math.max(...ranges.map((r) => r.value), 0);
+	const formatValue = (v) => valueFormatter ? valueFormatter(v) : v.toString();
+	const toPercentage = (v) => maxRange > 0 ? Math.max(0, Math.min(v / maxRange * 100, 100)) : 0;
+	const resolvedBarColor = barColor ? (0, _mantine_core.getThemeColor)(barColor, theme) : "var(--mantine-color-white)";
+	const resolvedTargetColor = targetColor ? (0, _mantine_core.getThemeColor)(targetColor, theme) : void 0;
+	const sortedRanges = [...ranges].sort((a, b) => b.value - a.value);
+	const rangeBands = sortedRanges.map((range, index) => {
+		const percentage = toPercentage(range.value);
+		const sizeStyle = isVertical ? {
+			height: `${percentage}%`,
+			bottom: 0
+		} : { width: `${percentage}%` };
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("range", { style: {
+			...sizeStyle,
+			backgroundColor: (0, _mantine_core.getThemeColor)(range.color, theme)
+		} }) }, index);
+	});
+	const rangeLabels = sortedRanges.map((range, index) => {
+		const percentage = toPercentage(range.value);
+		const positionStyle = isVertical ? { bottom: `${percentage}%` } : { left: `${percentage}%` };
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...getStyles("rangeLabel", { style: positionStyle }),
+			children: formatValue(range.value)
+		}, index);
+	});
+	const barPercentage = toPercentage(value);
+	const barElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("bar", { style: {
+		...isVertical ? {
+			height: `${barPercentage}%`,
+			bottom: 0
+		} : { width: `${barPercentage}%` },
+		backgroundColor: resolvedBarColor
+	} }) });
+	const barLabelElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...getStyles("barLabel", { style: isVertical ? { bottom: `${barPercentage}%` } : { left: `${barPercentage}%` } }),
+		children: formatValue(value)
+	});
+	const targetPercentage = target != null ? toPercentage(target) : 0;
+	const targetElement = target != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("target", { style: isVertical ? {
+		bottom: `${targetPercentage}%`,
+		width: `${targetRatio * 100}%`,
+		height: (0, _mantine_core.rem)(targetSize),
+		backgroundColor: resolvedTargetColor
+	} : {
+		left: `${targetPercentage}%`,
+		height: `${targetRatio * 100}%`,
+		width: (0, _mantine_core.rem)(targetSize),
+		backgroundColor: resolvedTargetColor
+	} }) }) : null;
+	const targetLabelElement = target != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...getStyles("targetLabel", { style: isVertical ? { bottom: `${targetPercentage}%` } : { left: `${targetPercentage}%` } }),
+		children: formatValue(target)
+	}) : null;
+	const getDefaultTooltipLabel = () => {
+		const parts = [`Value: ${formatValue(value)}`];
+		if (target != null) parts.push(`Target: ${formatValue(target)}`);
+		return parts.join(" / ");
+	};
+	const tooltipLabel = getTooltipLabel ? getTooltipLabel({
+		value,
+		target
+	}) : getDefaultTooltipLabel();
+	const trackWrapper = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...getStyles("trackWrapper"),
+		"data-orientation": orientation,
+		children: [
+			rangeLabels,
+			targetLabelElement,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...getStyles("track"),
+				"data-orientation": orientation,
+				children: [
+					rangeBands,
+					barElement,
+					targetElement
+				]
+			}),
+			barLabelElement
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("root"),
+		variant,
+		mod: { orientation },
+		...others,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...getStyles("label"),
+			children: label
+		}), withTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Tooltip, {
+			label: tooltipLabel,
+			position: isVertical ? "right" : "top",
+			children: trackWrapper
+		}) : trackWrapper]
+	});
+});
+BulletChart.displayName = "@mantine/charts/BulletChart";
+BulletChart.classes = require_BulletChart_module.default;
+BulletChart.varsResolver = varsResolver;
+//#endregion
+exports.BulletChart = BulletChart;
+
+//# sourceMappingURL=BulletChart.cjs.map

package/cjs/BulletChart/BulletChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart.cjs","names":["Box","Tooltip","classes"],"sources":["../../src/BulletChart/BulletChart.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  Tooltip,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport classes from './BulletChart.module.css';\n\nexport interface BulletChartRange {\n  /** Upper bound value for this range */\n  value: number;\n\n  /** Background color of the range band */\n  color: MantineColor;\n\n  /** Optional label for the range */\n  label?: string;\n}\n\nexport type BulletChartStylesNames =\n  | 'root'\n  | 'label'\n  | 'trackWrapper'\n  | 'track'\n  | 'range'\n  | 'bar'\n  | 'target'\n  | 'rangeLabel'\n  | 'barLabel'\n  | 'targetLabel';\n\nexport type BulletChartCssVariables = {\n  root: '--bullet-size' | '--bullet-bar-size';\n};\n\nexport interface BulletChartProps\n  extends BoxProps, StylesApiProps<BulletChartFactory>, ElementProps<'div'> {\n  /** Current actual value */\n  value: number;\n\n  /** Target value, displayed as a marker line */\n  target?: number;\n\n  /** Qualitative ranges displayed as background bands */\n  ranges: BulletChartRange[];\n\n  /** Orientation, @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Label displayed next to the chart */\n  label?: React.ReactNode;\n\n  /** Value formatter for tooltip/display and labels */\n  valueFormatter?: (value: number) => string;\n\n  /** Color of the actual value bar, @default 'white' */\n  barColor?: MantineColor;\n\n  /** Color of the target marker, @default 'dark' for light, 'white' for dark */\n  targetColor?: MantineColor;\n\n  /** Height of the chart track area (ranges), @default 32 */\n  size?: number | string;\n\n  /** Height of the actual value bar, @default 16 */\n  barSize?: number | string;\n\n  /** Target marker size relative to chart size, @default 0.7 */\n  targetRatio?: number;\n\n  /** Target marker thickness, @default 2 */\n  targetSize?: number | string;\n\n  /** Whether to show tooltip on hover, @default false */\n  withTooltip?: boolean;\n\n  /** Custom tooltip content */\n  getTooltipLabel?: (data: { value: number; target?: number }) => React.ReactNode;\n}\n\nexport type BulletChartFactory = Factory<{\n  props: BulletChartProps;\n  ref: HTMLDivElement;\n  stylesNames: BulletChartStylesNames;\n  vars: BulletChartCssVariables;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  size: 32,\n  barSize: 16,\n  targetRatio: 0.7,\n  targetSize: 2,\n  withTooltip: false,\n} satisfies Partial<BulletChartProps>;\n\nconst varsResolver = createVarsResolver<BulletChartFactory>((_theme, { size, barSize }) => ({\n  root: {\n    '--bullet-size': rem(size),\n    '--bullet-bar-size': rem(barSize),\n  },\n}));\n\nexport const BulletChart = factory<BulletChartFactory>((_props) => {\n  const props = useProps('BulletChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    value,\n    target,\n    ranges,\n    orientation,\n    label,\n    valueFormatter,\n    barColor,\n    targetColor,\n    size,\n    barSize,\n    targetRatio,\n    targetSize,\n    withTooltip,\n    getTooltipLabel,\n    variant,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<BulletChartFactory>({\n    name: 'BulletChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const isVertical = orientation === 'vertical';\n  const maxRange = Math.max(...ranges.map((r) => r.value), 0);\n  const formatValue = (v: number) => (valueFormatter ? valueFormatter(v) : v.toString());\n\n  // Clamp positions/sizes to the track so out-of-range values and targets never overflow it\n  const toPercentage = (v: number) =>\n    maxRange > 0 ? Math.max(0, Math.min((v / maxRange) * 100, 100)) : 0;\n\n  const resolvedBarColor = barColor ? getThemeColor(barColor, theme) : 'var(--mantine-color-white)';\n\n  const resolvedTargetColor = targetColor ? getThemeColor(targetColor, theme) : undefined;\n\n  const sortedRanges = [...ranges].sort((a, b) => b.value - a.value);\n\n  const rangeBands = sortedRanges.map((range, index) => {\n    const percentage = toPercentage(range.value);\n    const sizeStyle = isVertical\n      ? { height: `${percentage}%`, bottom: 0 }\n      : { width: `${percentage}%` };\n\n    return (\n      <div\n        key={index}\n        {...getStyles('range', {\n          style: {\n            ...sizeStyle,\n            backgroundColor: getThemeColor(range.color, theme),\n          },\n        })}\n      />\n    );\n  });\n\n  const rangeLabels = sortedRanges.map((range, index) => {\n    const percentage = toPercentage(range.value);\n    const positionStyle = isVertical ? { bottom: `${percentage}%` } : { left: `${percentage}%` };\n\n    return (\n      <div key={index} {...getStyles('rangeLabel', { style: positionStyle })}>\n        {formatValue(range.value)}\n      </div>\n    );\n  });\n\n  const barPercentage = toPercentage(value);\n  const barSizeStyle = isVertical\n    ? { height: `${barPercentage}%`, bottom: 0 }\n    : { width: `${barPercentage}%` };\n\n  const barElement = (\n    <div\n      {...getStyles('bar', {\n        style: {\n          ...barSizeStyle,\n          backgroundColor: resolvedBarColor,\n        },\n      })}\n    />\n  );\n\n  const barLabelPosition = isVertical\n    ? { bottom: `${barPercentage}%` }\n    : { left: `${barPercentage}%` };\n\n  const barLabelElement = (\n    <div {...getStyles('barLabel', { style: barLabelPosition })}>{formatValue(value)}</div>\n  );\n\n  const targetPercentage = target != null ? toPercentage(target) : 0;\n\n  const targetElement =\n    target != null ? (\n      <div\n        {...getStyles('target', {\n          style: isVertical\n            ? {\n                bottom: `${targetPercentage}%`,\n                width: `${targetRatio! * 100}%`,\n                height: rem(targetSize),\n                backgroundColor: resolvedTargetColor,\n              }\n            : {\n                left: `${targetPercentage}%`,\n                height: `${targetRatio! * 100}%`,\n                width: rem(targetSize),\n                backgroundColor: resolvedTargetColor,\n              },\n        })}\n      />\n    ) : null;\n\n  const targetLabelElement =\n    target != null ? (\n      <div\n        {...getStyles('targetLabel', {\n          style: isVertical ? { bottom: `${targetPercentage}%` } : { left: `${targetPercentage}%` },\n        })}\n      >\n        {formatValue(target)}\n      </div>\n    ) : null;\n\n  const getDefaultTooltipLabel = () => {\n    const parts = [`Value: ${formatValue(value)}`];\n    if (target != null) {\n      parts.push(`Target: ${formatValue(target)}`);\n    }\n    return parts.join(' / ');\n  };\n\n  const tooltipLabel = getTooltipLabel\n    ? getTooltipLabel({ value, target })\n    : getDefaultTooltipLabel();\n\n  const trackWrapper = (\n    <div {...getStyles('trackWrapper')} data-orientation={orientation}>\n      {rangeLabels}\n      {targetLabelElement}\n      <div {...getStyles('track')} data-orientation={orientation}>\n        {rangeBands}\n        {barElement}\n        {targetElement}\n      </div>\n      {barLabelElement}\n    </div>\n  );\n\n  return (\n    <Box {...getStyles('root')} variant={variant} mod={{ orientation }} {...others}>\n      {label && <div {...getStyles('label')}>{label}</div>}\n      {withTooltip ? (\n        <Tooltip label={tooltipLabel} position={isVertical ? 'right' : 'top'}>\n          {trackWrapper}\n        </Tooltip>\n      ) : (\n        trackWrapper\n      )}\n    </Box>\n  );\n});\n\nBulletChart.displayName = '@mantine/charts/BulletChart';\nBulletChart.classes = classes;\nBulletChart.varsResolver = varsResolver;\n"],"mappings":"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"}

package/cjs/BulletChart/BulletChart.module.cjs

@@ -0,0 +1,18 @@
+"use client";
+//#region packages/@mantine/charts/src/BulletChart/BulletChart.module.css
+var BulletChart_module_default = {
+	"root": "m_f1b033",
+	"label": "m_1ce939c3",
+	"trackWrapper": "m_dcd57f19",
+	"track": "m_1d61ac1a",
+	"range": "m_1d3df40c",
+	"bar": "m_8499ea2",
+	"target": "m_8dec10a2",
+	"rangeLabel": "m_18314248",
+	"barLabel": "m_73d6c572",
+	"targetLabel": "m_abeb9372"
+};
+//#endregion
+exports.default = BulletChart_module_default;
+
+//# sourceMappingURL=BulletChart.module.cjs.map

package/cjs/BulletChart/BulletChart.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart.module.cjs","names":[],"sources":["../../src/BulletChart/BulletChart.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-md);\n  width: 100%;\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n    width: auto;\n    height: 100%;\n  }\n}\n\n.label {\n  font-size: var(--mantine-font-size-sm);\n  font-weight: var(--mantine-font-weight-medium);\n  white-space: nowrap;\n  color: var(--mantine-color-text);\n}\n\n.trackWrapper {\n  position: relative;\n  flex: 1;\n  padding-top: calc(var(--mantine-font-size-xs) + rem(4px));\n  padding-bottom: calc(var(--mantine-font-size-xs) + rem(4px));\n\n  &[data-orientation='vertical'] {\n    flex: 1;\n    height: 100%;\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: calc(var(--mantine-font-size-xs) + 40px);\n    padding-right: calc(var(--mantine-font-size-xs) + 40px);\n  }\n}\n\n.track {\n  position: relative;\n  height: var(--bullet-size);\n  border-radius: var(--mantine-radius-sm);\n  overflow: hidden;\n\n  [data-orientation='vertical'] > & {\n    width: var(--bullet-size);\n    height: 100%;\n  }\n}\n\n.range {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--mantine-radius-sm);\n\n  [data-orientation='vertical'] > .track > & {\n    top: auto;\n    left: 0;\n    width: 100%;\n    height: auto;\n    border-radius: var(--mantine-radius-sm);\n  }\n}\n\n.bar {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  height: var(--bullet-bar-size);\n  transform: translateY(-50%);\n  border-radius: 0 var(--mantine-radius-xs) var(--mantine-radius-xs) 0;\n  z-index: 1;\n\n  [data-orientation='vertical'] > .track > & {\n    top: auto;\n    left: 50%;\n    width: var(--bullet-bar-size);\n    height: auto;\n    transform: translateX(-50%);\n    border-radius: var(--mantine-radius-xs) var(--mantine-radius-xs) 0 0;\n  }\n}\n\n.target {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%) translateX(-50%);\n  z-index: 2;\n  border-radius: var(--mantine-radius-xs);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-dark-filled);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-white);\n  }\n\n  [data-orientation='vertical'] > .track > & {\n    top: auto;\n    left: 50%;\n    transform: translateX(-50%) translateY(50%);\n  }\n}\n\n.rangeLabel {\n  position: absolute;\n  top: 0;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-xs);\n  color: var(--mantine-color-dimmed);\n  white-space: nowrap;\n  line-height: 1;\n\n  [data-orientation='vertical'] > & {\n    top: auto;\n    left: auto;\n    right: 0;\n    transform: translateY(50%);\n  }\n}\n\n.barLabel {\n  position: absolute;\n  bottom: 0;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-xs);\n  font-weight: var(--mantine-font-weight-bold);\n  color: var(--mantine-color-text);\n  white-space: nowrap;\n  line-height: 1;\n\n  [data-orientation='vertical'] > & {\n    bottom: auto;\n    left: 0;\n    transform: translateY(50%);\n  }\n}\n\n.targetLabel {\n  position: absolute;\n  top: 0;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-xs);\n  color: var(--mantine-color-dimmed);\n  white-space: nowrap;\n  line-height: 1;\n\n  [data-orientation='vertical'] > & {\n    top: auto;\n    left: auto;\n    right: 0;\n    transform: translateY(50%);\n  }\n}\n"],"mappings":""}

package/cjs/ChartBrush/ChartBrush.cjs

@@ -0,0 +1,35 @@
+"use client";
+const require_ChartBrush_module = require("./ChartBrush.module.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+//#region packages/@mantine/charts/src/ChartBrush/ChartBrush.tsx
+const defaultProps = {};
+const ChartBrush = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("ChartBrush", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, ...others } = props;
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: "ChartBrush",
+		classes: require_ChartBrush_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Brush, {
+		dy: 8,
+		stroke: "var(--chart-grid-color)",
+		fill: "var(--mantine-color-body)",
+		...others,
+		...getStyles("brush")
+	});
+});
+ChartBrush.classes = require_ChartBrush_module.default;
+ChartBrush.displayName = "@mantine/charts/ChartBrush";
+//#endregion
+exports.ChartBrush = ChartBrush;
+
+//# sourceMappingURL=ChartBrush.cjs.map

package/cjs/ChartBrush/ChartBrush.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBrush.cjs","names":["Brush","classes"],"sources":["../../src/ChartBrush/ChartBrush.tsx"],"sourcesContent":["import { Brush, BrushProps } from 'recharts';\nimport { factory, Factory, StylesApiProps, useProps, useStyles } from '@mantine/core';\nimport classes from './ChartBrush.module.css';\n\nexport type ChartBrushStylesNames = 'brush';\n\nexport interface ChartBrushProps\n  extends Omit<BrushProps, 'ref'>, StylesApiProps<ChartBrushFactory> {}\n\nexport type ChartBrushFactory = Factory<{\n  props: ChartBrushProps;\n  ref: SVGElement;\n  stylesNames: ChartBrushStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<ChartBrushProps>;\n\nexport const ChartBrush = factory<ChartBrushFactory>((_props) => {\n  const props = useProps('ChartBrush', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, vars, attributes, ...others } = props;\n\n  const getStyles = useStyles<ChartBrushFactory>({\n    name: 'ChartBrush',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  return (\n    <Brush\n      dy={8}\n      stroke=\"var(--chart-grid-color)\"\n      fill=\"var(--mantine-color-body)\"\n      {...others}\n      {...getStyles('brush')}\n    />\n  );\n});\n\nChartBrush.classes = classes;\nChartBrush.displayName = '@mantine/charts/ChartBrush';\n"],"mappings":";;;;;;AAeA,MAAM,eAAe,CAAC;AAEtB,MAAa,cAAA,GAAA,cAAA,QAAA,EAAyC,WAAW;CAC/D,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,cAAc,cAAc,MAAM;CACzD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,YAAY,GAAG,WAAW;CAExF,MAAM,aAAA,GAAA,cAAA,UAAA,CAAyC;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,SAAAA,OAAD;EACE,IAAI;EACJ,QAAO;EACP,MAAK;EACL,GAAI;EACJ,GAAI,UAAU,OAAO;CACtB,CAAA;AAEL,CAAC;AAED,WAAW,UAAUC,0BAAAA;AACrB,WAAW,cAAc"}

package/cjs/ChartBrush/ChartBrush.module.cjs

@@ -0,0 +1,7 @@
+"use client";
+//#region packages/@mantine/charts/src/ChartBrush/ChartBrush.module.css
+var ChartBrush_module_default = { "brush": "m_bb368c49" };
+//#endregion
+exports.default = ChartBrush_module_default;
+
+//# sourceMappingURL=ChartBrush.module.cjs.map

package/cjs/ChartBrush/ChartBrush.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBrush.module.cjs","names":[],"sources":["../../src/ChartBrush/ChartBrush.module.css"],"sourcesContent":[".brush {\n  & :where(text) {\n    font-size: var(--mantine-font-size-xs);\n    fill: var(--chart-text-color, var(--mantine-color-dimmed));\n    font-family: var(--mantine-font-family);\n  }\n\n  & :where(:global(.recharts-brush-slide)) {\n    fill: var(--mantine-primary-color-light);\n    fill-opacity: 1;\n  }\n\n  & :where(:global(.recharts-brush-traveller)) rect {\n    fill: var(--mantine-primary-color-filled);\n  }\n}\n"],"mappings":""}

package/cjs/CompositeChart/CompositeChart.cjs

@@ -1,12 +1,13 @@
 "use client";
 const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
 const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
+const require_ChartBrush = require("../ChartBrush/ChartBrush.cjs");
 const require_PointLabel = require("../PointLabel/PointLabel.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");
+let react = require("react");
 //#region packages/@mantine/charts/src/CompositeChart/CompositeChart.tsx
 const defaultProps = {
 	withXAxis: true,
@@ -19,7 +20,8 @@ const defaultProps = {
 	withDots: true,
 	connectNulls: true,
 	strokeWidth: 2,
-	curveType: "monotone"
+	curveType: "monotone",
+	accessibilityLayer: true
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { textColor, gridColor }) => ({ root: {
 	"--chart-text-color": textColor ? (0, _mantine_core.getThemeColor)(textColor, theme) : void 0,
@@ -27,7 +29,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { textColor,
 } }));
 const CompositeChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("CompositeChart", 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, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, ...others } = 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, withDots, dotProps, activeDotProps, strokeWidth, connectNulls, curveType, dir, valueFormatter, children, lineProps, xAxisLabel, yAxisLabel, withRightYAxis, rightYAxisLabel, rightYAxisProps, withPointLabels, areaProps, barProps, withBarValueLabel, minBarSize, maxBarWidth, composedChartProps, attributes, accessibilityLayer, withBrush, brushProps, ...others } = props;
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
 	const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
@@ -183,6 +185,7 @@ const CompositeChart = (0, _mantine_core.factory)((_props) => {
 					left: yAxisLabel ? 10 : void 0,
 					right: yAxisLabel ? 5 : void 0
 				},
+				accessibilityLayer,
 				...composedChartProps,
 				children: [
 					withLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
@@ -291,6 +294,12 @@ const CompositeChart = (0, _mantine_core.factory)((_props) => {
 					}),
 					lines,
 					referenceLinesItems,
+					withBrush && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartBrush.ChartBrush, {
+						dataKey,
+						classNames: resolvedClassNames,
+						styles: resolvedStyles,
+						...brushProps
+					}),
 					children
 				]
 			})

package/cjs/CompositeChart/CompositeChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeChart.cjs","names":["Line","PointLabel","Area","Bar","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsCompositeChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","classes"],"sources":["../../src/CompositeChart/CompositeChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  Bar,\n  BarProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  Line,\n  LineProps,\n  ComposedChart as ReChartsCompositeChart,\n  ReferenceLine,\n  ResponsiveContainer,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n  BaseChartStylesNames,\n  ChartSeries,\n  GridChartBaseProps,\n  MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type CompositeChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport interface CompositeChartSeries extends ChartSeries {\n  type: 'line' | 'area' | 'bar';\n  strokeDasharray?: string | number;\n}\n\nexport type CompositeChartStylesNames =\n  | 'line'\n  | 'area'\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type CompositeChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface CompositeChartProps\n  extends\n    BoxProps,\n    Omit<GridChartBaseProps, 'orientation'>,\n    StylesApiProps<CompositeChartFactory>,\n    ElementProps<'div'> {\n  /** Data used to display chart */\n  data: Record<string, any>[];\n\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: CompositeChartSeries[];\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: CompositeChartCurveType;\n\n  /** Determines whether dots should be displayed @default true */\n  withDots?: boolean;\n\n  /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n  dotProps?: MantineChartDotProps;\n\n  /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n  activeDotProps?: MantineChartDotProps;\n\n  /** Stroke width for the chart lines @default 2 */\n  strokeWidth?: number;\n\n  /** Determines whether points with `null` values should be connected @default true */\n  connectNulls?: boolean;\n\n  /** Additional components that are rendered inside recharts `AreaChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Line` component */\n  lineProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n    | Partial<Omit<LineProps, 'ref'>>;\n\n  /** Props passed down to recharts `Area` component */\n  areaProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether each point should have associated label @default false */\n  withPointLabels?: boolean;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar @default false */\n  withBarValueLabel?: boolean;\n\n  /** Sets minimum height of the bar in px @default 0 */\n  minBarSize?: number;\n\n  /** Maximum bar width in px */\n  maxBarWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;\n}\n\nexport type CompositeChartFactory = Factory<{\n  props: CompositeChartProps;\n  ref: HTMLDivElement;\n  stylesNames: CompositeChartStylesNames;\n  vars: CompositeChartCssVariables;\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  withDots: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  curveType: 'monotone',\n} satisfies Partial<CompositeChartProps>;\n\nconst varsResolver = createVarsResolver<CompositeChartFactory>(\n  (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);\n\nexport const CompositeChart = factory<CompositeChartFactory>((_props) => {\n  const props = useProps('CompositeChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withLegend,\n    legendProps,\n    series,\n    onMouseLeave,\n    dataKey,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    gridAxis,\n    tickLine,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    tooltipAnimationDuration,\n    strokeDasharray,\n    gridProps,\n    tooltipProps,\n    referenceLines,\n    withDots,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    connectNulls,\n    curveType,\n    dir,\n    valueFormatter,\n    children,\n    lineProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    areaProps,\n    barProps,\n    withBarValueLabel,\n    minBarSize,\n    maxBarWidth,\n    composedChartProps,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\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  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CompositeChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<CompositeChartFactory>({\n    name: 'CompositeChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const lines = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    if (item.type === 'line') {\n      return (\n        <Line\n          {...getStyles('line')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? { fill: 'var(--mantine-color-white)', stroke: color, ...activeDotProps }\n              : false\n          }\n          fill={color}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0 : 1}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          connectNulls={connectNulls}\n          type={curveType}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n        />\n      );\n    }\n\n    if (item.type === 'area') {\n      return (\n        <Area\n          {...getStyles('area')}\n          key={item.name}\n          name={item.name}\n          type={curveType}\n          dataKey={item.name}\n          fill={color}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? {\n                  fill: theme.white,\n                  stroke: color,\n                  strokeWidth: 2,\n                  r: 4,\n                  ...activeDotProps,\n                }\n              : false\n          }\n          fillOpacity={dimmed ? 0 : 0.2}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n        />\n      );\n    }\n\n    if (item.type === 'bar') {\n      return (\n        <Bar\n          {...getStyles('bar')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          fill={color}\n          stroke={color}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0.1 : 1}\n          strokeOpacity={dimmed ? 0.2 : 0}\n          yAxisId={item.yAxisId || undefined}\n          minPointSize={minBarSize}\n          {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n        >\n          {withBarValueLabel && (\n            <LabelList\n              position=\"top\"\n              fontSize={12}\n              fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n              formatter={(val: any) => valueFormatter?.(val as any)}\n            />\n          )}\n        </Bar>\n      );\n    }\n\n    return null;\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        yAxisId={line.yAxisId || undefined}\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 sharedYAxisProps = {\n    axisLine: false,\n    type: 'number' as const,\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: valueFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsCompositeChart\n          data={data}\n          maxBarSize={maxBarWidth}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          {...composedChartProps}\n        >\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          <XAxis\n            hide={!withXAxis}\n            dataKey={dataKey}\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            {...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\n          <YAxis\n            orientation=\"left\"\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withYAxis}\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            tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withRightYAxis}\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            {yAxisProps?.children}\n          </YAxis>\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\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                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  unit={unit}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {lines}\n          {referenceLinesItems}\n          {children}\n        </ReChartsCompositeChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n\nexport namespace CompositeChart {\n  export type Props = CompositeChartProps;\n  export type StylesNames = CompositeChartStylesNames;\n  export type CssVariables = CompositeChartCssVariables;\n  export type Factory = CompositeChartFactory;\n  export type Series = CompositeChartSeries;\n  export type CurveType = CompositeChartCurveType;\n}\n"],"mappings":"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"}
+{"version":3,"file":"CompositeChart.cjs","names":["Line","PointLabel","Area","Bar","LabelList","ReferenceLine","Box","ResponsiveContainer","ReChartsCompositeChart","Legend","ChartLegend","XAxis","Label","YAxis","CartesianGrid","Tooltip","ChartTooltip","ChartBrush","classes"],"sources":["../../src/CompositeChart/CompositeChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Area,\n  AreaProps,\n  Bar,\n  BarProps,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Legend,\n  Line,\n  LineProps,\n  ComposedChart as ReChartsCompositeChart,\n  ReferenceLine,\n  ResponsiveContainer,\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  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartBrush } from '../ChartBrush';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';\nimport { PointLabel } from '../PointLabel/PointLabel';\nimport type {\n  BaseChartStylesNames,\n  ChartSeries,\n  GridChartBaseProps,\n  MantineChartDotProps,\n} from '../types';\nimport classes from '../grid-chart.module.css';\n\nexport type CompositeChartCurveType =\n  | 'bump'\n  | 'linear'\n  | 'natural'\n  | 'monotone'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter';\n\nexport interface CompositeChartSeries extends ChartSeries {\n  type: 'line' | 'area' | 'bar';\n  strokeDasharray?: string | number;\n}\n\nexport type CompositeChartStylesNames =\n  | 'line'\n  | 'area'\n  | 'bar'\n  | BaseChartStylesNames\n  | ChartLegendStylesNames\n  | ChartTooltipStylesNames;\n\nexport type CompositeChartCssVariables = {\n  root: '--chart-text-color' | '--chart-grid-color';\n};\n\nexport interface CompositeChartProps\n  extends\n    BoxProps,\n    Omit<GridChartBaseProps, 'orientation'>,\n    StylesApiProps<CompositeChartFactory>,\n    ElementProps<'div'> {\n  /** Data used to display chart */\n  data: Record<string, any>[];\n\n  /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */\n  series: CompositeChartSeries[];\n\n  /** Type of the curve @default 'monotone' */\n  curveType?: CompositeChartCurveType;\n\n  /** Determines whether dots should be displayed @default true */\n  withDots?: boolean;\n\n  /** Props passed down to all dots. Ignored if `withDots={false}` is set. */\n  dotProps?: MantineChartDotProps;\n\n  /** Props passed down to all active dots. Ignored if `withDots={false}` is set. */\n  activeDotProps?: MantineChartDotProps;\n\n  /** Stroke width for the chart lines @default 2 */\n  strokeWidth?: number;\n\n  /** Determines whether points with `null` values should be connected @default true */\n  connectNulls?: boolean;\n\n  /** Additional components that are rendered inside recharts `AreaChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `Line` component */\n  lineProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<LineProps, 'ref'>>)\n    | Partial<Omit<LineProps, 'ref'>>;\n\n  /** Props passed down to recharts `Area` component */\n  areaProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<AreaProps<any, any>, 'ref'>>)\n    | Partial<Omit<AreaProps<any, any>, 'ref'>>;\n\n  /** Props passed down to recharts `Bar` component */\n  barProps?:\n    | ((series: CompositeChartSeries) => Partial<Omit<BarProps, 'ref'>>)\n    | Partial<Omit<BarProps, 'ref'>>;\n\n  /** Determines whether each point should have associated label @default false */\n  withPointLabels?: boolean;\n\n  /** Determines whether a label with bar value should be displayed on top of each bar @default false */\n  withBarValueLabel?: boolean;\n\n  /** Sets minimum height of the bar in px @default 0 */\n  minBarSize?: number;\n\n  /** Maximum bar width in px */\n  maxBarWidth?: number;\n\n  /** Props passed down to recharts `AreaChart` component */\n  composedChartProps?: React.ComponentProps<typeof ReChartsCompositeChart>;\n}\n\nexport type CompositeChartFactory = Factory<{\n  props: CompositeChartProps;\n  ref: HTMLDivElement;\n  stylesNames: CompositeChartStylesNames;\n  vars: CompositeChartCssVariables;\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  withDots: true,\n  connectNulls: true,\n  strokeWidth: 2,\n  curveType: 'monotone',\n  accessibilityLayer: true,\n} satisfies Partial<CompositeChartProps>;\n\nconst varsResolver = createVarsResolver<CompositeChartFactory>(\n  (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);\n\nexport const CompositeChart = factory<CompositeChartFactory>((_props) => {\n  const props = useProps('CompositeChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withLegend,\n    legendProps,\n    series,\n    onMouseLeave,\n    dataKey,\n    withTooltip,\n    withXAxis,\n    withYAxis,\n    gridAxis,\n    tickLine,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    tooltipAnimationDuration,\n    strokeDasharray,\n    gridProps,\n    tooltipProps,\n    referenceLines,\n    withDots,\n    dotProps,\n    activeDotProps,\n    strokeWidth,\n    connectNulls,\n    curveType,\n    dir,\n    valueFormatter,\n    children,\n    lineProps,\n    xAxisLabel,\n    yAxisLabel,\n    withRightYAxis,\n    rightYAxisLabel,\n    rightYAxisProps,\n    withPointLabels,\n    areaProps,\n    barProps,\n    withBarValueLabel,\n    minBarSize,\n    maxBarWidth,\n    composedChartProps,\n    attributes,\n    accessibilityLayer,\n    withBrush,\n    brushProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\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  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CompositeChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<CompositeChartFactory>({\n    name: 'CompositeChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const lines = series.map((item) => {\n    const color = getThemeColor(item.color, theme);\n    const dimmed = shouldHighlight && highlightedArea !== item.name;\n\n    if (item.type === 'line') {\n      return (\n        <Line\n          {...getStyles('line')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? { fill: 'var(--mantine-color-white)', stroke: color, ...activeDotProps }\n              : false\n          }\n          fill={color}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0 : 1}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          connectNulls={connectNulls}\n          type={curveType}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof lineProps === 'function' ? lineProps(item) : lineProps)}\n        />\n      );\n    }\n\n    if (item.type === 'area') {\n      return (\n        <Area\n          {...getStyles('area')}\n          key={item.name}\n          name={item.name}\n          type={curveType}\n          dataKey={item.name}\n          fill={color}\n          strokeWidth={strokeWidth}\n          stroke={color}\n          isAnimationActive={false}\n          connectNulls={connectNulls}\n          dot={\n            withDots\n              ? {\n                  fillOpacity: dimmed ? 0 : 1,\n                  strokeOpacity: dimmed ? 0 : 1,\n                  strokeWidth: 1,\n                  fill: color,\n                  stroke: color,\n                  ...dotProps,\n                }\n              : false\n          }\n          activeDot={\n            withDots\n              ? {\n                  fill: theme.white,\n                  stroke: color,\n                  strokeWidth: 2,\n                  r: 4,\n                  ...activeDotProps,\n                }\n              : false\n          }\n          fillOpacity={dimmed ? 0 : 0.2}\n          strokeOpacity={dimmed ? 0.5 : 1}\n          strokeDasharray={item.strokeDasharray}\n          yAxisId={item.yAxisId || undefined}\n          label={withPointLabels ? <PointLabel valueFormatter={valueFormatter} /> : undefined}\n          {...(typeof areaProps === 'function' ? areaProps(item) : areaProps)}\n        />\n      );\n    }\n\n    if (item.type === 'bar') {\n      return (\n        <Bar\n          {...getStyles('bar')}\n          key={item.name}\n          name={item.name}\n          dataKey={item.name}\n          fill={color}\n          stroke={color}\n          isAnimationActive={false}\n          fillOpacity={dimmed ? 0.1 : 1}\n          strokeOpacity={dimmed ? 0.2 : 0}\n          yAxisId={item.yAxisId || undefined}\n          minPointSize={minBarSize}\n          {...(typeof barProps === 'function' ? barProps(item) : barProps)}\n        >\n          {withBarValueLabel && (\n            <LabelList\n              position=\"top\"\n              fontSize={12}\n              fill=\"var(--chart-bar-label-color, var(--mantine-color-dimmed))\"\n              formatter={(val: any) => valueFormatter?.(val as any)}\n            />\n          )}\n        </Bar>\n      );\n    }\n\n    return null;\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        yAxisId={line.yAxisId || undefined}\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 sharedYAxisProps = {\n    axisLine: false,\n    type: 'number' as const,\n    tickLine: withYTickLine ? { stroke: 'currentColor' } : false,\n    allowDecimals: true,\n    unit,\n    tickFormatter: valueFormatter,\n    ...getStyles('axis'),\n  };\n\n  return (\n    <Box {...getStyles('root')} onMouseLeave={handleMouseLeave} dir={dir || 'ltr'} {...others}>\n      <ResponsiveContainer {...getStyles('container')}>\n        <ReChartsCompositeChart\n          data={data}\n          maxBarSize={maxBarWidth}\n          margin={{\n            bottom: xAxisLabel ? 30 : undefined,\n            left: yAxisLabel ? 10 : undefined,\n            right: yAxisLabel ? 5 : undefined,\n          }}\n          accessibilityLayer={accessibilityLayer}\n          {...composedChartProps}\n        >\n          {withLegend && (\n            <Legend\n              verticalAlign=\"top\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload}\n                  onHighlight={setHighlightedArea}\n                  legendPosition={legendProps?.verticalAlign || 'top'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          <XAxis\n            hide={!withXAxis}\n            dataKey={dataKey}\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            {...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\n          <YAxis\n            orientation=\"left\"\n            tick={{ transform: 'translate(-10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withYAxis}\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            tick={{ transform: 'translate(10, 0)', fontSize: 12, fill: 'currentColor' }}\n            hide={!withRightYAxis}\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            {yAxisProps?.children}\n          </YAxis>\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\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                  label={labelFormatter && payload ? labelFormatter(label, payload) : label}\n                  payload={payload}\n                  unit={unit}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  series={series}\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {lines}\n          {referenceLinesItems}\n          {withBrush && (\n            <ChartBrush\n              dataKey={dataKey}\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              {...brushProps}\n            />\n          )}\n          {children}\n        </ReChartsCompositeChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nCompositeChart.displayName = '@mantine/charts/CompositeChart';\nCompositeChart.classes = classes;\nCompositeChart.varsResolver = varsResolver;\n\nexport namespace CompositeChart {\n  export type Props = CompositeChartProps;\n  export type StylesNames = CompositeChartStylesNames;\n  export type CssVariables = CompositeChartCssVariables;\n  export type Factory = CompositeChartFactory;\n  export type Series = CompositeChartSeries;\n  export type CurveType = CompositeChartCurveType;\n}\n"],"mappings":"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"}

package/cjs/DonutChart/DonutChart.cjs

@@ -5,8 +5,8 @@ const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_DonutChart_module = require("./DonutChart.module.cjs");
 let _mantine_core = require("@mantine/core");
 let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
 let recharts = require("recharts");
+let react = require("react");
 //#region packages/@mantine/charts/src/DonutChart/DonutChart.tsx
 const defaultProps = {
 	withTooltip: true,
@@ -18,7 +18,8 @@ const defaultProps = {
 	startAngle: 0,
 	endAngle: 360,
 	labelsType: "value",
-	tooltipDataSource: "all"
+	tooltipDataSource: "all",
+	accessibilityLayer: true
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({ root: {
 	"--chart-stroke-color": strokeColor ? (0, _mantine_core.getThemeColor)(strokeColor, theme) : void 0,
@@ -47,7 +48,7 @@ const getLabel = (labelsType, valueFormatter) => ({ x, y, cx, cy, percent, value
 });
 const DonutChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("DonutChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, pieProps, paddingAngle, withLabels, withLabelsLine, size, thickness, strokeWidth, startAngle, endAngle, tooltipDataSource, chartLabel, children, pieChartProps, valueFormatter, strokeColor, labelsType, attributes, cellProps, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, pieProps, paddingAngle, withLabels, withLabelsLine, size, thickness, strokeWidth, startAngle, endAngle, tooltipDataSource, chartLabel, children, pieChartProps, valueFormatter, strokeColor, labelsType, attributes, cellProps, accessibilityLayer, ...others } = props;
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(null);
 	const getStyles = (0, _mantine_core.useStyles)({
@@ -80,6 +81,7 @@ const DonutChart = (0, _mantine_core.factory)((_props) => {
 		...getStyles("root"),
 		...others,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.PieChart, {
+			accessibilityLayer,
 			...pieChartProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Pie, {

package/cjs/DonutChart/DonutChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.cjs","names":["getPieChartData","Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  Pie,\n  PieLabel,\n  PieProps,\n  PieChart as ReChartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type DonutChartStylesNames =\n  | 'root'\n  | 'label'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type DonutChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface DonutChartProps\n  extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: DonutChartCell[];\n\n  /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Props passed down to recharts `Legend` component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `Pie` component */\n  pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels, by default depends on color scheme */\n  labelColor?: MantineColor;\n\n  /** Controls padding between segments @default 0 */\n  paddingAngle?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Determines whether segments labels should have lines that connect the segment with the label @default true */\n  withLabelsLine?: boolean;\n\n  /** Controls thickness of the chart segments @default 20 */\n  thickness?: number;\n\n  /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */\n  startAngle?: number;\n\n  /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */\n  endAngle?: number;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Chart label, displayed in the center of the chart */\n  chartLabel?: string | number;\n\n  /** Additional elements rendered inside `PieChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `PieChart` component */\n  pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n  /** Type of labels to display, `'value'` by default */\n  labelsType?: 'value' | 'percent' | 'name';\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Props passed down to each segment of the chart */\n  cellProps?:\n    | ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n    | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n}\n\nexport type DonutChartFactory = Factory<{\n  props: DonutChartProps;\n  ref: HTMLDivElement;\n  stylesNames: DonutChartStylesNames;\n  vars: DonutChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  withLabelsLine: true,\n  paddingAngle: 0,\n  thickness: 20,\n  size: 160,\n  strokeWidth: 1,\n  startAngle: 0,\n  endAngle: 360,\n  labelsType: 'value',\n  tooltipDataSource: 'all',\n} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size! + (withLabels ? 80 : 0) + (withLegend ? 80 : 0)),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: DonutChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  name: string | undefined,\n  valueFormatter?: DonutChartProps['valueFormatter']\n) => {\n  if (labelsType === 'name') {\n    return name;\n  }\n\n  if (labelsType === 'percent') {\n    return `${((percent || 0) * 100).toFixed(0)}%`;\n  }\n\n  if (typeof valueFormatter === 'function') {\n    return valueFormatter(value || 0);\n  }\n\n  return value;\n};\n\nconst getLabel =\n  (\n    labelsType: 'value' | 'percent' | 'name',\n    valueFormatter?: DonutChartProps['valueFormatter']\n  ): PieLabel =>\n  ({ x, y, cx, cy, percent, value, name }) => (\n    <text\n      x={x}\n      y={y}\n      cx={cx}\n      cy={cy}\n      textAnchor={x > Number(cx) ? 'start' : 'end'}\n      fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n      fontFamily=\"var(--mantine-font-family)\"\n      fontSize={12}\n    >\n      <tspan x={x}>\n        {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n      </tspan>\n    </text>\n  );\n\nexport const DonutChart = factory<DonutChartFactory>((_props) => {\n  const props = useProps('DonutChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    withLegend,\n    legendProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    pieProps,\n    paddingAngle,\n    withLabels,\n    withLabelsLine,\n    size,\n    thickness,\n    strokeWidth,\n    startAngle,\n    endAngle,\n    tooltipDataSource,\n    chartLabel,\n    children,\n    pieChartProps,\n    valueFormatter,\n    strokeColor,\n    labelsType,\n    attributes,\n    cellProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<DonutChartFactory>({\n    name: 'DonutChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DonutChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart {...pieChartProps}>\n          <Pie\n            data={pieData as any}\n            innerRadius={size / 2 - thickness}\n            outerRadius={size / 2}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            paddingAngle={paddingAngle}\n            startAngle={startAngle}\n            endAngle={endAngle}\n            label={withLabels ? getLabel(labelsType || 'value', valueFormatter) : false}\n            labelLine={\n              withLabelsLine\n                ? {\n                    stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n                    strokeWidth: 1,\n                  }\n                : false\n            }\n            {...pieProps}\n          />\n\n          {chartLabel && (\n            <text\n              x=\"50%\"\n              y=\"50%\"\n              textAnchor=\"middle\"\n              dominantBaseline=\"middle\"\n              {...getStyles('label')}\n            >\n              {chartLabel}\n            </text>\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment'\n                      ? (payload?.[0]?.payload?.__segmentIndex as number)\n                      : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsPieChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nDonutChart.displayName = '@mantine/charts/DonutChart';\nDonutChart.classes = classes;\nDonutChart.varsResolver = varsResolver;\n\nexport namespace DonutChart {\n  export type Props = DonutChartProps;\n  export type StylesNames = DonutChartStylesNames;\n  export type Factory = DonutChartFactory;\n  export type CssVariables = DonutChartCssVariables;\n  export type Cell = DonutChartCell;\n}\n"],"mappings":"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"}
+{"version":3,"file":"DonutChart.cjs","names":["getPieChartData","Box","ResponsiveContainer","ReChartsPieChart","Pie","Tooltip","ChartTooltip","Legend","ChartLegend","classes"],"sources":["../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Legend,\n  LegendProps,\n  Pie,\n  PieLabel,\n  PieProps,\n  PieChart as ReChartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport { getPieChartData } from '../utils';\nimport classes from './DonutChart.module.css';\n\nexport interface DonutChartCell {\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type DonutChartStylesNames =\n  | 'root'\n  | 'label'\n  | ChartTooltipStylesNames\n  | ChartLegendStylesNames;\nexport type DonutChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface DonutChartProps\n  extends BoxProps, StylesApiProps<DonutChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: DonutChartCell[];\n\n  /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */\n  withTooltip?: boolean;\n\n  /** Determines whether the legend should be displayed @default false */\n  withLegend?: boolean;\n\n  /** Props passed down to recharts `Legend` component */\n  legendProps?: Omit<LegendProps, 'ref'>;\n\n  /** Tooltip animation duration in ms @default 0 */\n  tooltipAnimationDuration?: number;\n\n  /** Props passed down to `Tooltip` recharts component */\n  tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n  /** Props passed down to recharts `Pie` component */\n  pieProps?: Partial<Omit<PieProps, 'ref'>>;\n\n  /** Controls color of the segments stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of all labels, by default depends on color scheme */\n  labelColor?: MantineColor;\n\n  /** Controls padding between segments @default 0 */\n  paddingAngle?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Determines whether segments labels should have lines that connect the segment with the label @default true */\n  withLabelsLine?: boolean;\n\n  /** Controls thickness of the chart segments @default 20 */\n  thickness?: number;\n\n  /** Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`. @default 80 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Controls angle at which chart starts. Set to `180` to render the chart as semicircle. @default 0 */\n  startAngle?: number;\n\n  /** Controls angle at which charts ends. Set to `0` to render the chart as semicircle. @default 360 */\n  endAngle?: number;\n\n  /** Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. @default 'all' */\n  tooltipDataSource?: 'segment' | 'all';\n\n  /** Chart label, displayed in the center of the chart */\n  chartLabel?: string | number;\n\n  /** Additional elements rendered inside `PieChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `PieChart` component */\n  pieChartProps?: React.ComponentProps<typeof ReChartsPieChart>;\n\n  /** Type of labels to display, `'value'` by default */\n  labelsType?: 'value' | 'percent' | 'name';\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Props passed down to each segment of the chart */\n  cellProps?:\n    | ((series: DonutChartCell) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n    | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>;\n\n  /** Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, `true` by default */\n  accessibilityLayer?: boolean;\n}\n\nexport type DonutChartFactory = Factory<{\n  props: DonutChartProps;\n  ref: HTMLDivElement;\n  stylesNames: DonutChartStylesNames;\n  vars: DonutChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  withLabelsLine: true,\n  paddingAngle: 0,\n  thickness: 20,\n  size: 160,\n  strokeWidth: 1,\n  startAngle: 0,\n  endAngle: 360,\n  labelsType: 'value',\n  tooltipDataSource: 'all',\n  accessibilityLayer: true,\n} satisfies Partial<DonutChartProps>;\n\nconst varsResolver = createVarsResolver<DonutChartFactory>(\n  (theme, { strokeColor, labelColor, withLabels, withLegend, size }) => ({\n    root: {\n      '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n      '--chart-labels-color': labelColor ? getThemeColor(labelColor, theme) : undefined,\n      '--chart-size': rem(size! + (withLabels ? 80 : 0) + (withLegend ? 80 : 0)),\n    },\n  })\n);\n\nconst getLabelValue = (\n  labelsType: DonutChartProps['labelsType'],\n  value: number | undefined,\n  percent: number | undefined,\n  name: string | undefined,\n  valueFormatter?: DonutChartProps['valueFormatter']\n) => {\n  if (labelsType === 'name') {\n    return name;\n  }\n\n  if (labelsType === 'percent') {\n    return `${((percent || 0) * 100).toFixed(0)}%`;\n  }\n\n  if (typeof valueFormatter === 'function') {\n    return valueFormatter(value || 0);\n  }\n\n  return value;\n};\n\nconst getLabel =\n  (\n    labelsType: 'value' | 'percent' | 'name',\n    valueFormatter?: DonutChartProps['valueFormatter']\n  ): PieLabel =>\n  ({ x, y, cx, cy, percent, value, name }) => (\n    <text\n      x={x}\n      y={y}\n      cx={cx}\n      cy={cy}\n      textAnchor={x > Number(cx) ? 'start' : 'end'}\n      fill=\"var(--chart-labels-color, var(--mantine-color-dimmed))\"\n      fontFamily=\"var(--mantine-font-family)\"\n      fontSize={12}\n    >\n      <tspan x={x}>\n        {getLabelValue(labelsType, Number(value), Number(percent), name as string, valueFormatter)}\n      </tspan>\n    </text>\n  );\n\nexport const DonutChart = factory<DonutChartFactory>((_props) => {\n  const props = useProps('DonutChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    withLegend,\n    legendProps,\n    tooltipAnimationDuration,\n    tooltipProps,\n    pieProps,\n    paddingAngle,\n    withLabels,\n    withLabelsLine,\n    size,\n    thickness,\n    strokeWidth,\n    startAngle,\n    endAngle,\n    tooltipDataSource,\n    chartLabel,\n    children,\n    pieChartProps,\n    valueFormatter,\n    strokeColor,\n    labelsType,\n    attributes,\n    cellProps,\n    accessibilityLayer,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n\n  const getStyles = useStyles<DonutChartFactory>({\n    name: 'DonutChart',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DonutChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const pieData = getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <ReChartsPieChart accessibilityLayer={accessibilityLayer} {...pieChartProps}>\n          <Pie\n            data={pieData as any}\n            innerRadius={size / 2 - thickness}\n            outerRadius={size / 2}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            paddingAngle={paddingAngle}\n            startAngle={startAngle}\n            endAngle={endAngle}\n            label={withLabels ? getLabel(labelsType || 'value', valueFormatter) : false}\n            labelLine={\n              withLabelsLine\n                ? {\n                    stroke: 'var(--chart-label-color, var(--mantine-color-dimmed))',\n                    strokeWidth: 1,\n                  }\n                : false\n            }\n            {...pieProps}\n          />\n\n          {chartLabel && (\n            <text\n              x=\"50%\"\n              y=\"50%\"\n              textAnchor=\"middle\"\n              dominantBaseline=\"middle\"\n              {...getStyles('label')}\n            >\n              {chartLabel}\n            </text>\n          )}\n\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={data}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  segmentId={\n                    tooltipDataSource === 'segment'\n                      ? (payload?.[0]?.payload?.__segmentIndex as number)\n                      : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {withLegend && (\n            <Legend\n              verticalAlign=\"bottom\"\n              content={(payload) => (\n                <ChartLegend\n                  payload={payload.payload?.map((item) => ({\n                    ...item,\n                    dataKey: (item.payload as any)?.name,\n                    highlightKey: (item.payload as any)?.__segmentIndex,\n                  }))}\n                  onHighlight={(value) =>\n                    setHighlightedIndex(typeof value === 'number' ? value : null)\n                  }\n                  legendPosition={legendProps?.verticalAlign || 'bottom'}\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  centered\n                  attributes={attributes}\n                />\n              )}\n              {...legendProps}\n            />\n          )}\n\n          {children}\n        </ReChartsPieChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nDonutChart.displayName = '@mantine/charts/DonutChart';\nDonutChart.classes = classes;\nDonutChart.varsResolver = varsResolver;\n\nexport namespace DonutChart {\n  export type Props = DonutChartProps;\n  export type StylesNames = DonutChartStylesNames;\n  export type Factory = DonutChartFactory;\n  export type CssVariables = DonutChartCssVariables;\n  export type Cell = DonutChartCell;\n}\n"],"mappings":"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"}

package/cjs/DonutChart/DonutChart.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.module.cjs","names":[],"sources":["../../src/DonutChart/DonutChart.module.css"],"sourcesContent":[".root {\n  min-height: var(--chart-size, auto);\n  height: var(--chart-size, auto);\n  width: var(--chart-size, auto);\n  min-width: var(--chart-size, auto);\n\n  & :where(*) {\n    outline: 0;\n  }\n\n  & :where(:global(.recharts-surface)) {\n    overflow: visible;\n  }\n}\n\n.label {\n  fill: var(--mantine-color-text);\n  font-size: var(--mantine-font-size-sm);\n}\n"],"mappings":""}
+{"version":3,"file":"DonutChart.module.cjs","names":[],"sources":["../../src/DonutChart/DonutChart.module.css"],"sourcesContent":[".root {\n  min-height: var(--chart-size, auto);\n  height: var(--chart-size, auto);\n  width: var(--chart-size, auto);\n  min-width: var(--chart-size, auto);\n\n  & :where(*) {\n    outline: 0;\n  }\n\n  & :where(:global(.recharts-surface)) {\n    overflow: visible;\n  }\n\n  svg:focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n\n.label {\n  fill: var(--mantine-color-text);\n  font-size: var(--mantine-font-size-sm);\n}\n"],"mappings":""}

package/cjs/FunnelChart/FunnelChart.cjs

@@ -4,8 +4,8 @@ const require_ChartLegend = require("../ChartLegend/ChartLegend.cjs");
 const require_FunnelChart_module = require("./FunnelChart.module.cjs");
 let _mantine_core = require("@mantine/core");
 let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
 let recharts = require("recharts");
+let react = require("react");
 //#region packages/@mantine/charts/src/FunnelChart/FunnelChart.tsx
 const defaultProps = {
 	withTooltip: true,
@@ -13,7 +13,8 @@ const defaultProps = {
 	strokeWidth: 1,
 	withLabels: false,
 	labelsPosition: "right",
-	tooltipDataSource: "all"
+	tooltipDataSource: "all",
+	accessibilityLayer: true
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { strokeColor, labelColor, size }) => ({ root: {
 	"--chart-stroke-color": strokeColor ? (0, _mantine_core.getThemeColor)(strokeColor, theme) : void 0,
@@ -22,7 +23,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { strokeColor
 } }));
 const FunnelChart = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("FunnelChart", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, strokeWidth, withLabels, size, valueFormatter, children, funnelChartProps, funnelProps, labelsPosition, tooltipDataSource, strokeColor, labelColor, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, withTooltip, withLegend, legendProps, tooltipAnimationDuration, tooltipProps, strokeWidth, withLabels, size, valueFormatter, children, funnelChartProps, funnelProps, labelsPosition, tooltipDataSource, strokeColor, labelColor, attributes, accessibilityLayer, ...others } = props;
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(null);
 	const getStyles = (0, _mantine_core.useStyles)({
@@ -48,6 +49,7 @@ const FunnelChart = (0, _mantine_core.factory)((_props) => {
 		...getStyles("root"),
 		...others,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.FunnelChart, {
+			accessibilityLayer,
 			...funnelChartProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Funnel, {