@undp/data-viz 2.5.4 → 2.6.1

package/dist/WaterfallChart-cJ5pGsDu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallChart-cJ5pGsDu.cjs","names":[],"sources":["../src/Components/Graphs/WaterfallChart/Graph.tsx","../src/Components/Graphs/WaterfallChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useMemo, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  ReferenceDataType,\n  StyleObject,\n  WaterfallChartDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: WaterfallChartDataType[];\n  barColor: string[];\n  colorDomain: string[];\n  suffix: string;\n  prefix: string;\n  barPadding: number;\n  showValues: boolean;\n  showTicks: boolean;\n  leftMargin?: number;\n  rightMargin?: number;\n  topMargin?: number;\n  bottomMargin?: number;\n  showLabels: boolean;\n  truncateBy: number;\n  width: number;\n  height: number;\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  refValues?: ReferenceDataType[];\n  selectedColor?: string;\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  rtl: boolean;\n  maxBarThickness?: number;\n  minBarThickness?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  barAxisTitle?: string;\n  noOfTicks: number;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  animate: AnimateDataType;\n  dimmedOpacity: number;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  naLabel: string;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\nfunction getWaterfallExtent(values: (number | null | undefined)[]) {\n  let cumulative = 0;\n  let max = 0;\n  let min = 0;\n\n  for (const v of values) {\n    cumulative += v || 0;\n    if (cumulative > max) max = cumulative;\n    if (cumulative < min) min = cumulative;\n  }\n\n  return {\n    max,\n    min,\n  };\n}\n\nexport function Graph(props: Props) {\n  const {\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    data,\n    width,\n    height,\n    barColor,\n    suffix,\n    prefix,\n    barPadding,\n    showLabels,\n    showValues,\n    showTicks,\n    colorDomain,\n    truncateBy,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    selectedColor,\n    maxValue,\n    minValue,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    labelOrder,\n    maxBarThickness,\n    minBarThickness,\n    detailsOnClick,\n    barAxisTitle,\n    noOfTicks,\n    styles,\n    classNames,\n    dimmedOpacity,\n    animate,\n    precision,\n    customLayers,\n    naLabel,\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\n  const { max, min } = getWaterfallExtent(data.map((d) => d.size));\n\n  const maxVal = !checkIfNullOrUndefined(maxValue) ? (maxValue as number) : max;\n  const minVal = !checkIfNullOrUndefined(minValue) ? (minValue as number) : min;\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 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        color: null,\n        size: 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([minVal, maxVal]).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  let running = 0;\n\n  const waterfallData = dataWithId.map((d) => {\n    const start = running;\n    running += d.size || 0;\n    return {\n      ...d,\n      start,\n      end: running,\n    };\n  });\n  return (\n    <>\n      <motion.svg\n        ref={svgRef}\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <Axis\n            y1={y(minVal < 0 ? 0 : minVal)}\n            y2={y(minVal < 0 ? 0 : minVal)}\n            x1={0 - leftMargin}\n            x2={graphWidth + margin.right}\n            hideAxisLine={hideAxisLine}\n            label={\n              showTicks\n                ? numberFormattingFunction(\n                    minVal < 0 ? 0 : minVal,\n                    undefined,\n                    precision,\n                    prefix,\n                    suffix,\n                    locale,\n                    padZeros,\n                  )\n                : undefined\n            }\n            labelPos={{\n              x: 0 - leftMargin,\n              dx: 0,\n              dy: maxVal < 0 ? '1em' : -5,\n              y: y(minVal < 0 ? 0 : minVal),\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            {waterfallData.map((d, _i) =>\n              !checkIfNullOrUndefined(x(d.id)) ? (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                  variants={{\n                    initial: {\n                      opacity: selectedColor\n                        ? d.color\n                          ? barColor[colorDomain.indexOf(d.color)] === selectedColor\n                            ? 1\n                            : dimmedOpacity\n                          : dimmedOpacity\n                        : highlightedDataPoints\n                          ? highlightedDataPoints.indexOf(d.label) !== -1\n                            ? 0.85\n                            : dimmedOpacity\n                          : 0.85,\n                    },\n                    whileInView: {\n                      opacity: selectedColor\n                        ? d.color\n                          ? barColor[colorDomain.indexOf(d.color)] === selectedColor\n                            ? 1\n                            : dimmedOpacity\n                          : dimmedOpacity\n                        : highlightedDataPoints\n                          ? highlightedDataPoints.indexOf(d.label) !== -1\n                            ? 0.85\n                            : dimmedOpacity\n                          : 0.85,\n                      transition: { duration: animate.duration },\n                    },\n                  }}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\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)) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                >\n                  {d.size ? (\n                    <motion.rect\n                      width={x.bandwidth()}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      variants={{\n                        initial: {\n                          height: 0,\n                          x: x(`${d.id}`),\n                          y: y(d.start),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? barColor[0]\n                              : !d.color\n                                ? Colors.gray\n                                : barColor[colorDomain.indexOf(d.color)],\n                        },\n                        whileInView: {\n                          height: Math.abs(y(d.start) - y(d.end)),\n                          y: y(Math.max(d.start, d.end)),\n                          x: x(`${d.id}`),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? barColor[0]\n                              : !d.color\n                                ? Colors.gray\n                                : barColor[colorDomain.indexOf(d.color)],\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      exit={{\n                        height: 0,\n                        y: y(d.start),\n                        transition: { duration: animate.duration },\n                      }}\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={y(0) + 5}\n                      x={x(`${d.id}`) as number}\n                      width={x.bandwidth()}\n                      height={margin.bottom}\n                      style={styles?.xAxis?.labels}\n                      className={classNames?.xAxis?.labels}\n                      alignment='top'\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                  {showValues && Math.abs(y(d.start) - y(d.end)) > 16 ? (\n                    <motion.text\n                      style={{\n                        textAnchor: 'middle',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                      dy='0.33em'\n                      variants={{\n                        initial: {\n                          x: (x(`${d.id}`) as number) + x.bandwidth() / 2,\n                          y: (y(d.start) + y(d.end)) / 2,\n                          opacity: 0,\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? getTextColorBasedOnBgColor(barColor[0])\n                              : !d.color\n                                ? getTextColorBasedOnBgColor(Colors.gray)\n                                : getTextColorBasedOnBgColor(\n                                    barColor[colorDomain.indexOf(d.color)],\n                                  ),\n                        },\n                        whileInView: {\n                          x: (x(`${d.id}`) as number) + x.bandwidth() / 2,\n                          y: (y(d.start) + y(d.end)) / 2,\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? getTextColorBasedOnBgColor(barColor[0])\n                              : !d.color\n                                ? getTextColorBasedOnBgColor(Colors.gray)\n                                : getTextColorBasedOnBgColor(\n                                    barColor[colorDomain.indexOf(d.color)],\n                                  ),\n                          opacity: 1,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      exit={{\n                        opacity: 0,\n                        transition: { duration: animate.duration },\n                      }}\n                    >\n                      {numberFormattingFunction(\n                        d.size ? Math.abs(d.size) : 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","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegendWithMouseOver } from '@/Components/Elements/ColorLegendWithMouseOver';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  WaterfallChartDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils';\nimport { uniqBy } from '@/Utils/uniqBy';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: WaterfallChartDataType[];\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 or array of colors for bars */\n  colors?: string | string[];\n  /** Domain of colors for the graph */\n  colorDomain?: string[];\n  /** Title for the color legend */\n  colorLegendTitle?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n  /** Padding between bars */\n  barPadding?: number;\n  /** 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  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Truncate labels by specified length */\n  truncateBy?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** Number of ticks on the axis */\n  noOfTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of labels */\n  showLabels?: boolean;\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Custom order for labels */\n  labelOrder?: string[];\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: 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  /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */\n  showNAColor?: boolean;\n  /** Data points to highlight. Use the label value from data to highlight the data point */\n  highlightedDataPoints?: (string | number)[];\n  /** Defines the opacity of the non-highlighted data */\n  dimmedOpacity?: number;\n  /** Title for the bar axis */\n  barAxisTitle?: string;\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  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: 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 WaterfallChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors,\n    sources,\n    graphDescription,\n    barPadding = 0.25,\n    showValues = true,\n    showTicks = true,\n    truncateBy = 999,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    highlightedDataPoints,\n    padding,\n    backgroundColor = false,\n    topMargin,\n    bottomMargin,\n    leftMargin,\n    rightMargin,\n    showLabels = true,\n    relativeHeight,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    showColorScale = true,\n    graphID,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    graphDownload = false,\n    dataDownload = false,\n    labelOrder,\n    language = 'en',\n    showNAColor = true,\n    minHeight = 0,\n    theme = 'light',\n    maxBarThickness,\n    maxNumberOfBars,\n    minBarThickness,\n    ariaLabel,\n    detailsOnClick,\n    barAxisTitle,\n    noOfTicks = 5,\n    styles,\n    classNames,\n    filterNA = true,\n    animate = false,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    naLabel = 'NA',\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {showColorScale && data.filter((el) => el.color).length !== 0 && data.length > 0 ? (\n        <ColorLegendWithMouseOver\n          width={width}\n          colorLegendTitle={colorLegendTitle}\n          colors={(colors as string[] | undefined) || Colors[theme].categoricalColors.colors}\n          colorDomain={colorDomain || (uniqBy(data, 'color', true) as (string | number)[])}\n          setSelectedColor={setSelectedColor}\n          showNAColor={showNAColor}\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.filter((d) => (filterNA ? !checkIfNullOrUndefined(d.size) : d)).length === 0 && (\n          <EmptyState />\n        )}\n        {svgWidth &&\n        svgHeight &&\n        data.filter((d) => (filterNA ? !checkIfNullOrUndefined(d.size) : d)).length > 0 ? (\n          <Graph\n            hideAxisLine={hideAxisLine}\n            data={data\n              .filter((d) => (filterNA ? !checkIfNullOrUndefined(d.size) : d))\n              .filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))}\n            barColor={\n              data.filter((el) => el.color).length === 0\n                ? colors\n                  ? [colors as string]\n                  : [Colors.primaryColors['blue-600']]\n                : (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\n            }\n            colorDomain={\n              data.filter((el) => el.color).length === 0\n                ? []\n                : colorDomain || (uniqBy(data, 'color', true) as string[])\n            }\n            selectedColor={selectedColor}\n            width={svgWidth}\n            height={svgHeight}\n            barPadding={barPadding}\n            showValues={showValues}\n            showTicks={showTicks}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            truncateBy={truncateBy}\n            showLabels={showLabels}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            refValues={refValues}\n            maxValue={maxValue}\n            minValue={minValue}\n            highlightedDataPoints={highlightedDataPoints}\n            onSeriesMouseClick={onSeriesMouseClick}\n            labelOrder={labelOrder}\n            rtl={language === 'he' || language === 'ar'}\n            maxBarThickness={maxBarThickness}\n            minBarThickness={minBarThickness}\n            detailsOnClick={detailsOnClick}\n            barAxisTitle={barAxisTitle}\n            noOfTicks={noOfTicks}\n            classNames={classNames}\n            styles={styles}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            dimmedOpacity={dimmedOpacity}\n            customLayers={customLayers}\n            naLabel={naLabel}\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          sources={sources}\n          footNote={footNote}\n          width={width}\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"0kCAwEA,SAAS,GAAmB,EAAuC,CACjE,IAAI,EAAa,EACb,EAAM,EACN,EAAM,EAEV,IAAK,IAAM,MAAK,EACd,GAAc,IAAK,EACf,EAAa,IAAK,EAAM,GACxB,EAAa,IAAK,EAAM,GAG9B,MAAO,CACL,MACA,KACF,CACF,CAEA,SAAgB,EAAM,EAAc,CAClC,GAAM,CACJ,aAAa,GACb,cAAc,GACd,aAAY,GACZ,gBAAe,GACf,OACA,QACA,SACA,WACA,SACA,SACA,cACA,cACA,cACA,YACA,cACA,cACA,WACA,oBACA,aACA,gBACA,YACA,WACA,wBACA,qBACA,aACA,kBACA,kBACA,iBACA,eACA,YACA,SACA,aACA,gBACA,UACA,YACA,eACA,UACA,eACA,SACA,YACE,EACE,IAAA,EAAA,EAAA,QAAgB,IAAI,EACpB,EAAW,GAAA,EAAU,GAAQ,CACjC,KAAM,EAAQ,KACd,OAAQ,EAAQ,MAClB,CAAC,EACK,EAAS,CACb,IAAK,GACL,OAAQ,GACR,KAAM,EAAe,EAAa,GAAK,EACvC,MAAO,CACT,EAEM,CAAE,MAAK,QAAQ,GAAmB,EAAK,IAAK,GAAM,EAAE,IAAI,CAAC,EAEzD,GAAU,EAAA,EAAuB,EAAQ,EAA2B,EAAtB,GAC9C,EAAU,EAAA,EAAuB,CAAQ,EAA2B,GAAtB,EAG9C,CAAC,GAAe,IAAA,EAAA,EAAA,UAAkC,IAAA,EAAS,EAE3D,CAAC,EAAgB,IAAA,EAAA,EAAA,UAAmC,IAAA,EAAS,EAC7D,CAAC,EAAQ,KAAA,EAAA,EAAA,UAA0C,IAAA,EAAS,EAC5D,CAAC,GAAQ,KAAA,EAAA,EAAA,UAA0C,IAAA,EAAS,EAC5D,EAAa,EAAQ,EAAO,KAAO,EAAO,MAC1C,GAAc,EAAS,EAAO,IAAM,EAAO,OAE3C,IAAA,EAAA,EAAA,aAA2B,CAC/B,IAAM,EAAQ,IAAI,IAEZ,EAA8B,EAAK,KAAK,EAAG,IAAM,CACrD,IAAM,EAAK,EAAa,GAAG,EAAE,QAAU,GAAG,IAE1C,OADA,EAAM,IAAI,CAAE,EACL,CAAE,GAAG,EAAG,IAAG,CACpB,CAAC,EAEK,EAAa,EAAa,EAAW,OAAQ,GAAO,CAAC,EAAM,IAAI,CAAE,CAAC,EAAI,CAAC,EAE7E,MAAO,CACL,GAAG,EACH,GAAG,EAAW,IAAK,IAAQ,CACzB,KACA,MAAO,EACP,MAAO,KACP,KAAM,IACR,EAAE,CACJ,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAEf,IAAA,EAAA,EAAA,aACG,GAAc,GAAW,IAAK,GAAM,GAAG,EAAE,IAAI,EACnD,CAAC,EAAY,EAAU,CAAC,EAErB,EAAI,EAAA,EAAY,EAAE,OAAO,CAAC,EAAQ,EAAM,CAAC,EAAE,MAAM,CAAC,GAAa,CAAC,CAAC,EAAE,KAAK,EAExE,EAAI,EAAA,EAAU,EACjB,OAAO,EAAQ,EACf,MAAM,CACL,EACA,EACI,KAAK,IAAI,EAAY,EAAkB,GAAS,MAAM,EACtD,EACE,KAAK,IAAI,EAAY,EAAkB,GAAS,MAAM,EACtD,CACR,CAAC,EACA,aAAa,EAAU,EACpB,GAAS,EAAE,MAAM,CAAS,EAC5B,GAAU,EAER,GAAgB,GAAW,IAAK,GAAM,CAC1C,IAAM,EAAQ,GAEd,MADA,KAAW,EAAE,MAAQ,EACd,CACL,GAAG,EACH,QACA,IAAK,EACP,CACF,CAAC,EACD,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,EAAO,IAAR,CACE,IAAK,GACL,MAAO,GAAG,EAAM,IAChB,OAAQ,GAAG,EAAO,IAClB,QAAS,OAAO,EAAM,GAAG,IACzB,UAAU,gBAEV,EAAA,EAAA,MAAC,IAAD,CAAG,UAAW,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI,YAArD,EACE,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,GAAI,EAAE,EAAS,EAAI,EAAI,CAAM,EAC7B,GAAI,EAAE,EAAS,EAAI,EAAI,CAAM,EAC7B,GAAI,EAAI,EACR,GAAI,EAAa,EAAO,MACV,eACd,MACE,EACI,EAAA,EACE,EAAS,EAAI,EAAI,EACjB,IAAA,GACA,EACA,EACA,EACA,EACA,CACF,EACA,IAAA,GAEN,SAAU,CACR,EAAG,EAAI,EACP,GAAI,EACJ,GAAI,GAAS,EAAI,MAAQ,GACzB,EAAG,EAAE,EAAS,EAAI,EAAI,CAAM,CAC9B,EACA,WAAY,CACV,KAAM,GAAY,OAAO,KACzB,MAAO,GAAY,OAAO,MAC5B,EACA,OAAQ,CAAE,KAAM,GAAQ,OAAO,KAAM,MAAO,GAAQ,OAAO,MAAO,CACnE,CAAA,EACA,GACC,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,OAAQ,GAAO,OAAQ,GAAM,IAAM,CAAC,EACpC,EAAG,GAAO,OAAQ,GAAM,IAAM,CAAC,EAAE,IAAK,GAAM,EAAE,CAAC,CAAC,EAChD,GAAI,EAAI,EACR,GAAI,EAAa,EAAO,MACxB,OAAQ,CACN,UAAW,GAAQ,OAAO,UAC1B,OAAQ,GAAQ,OAAO,MACzB,EACA,WAAY,CACV,UAAW,GAAY,OAAO,UAC9B,OAAQ,GAAY,OAAO,MAC7B,EACQ,SACA,SACR,UAAU,YACV,cAAA,GACA,SAAS,WACE,YACH,SACE,UACX,CAAA,EACC,MACJ,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,EAAG,EAAI,EAAa,GACpB,EAAG,GAAc,EACjB,MAAO,GAAQ,OAAO,MACtB,UAAW,GAAY,OAAO,MAC9B,KAAM,EACN,SAAA,EACD,CAAA,EACA,EAAa,OAAQ,GAAM,EAAE,WAAa,QAAQ,EAAE,IAAK,GAAM,EAAE,KAAK,GACvE,EAAA,EAAA,MAAC,GAAA,EAAD,CAAA,SAAA,CACG,GAAc,KAAK,EAAG,IACpB,EAAA,EAAuB,EAAE,EAAE,EAAE,CAAC,EAgL3B,MA/KF,EAAA,EAAA,MAAC,EAAA,EAAO,EAAR,CACE,UAAU,wBAEV,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,SAAU,CACR,QAAS,CACP,QAAS,EACL,EAAE,OACA,EAAS,EAAY,QAAQ,EAAE,KAAK,KAAO,EACzC,EACA,EAEJ,GACE,EAAsB,QAAQ,EAAE,KAAK,IAAM,GAEzC,EADA,GAGV,EACA,YAAa,CACX,QAAS,EACL,EAAE,OACA,EAAS,EAAY,QAAQ,EAAE,KAAK,KAAO,EACzC,EACA,EAEJ,GACE,EAAsB,QAAQ,EAAE,KAAK,IAAM,GAEzC,EADA,IAGR,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,KAAM,CAAE,QAAS,EAAG,WAAY,CAAE,SAAU,EAAQ,QAAS,CAAE,EAC/D,aAAe,GAAU,CACvB,EAAiB,CAAC,EAClB,GAAU,EAAM,OAAO,EACvB,GAAU,EAAM,OAAO,EACvB,IAAoB,CAAC,CACvB,EACA,YAAe,EACT,GAAsB,MACxB,EAAA,GAAA,SAAY,EAAgB,CAAC,GAC3B,EAAkB,IAAA,EAAS,EAC3B,IAAqB,IAAA,EAAS,IAE9B,EAAkB,CAAC,EACnB,IAAqB,CAAC,GAG5B,EACA,YAAc,GAAU,CACtB,EAAiB,CAAC,EAClB,GAAU,EAAM,OAAO,EACvB,GAAU,EAAM,OAAO,CACzB,EACA,iBAAoB,CAClB,EAAiB,IAAA,EAAS,EAC1B,GAAU,IAAA,EAAS,EACnB,GAAU,IAAA,EAAS,EACnB,IAAoB,IAAA,EAAS,CAC/B,WA9DF,CAgEG,EAAE,MACD,EAAA,EAAA,KAAC,EAAA,EAAO,KAAR,CACE,MAAO,EAAE,UAAU,EACnB,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,SAAU,CACR,QAAS,CACP,OAAQ,EACR,EAAG,EAAE,GAAG,EAAE,IAAI,EACd,EAAG,EAAE,EAAE,KAAK,EACZ,KACE,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,EACrC,EAAS,GACR,EAAE,MAED,EAAS,EAAY,QAAQ,EAAE,KAAK,GADpC,EAAA,OAAO,IAEjB,EACA,YAAa,CACX,OAAQ,KAAK,IAAI,EAAE,EAAE,KAAK,EAAI,EAAE,EAAE,GAAG,CAAC,EACtC,EAAG,EAAE,KAAK,IAAI,EAAE,MAAO,EAAE,GAAG,CAAC,EAC7B,EAAG,EAAE,GAAG,EAAE,IAAI,EACd,KACE,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,EACrC,EAAS,GACR,EAAE,MAED,EAAS,EAAY,QAAQ,EAAE,KAAK,GADpC,EAAA,OAAO,KAEf,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,KAAM,CACJ,OAAQ,EACR,EAAG,EAAE,EAAE,KAAK,EACZ,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACD,CAAA,EACC,KACH,IACC,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,MACE,GAAG,EAAE,QAAQ,OAAS,GAClB,GAAG,EAAE,QACL,GAAG,GAAG,EAAE,QAAQ,UAAU,EAAG,EAAU,EAAE,KAE/C,EAAG,EAAE,CAAC,EAAI,EACV,EAAG,EAAE,GAAG,EAAE,IAAI,EACd,MAAO,EAAE,UAAU,EACnB,OAAQ,EAAO,OACf,MAAO,GAAQ,OAAO,OACtB,UAAW,GAAY,OAAO,OAC9B,UAAU,MACD,UACC,UACX,CAAA,EACC,KACH,IAAc,KAAK,IAAI,EAAE,EAAE,KAAK,EAAI,EAAE,EAAE,GAAG,CAAC,EAAI,IAC/C,EAAA,EAAA,KAAC,EAAA,EAAO,KAAR,CACE,MAAO,CACL,WAAY,SACZ,GAAI,GAAQ,mBAAqB,CAAC,CACpC,EACA,WAAA,EAAA,GAAA,IAAc,sBAAuB,GAAY,iBAAiB,EAClE,GAAG,SACH,SAAU,CACR,QAAS,CACP,EAAI,EAAE,GAAG,EAAE,IAAI,EAAe,EAAE,UAAU,EAAI,EAC9C,GAAI,EAAE,EAAE,KAAK,EAAI,EAAE,EAAE,GAAG,GAAK,EAC7B,QAAS,EACT,KACE,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,EACrC,EAAA,EAA2B,EAAS,EAAE,EACrC,EAAE,MAED,EAAA,EACE,EAAS,EAAY,QAAQ,EAAE,KAAK,EACtC,EAHA,EAAA,EAA2B,EAAA,OAAO,IAAI,CAIhD,EACA,YAAa,CACX,EAAI,EAAE,GAAG,EAAE,IAAI,EAAe,EAAE,UAAU,EAAI,EAC9C,GAAI,EAAE,EAAE,KAAK,EAAI,EAAE,EAAE,GAAG,GAAK,EAC7B,KACE,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,EACrC,EAAA,EAA2B,EAAS,EAAE,EACrC,EAAE,MAED,EAAA,EACE,EAAS,EAAY,QAAQ,EAAE,KAAK,EACtC,EAHA,EAAA,EAA2B,EAAA,OAAO,IAAI,EAI9C,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,CACF,EACA,QAAQ,UACR,QAAS,EAAW,cAAgB,UACpC,KAAM,CACJ,QAAS,EACT,WAAY,CAAE,SAAU,EAAQ,QAAS,CAC3C,WAEC,EAAA,EACC,EAAE,KAAO,KAAK,IAAI,EAAE,IAAI,EAAI,EAAE,KAC9B,EACA,EACA,EACA,EACA,EACA,CACF,CACW,CAAA,EACX,IACI,GA5KH,EAAE,KA4KC,CAEd,EACC,IAAW,IAAK,IACf,EAAA,EAAA,KAAC,GAAA,EAAD,CAEE,KAAM,EAAG,KACT,MAAO,EAAG,MACV,EAAG,EAAE,EAAG,KAAe,EACvB,GAAI,EAAI,EACR,GAAI,EAAa,EAAO,MACxB,WAAY,EAAG,WACf,OAAQ,EAAG,OACF,UACC,UACX,EAVM,EAAG,IAUT,CACF,CACc,CAAA,CAAA,EAChB,EAAa,OAAQ,GAAM,EAAE,WAAa,OAAO,EAAE,IAAK,GAAM,EAAE,KAAK,CACrE,GACO,CAAA,EACX,IAAiB,IAAW,GAAU,IACrC,EAAA,EAAA,KAAC,GAAA,EAAD,CACE,KAAM,GACN,KAAM,GACN,KAAM,EACN,KAAM,GACN,gBAAiB,GAAQ,QACzB,UAAW,GAAY,OACxB,CAAA,EACC,KACH,GAAkB,IAAmB,IAAA,IACpC,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,KAAM,EACN,KAAM,EACN,QAAS,EACT,UAAW,GAAY,KACxB,CAAA,EACC,IACJ,CAAA,CAAA,CAEN,CC7VA,SAAgB,EAAe,EAAc,CAC3C,GAAM,CACJ,OACA,aACA,SACA,UACA,mBACA,cAAa,IACb,cAAa,GACb,aAAY,GACZ,cAAa,IACb,UACA,QACA,WACA,cACA,oBACA,yBACA,UACA,mBAAkB,GAClB,aACA,gBACA,aACA,eACA,cAAa,GACb,kBACA,UACA,oBACA,aACA,kBAAiB,GACjB,UACA,YACA,WACA,sBACA,gBAAgB,GAChB,eAAe,GACf,aACA,WAAW,KACX,cAAc,GACd,YAAY,EACZ,QAAQ,QACR,kBACA,kBACA,kBACA,YACA,iBACA,eACA,YAAY,EACZ,SACA,aACA,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,gBAAe,CAAC,EAChB,UAAU,KACV,eAAe,GACf,wBACE,EACE,CAAC,GAAU,KAAA,EAAA,EAAA,UAAwB,CAAC,EACpC,CAAC,EAAW,KAAA,EAAA,EAAA,UAAyB,CAAC,EACtC,CAAC,EAAe,IAAA,EAAA,EAAA,UAAiD,IAAA,EAAS,EAE1E,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,QAAwC,IAAI,EAYlD,OAVA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAiB,IAAI,eAAgB,GAAY,CACrD,GAAY,EAAQ,GAAG,OAAO,aAAe,GAAG,EAChD,GAAa,EAAQ,GAAG,OAAO,cAAgB,GAAG,CACpD,CAAC,EAID,OAHI,EAAS,SACX,EAAe,QAAQ,EAAS,OAAO,MAE5B,EAAe,WAAW,CACzC,EAAG,CAAC,CAAC,GAEH,EAAA,EAAA,MAAC,EAAA,EAAD,CACE,UAAW,GAAY,eACvB,MAAO,GAAQ,eACf,GAAI,EACJ,IAAK,EACL,aAAY,EACK,mBACV,QACG,WACC,YACJ,QACC,UACQ,kBACP,mBAbX,CAeG,GAAc,GAAoB,GAAiB,GAClD,EAAA,EAAA,KAAC,GAAA,YAAD,CACE,OAAQ,CACN,MAAO,GAAQ,MACf,YAAa,GAAQ,WACvB,EACA,WAAY,CACV,MAAO,GAAY,MACnB,YAAa,GAAY,WAC3B,EACY,aACM,mBACX,QACP,cAAe,EAAgB,EAAiB,IAAA,GAChD,aACE,EACI,EAAK,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,IAAM,IAAA,EAAS,EAAE,OAAS,EAC9D,EAAK,IAAK,GAAM,EAAE,IAAI,EAAE,OAAQ,GAAM,IAAM,IAAA,EAAS,EACrD,EAAK,OAAQ,GAAM,IAAM,IAAA,EAAS,EACpC,IAEP,CAAA,EACC,KACH,IAAkB,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,GAAK,EAAK,OAAS,GAC7E,EAAA,EAAA,KAAC,EAAA,yBAAD,CACS,QACW,oBAClB,OAAS,GAAmC,EAAA,OAAO,GAAO,kBAAkB,OAC5E,YAAa,GAAgB,GAAA,EAAO,EAAM,QAAS,EAAI,EACrC,mBACL,cACb,UAAW,GAAY,WACxB,CAAA,EACC,MACJ,EAAA,EAAA,MAAC,EAAA,EAAD,CAAW,IAAK,WAAhB,CACG,EAAK,OAAQ,GAAO,EAAW,CAAC,EAAA,EAAuB,EAAE,IAAI,EAAI,CAAE,EAAE,SAAW,IAC/E,EAAA,EAAA,KAAC,EAAA,EAAD,CAAa,CAAA,EAEd,IACD,GACA,EAAK,OAAQ,GAAO,EAAW,CAAC,EAAA,EAAuB,EAAE,IAAI,EAAI,CAAE,EAAE,OAAS,GAC5E,EAAA,EAAA,KAAC,EAAD,CACgB,eACd,KAAM,EACH,OAAQ,GAAO,EAAW,CAAC,EAAA,EAAuB,EAAE,IAAI,EAAI,CAAE,EAC9D,QAAQ,EAAI,IAAO,EAAkB,EAAI,EAAkB,EAAK,EACnE,SACE,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,EACrC,EACE,CAAC,CAAgB,EACjB,CAAC,EAAA,OAAO,cAAc,WAAW,EAClC,GAAmC,EAAA,OAAO,GAAO,kBAAkB,OAE1E,YACE,EAAK,OAAQ,GAAO,EAAG,KAAK,EAAE,SAAW,EACrC,CAAC,EACD,GAAgB,GAAA,EAAO,EAAM,QAAS,EAAI,EAEjC,gBACf,MAAO,GACP,OAAQ,EACI,cACA,cACD,aACC,aACC,eACF,aACG,gBACF,cACA,cACH,UACU,oBACR,aACD,YACA,WACa,yBACH,sBACR,aACZ,IAAK,IAAa,MAAQ,IAAa,KACtB,kBACA,kBACD,iBACF,eACH,YACC,aACJ,SACR,QACE,IAAY,GACR,CAAE,SAAU,GAAK,KAAM,GAAM,OAAQ,EAAI,EACzC,GAAW,CAAE,SAAU,EAAG,KAAM,GAAM,OAAQ,CAAE,EAEvC,gBACD,gBACL,UACT,OAAQ,GAAsB,QAAU,KACxC,SAAU,GAAsB,UAAY,GAC5C,OAAQ,GAAsB,QAAU,GACxC,OAAQ,GAAsB,QAAU,GACxC,UAAW,GAAsB,WAAa,CAC/C,CAAA,EACC,IACK,IACV,GAAW,GACV,EAAA,EAAA,KAAC,EAAA,YAAD,CACW,UACC,WACH,QACP,OAAQ,CAAE,SAAU,GAAQ,SAAU,OAAQ,GAAQ,MAAO,EAC7D,WAAY,CACV,SAAU,GAAY,SACtB,OAAQ,GAAY,MACtB,CACD,CAAA,EACC,IACU,GAEpB"}

package/dist/WaterfallChart.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-CHPV5EwG-D4pAp7u0.cjs"),k=require("react"),ee=require("./index-DQA8q5sC.cjs"),Kt=require("./numberFormattingFunction-u2iNHL_c.cjs"),ie=require("./Tooltip-C9F3uYG0.cjs"),St=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),vt=require("./Colors.cjs"),oe=require("./AxisTitle-DP_evhbe.cjs"),ne=require("./Axis-BTaS9oPQ.cjs"),se=require("./ReferenceLine-CpU4G01Y.cjs"),re=require("./YTicksAndGridLines-sT3zdCs6.cjs"),le=require("./XAxesLabels-C03jHniq.cjs"),ae=require("./DetailsModal-Du8Fr1QD.cjs"),Dt=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),ce=require("./linear-CgUCbw9F.cjs"),ue=require("./band-VYfcZeJ2.cjs"),Zt=require("./proxy-CqH8m8IQ.cjs"),de=require("./use-in-view-dnRv_qqF.cjs"),xe=require("./index-FXfr51ZM.cjs"),me=require("./ColorLegendWithMouseOver.cjs"),fe=require("./EmptyState-CFmiFPHz.cjs"),Qt=require("./GraphContainer-Cul9b74X.cjs"),he=require("./GraphFooter.cjs"),pe=require("./GraphHeader.cjs"),_t=require("./uniqBy-O05lp2S5.cjs");function ge(i){let t=0,o=0,C=0;for(const p of i)t+=p||0,t>o&&(o=t),t<C&&(C=t);return{max:o,min:C}}function be(i){const t=n.compilerRuntimeExports.c(46),{leftMargin:o,rightMargin:C,topMargin:p,bottomMargin:et,data:g,width:yt,height:Ct,barColor:b,suffix:wt,prefix:it,barPadding:m,showLabels:jt,showValues:W,showTicks:Ot,colorDomain:L,truncateBy:Et,tooltip:ot,onSeriesMouseOver:Mt,refValues:At,selectedColor:F,maxValue:Rt,minValue:Vt,highlightedDataPoints:H,onSeriesMouseClick:nt,labelOrder:y,maxBarThickness:kt,minBarThickness:It,detailsOnClick:q,barAxisTitle:U,noOfTicks:zt,styles:f,classNames:d,dimmedOpacity:$,animate:u,precision:Lt,customLayers:B,naLabel:Ut,hideAxisLine:Yt,locale:st,padZeros:Y}=i,w=o===void 0?20:o,rt=C===void 0?20:C,lt=p===void 0?20:p,at=et===void 0?25:et,Pt=k.useRef(null);let a;t[0]!==u.amount||t[1]!==u.once?(a={once:u.once,amount:u.amount},t[0]=u.amount,t[1]=u.once,t[2]=a):a=t[2];const r=de.useInView(Pt,a),Tt=U?w+30:w;let ct;t[3]!==at||t[4]!==rt||t[5]!==Tt||t[6]!==lt?(ct={top:lt,bottom:at,left:Tt,right:rt},t[3]=at,t[4]=rt,t[5]=Tt,t[6]=lt,t[7]=ct):ct=t[7];const v=ct,{max:Nt,min:Xt}=ge(g.map(Te)),Gt=St.checkIfNullOrUndefined(Rt)?Nt:Rt,l=St.checkIfNullOrUndefined(Vt)?Xt:Vt,[X,ut]=k.useState(void 0),[D,S]=k.useState(void 0),[Z,dt]=k.useState(void 0),[J,K]=k.useState(void 0),j=yt-v.left-v.right,T=Ct-v.top-v.bottom;let Q;if(t[8]!==g||t[9]!==y){const e=new Set,R=g.map((G,te)=>{const Jt=y?`${G.label}`:`${te}`;return e.add(Jt),{...G,id:Jt}}),c=y?y.filter(G=>!e.has(G)):[];Q=[...R,...c.map(Le)],t[8]=g,t[9]=y,t[10]=Q}else Q=t[10];const _=Q;let h;t[11]!==_||t[12]!==y?(h=y??_.map(ke),t[11]=_,t[12]=y,t[13]=h):h=t[13];const xt=h,s=ce.linear().domain([l,Gt]).range([T,0]).nice(),x=ue.band().domain(xt).range([0,It?Math.max(j,It*xt.length):kt?Math.min(j,kt*xt.length):j]).paddingInner(m),qt=s.ticks(zt);let V=0;const Wt=_.map(e=>{const R=V;return V=V+(e.size||0),{...e,start:R,end:V}}),mt=d?.xAxis?.axis,ft=d?.yAxis?.labels;let I;t[14]!==ft||t[15]!==mt?(I={axis:mt,label:ft},t[14]=ft,t[15]=mt,t[16]=I):I=t[16];const Ft=f?.xAxis?.axis,tt=f?.yAxis?.labels;let $t;t[17]!==Ft||t[18]!==tt?($t={axis:Ft,label:tt},t[17]=Ft,t[18]=tt,t[19]=$t):$t=t[19];const ht=0-w-15,Ht=T/2,pt=f?.yAxis?.title,Bt=d?.yAxis?.title;let z;t[20]!==U||t[21]!==ht||t[22]!==Ht||t[23]!==pt||t[24]!==Bt?(z=n.jsxRuntimeExports.jsx(oe.AxisTitle,{x:ht,y:Ht,style:pt,className:Bt,text:U,rotate90:!0}),t[20]=U,t[21]=ht,t[22]=Ht,t[23]=pt,t[24]=Bt,t[25]=z):z=t[25];let P;t[26]!==B?(P=B.filter(Me).map(Ee),t[26]=B,t[27]=P):P=t[27];const gt=xe.AnimatePresence,bt=Wt.map((e,R)=>St.checkIfNullOrUndefined(x(e.id))?null:n.jsxRuntimeExports.jsxs(Zt.motion.g,{className:"undp-viz-g-with-hover",initial:"initial",animate:r?"whileInView":"initial",variants:{initial:{opacity:F?e.color&&b[L.indexOf(e.color)]===F?1:$:H?H.indexOf(e.label)!==-1?.85:$:.85},whileInView:{opacity:F?e.color&&b[L.indexOf(e.color)]===F?1:$:H?H.indexOf(e.label)!==-1?.85:$:.85,transition:{duration:u.duration}}},exit:{opacity:0,transition:{duration:u.duration}},onMouseEnter:c=>{ut(e),K(c.clientY),dt(c.clientX),Mt?.(e)},onClick:()=>{(nt||q)&&(ee.isEqual(D,e)?(S(void 0),nt?.(void 0)):(S(e),nt?.(e)))},onMouseMove:c=>{ut(e),K(c.clientY),dt(c.clientX)},onMouseLeave:()=>{ut(void 0),dt(void 0),K(void 0),Mt?.(void 0)},children:[e.size?n.jsxRuntimeExports.jsx(Zt.motion.rect,{width:x.bandwidth(),initial:"initial",animate:r?"whileInView":"initial",variants:{initial:{height:0,x:x(`${e.id}`),y:s(e.start),fill:g.filter(Oe).length===0?b[0]:e.color?b[L.indexOf(e.color)]:vt.Colors.gray},whileInView:{height:Math.abs(s(e.start)-s(e.end)),y:s(Math.max(e.start,e.end)),x:x(`${e.id}`),fill:g.filter(je).length===0?b[0]:e.color?b[L.indexOf(e.color)]:vt.Colors.gray,transition:{duration:u.duration}}},exit:{height:0,y:s(e.start),transition:{duration:u.duration}}}):null,jt?n.jsxRuntimeExports.jsx(le.XAxesLabels,{value:`${e.label}`.length<Et?`${e.label}`:`${`${e.label}`.substring(0,Et)}...`,y:s(0)+5,x:x(`${e.id}`),width:x.bandwidth(),height:v.bottom,style:f?.xAxis?.labels,className:d?.xAxis?.labels,alignment:"top",animate:u,isInView:r}):null,W&&Math.abs(s(e.start)-s(e.end))>16?n.jsxRuntimeExports.jsx(Zt.motion.text,{style:{textAnchor:"middle",...f?.graphObjectValues||{}},className:n.mo("graph-value text-sm",d?.graphObjectValues),dy:"0.33em",variants:{initial:{x:x(`${e.id}`)+x.bandwidth()/2,y:(s(e.start)+s(e.end))/2,opacity:0,fill:g.filter(we).length===0?Dt.getTextColorBasedOnBgColor(b[0]):e.color?Dt.getTextColorBasedOnBgColor(b[L.indexOf(e.color)]):Dt.getTextColorBasedOnBgColor(vt.Colors.gray)},whileInView:{x:x(`${e.id}`)+x.bandwidth()/2,y:(s(e.start)+s(e.end))/2,fill:g.filter(Ce).length===0?Dt.getTextColorBasedOnBgColor(b[0]):e.color?Dt.getTextColorBasedOnBgColor(b[L.indexOf(e.color)]):Dt.getTextColorBasedOnBgColor(vt.Colors.gray),opacity:1,transition:{duration:u.duration}}},initial:"initial",animate:r?"whileInView":"initial",exit:{opacity:0,transition:{duration:u.duration}},children:Kt.numberFormattingFunction(e.size?Math.abs(e.size):e.size,Ut,Lt,it,wt,st,Y)}):null]},e.label)),N=At?n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:At.map((e,R)=>n.jsxRuntimeExports.jsx(se.RefLineY,{text:e.text,color:e.color,y:s(e.value),x1:0-w,x2:j+v.right,classNames:e.classNames,styles:e.styles,animate:u,isInView:r},R))}):null;let O;t[28]!==gt||t[29]!==bt||t[30]!==N?(O=n.jsxRuntimeExports.jsxs(gt,{children:[bt,N]}),t[28]=gt,t[29]=bt,t[30]=N,t[31]=O):O=t[31];let E;t[32]!==B?(E=B.filter(ye).map(ve),t[32]=B,t[33]=E):E=t[33];let M;t[34]!==d?.tooltip||t[35]!==Z||t[36]!==J||t[37]!==X||t[38]!==f?.tooltip||t[39]!==ot?(M=X&&ot&&Z&&J?n.jsxRuntimeExports.jsx(ie.Tooltip,{data:X,body:ot,xPos:Z,yPos:J,backgroundStyle:f?.tooltip,className:d?.tooltip}):null,t[34]=d?.tooltip,t[35]=Z,t[36]=J,t[37]=X,t[38]=f?.tooltip,t[39]=ot,t[40]=M):M=t[40];let A;return t[41]!==d?.modal||t[42]!==q||t[43]!==D||t[44]!==S?(A=q&&D!==void 0?n.jsxRuntimeExports.jsx(ae.DetailsModal,{body:q,data:D,setData:S,className:d?.modal}):null,t[41]=d?.modal,t[42]=q,t[43]=D,t[44]=S,t[45]=A):A=t[45],n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(Zt.motion.svg,{ref:Pt,width:`${yt}px`,height:`${Ct}px`,viewBox:`0 0 ${yt} ${Ct}`,direction:"ltr",children:n.jsxRuntimeExports.jsxs("g",{transform:`translate(${v.left},${v.top})`,children:[n.jsxRuntimeExports.jsx(ne.Axis,{y1:s(l<0?0:l),y2:s(l<0?0:l),x1:0-w,x2:j+v.right,hideAxisLine:Yt,label:Ot?Kt.numberFormattingFunction(l<0?0:l,void 0,Lt,it,wt,st,Y):void 0,labelPos:{x:0-w,dx:0,dy:Gt<0?"1em":-5,y:s(l<0?0:l)},classNames:I,styles:$t}),Ot?n.jsxRuntimeExports.jsx(re.YTicksAndGridLines,{values:qt.filter(Re),y:qt.filter(Ae).map(e=>s(e)),x1:0-w,x2:j+v.right,styles:{gridLines:f?.yAxis?.gridLines,labels:f?.yAxis?.labels},classNames:{gridLines:d?.yAxis?.gridLines,labels:d?.yAxis?.labels},suffix:wt,prefix:it,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:Lt,locale:st,padZeros:Y}):null,z,P,O,E]})}),M,A]})}function ve(i){return i.layer}function ye(i){return i.position==="after"}function Ce(i){return i.color}function we(i){return i.color}function je(i){return i.color}function Oe(i){return i.color}function Ee(i){return i.layer}function Me(i){return i.position==="before"}function Ae(i){return i!==0}function Re(i){return i!==0}function ke(i){return`${i.id}`}function Le(i){return{id:i,label:i,color:null,size:null}}function Te(i){return i.size}function Ne(i){const t=n.compilerRuntimeExports.c(101),{data:o,graphTitle:C,colors:p,sources:et,graphDescription:g,barPadding:yt,showValues:Ct,showTicks:b,truncateBy:wt,height:it,width:m,footNote:jt,colorDomain:W,colorLegendTitle:Ot,highlightedDataPoints:L,padding:Et,backgroundColor:ot,topMargin:Mt,bottomMargin:At,leftMargin:F,rightMargin:Rt,showLabels:Vt,relativeHeight:H,tooltip:nt,onSeriesMouseOver:y,refValues:kt,showColorScale:It,graphID:q,maxValue:U,minValue:zt,onSeriesMouseClick:f,graphDownload:d,dataDownload:$,labelOrder:u,language:Lt,showNAColor:B,minHeight:Ut,theme:Yt,maxBarThickness:st,maxNumberOfBars:Y,minBarThickness:w,ariaLabel:rt,detailsOnClick:lt,barAxisTitle:at,noOfTicks:Pt,styles:a,classNames:r,filterNA:Tt,animate:ct,dimmedOpacity:v,customLayers:Nt,naLabel:Xt,hideAxisLine:Gt,numberDisplayOptions:l}=i,X=yt===void 0?.25:yt,ut=Ct===void 0?!0:Ct,D=b===void 0?!0:b,S=wt===void 0?999:wt,Z=ot===void 0?!1:ot,dt=Vt===void 0?!0:Vt,J=It===void 0?!0:It,K=d===void 0?!1:d,j=$===void 0?!1:$,T=Lt===void 0?"en":Lt,Q=B===void 0?!0:B,_=Ut===void 0?0:Ut,h=Yt===void 0?"light":Yt,xt=Pt===void 0?5:Pt,s=Tt===void 0?!0:Tt,x=ct===void 0?!1:ct,qt=v===void 0?.3:v;let V;t[0]!==Nt?(V=Nt===void 0?[]:Nt,t[0]=Nt,t[1]=V):V=t[1];const Wt=V,mt=Xt===void 0?"NA":Xt,ft=Gt===void 0?!1:Gt,[I,Ft]=k.useState(0),[tt,$t]=k.useState(0),[ht,Ht]=k.useState(void 0),pt=k.useRef(null),Bt=k.useRef(null);let z,P;t[2]===Symbol.for("react.memo_cache_sentinel")?(z=()=>{const c=new ResizeObserver(G=>{Ft(G[0].target.clientWidth||620),$t(G[0].target.clientHeight||480)});return pt.current&&c.observe(pt.current),()=>c.disconnect()},P=[],t[2]=z,t[3]=P):(z=t[2],P=t[3]),k.useEffect(z,P);const gt=r?.graphContainer,bt=a?.graphContainer;let N;t[4]!==r?.description||t[5]!==r?.title||t[6]!==o||t[7]!==j||t[8]!==g||t[9]!==K||t[10]!==C||t[11]!==a?.description||t[12]!==a?.title||t[13]!==m?(N=C||g||K||j?n.jsxRuntimeExports.jsx(pe.GraphHeader,{styles:{title:a?.title,description:a?.description},classNames:{title:r?.title,description:r?.description},graphTitle:C,graphDescription:g,width:m,graphDownload:K?Bt:void 0,dataDownload:j?o.map(ze).filter(Ie).length>0?o.map(Ve).filter(Se):o.filter(De):null}):null,t[4]=r?.description,t[5]=r?.title,t[6]=o,t[7]=j,t[8]=g,t[9]=K,t[10]=C,t[11]=a?.description,t[12]=a?.title,t[13]=m,t[14]=N):N=t[14];let O;t[15]!==r?.colorLegend||t[16]!==W||t[17]!==Ot||t[18]!==p||t[19]!==o||t[20]!==J||t[21]!==Q||t[22]!==h||t[23]!==m?(O=J&&o.filter(Be).length!==0&&o.length>0?n.jsxRuntimeExports.jsx(me.ColorLegendWithMouseOver,{width:m,colorLegendTitle:Ot,colors:p||vt.Colors[h].categoricalColors.colors,colorDomain:W||_t.uniqBy(o,"color",!0),setSelectedColor:Ht,showNAColor:Q,className:r?.colorLegend}):null,t[15]=r?.colorLegend,t[16]=W,t[17]=Ot,t[18]=p,t[19]=o,t[20]=J,t[21]=Q,t[22]=h,t[23]=m,t[24]=O):O=t[24];let E;t[25]!==o||t[26]!==s?(E=o.filter(c=>s?!St.checkIfNullOrUndefined(c.size):c).length===0&&n.jsxRuntimeExports.jsx(fe.EmptyState,{}),t[25]=o,t[26]=s,t[27]=E):E=t[27];let M;t[28]!==x||t[29]!==at||t[30]!==X||t[31]!==At||t[32]!==r||t[33]!==W||t[34]!==p||t[35]!==Wt||t[36]!==o||t[37]!==lt||t[38]!==qt||t[39]!==s||t[40]!==ft||t[41]!==L||t[42]!==u||t[43]!==T||t[44]!==F||t[45]!==st||t[46]!==Y||t[47]!==U||t[48]!==w||t[49]!==zt||t[50]!==mt||t[51]!==xt||t[52]!==l?.locale||t[53]!==l?.padZeros||t[54]!==l?.precision||t[55]!==l?.prefix||t[56]!==l?.suffix||t[57]!==f||t[58]!==y||t[59]!==kt||t[60]!==Rt||t[61]!==ht||t[62]!==dt||t[63]!==D||t[64]!==ut||t[65]!==a||t[66]!==tt||t[67]!==I||t[68]!==h||t[69]!==nt||t[70]!==Mt||t[71]!==S?(M=I&&tt&&o.filter(c=>s?!St.checkIfNullOrUndefined(c.size):c).length>0?n.jsxRuntimeExports.jsx(be,{hideAxisLine:ft,data:o.filter(c=>s?!St.checkIfNullOrUndefined(c.size):c).filter((c,G)=>Y?G<Y:!0),barColor:o.filter($e).length===0?p?[p]:[vt.Colors.primaryColors["blue-600"]]:p||vt.Colors[h].categoricalColors.colors,colorDomain:o.filter(qe).length===0?[]:W||_t.uniqBy(o,"color",!0),selectedColor:ht,width:I,height:tt,barPadding:X,showValues:ut,showTicks:D,leftMargin:F,rightMargin:Rt,topMargin:Mt,bottomMargin:At,truncateBy:S,showLabels:dt,tooltip:nt,onSeriesMouseOver:y,refValues:kt,maxValue:U,minValue:zt,highlightedDataPoints:L,onSeriesMouseClick:f,labelOrder:u,rtl:T==="he"||T==="ar",maxBarThickness:st,minBarThickness:w,detailsOnClick:lt,barAxisTitle:at,noOfTicks:xt,classNames:r,styles:a,animate:x===!0?{duration:.5,once:!0,amount:.5}:x||{duration:0,once:!0,amount:0},dimmedOpacity:qt,customLayers:Wt,naLabel:mt,locale:l?.locale||"en",padZeros:l?.padZeros||!1,suffix:l?.suffix||"",prefix:l?.prefix||"",precision:l?.precision??2}):null,t[28]=x,t[29]=at,t[30]=X,t[31]=At,t[32]=r,t[33]=W,t[34]=p,t[35]=Wt,t[36]=o,t[37]=lt,t[38]=qt,t[39]=s,t[40]=ft,t[41]=L,t[42]=u,t[43]=T,t[44]=F,t[45]=st,t[46]=Y,t[47]=U,t[48]=w,t[49]=zt,t[50]=mt,t[51]=xt,t[52]=l?.locale,t[53]=l?.padZeros,t[54]=l?.precision,t[55]=l?.prefix,t[56]=l?.suffix,t[57]=f,t[58]=y,t[59]=kt,t[60]=Rt,t[61]=ht,t[62]=dt,t[63]=D,t[64]=ut,t[65]=a,t[66]=tt,t[67]=I,t[68]=h,t[69]=nt,t[70]=Mt,t[71]=S,t[72]=M):M=t[72];let A;t[73]!==E||t[74]!==M?(A=n.jsxRuntimeExports.jsxs(Qt.GraphArea,{ref:pt,children:[E,M]}),t[73]=E,t[74]=M,t[75]=A):A=t[75];let e;t[76]!==r?.footnote||t[77]!==r?.source||t[78]!==jt||t[79]!==et||t[80]!==a?.footnote||t[81]!==a?.source||t[82]!==m?(e=et||jt?n.jsxRuntimeExports.jsx(he.GraphFooter,{sources:et,footNote:jt,width:m,styles:{footnote:a?.footnote,source:a?.source},classNames:{footnote:r?.footnote,source:r?.source}}):null,t[76]=r?.footnote,t[77]=r?.source,t[78]=jt,t[79]=et,t[80]=a?.footnote,t[81]=a?.source,t[82]=m,t[83]=e):e=t[83];let R;return t[84]!==rt||t[85]!==Z||t[86]!==q||t[87]!==it||t[88]!==T||t[89]!==_||t[90]!==Et||t[91]!==H||t[92]!==gt||t[93]!==bt||t[94]!==N||t[95]!==O||t[96]!==A||t[97]!==e||t[98]!==h||t[99]!==m?(R=n.jsxRuntimeExports.jsxs(Qt.GraphContainer,{className:gt,style:bt,id:q,ref:Bt,"aria-label":rt,backgroundColor:Z,theme:h,language:T,minHeight:_,width:m,height:it,relativeHeight:H,padding:Et,children:[N,O,A,e]}),t[84]=rt,t[85]=Z,t[86]=q,t[87]=it,t[88]=T,t[89]=_,t[90]=Et,t[91]=H,t[92]=gt,t[93]=bt,t[94]=N,t[95]=O,t[96]=A,t[97]=e,t[98]=h,t[99]=m,t[100]=R):R=t[100],R}function qe(i){return i.color}function $e(i){return i.color}function Be(i){return i.color}function De(i){return i!==void 0}function Se(i){return i!==void 0}function Ve(i){return i.data}function Ie(i){return i!==void 0}function ze(i){return i.data}exports.WaterfallChart=Ne;
-//# sourceMappingURL=WaterfallChart.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./WaterfallChart-cJ5pGsDu.cjs`);exports.WaterfallChart=e.t;

package/dist/WaterfallChart.d.ts

@@ -1,213 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AnimateDataType {
-    duration: number;
-    once: boolean;
-    amount: 'some' | 'all' | number;
-}
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: WaterfallChartDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Color or array of colors for bars */
-    colors?: string | string[];
-    /** Domain of colors for the graph */
-    colorDomain?: string[];
-    /** Title for the color legend */
-    colorLegendTitle?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Left margin of the graph */
-    leftMargin?: number;
-    /** Right margin of the graph */
-    rightMargin?: number;
-    /** Top margin of the graph */
-    topMargin?: number;
-    /** Bottom margin of the graph */
-    bottomMargin?: number;
-    /** Padding between bars */
-    barPadding?: number;
-    /** Maximum thickness of bars */
-    maxBarThickness?: number;
-    /** Minimum thickness of bars */
-    minBarThickness?: number;
-    /** Maximum number of bars shown in the graph */
-    maxNumberOfBars?: number;
-    /** Maximum value for the chart */
-    maxValue?: number;
-    /** Minimum value for the chart */
-    minValue?: number;
-    /** Truncate labels by specified length */
-    truncateBy?: number;
-    /** Reference values for comparison */
-    refValues?: ReferenceDataType[];
-    /** Number of ticks on the axis */
-    noOfTicks?: number;
-    /** Toggle visibility of labels */
-    showLabels?: boolean;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Custom order for labels */
-    labelOrder?: string[];
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Toggle visibility of axis ticks */
-    showTicks?: boolean;
-    /** Toggle visibility of axis line for the  main axis */
-    hideAxisLine?: boolean;
-    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
-    showColorScale?: boolean;
-    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
-    showNAColor?: boolean;
-    /** Data points to highlight. Use the label value from data to highlight the data point */
-    highlightedDataPoints?: (string | number)[];
-    /** Defines the opacity of the non-highlighted data */
-    dimmedOpacity?: number;
-    /** Title for the bar axis */
-    barAxisTitle?: string;
-    /** Toggles if data point which are undefined or has value null are filtered out.  */
-    filterNA?: boolean;
-    /** Toggles if the graph animates in when loaded.  */
-    animate?: boolean | AnimateDataType;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    detailsOnClick?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface ReferenceDataType {
-    value: number | null;
-    text: string;
-    color?: string;
-    styles?: {
-        line?: React.CSSProperties;
-        text?: React.CSSProperties;
-    };
-    classNames?: {
-        line?: string;
-        text?: string;
-    };
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-export declare function WaterfallChart(props: Props): JSX.Element;
-
-declare interface WaterfallChartDataType {
-    label: string | number;
-    size?: number | null;
-    color?: string | null;
-    data?: object;
-}
-
-export { }
+export * from './Components/Graphs/WaterfallChart/index'
+export {}