{"version":3,"file":"FunnelChart.mjs","names":["FunnelChart","RechartsFunnelChart","Tooltip","classes"],"sources":["../../src/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import {\n  Funnel,\n  FunnelProps,\n  LabelList,\n  FunnelChart as RechartsFunnelChart,\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 './FunnelChart.module.css';\n\nexport interface FunnelChartCell {\n  key?: string | number;\n  name: string;\n  value: number;\n  color: MantineColor;\n}\n\nexport type FunnelChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type FunnelChartCssVariables = {\n  root: '--chart-stroke-color' | '--chart-labels-color' | '--chart-size';\n};\n\nexport interface FunnelChartProps\n  extends BoxProps, StylesApiProps<FunnelChartFactory>, ElementProps<'div'> {\n  /** Data used to render chart */\n  data: FunnelChartCell[];\n\n  /** Determines whether the tooltip should be displayed when a section 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 `Pie` component */\n  funnelProps?: Partial<Omit<FunnelProps, '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 @default 'white' */\n  labelColor?: MantineColor;\n\n  /** Controls chart width and height @default 300 */\n  size?: number;\n\n  /** Controls width of segments stroke @default 1 */\n  strokeWidth?: number;\n\n  /** Determines whether each segment should have associated label @default false */\n  withLabels?: boolean;\n\n  /** Controls labels position relative to the segment @default 'right' */\n  labelsPosition?: 'right' | 'left' | 'inside';\n\n  /** A function to format values inside the tooltip and labels */\n  valueFormatter?: (value: number) => string;\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  /** Additional elements rendered inside `FunnelChart` component */\n  children?: React.ReactNode;\n\n  /** Props passed down to recharts `FunnelChart` component */\n  funnelChartProps?: React.ComponentProps<typeof RechartsFunnelChart>;\n}\n\nexport type FunnelChartFactory = Factory<{\n  props: FunnelChartProps;\n  ref: HTMLDivElement;\n  stylesNames: FunnelChartStylesNames;\n  vars: FunnelChartCssVariables;\n}>;\n\nconst defaultProps = {\n  withTooltip: true,\n  size: 300,\n  strokeWidth: 1,\n  withLabels: false,\n  labelsPosition: 'right',\n  tooltipDataSource: 'all',\n} satisfies Partial<FunnelChartProps>;\n\nconst varsResolver = createVarsResolver<FunnelChartFactory>(\n  (theme, { strokeColor, labelColor, 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),\n    },\n  })\n);\n\nexport const FunnelChart = factory<FunnelChartFactory>((_props) => {\n  const props = useProps('FunnelChart', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    withTooltip,\n    tooltipAnimationDuration,\n    tooltipProps,\n    strokeWidth,\n    withLabels,\n    size,\n    valueFormatter,\n    children,\n    funnelChartProps,\n    funnelProps,\n    labelsPosition,\n    tooltipDataSource,\n    strokeColor,\n    labelColor,\n    attributes,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<FunnelChartFactory>({\n    name: 'FunnelChart',\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<FunnelChartFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <ResponsiveContainer>\n        <RechartsFunnelChart {...funnelChartProps}>\n          <Funnel\n            data={data.map((entry) => ({\n              ...entry,\n              fill: getThemeColor(entry.color, theme),\n            }))}\n            dataKey=\"value\"\n            isAnimationActive={false}\n            stroke=\"var(--chart-stroke-color, var(--mantine-color-body))\"\n            strokeWidth={strokeWidth}\n            {...funnelProps}\n          >\n            {withLabels && (\n              <LabelList\n                position={labelsPosition}\n                fill={\n                  labelsPosition === 'inside'\n                    ? 'var(--chart-labels-color, var(--mantine-color-white))'\n                    : 'var(--chart-labels-color, var(--mantine-color-dimmed))'\n                }\n                stroke=\"none\"\n                fontFamily=\"var(--mantine-font-family)\"\n                fontSize={12}\n                dataKey={(entry) => {\n                  return typeof valueFormatter === 'function'\n                    ? valueFormatter(entry.value as number)\n                    : entry.value;\n                }}\n              />\n            )}\n          </Funnel>\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' ? (payload?.[0]?.name as string) : undefined\n                  }\n                  valueFormatter={valueFormatter}\n                  attributes={attributes}\n                />\n              )}\n              {...tooltipProps}\n            />\n          )}\n\n          {children}\n        </RechartsFunnelChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n});\n\nFunnelChart.displayName = '@mantine/charts/FunnelChart';\nFunnelChart.classes = classes;\nFunnelChart.varsResolver = varsResolver;\n\nexport namespace FunnelChart {\n  export type Props = FunnelChartProps;\n  export type StylesNames = FunnelChartStylesNames;\n  export type Factory = FunnelChartFactory;\n  export type CssVariables = FunnelChartCssVariables;\n  export type Cell = FunnelChartCell;\n}\n"],"mappings":";;;;;;;AA+FA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,mBAAmB;CACpB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,YAAY,YAAY,EAC7C,MAAM;CACJ,wBAAwB,cAAc,cAAc,aAAa,MAAM,GAAG,KAAA;CAC1E,wBAAwB,aAAa,cAAc,YAAY,MAAM,GAAG,KAAA;CACxE,gBAAgB,IAAI,KAAK;CAC1B,EACF,EACF;AAED,MAAaA,gBAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,aACA,0BACA,cACA,aACA,YACA,MACA,gBACA,UACA,kBACA,aACA,gBACA,mBACA,aACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,QAAQ,iBAAiB;CAE/B,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAC1C,oBAAC,qBAAD,EAAA,UACE,qBAACC,aAAD;GAAqB,GAAI;aAAzB;IACE,oBAAC,QAAD;KACE,MAAM,KAAK,KAAK,WAAW;MACzB,GAAG;MACH,MAAM,cAAc,MAAM,OAAO,MAAM;MACxC,EAAE;KACH,SAAQ;KACR,mBAAmB;KACnB,QAAO;KACM;KACb,GAAI;eAEH,cACC,oBAAC,WAAD;MACE,UAAU;MACV,MACE,mBAAmB,WACf,0DACA;MAEN,QAAO;MACP,YAAW;MACX,UAAU;MACV,UAAU,UAAU;AAClB,cAAO,OAAO,mBAAmB,aAC7B,eAAe,MAAM,MAAgB,GACrC,MAAM;;MAEZ,CAAA;KAEG,CAAA;IAER,eACC,oBAACC,WAAD;KACE,mBAAmB;KACnB,mBAAmB;KACnB,UAAU,EAAE,cACV,oBAAC,cAAD;MACE,SAAS;MACT,YAAY;MACZ,QAAQ;MACR,MAAK;MACL,WACE,sBAAsB,YAAa,UAAU,IAAI,OAAkB,KAAA;MAErD;MACJ;MACZ,CAAA;KAEJ,GAAI;KACJ,CAAA;IAGH;IACmB;MACF,CAAA;EAClB,CAAA;EAER;AAEF,cAAY,cAAc;AAC1B,cAAY,UAAUC;AACtB,cAAY,eAAe"}