@undp/data-viz 2.6.0 → 2.6.1

package/dist/ParetoChart-sZCTqhIt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParetoChart-sZCTqhIt.cjs","names":[],"sources":["../src/Components/Graphs/ParetoChart/Graph.tsx","../src/Components/Graphs/ParetoChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  NumberFormatOptions,\n  ParetoChartDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: ParetoChartDataType[];\n  barColor: string;\n  lineColor: string;\n  axisTitles: [string, string];\n  width: number;\n  height: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  sameAxes: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  barPadding: number;\n  truncateBy: number;\n  showLabels: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  resetSelectionOnDoubleClick: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  noOfTicks: number;\n  showValues: boolean;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  animate: AnimateDataType;\n  naLabel: string;\n  customLayers: CustomLayerDataType[];\n  showAxisLabels: boolean;\n  lineNumberDisplayOptions?: NumberFormatOptions;\n  barNumberDisplayOptions?: NumberFormatOptions;\n}\ninterface DataFormattedType {\n  id: string;\n  label: number | string;\n  line?: number;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    barColor,\n    lineColor,\n    axisTitles,\n    sameAxes,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    showValues,\n    onSeriesMouseOver,\n    barPadding,\n    truncateBy,\n    showLabels,\n    onSeriesMouseClick,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    noOfTicks,\n    curveType,\n    styles,\n    classNames,\n    animate,\n    customLayers,\n    naLabel,\n    showAxisLabels,\n    lineNumberDisplayOptions,\n    barNumberDisplayOptions,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin + 50,\n    right: rightMargin + 65,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));\n  const x = scaleBand()\n    .domain(dataWithId.map((d) => `${d.id}`))\n    .range([0, graphWidth])\n    .paddingInner(barPadding);\n  const minParam1 =\n    Math.min(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const minParam2 =\n    Math.min(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam1 =\n    Math.max(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam2 =\n    Math.max(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null))\n      : 0;\n\n  const minParam = minParam1 < minParam2 ? minParam1 : minParam2;\n  const maxParam = maxParam1 > maxParam2 ? maxParam1 : maxParam2;\n\n  const y1 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam1,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam1 > 0 ? maxParam1 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n  const y2 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam2,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam2 > 0 ? maxParam2 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const lineShape = line<DataFormattedType>()\n    .defined((d) => !checkIfNullOrUndefined(d.line))\n    .x((d) => (x(`${d.id}`) as number) + x.bandwidth() / 2)\n    .y((d) => y2(d.line as number))\n    .curve(curve);\n  const y1Ticks = y1.ticks(noOfTicks);\n  const y2Ticks = y2.ticks(noOfTicks);\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <g>\n            {y1Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y1(d)}\n                  y2={y1(d)}\n                  x1={-15}\n                  x2={-20}\n                  style={{\n                    stroke: barColor,\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={0 - 25}\n                  y={y1(d)}\n                  dy='0.33em'\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                  style={{\n                    textAnchor: 'end',\n                    fill: barColor,\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    naLabel,\n                    barNumberDisplayOptions?.precision ?? 2,\n                    barNumberDisplayOptions?.prefix,\n                    barNumberDisplayOptions?.suffix,\n                    barNumberDisplayOptions?.locale,\n                    barNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={-15}\n              x2={-15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: barColor, ...(styles?.xAxis?.axis || {}) } }}\n            />\n            {showAxisLabels ? (\n              <AxisTitle\n                x={10 - margin.left}\n                y={graphHeight / 2}\n                style={{ fill: barColor, ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={\n                  axisTitles[0].length > 100\n                    ? `${axisTitles[0].substring(0, 100)}...`\n                    : axisTitles[0]\n                }\n                rotate90\n              />\n            ) : null}\n          </g>\n          <g>\n            {y2Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y2(d)}\n                  y2={y2(d)}\n                  x1={graphWidth + 15}\n                  x2={graphWidth + 20}\n                  style={{\n                    stroke: lineColor,\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={graphWidth + 25}\n                  y={y2(d)}\n                  dy='0.33em'\n                  dx={-2}\n                  style={{\n                    textAnchor: 'start',\n                    fill: lineColor,\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    naLabel,\n                    lineNumberDisplayOptions?.precision ?? 2,\n                    lineNumberDisplayOptions?.prefix,\n                    lineNumberDisplayOptions?.suffix,\n                    lineNumberDisplayOptions?.locale,\n                    lineNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={graphWidth + 15}\n              x2={graphWidth + 15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: lineColor, ...(styles?.xAxis?.axis || {}) } }}\n            />\n            {showAxisLabels ? (\n              <AxisTitle\n                x={graphWidth + margin.right - 15}\n                y={graphHeight / 2}\n                style={{ fill: lineColor, ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={\n                  axisTitles[1].length > 100\n                    ? `${axisTitles[1].substring(0, 100)}...`\n                    : axisTitles[1]\n                }\n                rotate90\n              />\n            ) : null}\n          </g>\n          <Axis\n            y1={sameAxes ? y1(0) : graphHeight}\n            y2={sameAxes ? y1(0) : graphHeight}\n            x1={-15}\n            x2={graphWidth + 15}\n            classNames={{ axis: classNames?.xAxis?.axis }}\n            styles={{ axis: styles?.xAxis?.axis }}\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d, i) => {\n              return (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  opacity={0.85}\n                  onMouseEnter={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                    onSeriesMouseOver?.(d);\n                  }}\n                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                >\n                  <motion.rect\n                    variants={{\n                      initial: {\n                        attrY: y1(0),\n                        height: 0,\n                        opacity: 1,\n                        fill: barColor,\n                      },\n                      whileInView: {\n                        attrY: d.bar ? (d.bar > 0 ? y1(d.bar) : y1(0)) : 0,\n                        height: d.bar ? Math.abs(y1(d.bar) - y1(0)) : 0,\n                        opacity: 1,\n                        fill: barColor,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    exit={{\n                      attrY: y1(0),\n                      height: 0,\n                      opacity: 0,\n                      transition: { duration: animate.duration },\n                    }}\n                    x={x(`${i}`)}\n                    width={x.bandwidth()}\n                  />\n                  {showValues && !checkIfNullOrUndefined(d.bar) ? (\n                    <motion.text\n                      x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\n                      exit={{\n                        attrY: y1(0),\n                        opacity: 0,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          attrY: y1(0),\n                          opacity: 0,\n                          fill: barColor,\n                        },\n                        whileInView: {\n                          attrY: y1(d.bar || 0),\n                          opacity: 1,\n                          fill: barColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      style={{\n                        textAnchor: 'middle',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                      dy={d.bar ? (d.bar >= 0 ? '-5px' : '1em') : '-5px'}\n                    >\n                      {numberFormattingFunction(\n                        d.bar,\n                        naLabel,\n                        barNumberDisplayOptions?.precision ?? 2,\n                        barNumberDisplayOptions?.prefix,\n                        barNumberDisplayOptions?.suffix,\n                        barNumberDisplayOptions?.locale,\n                        barNumberDisplayOptions?.padZeros,\n                      )}\n                    </motion.text>\n                  ) : null}\n                  {showLabels ? (\n                    <XAxesLabels\n                      value={\n                        `${d.label}`.length < truncateBy\n                          ? `${d.label}`\n                          : `${`${d.label}`.substring(0, truncateBy)}...`\n                      }\n                      y={graphHeight + 5}\n                      x={x(`${d.id}`) as number}\n                      width={x.bandwidth()}\n                      height={margin.bottom}\n                      style={styles?.xAxis?.labels}\n                      className={classNames?.xAxis?.labels}\n                      alignment='top'\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                </motion.g>\n              );\n            })}\n            <motion.path\n              exit={{\n                opacity: 0,\n                transition: { duration: animate.duration },\n              }}\n              variants={{\n                initial: {\n                  d: lineShape(dataWithId.map((d) => ({ ...d, line: 0 }))) as string,\n                  opacity: 0,\n                  stroke: lineColor,\n                },\n                whileInView: {\n                  d: lineShape(dataWithId) as string,\n                  opacity: 1,\n                  stroke: lineColor,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\n              style={{\n                fill: 'none',\n                strokeWidth: 2,\n              }}\n            />\n            {dataWithId.map((d) => (\n              <g key={d.label}>\n                {!checkIfNullOrUndefined(d.line) ? (\n                  // biome-ignore lint/a11y/noStaticElementInteractions: interaction for graph\n                  <g\n                    onMouseEnter={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.(d);\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData(d);\n                          onSeriesMouseClick?.(d);\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                    }}\n                    onMouseLeave={() => {\n                      setMouseOverData(undefined);\n                      setEventX(undefined);\n                      setEventY(undefined);\n                      onSeriesMouseOver?.(undefined);\n                    }}\n                  >\n                    <motion.circle\n                      exit={{\n                        cy: y2(0),\n                        opacity: 0,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          cy: y2(0),\n                          opacity: 0,\n                          fill: lineColor,\n                        },\n                        whileInView: {\n                          cy: y2(d.line as number),\n                          opacity: 1,\n                          fill: lineColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      cx={(x(d.id) as number) + x.bandwidth() / 2}\n                      r={\n                        graphWidth / dataWithId.length < 5\n                          ? 0\n                          : graphWidth / dataWithId.length < 20\n                            ? 2\n                            : 4\n                      }\n                    />\n                    {showValues ? (\n                      <motion.text\n                        x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\n                        exit={{\n                          y: y2(0),\n                          opacity: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        variants={{\n                          initial: {\n                            y: y2(0),\n                            opacity: 0,\n                            fill: lineColor,\n                          },\n                          whileInView: {\n                            y: y2(d.line as number),\n                            opacity: 1,\n                            fill: lineColor,\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        dy='-5px'\n                      >\n                        {numberFormattingFunction(\n                          d.line,\n                          naLabel,\n                          lineNumberDisplayOptions?.precision ?? 2,\n                          lineNumberDisplayOptions?.prefix,\n                          lineNumberDisplayOptions?.suffix,\n                          lineNumberDisplayOptions?.locale,\n                          lineNumberDisplayOptions?.padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </g>\n                ) : null}\n              </g>\n            ))}\n          </AnimatePresence>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n        </g>\n      </motion.svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n      {detailsOnClick && mouseClickData !== undefined ? (\n        <DetailsModal\n          body={detailsOnClick}\n          data={mouseClickData}\n          setData={setMouseClickData}\n          className={classNames?.modal}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ParetoChartDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: ParetoChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Color of the bars */\n  barColor?: string;\n  /** Color of the line */\n  lineColor?: string;\n  /** Title for the color legend */\n  colorLegendTitle?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n  /** Padding between bars */\n  barPadding?: number;\n\n  // Values and Ticks\n  /** Truncate labels by specified length */\n  truncateBy?: number;\n  /** Number of ticks on the axis */\n  noOfTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of labels */\n  showLabels?: boolean;\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Enables same axis for bars and line */\n  sameAxes?: boolean;\n  /** Toggle visibility of color scale. */\n  showColorScale?: boolean;\n  /** Toggle visibility of labels of the axis. */\n  showAxisLabels?: boolean;\n  /** Title for the bar axis */\n  barAxisTitle?: string;\n  /** Title for the line axis */\n  lineAxisTitle?: string;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Configuration options for lines controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  lineNumberDisplayOptions?: NumberFormatOptions;\n  /** Configuration options for bars controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  barNumberDisplayOptions?: NumberFormatOptions;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function ParetoChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    padding,\n    lineColor = Colors.light.categoricalColors.colors[1],\n    barColor = Colors.light.categoricalColors.colors[0],\n    sameAxes = false,\n    backgroundColor = false,\n    leftMargin = 80,\n    rightMargin = 80,\n    topMargin = 20,\n    bottomMargin = 25,\n    lineAxisTitle = 'Line chart',\n    barAxisTitle = 'Bar graph',\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    graphDownload = false,\n    dataDownload = false,\n    barPadding = 0.25,\n    truncateBy = 999,\n    showLabels = true,\n    onSeriesMouseClick,\n    language = 'en',\n    colorLegendTitle,\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    showValues = true,\n    noOfTicks = 5,\n    curveType = 'curve',\n    styles,\n    classNames,\n    animate = false,\n    customLayers = [],\n    naLabel = 'NA',\n    showColorScale = true,\n    showAxisLabels = true,\n    lineNumberDisplayOptions,\n    barNumberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {!showColorScale && data.length > 0 ? null : (\n        <ColorLegend\n          colorDomain={[barAxisTitle, lineAxisTitle]}\n          colors={[\n            barColor || Colors[theme].categoricalColors.colors[0],\n            lineColor || Colors[theme].categoricalColors.colors[1],\n          ]}\n          colorLegendTitle={colorLegendTitle}\n          showNAColor={false}\n          className={classNames?.colorLegend}\n        />\n      )}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data}\n            sameAxes={sameAxes}\n            lineColor={lineColor}\n            barColor={barColor}\n            width={svgWidth}\n            height={svgHeight}\n            truncateBy={truncateBy}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            axisTitles={[barAxisTitle, lineAxisTitle]}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            barPadding={barPadding}\n            showLabels={showLabels}\n            onSeriesMouseClick={onSeriesMouseClick}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            noOfTicks={noOfTicks}\n            curveType={curveType}\n            showValues={showValues}\n            styles={styles}\n            classNames={classNames}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            customLayers={customLayers}\n            naLabel={naLabel}\n            showAxisLabels={showAxisLabels}\n            lineNumberDisplayOptions={lineNumberDisplayOptions}\n            barNumberDisplayOptions={barNumberDisplayOptions}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"s8BAwEA,SAAgB,GAAM,EAAc,CAClC,GAAM,CACJ,OACA,QACA,SACA,WACA,YACA,aACA,WACA,cACA,cACA,aACA,gBACA,UACA,cACA,oBACA,aACA,aACA,cACA,qBACA,+BACA,iBACA,aACA,YACA,SACA,aACA,UACA,gBACA,UACA,kBACA,2BACA,2BACE,EACE,GAAA,EAAA,EAAA,QAAgB,IAAI,EACpB,EAAW,GAAA,EAAU,EAAQ,CACjC,KAAM,EAAQ,KACd,OAAQ,EAAQ,MAClB,CAAC,EACK,GACJ,IAAc,SACV,GAAA,EACA,IAAc,OACZ,EAAA,EACA,IAAc,YACZ,EAAA,EACA,IAAc,aACZ,EAAA,EACA,EAAA,EAEN,CAAC,EAAe,IAAA,EAAA,EAAA,UAAkC,IAAA,EAAS,EAE3D,CAAC,EAAgB,IAAA,EAAA,EAAA,UAAmC,IAAA,EAAS,EAC7D,CAAC,EAAQ,IAAA,EAAA,EAAA,UAA0C,IAAA,EAAS,EAC5D,CAAC,GAAQ,IAAA,EAAA,EAAA,UAA0C,IAAA,EAAS,EAC5D,EAAS,CACb,IAAK,GACL,OAAQ,GACR,KAAM,GAAa,GACnB,MAAO,EAAc,EACvB,EACM,EAAa,EAAQ,EAAO,KAAO,EAAO,MAC1C,EAAc,EAAS,EAAO,IAAM,EAAO,OAE3C,EAAa,EAAK,KAAK,EAAG,KAAO,CAAE,GAAG,EAAG,GAAI,GAAG,GAAI,EAAE,EACtD,EAAI,EAAA,EAAU,EACjB,OAAO,EAAW,IAAK,GAAM,GAAG,EAAE,IAAI,CAAC,EACvC,MAAM,CAAC,EAAG,CAAU,CAAC,EACrB,aAAa,CAAU,EACpB,GACJ,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,GAAG,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,IACrF,KACI,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,GAAG,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,EAAI,EAGzF,EADE,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,GAAG,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,EAEvF,GACJ,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,IACtF,KACI,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,EAAI,EAG1F,EADE,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,EAExF,EACJ,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,GAAG,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,IACrF,IAEI,EADA,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,GAAG,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,EAErF,EACJ,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,IACtF,IAEI,EADA,KAAK,IAAI,GAAG,EAAW,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,GAAyB,IAAI,CAAC,EAGtF,GAAW,GAAY,GAAY,GAAY,GAC/C,EAAW,EAAY,EAAY,EAAY,EAE/C,EAAK,EAAA,EAAY,EACpB,OAAO,CACN,EAAW,GAAW,GACtB,EAAY,EAAW,EAAI,EAAW,EAAK,EAAY,EAAI,EAAY,CACzE,CAAC,EACA,MAAM,CAAC,EAAa,CAAC,CAAC,EACtB,KAAK,EACF,EAAK,EAAA,EAAY,EACpB,OAAO,CACN,EAAW,GAAW,GACtB,EAAY,EAAW,EAAI,EAAW,EAAK,EAAY,EAAI,EAAY,CACzE,CAAC,EACA,MAAM,CAAC,EAAa,CAAC,CAAC,EACtB,KAAK,EAEF,GAAY,GAAA,EAAwB,EACvC,QAAS,GAAM,CAAC,EAAA,EAAuB,EAAE,IAAI,CAAC,EAC9C,EAAG,GAAO,EAAE,GAAG,EAAE,IAAI,EAAe,EAAE,UAAU,EAAI,CAAC,EACrD,EAAG,GAAM,EAAG,EAAE,IAAc,CAAC,EAC7B,MAAM,EAAK,EACR,GAAU,EAAG,MAAM,EAAS,EAC5B,GAAU,EAAG,MAAM,EAAS,EAClC,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,EAAO,IAAR,CACE,MAAO,GAAG,EAAM,IAChB,OAAQ,GAAG,EAAO,IAClB,QAAS,OAAO,EAAM,GAAG,IACzB,UAAU,MACV,IAAK,YAEL,EAAA,EAAA,MAAC,IAAD,CAAG,UAAW,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI,YAArD,EACE,EAAA,EAAA,MAAC,IAAD,CAAA,SAAA,CACG,GAAQ,KAAK,EAAG,KAEf,EAAA,EAAA,MAAC,IAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EAAG,CAAC,EACR,GAAI,EAAG,CAAC,EACR,GAAI,IACJ,GAAI,IACJ,MAAO,CACL,OAAQ,EACR,YAAa,EACb,GAAI,GAAQ,OAAO,WAAa,CAAC,CACnC,EACA,UAAW,GAAY,OAAO,SAC/B,CAAA,GACD,EAAA,EAAA,KAAC,OAAD,CACE,EAAG,IACH,EAAG,EAAG,CAAC,EACP,GAAG,SACH,WAAA,EAAA,EAAA,IAAc,UAAW,GAAY,OAAO,MAAM,EAClD,MAAO,CACL,WAAY,MACZ,KAAM,EACN,GAAI,GAAQ,OAAO,QAAU,CAAC,CAChC,WAEC,EAAA,EACC,EACA,EACA,GAAyB,WAAa,EACtC,GAAyB,OACzB,GAAyB,OACzB,GAAyB,OACzB,GAAyB,QAC3B,CACI,CAAA,CACL,CAAA,EAlCK,CAkCL,CACJ,GACD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,GAAI,EACJ,GAAI,EACJ,GAAI,IACJ,GAAI,IACJ,WAAY,CAAE,KAAM,GAAY,OAAO,IAAK,EAC5C,OAAQ,CAAE,KAAM,CAAE,OAAQ,EAAU,GAAI,GAAQ,OAAO,MAAQ,CAAC,CAAG,CAAE,CACtE,CAAA,EACA,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,EAAG,GAAK,EAAO,KACf,EAAG,EAAc,EACjB,MAAO,CAAE,KAAM,EAAU,GAAI,GAAQ,OAAO,OAAS,CAAC,CAAG,EACzD,UAAW,GAAY,OAAO,MAC9B,KACE,EAAW,GAAG,OAAS,IACnB,GAAG,EAAW,GAAG,UAAU,EAAG,GAAG,EAAE,KACnC,EAAW,GAEjB,SAAA,EACD,CAAA,EACC,IACH,CAAA,CAAA,GACH,EAAA,EAAA,MAAC,IAAD,CAAA,SAAA,CACG,GAAQ,KAAK,EAAG,KAEf,EAAA,EAAA,MAAC,IAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EAAG,CAAC,EACR,GAAI,EAAG,CAAC,EACR,GAAI,EAAa,GACjB,GAAI,EAAa,GACjB,MAAO,CACL,OAAQ,EACR,YAAa,EACb,GAAI,GAAQ,OAAO,WAAa,CAAC,CACnC,EACA,UAAW,GAAY,OAAO,SAC/B,CAAA,GACD,EAAA,EAAA,KAAC,OAAD,CACE,EAAG,EAAa,GAChB,EAAG,EAAG,CAAC,EACP,GAAG,SACH,GAAI,GACJ,MAAO,CACL,WAAY,QACZ,KAAM,EACN,GAAI,GAAQ,OAAO,QAAU,CAAC,CAChC,EACA,WAAA,EAAA,EAAA,IAAc,UAAW,GAAY,OAAO,MAAM,WAEjD,EAAA,EACC,EACA,EACA,GAA0B,WAAa,EACvC,GAA0B,OAC1B,GAA0B,OAC1B,GAA0B,OAC1B,GAA0B,QAC5B,CACI,CAAA,CACL,CAAA,EAnCK,CAmCL,CACJ,GACD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,GAAI,EACJ,GAAI,EACJ,GAAI,EAAa,GACjB,GAAI,EAAa,GACjB,WAAY,CAAE,KAAM,GAAY,OAAO,IAAK,EAC5C,OAAQ,CAAE,KAAM,CAAE,OAAQ,EAAW,GAAI,GAAQ,OAAO,MAAQ,CAAC,CAAG,CAAE,CACvE,CAAA,EACA,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,EAAG,EAAa,EAAO,MAAQ,GAC/B,EAAG,EAAc,EACjB,MAAO,CAAE,KAAM,EAAW,GAAI,GAAQ,OAAO,OAAS,CAAC,CAAG,EAC1D,UAAW,GAAY,OAAO,MAC9B,KACE,EAAW,GAAG,OAAS,IACnB,GAAG,EAAW,GAAG,UAAU,EAAG,GAAG,EAAE,KACnC,EAAW,GAEjB,SAAA,EACD,CAAA,EACC,IACH,CAAA,CAAA,GACH,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,GAAI,EAAW,EAAG,CAAC,EAAI,EACvB,GAAI,EAAW,EAAG,CAAC,EAAI,EACvB,GAAI,IACJ,GAAI,EAAa,GACjB,WAAY,CAAE,KAAM,GAAY,OAAO,IAAK,EAC5C,OAAQ,CAAE,KAAM,GAAQ,OAAO,IAAK,CACrC,CAAA,EACA,GAAa,OAAQ,GAAM,EAAE,WAAa,QAAQ,EAAE,IAAK,GAAM,EAAE,KAAK,GACvE,EAAA,EAAA,MAAC,EAAA,EAAD,CAAA,SAAA,CACG,EAAW,KAAK,EAAG,KAEhB,EAAA,EAAA,MAAC,EAAA,EAAO,EAAR,CACE,UAAU,wBAEV,QAAS,IACT,aAAe,GAAU,CACvB,EAAiB,CAAC,EAClB,EAAU,EAAM,OAAO,EACvB,EAAU,EAAM,OAAO,EACvB,IAAoB,CAAC,CACvB,EACA,YAAe,EACT,GAAsB,MACxB,EAAA,EAAA,SAAY,EAAgB,CAAC,GAAK,IAChC,EAAkB,IAAA,EAAS,EAC3B,IAAqB,IAAA,EAAS,IAE9B,EAAkB,CAAC,EACnB,IAAqB,CAAC,GAG5B,EACA,YAAc,GAAU,CACtB,EAAiB,CAAC,EAClB,EAAU,EAAM,OAAO,EACvB,EAAU,EAAM,OAAO,CACzB,EACA,iBAAoB,CAClB,EAAiB,IAAA,EAAS,EAC1B,EAAU,IAAA,EAAS,EACnB,EAAU,IAAA,EAAS,EACnB,IAAoB,IAAA,EAAS,CAC/B,WA/BF,EAiCE,EAAA,EAAA,KAAC,EAAA,EAAO,KAAR,CACE,SAAU,CACR,QAAS,CACP,MAAO,EAAG,CAAC,EACX,OAAQ,EACR,QAAS,EACT,KAAM,CACR,EACA,YAAa,CACX,MAAO,EAAE,IAAO,EAAE,IAAM,EAAI,EAAG,EAAE,GAAG,EAAI,EAAG,CAAC,EAAK,EACjD,OAAQ,EAAE,IAAM,KAAK,IAAI,EAAG,EAAE,GAAG,EAAI,EAAG,CAAC,CAAC,EAAI,EAC9C,QAAS,EACT,KAAM,EACN,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,KAAM,CACJ,MAAO,EAAG,CAAC,EACX,OAAQ,EACR,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,EACA,EAAG,EAAE,GAAG,GAAG,EACX,MAAO,EAAE,UAAU,CACpB,CAAA,EACA,IAAc,CAAC,EAAA,EAAuB,EAAE,GAAG,GAC1C,EAAA,EAAA,KAAC,EAAA,EAAO,KAAR,CACE,EAAI,EAAE,GAAG,EAAE,IAAI,EAAe,EAAE,UAAU,EAAI,EAC9C,KAAM,CACJ,MAAO,EAAG,CAAC,EACX,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,EACA,SAAU,CACR,QAAS,CACP,MAAO,EAAG,CAAC,EACX,QAAS,EACT,KAAM,CACR,EACA,YAAa,CACX,MAAO,EAAG,EAAE,KAAO,CAAC,EACpB,QAAS,EACT,KAAM,EACN,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,MAAO,CACL,WAAY,SACZ,GAAI,GAAQ,mBAAqB,CAAC,CACpC,EACA,WAAA,EAAA,EAAA,IAAc,sBAAuB,GAAY,iBAAiB,EAClE,GAAI,EAAE,IAAO,EAAE,KAAO,EAAI,OAAS,MAAS,gBAE3C,EAAA,EACC,EAAE,IACF,EACA,GAAyB,WAAa,EACtC,GAAyB,OACzB,GAAyB,OACzB,GAAyB,OACzB,GAAyB,QAC3B,CACW,CAAA,EACX,KACH,IACC,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,MACE,GAAG,EAAE,QAAQ,OAAS,EAClB,GAAG,EAAE,QACL,GAAG,GAAG,EAAE,QAAQ,UAAU,EAAG,CAAU,EAAE,KAE/C,EAAG,EAAc,EACjB,EAAG,EAAE,GAAG,EAAE,IAAI,EACd,MAAO,EAAE,UAAU,EACnB,OAAQ,EAAO,OACf,MAAO,GAAQ,OAAO,OACtB,UAAW,GAAY,OAAO,OAC9B,UAAU,MACD,UACC,UACX,CAAA,EACC,IACI,GArHH,EAAE,KAqHC,CAEb,GACD,EAAA,EAAA,KAAC,EAAA,EAAO,KAAR,CACE,KAAM,CACJ,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,EACA,SAAU,CACR,QAAS,CACP,EAAG,GAAU,EAAW,IAAK,IAAO,CAAE,GAAG,EAAG,KAAM,CAAE,EAAE,CAAC,EACvD,QAAS,EACT,OAAQ,CACV,EACA,YAAa,CACX,EAAG,GAAU,CAAU,EACvB,QAAS,EACT,OAAQ,EACR,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,MAAO,CACL,KAAM,OACN,YAAa,CACf,CACD,CAAA,EACA,EAAW,IAAK,IACf,EAAA,EAAA,KAAC,IAAD,CAAA,SACI,EAAA,EAAuB,EAAE,IAAI,EAwG3B,MAtGF,EAAA,EAAA,MAAC,IAAD,CACE,aAAe,GAAU,CACvB,EAAiB,CAAC,EAClB,EAAU,EAAM,OAAO,EACvB,EAAU,EAAM,OAAO,EACvB,IAAoB,CAAC,CACvB,EACA,YAAe,EACT,GAAsB,MACxB,EAAA,EAAA,SAAY,EAAgB,CAAC,GAAK,IAChC,EAAkB,IAAA,EAAS,EAC3B,IAAqB,IAAA,EAAS,IAE9B,EAAkB,CAAC,EACnB,IAAqB,CAAC,GAG5B,EACA,YAAc,GAAU,CACtB,EAAiB,CAAC,EAClB,EAAU,EAAM,OAAO,EACvB,EAAU,EAAM,OAAO,CACzB,EACA,iBAAoB,CAClB,EAAiB,IAAA,EAAS,EAC1B,EAAU,IAAA,EAAS,EACnB,EAAU,IAAA,EAAS,EACnB,IAAoB,IAAA,EAAS,CAC/B,WA5BF,EA8BE,EAAA,EAAA,KAAC,EAAA,EAAO,OAAR,CACE,KAAM,CACJ,GAAI,EAAG,CAAC,EACR,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,EACA,SAAU,CACR,QAAS,CACP,GAAI,EAAG,CAAC,EACR,QAAS,EACT,KAAM,CACR,EACA,YAAa,CACX,GAAI,EAAG,EAAE,IAAc,EACvB,QAAS,EACT,KAAM,EACN,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,GAAK,EAAE,EAAE,EAAE,EAAe,EAAE,UAAU,EAAI,EAC1C,EACE,EAAa,EAAW,OAAS,EAC7B,EACA,EAAa,EAAW,OAAS,GAC/B,EACA,CAET,CAAA,EACA,IACC,EAAA,EAAA,KAAC,EAAA,EAAO,KAAR,CACE,EAAI,EAAE,GAAG,EAAE,IAAI,EAAe,EAAE,UAAU,EAAI,EAC9C,KAAM,CACJ,EAAG,EAAG,CAAC,EACP,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,EACA,MAAO,CACL,WAAY,SACZ,GAAI,GAAQ,mBAAqB,CAAC,CACpC,EACA,SAAU,CACR,QAAS,CACP,EAAG,EAAG,CAAC,EACP,QAAS,EACT,KAAM,CACR,EACA,YAAa,CACX,EAAG,EAAG,EAAE,IAAc,EACtB,QAAS,EACT,KAAM,EACN,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,WAAA,EAAA,EAAA,IAAc,sBAAuB,GAAY,iBAAiB,EAClE,GAAG,gBAEF,EAAA,EACC,EAAE,KACF,EACA,GAA0B,WAAa,EACvC,GAA0B,OAC1B,GAA0B,OAC1B,GAA0B,OAC1B,GAA0B,QAC5B,CACW,CAAA,EACX,IACH,GAEJ,EA1GK,EAAE,KA0GP,CACJ,CACc,CAAA,CAAA,EAChB,GAAa,OAAQ,GAAM,EAAE,WAAa,OAAO,EAAE,IAAK,GAAM,EAAE,KAAK,CACrE,GACO,CAAA,EACX,GAAiB,GAAW,GAAU,IACrC,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,KAAM,EACN,KAAM,EACN,KAAM,EACN,KAAM,GACN,gBAAiB,GAAQ,QACzB,UAAW,GAAY,OACxB,CAAA,EACC,KACH,GAAkB,IAAmB,IAAA,IACpC,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,KAAM,EACN,KAAM,EACN,QAAS,EACT,UAAW,GAAY,KACxB,CAAA,EACC,IACJ,CAAA,CAAA,CAEN,CCjeA,SAAgB,GAAY,EAAc,CACxC,GAAM,CACJ,OACA,aACA,UACA,mBACA,SACA,QACA,WACA,WACA,YAAY,EAAA,OAAO,MAAM,kBAAkB,OAAO,GAClD,WAAW,EAAA,OAAO,MAAM,kBAAkB,OAAO,GACjD,YAAW,GACX,kBAAkB,GAClB,cAAa,GACb,eAAc,GACd,aAAY,GACZ,eAAe,GACf,gBAAgB,aAChB,eAAe,YACf,WACA,kBACA,oBACA,WACA,gBAAgB,GAChB,eAAe,GACf,aAAa,IACb,cAAa,IACb,aAAa,GACb,sBACA,WAAW,KACX,oBACA,YAAY,EACZ,QAAQ,QACR,YACA,8BAA8B,GAC9B,kBACA,aAAa,GACb,aAAY,EACZ,YAAY,QACZ,SACA,aACA,UAAU,GACV,gBAAe,CAAC,EAChB,UAAU,KACV,iBAAiB,GACjB,iBAAiB,GACjB,2BACA,2BACE,EAEE,CAAC,EAAU,KAAA,EAAA,EAAA,UAAwB,CAAC,EACpC,CAAC,EAAW,IAAA,EAAA,EAAA,UAAyB,CAAC,EAEtC,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,QAAwC,IAAI,EAYlD,OAXA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAiB,IAAI,eAAgB,GAAY,CACrD,GAAY,EAAQ,GAAG,OAAO,aAAe,GAAG,EAChD,EAAa,EAAQ,GAAG,OAAO,cAAgB,GAAG,CACpD,CAAC,EAID,OAHI,EAAS,SACX,EAAe,QAAQ,EAAS,OAAO,MAE5B,EAAe,WAAW,CACzC,EAAG,CAAC,CAAC,GAGH,EAAA,EAAA,MAAC,EAAA,EAAD,CACE,UAAW,GAAY,eACvB,MAAO,GAAQ,eACf,GAAI,GACJ,IAAK,EACL,aAAY,EACK,kBACV,QACG,WACC,YACJ,QACC,SACQ,kBACP,oBAbX,CAeG,GAAc,GAAoB,GAAiB,GAClD,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CACN,MAAO,GAAQ,MACf,YAAa,GAAQ,WACvB,EACA,WAAY,CACV,MAAO,GAAY,MACnB,YAAa,GAAY,WAC3B,EACY,aACM,mBACX,QACP,cAAe,EAAgB,EAAiB,IAAA,GAChD,aACE,EACI,EAAK,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,IAAM,IAAA,EAAS,EAAE,OAAS,EAC9D,EAAK,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,IAAM,IAAA,EAAS,EACrD,EAAK,OAAQ,GAAM,IAAM,IAAA,EAAS,EACpC,IAEP,CAAA,EACC,KACH,CAAC,GAAkB,EAAK,OAAS,EAAI,MACpC,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,YAAa,CAAC,EAAc,CAAa,EACzC,OAAQ,CACN,GAAY,EAAA,OAAO,GAAO,kBAAkB,OAAO,GACnD,GAAa,EAAA,OAAO,GAAO,kBAAkB,OAAO,EACtD,EACkB,oBAClB,YAAa,GACb,UAAW,GAAY,WACxB,CAAA,GAEH,EAAA,EAAA,MAAC,EAAA,EAAD,CAAW,IAAK,WAAhB,CACG,EAAK,SAAW,IAAK,EAAA,EAAA,KAAC,EAAA,EAAD,CAAa,CAAA,EAClC,GAAY,GAAa,EAAK,OAAS,GACtC,EAAA,EAAA,KAAC,GAAD,CACQ,OACI,YACC,YACD,WACV,MAAO,EACP,OAAQ,EACI,cACA,cACC,eACF,aACG,eACd,WAAY,CAAC,EAAc,CAAa,EAC/B,WACU,oBACP,aACA,aACQ,sBACS,8BACb,kBACL,aACA,YACC,aACJ,SACI,aACZ,QACE,IAAY,GACR,CAAE,SAAU,GAAK,KAAM,GAAM,OAAQ,EAAI,EACzC,GAAW,CAAE,SAAU,EAAG,KAAM,GAAM,OAAQ,CAAE,EAExC,gBACL,UACO,iBACU,2BACD,yBAC1B,CAAA,EACC,IACK,IACV,GAAW,GACV,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CAAE,SAAU,GAAQ,SAAU,OAAQ,GAAQ,MAAO,EAC7D,WAAY,CACV,SAAU,GAAY,SACtB,OAAQ,GAAY,MACtB,EACS,UACC,WACH,OACR,CAAA,EACC,IACU,GAEpB"}

package/dist/ParetoChart.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./compiler-runtime-oPPev21o.cjs"),rt=require("react"),ce=require("./index-DQA8q5sC.cjs"),ee=require("@undp/design-system-react/cn"),ie=require("./numberFormattingFunction-u2iNHL_c.cjs"),de=require("./Tooltip-DwUFLDrj.cjs"),ae=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),re=require("./Axis-DY7jsk1Y.cjs"),ue=require("./AxisTitle-CyFFbdNU.cjs"),fe=require("./XAxesLabels-0ROJnigy.cjs"),he=require("./DetailsModal-BmjtLqrZ.cjs"),ge=require("./band-VYfcZeJ2.cjs"),xe=require("./linear-CgUCbw9F.cjs"),pe=require("./line-DaEMhXmx.cjs"),se=require("./step-BZ3C8QFW.cjs"),qt=require("./proxy-QMeVVqam.cjs"),ye=require("./use-in-view-DjR_gqJP.cjs"),be=require("./index-5BQWR1Z8.cjs"),ve=require("./GraphFooter.cjs"),Ae=require("./GraphHeader.cjs"),je=require("./ColorLegend.cjs"),ne=require("./Colors.cjs"),we=require("./EmptyState-BoaUUuo6.cjs"),me=require("./GraphContainer-gaG9TSy4.cjs");function Ee(e){const t=n.compilerRuntimeExports.c(162),{data:h,width:H,height:X,barColor:g,lineColor:f,axisTitles:p,sameAxes:w,rightMargin:Gt,leftMargin:Bt,topMargin:St,bottomMargin:Dt,tooltip:wt,showValues:Et,onSeriesMouseOver:at,barPadding:It,truncateBy:Rt,showLabels:Tt,onSeriesMouseClick:q,resetSelectionOnDoubleClick:ht,detailsOnClick:L,noOfTicks:gt,curveType:yt,styles:s,classNames:o,animate:c,customLayers:S,naLabel:ct,showAxisLabels:N,lineNumberDisplayOptions:x,barNumberDisplayOptions:u}=e,Wt=rt.useRef(null);let Mt;t[0]!==c.amount||t[1]!==c.once?(Mt={once:c.once,amount:c.amount},t[0]=c.amount,t[1]=c.once,t[2]=Mt):Mt=t[2];const O=ye.useInView(Wt,Mt),Vt=yt==="linear"?pe.curveLinear:yt==="step"?se.curveStep:yt==="stepAfter"?se.stepAfter:yt==="stepBefore"?se.stepBefore:se.monotoneX,[bt,ut]=rt.useState(void 0),[D,vt]=rt.useState(void 0),[d,l]=rt.useState(void 0),[Ct,I]=rt.useState(void 0),Pt=Bt+50,Ft=Gt+65;let kt;t[3]!==Dt||t[4]!==Pt||t[5]!==Ft||t[6]!==St?(kt={top:St,bottom:Dt,left:Pt,right:Ft},t[3]=Dt,t[4]=Pt,t[5]=Ft,t[6]=St,t[7]=kt):kt=t[7];const a=kt,y=H-a.left-a.right,r=X-a.top-a.bottom;let E,G,W,$,Z,B,U,R,M,T,V,z,J,K,Q;if(t[8]!==c||t[9]!==p||t[10]!==g||t[11]!==u?.locale||t[12]!==u?.padZeros||t[13]!==u?.precision||t[14]!==u?.prefix||t[15]!==u?.suffix||t[16]!==It||t[17]!==o?.graphObjectValues||t[18]!==o?.xAxis?.axis||t[19]!==o?.xAxis?.labels||t[20]!==o?.yAxis?.gridLines||t[21]!==o?.yAxis?.labels||t[22]!==o?.yAxis?.title||t[23]!==Vt||t[24]!==S||t[25]!==h||t[26]!==L||t[27]!==r||t[28]!==y||t[29]!==X||t[30]!==O||t[31]!==f||t[32]!==x?.locale||t[33]!==x?.padZeros||t[34]!==x?.precision||t[35]!==x?.prefix||t[36]!==x?.suffix||t[37]!==a.bottom||t[38]!==a.left||t[39]!==a.right||t[40]!==a.top||t[41]!==D||t[42]!==ct||t[43]!==gt||t[44]!==q||t[45]!==at||t[46]!==ht||t[47]!==w||t[48]!==N||t[49]!==Tt||t[50]!==Et||t[51]!==s?.graphObjectValues||t[52]!==s?.xAxis?.axis||t[53]!==s?.xAxis?.labels||t[54]!==s?.yAxis?.gridLines||t[55]!==s?.yAxis?.labels||t[56]!==s?.yAxis?.title||t[57]!==Rt||t[58]!==H){const m=h.map(Qe),v=ge.band().domain(m.map(Ke)).range([0,y]).paddingInner(It),Lt=Math.min(...m.map(Je).filter(ze))!==1/0?Math.min(...m.map(Ue).filter(Be))>0?0:Math.min(...m.map(Ze).filter(We)):0,Nt=Math.min(...m.map(Ge).filter(Xe))!==1/0?Math.min(...m.map(He).filter(Ye))>0?0:Math.min(...m.map(Fe).filter(Pe)):0,At=Math.max(...m.map(Ve).filter(Te))!==1/0?Math.max(...m.map(Ie).filter(De)):0,pt=Math.max(...m.map(Se).filter(qe))!==1/0?Math.max(...m.map($e).filter(Oe)):0,Ut=Lt<Nt?Lt:Nt,mt=At>pt?At:pt,b=xe.linear().domain([w?Ut:Lt,w?mt>0?mt:0:At>0?At:0]).range([r,0]).nice(),A=xe.linear().domain([w?Ut:Nt,w?mt>0?mt:0:pt>0?pt:0]).range([r,0]).nice(),Zt=pe.line().defined(Ne).x(i=>v(`${i.id}`)+v.bandwidth()/2).y(i=>A(i.line)).curve(Vt),Yt=b.ticks(gt),Ht=A.ticks(gt);G=qt.motion.svg,Z=`${H}px`,B=`${X}px`,U=`0 0 ${H} ${X}`,R="ltr",M=Wt,J=`translate(${a.left},${a.top})`;const Ot=o?.xAxis?.axis;let nt;t[74]!==Ot?(nt={axis:Ot},t[74]=Ot,t[75]=nt):nt=t[75];let C;t[76]!==s?.xAxis?.axis?(C=s?.xAxis?.axis||{},t[76]=s?.xAxis?.axis,t[77]=C):C=t[77];let k;t[78]!==g||t[79]!==C?(k={axis:{stroke:g,...C}},t[78]=g,t[79]=C,t[80]=k):k=t[80];let P;t[81]!==r||t[82]!==nt||t[83]!==k?(P=n.jsxRuntimeExports.jsx(re.Axis,{y1:0,y2:r,x1:-15,x2:-15,classNames:nt,styles:k}),t[81]=r,t[82]=nt,t[83]=k,t[84]=P):P=t[84];let F;t[85]!==p||t[86]!==g||t[87]!==o?.yAxis?.title||t[88]!==r||t[89]!==a.left||t[90]!==N||t[91]!==s?.yAxis?.title?(F=N?n.jsxRuntimeExports.jsx(ue.AxisTitle,{x:10-a.left,y:r/2,style:{fill:g,...s?.yAxis?.title||{}},className:o?.yAxis?.title,text:p[0].length>100?`${p[0].substring(0,100)}...`:p[0],rotate90:!0}):null,t[85]=p,t[86]=g,t[87]=o?.yAxis?.title,t[88]=r,t[89]=a.left,t[90]=N,t[91]=s?.yAxis?.title,t[92]=F):F=t[92],K=n.jsxRuntimeExports.jsxs("g",{children:[Yt.map((i,$t)=>n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx("line",{y1:b(i),y2:b(i),x1:-15,x2:-20,style:{stroke:g,strokeWidth:1,...s?.yAxis?.gridLines||{}},className:o?.yAxis?.gridLines}),n.jsxRuntimeExports.jsx("text",{x:-25,y:b(i),dy:"0.33em",className:ee.cn("text-xs",o?.yAxis?.labels),style:{textAnchor:"end",fill:g,...s?.yAxis?.labels||{}},children:ie.numberFormattingFunction(i,ct,u?.precision??2,u?.prefix,u?.suffix,u?.locale,u?.padZeros)})]},$t)),P,F]});const ot=y+15,lt=y+15,jt=o?.xAxis?.axis;let dt;t[93]!==jt?(dt={axis:jt},t[93]=jt,t[94]=dt):dt=t[94];let ft;t[95]!==s?.xAxis?.axis?(ft=s?.xAxis?.axis||{},t[95]=s?.xAxis?.axis,t[96]=ft):ft=t[96];let Xt;t[97]!==f||t[98]!==ft?(Xt={axis:{stroke:f,...ft}},t[97]=f,t[98]=ft,t[99]=Xt):Xt=t[99];let zt;t[100]!==r||t[101]!==ot||t[102]!==lt||t[103]!==dt||t[104]!==Xt?(zt=n.jsxRuntimeExports.jsx(re.Axis,{y1:0,y2:r,x1:ot,x2:lt,classNames:dt,styles:Xt}),t[100]=r,t[101]=ot,t[102]=lt,t[103]=dt,t[104]=Xt,t[105]=zt):zt=t[105];let Jt;t[106]!==p||t[107]!==o?.yAxis?.title||t[108]!==r||t[109]!==y||t[110]!==f||t[111]!==a.right||t[112]!==N||t[113]!==s?.yAxis?.title?(Jt=N?n.jsxRuntimeExports.jsx(ue.AxisTitle,{x:y+a.right-15,y:r/2,style:{fill:f,...s?.yAxis?.title||{}},className:o?.yAxis?.title,text:p[1].length>100?`${p[1].substring(0,100)}...`:p[1],rotate90:!0}):null,t[106]=p,t[107]=o?.yAxis?.title,t[108]=r,t[109]=y,t[110]=f,t[111]=a.right,t[112]=N,t[113]=s?.yAxis?.title,t[114]=Jt):Jt=t[114],Q=n.jsxRuntimeExports.jsxs("g",{children:[Ht.map((i,$t)=>n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx("line",{y1:A(i),y2:A(i),x1:y+15,x2:y+20,style:{stroke:f,strokeWidth:1,...s?.yAxis?.gridLines||{}},className:o?.yAxis?.gridLines}),n.jsxRuntimeExports.jsx("text",{x:y+25,y:A(i),dy:"0.33em",dx:-2,style:{textAnchor:"start",fill:f,...s?.yAxis?.labels||{}},className:ee.cn("text-xs",o?.yAxis?.labels),children:ie.numberFormattingFunction(i,ct,x?.precision??2,x?.prefix,x?.suffix,x?.locale,x?.padZeros)})]},$t)),zt,Jt]});const oe=o?.xAxis?.axis;let Kt;t[115]!==oe?(Kt={axis:oe},t[115]=oe,t[116]=Kt):Kt=t[116];const le=s?.xAxis?.axis;let Qt;t[117]!==le?(Qt={axis:le},t[117]=le,t[118]=Qt):Qt=t[118],W=n.jsxRuntimeExports.jsx(re.Axis,{y1:w?b(0):r,y2:w?b(0):r,x1:-15,x2:y+15,classNames:Kt,styles:Qt}),t[119]!==S?($=S.filter(Le).map(ke),t[119]=S,t[120]=$):$=t[120],E=be.AnimatePresence,T=m.map((i,$t)=>n.jsxRuntimeExports.jsxs(qt.motion.g,{className:"undp-viz-g-with-hover",opacity:.85,onMouseEnter:Y=>{ut(i),I(Y.clientY),l(Y.clientX),at?.(i)},onClick:()=>{(q||L)&&(ce.isEqual(D,i)&&ht?(vt(void 0),q?.(void 0)):(vt(i),q?.(i)))},onMouseMove:Y=>{ut(i),I(Y.clientY),l(Y.clientX)},onMouseLeave:()=>{ut(void 0),l(void 0),I(void 0),at?.(void 0)},children:[n.jsxRuntimeExports.jsx(qt.motion.rect,{variants:{initial:{attrY:b(0),height:0,opacity:1,fill:g},whileInView:{attrY:i.bar?i.bar>0?b(i.bar):b(0):0,height:i.bar?Math.abs(b(i.bar)-b(0)):0,opacity:1,fill:g,transition:{duration:c.duration}}},initial:"initial",animate:O?"whileInView":"initial",exit:{attrY:b(0),height:0,opacity:0,transition:{duration:c.duration}},x:v(`${$t}`),width:v.bandwidth()}),Et&&!ae.checkIfNullOrUndefined(i.bar)?n.jsxRuntimeExports.jsx(qt.motion.text,{x:v(`${i.id}`)+v.bandwidth()/2,exit:{attrY:b(0),opacity:0,transition:{duration:c.duration}},variants:{initial:{attrY:b(0),opacity:0,fill:g},whileInView:{attrY:b(i.bar||0),opacity:1,fill:g,transition:{duration:c.duration}}},initial:"initial",animate:O?"whileInView":"initial",style:{textAnchor:"middle",...s?.graphObjectValues||{}},className:ee.cn("graph-value text-sm",o?.graphObjectValues),dy:i.bar?i.bar>=0?"-5px":"1em":"-5px",children:ie.numberFormattingFunction(i.bar,ct,u?.precision??2,u?.prefix,u?.suffix,u?.locale,u?.padZeros)}):null,Tt?n.jsxRuntimeExports.jsx(fe.XAxesLabels,{value:`${i.label}`.length<Rt?`${i.label}`:`${`${i.label}`.substring(0,Rt)}...`,y:r+5,x:v(`${i.id}`),width:v.bandwidth(),height:a.bottom,style:s?.xAxis?.labels,className:o?.xAxis?.labels,alignment:"top",animate:c,isInView:O}):null]},i.label));let _t;t[121]!==c.duration?(_t={opacity:0,transition:{duration:c.duration}},t[121]=c.duration,t[122]=_t):_t=t[122];let te;t[123]===Symbol.for("react.memo_cache_sentinel")?(te={fill:"none",strokeWidth:2},t[123]=te):te=t[123],V=n.jsxRuntimeExports.jsx(qt.motion.path,{exit:_t,variants:{initial:{d:Zt(m.map(Ce)),opacity:0,stroke:f},whileInView:{d:Zt(m),opacity:1,stroke:f,transition:{duration:c.duration}}},initial:"initial",animate:O?"whileInView":"initial",style:te}),z=m.map((i,$t)=>n.jsxRuntimeExports.jsx("g",{children:ae.checkIfNullOrUndefined(i.line)?null:n.jsxRuntimeExports.jsxs("g",{onMouseEnter:Y=>{ut(i),I(Y.clientY),l(Y.clientX),at?.(i)},onClick:()=>{(q||L)&&(ce.isEqual(D,i)&&ht?(vt(void 0),q?.(void 0)):(vt(i),q?.(i)))},onMouseMove:Y=>{ut(i),I(Y.clientY),l(Y.clientX)},onMouseLeave:()=>{ut(void 0),l(void 0),I(void 0),at?.(void 0)},children:[n.jsxRuntimeExports.jsx(qt.motion.circle,{exit:{cy:A(0),opacity:0,transition:{duration:c.duration}},variants:{initial:{cy:A(0),opacity:0,fill:f},whileInView:{cy:A(i.line),opacity:1,fill:f,transition:{duration:c.duration}}},initial:"initial",animate:O?"whileInView":"initial",cx:v(i.id)+v.bandwidth()/2,r:y/m.length<5?0:y/m.length<20?2:4}),Et?n.jsxRuntimeExports.jsx(qt.motion.text,{x:v(`${i.id}`)+v.bandwidth()/2,exit:{y:A(0),opacity:0,transition:{duration:c.duration}},style:{textAnchor:"middle",...s?.graphObjectValues||{}},variants:{initial:{y:A(0),opacity:0,fill:f},whileInView:{y:A(i.line),opacity:1,fill:f,transition:{duration:c.duration}}},initial:"initial",animate:O?"whileInView":"initial",className:ee.cn("graph-value text-sm",o?.graphObjectValues),dy:"-5px",children:ie.numberFormattingFunction(i.line,ct,x?.precision??2,x?.prefix,x?.suffix,x?.locale,x?.padZeros)}):null]})},$t)),t[8]=c,t[9]=p,t[10]=g,t[11]=u?.locale,t[12]=u?.padZeros,t[13]=u?.precision,t[14]=u?.prefix,t[15]=u?.suffix,t[16]=It,t[17]=o?.graphObjectValues,t[18]=o?.xAxis?.axis,t[19]=o?.xAxis?.labels,t[20]=o?.yAxis?.gridLines,t[21]=o?.yAxis?.labels,t[22]=o?.yAxis?.title,t[23]=Vt,t[24]=S,t[25]=h,t[26]=L,t[27]=r,t[28]=y,t[29]=X,t[30]=O,t[31]=f,t[32]=x?.locale,t[33]=x?.padZeros,t[34]=x?.precision,t[35]=x?.prefix,t[36]=x?.suffix,t[37]=a.bottom,t[38]=a.left,t[39]=a.right,t[40]=a.top,t[41]=D,t[42]=ct,t[43]=gt,t[44]=q,t[45]=at,t[46]=ht,t[47]=w,t[48]=N,t[49]=Tt,t[50]=Et,t[51]=s?.graphObjectValues,t[52]=s?.xAxis?.axis,t[53]=s?.xAxis?.labels,t[54]=s?.yAxis?.gridLines,t[55]=s?.yAxis?.labels,t[56]=s?.yAxis?.title,t[57]=Rt,t[58]=H,t[59]=E,t[60]=G,t[61]=W,t[62]=$,t[63]=Z,t[64]=B,t[65]=U,t[66]=R,t[67]=M,t[68]=T,t[69]=V,t[70]=z,t[71]=J,t[72]=K,t[73]=Q}else E=t[59],G=t[60],W=t[61],$=t[62],Z=t[63],B=t[64],U=t[65],R=t[66],M=t[67],T=t[68],V=t[69],z=t[70],J=t[71],K=t[72],Q=t[73];let _;t[124]!==E||t[125]!==T||t[126]!==V||t[127]!==z?(_=n.jsxRuntimeExports.jsxs(E,{children:[T,V,z]}),t[124]=E,t[125]=T,t[126]=V,t[127]=z,t[128]=_):_=t[128];let j;t[129]!==S?(j=S.filter(Me).map(Re),t[129]=S,t[130]=j):j=t[130];let tt;t[131]!==W||t[132]!==$||t[133]!==_||t[134]!==j||t[135]!==J||t[136]!==K||t[137]!==Q?(tt=n.jsxRuntimeExports.jsxs("g",{transform:J,children:[K,Q,W,$,_,j]}),t[131]=W,t[132]=$,t[133]=_,t[134]=j,t[135]=J,t[136]=K,t[137]=Q,t[138]=tt):tt=t[138];let et;t[139]!==G||t[140]!==Z||t[141]!==B||t[142]!==U||t[143]!==R||t[144]!==M||t[145]!==tt?(et=n.jsxRuntimeExports.jsx(G,{width:Z,height:B,viewBox:U,direction:R,ref:M,children:tt}),t[139]=G,t[140]=Z,t[141]=B,t[142]=U,t[143]=R,t[144]=M,t[145]=tt,t[146]=et):et=t[146];let it;t[147]!==o?.tooltip||t[148]!==d||t[149]!==Ct||t[150]!==bt||t[151]!==s?.tooltip||t[152]!==wt?(it=bt&&wt&&d&&Ct?n.jsxRuntimeExports.jsx(de.Tooltip,{data:bt,body:wt,xPos:d,yPos:Ct,backgroundStyle:s?.tooltip,className:o?.tooltip}):null,t[147]=o?.tooltip,t[148]=d,t[149]=Ct,t[150]=bt,t[151]=s?.tooltip,t[152]=wt,t[153]=it):it=t[153];let st;t[154]!==o?.modal||t[155]!==L||t[156]!==D?(st=L&&D!==void 0?n.jsxRuntimeExports.jsx(he.DetailsModal,{body:L,data:D,setData:vt,className:o?.modal}):null,t[154]=o?.modal,t[155]=L,t[156]=D,t[157]=st):st=t[157];let xt;return t[158]!==et||t[159]!==it||t[160]!==st?(xt=n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[et,it,st]}),t[158]=et,t[159]=it,t[160]=st,t[161]=xt):xt=t[161],xt}function Re(e){return e.layer}function Me(e){return e.position==="after"}function Ce(e){return{...e,line:0}}function ke(e){return e.layer}function Le(e){return e.position==="before"}function Ne(e){return!ae.checkIfNullOrUndefined(e.line)}function Oe(e){return e!=null}function $e(e){return e.line}function qe(e){return e!=null}function Se(e){return e.line}function De(e){return e!=null}function Ie(e){return e.bar}function Te(e){return e!=null}function Ve(e){return e.bar}function Pe(e){return e!=null}function Fe(e){return e.line}function Ye(e){return e!=null}function He(e){return e.line}function Xe(e){return e!=null}function Ge(e){return e.line}function We(e){return e!=null}function Ze(e){return e.bar}function Be(e){return e!=null}function Ue(e){return e.bar}function ze(e){return e!=null}function Je(e){return e.bar}function Ke(e){return`${e.id}`}function Qe(e,t){return{...e,id:`${t}`}}function _e(e){const t=n.compilerRuntimeExports.c(87),{data:h,graphTitle:H,sources:X,graphDescription:g,height:f,width:p,footNote:w,padding:Gt,lineColor:Bt,barColor:St,sameAxes:Dt,backgroundColor:wt,leftMargin:Et,rightMargin:at,topMargin:It,bottomMargin:Rt,lineAxisTitle:Tt,barAxisTitle:q,tooltip:ht,relativeHeight:L,onSeriesMouseOver:gt,graphID:yt,graphDownload:s,dataDownload:o,barPadding:c,truncateBy:S,showLabels:ct,onSeriesMouseClick:N,language:x,colorLegendTitle:u,minHeight:Wt,theme:Mt,ariaLabel:O,resetSelectionOnDoubleClick:Vt,detailsOnClick:bt,showValues:ut,noOfTicks:D,curveType:vt,styles:d,classNames:l,animate:Ct,customLayers:I,naLabel:Pt,showColorScale:Ft,showAxisLabels:kt,lineNumberDisplayOptions:a,barNumberDisplayOptions:y}=e,r=Bt===void 0?ne.Colors.light.categoricalColors.colors[1]:Bt,E=St===void 0?ne.Colors.light.categoricalColors.colors[0]:St,G=Dt===void 0?!1:Dt,W=wt===void 0?!1:wt,$=Et===void 0?80:Et,Z=at===void 0?80:at,B=It===void 0?20:It,U=Rt===void 0?25:Rt,R=Tt===void 0?"Line chart":Tt,M=q===void 0?"Bar graph":q,T=s===void 0?!1:s,V=o===void 0?!1:o,z=c===void 0?.25:c,J=S===void 0?999:S,K=ct===void 0?!0:ct,Q=x===void 0?"en":x,_=Wt===void 0?0:Wt,j=Mt===void 0?"light":Mt,tt=Vt===void 0?!0:Vt,et=ut===void 0?!0:ut,it=D===void 0?5:D,st=vt===void 0?"curve":vt,xt=Ct===void 0?!1:Ct;let m;t[0]!==I?(m=I===void 0?[]:I,t[0]=I,t[1]=m):m=t[1];const v=m,Lt=Pt===void 0?"NA":Pt,Nt=Ft===void 0?!0:Ft,At=kt===void 0?!0:kt,[pt,Ut]=rt.useState(0),[mt,b]=rt.useState(0),A=rt.useRef(null),Zt=rt.useRef(null);let Yt,Ht;t[2]===Symbol.for("react.memo_cache_sentinel")?(Yt=()=>{const dt=new ResizeObserver(ft=>{Ut(ft[0].target.clientWidth||620),b(ft[0].target.clientHeight||480)});return A.current&&dt.observe(A.current),()=>dt.disconnect()},Ht=[],t[2]=Yt,t[3]=Ht):(Yt=t[2],Ht=t[3]),rt.useEffect(Yt,Ht);const Ot=l?.graphContainer,nt=d?.graphContainer;let C;t[4]!==l?.description||t[5]!==l?.title||t[6]!==h||t[7]!==V||t[8]!==g||t[9]!==T||t[10]!==H||t[11]!==d?.description||t[12]!==d?.title||t[13]!==p?(C=H||g||T||V?n.jsxRuntimeExports.jsx(Ae.GraphHeader,{styles:{title:d?.title,description:d?.description},classNames:{title:l?.title,description:l?.description},graphTitle:H,graphDescription:g,width:p,graphDownload:T?Zt:void 0,dataDownload:V?h.map(ni).filter(si).length>0?h.map(ii).filter(ei):h.filter(ti):null}):null,t[4]=l?.description,t[5]=l?.title,t[6]=h,t[7]=V,t[8]=g,t[9]=T,t[10]=H,t[11]=d?.description,t[12]=d?.title,t[13]=p,t[14]=C):C=t[14];let k;t[15]!==M||t[16]!==E||t[17]!==l?.colorLegend||t[18]!==u||t[19]!==h.length||t[20]!==R||t[21]!==r||t[22]!==Nt||t[23]!==j?(k=!Nt&&h.length>0?null:n.jsxRuntimeExports.jsx(je.ColorLegend,{colorDomain:[M,R],colors:[E||ne.Colors[j].categoricalColors.colors[0],r||ne.Colors[j].categoricalColors.colors[1]],colorLegendTitle:u,showNAColor:!1,className:l?.colorLegend}),t[15]=M,t[16]=E,t[17]=l?.colorLegend,t[18]=u,t[19]=h.length,t[20]=R,t[21]=r,t[22]=Nt,t[23]=j,t[24]=k):k=t[24];let P;t[25]!==h.length?(P=h.length===0&&n.jsxRuntimeExports.jsx(we.EmptyState,{}),t[25]=h.length,t[26]=P):P=t[26];let F;t[27]!==xt||t[28]!==M||t[29]!==E||t[30]!==y||t[31]!==z||t[32]!==U||t[33]!==l||t[34]!==st||t[35]!==v||t[36]!==h||t[37]!==bt||t[38]!==$||t[39]!==R||t[40]!==r||t[41]!==a||t[42]!==Lt||t[43]!==it||t[44]!==N||t[45]!==gt||t[46]!==tt||t[47]!==Z||t[48]!==G||t[49]!==At||t[50]!==K||t[51]!==et||t[52]!==d||t[53]!==mt||t[54]!==pt||t[55]!==ht||t[56]!==B||t[57]!==J?(F=pt&&mt&&h.length>0?n.jsxRuntimeExports.jsx(Ee,{data:h,sameAxes:G,lineColor:r,barColor:E,width:pt,height:mt,truncateBy:J,leftMargin:$,rightMargin:Z,topMargin:B,bottomMargin:U,axisTitles:[M,R],tooltip:ht,onSeriesMouseOver:gt,barPadding:z,showLabels:K,onSeriesMouseClick:N,resetSelectionOnDoubleClick:tt,detailsOnClick:bt,noOfTicks:it,curveType:st,showValues:et,styles:d,classNames:l,animate:xt===!0?{duration:.5,once:!0,amount:.5}:xt||{duration:0,once:!0,amount:0},customLayers:v,naLabel:Lt,showAxisLabels:At,lineNumberDisplayOptions:a,barNumberDisplayOptions:y}):null,t[27]=xt,t[28]=M,t[29]=E,t[30]=y,t[31]=z,t[32]=U,t[33]=l,t[34]=st,t[35]=v,t[36]=h,t[37]=bt,t[38]=$,t[39]=R,t[40]=r,t[41]=a,t[42]=Lt,t[43]=it,t[44]=N,t[45]=gt,t[46]=tt,t[47]=Z,t[48]=G,t[49]=At,t[50]=K,t[51]=et,t[52]=d,t[53]=mt,t[54]=pt,t[55]=ht,t[56]=B,t[57]=J,t[58]=F):F=t[58];let ot;t[59]!==P||t[60]!==F?(ot=n.jsxRuntimeExports.jsxs(me.GraphArea,{ref:A,children:[P,F]}),t[59]=P,t[60]=F,t[61]=ot):ot=t[61];let lt;t[62]!==l?.footnote||t[63]!==l?.source||t[64]!==w||t[65]!==X||t[66]!==d?.footnote||t[67]!==d?.source||t[68]!==p?(lt=X||w?n.jsxRuntimeExports.jsx(ve.GraphFooter,{styles:{footnote:d?.footnote,source:d?.source},classNames:{footnote:l?.footnote,source:l?.source},sources:X,footNote:w,width:p}):null,t[62]=l?.footnote,t[63]=l?.source,t[64]=w,t[65]=X,t[66]=d?.footnote,t[67]=d?.source,t[68]=p,t[69]=lt):lt=t[69];let jt;return t[70]!==O||t[71]!==W||t[72]!==yt||t[73]!==f||t[74]!==Q||t[75]!==_||t[76]!==Gt||t[77]!==L||t[78]!==Ot||t[79]!==nt||t[80]!==C||t[81]!==k||t[82]!==ot||t[83]!==lt||t[84]!==j||t[85]!==p?(jt=n.jsxRuntimeExports.jsxs(me.GraphContainer,{className:Ot,style:nt,id:yt,ref:Zt,"aria-label":O,backgroundColor:W,theme:j,language:Q,minHeight:_,width:p,height:f,relativeHeight:L,padding:Gt,children:[C,k,ot,lt]}),t[70]=O,t[71]=W,t[72]=yt,t[73]=f,t[74]=Q,t[75]=_,t[76]=Gt,t[77]=L,t[78]=Ot,t[79]=nt,t[80]=C,t[81]=k,t[82]=ot,t[83]=lt,t[84]=j,t[85]=p,t[86]=jt):jt=t[86],jt}function ti(e){return e!==void 0}function ei(e){return e!==void 0}function ii(e){return e.data}function si(e){return e!==void 0}function ni(e){return e.data}exports.ParetoChart=_e;
-//# sourceMappingURL=ParetoChart.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./ParetoChart-sZCTqhIt.cjs`);exports.ParetoChart=e.t;

package/dist/ParetoChart.d.ts

@@ -1,187 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AnimateDataType {
-    duration: number;
-    once: boolean;
-    amount: 'some' | 'all' | number;
-}
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
-
-declare interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-export declare function ParetoChart(props: Props): JSX.Element;
-
-declare interface ParetoChartDataType {
-    label: number | string;
-    bar?: number;
-    line?: number;
-    data?: object;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: ParetoChartDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Color of the bars */
-    barColor?: string;
-    /** Color of the line */
-    lineColor?: string;
-    /** Title for the color legend */
-    colorLegendTitle?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Left margin of the graph */
-    leftMargin?: number;
-    /** Right margin of the graph */
-    rightMargin?: number;
-    /** Top margin of the graph */
-    topMargin?: number;
-    /** Bottom margin of the graph */
-    bottomMargin?: number;
-    /** Padding between bars */
-    barPadding?: number;
-    /** Truncate labels by specified length */
-    truncateBy?: number;
-    /** Number of ticks on the axis */
-    noOfTicks?: number;
-    /** Toggle visibility of labels */
-    showLabels?: boolean;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Curve type for the line */
-    curveType?: CurveTypes;
-    /** Enables same axis for bars and line */
-    sameAxes?: boolean;
-    /** Toggle visibility of color scale. */
-    showColorScale?: boolean;
-    /** Toggle visibility of labels of the axis. */
-    showAxisLabels?: boolean;
-    /** Title for the bar axis */
-    barAxisTitle?: string;
-    /** Title for the line axis */
-    lineAxisTitle?: string;
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Toggles if the graph animates in when loaded.  */
-    animate?: boolean | AnimateDataType;
-    /** Configuration options for lines controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    lineNumberDisplayOptions?: NumberFormatOptions;
-    /** Configuration options for bars controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    barNumberDisplayOptions?: NumberFormatOptions;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
-    resetSelectionOnDoubleClick?: boolean;
-    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    detailsOnClick?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/ParetoChart/index'
+export {}