@undp/data-viz 2.5.4 → 2.6.1

package/dist/DumbbellChart-bqOnq8ZF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DumbbellChart-bqOnq8ZF.js","names":[],"sources":["../src/Components/Graphs/DumbbellChart/Graph.tsx","../src/Components/Graphs/DumbbellChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useMemo, 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 { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YAxesLabels } from '@/Components/Elements/Axes/YAxesLabels';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { RefLineX, RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  DumbbellChartDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: DumbbellChartDataType[];\n  dotColors: string[];\n  barPadding: number;\n  showTicks: boolean;\n  leftMargin?: number;\n  rightMargin?: number;\n  topMargin?: number;\n  bottomMargin?: number;\n  truncateBy: number;\n  width: number;\n  height: number;\n  radius: number;\n  showLabels: 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  maxValue: number;\n  minValue: number;\n  suffix: string;\n  prefix: string;\n  showValues: boolean;\n  selectedColor?: string;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  arrowConnector: boolean;\n  connectorStrokeWidth: number;\n  maxBarThickness?: number;\n  minBarThickness?: number;\n  resetSelectionOnDoubleClick: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  axisTitle?: string;\n  noOfTicks: number;\n  valueColor?: string;\n  labelOrder?: string[];\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  refValues?: ReferenceDataType[];\n  animate: AnimateDataType;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  highlightedDataPoints?: (string | number)[];\n  dimmedOpacity: number;\n  rtl: boolean;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function VerticalGraph(props: Props) {\n  const {\n    data,\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    dotColors,\n    barPadding,\n    showTicks,\n    truncateBy,\n    width,\n    height,\n    radius,\n    showLabels,\n    tooltip,\n    onSeriesMouseOver,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    showValues,\n    suffix,\n    prefix,\n    selectedColor,\n    arrowConnector,\n    connectorStrokeWidth,\n    maxBarThickness,\n    minBarThickness,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    axisTitle,\n    noOfTicks,\n    valueColor,\n    styles,\n    classNames,\n    labelOrder,\n    refValues,\n    animate,\n    precision,\n    customLayers,\n    highlightedDataPoints,\n    dimmedOpacity,\n    hideAxisLine,\n    locale,\n    padZeros,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: axisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\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\n  const dataWithId = useMemo(() => {\n    const idSet = new Set<string>();\n\n    const dataWithIdWithoutMissingIds = data.map((d, i) => {\n      const id = labelOrder ? `${d.label}` : `${i}`;\n      idSet.add(id);\n      return { ...d, id };\n    });\n\n    const missingIds = labelOrder ? labelOrder.filter((id) => !idSet.has(id)) : [];\n\n    return [\n      ...dataWithIdWithoutMissingIds,\n      ...missingIds.map((id) => ({\n        id,\n        label: id,\n        x: Array(data[0].x.length).fill(null),\n      })),\n    ];\n  }, [data, labelOrder]);\n\n  const barOrder = useMemo(() => {\n    return labelOrder ?? dataWithId.map((d) => `${d.id}`);\n  }, [labelOrder, dataWithId]);\n\n  const y = scaleLinear().domain([minValue, maxValue]).range([graphHeight, 0]).nice();\n  const x = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphWidth, minBarThickness * dataWithId.length)\n        : maxBarThickness\n          ? Math.min(graphWidth, maxBarThickness * dataWithId.length)\n          : graphWidth,\n    ])\n    .paddingInner(barPadding);\n  const yTicks = y.ticks(noOfTicks);\n\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        {arrowConnector ? (\n          <defs>\n            <marker\n              id='arrow'\n              viewBox='0 0 10 10'\n              refX='10'\n              refY='5'\n              markerWidth='6'\n              markerHeight='6'\n              orient='auto-start-reverse'\n            >\n              <path\n                d='M 0 0 L 10 5 L 0 10 z'\n                className='fill-primary-gray-600 dark:fill-primary-gray-300'\n              />\n            </marker>\n          </defs>\n        ) : null}\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <Axis\n            hideAxisLine={hideAxisLine}\n            y1={y(minValue < 0 ? 0 : minValue)}\n            y2={y(minValue < 0 ? 0 : minValue)}\n            x1={0 - leftMargin}\n            x2={graphWidth + margin.right}\n            label={\n              showTicks\n                ? numberFormattingFunction(\n                    minValue < 0 ? 0 : minValue,\n                    undefined,\n                    precision,\n                    prefix,\n                    suffix,\n                    locale,\n                    padZeros,\n                  )\n                : undefined\n            }\n            labelPos={{\n              x: 0 - leftMargin,\n              dx: 0,\n              dy: maxValue < 0 ? '1em' : -5,\n              y: y(minValue < 0 ? 0 : minValue),\n            }}\n            classNames={{\n              axis: classNames?.xAxis?.axis,\n              label: classNames?.yAxis?.labels,\n            }}\n            styles={{ axis: styles?.xAxis?.axis, label: styles?.yAxis?.labels }}\n          />\n          {showTicks ? (\n            <YTicksAndGridLines\n              values={yTicks.filter((d) => d !== 0)}\n              y={yTicks.filter((d) => d !== 0).map((d) => y(d))}\n              x1={0 - leftMargin}\n              x2={graphWidth + margin.right}\n              styles={{\n                gridLines: styles?.yAxis?.gridLines,\n                labels: styles?.yAxis?.labels,\n              }}\n              classNames={{\n                gridLines: classNames?.yAxis?.gridLines,\n                labels: classNames?.yAxis?.labels,\n              }}\n              suffix={suffix}\n              prefix={prefix}\n              labelType='secondary'\n              showGridLines\n              labelPos='vertical'\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n          ) : null}\n          <AxisTitle\n            x={0 - leftMargin - 15}\n            y={graphHeight / 2}\n            style={styles?.yAxis?.title}\n            className={classNames?.yAxis?.title}\n            text={axisTitle}\n            rotate90\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d) => (\n              <motion.g\n                className='undp-viz-g-with-hover'\n                key={d.label}\n                variants={{\n                  initial: {\n                    x: (x(`${d.id}`) as number) + x.bandwidth() / 2,\n                    y: 0,\n                    opacity: highlightedDataPoints\n                      ? highlightedDataPoints.indexOf(d.label) !== -1\n                        ? 0.85\n                        : dimmedOpacity\n                      : 0.85,\n                  },\n                  whileInView: {\n                    x: (x(`${d.id}`) as number) + x.bandwidth() / 2,\n                    y: 0,\n                    opacity: highlightedDataPoints\n                      ? highlightedDataPoints.indexOf(d.label) !== -1\n                        ? 0.85\n                        : dimmedOpacity\n                      : 0.85,\n                    transition: { duration: animate.duration },\n                  },\n                }}\n                initial='initial'\n                animate={isInView ? 'whileInView' : 'initial'}\n                exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              >\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={0 - x.bandwidth() / 2}\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.line\n                  x1={0}\n                  x2={0}\n                  style={{\n                    strokeWidth: connectorStrokeWidth,\n                    ...(styles?.dataConnectors || {}),\n                    opacity: selectedColor ? 0.3 : 1,\n                  }}\n                  className={cn(\n                    'stroke-primary-gray-600 dark:stroke-primary-gray-300',\n                    classNames?.dataConnectors,\n                  )}\n                  markerEnd={\n                    arrowConnector &&\n                    d.x.indexOf(Math.min(...d.x.filter((el) => el !== null))) === 0\n                      ? 'url(#arrow)'\n                      : ''\n                  }\n                  markerStart={\n                    arrowConnector &&\n                    d.x.indexOf(Math.min(...d.x.filter((el) => el !== null))) === d.x.length - 1\n                      ? 'url(#arrow)'\n                      : ''\n                  }\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      y1: 0,\n                      y2: 0,\n                    },\n                    whileInView: {\n                      y1: y(Math.min(...d.x.filter((el) => el !== null))) + radius,\n                      y2: y(Math.max(...d.x.filter((el) => el !== null))) - radius,\n                      transition: { duration: animate.duration },\n                    },\n                  }}\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                />\n                {d.x.map((el, j) => (\n                  <motion.g\n                    // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                    key={j}\n                    onMouseEnter={(event) => {\n                      setMouseOverData({ ...d, xIndex: j });\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.({ ...d, xIndex: j });\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (\n                          isEqual(mouseClickData, { ...d, xIndex: j }) &&\n                          resetSelectionOnDoubleClick\n                        ) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData({ ...d, xIndex: j });\n                          if (onSeriesMouseClick) onSeriesMouseClick({ ...d, xIndex: j });\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData({ ...d, xIndex: j });\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                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    variants={{\n                      initial: {\n                        opacity: selectedColor ? (dotColors[j] === selectedColor ? 1 : 0.3) : 1,\n                      },\n                      whileInView: {\n                        opacity: selectedColor ? (dotColors[j] === selectedColor ? 1 : 0.3) : 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                  >\n                    {checkIfNullOrUndefined(el) ? null : (\n                      <>\n                        <motion.circle\n                          cx={0}\n                          r={radius}\n                          style={{\n                            fill: dotColors[j],\n                            fillOpacity: 0.85,\n                            stroke: dotColors[j],\n                            strokeWidth: 1,\n                          }}\n                          exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                          variants={{\n                            initial: { cy: y(0), opacity: 0 },\n                            whileInView: {\n                              cy: y(el || 0),\n                              opacity: checkIfNullOrUndefined(el) ? 0 : 1,\n                              transition: { duration: animate.duration },\n                            },\n                          }}\n                          initial='initial'\n                          animate={isInView ? 'whileInView' : 'initial'}\n                        />\n                        {showValues ? (\n                          <motion.text\n                            x={0}\n                            style={{\n                              textAnchor: 'start',\n                              ...(styles?.graphObjectValues || {}),\n                            }}\n                            className={cn(\n                              'graph-value text-sm font-bold',\n                              checkIfNullOrUndefined(el) ? 'opacity-0' : 'opacity-100',\n                              classNames?.graphObjectValues,\n                            )}\n                            dx={radius + 3}\n                            dy='0.33em'\n                            exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                            variants={{\n                              initial: { y: y(0), opacity: 0, fill: valueColor || dotColors[j] },\n                              whileInView: {\n                                y: y(el || 0),\n                                fill: valueColor || dotColors[j],\n                                opacity: 1,\n                                transition: { duration: animate.duration },\n                              },\n                            }}\n                            initial='initial'\n                            animate={isInView ? 'whileInView' : 'initial'}\n                          >\n                            {numberFormattingFunction(\n                              el,\n                              undefined,\n                              precision,\n                              prefix,\n                              suffix,\n                              locale,\n                              padZeros,\n                            )}\n                          </motion.text>\n                        ) : null}\n                      </>\n                    )}\n                  </motion.g>\n                ))}\n              </motion.g>\n            ))}\n            {refValues?.map((el) => (\n              <RefLineY\n                key={el.text}\n                text={el.text}\n                color={el.color}\n                y={y(el.value as number)}\n                x1={0 - leftMargin}\n                x2={graphWidth + margin.right}\n                classNames={el.classNames}\n                styles={el.styles}\n                animate={animate}\n                isInView={isInView}\n              />\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\nexport function HorizontalGraph(props: Props) {\n  const {\n    data,\n    leftMargin = 100,\n    rightMargin = 40,\n    topMargin = 20,\n    bottomMargin = 10,\n    dotColors,\n    suffix,\n    prefix,\n    barPadding,\n    showValues,\n    showTicks,\n    truncateBy,\n    width,\n    height,\n    radius,\n    showLabels,\n    tooltip,\n    onSeriesMouseOver,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    selectedColor,\n    arrowConnector,\n    connectorStrokeWidth,\n    maxBarThickness,\n    minBarThickness,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    axisTitle,\n    noOfTicks,\n    valueColor,\n    styles,\n    classNames,\n    labelOrder,\n    refValues,\n    rtl,\n    animate,\n    precision,\n    customLayers,\n    highlightedDataPoints,\n    dimmedOpacity,\n    locale,\n    padZeros,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const margin = {\n    top: axisTitle ? topMargin + 25 : topMargin,\n    bottom: bottomMargin,\n    left: leftMargin,\n    right: rightMargin,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\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\n  const dataWithId = useMemo(() => {\n    const idSet = new Set<string>();\n\n    const dataWithIdWithoutMissingIds = data.map((d, i) => {\n      const id = labelOrder ? `${d.label}` : `${i}`;\n      idSet.add(id);\n      return { ...d, id };\n    });\n\n    const missingIds = labelOrder ? labelOrder.filter((id) => !idSet.has(id)) : [];\n\n    return [\n      ...dataWithIdWithoutMissingIds,\n      ...missingIds.map((id) => ({\n        id,\n        label: id,\n        x: Array(data[0].x.length).fill(null),\n      })),\n    ];\n  }, [data, labelOrder]);\n\n  const barOrder = useMemo(() => {\n    return labelOrder ?? dataWithId.map((d) => `${d.id}`);\n  }, [labelOrder, dataWithId]);\n\n  const x = scaleLinear().domain([minValue, maxValue]).range([0, graphWidth]).nice();\n  const y = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphHeight, minBarThickness * dataWithId.length)\n        : maxBarThickness\n          ? Math.min(graphHeight, maxBarThickness * dataWithId.length)\n          : graphHeight,\n    ])\n    .paddingInner(barPadding);\n  const xTicks = x.ticks(noOfTicks);\n\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        {arrowConnector ? (\n          <defs>\n            <marker\n              id='arrow'\n              viewBox='0 0 10 10'\n              refX='10'\n              refY='5'\n              markerWidth='6'\n              markerHeight='6'\n              orient='auto-start-reverse'\n            >\n              <path\n                d='M 0 0 L 10 5 L 0 10 z'\n                className='fill-primary-gray-600 dark:fill-primary-gray-300'\n              />\n            </marker>\n          </defs>\n        ) : null}\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          {showTicks ? (\n            <XTicksAndGridLines\n              values={xTicks.filter((_d, i) => i !== 0)}\n              x={xTicks.filter((_d, i) => i !== 0).map((d) => x(d))}\n              y1={0 - topMargin}\n              y2={graphHeight + margin.bottom}\n              styles={{\n                gridLines: styles?.xAxis?.gridLines,\n                labels: styles?.xAxis?.labels,\n              }}\n              classNames={{\n                gridLines: classNames?.xAxis?.gridLines,\n                labels: classNames?.xAxis?.labels,\n              }}\n              suffix={suffix}\n              prefix={prefix}\n              labelType='secondary'\n              showGridLines\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n          ) : null}\n          <AxisTitle\n            x={graphWidth / 2}\n            y={0 - margin.top + 15}\n            style={styles?.xAxis?.title}\n            className={classNames?.xAxis?.title}\n            text={axisTitle}\n          />\n          <YTicksAndGridLines\n            y={dataWithId.map((d) => (y(`${d.id}`) as number) + y.bandwidth() / 2)}\n            x1={0}\n            x2={graphWidth}\n            styles={{ gridLines: styles?.yAxis?.gridLines }}\n            classNames={{ gridLines: classNames?.yAxis?.gridLines }}\n            labelType='secondary'\n            showGridLines\n            labelPos='vertical'\n            precision={precision}\n            locale={locale}\n            padZeros={padZeros}\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d) => (\n              <motion.g\n                className='undp-viz-g-with-hover'\n                key={d.label}\n                variants={{\n                  initial: {\n                    x: 0,\n                    y: (y(`${d.id}`) as number) + y.bandwidth() / 2,\n                    opacity: highlightedDataPoints\n                      ? highlightedDataPoints.indexOf(d.label) !== -1\n                        ? 0.85\n                        : dimmedOpacity\n                      : 0.85,\n                  },\n                  whileInView: {\n                    x: 0,\n                    y: (y(`${d.id}`) as number) + y.bandwidth() / 2,\n                    opacity: highlightedDataPoints\n                      ? highlightedDataPoints.indexOf(d.label) !== -1\n                        ? 0.85\n                        : dimmedOpacity\n                      : 0.85,\n                    transition: { duration: animate.duration },\n                  },\n                }}\n                initial='initial'\n                animate={isInView ? 'whileInView' : 'initial'}\n                exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              >\n                {showLabels ? (\n                  <YAxesLabels\n                    value={\n                      `${d.label}`.length < truncateBy\n                        ? `${d.label}`\n                        : `${`${d.label}`.substring(0, truncateBy)}...`\n                    }\n                    y={0 - y.bandwidth() / 2}\n                    x={0 - margin.left}\n                    width={margin.left}\n                    height={y.bandwidth()}\n                    alignment='right'\n                    style={styles?.yAxis?.labels}\n                    className={classNames?.yAxis?.labels}\n                    animate={animate}\n                    isInView={isInView}\n                  />\n                ) : null}\n                <motion.line\n                  y1={0}\n                  y2={0}\n                  style={{\n                    strokeWidth: connectorStrokeWidth,\n                    ...(styles?.dataConnectors || {}),\n                    opacity: selectedColor ? 0.3 : 1,\n                  }}\n                  className={cn(\n                    'stroke-primary-gray-600 dark:stroke-primary-gray-300',\n                    classNames?.dataConnectors,\n                  )}\n                  markerEnd={\n                    arrowConnector &&\n                    d.x.indexOf(Math.min(...d.x.filter((el) => el !== null)) as number) === 0\n                      ? 'url(#arrow)'\n                      : ''\n                  }\n                  markerStart={\n                    arrowConnector &&\n                    d.x.indexOf(Math.min(...d.x.filter((el) => el !== null)) as number) ===\n                      d.x.length - 1\n                      ? 'url(#arrow)'\n                      : ''\n                  }\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      x1: 0,\n                      x2: 0,\n                    },\n                    whileInView: {\n                      x1: x(Math.min(...d.x.filter((el) => el !== null))) + radius,\n                      x2: x(Math.max(...d.x.filter((el) => el !== null)) as number) - radius,\n                      transition: { duration: animate.duration },\n                    },\n                  }}\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                />\n                {d.x.map((el, j) => (\n                  <motion.g\n                    // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                    key={j}\n                    onMouseEnter={(event) => {\n                      setMouseOverData({ ...d, xIndex: j });\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.({ ...d, xIndex: j });\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (\n                          isEqual(mouseClickData, { ...d, xIndex: j }) &&\n                          resetSelectionOnDoubleClick\n                        ) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData({ ...d, xIndex: j });\n                          if (onSeriesMouseClick) onSeriesMouseClick({ ...d, xIndex: j });\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData({ ...d, xIndex: j });\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                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    variants={{\n                      initial: {\n                        opacity: selectedColor ? (dotColors[j] === selectedColor ? 1 : 0.3) : 1,\n                      },\n                      whileInView: {\n                        opacity: selectedColor ? (dotColors[j] === selectedColor ? 1 : 0.3) : 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                  >\n                    {checkIfNullOrUndefined(el) ? null : (\n                      <>\n                        <motion.circle\n                          cy={0}\n                          r={radius}\n                          style={{\n                            fill: dotColors[j],\n                            fillOpacity: 0.85,\n                            stroke: dotColors[j],\n                            strokeWidth: 1,\n                            opacity: checkIfNullOrUndefined(el) ? 0 : 1,\n                          }}\n                          exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                          variants={{\n                            initial: { cx: x(0), opacity: 0 },\n                            whileInView: {\n                              cx: x(el || 0),\n                              opacity: checkIfNullOrUndefined(el) ? 0 : 1,\n                              transition: { duration: animate.duration },\n                            },\n                          }}\n                          initial='initial'\n                          animate={isInView ? 'whileInView' : 'initial'}\n                        />\n                        {showValues ? (\n                          <motion.text\n                            y={0}\n                            style={{\n                              textAnchor: 'middle',\n                              ...(styles?.graphObjectValues || {}),\n                            }}\n                            dx={0}\n                            dy={0 - radius - 3}\n                            className={cn(\n                              'graph-value text-sm font-bold',\n                              checkIfNullOrUndefined(el) ? '0opacity-0' : 'opacity-100',\n                              classNames?.graphObjectValues,\n                            )}\n                            exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                            variants={{\n                              initial: { x: x(0), opacity: 0, fill: valueColor || dotColors[j] },\n                              whileInView: {\n                                x: x(el || 0),\n                                fill: valueColor || dotColors[j],\n                                opacity: 1,\n                                transition: { duration: animate.duration },\n                              },\n                            }}\n                            initial='initial'\n                            animate={isInView ? 'whileInView' : 'initial'}\n                          >\n                            {numberFormattingFunction(\n                              el,\n                              undefined,\n                              precision,\n                              prefix,\n                              suffix,\n                              locale,\n                              padZeros,\n                            )}\n                          </motion.text>\n                        ) : null}\n                      </>\n                    )}\n                  </motion.g>\n                ))}\n              </motion.g>\n            ))}\n            {refValues?.map((el) => (\n              <RefLineX\n                key={el.text}\n                text={el.text}\n                color={el.color}\n                x={x(el.value as number)}\n                y1={0 - margin.top}\n                y2={graphHeight + margin.bottom}\n                textSide={x(el.value as number) > graphWidth * 0.75 || rtl ? 'left' : 'right'}\n                classNames={el.classNames}\n                styles={el.styles}\n                animate={animate}\n                isInView={isInView}\n              />\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 { SliderUI } from '@undp/design-system-react/SliderUI';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegendWithMouseOver } from '@/Components/Elements/ColorLegendWithMouseOver';\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 { Pause, Play } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  DumbbellChartDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  TimelineDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { ensureCompleteDataForDumbbellChart } from '@/Utils/ensureCompleteData';\nimport { getSliderMarks } from '@/Utils/getSliderMarks';\nimport { HorizontalGraph, VerticalGraph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: DumbbellChartDataType[];\n\n  /** Orientation of the graph */\n  orientation?: 'vertical' | 'horizontal';\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  /** Array of colors for the circle */\n  colors?: string[];\n  /** Domain of colors for the graph */\n  colorDomain: string[];\n  /** Title for the color legend */\n  colorLegendTitle?: string;\n  /** Color of value labels */\n  valueColor?: 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  /** Maximum thickness of bars */\n  maxBarThickness?: number;\n  /** Minimum thickness of bars */\n  minBarThickness?: number;\n  /** Maximum number of bars shown in the graph */\n  maxNumberOfBars?: number;\n  /** Radius of the dots */\n  radius?: number;\n\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Truncate labels by specified length */\n  truncateBy?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\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  /** Custom order for labels */\n  labelOrder?: string[];\n  /** Toggle visibility of axis ticks */\n  showTicks?: boolean;\n  /** Toggle visibility of axis line for the  main axis. Only applicable to vertical charts. */\n  hideAxisLine?: boolean;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Toggle if the is a arrow head at the end of the connector */\n  arrowConnector?: boolean;\n  /** Data points to highlight. Use the label value from data to highlight the data point */\n  highlightedDataPoints?: (string | number)[];\n  /** Defines the opacity of the non-highlighted data */\n  dimmedOpacity?: number;\n  /** Stroke width of the connector */\n  connectorStrokeWidth?: number;\n  /** Title for the  axis */\n  axisTitle?: string;\n  /** Sorting order for data. If this is a number then data is sorted by value at that index x array in the data props. If this is diff then data is sorted by the difference of the last and first element in the x array in the data props. This is overwritten by labelOrder prop */\n  sortParameter?: number | 'diff';\n  /** Sorting order for data. This is overwritten by labelOrder prop. */\n  sortData?: 'asc' | 'desc';\n  /** Toggles if data points which have all the values as undefined or null are filtered out.  */\n  filterNA?: boolean;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */\n  timeline?: TimelineDataType;\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 DumbbellChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors = Colors.light.categoricalColors.colors,\n    sources,\n    graphDescription,\n    barPadding = 0.25,\n    showTicks = true,\n    leftMargin,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    truncateBy = 999,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    padding,\n    backgroundColor = true,\n    radius = 3,\n    tooltip,\n    showLabels = true,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    graphDownload = false,\n    dataDownload = false,\n    showValues = true,\n    sortParameter,\n    arrowConnector = false,\n    connectorStrokeWidth = 2,\n    language = 'en',\n    minHeight = 0,\n    theme = 'light',\n    maxBarThickness,\n    maxNumberOfBars,\n    minBarThickness,\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    axisTitle,\n    noOfTicks = 5,\n    valueColor,\n    orientation = 'vertical',\n    styles,\n    classNames,\n    labelOrder,\n    refValues,\n    filterNA = true,\n    animate = false,\n    showColorScale = true,\n    customLayers = [],\n    highlightedDataPoints,\n    dimmedOpacity = 0.3,\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\n    sortData,\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [play, setPlay] = useState(timeline.autoplay);\n  const uniqDatesSorted = useMemo(() => {\n    const dates = [\n      ...new Set(\n        data\n          .filter((d) => d.date)\n          .map((d) => parse(`${d.date}`, timeline.dateFormat || 'yyyy', new Date()).getTime()),\n      ),\n    ];\n    dates.sort((a, b) => a - b);\n    return dates;\n  }, [data, timeline.dateFormat]);\n  const [index, setIndex] = useState(timeline.autoplay ? 0 : uniqDatesSorted.length - 1);\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\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  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setIndex((i) => (i < uniqDatesSorted.length - 1 ? i + 1 : 0));\n      },\n      (timeline.speed || 2) * 1000,\n    );\n    if (!play) clearInterval(interval);\n    return () => clearInterval(interval);\n  }, [uniqDatesSorted, play, timeline.speed]);\n\n  const markObj = getSliderMarks(\n    uniqDatesSorted,\n    index,\n    timeline.showOnlyActiveDate,\n    timeline.dateFormat || 'yyyy',\n  );\n\n  const Comp = orientation === 'horizontal' ? HorizontalGraph : VerticalGraph;\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      {timeline.enabled && uniqDatesSorted.length > 0 && markObj ? (\n        <div className='flex gap-6 items-center' dir='ltr'>\n          <button\n            type='button'\n            onClick={() => {\n              setPlay(!play);\n            }}\n            className='p-0 border-0 cursor-pointer bg-transparent'\n            aria-label={play ? 'Click to pause animation' : 'Click to play animation'}\n          >\n            {play ? <Pause /> : <Play />}\n          </button>\n          <SliderUI\n            min={uniqDatesSorted[0]}\n            max={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            marks={markObj}\n            step={null}\n            defaultValue={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            value={uniqDatesSorted[index]}\n            onChangeComplete={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            onChange={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            aria-label='Time slider. Use arrow keys to adjust selected time period.'\n          />\n        </div>\n      ) : null}\n      {showColorScale && data.length > 0 ? (\n        <ColorLegendWithMouseOver\n          width={width}\n          colorDomain={colorDomain}\n          colors={colors}\n          colorLegendTitle={colorLegendTitle}\n          setSelectedColor={setSelectedColor}\n          showNAColor={false}\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Comp\n            hideAxisLine={hideAxisLine}\n            data={\n              sortParameter !== undefined\n                ? sortParameter === 'diff'\n                  ? orderBy(\n                      ensureCompleteDataForDumbbellChart(data, timeline.dateFormat || 'yyyy')\n                        .filter((d) =>\n                          timeline.enabled\n                            ? `${d.date}` ===\n                              format(\n                                new Date(uniqDatesSorted[index]),\n                                timeline.dateFormat || 'yyyy',\n                              )\n                            : d,\n                        )\n                        .filter((d) => (filterNA ? !d.x.every((item) => item == null) : d)),\n                      (d) =>\n                        checkIfNullOrUndefined(d.x[d.x.length - 1]) ||\n                        checkIfNullOrUndefined(d.x[0])\n                          ? -Infinity\n                          : (d.x[d.x.length - 1] as number) - (d.x[0] as number),\n                      [sortData || 'asc'],\n                    ).filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n                  : orderBy(\n                      ensureCompleteDataForDumbbellChart(data, timeline.dateFormat || 'yyyy')\n                        .filter((d) =>\n                          timeline.enabled\n                            ? `${d.date}` ===\n                              format(\n                                new Date(uniqDatesSorted[index]),\n                                timeline.dateFormat || 'yyyy',\n                              )\n                            : d,\n                        )\n                        .filter((d) => (filterNA ? !d.x.every((item) => item == null) : d)),\n                      (d) =>\n                        checkIfNullOrUndefined(d.x[sortParameter]) ? -Infinity : d.x[sortParameter],\n                      [sortData || 'asc'],\n                    ).filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n                : ensureCompleteDataForDumbbellChart(data, timeline.dateFormat || 'yyyy')\n                    .filter((d) =>\n                      timeline.enabled\n                        ? `${d.date}` ===\n                          format(new Date(uniqDatesSorted[index]), timeline.dateFormat || 'yyyy')\n                        : d,\n                    )\n                    .filter((d) => (filterNA ? !d.x.every((item) => item == null) : d))\n                    .filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n            }\n            dotColors={colors}\n            width={svgWidth}\n            height={svgHeight}\n            radius={radius}\n            barPadding={barPadding}\n            showTicks={showTicks}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            truncateBy={truncateBy}\n            showLabels={showLabels}\n            showValues={showValues}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            maxValue={\n              !checkIfNullOrUndefined(maxValue)\n                ? (maxValue as number)\n                : Math.max(...data.map((d) => Math.max(...d.x.filter((el) => el !== null)))) < 0\n                  ? 0\n                  : Math.max(...data.map((d) => Math.max(...d.x.filter((el) => el !== null))))\n            }\n            minValue={\n              !checkIfNullOrUndefined(minValue)\n                ? (minValue as number)\n                : Math.min(...data.map((d) => Math.min(...d.x.filter((el) => el !== null)))) > 0\n                  ? 0\n                  : Math.min(...data.map((d) => Math.min(...d.x.filter((el) => el !== null))))\n            }\n            onSeriesMouseClick={onSeriesMouseClick}\n            selectedColor={selectedColor}\n            arrowConnector={arrowConnector}\n            connectorStrokeWidth={connectorStrokeWidth}\n            maxBarThickness={maxBarThickness}\n            minBarThickness={minBarThickness}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            axisTitle={axisTitle}\n            noOfTicks={noOfTicks}\n            valueColor={valueColor}\n            styles={styles}\n            classNames={classNames}\n            labelOrder={labelOrder}\n            refValues={refValues}\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            highlightedDataPoints={highlightedDataPoints}\n            dimmedOpacity={dimmedOpacity}\n            rtl={language === 'ar' || language === 'he'}\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\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":"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"}

package/dist/DumbbellChart.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-CHPV5EwG-D4pAp7u0.cjs"),Ae=require("./index-Cno4Q0YE.cjs"),ve=require("./parse-xYI9yrvL.cjs"),T=require("react"),ke=require("./getSliderMarks-BzrpHrHS.cjs"),Ce=require("./index-DQA8q5sC.cjs"),je=require("./numberFormattingFunction-u2iNHL_c.cjs"),Re=require("./Tooltip-C9F3uYG0.cjs"),Bt=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),Me=require("./AxisTitle-DP_evhbe.cjs"),Te=require("./Axis-BTaS9oPQ.cjs"),qe=require("./XAxesLabels-C03jHniq.cjs"),Ie=require("./YTicksAndGridLines-sT3zdCs6.cjs"),Le=require("./ReferenceLine-CpU4G01Y.cjs"),Fe=require("./XTicksAndGridLines-B4UhDVyU.cjs"),Pe=require("./YAxesLabels-DeENFC2M.cjs"),$e=require("./DetailsModal-Du8Fr1QD.cjs"),Ve=require("./linear-CgUCbw9F.cjs"),Ne=require("./band-VYfcZeJ2.cjs"),Gt=require("./proxy-CqH8m8IQ.cjs"),De=require("./use-in-view-dnRv_qqF.cjs"),Se=require("./index-FXfr51ZM.cjs"),we=require("./ensureCompleteData-D9bQTiVS.cjs"),Ee=require("./GraphContainer-Cul9b74X.cjs"),We=require("./GraphHeader.cjs"),Oe=require("./index-BhI7mBJx.cjs"),Ge=require("./GraphFooter.cjs"),Be=require("./ColorLegendWithMouseOver.cjs"),Ye=require("./EmptyState-CFmiFPHz.cjs"),Xe=require("./Colors.cjs");function He(e){const t=i.compilerRuntimeExports.c(152),{data:c,leftMargin:Jt,rightMargin:ae,topMargin:Kt,bottomMargin:Qt,dotColors:I,barPadding:Yt,showTicks:mt,truncateBy:Lt,width:wt,height:jt,radius:yt,showLabels:At,tooltip:v,onSeriesMouseOver:lt,maxValue:$t,minValue:k,onSeriesMouseClick:pt,showValues:_t,suffix:gt,prefix:q,selectedColor:F,arrowConnector:V,connectorStrokeWidth:Xt,maxBarThickness:kt,minBarThickness:bt,resetSelectionOnDoubleClick:Vt,detailsOnClick:N,axisTitle:ct,noOfTicks:te,valueColor:Nt,styles:s,classNames:n,labelOrder:L,refValues:Dt,animate:h,precision:d,customLayers:P,highlightedDataPoints:g,dimmedOpacity:ft,hideAxisLine:St,locale:ut,padZeros:Z}=e,J=Jt===void 0?20:Jt,ee=ae===void 0?20:ae,Et=Kt===void 0?20:Kt,ie=Qt===void 0?25:Qt,E=T.useRef(null);let p;t[0]!==h.amount||t[1]!==h.once?(p={once:h.once,amount:h.amount},t[0]=h.amount,t[1]=h.once,t[2]=p):p=t[2];const w=De.useInView(E,p),Ht=ct?J+30:J;let Tt;t[3]!==ie||t[4]!==ee||t[5]!==Ht||t[6]!==Et?(Tt={top:Et,bottom:ie,left:Ht,right:ee},t[3]=ie,t[4]=ee,t[5]=Ht,t[6]=Et,t[7]=Tt):Tt=t[7];const l=Tt,W=wt-l.left-l.right,G=jt-l.top-l.bottom,[Ot,ne]=T.useState(void 0),[$,qt]=T.useState(void 0),[Ft,j]=T.useState(void 0),[xt,Ut]=T.useState(void 0);let Ct;if(t[8]!==c||t[9]!==L){const m=new Set,b=c.map((y,rt)=>{const u=L?`${y.label}`:`${rt}`;return m.add(u),{...y,id:u}}),Zt=L?L.filter(y=>!m.has(y)):[];let f;t[11]!==c[0]?(f=y=>({id:y,label:y,x:Array(c[0].x.length).fill(null)}),t[11]=c[0],t[12]=f):f=t[12],Ct=[...b,...Zt.map(f)],t[8]=c,t[9]=L,t[10]=Ct}else Ct=t[10];const O=Ct;let Rt;t[13]!==O||t[14]!==L?(Rt=L??O.map(ni),t[13]=O,t[14]=L,t[15]=Rt):Rt=t[15];const zt=Rt;let K,B,Y,Q,_,D,A,M,tt,et,it,ht,S,C,nt;if(t[16]!==h||t[17]!==V||t[18]!==ct||t[19]!==zt||t[20]!==Yt||t[21]!==n?.dataConnectors||t[22]!==n?.graphObjectValues||t[23]!==n?.xAxis?.axis||t[24]!==n?.xAxis?.labels||t[25]!==n?.yAxis?.gridLines||t[26]!==n?.yAxis?.labels||t[27]!==n?.yAxis?.title||t[28]!==Xt||t[29]!==P||t[30]!==O||t[31]!==N||t[32]!==ft||t[33]!==I||t[34]!==G||t[35]!==W||t[36]!==jt||t[37]!==St||t[38]!==g||t[39]!==w||t[40]!==J||t[41]!==ut||t[42]!==l.bottom||t[43]!==l.left||t[44]!==l.right||t[45]!==l.top||t[46]!==kt||t[47]!==$t||t[48]!==bt||t[49]!==k||t[50]!==$||t[51]!==te||t[52]!==pt||t[53]!==lt||t[54]!==Z||t[55]!==d||t[56]!==q||t[57]!==yt||t[58]!==Dt||t[59]!==Vt||t[60]!==F||t[61]!==At||t[62]!==mt||t[63]!==_t||t[64]!==s?.dataConnectors||t[65]!==s?.graphObjectValues||t[66]!==s?.xAxis?.axis||t[67]!==s?.xAxis?.labels||t[68]!==s?.yAxis?.gridLines||t[69]!==s?.yAxis?.labels||t[70]!==s?.yAxis?.title||t[71]!==gt||t[72]!==Lt||t[73]!==Nt||t[74]!==wt){const m=Ve.linear().domain([k,$t]).range([G,0]).nice(),b=Ne.band().domain(zt).range([0,bt?Math.max(W,bt*O.length):kt?Math.min(W,kt*O.length):W]).paddingInner(Yt),Zt=m.ticks(te);B=Gt.motion.svg,tt=`${wt}px`,et=`${jt}px`,it=`0 0 ${wt} ${jt}`,ht="ltr",S=E,t[90]!==V?(C=V?i.jsxRuntimeExports.jsx("defs",{children:i.jsxRuntimeExports.jsx("marker",{id:"arrow",viewBox:"0 0 10 10",refX:"10",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse",children:i.jsxRuntimeExports.jsx("path",{d:"M 0 0 L 10 5 L 0 10 z",className:"fill-primary-gray-600 dark:fill-primary-gray-300"})})}):null,t[90]=V,t[91]=C):C=t[91],Q=`translate(${l.left},${l.top})`;let f;t[92]!==ut||t[93]!==k||t[94]!==Z||t[95]!==d||t[96]!==q||t[97]!==mt||t[98]!==gt?(f=mt?je.numberFormattingFunction(k<0?0:k,void 0,d,q,gt,ut,Z):void 0,t[92]=ut,t[93]=k,t[94]=Z,t[95]=d,t[96]=q,t[97]=mt,t[98]=gt,t[99]=f):f=t[99];const y=n?.xAxis?.axis,rt=n?.yAxis?.labels;let u;t[100]!==y||t[101]!==rt?(u={axis:y,label:rt},t[100]=y,t[101]=rt,t[102]=u):u=t[102];const U=s?.xAxis?.axis,Pt=s?.yAxis?.labels;let Wt;t[103]!==U||t[104]!==Pt?(Wt={axis:U,label:Pt},t[103]=U,t[104]=Pt,t[105]=Wt):Wt=t[105],_=i.jsxRuntimeExports.jsx(Te.Axis,{hideAxisLine:St,y1:m(k<0?0:k),y2:m(k<0?0:k),x1:0-J,x2:W+l.right,label:f,labelPos:{x:0-J,dx:0,dy:$t<0?"1em":-5,y:m(k<0?0:k)},classNames:u,styles:Wt}),D=mt?i.jsxRuntimeExports.jsx(Ie.YTicksAndGridLines,{values:Zt.filter(ii),y:Zt.filter(ei).map(r=>m(r)),x1:0-J,x2:W+l.right,styles:{gridLines:s?.yAxis?.gridLines,labels:s?.yAxis?.labels},classNames:{gridLines:n?.yAxis?.gridLines,labels:n?.yAxis?.labels},suffix:gt,prefix:q,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:d,locale:ut,padZeros:Z}):null;const se=0-J-15,a=G/2,dt=s?.yAxis?.title,R=n?.yAxis?.title;t[106]!==ct||t[107]!==se||t[108]!==a||t[109]!==dt||t[110]!==R?(A=i.jsxRuntimeExports.jsx(Me.AxisTitle,{x:se,y:a,style:dt,className:R,text:ct,rotate90:!0}),t[106]=ct,t[107]=se,t[108]=a,t[109]=dt,t[110]=R,t[111]=A):A=t[111],t[112]!==P?(M=P.filter(ti).map(_e),t[112]=P,t[113]=M):M=t[113],K=Se.AnimatePresence,nt=O.map(r=>i.jsxRuntimeExports.jsxs(Gt.motion.g,{className:"undp-viz-g-with-hover",variants:{initial:{x:b(`${r.id}`)+b.bandwidth()/2,y:0,opacity:g?g.indexOf(r.label)!==-1?.85:ft:.85},whileInView:{x:b(`${r.id}`)+b.bandwidth()/2,y:0,opacity:g?g.indexOf(r.label)!==-1?.85:ft:.85,transition:{duration:h.duration}}},initial:"initial",animate:w?"whileInView":"initial",exit:{opacity:0,transition:{duration:h.duration}},children:[At?i.jsxRuntimeExports.jsx(qe.XAxesLabels,{value:`${r.label}`.length<Lt?`${r.label}`:`${`${r.label}`.substring(0,Lt)}...`,y:G+5,x:0-b.bandwidth()/2,width:b.bandwidth(),height:l.bottom,style:s?.xAxis?.labels,className:n?.xAxis?.labels,alignment:"top",animate:h,isInView:w}):null,i.jsxRuntimeExports.jsx(Gt.motion.line,{x1:0,x2:0,style:{strokeWidth:Xt,...s?.dataConnectors||{},opacity:F?.3:1},className:i.mo("stroke-primary-gray-600 dark:stroke-primary-gray-300",n?.dataConnectors),markerEnd:V&&r.x.indexOf(Math.min(...r.x.filter(Qe)))===0?"url(#arrow)":"",markerStart:V&&r.x.indexOf(Math.min(...r.x.filter(Ke)))===r.x.length-1?"url(#arrow)":"",exit:{opacity:0,transition:{duration:h.duration}},variants:{initial:{y1:0,y2:0},whileInView:{y1:m(Math.min(...r.x.filter(Je)))+yt,y2:m(Math.max(...r.x.filter(Ze)))-yt,transition:{duration:h.duration}}},initial:"initial",animate:w?"whileInView":"initial"}),r.x.map((Mt,z)=>i.jsxRuntimeExports.jsx(Gt.motion.g,{onMouseEnter:oe=>{ne({...r,xIndex:z}),Ut(oe.clientY),j(oe.clientX),lt?.({...r,xIndex:z})},onClick:()=>{(pt||N)&&(Ce.isEqual($,{...r,xIndex:z})&&Vt?(qt(void 0),pt?.(void 0)):(qt({...r,xIndex:z}),pt&&pt({...r,xIndex:z})))},onMouseMove:oe=>{ne({...r,xIndex:z}),Ut(oe.clientY),j(oe.clientX)},onMouseLeave:()=>{ne(void 0),j(void 0),Ut(void 0),lt?.(void 0)},exit:{opacity:0,transition:{duration:h.duration}},variants:{initial:{opacity:F?I[z]===F?1:.3:1},whileInView:{opacity:F?I[z]===F?1:.3:1,transition:{duration:h.duration}}},initial:"initial",animate:w?"whileInView":"initial",children:Bt.checkIfNullOrUndefined(Mt)?null:i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(Gt.motion.circle,{cx:0,r:yt,style:{fill:I[z],fillOpacity:.85,stroke:I[z],strokeWidth:1},exit:{opacity:0,transition:{duration:h.duration}},variants:{initial:{cy:m(0),opacity:0},whileInView:{cy:m(Mt||0),opacity:Bt.checkIfNullOrUndefined(Mt)?0:1,transition:{duration:h.duration}}},initial:"initial",animate:w?"whileInView":"initial"}),_t?i.jsxRuntimeExports.jsx(Gt.motion.text,{x:0,style:{textAnchor:"start",...s?.graphObjectValues||{}},className:i.mo("graph-value text-sm font-bold",Bt.checkIfNullOrUndefined(Mt)?"opacity-0":"opacity-100",n?.graphObjectValues),dx:yt+3,dy:"0.33em",exit:{opacity:0,transition:{duration:h.duration}},variants:{initial:{y:m(0),opacity:0,fill:Nt||I[z]},whileInView:{y:m(Mt||0),fill:Nt||I[z],opacity:1,transition:{duration:h.duration}}},initial:"initial",animate:w?"whileInView":"initial",children:je.numberFormattingFunction(Mt,void 0,d,q,gt,ut,Z)}):null]})},z))]},r.label)),Y=Dt?i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:Dt.map((r,Mt)=>i.jsxRuntimeExports.jsx(Le.RefLineY,{text:r.text,color:r.color,y:m(r.value),x1:0-J,x2:W+l.right,classNames:r.classNames,styles:r.styles,animate:h,isInView:w},Mt))}):null,t[16]=h,t[17]=V,t[18]=ct,t[19]=zt,t[20]=Yt,t[21]=n?.dataConnectors,t[22]=n?.graphObjectValues,t[23]=n?.xAxis?.axis,t[24]=n?.xAxis?.labels,t[25]=n?.yAxis?.gridLines,t[26]=n?.yAxis?.labels,t[27]=n?.yAxis?.title,t[28]=Xt,t[29]=P,t[30]=O,t[31]=N,t[32]=ft,t[33]=I,t[34]=G,t[35]=W,t[36]=jt,t[37]=St,t[38]=g,t[39]=w,t[40]=J,t[41]=ut,t[42]=l.bottom,t[43]=l.left,t[44]=l.right,t[45]=l.top,t[46]=kt,t[47]=$t,t[48]=bt,t[49]=k,t[50]=$,t[51]=te,t[52]=pt,t[53]=lt,t[54]=Z,t[55]=d,t[56]=q,t[57]=yt,t[58]=Dt,t[59]=Vt,t[60]=F,t[61]=At,t[62]=mt,t[63]=_t,t[64]=s?.dataConnectors,t[65]=s?.graphObjectValues,t[66]=s?.xAxis?.axis,t[67]=s?.xAxis?.labels,t[68]=s?.yAxis?.gridLines,t[69]=s?.yAxis?.labels,t[70]=s?.yAxis?.title,t[71]=gt,t[72]=Lt,t[73]=Nt,t[74]=wt,t[75]=K,t[76]=B,t[77]=Y,t[78]=Q,t[79]=_,t[80]=D,t[81]=A,t[82]=M,t[83]=tt,t[84]=et,t[85]=it,t[86]=ht,t[87]=S,t[88]=C,t[89]=nt}else K=t[75],B=t[76],Y=t[77],Q=t[78],_=t[79],D=t[80],A=t[81],M=t[82],tt=t[83],et=t[84],it=t[85],ht=t[86],S=t[87],C=t[88],nt=t[89];let X;t[114]!==K||t[115]!==Y||t[116]!==nt?(X=i.jsxRuntimeExports.jsxs(K,{children:[nt,Y]}),t[114]=K,t[115]=Y,t[116]=nt,t[117]=X):X=t[117];let st;t[118]!==P?(st=P.filter(ze).map(Ue),t[118]=P,t[119]=st):st=t[119];let ot;t[120]!==Q||t[121]!==_||t[122]!==D||t[123]!==A||t[124]!==M||t[125]!==X||t[126]!==st?(ot=i.jsxRuntimeExports.jsxs("g",{transform:Q,children:[_,D,A,M,X,st]}),t[120]=Q,t[121]=_,t[122]=D,t[123]=A,t[124]=M,t[125]=X,t[126]=st,t[127]=ot):ot=t[127];let H;t[128]!==B||t[129]!==tt||t[130]!==et||t[131]!==it||t[132]!==ht||t[133]!==S||t[134]!==C||t[135]!==ot?(H=i.jsxRuntimeExports.jsxs(B,{width:tt,height:et,viewBox:it,direction:ht,ref:S,children:[C,ot]}),t[128]=B,t[129]=tt,t[130]=et,t[131]=it,t[132]=ht,t[133]=S,t[134]=C,t[135]=ot,t[136]=H):H=t[136];let o;t[137]!==n?.tooltip||t[138]!==Ft||t[139]!==xt||t[140]!==Ot||t[141]!==s?.tooltip||t[142]!==v?(o=Ot&&v&&Ft&&xt?i.jsxRuntimeExports.jsx(Re.Tooltip,{data:Ot,body:v,xPos:Ft,yPos:xt,backgroundStyle:s?.tooltip,className:n?.tooltip}):null,t[137]=n?.tooltip,t[138]=Ft,t[139]=xt,t[140]=Ot,t[141]=s?.tooltip,t[142]=v,t[143]=o):o=t[143];let at;t[144]!==n?.modal||t[145]!==N||t[146]!==$?(at=N&&$!==void 0?i.jsxRuntimeExports.jsx($e.DetailsModal,{body:N,data:$,setData:qt,className:n?.modal}):null,t[144]=n?.modal,t[145]=N,t[146]=$,t[147]=at):at=t[147];let vt;return t[148]!==H||t[149]!==o||t[150]!==at?(vt=i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[H,o,at]}),t[148]=H,t[149]=o,t[150]=at,t[151]=vt):vt=t[151],vt}function Ue(e){return e.layer}function ze(e){return e.position==="after"}function Ze(e){return e!==null}function Je(e){return e!==null}function Ke(e){return e!==null}function Qe(e){return e!==null}function _e(e){return e.layer}function ti(e){return e.position==="before"}function ei(e){return e!==0}function ii(e){return e!==0}function ni(e){return`${e.id}`}function si(e){const t=i.compilerRuntimeExports.c(141),{data:c,leftMargin:Jt,rightMargin:ae,topMargin:Kt,bottomMargin:Qt,dotColors:I,suffix:Yt,prefix:mt,barPadding:Lt,showValues:wt,showTicks:jt,truncateBy:yt,width:At,height:v,radius:lt,showLabels:$t,tooltip:k,onSeriesMouseOver:pt,maxValue:_t,minValue:gt,onSeriesMouseClick:q,selectedColor:F,arrowConnector:V,connectorStrokeWidth:Xt,maxBarThickness:kt,minBarThickness:bt,resetSelectionOnDoubleClick:Vt,detailsOnClick:N,axisTitle:ct,noOfTicks:te,valueColor:Nt,styles:s,classNames:n,labelOrder:L,refValues:Dt,rtl:h,animate:d,precision:P,customLayers:g,highlightedDataPoints:ft,dimmedOpacity:St,locale:ut,padZeros:Z}=e,J=Jt===void 0?100:Jt,ee=ae===void 0?40:ae,Et=Kt===void 0?20:Kt,ie=Qt===void 0?10:Qt,E=T.useRef(null);let p;t[0]!==d.amount||t[1]!==d.once?(p={once:d.once,amount:d.amount},t[0]=d.amount,t[1]=d.once,t[2]=p):p=t[2];const w=De.useInView(E,p),Ht=ct?Et+25:Et;let Tt;t[3]!==ie||t[4]!==J||t[5]!==ee||t[6]!==Ht?(Tt={top:Ht,bottom:ie,left:J,right:ee},t[3]=ie,t[4]=J,t[5]=ee,t[6]=Ht,t[7]=Tt):Tt=t[7];const l=Tt,W=At-l.left-l.right,G=v-l.top-l.bottom,[Ot,ne]=T.useState(void 0),[$,qt]=T.useState(void 0),[Ft,j]=T.useState(void 0),[xt,Ut]=T.useState(void 0);let Ct;if(t[8]!==c||t[9]!==L){const m=new Set,b=c.map((y,rt)=>{const u=L?`${y.label}`:`${rt}`;return m.add(u),{...y,id:u}}),Zt=L?L.filter(y=>!m.has(y)):[];let f;t[11]!==c[0]?(f=y=>({id:y,label:y,x:Array(c[0].x.length).fill(null)}),t[11]=c[0],t[12]=f):f=t[12],Ct=[...b,...Zt.map(f)],t[8]=c,t[9]=L,t[10]=Ct}else Ct=t[10];const O=Ct;let Rt;t[13]!==O||t[14]!==L?(Rt=L??O.map(fi),t[13]=O,t[14]=L,t[15]=Rt):Rt=t[15];const zt=Rt;let K,B,Y,Q,_,D,A,M,tt,et,it,ht,S,C,nt;if(t[16]!==d||t[17]!==V||t[18]!==ct||t[19]!==zt||t[20]!==Lt||t[21]!==n?.dataConnectors||t[22]!==n?.graphObjectValues||t[23]!==n?.xAxis?.gridLines||t[24]!==n?.xAxis?.labels||t[25]!==n?.xAxis?.title||t[26]!==n?.yAxis?.gridLines||t[27]!==n?.yAxis?.labels||t[28]!==Xt||t[29]!==g||t[30]!==O||t[31]!==N||t[32]!==St||t[33]!==I||t[34]!==G||t[35]!==W||t[36]!==v||t[37]!==ft||t[38]!==w||t[39]!==ut||t[40]!==l.bottom||t[41]!==l.left||t[42]!==l.top||t[43]!==kt||t[44]!==_t||t[45]!==bt||t[46]!==gt||t[47]!==$||t[48]!==te||t[49]!==q||t[50]!==pt||t[51]!==Z||t[52]!==P||t[53]!==mt||t[54]!==lt||t[55]!==Dt||t[56]!==Vt||t[57]!==h||t[58]!==F||t[59]!==$t||t[60]!==jt||t[61]!==wt||t[62]!==s?.dataConnectors||t[63]!==s?.graphObjectValues||t[64]!==s?.xAxis?.gridLines||t[65]!==s?.xAxis?.labels||t[66]!==s?.xAxis?.title||t[67]!==s?.yAxis?.gridLines||t[68]!==s?.yAxis?.labels||t[69]!==Yt||t[70]!==Et||t[71]!==yt||t[72]!==Nt||t[73]!==At){const m=Ve.linear().domain([gt,_t]).range([0,W]).nice(),b=Ne.band().domain(zt).range([0,bt?Math.max(G,bt*O.length):kt?Math.min(G,kt*O.length):G]).paddingInner(Lt),Zt=m.ticks(te);B=Gt.motion.svg,tt=`${At}px`,et=`${v}px`,it=`0 0 ${At} ${v}`,ht="ltr",S=E,t[89]!==V?(C=V?i.jsxRuntimeExports.jsx("defs",{children:i.jsxRuntimeExports.jsx("marker",{id:"arrow",viewBox:"0 0 10 10",refX:"10",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse",children:i.jsxRuntimeExports.jsx("path",{d:"M 0 0 L 10 5 L 0 10 z",className:"fill-primary-gray-600 dark:fill-primary-gray-300"})})}):null,t[89]=V,t[90]=C):C=t[90],Q=`translate(${l.left},${l.top})`,_=jt?i.jsxRuntimeExports.jsx(Fe.XTicksAndGridLines,{values:Zt.filter(pi),x:Zt.filter(mi).map(a=>m(a)),y1:0-Et,y2:G+l.bottom,styles:{gridLines:s?.xAxis?.gridLines,labels:s?.xAxis?.labels},classNames:{gridLines:n?.xAxis?.gridLines,labels:n?.xAxis?.labels},suffix:Yt,prefix:mt,labelType:"secondary",showGridLines:!0,precision:P,locale:ut,padZeros:Z}):null;const f=W/2,y=0-l.top+15,rt=s?.xAxis?.title,u=n?.xAxis?.title;t[91]!==ct||t[92]!==f||t[93]!==y||t[94]!==rt||t[95]!==u?(D=i.jsxRuntimeExports.jsx(Me.AxisTitle,{x:f,y,style:rt,className:u,text:ct}),t[91]=ct,t[92]=f,t[93]=y,t[94]=rt,t[95]=u,t[96]=D):D=t[96];const U=s?.yAxis?.gridLines;let Pt;t[97]!==U?(Pt={gridLines:U},t[97]=U,t[98]=Pt):Pt=t[98];const Wt=n?.yAxis?.gridLines;let se;t[99]!==Wt?(se={gridLines:Wt},t[99]=Wt,t[100]=se):se=t[100],A=i.jsxRuntimeExports.jsx(Ie.YTicksAndGridLines,{y:O.map(a=>b(`${a.id}`)+b.bandwidth()/2),x1:0,x2:W,styles:Pt,classNames:se,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:P,locale:ut,padZeros:Z}),t[101]!==g?(M=g.filter(di).map(xi),t[101]=g,t[102]=M):M=t[102],K=Se.AnimatePresence,nt=O.map(a=>i.jsxRuntimeExports.jsxs(Gt.motion.g,{className:"undp-viz-g-with-hover",variants:{initial:{x:0,y:b(`${a.id}`)+b.bandwidth()/2,opacity:ft?ft.indexOf(a.label)!==-1?.85:St:.85},whileInView:{x:0,y:b(`${a.id}`)+b.bandwidth()/2,opacity:ft?ft.indexOf(a.label)!==-1?.85:St:.85,transition:{duration:d.duration}}},initial:"initial",animate:w?"whileInView":"initial",exit:{opacity:0,transition:{duration:d.duration}},children:[$t?i.jsxRuntimeExports.jsx(Pe.YAxesLabels,{value:`${a.label}`.length<yt?`${a.label}`:`${`${a.label}`.substring(0,yt)}...`,y:0-b.bandwidth()/2,x:0-l.left,width:l.left,height:b.bandwidth(),alignment:"right",style:s?.yAxis?.labels,className:n?.yAxis?.labels,animate:d,isInView:w}):null,i.jsxRuntimeExports.jsx(Gt.motion.line,{y1:0,y2:0,style:{strokeWidth:Xt,...s?.dataConnectors||{},opacity:F?.3:1},className:i.mo("stroke-primary-gray-600 dark:stroke-primary-gray-300",n?.dataConnectors),markerEnd:V&&a.x.indexOf(Math.min(...a.x.filter(ui)))===0?"url(#arrow)":"",markerStart:V&&a.x.indexOf(Math.min(...a.x.filter(ci)))===a.x.length-1?"url(#arrow)":"",exit:{opacity:0,transition:{duration:d.duration}},variants:{initial:{x1:0,x2:0},whileInView:{x1:m(Math.min(...a.x.filter(li)))+lt,x2:m(Math.max(...a.x.filter(ri)))-lt,transition:{duration:d.duration}}},initial:"initial",animate:w?"whileInView":"initial"}),a.x.map((dt,R)=>i.jsxRuntimeExports.jsx(Gt.motion.g,{onMouseEnter:r=>{ne({...a,xIndex:R}),Ut(r.clientY),j(r.clientX),pt?.({...a,xIndex:R})},onClick:()=>{(q||N)&&(Ce.isEqual($,{...a,xIndex:R})&&Vt?(qt(void 0),q?.(void 0)):(qt({...a,xIndex:R}),q&&q({...a,xIndex:R})))},onMouseMove:r=>{ne({...a,xIndex:R}),Ut(r.clientY),j(r.clientX)},onMouseLeave:()=>{ne(void 0),j(void 0),Ut(void 0),pt?.(void 0)},exit:{opacity:0,transition:{duration:d.duration}},variants:{initial:{opacity:F?I[R]===F?1:.3:1},whileInView:{opacity:F?I[R]===F?1:.3:1,transition:{duration:d.duration}}},initial:"initial",animate:w?"whileInView":"initial",children:Bt.checkIfNullOrUndefined(dt)?null:i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(Gt.motion.circle,{cy:0,r:lt,style:{fill:I[R],fillOpacity:.85,stroke:I[R],strokeWidth:1,opacity:Bt.checkIfNullOrUndefined(dt)?0:1},exit:{opacity:0,transition:{duration:d.duration}},variants:{initial:{cx:m(0),opacity:0},whileInView:{cx:m(dt||0),opacity:Bt.checkIfNullOrUndefined(dt)?0:1,transition:{duration:d.duration}}},initial:"initial",animate:w?"whileInView":"initial"}),wt?i.jsxRuntimeExports.jsx(Gt.motion.text,{y:0,style:{textAnchor:"middle",...s?.graphObjectValues||{}},dx:0,dy:0-lt-3,className:i.mo("graph-value text-sm font-bold",Bt.checkIfNullOrUndefined(dt)?"0opacity-0":"opacity-100",n?.graphObjectValues),exit:{opacity:0,transition:{duration:d.duration}},variants:{initial:{x:m(0),opacity:0,fill:Nt||I[R]},whileInView:{x:m(dt||0),fill:Nt||I[R],opacity:1,transition:{duration:d.duration}}},initial:"initial",animate:w?"whileInView":"initial",children:je.numberFormattingFunction(dt,void 0,P,mt,Yt,ut,Z)}):null]})},R))]},a.label)),Y=Dt?i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:Dt.map((a,dt)=>i.jsxRuntimeExports.jsx(Le.RefLineX,{text:a.text,color:a.color,x:m(a.value),y1:0-l.top,y2:G+l.bottom,textSide:m(a.value)>W*.75||h?"left":"right",classNames:a.classNames,styles:a.styles,animate:d,isInView:w},dt))}):null,t[16]=d,t[17]=V,t[18]=ct,t[19]=zt,t[20]=Lt,t[21]=n?.dataConnectors,t[22]=n?.graphObjectValues,t[23]=n?.xAxis?.gridLines,t[24]=n?.xAxis?.labels,t[25]=n?.xAxis?.title,t[26]=n?.yAxis?.gridLines,t[27]=n?.yAxis?.labels,t[28]=Xt,t[29]=g,t[30]=O,t[31]=N,t[32]=St,t[33]=I,t[34]=G,t[35]=W,t[36]=v,t[37]=ft,t[38]=w,t[39]=ut,t[40]=l.bottom,t[41]=l.left,t[42]=l.top,t[43]=kt,t[44]=_t,t[45]=bt,t[46]=gt,t[47]=$,t[48]=te,t[49]=q,t[50]=pt,t[51]=Z,t[52]=P,t[53]=mt,t[54]=lt,t[55]=Dt,t[56]=Vt,t[57]=h,t[58]=F,t[59]=$t,t[60]=jt,t[61]=wt,t[62]=s?.dataConnectors,t[63]=s?.graphObjectValues,t[64]=s?.xAxis?.gridLines,t[65]=s?.xAxis?.labels,t[66]=s?.xAxis?.title,t[67]=s?.yAxis?.gridLines,t[68]=s?.yAxis?.labels,t[69]=Yt,t[70]=Et,t[71]=yt,t[72]=Nt,t[73]=At,t[74]=K,t[75]=B,t[76]=Y,t[77]=Q,t[78]=_,t[79]=D,t[80]=A,t[81]=M,t[82]=tt,t[83]=et,t[84]=it,t[85]=ht,t[86]=S,t[87]=C,t[88]=nt}else K=t[74],B=t[75],Y=t[76],Q=t[77],_=t[78],D=t[79],A=t[80],M=t[81],tt=t[82],et=t[83],it=t[84],ht=t[85],S=t[86],C=t[87],nt=t[88];let X;t[103]!==K||t[104]!==Y||t[105]!==nt?(X=i.jsxRuntimeExports.jsxs(K,{children:[nt,Y]}),t[103]=K,t[104]=Y,t[105]=nt,t[106]=X):X=t[106];let st;t[107]!==g?(st=g.filter(ai).map(oi),t[107]=g,t[108]=st):st=t[108];let ot;t[109]!==Q||t[110]!==_||t[111]!==D||t[112]!==A||t[113]!==M||t[114]!==X||t[115]!==st?(ot=i.jsxRuntimeExports.jsxs("g",{transform:Q,children:[_,D,A,M,X,st]}),t[109]=Q,t[110]=_,t[111]=D,t[112]=A,t[113]=M,t[114]=X,t[115]=st,t[116]=ot):ot=t[116];let H;t[117]!==B||t[118]!==tt||t[119]!==et||t[120]!==it||t[121]!==ht||t[122]!==S||t[123]!==C||t[124]!==ot?(H=i.jsxRuntimeExports.jsxs(B,{width:tt,height:et,viewBox:it,direction:ht,ref:S,children:[C,ot]}),t[117]=B,t[118]=tt,t[119]=et,t[120]=it,t[121]=ht,t[122]=S,t[123]=C,t[124]=ot,t[125]=H):H=t[125];let o;t[126]!==n?.tooltip||t[127]!==Ft||t[128]!==xt||t[129]!==Ot||t[130]!==s?.tooltip||t[131]!==k?(o=Ot&&k&&Ft&&xt?i.jsxRuntimeExports.jsx(Re.Tooltip,{data:Ot,body:k,xPos:Ft,yPos:xt,backgroundStyle:s?.tooltip,className:n?.tooltip}):null,t[126]=n?.tooltip,t[127]=Ft,t[128]=xt,t[129]=Ot,t[130]=s?.tooltip,t[131]=k,t[132]=o):o=t[132];let at;t[133]!==n?.modal||t[134]!==N||t[135]!==$?(at=N&&$!==void 0?i.jsxRuntimeExports.jsx($e.DetailsModal,{body:N,data:$,setData:qt,className:n?.modal}):null,t[133]=n?.modal,t[134]=N,t[135]=$,t[136]=at):at=t[136];let vt;return t[137]!==H||t[138]!==o||t[139]!==at?(vt=i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[H,o,at]}),t[137]=H,t[138]=o,t[139]=at,t[140]=vt):vt=t[140],vt}function oi(e){return e.layer}function ai(e){return e.position==="after"}function ri(e){return e!==null}function li(e){return e!==null}function ci(e){return e!==null}function ui(e){return e!==null}function xi(e){return e.layer}function di(e){return e.position==="before"}function mi(e,t){return t!==0}function pi(e,t){return t!==0}function fi(e){return`${e.id}`}function hi(e){const t=i.compilerRuntimeExports.c(131),{data:c,graphTitle:Jt,colors:ae,sources:Kt,graphDescription:Qt,barPadding:I,showTicks:Yt,leftMargin:mt,rightMargin:Lt,topMargin:wt,bottomMargin:jt,truncateBy:yt,height:At,width:v,footNote:lt,colorDomain:$t,colorLegendTitle:k,padding:pt,backgroundColor:_t,radius:gt,tooltip:q,showLabels:F,relativeHeight:V,onSeriesMouseOver:Xt,graphID:kt,maxValue:bt,minValue:Vt,onSeriesMouseClick:N,graphDownload:ct,dataDownload:te,showValues:Nt,sortParameter:s,arrowConnector:n,connectorStrokeWidth:L,language:Dt,minHeight:h,theme:d,maxBarThickness:P,maxNumberOfBars:g,minBarThickness:ft,ariaLabel:St,resetSelectionOnDoubleClick:ut,detailsOnClick:Z,axisTitle:J,noOfTicks:ee,valueColor:Et,orientation:ie,styles:E,classNames:p,labelOrder:w,refValues:Ht,filterNA:Tt,animate:l,showColorScale:W,customLayers:G,highlightedDataPoints:Ot,dimmedOpacity:ne,timeline:$,sortData:qt,hideAxisLine:Ft,numberDisplayOptions:j}=e,xt=ae===void 0?Xe.Colors.light.categoricalColors.colors:ae,Ut=I===void 0?.25:I,Ct=Yt===void 0?!0:Yt,O=yt===void 0?999:yt,Rt=_t===void 0?!0:_t,zt=gt===void 0?3:gt,K=F===void 0?!0:F,B=ct===void 0?!1:ct,Y=te===void 0?!1:te,Q=Nt===void 0?!0:Nt,_=n===void 0?!1:n,D=L===void 0?2:L,A=Dt===void 0?"en":Dt,M=h===void 0?0:h,tt=d===void 0?"light":d,et=ut===void 0?!0:ut,it=ee===void 0?5:ee,ht=ie===void 0?"vertical":ie,S=Tt===void 0?!0:Tt,C=l===void 0?!1:l,nt=W===void 0?!0:W;let X;t[0]!==G?(X=G===void 0?[]:G,t[0]=G,t[1]=X):X=t[1];const st=X,ot=ne===void 0?.3:ne;let H;t[2]!==$?(H=$===void 0?{enabled:!1,autoplay:!1,showOnlyActiveDate:!0}:$,t[2]=$,t[3]=H):H=t[3];const o=H,at=Ft===void 0?!1:Ft,[vt,m]=T.useState(0),[b,Zt]=T.useState(0),[f,y]=T.useState(o.autoplay);let rt;if(t[4]!==c||t[5]!==o.dateFormat){let x;t[7]!==o.dateFormat?(x=It=>ve.parse(`${It.date}`,o.dateFormat||"yyyy",new Date).getTime(),t[7]=o.dateFormat,t[8]=x):x=t[8],rt=[...new Set(c.filter(Di).map(x))],rt.sort(Ni),t[4]=c,t[5]=o.dateFormat,t[6]=rt}else rt=t[6];const u=rt,[U,Pt]=T.useState(o.autoplay?0:u.length-1),[Wt,se]=T.useState(void 0),a=T.useRef(null),dt=T.useRef(null);let R,r;t[9]===Symbol.for("react.memo_cache_sentinel")?(R=()=>{const x=new ResizeObserver(It=>{m(It[0].target.clientWidth||620),Zt(It[0].target.clientHeight||480)});return a.current&&x.observe(a.current),()=>x.disconnect()},r=[],t[9]=R,t[10]=r):(R=t[9],r=t[10]),T.useEffect(R,r);let Mt,z;t[11]!==f||t[12]!==o.speed||t[13]!==u?(Mt=()=>{const x=setInterval(()=>{Pt(It=>It<u.length-1?It+1:0)},(o.speed||2)*1e3);return f||clearInterval(x),()=>clearInterval(x)},z=[u,f,o.speed],t[11]=f,t[12]=o.speed,t[13]=u,t[14]=Mt,t[15]=z):(Mt=t[14],z=t[15]),T.useEffect(Mt,z);const oe=o.dateFormat||"yyyy";let pe;t[16]!==U||t[17]!==oe||t[18]!==o.showOnlyActiveDate||t[19]!==u?(pe=ke.getSliderMarks(u,U,o.showOnlyActiveDate,oe),t[16]=U,t[17]=oe,t[18]=o.showOnlyActiveDate,t[19]=u,t[20]=pe):pe=t[20];const fe=pe,ye=ht==="horizontal"?si:He,ge=p?.graphContainer,be=E?.graphContainer;let re;t[21]!==p?.description||t[22]!==p?.title||t[23]!==c||t[24]!==Y||t[25]!==Qt||t[26]!==B||t[27]!==Jt||t[28]!==E?.description||t[29]!==E?.title||t[30]!==v?(re=Jt||Qt||B||Y?i.jsxRuntimeExports.jsx(We.GraphHeader,{styles:{title:E?.title,description:E?.description},classNames:{title:p?.title,description:p?.description},graphTitle:Jt,graphDescription:Qt,width:v,graphDownload:B?dt:void 0,dataDownload:Y?c.map(Vi).filter($i).length>0?c.map(Li).filter(Ii):c.filter(Mi):null}):null,t[21]=p?.description,t[22]=p?.title,t[23]=c,t[24]=Y,t[25]=Qt,t[26]=B,t[27]=Jt,t[28]=E?.description,t[29]=E?.title,t[30]=v,t[31]=re):re=t[31];let le;t[32]!==U||t[33]!==fe||t[34]!==f||t[35]!==o.enabled||t[36]!==u?(le=o.enabled&&u.length>0&&fe?i.jsxRuntimeExports.jsxs("div",{className:"flex gap-6 items-center",dir:"ltr",children:[i.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>{y(!f)},className:"p-0 border-0 cursor-pointer bg-transparent","aria-label":f?"Click to pause animation":"Click to play animation",children:f?i.jsxRuntimeExports.jsx(Oe.Pause,{}):i.jsxRuntimeExports.jsx(Oe.Play,{})}),i.jsxRuntimeExports.jsx(ke.Nr,{min:u[0],max:u[u.length-1],marks:fe,step:null,defaultValue:u[u.length-1],value:u[U],onChangeComplete:x=>{Pt(u.indexOf(x))},onChange:x=>{Pt(u.indexOf(x))},"aria-label":"Time slider. Use arrow keys to adjust selected time period."})]}):null,t[32]=U,t[33]=fe,t[34]=f,t[35]=o.enabled,t[36]=u,t[37]=le):le=t[37];let ce;t[38]!==p?.colorLegend||t[39]!==$t||t[40]!==k||t[41]!==xt||t[42]!==c.length||t[43]!==nt||t[44]!==v?(ce=nt&&c.length>0?i.jsxRuntimeExports.jsx(Be.ColorLegendWithMouseOver,{width:v,colorDomain:$t,colors:xt,colorLegendTitle:k,setSelectedColor:se,showNAColor:!1,className:p?.colorLegend}):null,t[38]=p?.colorLegend,t[39]=$t,t[40]=k,t[41]=xt,t[42]=c.length,t[43]=nt,t[44]=v,t[45]=ce):ce=t[45];let ue;t[46]!==c.length?(ue=c.length===0&&i.jsxRuntimeExports.jsx(Ye.EmptyState,{}),t[46]=c.length,t[47]=ue):ue=t[47];let xe;t[48]!==ye||t[49]!==C||t[50]!==_||t[51]!==J||t[52]!==Ut||t[53]!==jt||t[54]!==p||t[55]!==xt||t[56]!==D||t[57]!==st||t[58]!==c||t[59]!==Z||t[60]!==ot||t[61]!==S||t[62]!==at||t[63]!==Ot||t[64]!==U||t[65]!==w||t[66]!==A||t[67]!==mt||t[68]!==P||t[69]!==g||t[70]!==bt||t[71]!==ft||t[72]!==Vt||t[73]!==it||t[74]!==j?.locale||t[75]!==j?.padZeros||t[76]!==j?.precision||t[77]!==j?.prefix||t[78]!==j?.suffix||t[79]!==N||t[80]!==Xt||t[81]!==zt||t[82]!==Ht||t[83]!==et||t[84]!==Lt||t[85]!==Wt||t[86]!==K||t[87]!==Ct||t[88]!==Q||t[89]!==qt||t[90]!==s||t[91]!==E||t[92]!==b||t[93]!==vt||t[94]!==o.dateFormat||t[95]!==o.enabled||t[96]!==q||t[97]!==wt||t[98]!==O||t[99]!==u||t[100]!==Et?(xe=vt&&b&&c.length>0?i.jsxRuntimeExports.jsx(ye,{hideAxisLine:at,data:s!==void 0?s==="diff"?Ae.orderBy(we.ensureCompleteDataForDumbbellChart(c,o.dateFormat||"yyyy").filter(x=>o.enabled?`${x.date}`===ve.format(new Date(u[U]),o.dateFormat||"yyyy"):x).filter(x=>S?!x.x.every(Ri):x),Ci,[qt||"asc"]).filter((x,It)=>g?It<g:!0):Ae.orderBy(we.ensureCompleteDataForDumbbellChart(c,o.dateFormat||"yyyy").filter(x=>o.enabled?`${x.date}`===ve.format(new Date(u[U]),o.dateFormat||"yyyy"):x).filter(x=>S?!x.x.every(Oi):x),x=>Bt.checkIfNullOrUndefined(x.x[s])?-1/0:x.x[s],[qt||"asc"]).filter((x,It)=>g?It<g:!0):we.ensureCompleteDataForDumbbellChart(c,o.dateFormat||"yyyy").filter(x=>S?!x.x.every(Ei):x).filter((x,It)=>g?It<g:!0),dotColors:xt,width:vt,height:b,radius:zt,barPadding:Ut,showTicks:Ct,leftMargin:mt,rightMargin:Lt,topMargin:wt,bottomMargin:jt,truncateBy:O,showLabels:K,showValues:Q,tooltip:q,onSeriesMouseOver:Xt,maxValue:Bt.checkIfNullOrUndefined(bt)?Math.max(...c.map(Ai))<0?0:Math.max(...c.map(wi)):bt,minValue:Bt.checkIfNullOrUndefined(Vt)?Math.min(...c.map(bi))>0?0:Math.min(...c.map(yi)):Vt,onSeriesMouseClick:N,selectedColor:Wt,arrowConnector:_,connectorStrokeWidth:D,maxBarThickness:P,minBarThickness:ft,resetSelectionOnDoubleClick:et,detailsOnClick:Z,axisTitle:J,noOfTicks:it,valueColor:Et,styles:E,classNames:p,labelOrder:w,refValues:Ht,animate:C===!0?{duration:.5,once:!0,amount:.5}:C||{duration:0,once:!0,amount:0},customLayers:st,highlightedDataPoints:Ot,dimmedOpacity:ot,rtl:A==="ar"||A==="he",locale:j?.locale||"en",padZeros:j?.padZeros||!1,suffix:j?.suffix||"",prefix:j?.prefix||"",precision:j?.precision??2}):null,t[48]=ye,t[49]=C,t[50]=_,t[51]=J,t[52]=Ut,t[53]=jt,t[54]=p,t[55]=xt,t[56]=D,t[57]=st,t[58]=c,t[59]=Z,t[60]=ot,t[61]=S,t[62]=at,t[63]=Ot,t[64]=U,t[65]=w,t[66]=A,t[67]=mt,t[68]=P,t[69]=g,t[70]=bt,t[71]=ft,t[72]=Vt,t[73]=it,t[74]=j?.locale,t[75]=j?.padZeros,t[76]=j?.precision,t[77]=j?.prefix,t[78]=j?.suffix,t[79]=N,t[80]=Xt,t[81]=zt,t[82]=Ht,t[83]=et,t[84]=Lt,t[85]=Wt,t[86]=K,t[87]=Ct,t[88]=Q,t[89]=qt,t[90]=s,t[91]=E,t[92]=b,t[93]=vt,t[94]=o.dateFormat,t[95]=o.enabled,t[96]=q,t[97]=wt,t[98]=O,t[99]=u,t[100]=Et,t[101]=xe):xe=t[101];let de;t[102]!==ue||t[103]!==xe?(de=i.jsxRuntimeExports.jsxs(Ee.GraphArea,{ref:a,children:[ue,xe]}),t[102]=ue,t[103]=xe,t[104]=de):de=t[104];let me;t[105]!==p?.footnote||t[106]!==p?.source||t[107]!==lt||t[108]!==Kt||t[109]!==E?.footnote||t[110]!==E?.source||t[111]!==v?(me=Kt||lt?i.jsxRuntimeExports.jsx(Ge.GraphFooter,{styles:{footnote:E?.footnote,source:E?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:Kt,footNote:lt,width:v}):null,t[105]=p?.footnote,t[106]=p?.source,t[107]=lt,t[108]=Kt,t[109]=E?.footnote,t[110]=E?.source,t[111]=v,t[112]=me):me=t[112];let he;return t[113]!==St||t[114]!==Rt||t[115]!==kt||t[116]!==At||t[117]!==A||t[118]!==M||t[119]!==pt||t[120]!==V||t[121]!==ge||t[122]!==be||t[123]!==re||t[124]!==le||t[125]!==ce||t[126]!==de||t[127]!==me||t[128]!==tt||t[129]!==v?(he=i.jsxRuntimeExports.jsxs(Ee.GraphContainer,{className:ge,style:be,id:kt,ref:dt,"aria-label":St,backgroundColor:Rt,theme:tt,language:A,minHeight:M,width:v,height:At,relativeHeight:V,padding:pt,children:[re,le,ce,de,me]}),t[113]=St,t[114]=Rt,t[115]=kt,t[116]=At,t[117]=A,t[118]=M,t[119]=pt,t[120]=V,t[121]=ge,t[122]=be,t[123]=re,t[124]=le,t[125]=ce,t[126]=de,t[127]=me,t[128]=tt,t[129]=v,t[130]=he):he=t[130],he}function yi(e){return Math.min(...e.x.filter(gi))}function gi(e){return e!==null}function bi(e){return Math.min(...e.x.filter(vi))}function vi(e){return e!==null}function wi(e){return Math.max(...e.x.filter(ji))}function ji(e){return e!==null}function Ai(e){return Math.max(...e.x.filter(ki))}function ki(e){return e!==null}function Ei(e){return e==null}function Oi(e){return e==null}function Ci(e){return Bt.checkIfNullOrUndefined(e.x[e.x.length-1])||Bt.checkIfNullOrUndefined(e.x[0])?-1/0:e.x[e.x.length-1]-e.x[0]}function Ri(e){return e==null}function Mi(e){return e!==void 0}function Ii(e){return e!==void 0}function Li(e){return e.data}function $i(e){return e!==void 0}function Vi(e){return e.data}function Ni(e,t){return e-t}function Di(e){return e.date}exports.DumbbellChart=hi;
-//# sourceMappingURL=DumbbellChart.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./DumbbellChart-7Dh8xtYv.cjs`);exports.DumbbellChart=e.t;

package/dist/DumbbellChart.d.ts

@@ -1,235 +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 interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-export declare function DumbbellChart(props: Props): JSX.Element;
-
-declare interface DumbbellChartDataType {
-    x: (number | null)[];
-    label: string;
-    date?: string | number;
-    data?: object;
-}
-
-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;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: DumbbellChartDataType[];
-    /** Orientation of the graph */
-    orientation?: 'vertical' | 'horizontal';
-    /** 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;
-    /** Array of colors for the circle */
-    colors?: string[];
-    /** Domain of colors for the graph */
-    colorDomain: string[];
-    /** Title for the color legend */
-    colorLegendTitle?: string;
-    /** Color of value labels */
-    valueColor?: 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;
-    /** Maximum thickness of bars */
-    maxBarThickness?: number;
-    /** Minimum thickness of bars */
-    minBarThickness?: number;
-    /** Maximum number of bars shown in the graph */
-    maxNumberOfBars?: number;
-    /** Radius of the dots */
-    radius?: number;
-    /** Maximum value for the chart */
-    maxValue?: number;
-    /** Minimum value for the chart */
-    minValue?: number;
-    /** Truncate labels by specified length */
-    truncateBy?: number;
-    /** Reference values for comparison */
-    refValues?: ReferenceDataType[];
-    /** Number of ticks on the axis */
-    noOfTicks?: number;
-    /** Toggle visibility of labels */
-    showLabels?: boolean;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Custom order for labels */
-    labelOrder?: string[];
-    /** Toggle visibility of axis ticks */
-    showTicks?: boolean;
-    /** Toggle visibility of axis line for the  main axis. Only applicable to vertical charts. */
-    hideAxisLine?: boolean;
-    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
-    showColorScale?: boolean;
-    /** Toggle if the is a arrow head at the end of the connector */
-    arrowConnector?: boolean;
-    /** Data points to highlight. Use the label value from data to highlight the data point */
-    highlightedDataPoints?: (string | number)[];
-    /** Defines the opacity of the non-highlighted data */
-    dimmedOpacity?: number;
-    /** Stroke width of the connector */
-    connectorStrokeWidth?: number;
-    /** Title for the  axis */
-    axisTitle?: string;
-    /** Sorting order for data. If this is a number then data is sorted by value at that index x array in the data props. If this is diff then data is sorted by the difference of the last and first element in the x array in the data props. This is overwritten by labelOrder prop */
-    sortParameter?: number | 'diff';
-    /** Sorting order for data. This is overwritten by labelOrder prop. */
-    sortData?: 'asc' | 'desc';
-    /** Toggles if data points which have all the values as undefined or null are filtered out.  */
-    filterNA?: boolean;
-    /** Toggles if the graph animates in when loaded.  */
-    animate?: boolean | AnimateDataType;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
-    timeline?: TimelineDataType;
-    /** 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 ReferenceDataType {
-    value: number | null;
-    text: string;
-    color?: string;
-    styles?: {
-        line?: React.CSSProperties;
-        text?: React.CSSProperties;
-    };
-    classNames?: {
-        line?: string;
-        text?: 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;
-}
-
-declare interface TimelineDataType {
-    autoplay: boolean;
-    enabled: boolean;
-    showOnlyActiveDate: boolean;
-    speed?: number;
-    dateFormat?: string;
-}
-
-export { }
+export * from './Components/Graphs/DumbbellChart/index'
+export {}