@undp/data-viz 2.5.4 → 2.6.1

package/dist/BulletChart-Du9F0JhJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart-Du9F0JhJ.js","names":[],"sources":["../src/Components/Graphs/BulletChart/Graph.tsx","../src/Components/Graphs/BulletChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport sum from 'lodash.sum';\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  BulletChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: BulletChartDataType[];\n  width: number;\n  height: number;\n  barColor: string;\n  suffix: string;\n  prefix: string;\n  barPadding: number;\n  showLabels: boolean;\n  showValues: boolean;\n  showTicks: boolean;\n  truncateBy: number;\n  leftMargin?: number;\n  rightMargin?: number;\n  topMargin?: number;\n  bottomMargin?: number;\n  refValues?: ReferenceDataType[];\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  highlightedDataPoints?: (string | number)[];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  labelOrder?: string[];\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  barAxisTitle?: string;\n  noOfTicks: number;\n  valueColor?: string;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  targetColor: string;\n  targetStyle: 'background' | 'line';\n  qualitativeRangeColors: string[];\n  measureBarWidthFactor: number;\n  animate: AnimateDataType;\n  dimmedOpacity: number;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  naLabel: string;\n  rtl: boolean;\n  targetLineThickness: number;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function VerticalGraph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    barColor,\n    suffix,\n    prefix,\n    barPadding,\n    showLabels,\n    showValues,\n    showTicks,\n    truncateBy,\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    maxValue,\n    minValue,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    labelOrder,\n    maxBarThickness,\n    minBarThickness,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    barAxisTitle,\n    valueColor,\n    noOfTicks,\n    styles,\n    classNames,\n    targetStyle,\n    targetColor,\n    qualitativeRangeColors,\n    measureBarWidthFactor,\n    animate,\n    dimmedOpacity,\n    precision,\n    customLayers,\n    naLabel,\n    targetLineThickness,\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: barAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const barMaxValue =\n    Math.max(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) <\n    0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n  const targetMaxValue =\n    Math.max(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) < 0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.target as number),\n        );\n  const qualitativeRangeMaxValue = Math.max(\n    ...data.map(\n      (d) => sum((d.qualitativeRange || []).filter((l) => !checkIfNullOrUndefined(l))) || 0,\n    ),\n  );\n  const xMaxValue = !checkIfNullOrUndefined(maxValue)\n    ? (maxValue as number)\n    : Math.max(...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite)) <\n        0\n      ? 0\n      : Math.max(\n          ...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite),\n        );\n  const barMinValue =\n    Math.min(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) >=\n    0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n\n  const targetMinValue =\n    Math.min(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) >= 0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n        );\n  const xMinValue = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite)) >= 0\n      ? 0\n      : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite));\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        size: null,\n        target: null,\n        qualitativeRange: 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([xMinValue, xMaxValue]).range([graphHeight, 0]).nice();\n\n  const x = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphWidth, minBarThickness * barOrder.length)\n        : maxBarThickness\n          ? Math.min(graphWidth, maxBarThickness * barOrder.length)\n          : graphWidth,\n    ])\n    .paddingInner(barPadding);\n  const yTicks = y.ticks(noOfTicks);\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <Axis\n            hideAxisLine={hideAxisLine}\n            y1={y(xMinValue < 0 ? 0 : xMinValue)}\n            y2={y(xMinValue < 0 ? 0 : xMinValue)}\n            x1={0 - leftMargin}\n            x2={graphWidth + margin.right}\n            label={\n              showTicks\n                ? numberFormattingFunction(\n                    xMinValue < 0 ? 0 : xMinValue,\n                    naLabel,\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: xMaxValue < 0 ? '1em' : -5,\n              y: y(xMinValue < 0 ? 0 : xMinValue),\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={barAxisTitle}\n            rotate90\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d) =>\n              !checkIfNullOrUndefined(x(d.id)) ? (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  onMouseEnter={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                    onSeriesMouseOver?.(d);\n                  }}\n                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      x: x(`${d.id}`),\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}`),\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                >\n                  {d.qualitativeRange\n                    ? d.qualitativeRange.map((_el, j) => (\n                        <motion.rect\n                          // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                          key={j}\n                          x={0}\n                          exit={{\n                            height: 0,\n                            y: y(0),\n                            transition: { duration: animate.duration },\n                          }}\n                          variants={{\n                            initial: {\n                              height: 0,\n                              y: y(0),\n                              fill: qualitativeRangeColors[j],\n                            },\n                            whileInView: {\n                              height: Math.abs(\n                                y(\n                                  sum(\n                                    (d.qualitativeRange as number[]).filter(\n                                      (element, k) => k <= j && element,\n                                    ),\n                                  ),\n                                ) -\n                                  y(\n                                    sum(\n                                      (d.qualitativeRange as number[]).filter(\n                                        (element, k) => k < j && element,\n                                      ),\n                                    ),\n                                  ),\n                              ),\n                              y: y(\n                                sum(\n                                  (d.qualitativeRange as number[]).filter(\n                                    (element, k) => k <= j && element,\n                                  ),\n                                ),\n                              ),\n                              fill: qualitativeRangeColors[j],\n                              transition: { duration: animate.duration },\n                            },\n                          }}\n                          initial='initial'\n                          animate={isInView ? 'whileInView' : 'initial'}\n                          width={x.bandwidth()}\n                        />\n                      ))\n                    : null}\n                  {d.target && targetStyle === 'background' ? (\n                    <motion.rect\n                      x={0}\n                      width={x.bandwidth()}\n                      exit={{\n                        height: 0,\n                        y: y(0),\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          height: 0,\n                          fill: targetColor,\n                          y: y(0),\n                        },\n                        whileInView: {\n                          height: Math.abs(y(d.target) - y(0)),\n                          fill: targetColor,\n                          y: d.target > 0 ? y(d.target) : y(0),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.size ? (\n                    <motion.rect\n                      x={x.bandwidth() * ((1 - measureBarWidthFactor) / 2)}\n                      width={x.bandwidth() * measureBarWidthFactor}\n                      style={{\n                        fill: barColor,\n                      }}\n                      exit={{\n                        height: 0,\n                        y: y(0),\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          height: 0,\n                          y: y(0),\n                        },\n                        whileInView: {\n                          height: Math.abs(y(d.size) - y(0)),\n                          y: d.size > 0 ? y(d.size) : y(0),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.target && targetStyle === 'line' ? (\n                    <motion.rect\n                      x={0}\n                      width={x.bandwidth()}\n                      exit={{\n                        y: y(0),\n                        opacity: 0,\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          y: y(0),\n                          opacity: 0,\n                          fill: targetColor,\n                        },\n                        whileInView: {\n                          y: y(d.target) - targetLineThickness / 2,\n                          opacity: 1,\n                          fill: targetColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      height={targetLineThickness}\n                    />\n                  ) : null}\n                  {showLabels ? (\n                    <XAxesLabels\n                      value={\n                        `${d.label}`.length < truncateBy\n                          ? `${d.label}`\n                          : `${`${d.label}`.substring(0, truncateBy)}...`\n                      }\n                      y={(d.size || 0) < 0 ? 0 : y(0) + 5}\n                      x={0}\n                      width={x.bandwidth()}\n                      height={(d.size || 0) < 0 ? y(0) - 5 : margin.bottom}\n                      style={styles?.xAxis?.labels}\n                      className={classNames?.xAxis?.labels}\n                      alignment={(d.size || 0) < 0 ? 'bottom' : 'top'}\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                  {showValues ? (\n                    <motion.text\n                      x={x.bandwidth() / 2}\n                      style={{\n                        textAnchor: 'middle',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn(\n                        'graph-value text-sm',\n                        !valueColor && barColor.length > 1\n                          ? ' fill-primary-gray-600 dark:fill-primary-gray-300'\n                          : '',\n                        classNames?.graphObjectValues,\n                      )}\n                      dy={d.size ? (d.size >= 0 ? '-5px' : '1em') : '-5px'}\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                      variants={{\n                        initial: {\n                          y: y(0),\n                          opacity: 0,\n                          fill: valueColor || barColor,\n                        },\n                        whileInView: {\n                          y: y(d.size || 0),\n                          opacity: 1,\n                          fill: valueColor || barColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    >\n                      {numberFormattingFunction(\n                        d.size,\n                        naLabel,\n                        precision,\n                        prefix,\n                        suffix,\n                        locale,\n                        padZeros,\n                      )}\n                    </motion.text>\n                  ) : null}\n                </motion.g>\n              ) : null,\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    topMargin = 25,\n    bottomMargin = 10,\n    leftMargin = 100,\n    rightMargin = 40,\n    barColor,\n    suffix,\n    prefix,\n    barPadding,\n    showValues,\n    showTicks,\n    truncateBy,\n    width,\n    height,\n    showLabels,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    highlightedDataPoints,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    labelOrder,\n    rtl,\n    maxBarThickness,\n    minBarThickness,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    barAxisTitle,\n    valueColor,\n    noOfTicks,\n    styles,\n    classNames,\n    targetStyle,\n    targetColor,\n    qualitativeRangeColors,\n    measureBarWidthFactor,\n    animate,\n    dimmedOpacity,\n    precision,\n    customLayers,\n    naLabel,\n    targetLineThickness,\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  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: barAxisTitle ? 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\n  const barMaxValue =\n    Math.max(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) <\n    0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n  const targetMaxValue =\n    Math.max(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) < 0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n        );\n  const qualitativeRangeMaxValue = Math.max(\n    ...data.map(\n      (d) => sum((d.qualitativeRange || []).filter((l) => !checkIfNullOrUndefined(l))) || 0,\n    ),\n  );\n  const xMaxValue = !checkIfNullOrUndefined(maxValue)\n    ? (maxValue as number)\n    : Math.max(...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite)) <\n        0\n      ? 0\n      : Math.max(\n          ...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite),\n        );\n  const barMinValue =\n    Math.min(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) >=\n    0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n\n  const targetMinValue =\n    Math.min(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) >= 0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n        );\n  const xMinValue = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite)) >= 0\n      ? 0\n      : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite));\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        size: null,\n        target: null,\n        qualitativeRange: 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([xMinValue, xMaxValue]).range([0, graphWidth]).nice();\n  const y = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphHeight, minBarThickness * barOrder.length)\n        : maxBarThickness\n          ? Math.min(graphHeight, maxBarThickness * barOrder.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        <g transform={`translate(${margin.left},${margin.top})`}>\n          {showTicks ? (\n            <XTicksAndGridLines\n              values={xTicks.filter((d) => d !== 0)}\n              x={xTicks.filter((d) => d !== 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={barAxisTitle}\n          />\n          <Axis\n            hideAxisLine={hideAxisLine}\n            x1={x(xMinValue < 0 ? 0 : xMinValue)}\n            x2={x(xMinValue < 0 ? 0 : xMinValue)}\n            y1={-2.5}\n            y2={graphHeight + margin.bottom}\n            classNames={{ axis: classNames?.yAxis?.axis }}\n            styles={{ axis: styles?.yAxis?.axis }}\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d) =>\n              !checkIfNullOrUndefined(y(d.id)) ? (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  onMouseEnter={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                    onSeriesMouseOver?.(d);\n                  }}\n                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      x: 0,\n                      y: y(`${d.id}`),\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}`),\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                >\n                  {d.qualitativeRange\n                    ? d.qualitativeRange.map((el, j) => (\n                        <motion.rect\n                          // biome-ignore lint/suspicious/noArrayIndexKey: index is the identifier\n                          key={j}\n                          exit={{\n                            width: 0,\n                            x: x(0),\n                            transition: { duration: animate.duration },\n                          }}\n                          variants={{\n                            initial: {\n                              x: x(0),\n                              width: 0,\n                              fill: qualitativeRangeColors[j],\n                            },\n                            whileInView: {\n                              x: x(\n                                j === 0\n                                  ? 0\n                                  : sum(\n                                      (d.qualitativeRange as number[]).filter(\n                                        (element, k) => k < j && element,\n                                      ),\n                                    ),\n                              ),\n                              width: x(el),\n                              fill: qualitativeRangeColors[j],\n                              transition: { duration: animate.duration },\n                            },\n                          }}\n                          initial='initial'\n                          animate={isInView ? 'whileInView' : 'initial'}\n                          y={0}\n                          height={y.bandwidth()}\n                        />\n                      ))\n                    : null}\n                  {d.target && targetStyle === 'background' ? (\n                    <motion.rect\n                      y={0}\n                      x={d.target >= 0 ? x(0) : x(d.target)}\n                      height={y.bandwidth()}\n                      exit={{\n                        width: 0,\n                        x: x(0),\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          fill: targetColor,\n                          width: 0,\n                        },\n                        whileInView: {\n                          x: d.target >= 0 ? x(0) : x(d.target),\n                          fill: targetColor,\n                          width: d.target >= 0 ? x(d.target) - x(0) : x(0) - x(d.target),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.size ? (\n                    <motion.rect\n                      y={y.bandwidth() * ((1 - measureBarWidthFactor) / 2)}\n                      style={{\n                        fill: barColor,\n                      }}\n                      height={y.bandwidth() * measureBarWidthFactor}\n                      exit={{\n                        width: 0,\n                        x: x(0),\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          width: 0,\n                        },\n                        whileInView: {\n                          x: d.size >= 0 ? x(0) : x(d.size),\n                          width: d.size >= 0 ? x(d.size) - x(0) : x(0) - x(d.size),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.target && targetStyle === 'line' ? (\n                    <motion.rect\n                      y={0}\n                      height={y.bandwidth()}\n                      width={targetLineThickness}\n                      exit={{\n                        opacity: 0,\n                        x: x(0),\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          opacity: 0,\n                          fill: targetColor,\n                        },\n                        whileInView: {\n                          x: x(d.target) - targetLineThickness / 2,\n                          opacity: 1,\n                          fill: targetColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {showLabels ? (\n                    <YAxesLabels\n                      value={\n                        `${d.label}`.length < truncateBy\n                          ? `${d.label}`\n                          : `${`${d.label}`.substring(0, truncateBy)}...`\n                      }\n                      y={0}\n                      x={(d.size || 0) < 0 ? x(0) : 0 - margin.left}\n                      width={(d.size || 0) < 0 ? width - x(0) : x(0) + margin.left}\n                      height={y.bandwidth()}\n                      alignment={d.size ? (d.size < 0 ? 'left' : 'right') : 'right'}\n                      style={styles?.yAxis?.labels}\n                      className={classNames?.yAxis?.labels}\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                  {showValues ? (\n                    <motion.text\n                      y={y.bandwidth() / 2}\n                      style={{\n                        textAnchor: d.size ? (d.size < 0 ? 'end' : 'start') : 'start',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn(\n                        'graph-value text-sm',\n                        !valueColor && barColor.length > 1\n                          ? ' fill-primary-gray-600 dark:fill-primary-gray-300'\n                          : '',\n                        classNames?.graphObjectValues,\n                      )}\n                      dx={d.size ? (d.size < 0 ? -5 : 5) : 5}\n                      dy='0.33em'\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          opacity: 0,\n                          fill: valueColor || barColor,\n                        },\n                        whileInView: {\n                          x: d.size ? x(d.size) : x(0),\n                          opacity: 1,\n                          fill: valueColor || barColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    >\n                      {numberFormattingFunction(\n                        d.size,\n                        naLabel,\n                        precision,\n                        prefix,\n                        suffix,\n                        locale,\n                        padZeros,\n                      )}\n                    </motion.text>\n                  ) : null}\n                </motion.g>\n              ) : null,\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 { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport { Pause, Play } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  BulletChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  TimelineDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { ensureCompleteDataForBulletChart } 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: BulletChartDataType[];\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  /** Color for bars */\n  barColor?: string;\n  /** Domain of colors for the qualitative range bars */\n  colorDomain?: string[];\n  /** Colors for the qualitative range bars */\n  qualitativeRangeColors?: 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\n  // Values and Ticks\n  /** Prefix for values */\n  prefix?: string;\n  /** Suffix for values */\n  suffix?: string;\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  /** Defines the style of the target bar */\n  targetStyle?: 'background' | 'line';\n  /** Defines the color of the target bar */\n  targetColor?: string;\n  /** Defines the thickness if the target is of style line */\n  targetLineThickness?: number;\n  /** Defines the width of the measure bar in relation with available width */\n  measureBarWidthFactor?: number;\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 */\n  hideAxisLine?: boolean;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;\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  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Title for the bar axis */\n  barAxisTitle?: string;\n  /** Sorting order for data. This is overwritten by labelOrder prop. */\n  sortData?: 'asc' | 'desc';\n  /** Toggles if data point which are undefined or has value null are filtered out.  */\n  filterNA?: boolean;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\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  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function BulletChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    barColor = Colors.primaryColors['blue-600'],\n    barPadding = 0.25,\n    showTicks = true,\n    leftMargin,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    truncateBy = 999,\n    showLabels = true,\n    showValues = true,\n    backgroundColor = false,\n    suffix = '',\n    prefix = '',\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    padding,\n    relativeHeight,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    showColorScale = true,\n    graphID,\n    maxValue,\n    minValue,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    valueColor,\n    orientation = 'vertical',\n    styles,\n    classNames,\n    qualitativeRangeColors,\n    targetColor = Colors.light.grays['gray-700'],\n    filterNA = true,\n    targetStyle = 'line',\n    measureBarWidthFactor = 0.4,\n    animate = false,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    naLabel = 'NA',\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    theme = 'light',\n    sortData,\n    labelOrder,\n    minHeight = 0,\n    maxBarThickness,\n    maxNumberOfBars,\n    minBarThickness,\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    barAxisTitle,\n    noOfTicks = 5,\n    targetLineThickness = 2,\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  const Comp = orientation === 'horizontal' ? HorizontalGraph : VerticalGraph;\n\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\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  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      <div className='grow flex flex-col justify-center gap-3 w-full'>\n        {showColorScale &&\n        data.filter((el) => el.qualitativeRange).length !== 0 &&\n        colorDomain &&\n        data.length > 0 ? (\n          <ColorLegend\n            width={width}\n            colorLegendTitle={colorLegendTitle}\n            colors={qualitativeRangeColors || Colors[theme].sequentialColors.positiveColorsx10}\n            colorDomain={colorDomain}\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                sortData\n                  ? orderBy(\n                      ensureCompleteDataForBulletChart(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 ? !checkIfNullOrUndefined(d.size) : d)),\n                      [\n                        (d) =>\n                          d.size === undefined\n                            ? sortData === 'asc'\n                              ? (orientation === 'horizontal' ? 1 : -1) * Infinity\n                              : (orientation === 'horizontal' ? -1 : 1) * Infinity\n                            : d.size,\n                      ],\n                      [sortData],\n                    ).filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n                  : ensureCompleteDataForBulletChart(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 ? !checkIfNullOrUndefined(d.size) : d))\n                      .filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n              }\n              barColor={barColor}\n              targetColor={targetColor}\n              width={svgWidth}\n              refValues={refValues}\n              height={svgHeight}\n              suffix={suffix}\n              prefix={prefix}\n              barPadding={barPadding}\n              showLabels={showLabels}\n              showValues={showValues}\n              showTicks={showTicks}\n              truncateBy={truncateBy}\n              leftMargin={leftMargin}\n              rightMargin={rightMargin}\n              qualitativeRangeColors={\n                qualitativeRangeColors || Colors[theme].sequentialColors.positiveColorsx10\n              }\n              topMargin={topMargin}\n              bottomMargin={bottomMargin}\n              tooltip={tooltip}\n              onSeriesMouseOver={onSeriesMouseOver}\n              maxValue={maxValue}\n              minValue={minValue}\n              highlightedDataPoints={highlightedDataPoints}\n              onSeriesMouseClick={onSeriesMouseClick}\n              labelOrder={labelOrder}\n              maxBarThickness={maxBarThickness}\n              minBarThickness={minBarThickness}\n              resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n              detailsOnClick={detailsOnClick}\n              barAxisTitle={barAxisTitle}\n              noOfTicks={noOfTicks}\n              valueColor={valueColor}\n              styles={styles}\n              classNames={classNames}\n              targetStyle={targetStyle}\n              dimmedOpacity={dimmedOpacity}\n              measureBarWidthFactor={measureBarWidthFactor}\n              animate={\n                animate === true\n                  ? { duration: 0.5, once: true, amount: 0.5 }\n                  : animate || { duration: 0, once: true, amount: 0 }\n              }\n              customLayers={customLayers}\n              naLabel={naLabel}\n              targetLineThickness={targetLineThickness}\n              rtl={language === 'ar' || language === 'he'}\n              locale={numberDisplayOptions?.locale || 'en'}\n              padZeros={numberDisplayOptions?.padZeros || false}\n              precision={numberDisplayOptions?.precision ?? 2}\n            />\n          ) : null}\n        </GraphArea>\n      </div>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,SAAA,GAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+gBA;AAEA,SAAA,GAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8eA;;;ACx5BA,SAAgB,GAAY,GAAc;CACxC,IAAM,EACJ,SACA,eACA,cAAW,EAAO,cAAc,aAChC,iBAAa,KACb,gBAAY,IACZ,eACA,gBACA,eACA,kBACA,iBAAa,KACb,iBAAa,IACb,iBAAa,IACb,sBAAkB,IAClB,aAAS,IACT,aAAS,IACT,YACA,sBACA,YACA,UACA,cACA,iBACA,sBACA,YACA,oBACA,aACA,sBACA,cACA,oBAAiB,IACjB,YACA,aACA,aACA,0BACA,uBACA,gBACA,iBAAc,YACd,WACA,eACA,2BACA,kBAAc,EAAO,MAAM,MAAM,aACjC,eAAW,IACX,kBAAc,QACd,4BAAwB,IACxB,aAAU,IACV,oBAAgB,IAChB,kBAAe,CAAC,GAChB,aAAU,MACV,mBAAgB,IAChB,kBAAe,IACf,cAAW,MACX,WAAQ,SACR,aACA,eACA,gBAAY,GACZ,oBACA,oBACA,oBACA,cACA,kCAA8B,IAC9B,oBACA,kBACA,gBAAY,GACZ,0BAAsB,GACtB,cAAW;EAAE,SAAS;EAAO,UAAU;EAAO,oBAAoB;CAAK,GACvE,kBAAe,IACf,4BACE,GAEE,CAAC,GAAU,KAAe,EAAS,CAAC,GACpC,CAAC,GAAW,MAAgB,EAAS,CAAC,GACtC,KAAW,GAAuB,IAAI,GACtC,KAAiB,GAAuB,IAAI,GAC5C,KAAO,MAAgB,eAAe,KAAkB,IAExD,CAAC,IAAM,MAAW,EAAS,EAAS,QAAQ,GAC5C,IAAkB,SAAc;EACpC,IAAM,IAAQ,CACZ,GAAG,IAAI,IACL,EACG,QAAQ,MAAM,EAAE,IAAI,EACpB,KAAK,MAAM,EAAM,GAAG,EAAE,QAAQ,EAAS,cAAc,wBAAQ,IAAI,KAAK,CAAC,EAAE,QAAQ,CAAC,CACvF,CACF;EAEA,OADA,EAAM,MAAM,GAAG,MAAM,IAAI,CAAC,GACnB;CACT,GAAG,CAAC,GAAM,EAAS,UAAU,CAAC,GACxB,CAAC,IAAO,MAAY,EAAS,EAAS,WAAW,IAAI,EAAgB,SAAS,CAAC;CAarF,AAXA,QAAgB;EACd,IAAM,IAAiB,IAAI,gBAAgB,MAAY;GAErD,AADA,EAAY,EAAQ,GAAG,OAAO,eAAe,GAAG,GAChD,GAAa,EAAQ,GAAG,OAAO,gBAAgB,GAAG;EACpD,CAAC;EAID,OAHI,GAAS,WACX,EAAe,QAAQ,GAAS,OAAO,SAE5B,EAAe,WAAW;CACzC,GAAG,CAAC,CAAC,GAEL,QAAgB;EACd,IAAM,IAAW,kBACT;GACJ,IAAU,MAAO,IAAI,EAAgB,SAAS,IAAI,IAAI,IAAI,CAAE;EAC9D,IACC,EAAS,SAAS,KAAK,GAC1B;EAEA,OADK,MAAM,cAAc,CAAQ,SACpB,cAAc,CAAQ;CACrC,GAAG;EAAC;EAAiB;EAAM,EAAS;CAAK,CAAC;CAE1C,IAAM,KAAU,EACd,GACA,IACA,EAAS,oBACT,EAAS,cAAc,MACzB;CAEA,OACE,iBAAA,GAAA,EAAA,MAAC,IAAD;EACE,WAAW,GAAY;EACvB,OAAO,GAAQ;EACf,IAAI;EACJ,KAAK;EACL,cAAY;EACK;EACV;EACG;EACC;EACJ;EACC;EACQ;EACP;YAbX;GAeG,KAAc,MAAoB,KAAiB,IAClD,iBAAA,GAAA,EAAA,KAAC,IAAD;IACE,QAAQ;KACN,OAAO,GAAQ;KACf,aAAa,GAAQ;IACvB;IACA,YAAY;KACV,OAAO,GAAY;KACnB,aAAa,GAAY;IAC3B;IACY;IACM;IACX;IACP,eAAe,IAAgB,KAAiB,KAAA;IAChD,cACE,IACI,EAAK,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,MAAM,MAAM,KAAA,CAAS,EAAE,SAAS,IAC9D,EAAK,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,MAAM,MAAM,KAAA,CAAS,IACrD,EAAK,QAAQ,MAAM,MAAM,KAAA,CAAS,IACpC;GAEP,CAAA,IACC;GACH,EAAS,WAAW,EAAgB,SAAS,KAAK,KACjD,iBAAA,GAAA,EAAA,MAAC,OAAD;IAAK,WAAU;IAA0B,KAAI;cAA7C,CACE,iBAAA,GAAA,EAAA,KAAC,UAAD;KACE,MAAK;KACL,eAAe;MACb,GAAQ,CAAC,EAAI;KACf;KACA,WAAU;KACV,cAAY,KAAO,6BAA6B;eAE/C,KAAO,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAQ,CAAA,IAAI,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAO,CAAA;IACrB,CAAA,GACR,iBAAA,GAAA,EAAA,KAAC,GAAD;KACE,KAAK,EAAgB;KACrB,KAAK,EAAgB,EAAgB,SAAS;KAC9C,OAAO;KACP,MAAM;KACN,cAAc,EAAgB,EAAgB,SAAS;KACvD,OAAO,EAAgB;KACvB,mBAAmB,MAAc;MAC/B,GAAS,EAAgB,QAAQ,CAAmB,CAAC;KACvD;KACA,WAAW,MAAc;MACvB,GAAS,EAAgB,QAAQ,CAAmB,CAAC;KACvD;KACA,cAAW;IACZ,CAAA,CACE;QACH;GACJ,iBAAA,GAAA,EAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACD,EAAK,QAAQ,MAAO,EAAG,gBAAgB,EAAE,WAAW,KACpD,MACA,EAAK,SAAS,IACZ,iBAAA,GAAA,EAAA,KAAC,IAAD;KACS;KACW;KAClB,QAAQ,KAA0B,EAAO,GAAO,iBAAiB;KACpD;KACb,aAAa;KACb,WAAW,GAAY;IACxB,CAAA,IACC,MACJ,iBAAA,GAAA,EAAA,MAAC,IAAD;KAAW,KAAK;eAAhB,CACG,EAAK,WAAW,KAAK,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAa,CAAA,GAClC,KAAY,KAAa,EAAK,SAAS,IACtC,iBAAA,GAAA,EAAA,KAAC,IAAD;MACgB;MACd,MACE,KAAA,GAAA,EAAA,SAEM,GAAiC,GAAM,EAAS,cAAc,MAAM,EACjE,QAAQ,MACP,EAAS,UACL,GAAG,EAAE,WACL,GACE,IAAI,KAAK,EAAgB,GAAM,GAC/B,EAAS,cAAc,MACzB,IACA,CACN,EACC,QAAQ,MAAO,KAAW,CAAC,EAAuB,EAAE,IAAI,IAAI,CAAE,GACjE,EACG,MACC,EAAE,SAAS,KAAA,IACP,MAAa,SACV,MAAgB,eAAe,IAAI,MAAM,YACzC,MAAgB,eAAe,KAAK,KAAK,WAC5C,EAAE,IACV,GACA,CAAC,CAAQ,CACX,EAAE,QAAQ,GAAI,MAAO,IAAkB,IAAI,IAAkB,EAAK,IAClE,GAAiC,GAAM,EAAS,cAAc,MAAM,EACjE,QAAQ,MACP,EAAS,UACL,GAAG,EAAE,WACL,GAAO,IAAI,KAAK,EAAgB,GAAM,GAAG,EAAS,cAAc,MAAM,IACtE,CACN,EACC,QAAQ,MAAO,KAAW,CAAC,EAAuB,EAAE,IAAI,IAAI,CAAE,EAC9D,QAAQ,GAAI,MAAO,IAAkB,IAAI,IAAkB,EAAK;MAE/D;MACG;MACb,OAAO;MACI;MACX,QAAQ;MACA;MACA;MACI;MACA;MACA;MACD;MACC;MACA;MACC;MACb,wBACE,KAA0B,EAAO,GAAO,iBAAiB;MAEhD;MACG;MACL;MACU;MACT;MACA;MACa;MACH;MACR;MACK;MACA;MACY;MACb;MACF;MACH;MACC;MACJ;MACI;MACC;MACE;MACQ;MACvB,SACE,MAAY,KACR;OAAE,UAAU;OAAK,MAAM;OAAM,QAAQ;MAAI,IACzC,KAAW;OAAE,UAAU;OAAG,MAAM;OAAM,QAAQ;MAAE;MAExC;MACL;MACY;MACrB,KAAK,MAAa,QAAQ,MAAa;MACvC,QAAQ,GAAsB,UAAU;MACxC,UAAU,GAAsB,YAAY;MAC5C,WAAW,GAAsB,aAAa;KAC/C,CAAA,IACC,IACK;MACR;;GACJ,KAAW,KACV,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,QAAQ;KAAE,UAAU,GAAQ;KAAU,QAAQ,GAAQ;IAAO;IAC7D,YAAY;KACV,UAAU,GAAY;KACtB,QAAQ,GAAY;IACtB;IACS;IACC;IACH;GACR,CAAA,IACC;EACU;;AAEpB"}

package/dist/BulletChart-ElYRyO07.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Icons-DXw7FqJ_.cjs`),r=require(`./Colors.cjs`),i=require(`./ColorLegend.cjs`),ee=require(`./GraphFooter.cjs`),a=require(`./GraphHeader.cjs`),o=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),s=require(`./lodash.sum-bWhlZLUV.cjs`),te=require(`./GraphContainer-7xAPK4Tb.cjs`),ne=require(`./parse-C718o4YM.cjs`),re=require(`./lodash.orderby-Us2PHq2D.cjs`),ie=require(`./EmptyState-Bq7ZJmZB.cjs`),c=require(`./ensureCompleteData-CqLz7Btq.cjs`),l=require(`./getSliderMarks-DCEGtxIl.cjs`),ae=require(`./linear-B93YyHf_.cjs`),oe=require(`./band-BWpW41la.cjs`),u=require(`./fast-deep-equal-DN3ilkVq.cjs`),d=require(`./proxy-DaRMphjR.cjs`),se=require(`./AnimatePresence-CapU-Sxd.cjs`),ce=require(`./use-in-view-C4EPQfwM.cjs`),le=require(`./Axis-BbfI4T5K.cjs`),ue=require(`./AxisTitle-Co2DmqOy.cjs`),de=require(`./XAxesLabels-BvzqZwll.cjs`),fe=require(`./numberFormattingFunction-Caf5NyIo.cjs`),pe=require(`./XTicksAndGridLines-8v1W02Pd.cjs`),me=require(`./YAxesLabels-DKRDxuHA.cjs`),he=require(`./YTicksAndGridLines-CRW_R845.cjs`),ge=require(`./DetailsModal-CtGqGcX9.cjs`),_e=require(`./ReferenceLine-Dltt-xtO.cjs`),f=require(`./Tooltip-CO_iOj_w.cjs`);let ve=require(`@undp/design-system-react/cn`),p=require(`react`),ye=require(`@undp/design-system-react/SliderUI`);var be=e.a(re.t(),1),xe=e.a(u.t(),1),m=e.a(s.t(),1),h=t.t();function g(e){let{data:t,width:n,height:r,barColor:i,suffix:ee,prefix:a,barPadding:s,showLabels:te,showValues:ne,showTicks:re,truncateBy:ie,leftMargin:c=20,rightMargin:l=20,topMargin:u=20,bottomMargin:pe=25,tooltip:me,onSeriesMouseOver:ye,refValues:be,maxValue:g,minValue:Se,highlightedDataPoints:_,onSeriesMouseClick:v,labelOrder:y,maxBarThickness:Ce,minBarThickness:we,resetSelectionOnDoubleClick:Te,detailsOnClick:Ee,barAxisTitle:b,valueColor:x,noOfTicks:De,styles:S,classNames:C,targetStyle:w,targetColor:T,qualitativeRangeColors:E,measureBarWidthFactor:D,animate:O,dimmedOpacity:k,precision:A,customLayers:Oe,naLabel:j,targetLineThickness:ke,hideAxisLine:Ae,locale:je,padZeros:M}=e,N=(0,p.useRef)(null),P=ce.t(N,{once:O.once,amount:O.amount}),F={top:u,bottom:pe,left:b?c+30:c,right:l},[I,L]=(0,p.useState)(void 0),[R,z]=(0,p.useState)(void 0),[B,V]=(0,p.useState)(void 0),[Me,H]=(0,p.useState)(void 0),U=n-F.left-F.right,Ne=r-F.top-F.bottom,W=Math.max(...t.filter(e=>!o.t(e.size)).map(e=>e.size))<0?0:Math.max(...t.filter(e=>!o.t(e.size)).map(e=>e.size)),Pe=Math.max(...t.filter(e=>!o.t(e.target)).map(e=>e.target))<0?0:Math.max(...t.filter(e=>!o.t(e.size)).map(e=>e.target)),G=Math.max(...t.map(e=>(0,m.default)((e.qualitativeRange||[]).filter(e=>!o.t(e)))||0)),Fe=o.t(g)?Math.max(...[W,Pe,G].filter(Number.isFinite))<0?0:Math.max(...[W,Pe,G].filter(Number.isFinite)):g,Ie=Math.min(...t.filter(e=>!o.t(e.size)).map(e=>e.size))>=0?0:Math.min(...t.filter(e=>!o.t(e.size)).map(e=>e.size)),Le=Math.min(...t.filter(e=>!o.t(e.target)).map(e=>e.target))>=0?0:Math.min(...t.filter(e=>!o.t(e.target)).map(e=>e.target)),K=o.t(Se)?Math.min(...[Ie,Le].filter(Number.isFinite))>=0?0:Math.min(...[Ie,Le].filter(Number.isFinite)):Se,q=(0,p.useMemo)(()=>{let e=new Set,n=t.map((t,n)=>{let r=y?`${t.label}`:`${n}`;return e.add(r),{...t,id:r}}),r=y?y.filter(t=>!e.has(t)):[];return[...n,...r.map(e=>({id:e,label:e,size:null,target:null,qualitativeRange:null}))]},[t,y]),J=(0,p.useMemo)(()=>y??q.map(e=>`${e.id}`),[y,q]),Y=ae.t().domain([K,Fe]).range([Ne,0]).nice(),X=oe.t().domain(J).range([0,we?Math.max(U,we*J.length):Ce?Math.min(U,Ce*J.length):U]).paddingInner(s),Z=Y.ticks(De);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(d.t.svg,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,ref:N,children:(0,h.jsxs)(`g`,{transform:`translate(${F.left},${F.top})`,children:[(0,h.jsx)(le.t,{hideAxisLine:Ae,y1:Y(K<0?0:K),y2:Y(K<0?0:K),x1:0-c,x2:U+F.right,label:re?fe.t(K<0?0:K,j,A,a,ee,je,M):void 0,labelPos:{x:0-c,dx:0,dy:Fe<0?`1em`:-5,y:Y(K<0?0:K)},classNames:{axis:C?.xAxis?.axis,label:C?.yAxis?.labels},styles:{axis:S?.xAxis?.axis,label:S?.yAxis?.labels}}),re?(0,h.jsx)(he.t,{values:Z.filter(e=>e!==0),y:Z.filter(e=>e!==0).map(e=>Y(e)),x1:0-c,x2:U+F.right,styles:{gridLines:S?.yAxis?.gridLines,labels:S?.yAxis?.labels},classNames:{gridLines:C?.yAxis?.gridLines,labels:C?.yAxis?.labels},suffix:ee,prefix:a,labelType:`secondary`,showGridLines:!0,labelPos:`vertical`,precision:A,locale:je,padZeros:M}):null,(0,h.jsx)(ue.t,{x:0-c-15,y:Ne/2,style:S?.yAxis?.title,className:C?.yAxis?.title,text:b,rotate90:!0}),Oe.filter(e=>e.position===`before`).map(e=>e.layer),(0,h.jsxs)(se.t,{children:[q.map(e=>o.t(X(e.id))?null:(0,h.jsxs)(d.t.g,{className:`undp-viz-g-with-hover`,onMouseEnter:t=>{L(e),H(t.clientY),V(t.clientX),ye?.(e)},onClick:()=>{(v||Ee)&&((0,xe.default)(R,e)&&Te?(z(void 0),v?.(void 0)):(z(e),v?.(e)))},onMouseMove:t=>{L(e),H(t.clientY),V(t.clientX)},onMouseLeave:()=>{L(void 0),V(void 0),H(void 0),ye?.(void 0)},exit:{opacity:0,transition:{duration:O.duration}},variants:{initial:{x:X(`${e.id}`),y:0,opacity:_&&_.indexOf(e.label)===-1?k:.85},whileInView:{x:X(`${e.id}`),y:0,opacity:_&&_.indexOf(e.label)===-1?k:.85,transition:{duration:O.duration}}},initial:`initial`,animate:P?`whileInView`:`initial`,children:[e.qualitativeRange?e.qualitativeRange.map((t,n)=>(0,h.jsx)(d.t.rect,{x:0,exit:{height:0,y:Y(0),transition:{duration:O.duration}},variants:{initial:{height:0,y:Y(0),fill:E[n]},whileInView:{height:Math.abs(Y((0,m.default)(e.qualitativeRange.filter((e,t)=>t<=n&&e)))-Y((0,m.default)(e.qualitativeRange.filter((e,t)=>t<n&&e)))),y:Y((0,m.default)(e.qualitativeRange.filter((e,t)=>t<=n&&e))),fill:E[n],transition:{duration:O.duration}}},initial:`initial`,animate:P?`whileInView`:`initial`,width:X.bandwidth()},n)):null,e.target&&w===`background`?(0,h.jsx)(d.t.rect,{x:0,width:X.bandwidth(),exit:{height:0,y:Y(0),fill:T,transition:{duration:O.duration}},variants:{initial:{height:0,fill:T,y:Y(0)},whileInView:{height:Math.abs(Y(e.target)-Y(0)),fill:T,y:e.target>0?Y(e.target):Y(0),transition:{duration:O.duration}}},initial:`initial`,animate:P?`whileInView`:`initial`}):null,e.size?(0,h.jsx)(d.t.rect,{x:X.bandwidth()*((1-D)/2),width:X.bandwidth()*D,style:{fill:i},exit:{height:0,y:Y(0),transition:{duration:O.duration}},variants:{initial:{height:0,y:Y(0)},whileInView:{height:Math.abs(Y(e.size)-Y(0)),y:e.size>0?Y(e.size):Y(0),transition:{duration:O.duration}}},initial:`initial`,animate:P?`whileInView`:`initial`}):null,e.target&&w===`line`?(0,h.jsx)(d.t.rect,{x:0,width:X.bandwidth(),exit:{y:Y(0),opacity:0,fill:T,transition:{duration:O.duration}},variants:{initial:{y:Y(0),opacity:0,fill:T},whileInView:{y:Y(e.target)-ke/2,opacity:1,fill:T,transition:{duration:O.duration}}},initial:`initial`,animate:P?`whileInView`:`initial`,height:ke}):null,te?(0,h.jsx)(de.t,{value:`${e.label}`.length<ie?`${e.label}`:`${`${e.label}`.substring(0,ie)}...`,y:(e.size||0)<0?0:Y(0)+5,x:0,width:X.bandwidth(),height:(e.size||0)<0?Y(0)-5:F.bottom,style:S?.xAxis?.labels,className:C?.xAxis?.labels,alignment:(e.size||0)<0?`bottom`:`top`,animate:O,isInView:P}):null,ne?(0,h.jsx)(d.t.text,{x:X.bandwidth()/2,style:{textAnchor:`middle`,...S?.graphObjectValues||{}},className:(0,ve.cn)(`graph-value text-sm`,!x&&i.length>1?` fill-primary-gray-600 dark:fill-primary-gray-300`:``,C?.graphObjectValues),dy:e.size?e.size>=0?`-5px`:`1em`:`-5px`,exit:{opacity:0,transition:{duration:O.duration}},variants:{initial:{y:Y(0),opacity:0,fill:x||i},whileInView:{y:Y(e.size||0),opacity:1,fill:x||i,transition:{duration:O.duration}}},initial:`initial`,animate:P?`whileInView`:`initial`,children:fe.t(e.size,j,A,a,ee,je,M)}):null]},e.label)),be?.map(e=>(0,h.jsx)(_e.n,{text:e.text,color:e.color,y:Y(e.value),x1:0-c,x2:U+F.right,classNames:e.classNames,styles:e.styles,animate:O,isInView:P},e.text))]}),Oe.filter(e=>e.position===`after`).map(e=>e.layer)]})}),I&&me&&B&&Me?(0,h.jsx)(f.t,{data:I,body:me,xPos:B,yPos:Me,backgroundStyle:S?.tooltip,className:C?.tooltip}):null,Ee&&R!==void 0?(0,h.jsx)(ge.t,{body:Ee,data:R,setData:z,className:C?.modal}):null]})}function Se(e){let{data:t,topMargin:n=25,bottomMargin:r=10,leftMargin:i=100,rightMargin:ee=40,barColor:a,suffix:s,prefix:te,barPadding:ne,showValues:re,showTicks:ie,truncateBy:c,width:l,height:u,showLabels:de,tooltip:he,onSeriesMouseOver:ye,refValues:be,highlightedDataPoints:g,maxValue:Se,minValue:_,onSeriesMouseClick:v,labelOrder:y,rtl:Ce,maxBarThickness:we,minBarThickness:Te,resetSelectionOnDoubleClick:Ee,detailsOnClick:b,barAxisTitle:x,valueColor:De,noOfTicks:S,styles:C,classNames:w,targetStyle:T,targetColor:E,qualitativeRangeColors:D,measureBarWidthFactor:O,animate:k,dimmedOpacity:A,precision:Oe,customLayers:j,naLabel:ke,targetLineThickness:Ae,hideAxisLine:je,locale:M,padZeros:N}=e,P=(0,p.useRef)(null),F=ce.t(P,{once:k.once,amount:k.amount}),[I,L]=(0,p.useState)(void 0),[R,z]=(0,p.useState)(void 0),[B,V]=(0,p.useState)(void 0),[Me,H]=(0,p.useState)(void 0),U={top:x?n+25:n,bottom:r,left:i,right:ee},Ne=l-U.left-U.right,W=u-U.top-U.bottom,Pe=Math.max(...t.filter(e=>!o.t(e.size)).map(e=>e.size))<0?0:Math.max(...t.filter(e=>!o.t(e.size)).map(e=>e.size)),G=Math.max(...t.filter(e=>!o.t(e.target)).map(e=>e.target))<0?0:Math.max(...t.filter(e=>!o.t(e.target)).map(e=>e.target)),Fe=Math.max(...t.map(e=>(0,m.default)((e.qualitativeRange||[]).filter(e=>!o.t(e)))||0)),Ie=o.t(Se)?Math.max(...[Pe,G,Fe].filter(Number.isFinite))<0?0:Math.max(...[Pe,G,Fe].filter(Number.isFinite)):Se,Le=Math.min(...t.filter(e=>!o.t(e.size)).map(e=>e.size))>=0?0:Math.min(...t.filter(e=>!o.t(e.size)).map(e=>e.size)),K=Math.min(...t.filter(e=>!o.t(e.target)).map(e=>e.target))>=0?0:Math.min(...t.filter(e=>!o.t(e.target)).map(e=>e.target)),q=o.t(_)?Math.min(...[Le,K].filter(Number.isFinite))>=0?0:Math.min(...[Le,K].filter(Number.isFinite)):_,J=(0,p.useMemo)(()=>{let e=new Set,n=t.map((t,n)=>{let r=y?`${t.label}`:`${n}`;return e.add(r),{...t,id:r}}),r=y?y.filter(t=>!e.has(t)):[];return[...n,...r.map(e=>({id:e,label:e,size:null,target:null,qualitativeRange:null}))]},[t,y]),Y=(0,p.useMemo)(()=>y??J.map(e=>`${e.id}`),[y,J]),X=ae.t().domain([q,Ie]).range([0,Ne]).nice(),Z=oe.t().domain(Y).range([0,Te?Math.max(W,Te*Y.length):we?Math.min(W,we*Y.length):W]).paddingInner(ne),Q=X.ticks(S);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(d.t.svg,{width:`${l}px`,height:`${u}px`,viewBox:`0 0 ${l} ${u}`,direction:`ltr`,ref:P,children:(0,h.jsxs)(`g`,{transform:`translate(${U.left},${U.top})`,children:[ie?(0,h.jsx)(pe.t,{values:Q.filter(e=>e!==0),x:Q.filter(e=>e!==0).map(e=>X(e)),y1:0-n,y2:W+U.bottom,styles:{gridLines:C?.xAxis?.gridLines,labels:C?.xAxis?.labels},classNames:{gridLines:w?.xAxis?.gridLines,labels:w?.xAxis?.labels},suffix:s,prefix:te,labelType:`secondary`,showGridLines:!0,precision:Oe,locale:M,padZeros:N}):null,(0,h.jsx)(ue.t,{x:Ne/2,y:0-U.top+15,style:C?.xAxis?.title,className:w?.xAxis?.title,text:x}),(0,h.jsx)(le.t,{hideAxisLine:je,x1:X(q<0?0:q),x2:X(q<0?0:q),y1:-2.5,y2:W+U.bottom,classNames:{axis:w?.yAxis?.axis},styles:{axis:C?.yAxis?.axis}}),j.filter(e=>e.position===`before`).map(e=>e.layer),(0,h.jsxs)(se.t,{children:[J.map(e=>o.t(Z(e.id))?null:(0,h.jsxs)(d.t.g,{className:`undp-viz-g-with-hover`,onMouseEnter:t=>{L(e),H(t.clientY),V(t.clientX),ye?.(e)},onClick:()=>{(v||b)&&((0,xe.default)(R,e)&&Ee?(z(void 0),v?.(void 0)):(z(e),v?.(e)))},onMouseMove:t=>{L(e),H(t.clientY),V(t.clientX)},onMouseLeave:()=>{L(void 0),V(void 0),H(void 0),ye?.(void 0)},exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{x:0,y:Z(`${e.id}`),opacity:g&&g.indexOf(e.label)===-1?A:.85},whileInView:{x:0,y:Z(`${e.id}`),opacity:g&&g.indexOf(e.label)===-1?A:.85,transition:{duration:k.duration}}},initial:`initial`,animate:F?`whileInView`:`initial`,children:[e.qualitativeRange?e.qualitativeRange.map((t,n)=>(0,h.jsx)(d.t.rect,{exit:{width:0,x:X(0),transition:{duration:k.duration}},variants:{initial:{x:X(0),width:0,fill:D[n]},whileInView:{x:X(n===0?0:(0,m.default)(e.qualitativeRange.filter((e,t)=>t<n&&e))),width:X(t),fill:D[n],transition:{duration:k.duration}}},initial:`initial`,animate:F?`whileInView`:`initial`,y:0,height:Z.bandwidth()},n)):null,e.target&&T===`background`?(0,h.jsx)(d.t.rect,{y:0,x:e.target>=0?X(0):X(e.target),height:Z.bandwidth(),exit:{width:0,x:X(0),fill:E,transition:{duration:k.duration}},variants:{initial:{x:X(0),fill:E,width:0},whileInView:{x:e.target>=0?X(0):X(e.target),fill:E,width:e.target>=0?X(e.target)-X(0):X(0)-X(e.target),transition:{duration:k.duration}}},initial:`initial`,animate:F?`whileInView`:`initial`}):null,e.size?(0,h.jsx)(d.t.rect,{y:Z.bandwidth()*((1-O)/2),style:{fill:a},height:Z.bandwidth()*O,exit:{width:0,x:X(0),transition:{duration:k.duration}},variants:{initial:{x:X(0),width:0},whileInView:{x:e.size>=0?X(0):X(e.size),width:e.size>=0?X(e.size)-X(0):X(0)-X(e.size),transition:{duration:k.duration}}},initial:`initial`,animate:F?`whileInView`:`initial`}):null,e.target&&T===`line`?(0,h.jsx)(d.t.rect,{y:0,height:Z.bandwidth(),width:Ae,exit:{opacity:0,x:X(0),fill:E,transition:{duration:k.duration}},variants:{initial:{x:X(0),opacity:0,fill:E},whileInView:{x:X(e.target)-Ae/2,opacity:1,fill:E,transition:{duration:k.duration}}},initial:`initial`,animate:F?`whileInView`:`initial`}):null,de?(0,h.jsx)(me.t,{value:`${e.label}`.length<c?`${e.label}`:`${`${e.label}`.substring(0,c)}...`,y:0,x:(e.size||0)<0?X(0):0-U.left,width:(e.size||0)<0?l-X(0):X(0)+U.left,height:Z.bandwidth(),alignment:e.size&&e.size<0?`left`:`right`,style:C?.yAxis?.labels,className:w?.yAxis?.labels,animate:k,isInView:F}):null,re?(0,h.jsx)(d.t.text,{y:Z.bandwidth()/2,style:{textAnchor:e.size&&e.size<0?`end`:`start`,...C?.graphObjectValues||{}},className:(0,ve.cn)(`graph-value text-sm`,!De&&a.length>1?` fill-primary-gray-600 dark:fill-primary-gray-300`:``,w?.graphObjectValues),dx:e.size&&e.size<0?-5:5,dy:`0.33em`,exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{x:X(0),opacity:0,fill:De||a},whileInView:{x:e.size?X(e.size):X(0),opacity:1,fill:De||a,transition:{duration:k.duration}}},initial:`initial`,animate:F?`whileInView`:`initial`,children:fe.t(e.size,ke,Oe,te,s,M,N)}):null]},e.label)),be?.map(e=>(0,h.jsx)(_e.t,{text:e.text,color:e.color,x:X(e.value),y1:0-U.top,y2:W+U.bottom,textSide:X(e.value)>Ne*.75||Ce?`left`:`right`,classNames:e.classNames,styles:e.styles,animate:k,isInView:F},e.text))]}),j.filter(e=>e.position===`after`).map(e=>e.layer)]})}),I&&he&&B&&Me?(0,h.jsx)(f.t,{data:I,body:he,xPos:B,yPos:Me,backgroundStyle:C?.tooltip,className:w?.tooltip}):null,b&&R!==void 0?(0,h.jsx)(ge.t,{body:b,data:R,setData:z,className:w?.modal}):null]})}function _(e){let{data:t,graphTitle:s,barColor:re=r.Colors.primaryColors[`blue-600`],barPadding:ae=.25,showTicks:oe=!0,leftMargin:u,rightMargin:d,topMargin:se,bottomMargin:ce,truncateBy:le=999,showLabels:ue=!0,showValues:de=!0,backgroundColor:fe=!1,suffix:pe=``,prefix:me=``,sources:he,graphDescription:ge,height:_e,width:f,footNote:ve,colorDomain:xe,colorLegendTitle:m,padding:_,relativeHeight:v,tooltip:y,onSeriesMouseOver:Ce,refValues:we,showColorScale:Te=!0,graphID:Ee,maxValue:b,minValue:x,highlightedDataPoints:De,onSeriesMouseClick:S,valueColor:C,orientation:w=`vertical`,styles:T,classNames:E,qualitativeRangeColors:D,targetColor:O=r.Colors.light.grays[`gray-700`],filterNA:k=!0,targetStyle:A=`line`,measureBarWidthFactor:Oe=.4,animate:j=!1,dimmedOpacity:ke=.3,customLayers:Ae=[],naLabel:je=`NA`,graphDownload:M=!1,dataDownload:N=!1,language:P=`en`,theme:F=`light`,sortData:I,labelOrder:L,minHeight:R=0,maxBarThickness:z,maxNumberOfBars:B,minBarThickness:V,ariaLabel:Me,resetSelectionOnDoubleClick:H=!0,detailsOnClick:U,barAxisTitle:Ne,noOfTicks:W=5,targetLineThickness:Pe=2,timeline:G={enabled:!1,autoplay:!1,showOnlyActiveDate:!0},hideAxisLine:Fe=!1,numberDisplayOptions:Ie}=e,[Le,K]=(0,p.useState)(0),[q,J]=(0,p.useState)(0),Y=(0,p.useRef)(null),X=(0,p.useRef)(null),Z=w===`horizontal`?Se:g,[Q,Re]=(0,p.useState)(G.autoplay),$=(0,p.useMemo)(()=>{let e=[...new Set(t.filter(e=>e.date).map(e=>ne.t(`${e.date}`,G.dateFormat||`yyyy`,new Date).getTime()))];return e.sort((e,t)=>e-t),e},[t,G.dateFormat]),[ze,Be]=(0,p.useState)(G.autoplay?0:$.length-1);(0,p.useEffect)(()=>{let e=new ResizeObserver(e=>{K(e[0].target.clientWidth||620),J(e[0].target.clientHeight||480)});return Y.current&&e.observe(Y.current),()=>e.disconnect()},[]),(0,p.useEffect)(()=>{let e=setInterval(()=>{Be(e=>e<$.length-1?e+1:0)},(G.speed||2)*1e3);return Q||clearInterval(e),()=>clearInterval(e)},[$,Q,G.speed]);let Ve=l.t($,ze,G.showOnlyActiveDate,G.dateFormat||`yyyy`);return(0,h.jsxs)(te.n,{className:E?.graphContainer,style:T?.graphContainer,id:Ee,ref:X,"aria-label":Me,backgroundColor:fe,theme:F,language:P,minHeight:R,width:f,height:_e,relativeHeight:v,padding:_,children:[s||ge||M||N?(0,h.jsx)(a.GraphHeader,{styles:{title:T?.title,description:T?.description},classNames:{title:E?.title,description:E?.description},graphTitle:s,graphDescription:ge,width:f,graphDownload:M?X:void 0,dataDownload:N?t.map(e=>e.data).filter(e=>e!==void 0).length>0?t.map(e=>e.data).filter(e=>e!==void 0):t.filter(e=>e!==void 0):null}):null,G.enabled&&$.length>0&&Ve?(0,h.jsxs)(`div`,{className:`flex gap-6 items-center`,dir:`ltr`,children:[(0,h.jsx)(`button`,{type:`button`,onClick:()=>{Re(!Q)},className:`p-0 border-0 cursor-pointer bg-transparent`,"aria-label":Q?`Click to pause animation`:`Click to play animation`,children:Q?(0,h.jsx)(n.l,{}):(0,h.jsx)(n.u,{})}),(0,h.jsx)(ye.SliderUI,{min:$[0],max:$[$.length-1],marks:Ve,step:null,defaultValue:$[$.length-1],value:$[ze],onChangeComplete:e=>{Be($.indexOf(e))},onChange:e=>{Be($.indexOf(e))},"aria-label":`Time slider. Use arrow keys to adjust selected time period.`})]}):null,(0,h.jsxs)(`div`,{className:`grow flex flex-col justify-center gap-3 w-full`,children:[Te&&t.filter(e=>e.qualitativeRange).length!==0&&xe&&t.length>0?(0,h.jsx)(i.ColorLegend,{width:f,colorLegendTitle:m,colors:D||r.Colors[F].sequentialColors.positiveColorsx10,colorDomain:xe,showNAColor:!1,className:E?.colorLegend}):null,(0,h.jsxs)(te.t,{ref:Y,children:[t.length===0&&(0,h.jsx)(ie.t,{}),Le&&q&&t.length>0?(0,h.jsx)(Z,{hideAxisLine:Fe,data:I?(0,be.default)(c.n(t,G.dateFormat||`yyyy`).filter(e=>G.enabled?`${e.date}`===ne.n(new Date($[ze]),G.dateFormat||`yyyy`):e).filter(e=>k?!o.t(e.size):e),[e=>e.size===void 0?I===`asc`?(w===`horizontal`?1:-1)*(1/0):(w===`horizontal`?-1:1)*(1/0):e.size],[I]).filter((e,t)=>B?t<B:!0):c.n(t,G.dateFormat||`yyyy`).filter(e=>G.enabled?`${e.date}`===ne.n(new Date($[ze]),G.dateFormat||`yyyy`):e).filter(e=>k?!o.t(e.size):e).filter((e,t)=>B?t<B:!0),barColor:re,targetColor:O,width:Le,refValues:we,height:q,suffix:pe,prefix:me,barPadding:ae,showLabels:ue,showValues:de,showTicks:oe,truncateBy:le,leftMargin:u,rightMargin:d,qualitativeRangeColors:D||r.Colors[F].sequentialColors.positiveColorsx10,topMargin:se,bottomMargin:ce,tooltip:y,onSeriesMouseOver:Ce,maxValue:b,minValue:x,highlightedDataPoints:De,onSeriesMouseClick:S,labelOrder:L,maxBarThickness:z,minBarThickness:V,resetSelectionOnDoubleClick:H,detailsOnClick:U,barAxisTitle:Ne,noOfTicks:W,valueColor:C,styles:T,classNames:E,targetStyle:A,dimmedOpacity:ke,measureBarWidthFactor:Oe,animate:j===!0?{duration:.5,once:!0,amount:.5}:j||{duration:0,once:!0,amount:0},customLayers:Ae,naLabel:je,targetLineThickness:Pe,rtl:P===`ar`||P===`he`,locale:Ie?.locale||`en`,padZeros:Ie?.padZeros||!1,precision:Ie?.precision??2}):null]})]}),he||ve?(0,h.jsx)(ee.GraphFooter,{styles:{footnote:T?.footnote,source:T?.source},classNames:{footnote:E?.footnote,source:E?.source},sources:he,footNote:ve,width:f}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
+//# sourceMappingURL=BulletChart-ElYRyO07.cjs.map

package/dist/BulletChart-ElYRyO07.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart-ElYRyO07.cjs","names":[],"sources":["../src/Components/Graphs/BulletChart/Graph.tsx","../src/Components/Graphs/BulletChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport sum from 'lodash.sum';\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  BulletChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: BulletChartDataType[];\n  width: number;\n  height: number;\n  barColor: string;\n  suffix: string;\n  prefix: string;\n  barPadding: number;\n  showLabels: boolean;\n  showValues: boolean;\n  showTicks: boolean;\n  truncateBy: number;\n  leftMargin?: number;\n  rightMargin?: number;\n  topMargin?: number;\n  bottomMargin?: number;\n  refValues?: ReferenceDataType[];\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  highlightedDataPoints?: (string | number)[];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  labelOrder?: string[];\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  barAxisTitle?: string;\n  noOfTicks: number;\n  valueColor?: string;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  targetColor: string;\n  targetStyle: 'background' | 'line';\n  qualitativeRangeColors: string[];\n  measureBarWidthFactor: number;\n  animate: AnimateDataType;\n  dimmedOpacity: number;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  naLabel: string;\n  rtl: boolean;\n  targetLineThickness: number;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function VerticalGraph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    barColor,\n    suffix,\n    prefix,\n    barPadding,\n    showLabels,\n    showValues,\n    showTicks,\n    truncateBy,\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    maxValue,\n    minValue,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    labelOrder,\n    maxBarThickness,\n    minBarThickness,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    barAxisTitle,\n    valueColor,\n    noOfTicks,\n    styles,\n    classNames,\n    targetStyle,\n    targetColor,\n    qualitativeRangeColors,\n    measureBarWidthFactor,\n    animate,\n    dimmedOpacity,\n    precision,\n    customLayers,\n    naLabel,\n    targetLineThickness,\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: barAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const barMaxValue =\n    Math.max(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) <\n    0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n  const targetMaxValue =\n    Math.max(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) < 0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.target as number),\n        );\n  const qualitativeRangeMaxValue = Math.max(\n    ...data.map(\n      (d) => sum((d.qualitativeRange || []).filter((l) => !checkIfNullOrUndefined(l))) || 0,\n    ),\n  );\n  const xMaxValue = !checkIfNullOrUndefined(maxValue)\n    ? (maxValue as number)\n    : Math.max(...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite)) <\n        0\n      ? 0\n      : Math.max(\n          ...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite),\n        );\n  const barMinValue =\n    Math.min(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) >=\n    0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n\n  const targetMinValue =\n    Math.min(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) >= 0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n        );\n  const xMinValue = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite)) >= 0\n      ? 0\n      : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite));\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        size: null,\n        target: null,\n        qualitativeRange: 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([xMinValue, xMaxValue]).range([graphHeight, 0]).nice();\n\n  const x = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphWidth, minBarThickness * barOrder.length)\n        : maxBarThickness\n          ? Math.min(graphWidth, maxBarThickness * barOrder.length)\n          : graphWidth,\n    ])\n    .paddingInner(barPadding);\n  const yTicks = y.ticks(noOfTicks);\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <Axis\n            hideAxisLine={hideAxisLine}\n            y1={y(xMinValue < 0 ? 0 : xMinValue)}\n            y2={y(xMinValue < 0 ? 0 : xMinValue)}\n            x1={0 - leftMargin}\n            x2={graphWidth + margin.right}\n            label={\n              showTicks\n                ? numberFormattingFunction(\n                    xMinValue < 0 ? 0 : xMinValue,\n                    naLabel,\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: xMaxValue < 0 ? '1em' : -5,\n              y: y(xMinValue < 0 ? 0 : xMinValue),\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={barAxisTitle}\n            rotate90\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d) =>\n              !checkIfNullOrUndefined(x(d.id)) ? (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  onMouseEnter={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                    onSeriesMouseOver?.(d);\n                  }}\n                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      x: x(`${d.id}`),\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}`),\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                >\n                  {d.qualitativeRange\n                    ? d.qualitativeRange.map((_el, j) => (\n                        <motion.rect\n                          // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                          key={j}\n                          x={0}\n                          exit={{\n                            height: 0,\n                            y: y(0),\n                            transition: { duration: animate.duration },\n                          }}\n                          variants={{\n                            initial: {\n                              height: 0,\n                              y: y(0),\n                              fill: qualitativeRangeColors[j],\n                            },\n                            whileInView: {\n                              height: Math.abs(\n                                y(\n                                  sum(\n                                    (d.qualitativeRange as number[]).filter(\n                                      (element, k) => k <= j && element,\n                                    ),\n                                  ),\n                                ) -\n                                  y(\n                                    sum(\n                                      (d.qualitativeRange as number[]).filter(\n                                        (element, k) => k < j && element,\n                                      ),\n                                    ),\n                                  ),\n                              ),\n                              y: y(\n                                sum(\n                                  (d.qualitativeRange as number[]).filter(\n                                    (element, k) => k <= j && element,\n                                  ),\n                                ),\n                              ),\n                              fill: qualitativeRangeColors[j],\n                              transition: { duration: animate.duration },\n                            },\n                          }}\n                          initial='initial'\n                          animate={isInView ? 'whileInView' : 'initial'}\n                          width={x.bandwidth()}\n                        />\n                      ))\n                    : null}\n                  {d.target && targetStyle === 'background' ? (\n                    <motion.rect\n                      x={0}\n                      width={x.bandwidth()}\n                      exit={{\n                        height: 0,\n                        y: y(0),\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          height: 0,\n                          fill: targetColor,\n                          y: y(0),\n                        },\n                        whileInView: {\n                          height: Math.abs(y(d.target) - y(0)),\n                          fill: targetColor,\n                          y: d.target > 0 ? y(d.target) : y(0),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.size ? (\n                    <motion.rect\n                      x={x.bandwidth() * ((1 - measureBarWidthFactor) / 2)}\n                      width={x.bandwidth() * measureBarWidthFactor}\n                      style={{\n                        fill: barColor,\n                      }}\n                      exit={{\n                        height: 0,\n                        y: y(0),\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          height: 0,\n                          y: y(0),\n                        },\n                        whileInView: {\n                          height: Math.abs(y(d.size) - y(0)),\n                          y: d.size > 0 ? y(d.size) : y(0),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.target && targetStyle === 'line' ? (\n                    <motion.rect\n                      x={0}\n                      width={x.bandwidth()}\n                      exit={{\n                        y: y(0),\n                        opacity: 0,\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          y: y(0),\n                          opacity: 0,\n                          fill: targetColor,\n                        },\n                        whileInView: {\n                          y: y(d.target) - targetLineThickness / 2,\n                          opacity: 1,\n                          fill: targetColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      height={targetLineThickness}\n                    />\n                  ) : null}\n                  {showLabels ? (\n                    <XAxesLabels\n                      value={\n                        `${d.label}`.length < truncateBy\n                          ? `${d.label}`\n                          : `${`${d.label}`.substring(0, truncateBy)}...`\n                      }\n                      y={(d.size || 0) < 0 ? 0 : y(0) + 5}\n                      x={0}\n                      width={x.bandwidth()}\n                      height={(d.size || 0) < 0 ? y(0) - 5 : margin.bottom}\n                      style={styles?.xAxis?.labels}\n                      className={classNames?.xAxis?.labels}\n                      alignment={(d.size || 0) < 0 ? 'bottom' : 'top'}\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                  {showValues ? (\n                    <motion.text\n                      x={x.bandwidth() / 2}\n                      style={{\n                        textAnchor: 'middle',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn(\n                        'graph-value text-sm',\n                        !valueColor && barColor.length > 1\n                          ? ' fill-primary-gray-600 dark:fill-primary-gray-300'\n                          : '',\n                        classNames?.graphObjectValues,\n                      )}\n                      dy={d.size ? (d.size >= 0 ? '-5px' : '1em') : '-5px'}\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                      variants={{\n                        initial: {\n                          y: y(0),\n                          opacity: 0,\n                          fill: valueColor || barColor,\n                        },\n                        whileInView: {\n                          y: y(d.size || 0),\n                          opacity: 1,\n                          fill: valueColor || barColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    >\n                      {numberFormattingFunction(\n                        d.size,\n                        naLabel,\n                        precision,\n                        prefix,\n                        suffix,\n                        locale,\n                        padZeros,\n                      )}\n                    </motion.text>\n                  ) : null}\n                </motion.g>\n              ) : null,\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    topMargin = 25,\n    bottomMargin = 10,\n    leftMargin = 100,\n    rightMargin = 40,\n    barColor,\n    suffix,\n    prefix,\n    barPadding,\n    showValues,\n    showTicks,\n    truncateBy,\n    width,\n    height,\n    showLabels,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    highlightedDataPoints,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    labelOrder,\n    rtl,\n    maxBarThickness,\n    minBarThickness,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    barAxisTitle,\n    valueColor,\n    noOfTicks,\n    styles,\n    classNames,\n    targetStyle,\n    targetColor,\n    qualitativeRangeColors,\n    measureBarWidthFactor,\n    animate,\n    dimmedOpacity,\n    precision,\n    customLayers,\n    naLabel,\n    targetLineThickness,\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  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: barAxisTitle ? 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\n  const barMaxValue =\n    Math.max(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) <\n    0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n  const targetMaxValue =\n    Math.max(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) < 0\n      ? 0\n      : Math.max(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n        );\n  const qualitativeRangeMaxValue = Math.max(\n    ...data.map(\n      (d) => sum((d.qualitativeRange || []).filter((l) => !checkIfNullOrUndefined(l))) || 0,\n    ),\n  );\n  const xMaxValue = !checkIfNullOrUndefined(maxValue)\n    ? (maxValue as number)\n    : Math.max(...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite)) <\n        0\n      ? 0\n      : Math.max(\n          ...[barMaxValue, targetMaxValue, qualitativeRangeMaxValue].filter(Number.isFinite),\n        );\n  const barMinValue =\n    Math.min(...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number)) >=\n    0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.size)).map((d) => d.size as number),\n        );\n\n  const targetMinValue =\n    Math.min(\n      ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n    ) >= 0\n      ? 0\n      : Math.min(\n          ...data.filter((d) => !checkIfNullOrUndefined(d.target)).map((d) => d.target as number),\n        );\n  const xMinValue = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite)) >= 0\n      ? 0\n      : Math.min(...[barMinValue, targetMinValue].filter(Number.isFinite));\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        size: null,\n        target: null,\n        qualitativeRange: 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([xMinValue, xMaxValue]).range([0, graphWidth]).nice();\n  const y = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphHeight, minBarThickness * barOrder.length)\n        : maxBarThickness\n          ? Math.min(graphHeight, maxBarThickness * barOrder.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        <g transform={`translate(${margin.left},${margin.top})`}>\n          {showTicks ? (\n            <XTicksAndGridLines\n              values={xTicks.filter((d) => d !== 0)}\n              x={xTicks.filter((d) => d !== 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={barAxisTitle}\n          />\n          <Axis\n            hideAxisLine={hideAxisLine}\n            x1={x(xMinValue < 0 ? 0 : xMinValue)}\n            x2={x(xMinValue < 0 ? 0 : xMinValue)}\n            y1={-2.5}\n            y2={graphHeight + margin.bottom}\n            classNames={{ axis: classNames?.yAxis?.axis }}\n            styles={{ axis: styles?.yAxis?.axis }}\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d) =>\n              !checkIfNullOrUndefined(y(d.id)) ? (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  onMouseEnter={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                    onSeriesMouseOver?.(d);\n                  }}\n                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      x: 0,\n                      y: y(`${d.id}`),\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}`),\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                >\n                  {d.qualitativeRange\n                    ? d.qualitativeRange.map((el, j) => (\n                        <motion.rect\n                          // biome-ignore lint/suspicious/noArrayIndexKey: index is the identifier\n                          key={j}\n                          exit={{\n                            width: 0,\n                            x: x(0),\n                            transition: { duration: animate.duration },\n                          }}\n                          variants={{\n                            initial: {\n                              x: x(0),\n                              width: 0,\n                              fill: qualitativeRangeColors[j],\n                            },\n                            whileInView: {\n                              x: x(\n                                j === 0\n                                  ? 0\n                                  : sum(\n                                      (d.qualitativeRange as number[]).filter(\n                                        (element, k) => k < j && element,\n                                      ),\n                                    ),\n                              ),\n                              width: x(el),\n                              fill: qualitativeRangeColors[j],\n                              transition: { duration: animate.duration },\n                            },\n                          }}\n                          initial='initial'\n                          animate={isInView ? 'whileInView' : 'initial'}\n                          y={0}\n                          height={y.bandwidth()}\n                        />\n                      ))\n                    : null}\n                  {d.target && targetStyle === 'background' ? (\n                    <motion.rect\n                      y={0}\n                      x={d.target >= 0 ? x(0) : x(d.target)}\n                      height={y.bandwidth()}\n                      exit={{\n                        width: 0,\n                        x: x(0),\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          fill: targetColor,\n                          width: 0,\n                        },\n                        whileInView: {\n                          x: d.target >= 0 ? x(0) : x(d.target),\n                          fill: targetColor,\n                          width: d.target >= 0 ? x(d.target) - x(0) : x(0) - x(d.target),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.size ? (\n                    <motion.rect\n                      y={y.bandwidth() * ((1 - measureBarWidthFactor) / 2)}\n                      style={{\n                        fill: barColor,\n                      }}\n                      height={y.bandwidth() * measureBarWidthFactor}\n                      exit={{\n                        width: 0,\n                        x: x(0),\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          width: 0,\n                        },\n                        whileInView: {\n                          x: d.size >= 0 ? x(0) : x(d.size),\n                          width: d.size >= 0 ? x(d.size) - x(0) : x(0) - x(d.size),\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {d.target && targetStyle === 'line' ? (\n                    <motion.rect\n                      y={0}\n                      height={y.bandwidth()}\n                      width={targetLineThickness}\n                      exit={{\n                        opacity: 0,\n                        x: x(0),\n                        fill: targetColor,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          opacity: 0,\n                          fill: targetColor,\n                        },\n                        whileInView: {\n                          x: x(d.target) - targetLineThickness / 2,\n                          opacity: 1,\n                          fill: targetColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    />\n                  ) : null}\n                  {showLabels ? (\n                    <YAxesLabels\n                      value={\n                        `${d.label}`.length < truncateBy\n                          ? `${d.label}`\n                          : `${`${d.label}`.substring(0, truncateBy)}...`\n                      }\n                      y={0}\n                      x={(d.size || 0) < 0 ? x(0) : 0 - margin.left}\n                      width={(d.size || 0) < 0 ? width - x(0) : x(0) + margin.left}\n                      height={y.bandwidth()}\n                      alignment={d.size ? (d.size < 0 ? 'left' : 'right') : 'right'}\n                      style={styles?.yAxis?.labels}\n                      className={classNames?.yAxis?.labels}\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                  {showValues ? (\n                    <motion.text\n                      y={y.bandwidth() / 2}\n                      style={{\n                        textAnchor: d.size ? (d.size < 0 ? 'end' : 'start') : 'start',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn(\n                        'graph-value text-sm',\n                        !valueColor && barColor.length > 1\n                          ? ' fill-primary-gray-600 dark:fill-primary-gray-300'\n                          : '',\n                        classNames?.graphObjectValues,\n                      )}\n                      dx={d.size ? (d.size < 0 ? -5 : 5) : 5}\n                      dy='0.33em'\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                      variants={{\n                        initial: {\n                          x: x(0),\n                          opacity: 0,\n                          fill: valueColor || barColor,\n                        },\n                        whileInView: {\n                          x: d.size ? x(d.size) : x(0),\n                          opacity: 1,\n                          fill: valueColor || barColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                    >\n                      {numberFormattingFunction(\n                        d.size,\n                        naLabel,\n                        precision,\n                        prefix,\n                        suffix,\n                        locale,\n                        padZeros,\n                      )}\n                    </motion.text>\n                  ) : null}\n                </motion.g>\n              ) : null,\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 { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport { Pause, Play } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  BulletChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  TimelineDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { ensureCompleteDataForBulletChart } 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: BulletChartDataType[];\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  /** Color for bars */\n  barColor?: string;\n  /** Domain of colors for the qualitative range bars */\n  colorDomain?: string[];\n  /** Colors for the qualitative range bars */\n  qualitativeRangeColors?: 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\n  // Values and Ticks\n  /** Prefix for values */\n  prefix?: string;\n  /** Suffix for values */\n  suffix?: string;\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  /** Defines the style of the target bar */\n  targetStyle?: 'background' | 'line';\n  /** Defines the color of the target bar */\n  targetColor?: string;\n  /** Defines the thickness if the target is of style line */\n  targetLineThickness?: number;\n  /** Defines the width of the measure bar in relation with available width */\n  measureBarWidthFactor?: number;\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 */\n  hideAxisLine?: boolean;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;\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  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Title for the bar axis */\n  barAxisTitle?: string;\n  /** Sorting order for data. This is overwritten by labelOrder prop. */\n  sortData?: 'asc' | 'desc';\n  /** Toggles if data point which are undefined or has value null are filtered out.  */\n  filterNA?: boolean;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\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  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function BulletChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    barColor = Colors.primaryColors['blue-600'],\n    barPadding = 0.25,\n    showTicks = true,\n    leftMargin,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    truncateBy = 999,\n    showLabels = true,\n    showValues = true,\n    backgroundColor = false,\n    suffix = '',\n    prefix = '',\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    padding,\n    relativeHeight,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    showColorScale = true,\n    graphID,\n    maxValue,\n    minValue,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    valueColor,\n    orientation = 'vertical',\n    styles,\n    classNames,\n    qualitativeRangeColors,\n    targetColor = Colors.light.grays['gray-700'],\n    filterNA = true,\n    targetStyle = 'line',\n    measureBarWidthFactor = 0.4,\n    animate = false,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    naLabel = 'NA',\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    theme = 'light',\n    sortData,\n    labelOrder,\n    minHeight = 0,\n    maxBarThickness,\n    maxNumberOfBars,\n    minBarThickness,\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    barAxisTitle,\n    noOfTicks = 5,\n    targetLineThickness = 2,\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  const Comp = orientation === 'horizontal' ? HorizontalGraph : VerticalGraph;\n\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\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  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      <div className='grow flex flex-col justify-center gap-3 w-full'>\n        {showColorScale &&\n        data.filter((el) => el.qualitativeRange).length !== 0 &&\n        colorDomain &&\n        data.length > 0 ? (\n          <ColorLegend\n            width={width}\n            colorLegendTitle={colorLegendTitle}\n            colors={qualitativeRangeColors || Colors[theme].sequentialColors.positiveColorsx10}\n            colorDomain={colorDomain}\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                sortData\n                  ? orderBy(\n                      ensureCompleteDataForBulletChart(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 ? !checkIfNullOrUndefined(d.size) : d)),\n                      [\n                        (d) =>\n                          d.size === undefined\n                            ? sortData === 'asc'\n                              ? (orientation === 'horizontal' ? 1 : -1) * Infinity\n                              : (orientation === 'horizontal' ? -1 : 1) * Infinity\n                            : d.size,\n                      ],\n                      [sortData],\n                    ).filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n                  : ensureCompleteDataForBulletChart(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 ? !checkIfNullOrUndefined(d.size) : d))\n                      .filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))\n              }\n              barColor={barColor}\n              targetColor={targetColor}\n              width={svgWidth}\n              refValues={refValues}\n              height={svgHeight}\n              suffix={suffix}\n              prefix={prefix}\n              barPadding={barPadding}\n              showLabels={showLabels}\n              showValues={showValues}\n              showTicks={showTicks}\n              truncateBy={truncateBy}\n              leftMargin={leftMargin}\n              rightMargin={rightMargin}\n              qualitativeRangeColors={\n                qualitativeRangeColors || Colors[theme].sequentialColors.positiveColorsx10\n              }\n              topMargin={topMargin}\n              bottomMargin={bottomMargin}\n              tooltip={tooltip}\n              onSeriesMouseOver={onSeriesMouseOver}\n              maxValue={maxValue}\n              minValue={minValue}\n              highlightedDataPoints={highlightedDataPoints}\n              onSeriesMouseClick={onSeriesMouseClick}\n              labelOrder={labelOrder}\n              maxBarThickness={maxBarThickness}\n              minBarThickness={minBarThickness}\n              resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n              detailsOnClick={detailsOnClick}\n              barAxisTitle={barAxisTitle}\n              noOfTicks={noOfTicks}\n              valueColor={valueColor}\n              styles={styles}\n              classNames={classNames}\n              targetStyle={targetStyle}\n              dimmedOpacity={dimmedOpacity}\n              measureBarWidthFactor={measureBarWidthFactor}\n              animate={\n                animate === true\n                  ? { duration: 0.5, once: true, amount: 0.5 }\n                  : animate || { duration: 0, once: true, amount: 0 }\n              }\n              customLayers={customLayers}\n              naLabel={naLabel}\n              targetLineThickness={targetLineThickness}\n              rtl={language === 'ar' || language === 'he'}\n              locale={numberDisplayOptions?.locale || 'en'}\n              padZeros={numberDisplayOptions?.padZeros || false}\n              precision={numberDisplayOptions?.precision ?? 2}\n            />\n          ) : null}\n        </GraphArea>\n      </div>\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/BulletChart.cjs

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