@mantine/charts 9.3.0 → 9.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/SankeyChart/SankeyChart.cjs +1 -1
  2. package/cjs/SankeyChart/SankeyChart.cjs.map +1 -1
  3. package/esm/SankeyChart/SankeyChart.mjs +1 -1
  4. package/esm/SankeyChart/SankeyChart.mjs.map +1 -1
  5. package/package.json +3 -3
package/cjs/SankeyChart/SankeyChart.cjs CHANGED
@@ -167,7 +167,7 @@ const SankeyChart = (0, _mantine_core.factory)((_props) => {
167
167
  const resolveColor = (item) => {
168
168
  const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);
169
169
  if (nodeIndex !== -1) return resolvedNodeColors[nodeIndex] || resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length];
170
- const sourceNode = item.payload?.source;
170
+ const sourceNode = item.payload?.payload?.source ?? item.payload?.source;
171
171
  if (sourceNode) {
172
172
  const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);
173
173
  if (sourceIndex !== -1) return resolvedNodeColors[sourceIndex] || resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length];
package/cjs/SankeyChart/SankeyChart.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SankeyChart.cjs","names":["Box","ResponsiveContainer","RechartsSankey","Tooltip","ChartTooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\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 { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when 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 `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\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<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SankeyChart.cjs","names":["Box","ResponsiveContainer","RechartsSankey","Tooltip","ChartTooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\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 { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when 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 `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\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<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.payload?.source ?? item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
package/esm/SankeyChart/SankeyChart.mjs CHANGED
@@ -165,7 +165,7 @@ const SankeyChart = factory((_props) => {
165
165
  const resolveColor = (item) => {
166
166
  const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);
167
167
  if (nodeIndex !== -1) return resolvedNodeColors[nodeIndex] || resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length];
168
- const sourceNode = item.payload?.source;
168
+ const sourceNode = item.payload?.payload?.source ?? item.payload?.source;
169
169
  if (sourceNode) {
170
170
  const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);
171
171
  if (sourceIndex !== -1) return resolvedNodeColors[sourceIndex] || resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length];
package/esm/SankeyChart/SankeyChart.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SankeyChart.mjs","names":["RechartsSankey","Tooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\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 { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when 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 `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\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<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;AA+GA,MAAM,eAAe;CACnB,QAAQ;CACR,WAAW;CACX,aAAa;CACb,eAAe;CACf,YAAY;CACZ,aAAa;CACb,aAAa;CACb,0BAA0B;AAC5B;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,WAAW,WAAW,WAAW,cAAc,EACvD,MAAM;CACJ,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;CACpE,sBAAsB,YAAY,cAAc,WAAW,KAAK,IAAI,KAAA;CACpE,kBAAkB,IAAI,MAAM;AAC9B,EACF,EACF;AAcA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAS,kBAAkB,EACzB,GACA,GACA,OACA,QACA,OACA,SACA,oBACA,uBACA,kBACyB;CACzB,MAAM,OACJ,mBAAmB,UACnB,2BAA2B,sBAAsB,QAAQ,sBAAsB,QAAQ;CAEzF,MAAM,SAAS,CAAC,QAAQ,eAAe,QAAQ,YAAY,WAAW;CACtE,MAAM,SAAS,SAAS,IAAI,IAAI,IAAI,QAAQ;CAC5C,MAAM,aAAa,SAAS,QAAQ;CACpC,MAAM,iBAAiB,iBAAiB,eAAe,QAAQ,KAAK,IAAI,QAAQ;CAGhF,OACE,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAS;EAAM;EAAU;EAAe;EAAc;EAAM,QAAO;CAAQ,CAAA,GAJ/D,UAAU,KAMpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,GAAG;EACH,GAAG,IAAI,SAAS,IAAI;EACR;EACZ,kBAAiB;EACjB,MAAK;EACL,UAAU;EACV,YAAW;YAEV,QAAQ;CACL,CAAA,GACN,oBAAC,QAAD;EACE,GAAG;EACH,GAAG,IAAI,SAAS,IAAI;EACR;EACZ,kBAAiB;EACjB,MAAK;EACL,UAAU;EACV,YAAW;EACX,SAAS;YAER;CACG,CAAA,CACN,EAAA,CAAA,IAEF,qBAAC,QAAD;EACE,GAAG;EACH,GAAG,IAAI,SAAS;EACJ;EACZ,kBAAiB;EACjB,MAAK;EACL,UAAU;EACV,YAAW;YAPb;GASG,QAAQ;GAAK;GAAC,oBAAC,SAAD;IAAO,SAAS;cAAM;GAAsB,CAAA;EACvD;GAEP,EAAA,CAAA;AAEP;AAmBA,SAAS,kBAAkB,EACzB,SACA,SACA,SACA,SACA,gBACA,gBACA,WACA,qBACA,eACyB;CACzB,MAAM,OAAO,uBAAuB;CAEpC,OACE,oBAAC,QAAD;EACE,GAAG;WACE,QAAQ,GAAG,UAAU,YAAY,EAAE;WACnC,eAAe,GAAG,UAAU,YAAY,EAAE;YACzC,eAAe,GAAG,UAAU,YAAY,EAAE;YAC1C,QAAQ,GAAG,UAAU,YAAY,EAAE;WACpC,QAAQ,GAAG,UAAU,YAAY,EAAE;WACnC,eAAe,GAAG,UAAU,YAAY,EAAE;YACzC,eAAe,GAAG,UAAU,YAAY,EAAE;YAC1C,QAAQ,GAAG,UAAU,YAAY,EAAE;;;EAGnC;EACN,SAAS;EACT,QAAO;CACR,CAAA;AAEL;AAEA,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,QAAQ,aACR,WACA,aACA,eACA,YACA,WACA,QACA,WACA,aACA,WACA,aACA,0BACA,cACA,aACA,gBACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,qBAA6C,CAAC;CACpD,KAAK,MAAM,SAAS,MAAM,UAAU;EAClC,IAAI,KAAK,OACP,mBAAmB,SAAS,cAAc,KAAK,OAAO,KAAK;CAE/D,CAAC;CAED,MAAM,wBAAwB,SAC1B,OAAO,KAAK,UAAU,cAAc,OAAO,KAAK,CAAC,IACjD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAC9B,oBAAC,qBAAD;GAAqB,QAAQ;aAC3B,qBAACA,QAAD;IACQ;IACK;IACE;IACE;IACH;IACZ,OAAO,cACL,oBAAC,mBAAD;KACE,GAAI;KACgB;KACG;KACP;IACjB,CAAA;IAEH,OAAO,cAAmB;KACxB,MAAM,cACJ,UAAU,SAAS,KAAK,UAAU,QAAQ,KAAK,MAAM,SACjD,KAAK,MAAM,UAAU,OAAO,SAC5B;KACN,OACE,oBAAC,mBAAD;MACE,GAAI;MACJ,qBAAqB,mBAAmB;MAC3B;KACd,CAAA;IAEL;IACA,GAAI;cA3BN,CA6BG,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cAAc;MACxB,MAAM,gBAAgB,SAAc;OAClC,MAAM,YAAY,KAAK,MAAM,WAAW,MAAM,EAAE,SAAS,KAAK,IAAI;OAClE,IAAI,cAAc,IAChB,OACE,mBAAmB,cACnB,sBAAsB,YAAY,sBAAsB;OAI5D,MAAM,aAAa,KAAK,SAAS;OACjC,IAAI,YAAY;QACd,MAAM,cAAc,KAAK,MAAM,WAAW,MAAM,EAAE,SAAS,WAAW,IAAI;QAC1E,IAAI,gBAAgB,IAClB,OACE,mBAAmB,gBACnB,sBAAsB,cAAc,sBAAsB;OAGhE;OAEA,OAAO;MACT;MAEA,OACE,oBAAC,cAAD;OACE,SACE,SAAS,KAAK,UAAU;QACtB,MAAM,KAAK;QACX,OAAO,KAAK;QACZ,OAAO,aAAa,IAAI;OAC1B,EAAE,KAAK,CAAC;OAEV,YAAY;OACZ,QAAQ;OACR,MAAK;OACW;OACJ;MACb,CAAA;KAEL;KACA,GAAI;IACL,CAAA,GAGF,QACa;;EACG,CAAA;CAClB,CAAA;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUC;AACtB,YAAY,eAAe"}
1
+ {"version":3,"file":"SankeyChart.mjs","names":["RechartsSankey","Tooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\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 { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when 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 `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\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<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.payload?.source ?? item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/charts",
3
- "version": "9.3.0",
3
+ "version": "9.3.2",
4
4
  "description": "Charts components built with recharts and Mantine",
5
5
  "homepage": "https://mantine.dev/",
6
6
  "license": "MIT",
@@ -35,8 +35,8 @@
35
35
  "directory": "packages/@mantine/charts"
36
36
  },
37
37
  "peerDependencies": {
38
- "@mantine/core": "9.3.0",
39
- "@mantine/hooks": "9.3.0",
38
+ "@mantine/core": "9.3.2",
39
+ "@mantine/hooks": "9.3.2",
40
40
  "react": "^19.2.0",
41
41
  "react-dom": "^19.2.0",
42
42
  "recharts": ">=3.2.1"