@mantine/charts 9.3.2 → 9.4.0

package/esm/Treemap/Treemap.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Treemap.mjs","names":["Treemap","RechartsTreemap","Tooltip","classes"],"sources":["../../src/Treemap/Treemap.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Treemap as RechartsTreemap,\n  TreemapProps as RechartsTreemapProps,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getThemeColor,\n  isLightColor,\n  MantineColor,\n  MantineTheme,\n  parseThemeColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './Treemap.module.css';\n\nexport interface TreemapData {\n  name: string;\n  value?: number;\n  color?: MantineColor;\n  children?: TreemapData[];\n  [key: string]: unknown;\n}\n\nexport type TreemapStylesNames = 'root' | ChartTooltipStylesNames;\nexport type TreemapCssVariables = {\n  root: '--chart-stroke-color' | '--chart-height';\n};\n\nexport interface TreemapProps\n  extends BoxProps, StylesApiProps<TreemapFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: TreemapData[];\n\n  /** Key in data object for the value @default 'value' */\n  dataKey?: string;\n\n  /** The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given @default 1.618033988749895 */\n  aspectRatio?: number;\n\n  /** Determines whether the tooltip should be displayed when a node is hovered @default true */\n  withTooltip?: boolean;\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 `Treemap` component */\n  treemapProps?: Partial<Omit<RechartsTreemapProps, 'ref' | 'data' | 'dataKey'>>;\n\n  /** Controls color of the node stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of labels @default dimmed */\n  textColor?: MantineColor;\n\n  /** Controls chart height @default 300 */\n  height?: number;\n\n  /** Controls width of node stroke @default 1 */\n  strokeWidth?: number;\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Determines whether text color should be adjusted based on background color to improve contrast */\n  autoContrast?: boolean;\n\n  /** Additional elements rendered inside `Treemap` component */\n  children?: React.ReactNode;\n}\n\nexport type TreemapFactory = Factory<{\n  props: TreemapProps;\n  ref: HTMLDivElement;\n  stylesNames: TreemapStylesNames;\n  vars: TreemapCssVariables;\n}>;\n\nconst defaultProps = {\n  dataKey: 'value',\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  height: 300,\n  strokeWidth: 1,\n  aspectRatio: 0.5 * (1 + Math.sqrt(5)),\n} satisfies Partial<TreemapProps>;\n\nconst varsResolver = createVarsResolver<TreemapFactory>((theme, { strokeColor, height }) => ({\n  root: {\n    '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n    '--chart-height': rem(height),\n  },\n}));\n\ninterface TreemapContentProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  depth: number;\n  name: string;\n  resolvedColors: Record<string, string>;\n  resolvedLabelColors: Record<string, string>;\n  index: number;\n  strokeWidth: number;\n}\n\nfunction TreemapContent({\n  x,\n  y,\n  width,\n  height,\n  depth,\n  name,\n  resolvedColors,\n  resolvedLabelColors,\n  index,\n  strokeWidth,\n}: TreemapContentProps) {\n  const fill = resolvedColors[name] || `var(--mantine-color-blue-${(index % 9) + 1})`;\n  const labelColor = resolvedLabelColors[name] || 'var(--mantine-color-white)';\n  const showLabel = width > 30 && height > 20;\n\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={depth >= 1 ? fill : 'transparent'}\n        stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n        strokeWidth={depth >= 1 ? strokeWidth : 0}\n      />\n      {depth >= 1 && showLabel && (\n        <text\n          x={x + width / 2}\n          y={y + height / 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"central\"\n          fill={labelColor}\n          fontSize={12}\n          fontFamily=\"var(--mantine-font-family)\"\n        >\n          {name}\n        </text>\n      )}\n    </g>\n  );\n}\n\nfunction resolveColors(\n  data: TreemapData[],\n  theme: MantineTheme,\n  parentColor?: string\n): Record<string, string> {\n  const result: Record<string, string> = {};\n  for (const item of data) {\n    const color = item.color || parentColor;\n    if (color) {\n      result[item.name] = parseThemeColor({ color, theme }).value;\n    }\n    if (item.children) {\n      Object.assign(result, resolveColors(item.children, theme, color));\n    }\n  }\n  return result;\n}\n\nfunction resolveLabelColors(\n  resolvedColors: Record<string, string>,\n  autoContrast: boolean,\n  luminanceThreshold: number,\n  textColor?: string\n): Record<string, string> {\n  const result: Record<string, string> = {};\n  for (const [name, color] of Object.entries(resolvedColors)) {\n    if (textColor) {\n      result[name] = textColor;\n    } else if (autoContrast) {\n      result[name] = isLightColor(color, luminanceThreshold)\n        ? 'var(--mantine-color-black)'\n        : 'var(--mantine-color-white)';\n    }\n  }\n  return result;\n}\n\nexport const Treemap = factory<TreemapFactory>((_props) => {\n  const props = useProps('Treemap', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    dataKey,\n    aspectRatio,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    treemapProps,\n    strokeColor,\n    textColor,\n    height: chartHeight,\n    strokeWidth,\n    valueFormatter,\n    autoContrast,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const resolvedColors = resolveColors(data, theme);\n  const _autoContrast = getAutoContrastValue(autoContrast, theme);\n  const _textColor = textColor ? getThemeColor(textColor, theme) : undefined;\n  const resolvedLabelColors = resolveLabelColors(\n    resolvedColors,\n    _autoContrast,\n    theme.luminanceThreshold,\n    _textColor\n  );\n\n  const getStyles = useStyles<TreemapFactory>({\n    name: 'Treemap',\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<TreemapFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer height={chartHeight}>\n        <RechartsTreemap\n          data={data as any}\n          dataKey={dataKey as any}\n          aspectRatio={aspectRatio}\n          isAnimationActive={false}\n          content={(nodeProps: any) => (\n            <TreemapContent\n              {...nodeProps}\n              resolvedColors={resolvedColors}\n              resolvedLabelColors={resolvedLabelColors}\n              strokeWidth={strokeWidth!}\n            />\n          )}\n          {...treemapProps}\n        >\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={\n                    payload?.map((item) => ({\n                      name: item.name as string,\n                      value: item.value as number,\n                      color: resolvedColors[item.name as string] || 'var(--mantine-color-blue-6)',\n                    })) || []\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsTreemap>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nTreemap.displayName = '@mantine/charts/Treemap';\nTreemap.classes = classes;\nTreemap.varsResolver = varsResolver;\n"],"mappings":"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"}
+{"version":3,"file":"Treemap.mjs","names":["Treemap","RechartsTreemap","Tooltip","classes"],"sources":["../../src/Treemap/Treemap.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Treemap as RechartsTreemap,\n  TreemapProps as RechartsTreemapProps,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n} from 'recharts';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getThemeColor,\n  isLightColor,\n  MantineColor,\n  MantineTheme,\n  parseThemeColor,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './Treemap.module.css';\n\nexport interface TreemapData {\n  name: string;\n  value?: number;\n  color?: MantineColor;\n  children?: TreemapData[];\n  [key: string]: unknown;\n}\n\nexport type TreemapStylesNames = 'root' | ChartTooltipStylesNames;\nexport type TreemapCssVariables = {\n  root: '--chart-stroke-color' | '--chart-height';\n};\n\nexport interface TreemapProps\n  extends BoxProps, StylesApiProps<TreemapFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: TreemapData[];\n\n  /** Key in data object for the value @default 'value' */\n  dataKey?: string;\n\n  /** The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given @default 1.618033988749895 */\n  aspectRatio?: number;\n\n  /** Determines whether the tooltip should be displayed when a node is hovered @default true */\n  withTooltip?: boolean;\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 `Treemap` component */\n  treemapProps?: Partial<Omit<RechartsTreemapProps, 'ref' | 'data' | 'dataKey'>>;\n\n  /** Controls color of the node stroke, by default depends on color scheme */\n  strokeColor?: MantineColor;\n\n  /** Controls text color of labels @default dimmed */\n  textColor?: MantineColor;\n\n  /** Controls chart height @default 300 */\n  height?: number;\n\n  /** Controls width of node stroke @default 1 */\n  strokeWidth?: number;\n\n  /** A function to format values inside the tooltip */\n  valueFormatter?: (value: number) => string;\n\n  /** Determines whether text color should be adjusted based on background color to improve contrast */\n  autoContrast?: boolean;\n\n  /** Additional elements rendered inside `Treemap` component */\n  children?: React.ReactNode;\n}\n\nexport type TreemapFactory = Factory<{\n  props: TreemapProps;\n  ref: HTMLDivElement;\n  stylesNames: TreemapStylesNames;\n  vars: TreemapCssVariables;\n}>;\n\nconst defaultProps = {\n  dataKey: 'value',\n  withTooltip: true,\n  tooltipAnimationDuration: 0,\n  height: 300,\n  strokeWidth: 1,\n  aspectRatio: 0.5 * (1 + Math.sqrt(5)),\n} satisfies Partial<TreemapProps>;\n\nconst varsResolver = createVarsResolver<TreemapFactory>((theme, { strokeColor, height }) => ({\n  root: {\n    '--chart-stroke-color': strokeColor ? getThemeColor(strokeColor, theme) : undefined,\n    '--chart-height': rem(height),\n  },\n}));\n\ninterface TreemapContentProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  depth: number;\n  name: string;\n  resolvedColors: Record<string, string>;\n  resolvedLabelColors: Record<string, string>;\n  index: number;\n  strokeWidth: number;\n}\n\nfunction TreemapContent({\n  x,\n  y,\n  width,\n  height,\n  depth,\n  name,\n  resolvedColors,\n  resolvedLabelColors,\n  index,\n  strokeWidth,\n}: TreemapContentProps) {\n  const fill = resolvedColors[name] || `var(--mantine-color-blue-${(index % 9) + 1})`;\n  const labelColor = resolvedLabelColors[name] || 'var(--mantine-color-white)';\n  const showLabel = width > 30 && height > 20;\n\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={depth >= 1 ? fill : 'transparent'}\n        stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n        strokeWidth={depth >= 1 ? strokeWidth : 0}\n      />\n      {depth >= 1 && showLabel && (\n        <text\n          x={x + width / 2}\n          y={y + height / 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"central\"\n          fill={labelColor}\n          fontSize={12}\n          fontFamily=\"var(--mantine-font-family)\"\n        >\n          {name}\n        </text>\n      )}\n    </g>\n  );\n}\n\nfunction resolveColors(\n  data: TreemapData[],\n  theme: MantineTheme,\n  parentColor?: string\n): Record<string, string> {\n  const result: Record<string, string> = {};\n  for (const item of data) {\n    const color = item.color || parentColor;\n    if (color) {\n      result[item.name] = parseThemeColor({ color, theme }).value;\n    }\n    if (item.children) {\n      Object.assign(result, resolveColors(item.children, theme, color));\n    }\n  }\n  return result;\n}\n\nfunction resolveLabelColors(\n  resolvedColors: Record<string, string>,\n  autoContrast: boolean,\n  luminanceThreshold: number,\n  textColor?: string\n): Record<string, string> {\n  const result: Record<string, string> = {};\n  for (const [name, color] of Object.entries(resolvedColors)) {\n    if (textColor) {\n      result[name] = textColor;\n    } else if (autoContrast) {\n      result[name] = isLightColor(color, luminanceThreshold)\n        ? 'var(--mantine-color-black)'\n        : 'var(--mantine-color-white)';\n    }\n  }\n  return result;\n}\n\nexport const Treemap = factory<TreemapFactory>((_props) => {\n  const props = useProps('Treemap', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    dataKey,\n    aspectRatio,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    treemapProps,\n    strokeColor,\n    textColor,\n    height: chartHeight,\n    strokeWidth,\n    valueFormatter,\n    autoContrast,\n    children,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const resolvedColors = resolveColors(data, theme);\n  const _autoContrast = getAutoContrastValue(autoContrast, theme);\n  const _textColor = textColor ? getThemeColor(textColor, theme) : undefined;\n  const resolvedLabelColors = resolveLabelColors(\n    resolvedColors,\n    _autoContrast,\n    theme.luminanceThreshold,\n    _textColor\n  );\n\n  const getStyles = useStyles<TreemapFactory>({\n    name: 'Treemap',\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<TreemapFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ResponsiveContainer height={chartHeight}>\n        <RechartsTreemap\n          data={data as any}\n          dataKey={dataKey as any}\n          aspectRatio={aspectRatio}\n          isAnimationActive={false}\n          content={(nodeProps: any) => (\n            <TreemapContent\n              {...nodeProps}\n              resolvedColors={resolvedColors}\n              resolvedLabelColors={resolvedLabelColors}\n              strokeWidth={strokeWidth!}\n            />\n          )}\n          {...treemapProps}\n        >\n          {withTooltip && (\n            <Tooltip\n              animationDuration={tooltipAnimationDuration}\n              isAnimationActive={false}\n              content={({ payload }) => (\n                <ChartTooltip\n                  payload={\n                    payload?.map((item) => ({\n                      name: item.name as string,\n                      value: item.value as number,\n                      color: resolvedColors[item.name as string] || 'var(--mantine-color-blue-6)',\n                    })) || []\n                  }\n                  classNames={resolvedClassNames}\n                  styles={resolvedStyles}\n                  type=\"radial\"\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsTreemap>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nTreemap.displayName = '@mantine/charts/Treemap';\nTreemap.classes = classes;\nTreemap.varsResolver = varsResolver;\n"],"mappings":"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"}

package/esm/utils/get-pie-chart-data/get-pie-chart-data.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { getThemeColor } from "@mantine/core";
+//#region packages/@mantine/charts/src/utils/get-pie-chart-data/get-pie-chart-data.ts
+function getPieChartData({ data, theme, strokeWidth, highlightedIndex, cellProps }) {
+	return data.map((item, index) => ({
+		...item,
+		__segmentIndex: index,
+		fill: getThemeColor(item.color, theme),
+		stroke: "var(--chart-stroke-color, var(--mantine-color-body))",
+		strokeWidth,
+		...typeof cellProps === "function" ? cellProps(item) : cellProps,
+		...highlightedIndex !== null ? { fillOpacity: highlightedIndex === index ? 1 : .2 } : null
+	}));
+}
+//#endregion
+export { getPieChartData };
+
+//# sourceMappingURL=get-pie-chart-data.mjs.map

package/esm/utils/get-pie-chart-data/get-pie-chart-data.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-pie-chart-data.mjs","names":[],"sources":["../../../src/utils/get-pie-chart-data/get-pie-chart-data.ts"],"sourcesContent":["import { getThemeColor, MantineColor, MantineTheme } from '@mantine/core';\n\ninterface PieChartDataItem {\n  color: MantineColor;\n  [key: string]: any;\n}\n\ninterface GetPieChartDataInput<T extends PieChartDataItem> {\n  data: T[];\n  theme: MantineTheme;\n  strokeWidth: number | undefined;\n  highlightedIndex: number | null;\n  cellProps:\n    | ((item: T) => Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>)\n    | Partial<Omit<React.SVGProps<SVGElement>, 'ref'>>\n    | undefined;\n}\n\nexport function getPieChartData<T extends PieChartDataItem>({\n  data,\n  theme,\n  strokeWidth,\n  highlightedIndex,\n  cellProps,\n}: GetPieChartDataInput<T>) {\n  return data.map((item, index) => ({\n    ...item,\n    __segmentIndex: index,\n    fill: getThemeColor(item.color, theme),\n    stroke: 'var(--chart-stroke-color, var(--mantine-color-body))',\n    strokeWidth,\n    ...(typeof cellProps === 'function' ? cellProps(item) : cellProps),\n    ...(highlightedIndex !== null ? { fillOpacity: highlightedIndex === index ? 1 : 0.2 } : null),\n  }));\n}\n"],"mappings":";;;AAkBA,SAAgB,gBAA4C,EAC1D,MACA,OACA,aACA,kBACA,aAC0B;CAC1B,OAAO,KAAK,KAAK,MAAM,WAAW;EAChC,GAAG;EACH,gBAAgB;EAChB,MAAM,cAAc,KAAK,OAAO,KAAK;EACrC,QAAQ;EACR;EACA,GAAI,OAAO,cAAc,aAAa,UAAU,IAAI,IAAI;EACxD,GAAI,qBAAqB,OAAO,EAAE,aAAa,qBAAqB,QAAQ,IAAI,GAAI,IAAI;CAC1F,EAAE;AACJ"}

package/lib/ChartLegend/ChartLegend.d.ts

@@ -1,12 +1,12 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
 import { ChartSeries } from '../types';
-export declare function getFilteredChartLegendPayload(payload: readonly Record<string, any>[]): Record<string, any>[];
+export declare function getFilteredChartLegendPayload(payload: readonly Record<string, any>[], splitNestedKeys?: boolean): Record<string, any>[];
 export type ChartLegendStylesNames = 'legendItem' | 'legendItemColor' | 'legendItemName' | 'legend';
 export interface ChartLegendProps extends BoxProps, StylesApiProps<ChartLegendFactory>, ElementProps<'div'> {
     /** Chart data provided by recharts */
     payload: readonly Record<string, any>[] | undefined;
     /** Function called when mouse enters/leaves one of the legend items */
-    onHighlight: (area: string | null) => void;
+    onHighlight: (area: string | number | null) => void;
     /** Position of the legend relative to the chart, used to apply margin on the corresponding side */
     legendPosition: 'top' | 'bottom' | 'middle';
     /** Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart */

package/lib/ChartTooltip/ChartTooltip.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
 import { ChartSeries } from '../types';
-export declare function getFilteredChartTooltipPayload(payload: readonly Record<string, any>[] | Record<string, any>[], segmentId?: string): Record<string, any>[];
+export declare function getFilteredChartTooltipPayload(payload: readonly Record<string, any>[] | Record<string, any>[], segmentId?: string | number): Record<string, any>[];
 export type ChartTooltipStylesNames = 'tooltip' | 'tooltipItem' | 'tooltipItemBody' | 'tooltipItemColor' | 'tooltipItemName' | 'tooltipItemData' | 'tooltipLabel' | 'tooltipBody';
 export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltipFactory>, ElementProps<'div'> {
     /** Main tooltip label */
@@ -11,8 +11,8 @@ export interface ChartTooltipProps extends BoxProps, StylesApiProps<ChartTooltip
     unit?: string;
     /** Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart @default 'area' */
     type?: 'area' | 'radial' | 'scatter';
-    /** Id of the segment to display data for. Only applicable when `type="radial"`. If not set, all data is rendered. */
-    segmentId?: string;
+    /** Segment to display data for, identified by its index in the data array (preferred, isolates duplicate names) or by its name. Only applicable when `type="radial"`. If not set, all data is rendered. */
+    segmentId?: string | number;
     /** Chart series data, applicable only for `area` type */
     series?: ChartSeries[];
     /** A function to format values */

package/lib/DonutChart/DonutChart.d.ts

@@ -1,12 +1,13 @@
-import { PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
+import { LegendProps, PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
 import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';
 export interface DonutChartCell {
     name: string;
     value: number;
     color: MantineColor;
 }
-export type DonutChartStylesNames = 'root' | 'label' | ChartTooltipStylesNames;
+export type DonutChartStylesNames = 'root' | 'label' | ChartTooltipStylesNames | ChartLegendStylesNames;
 export type DonutChartCssVariables = {
     root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
 };
@@ -15,6 +16,10 @@ export interface DonutChartProps extends BoxProps, StylesApiProps<DonutChartFact
     data: DonutChartCell[];
     /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */
     withTooltip?: boolean;
+    /** Determines whether the legend should be displayed @default false */
+    withLegend?: boolean;
+    /** Props passed down to recharts `Legend` component */
+    legendProps?: Omit<LegendProps, 'ref'>;
     /** Tooltip animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */

package/lib/FunnelChart/FunnelChart.d.ts

@@ -1,5 +1,6 @@
-import { FunnelProps, FunnelChart as RechartsFunnelChart, TooltipProps } from 'recharts';
+import { FunnelProps, LegendProps, FunnelChart as RechartsFunnelChart, TooltipProps } from 'recharts';
 import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';
 export interface FunnelChartCell {
     key?: string | number;
@@ -7,7 +8,7 @@ export interface FunnelChartCell {
     value: number;
     color: MantineColor;
 }
-export type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames;
+export type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames | ChartLegendStylesNames;
 export type FunnelChartCssVariables = {
     root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
 };
@@ -16,6 +17,10 @@ export interface FunnelChartProps extends BoxProps, StylesApiProps<FunnelChartFa
     data: FunnelChartCell[];
     /** Determines whether the tooltip should be displayed when a section is hovered @default true */
     withTooltip?: boolean;
+    /** Determines whether the legend should be displayed @default false */
+    withLegend?: boolean;
+    /** Props passed down to recharts `Legend` component */
+    legendProps?: Omit<LegendProps, 'ref'>;
     /** Tooltip animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */

package/lib/PieChart/PieChart.d.ts

@@ -1,5 +1,6 @@
-import { PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
+import { LegendProps, PieProps, PieChart as ReChartsPieChart, TooltipProps } from 'recharts';
 import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';
 export interface PieChartCell {
     key?: string | number;
@@ -7,7 +8,7 @@ export interface PieChartCell {
     value: number;
     color: MantineColor;
 }
-export type PieChartStylesNames = 'root' | ChartTooltipStylesNames;
+export type PieChartStylesNames = 'root' | ChartTooltipStylesNames | ChartLegendStylesNames;
 export type PieChartCssVariables = {
     root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';
 };
@@ -16,6 +17,10 @@ export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>
     data: PieChartCell[];
     /** Determines whether the tooltip should be displayed when one of the section is hovered @default true */
     withTooltip?: boolean;
+    /** Determines whether the legend should be displayed @default false */
+    withLegend?: boolean;
+    /** Props passed down to recharts `Legend` component */
+    legendProps?: Omit<LegendProps, 'ref'>;
     /** Tooltip animation duration in ms @default 0 */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */