@undp/data-viz 2.6.0 → 2.6.1

package/dist/StackedAreaChart-CtlLKKP4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedAreaChart-CtlLKKP4.js","names":[],"sources":["../src/Components/Graphs/StackedAreaChart/Graph.tsx","../src/Components/Graphs/StackedAreaChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { bisectCenter } from 'd3-array';\nimport { scaleLinear, scaleTime } from 'd3-scale';\nimport { pointer, select } from 'd3-selection';\nimport {\n  area,\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport sum from 'lodash.sum';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Annotation } from '@/Components/Elements/Annotations';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { HighlightArea } from '@/Components/Elements/HighlightArea';\nimport { CustomArea } from '@/Components/Elements/HighlightArea/customArea';\nimport { RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  MultiLineChartDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getLineEndPoint } from '@/Utils/getLineEndPoint';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: MultiLineChartDataType[];\n  colors: string[];\n  width: number;\n  height: number;\n  dateFormat: string;\n  noOfXTicks: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  yAxisTitle?: string;\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  highlightAreaSettings: HighlightAreaSettingsDataType[];\n  maxValue?: number;\n  minValue?: number;\n  rtl: boolean;\n  annotations: AnnotationSettingsDataType[];\n  customHighlightAreaSettings: CustomHighlightAreaSettingsDataType[];\n  noOfYTicks: number;\n  prefix: string;\n  suffix: string;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  animate: AnimateDataType;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    colors,\n    dateFormat,\n    noOfXTicks,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    yAxisTitle,\n    tooltip,\n    onSeriesMouseOver,\n    highlightAreaSettings,\n    refValues,\n    minValue,\n    maxValue,\n    rtl,\n    annotations,\n    customHighlightAreaSettings,\n    noOfYTicks,\n    prefix,\n    suffix,\n    curveType,\n    styles,\n    classNames,\n    precision,\n    customLayers,\n    animate,\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 curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: yAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n  const MouseoverRectRef = useRef(null);\n  const dataFormatted = orderBy(\n    data.map((d) => ({\n      ...d,\n      date: parse(`${d.date}`, dateFormat, new Date()),\n    })),\n    ['date'],\n    ['asc'],\n  );\n  const highlightAreaSettingsFormatted = highlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: [\n      d.coordinates[0] === null ? null : parse(`${d.coordinates[0]}`, dateFormat, new Date()),\n      d.coordinates[1] === null ? null : parse(`${d.coordinates[1]}`, dateFormat, new Date()),\n    ],\n  }));\n  const customHighlightAreaSettingsFormatted = customHighlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: d.coordinates.map((el, j) =>\n      j % 2 === 0 ? parse(`${el}`, dateFormat, new Date()) : (el as number),\n    ),\n  }));\n  const dataArray = dataFormatted[0].y.map((_d, i) => {\n    return dataFormatted.map((el) => ({\n      date: el.date,\n      y0: i === 0 ? 0 : sum(el.y.filter((_element, k) => k < i)),\n      y1: sum(el.y.filter((_element, k) => k <= i)),\n    }));\n  });\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = dataFormatted[0].date;\n  const maxYear = dataFormatted[dataFormatted.length - 1].date;\n  const minParam = checkIfNullOrUndefined(minValue) ? 0 : (minValue as number);\n  const maxParam: number = checkIfNullOrUndefined(maxValue)\n    ? Math.max(...data.map((d) => sum(d.y) || 0))\n    : (maxValue as number);\n\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear().domain([minParam, maxParam]).range([graphHeight, 0]).nice();\n\n  const areaShape = area()\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    .x((d: any) => x(d.date))\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    .y0((d: any) => y(d.y0))\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    .y1((d: any) => y(d.y1))\n    .curve(curve);\n  const yTicks = y.ticks(noOfYTicks);\n  const xTicks = x.ticks(noOfXTicks);\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const mousemove = (event: any) => {\n      const selectedData =\n        dataFormatted[\n          bisectCenter(\n            dataFormatted.map((d) => d.date),\n            x.invert(pointer(event)[0]),\n            0,\n          )\n        ];\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n      setEventY(event.clientY);\n      setEventX(event.clientX);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n      onSeriesMouseOver?.(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n    onSeriesMouseOver?.(undefined);\n  }, [x, dataFormatted, onSeriesMouseOver]);\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        <AnimatePresence>\n          <motion.g transform={`translate(${margin.left},${margin.top})`}>\n            <HighlightArea\n              areaSettings={highlightAreaSettingsFormatted}\n              width={graphWidth}\n              height={graphHeight}\n              scale={x}\n              animate={animate}\n              isInView={isInView}\n            />\n            <CustomArea\n              animate={animate}\n              areaSettings={customHighlightAreaSettingsFormatted}\n              scaleX={x}\n              scaleY={y}\n              isInView={isInView}\n            />\n            <g>\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              <Axis\n                y1={y(minParam < 0 ? 0 : minParam)}\n                y2={y(minParam < 0 ? 0 : minParam)}\n                x1={0 - leftMargin}\n                x2={graphWidth + margin.right}\n                label={numberFormattingFunction(\n                  minParam < 0 ? 0 : minParam,\n                  undefined,\n                  precision,\n                  prefix,\n                  suffix,\n                  locale,\n                  padZeros,\n                )}\n                labelPos={{\n                  x: 0 - leftMargin,\n                  dx: 0,\n                  dy: maxParam < 0 ? '1em' : -5,\n                  y: y(minParam < 0 ? 0 : minParam),\n                }}\n                classNames={{\n                  axis: classNames?.xAxis?.axis,\n                  label: classNames?.yAxis?.labels,\n                }}\n                styles={{\n                  axis: styles?.xAxis?.axis,\n                  label: styles?.yAxis?.labels,\n                }}\n              />\n              <AxisTitle\n                x={0 - leftMargin - 15}\n                y={graphHeight / 2}\n                style={styles?.yAxis?.title}\n                className={classNames?.yAxis?.title}\n                text={yAxisTitle}\n                rotate90\n              />\n            </g>\n            <XTicksAndGridLines\n              values={xTicks.map((d) => format(d, dateFormat))}\n              x={xTicks.map((d) => x(d))}\n              y1={0}\n              y2={graphHeight}\n              styles={{\n                gridLines: styles?.xAxis?.gridLines,\n                labels: styles?.xAxis?.labels,\n              }}\n              classNames={{\n                gridLines: cn('opacity-0', classNames?.xAxis?.gridLines),\n                labels: cn(\n                  'fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[8px] sm:text-[9px] md:text-[10px] lg:text-xs',\n                  classNames?.xAxis?.labels,\n                ),\n              }}\n              suffix={suffix}\n              prefix={prefix}\n              labelType='primary'\n              showGridLines\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n            {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n            <motion.g>\n              {dataArray.map((d, i) => {\n                return (\n                  <motion.path\n                    // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                    key={i}\n                    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                    d={areaShape(d as any) as string}\n                    exit={{\n                      opacity: 0,\n                      transition: { duration: animate.duration },\n                    }}\n                    variants={{\n                      initial: {\n                        d: areaShape(\n                          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                          d.map((el) => ({ ...el, y0: 0, y1: 0 })) as any,\n                        ) as string as string,\n                        opacity: 0,\n                      },\n                      whileInView: {\n                        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                        d: areaShape(d as any) as string,\n                        opacity: 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    style={{\n                      fill: colors[i],\n                      opacity: 0.8,\n                    }}\n                  />\n                );\n              })}\n              {mouseOverData ? (\n                <line\n                  y1={0}\n                  y2={graphHeight}\n                  x1={x(mouseOverData.date)}\n                  x2={x(mouseOverData.date)}\n                  className={cn(\n                    'undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100',\n                    classNames?.mouseOverLine,\n                  )}\n                  style={styles?.mouseOverLine}\n                />\n              ) : null}\n            </motion.g>\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            <g>\n              {annotations.map((d) => {\n                const endPoints = getLineEndPoint(\n                  {\n                    x: d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0),\n                    y: d.yCoordinate\n                      ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                      : 0 + (d.yOffset || 0) - 8,\n                  },\n                  {\n                    x: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                    y: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                  },\n                  checkIfNullOrUndefined(d.connectorRadius) ? 3.5 : (d.connectorRadius as number),\n                );\n                const connectorSettings = d.showConnector\n                  ? {\n                      y1: endPoints.y,\n                      x1: endPoints.x,\n                      y2: d.yCoordinate\n                        ? y(d.yCoordinate as number) + (d.yOffset || 0)\n                        : 0 + (d.yOffset || 0),\n                      x2: d.xCoordinate\n                        ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                        : 0 + (d.xOffset || 0),\n                      cx: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                      cy: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                      circleRadius: checkIfNullOrUndefined(d.connectorRadius)\n                        ? 3.5\n                        : (d.connectorRadius as number),\n                      strokeWidth: d.showConnector === true ? 2 : Math.min(d.showConnector || 0, 1),\n                    }\n                  : undefined;\n                const labelSettings = {\n                  y: d.yCoordinate\n                    ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                    : 0 + (d.yOffset || 0) - 8,\n                  x: rtl\n                    ? 0\n                    : d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0),\n                  width: rtl\n                    ? d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0)\n                    : graphWidth +\n                      margin.right -\n                      (d.xCoordinate\n                        ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                        : 0 + (d.xOffset || 0)),\n                  maxWidth: d.maxWidth,\n                  fontWeight: d.fontWeight,\n                  align: d.align,\n                };\n                return (\n                  <Annotation\n                    key={d.text}\n                    color={d.color}\n                    connectorsSettings={connectorSettings}\n                    labelSettings={labelSettings}\n                    text={d.text}\n                    classNames={d.classNames}\n                    styles={d.styles}\n                    animate={animate}\n                    isInView={isInView}\n                  />\n                );\n              })}\n            </g>\n            {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n            <rect\n              ref={MouseoverRectRef}\n              style={{\n                fill: 'none',\n                pointerEvents: 'all',\n              }}\n              width={graphWidth}\n              height={graphHeight}\n            />\n          </motion.g>\n        </AnimatePresence>\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    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  AreaChartDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: AreaChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** array of colors for different lines and areas */\n  colors?: 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\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** No. of ticks on the x-axis  */\n  noOfXTicks?: number;\n  /** No. of ticks on the y-axis  */\n  noOfYTicks?: number;\n\n  // Graph Parameters\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Title for the Y-axis */\n  yAxisTitle?: string;\n  /** Annotations on the chart */\n  annotations?: AnnotationSettingsDataType[];\n  /** Highlighted area(square) on the chart  */\n  highlightAreaSettings?: HighlightAreaSettingsDataType[];\n  /** Highlighted area(custom shape) on the chart  */\n  customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];\n  /** Curve type for the line */\n  curveType?: CurveTypes;\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  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\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  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_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 AreaChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors = Colors.light.categoricalColors.colors,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks = 10,\n    dateFormat = 'yyyy',\n    colorDomain,\n    padding,\n    backgroundColor = false,\n    colorLegendTitle,\n    leftMargin = 50,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    highlightAreaSettings = [],\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    refValues = [],\n    graphID,\n    minValue,\n    maxValue,\n    graphDownload = false,\n    dataDownload = false,\n    showColorScale = true,\n    language = 'en',\n    minHeight = 0,\n    annotations = [],\n    customHighlightAreaSettings = [],\n    theme = 'light',\n    ariaLabel,\n    yAxisTitle,\n    noOfYTicks = 5,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n    animate = false,\n    numberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\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 !== false && data.length > 0 ? (\n        <ColorLegend\n          colorDomain={colorDomain}\n          colors={colors}\n          colorLegendTitle={colorLegendTitle}\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          <Graph\n            data={data}\n            colors={colors}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            noOfXTicks={noOfXTicks}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            highlightAreaSettings={highlightAreaSettings}\n            refValues={refValues}\n            minValue={minValue}\n            maxValue={maxValue}\n            rtl={language === 'he' || language === 'ar'}\n            annotations={annotations}\n            customHighlightAreaSettings={customHighlightAreaSettings}\n            yAxisTitle={yAxisTitle}\n            noOfYTicks={noOfYTicks}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/StackedAreaChart-Du-YaLNf.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Colors.cjs`),r=require(`./ColorLegend.cjs`),ee=require(`./GraphFooter.cjs`),i=require(`./GraphHeader.cjs`),a=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),o=require(`./lodash.sum-bWhlZLUV.cjs`),s=require(`./GraphContainer-7xAPK4Tb.cjs`),c=require(`./parse-C718o4YM.cjs`),l=require(`./lodash.orderby-Us2PHq2D.cjs`),te=require(`./EmptyState-Bq7ZJmZB.cjs`),ne=require(`./init-BTypmXMF.cjs`),u=require(`./linear-B93YyHf_.cjs`),d=require(`./time-B9tsaA4g.cjs`),f=require(`./proxy-DaRMphjR.cjs`),re=require(`./AnimatePresence-CapU-Sxd.cjs`),p=require(`./use-in-view-C4EPQfwM.cjs`),m=require(`./Axis-BbfI4T5K.cjs`),h=require(`./AxisTitle-Co2DmqOy.cjs`),g=require(`./numberFormattingFunction-Caf5NyIo.cjs`),ie=require(`./XTicksAndGridLines-8v1W02Pd.cjs`),_=require(`./YTicksAndGridLines-CRW_R845.cjs`),ae=require(`./ReferenceLine-Dltt-xtO.cjs`),oe=require(`./Tooltip-CO_iOj_w.cjs`),se=require(`./line-DoUnRqpS.cjs`),ce=require(`./area-Cwt2IPSp.cjs`),v=require(`./step-C_FLQezZ.cjs`),le=require(`./select-CZVfejpg.cjs`),ue=require(`./pointer-nSSkgdlX.cjs`),y=require(`./getLineEndPoint-CahgY2dz.cjs`),de=require(`./HighlightArea-CJ2XwY67.cjs`);let b=require(`@undp/design-system-react/cn`),x=require(`react`);var S=e.a(l.t(),1),C=e.a(o.t(),1),w=t.t();function fe(e){let{data:t,width:n,height:r,colors:ee,dateFormat:i,noOfXTicks:o,rightMargin:s,leftMargin:l,topMargin:te,bottomMargin:fe,yAxisTitle:T,tooltip:E,onSeriesMouseOver:D,highlightAreaSettings:O,refValues:k,minValue:A,maxValue:j,rtl:M,annotations:pe,customHighlightAreaSettings:me,noOfYTicks:N,prefix:P,suffix:F,curveType:I,styles:L,classNames:R,precision:z,customLayers:B,animate:V,locale:H,padZeros:U}=e,he=(0,x.useRef)(null),W=p.t(he,{once:V.once,amount:V.amount}),ge=I===`linear`?se.i:I===`step`?v.r:I===`stepAfter`?v.t:I===`stepBefore`?v.n:v.i,[G,_e]=(0,x.useState)(void 0),[ve,ye]=(0,x.useState)(void 0),[be,xe]=(0,x.useState)(void 0),K={top:te,bottom:fe,left:T?l+30:l,right:s},Se=(0,x.useRef)(null),q=(0,S.default)(t.map(e=>({...e,date:c.t(`${e.date}`,i,new Date)})),[`date`],[`asc`]),Ce=O.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:c.t(`${e.coordinates[0]}`,i,new Date),e.coordinates[1]===null?null:c.t(`${e.coordinates[1]}`,i,new Date)]})),we=me.map(e=>({...e,coordinates:e.coordinates.map((e,t)=>t%2==0?c.t(`${e}`,i,new Date):e)})),Te=q[0].y.map((e,t)=>q.map(e=>({date:e.date,y0:t===0?0:(0,C.default)(e.y.filter((e,n)=>n<t)),y1:(0,C.default)(e.y.filter((e,n)=>n<=t))}))),J=n-K.left-K.right,Y=r-K.top-K.bottom,Ee=q[0].date,De=q[q.length-1].date,X=a.t(A)?0:A,Oe=a.t(j)?Math.max(...t.map(e=>(0,C.default)(e.y)||0)):j,Z=d.t().domain([Ee,De]).range([0,J]),Q=u.t().domain([X,Oe]).range([Y,0]).nice(),$=ce.t().x(e=>Z(e.date)).y0(e=>Q(e.y0)).y1(e=>Q(e.y1)).curve(ge),ke=Q.ticks(N),Ae=Z.ticks(o);return(0,x.useEffect)(()=>{le.t(Se.current).on(`mousemove`,e=>{let t=q[ne.n(q.map(e=>e.date),Z.invert(ue.t(e)[0]),0)];_e(t||q[q.length-1]),D?.(t||q[q.length-1]),xe(e.clientY),ye(e.clientX)}).on(`mouseout`,()=>{_e(void 0),ye(void 0),xe(void 0),D?.(void 0)}),D?.(void 0)},[Z,q,D]),(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(f.t.svg,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,ref:he,children:(0,w.jsx)(re.t,{children:(0,w.jsxs)(f.t.g,{transform:`translate(${K.left},${K.top})`,children:[(0,w.jsx)(de.t,{areaSettings:Ce,width:J,height:Y,scale:Z,animate:V,isInView:W}),(0,w.jsx)(y.n,{animate:V,areaSettings:we,scaleX:Z,scaleY:Q,isInView:W}),(0,w.jsxs)(`g`,{children:[(0,w.jsx)(_.t,{values:ke.filter(e=>e!==0),y:ke.filter(e=>e!==0).map(e=>Q(e)),x1:0-l,x2:J+K.right,styles:{gridLines:L?.yAxis?.gridLines,labels:L?.yAxis?.labels},classNames:{gridLines:R?.yAxis?.gridLines,labels:R?.yAxis?.labels},suffix:F,prefix:P,labelType:`secondary`,showGridLines:!0,labelPos:`vertical`,precision:z,locale:H,padZeros:U}),(0,w.jsx)(m.t,{y1:Q(X<0?0:X),y2:Q(X<0?0:X),x1:0-l,x2:J+K.right,label:g.t(X<0?0:X,void 0,z,P,F,H,U),labelPos:{x:0-l,dx:0,dy:Oe<0?`1em`:-5,y:Q(X<0?0:X)},classNames:{axis:R?.xAxis?.axis,label:R?.yAxis?.labels},styles:{axis:L?.xAxis?.axis,label:L?.yAxis?.labels}}),(0,w.jsx)(h.t,{x:0-l-15,y:Y/2,style:L?.yAxis?.title,className:R?.yAxis?.title,text:T,rotate90:!0})]}),(0,w.jsx)(ie.t,{values:Ae.map(e=>c.n(e,i)),x:Ae.map(e=>Z(e)),y1:0,y2:Y,styles:{gridLines:L?.xAxis?.gridLines,labels:L?.xAxis?.labels},classNames:{gridLines:(0,b.cn)(`opacity-0`,R?.xAxis?.gridLines),labels:(0,b.cn)(`fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[8px] sm:text-[9px] md:text-[10px] lg:text-xs`,R?.xAxis?.labels)},suffix:F,prefix:P,labelType:`primary`,showGridLines:!0,precision:z,locale:H,padZeros:U}),B.filter(e=>e.position===`before`).map(e=>e.layer),(0,w.jsxs)(f.t.g,{children:[Te.map((e,t)=>(0,w.jsx)(f.t.path,{d:$(e),exit:{opacity:0,transition:{duration:V.duration}},variants:{initial:{d:$(e.map(e=>({...e,y0:0,y1:0}))),opacity:0},whileInView:{d:$(e),opacity:1,transition:{duration:V.duration}}},initial:`initial`,animate:W?`whileInView`:`initial`,style:{fill:ee[t],opacity:.8}},t)),G?(0,w.jsx)(`line`,{y1:0,y2:Y,x1:Z(G.date),x2:Z(G.date),className:(0,b.cn)(`undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100`,R?.mouseOverLine),style:L?.mouseOverLine}):null]}),k?.map(e=>(0,w.jsx)(ae.n,{text:e.text,color:e.color,y:Q(e.value),x1:0-l,x2:J+K.right,classNames:e.classNames,styles:e.styles,animate:V,isInView:W},e.text)),(0,w.jsx)(`g`,{children:pe.map(e=>{let t=y.t({x:e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?Q(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date)):0,y:e.yCoordinate?Q(e.yCoordinate):0},a.t(e.connectorRadius)?3.5:e.connectorRadius),n=e.showConnector?{y1:t.y,x1:t.x,y2:e.yCoordinate?Q(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date))+(e.xOffset||0):0+(e.xOffset||0),cx:e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date)):0,cy:e.yCoordinate?Q(e.yCoordinate):0,circleRadius:a.t(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,r={y:e.yCoordinate?Q(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:M?0:e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:M?e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date))+(e.xOffset||0):0+(e.xOffset||0):J+K.right-(e.xCoordinate?Z(c.t(`${e.xCoordinate}`,i,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return(0,w.jsx)(y.r,{color:e.color,connectorsSettings:n,labelSettings:r,text:e.text,classNames:e.classNames,styles:e.styles,animate:V,isInView:W},e.text)})}),B.filter(e=>e.position===`after`).map(e=>e.layer),(0,w.jsx)(`rect`,{ref:Se,style:{fill:`none`,pointerEvents:`all`},width:J,height:Y})]})})}),G&&E&&ve&&be?(0,w.jsx)(oe.t,{data:G,body:E,xPos:ve,yPos:be,backgroundStyle:L?.tooltip,className:R?.tooltip}):null]})}function T(e){let{data:t,graphTitle:a,colors:o=n.Colors.light.categoricalColors.colors,sources:c,graphDescription:l,height:ne,width:u,footNote:d,noOfXTicks:f=10,dateFormat:re=`yyyy`,colorDomain:p,padding:m,backgroundColor:h=!1,colorLegendTitle:g,leftMargin:ie=50,rightMargin:_=20,topMargin:ae=20,bottomMargin:oe=25,highlightAreaSettings:se=[],tooltip:ce,relativeHeight:v,onSeriesMouseOver:le,refValues:ue=[],graphID:y,minValue:de,maxValue:b,graphDownload:S=!1,dataDownload:C=!1,showColorScale:T=!0,language:E=`en`,minHeight:D=0,annotations:O=[],customHighlightAreaSettings:k=[],theme:A=`light`,ariaLabel:j,yAxisTitle:M,noOfYTicks:pe=5,curveType:me=`curve`,styles:N,classNames:P,customLayers:F=[],animate:I=!1,numberDisplayOptions:L}=e,[R,z]=(0,x.useState)(0),[B,V]=(0,x.useState)(0),H=(0,x.useRef)(null),U=(0,x.useRef)(null);return(0,x.useEffect)(()=>{let e=new ResizeObserver(e=>{z(e[0].target.clientWidth||620),V(e[0].target.clientHeight||480)});return H.current&&e.observe(H.current),()=>e.disconnect()},[]),(0,w.jsxs)(s.n,{className:P?.graphContainer,style:N?.graphContainer,id:y,ref:U,"aria-label":j,backgroundColor:h,theme:A,language:E,minHeight:D,width:u,height:ne,relativeHeight:v,padding:m,children:[a||l||S||C?(0,w.jsx)(i.GraphHeader,{styles:{title:N?.title,description:N?.description},classNames:{title:P?.title,description:P?.description},graphTitle:a,graphDescription:l,width:u,graphDownload:S?U:void 0,dataDownload:C?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,T!==!1&&t.length>0?(0,w.jsx)(r.ColorLegend,{colorDomain:p,colors:o,colorLegendTitle:g,showNAColor:!1,className:P?.colorLegend}):null,(0,w.jsxs)(s.t,{ref:H,children:[t.length===0&&(0,w.jsx)(te.t,{}),R&&B&&t.length>0?(0,w.jsx)(fe,{data:t,colors:o,width:R,height:B,dateFormat:re,noOfXTicks:f,leftMargin:ie,rightMargin:_,topMargin:ae,bottomMargin:oe,tooltip:ce,onSeriesMouseOver:le,highlightAreaSettings:se,refValues:ue,minValue:de,maxValue:b,rtl:E===`he`||E===`ar`,annotations:O,customHighlightAreaSettings:k,yAxisTitle:M,noOfYTicks:pe,curveType:me,styles:N,classNames:P,customLayers:F,animate:I===!0?{duration:.5,once:!0,amount:.5}:I||{duration:0,once:!0,amount:0},locale:L?.locale||`en`,padZeros:L?.padZeros||!1,suffix:L?.suffix||``,prefix:L?.prefix||``,precision:L?.precision??2}):null]}),c||d?(0,w.jsx)(ee.GraphFooter,{styles:{footnote:N?.footnote,source:N?.source},classNames:{footnote:P?.footnote,source:P?.source},sources:c,footNote:d,width:u}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return T}});
+//# sourceMappingURL=StackedAreaChart-Du-YaLNf.cjs.map

package/dist/StackedAreaChart-Du-YaLNf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedAreaChart-Du-YaLNf.cjs","names":[],"sources":["../src/Components/Graphs/StackedAreaChart/Graph.tsx","../src/Components/Graphs/StackedAreaChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { bisectCenter } from 'd3-array';\nimport { scaleLinear, scaleTime } from 'd3-scale';\nimport { pointer, select } from 'd3-selection';\nimport {\n  area,\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport sum from 'lodash.sum';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Annotation } from '@/Components/Elements/Annotations';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { HighlightArea } from '@/Components/Elements/HighlightArea';\nimport { CustomArea } from '@/Components/Elements/HighlightArea/customArea';\nimport { RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  MultiLineChartDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getLineEndPoint } from '@/Utils/getLineEndPoint';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: MultiLineChartDataType[];\n  colors: string[];\n  width: number;\n  height: number;\n  dateFormat: string;\n  noOfXTicks: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  yAxisTitle?: string;\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  highlightAreaSettings: HighlightAreaSettingsDataType[];\n  maxValue?: number;\n  minValue?: number;\n  rtl: boolean;\n  annotations: AnnotationSettingsDataType[];\n  customHighlightAreaSettings: CustomHighlightAreaSettingsDataType[];\n  noOfYTicks: number;\n  prefix: string;\n  suffix: string;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  animate: AnimateDataType;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    colors,\n    dateFormat,\n    noOfXTicks,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    yAxisTitle,\n    tooltip,\n    onSeriesMouseOver,\n    highlightAreaSettings,\n    refValues,\n    minValue,\n    maxValue,\n    rtl,\n    annotations,\n    customHighlightAreaSettings,\n    noOfYTicks,\n    prefix,\n    suffix,\n    curveType,\n    styles,\n    classNames,\n    precision,\n    customLayers,\n    animate,\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 curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: yAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n  const MouseoverRectRef = useRef(null);\n  const dataFormatted = orderBy(\n    data.map((d) => ({\n      ...d,\n      date: parse(`${d.date}`, dateFormat, new Date()),\n    })),\n    ['date'],\n    ['asc'],\n  );\n  const highlightAreaSettingsFormatted = highlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: [\n      d.coordinates[0] === null ? null : parse(`${d.coordinates[0]}`, dateFormat, new Date()),\n      d.coordinates[1] === null ? null : parse(`${d.coordinates[1]}`, dateFormat, new Date()),\n    ],\n  }));\n  const customHighlightAreaSettingsFormatted = customHighlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: d.coordinates.map((el, j) =>\n      j % 2 === 0 ? parse(`${el}`, dateFormat, new Date()) : (el as number),\n    ),\n  }));\n  const dataArray = dataFormatted[0].y.map((_d, i) => {\n    return dataFormatted.map((el) => ({\n      date: el.date,\n      y0: i === 0 ? 0 : sum(el.y.filter((_element, k) => k < i)),\n      y1: sum(el.y.filter((_element, k) => k <= i)),\n    }));\n  });\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = dataFormatted[0].date;\n  const maxYear = dataFormatted[dataFormatted.length - 1].date;\n  const minParam = checkIfNullOrUndefined(minValue) ? 0 : (minValue as number);\n  const maxParam: number = checkIfNullOrUndefined(maxValue)\n    ? Math.max(...data.map((d) => sum(d.y) || 0))\n    : (maxValue as number);\n\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear().domain([minParam, maxParam]).range([graphHeight, 0]).nice();\n\n  const areaShape = area()\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    .x((d: any) => x(d.date))\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    .y0((d: any) => y(d.y0))\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    .y1((d: any) => y(d.y1))\n    .curve(curve);\n  const yTicks = y.ticks(noOfYTicks);\n  const xTicks = x.ticks(noOfXTicks);\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const mousemove = (event: any) => {\n      const selectedData =\n        dataFormatted[\n          bisectCenter(\n            dataFormatted.map((d) => d.date),\n            x.invert(pointer(event)[0]),\n            0,\n          )\n        ];\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n      setEventY(event.clientY);\n      setEventX(event.clientX);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n      onSeriesMouseOver?.(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n    onSeriesMouseOver?.(undefined);\n  }, [x, dataFormatted, onSeriesMouseOver]);\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        <AnimatePresence>\n          <motion.g transform={`translate(${margin.left},${margin.top})`}>\n            <HighlightArea\n              areaSettings={highlightAreaSettingsFormatted}\n              width={graphWidth}\n              height={graphHeight}\n              scale={x}\n              animate={animate}\n              isInView={isInView}\n            />\n            <CustomArea\n              animate={animate}\n              areaSettings={customHighlightAreaSettingsFormatted}\n              scaleX={x}\n              scaleY={y}\n              isInView={isInView}\n            />\n            <g>\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              <Axis\n                y1={y(minParam < 0 ? 0 : minParam)}\n                y2={y(minParam < 0 ? 0 : minParam)}\n                x1={0 - leftMargin}\n                x2={graphWidth + margin.right}\n                label={numberFormattingFunction(\n                  minParam < 0 ? 0 : minParam,\n                  undefined,\n                  precision,\n                  prefix,\n                  suffix,\n                  locale,\n                  padZeros,\n                )}\n                labelPos={{\n                  x: 0 - leftMargin,\n                  dx: 0,\n                  dy: maxParam < 0 ? '1em' : -5,\n                  y: y(minParam < 0 ? 0 : minParam),\n                }}\n                classNames={{\n                  axis: classNames?.xAxis?.axis,\n                  label: classNames?.yAxis?.labels,\n                }}\n                styles={{\n                  axis: styles?.xAxis?.axis,\n                  label: styles?.yAxis?.labels,\n                }}\n              />\n              <AxisTitle\n                x={0 - leftMargin - 15}\n                y={graphHeight / 2}\n                style={styles?.yAxis?.title}\n                className={classNames?.yAxis?.title}\n                text={yAxisTitle}\n                rotate90\n              />\n            </g>\n            <XTicksAndGridLines\n              values={xTicks.map((d) => format(d, dateFormat))}\n              x={xTicks.map((d) => x(d))}\n              y1={0}\n              y2={graphHeight}\n              styles={{\n                gridLines: styles?.xAxis?.gridLines,\n                labels: styles?.xAxis?.labels,\n              }}\n              classNames={{\n                gridLines: cn('opacity-0', classNames?.xAxis?.gridLines),\n                labels: cn(\n                  'fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[8px] sm:text-[9px] md:text-[10px] lg:text-xs',\n                  classNames?.xAxis?.labels,\n                ),\n              }}\n              suffix={suffix}\n              prefix={prefix}\n              labelType='primary'\n              showGridLines\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n            {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n            <motion.g>\n              {dataArray.map((d, i) => {\n                return (\n                  <motion.path\n                    // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                    key={i}\n                    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                    d={areaShape(d as any) as string}\n                    exit={{\n                      opacity: 0,\n                      transition: { duration: animate.duration },\n                    }}\n                    variants={{\n                      initial: {\n                        d: areaShape(\n                          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                          d.map((el) => ({ ...el, y0: 0, y1: 0 })) as any,\n                        ) as string as string,\n                        opacity: 0,\n                      },\n                      whileInView: {\n                        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                        d: areaShape(d as any) as string,\n                        opacity: 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    style={{\n                      fill: colors[i],\n                      opacity: 0.8,\n                    }}\n                  />\n                );\n              })}\n              {mouseOverData ? (\n                <line\n                  y1={0}\n                  y2={graphHeight}\n                  x1={x(mouseOverData.date)}\n                  x2={x(mouseOverData.date)}\n                  className={cn(\n                    'undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100',\n                    classNames?.mouseOverLine,\n                  )}\n                  style={styles?.mouseOverLine}\n                />\n              ) : null}\n            </motion.g>\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            <g>\n              {annotations.map((d) => {\n                const endPoints = getLineEndPoint(\n                  {\n                    x: d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0),\n                    y: d.yCoordinate\n                      ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                      : 0 + (d.yOffset || 0) - 8,\n                  },\n                  {\n                    x: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                    y: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                  },\n                  checkIfNullOrUndefined(d.connectorRadius) ? 3.5 : (d.connectorRadius as number),\n                );\n                const connectorSettings = d.showConnector\n                  ? {\n                      y1: endPoints.y,\n                      x1: endPoints.x,\n                      y2: d.yCoordinate\n                        ? y(d.yCoordinate as number) + (d.yOffset || 0)\n                        : 0 + (d.yOffset || 0),\n                      x2: d.xCoordinate\n                        ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                        : 0 + (d.xOffset || 0),\n                      cx: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                      cy: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                      circleRadius: checkIfNullOrUndefined(d.connectorRadius)\n                        ? 3.5\n                        : (d.connectorRadius as number),\n                      strokeWidth: d.showConnector === true ? 2 : Math.min(d.showConnector || 0, 1),\n                    }\n                  : undefined;\n                const labelSettings = {\n                  y: d.yCoordinate\n                    ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                    : 0 + (d.yOffset || 0) - 8,\n                  x: rtl\n                    ? 0\n                    : d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0),\n                  width: rtl\n                    ? d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0)\n                    : graphWidth +\n                      margin.right -\n                      (d.xCoordinate\n                        ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                        : 0 + (d.xOffset || 0)),\n                  maxWidth: d.maxWidth,\n                  fontWeight: d.fontWeight,\n                  align: d.align,\n                };\n                return (\n                  <Annotation\n                    key={d.text}\n                    color={d.color}\n                    connectorsSettings={connectorSettings}\n                    labelSettings={labelSettings}\n                    text={d.text}\n                    classNames={d.classNames}\n                    styles={d.styles}\n                    animate={animate}\n                    isInView={isInView}\n                  />\n                );\n              })}\n            </g>\n            {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n            <rect\n              ref={MouseoverRectRef}\n              style={{\n                fill: 'none',\n                pointerEvents: 'all',\n              }}\n              width={graphWidth}\n              height={graphHeight}\n            />\n          </motion.g>\n        </AnimatePresence>\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    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  AreaChartDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: AreaChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** array of colors for different lines and areas */\n  colors?: 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\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** No. of ticks on the x-axis  */\n  noOfXTicks?: number;\n  /** No. of ticks on the y-axis  */\n  noOfYTicks?: number;\n\n  // Graph Parameters\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Title for the Y-axis */\n  yAxisTitle?: string;\n  /** Annotations on the chart */\n  annotations?: AnnotationSettingsDataType[];\n  /** Highlighted area(square) on the chart  */\n  highlightAreaSettings?: HighlightAreaSettingsDataType[];\n  /** Highlighted area(custom shape) on the chart  */\n  customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];\n  /** Curve type for the line */\n  curveType?: CurveTypes;\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  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\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  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_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 AreaChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors = Colors.light.categoricalColors.colors,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks = 10,\n    dateFormat = 'yyyy',\n    colorDomain,\n    padding,\n    backgroundColor = false,\n    colorLegendTitle,\n    leftMargin = 50,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    highlightAreaSettings = [],\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    refValues = [],\n    graphID,\n    minValue,\n    maxValue,\n    graphDownload = false,\n    dataDownload = false,\n    showColorScale = true,\n    language = 'en',\n    minHeight = 0,\n    annotations = [],\n    customHighlightAreaSettings = [],\n    theme = 'light',\n    ariaLabel,\n    yAxisTitle,\n    noOfYTicks = 5,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n    animate = false,\n    numberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\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 !== false && data.length > 0 ? (\n        <ColorLegend\n          colorDomain={colorDomain}\n          colors={colors}\n          colorLegendTitle={colorLegendTitle}\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          <Graph\n            data={data}\n            colors={colors}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            noOfXTicks={noOfXTicks}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            highlightAreaSettings={highlightAreaSettings}\n            refValues={refValues}\n            minValue={minValue}\n            maxValue={maxValue}\n            rtl={language === 'he' || language === 'ar'}\n            annotations={annotations}\n            customHighlightAreaSettings={customHighlightAreaSettings}\n            yAxisTitle={yAxisTitle}\n            noOfYTicks={noOfYTicks}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/StatCardFromData.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./compiler-runtime-oPPev21o.cjs"),Z=require("./index-CSNtgibC.cjs"),rt=require("@undp/design-system-react/cn"),Y=require("@undp/design-system-react/Typography"),tt=require("./GraphFooter.cjs"),et=require("./GraphHeader.cjs"),f=require("./numberFormattingFunction-u2iNHL_c.cjs");function it(n){const t=s.compilerRuntimeExports.c(53),{year:d,data:i,graphTitle:u,sources:g,graphDescription:p,footNote:h,padding:O,backgroundColor:z,graphID:C,aggregationMethod:B,language:W,countOnly:m,theme:I,ariaLabel:nt,textBackground:P,headingFontSize:J,centerAlign:K,verticalAlign:Q,layout:U,styles:r,classNames:o,naLabel:V,numberDisplayOptions:e}=n,x=z===void 0?!1:z,a=B===void 0?"count":B,c=W===void 0?"en":W,X=I===void 0?"light":I,N=P===void 0?!1:P,$=J===void 0?"4.375rem":J,S=K===void 0?!1:K,_=Q===void 0?"center":Q,k=U===void 0?"primary":U,l=V===void 0?"NA":V,q=`${X||"light"} w-full`,H=c==="he"||c==="ar"?"rtl":void 0,M=`${X||"light"} flex flex-col w-full box-border h-full ${x?x===!0?"bg-primary-gray-200 dark:bg-primary-gray-650":"":"bg-transparent"} ${c||"en"}`,T=o?.graphContainer;let y;t[0]!==M||t[1]!==T?(y=rt.cn(M,T),t[0]=M,t[1]=T,t[2]=y):y=t[2];let j;t[3]!==r?.graphContainer?(j=r?.graphContainer||{},t[3]=r?.graphContainer,t[4]=j):j=t[4];let v;t[5]!==x?(v=x&&x!==!0?{backgroundColor:x}:{},t[5]=x,t[6]=v):v=t[6];const G=x?O||"1rem":O||0;let b;t[7]!==j||t[8]!==v||t[9]!==G?(b={...j,...v,padding:G},t[7]=j,t[8]=v,t[9]=G,t[10]=b):b=t[10];const A=nt||`${u?`The graph shows ${u}. `:""}This is a statistic card.${p?` ${p}`:""}`,D=`flex flex-col w-full grow ${k!=="secondary"?"gap-12 justify-between":"gap-4 justify-center"}`;let F;t[11]!==a||t[12]!==S||t[13]!==o?.description||t[14]!==o?.footnote||t[15]!==o?.source||t[16]!==o?.title||t[17]!==m||t[18]!==i||t[19]!==h||t[20]!==p||t[21]!==u||t[22]!==$||t[23]!==c||t[24]!==k||t[25]!==l||t[26]!==e?.locale||t[27]!==e?.padZeros||t[28]!==e?.precision||t[29]!==e?.prefix||t[30]!==e?.suffix||t[31]!==g||t[32]!==r?.description||t[33]!==r?.footnote||t[34]!==r?.source||t[35]!==r?.title||t[36]!==N||t[37]!==_||t[38]!==d?(F=k!=="secondary"?s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[u||p?s.jsxRuntimeExports.jsx(et.GraphHeader,{styles:{title:r?.title,description:r?.description},classNames:{title:o?.title,description:o?.description},graphTitle:u,graphDescription:p}):null,s.jsxRuntimeExports.jsx("div",{className:`flex flex-col justify-between grow ${_==="top"?"justify-start":_==="bottom"?"justify-end":"justify-center"}`,children:s.jsxRuntimeExports.jsxs(Y.H3,{marginBottom:"base",className:`leading-none text-outline font-heading ${S?"text-center":c==="he"||c==="ar"?"text-right":"text-left"} ${N?"text-primary-black dark:text-primary-white":"transparent"}`,style:{fontSize:$,letterSpacing:"0.05rem"},children:[i.filter(yt).length>0||a==="count"?m&&m?.length!==0?i.filter(L=>m.indexOf(L.value)!==-1).length:i.length:a==="sum"?f.numberFormattingFunction(Z.sum(i.map(ht)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros):a==="average"?f.numberFormattingFunction(parseFloat((Z.sum(i.map(gt))/i.length).toFixed(2)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros):a==="max"?f.numberFormattingFunction(Math.max(...i.map(dt).filter(ft)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros):f.numberFormattingFunction(Math.min(...i.map(xt).filter(mt)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros)," ",d?s.jsxRuntimeExports.jsxs("span",{className:"text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400",style:{marginLeft:"-8px",lineHeight:"1.09",textShadow:"none",WebkitTextStrokeWidth:0},children:["(",d,")"]}):null]})}),g||h?s.jsxRuntimeExports.jsx(tt.GraphFooter,{styles:{footnote:r?.footnote,source:r?.source},classNames:{footnote:o?.footnote,source:o?.source},sources:g,footNote:h}):null]}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsxs(Y.H3,{marginBottom:k==="secondary"?"none":"base",className:`leading-none text-outline font-heading ${S?"text-center":c==="he"||c==="ar"?"text-right":"text-left"} ${N?"text-primary-black dark:text-primary-white":"transparent"}`,style:{fontSize:$,letterSpacing:"0.05rem"},children:[i.filter(pt).length>0||a==="count"?m&&m?.length!==0?i.filter(L=>m.indexOf(L.value)!==-1).length:i.length:a==="sum"?f.numberFormattingFunction(Z.sum(i.map(ut)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros):a==="average"?f.numberFormattingFunction(parseFloat((Z.sum(i.map(ct))/i.length).toFixed(2)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros):a==="max"?f.numberFormattingFunction(Math.max(...i.map(lt).filter(at)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros):f.numberFormattingFunction(Math.min(...i.map(st).filter(ot)),l,e?.precision??2,e?.prefix,e?.suffix,e?.locale,e?.padZeros)," ",d?s.jsxRuntimeExports.jsxs("span",{className:"text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400",style:{marginLeft:"-8px",lineHeight:"1.09",textShadow:"none",WebkitTextStrokeWidth:0},children:["(",d,")"]}):null]}),u||p?s.jsxRuntimeExports.jsx(et.GraphHeader,{styles:{title:r?.title,description:r?.description},classNames:{title:o?.title,description:o?.description},graphTitle:u,graphDescription:p}):null,g||h?s.jsxRuntimeExports.jsx(tt.GraphFooter,{styles:{footnote:r?.footnote,source:r?.source},classNames:{footnote:o?.footnote,source:o?.source},sources:g,footNote:h}):null]}),t[11]=a,t[12]=S,t[13]=o?.description,t[14]=o?.footnote,t[15]=o?.source,t[16]=o?.title,t[17]=m,t[18]=i,t[19]=h,t[20]=p,t[21]=u,t[22]=$,t[23]=c,t[24]=k,t[25]=l,t[26]=e?.locale,t[27]=e?.padZeros,t[28]=e?.precision,t[29]=e?.prefix,t[30]=e?.suffix,t[31]=g,t[32]=r?.description,t[33]=r?.footnote,t[34]=r?.source,t[35]=r?.title,t[36]=N,t[37]=_,t[38]=d,t[39]=F):F=t[39];let R;t[40]!==D||t[41]!==F?(R=s.jsxRuntimeExports.jsx("div",{className:D,children:F}),t[40]=D,t[41]=F,t[42]=R):R=t[42];let E;t[43]!==C||t[44]!==H||t[45]!==y||t[46]!==b||t[47]!==A||t[48]!==R?(E=s.jsxRuntimeExports.jsx("div",{id:C,dir:H,className:y,style:b,"aria-label":A,children:R}),t[43]=C,t[44]=H,t[45]=y,t[46]=b,t[47]=A,t[48]=R,t[49]=E):E=t[49];let w;return t[50]!==q||t[51]!==E?(w=s.jsxRuntimeExports.jsx("div",{className:q,children:E}),t[50]=q,t[51]=E,t[52]=w):w=t[52],w}function ot(n){return n!==void 0}function st(n){return n.value}function at(n){return n!==void 0}function lt(n){return n.value}function ct(n){return n.value}function ut(n){return n.value}function pt(n){return typeof n.value=="string"}function mt(n){return n!==void 0}function xt(n){return n.value}function ft(n){return n!==void 0}function dt(n){return n.value}function gt(n){return n.value}function ht(n){return n.value}function yt(n){return typeof n.value=="string"}exports.StatCardFromData=it;
-//# sourceMappingURL=StatCardFromData.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./GraphFooter.cjs`),r=require(`./GraphHeader.cjs`),i=require(`./lodash.sum-bWhlZLUV.cjs`),a=require(`./numberFormattingFunction-Caf5NyIo.cjs`);let o=require(`@undp/design-system-react/cn`),s=require(`@undp/design-system-react/Typography`);var c=e.a(i.t(),1),l=t.t();function u(e){let{year:t,data:i,graphTitle:u,sources:d,graphDescription:f,footNote:p,padding:m,backgroundColor:h=!1,graphID:g,aggregationMethod:_=`count`,language:v=`en`,countOnly:y,theme:b=`light`,textBackground:x=!1,headingFontSize:S=`4.375rem`,centerAlign:C=!1,verticalAlign:w=`center`,layout:T=`primary`,styles:E,classNames:D,naLabel:O=`NA`,numberDisplayOptions:k}=e;return(0,l.jsx)(`div`,{className:`${b||`light`} w-full`,children:(0,l.jsx)(`div`,{id:g,dir:v===`he`||v===`ar`?`rtl`:void 0,className:(0,o.cn)(`${b||`light`} flex flex-col w-full box-border h-full ${h?h===!0?`bg-primary-gray-200 dark:bg-primary-gray-650`:``:`bg-transparent`} ${v||`en`}`,D?.graphContainer),style:{...E?.graphContainer||{},...h&&h!==!0?{backgroundColor:h}:{},padding:h?m||`1rem`:m||0},children:(0,l.jsx)(`div`,{className:`flex flex-col w-full grow ${T===`secondary`?`gap-4 justify-center`:`gap-12 justify-between`}`,children:T===`secondary`?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(s.H3,{marginBottom:T===`secondary`?`none`:`base`,className:`leading-none text-outline font-heading ${C?`text-center`:v===`he`||v===`ar`?`text-right`:`text-left`} ${x?`text-primary-black dark:text-primary-white`:`transparent`}`,style:{fontSize:S,letterSpacing:`0.05rem`},children:[i.filter(e=>typeof e.value==`string`).length>0||_===`count`?y&&y?.length!==0?i.filter(e=>y.indexOf(e.value)!==-1).length:i.length:_===`sum`?a.t((0,c.default)(i.map(e=>e.value)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros):_===`average`?a.t(parseFloat(((0,c.default)(i.map(e=>e.value))/i.length).toFixed(2)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros):_===`max`?a.t(Math.max(...i.map(e=>e.value).filter(e=>e!==void 0)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros):a.t(Math.min(...i.map(e=>e.value).filter(e=>e!==void 0)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros),` `,t?(0,l.jsxs)(`span`,{className:`text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400`,style:{marginLeft:`-8px`,lineHeight:`1.09`,textShadow:`none`,WebkitTextStrokeWidth:0},children:[`(`,t,`)`]}):null]}),u||f?(0,l.jsx)(r.GraphHeader,{styles:{title:E?.title,description:E?.description},classNames:{title:D?.title,description:D?.description},graphTitle:u,graphDescription:f}):null,d||p?(0,l.jsx)(n.GraphFooter,{styles:{footnote:E?.footnote,source:E?.source},classNames:{footnote:D?.footnote,source:D?.source},sources:d,footNote:p}):null]}):(0,l.jsxs)(l.Fragment,{children:[u||f?(0,l.jsx)(r.GraphHeader,{styles:{title:E?.title,description:E?.description},classNames:{title:D?.title,description:D?.description},graphTitle:u,graphDescription:f}):null,(0,l.jsx)(`div`,{className:`flex flex-col justify-between grow ${w===`top`?`justify-start`:w===`bottom`?`justify-end`:`justify-center`}`,children:(0,l.jsxs)(s.H3,{marginBottom:`base`,className:`leading-none text-outline font-heading ${C?`text-center`:v===`he`||v===`ar`?`text-right`:`text-left`} ${x?`text-primary-black dark:text-primary-white`:`transparent`}`,style:{fontSize:S,letterSpacing:`0.05rem`},children:[i.filter(e=>typeof e.value==`string`).length>0||_===`count`?y&&y?.length!==0?i.filter(e=>y.indexOf(e.value)!==-1).length:i.length:_===`sum`?a.t((0,c.default)(i.map(e=>e.value)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros):_===`average`?a.t(parseFloat(((0,c.default)(i.map(e=>e.value))/i.length).toFixed(2)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros):_===`max`?a.t(Math.max(...i.map(e=>e.value).filter(e=>e!==void 0)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros):a.t(Math.min(...i.map(e=>e.value).filter(e=>e!==void 0)),O,k?.precision??2,k?.prefix,k?.suffix,k?.locale,k?.padZeros),` `,t?(0,l.jsxs)(`span`,{className:`text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400`,style:{marginLeft:`-8px`,lineHeight:`1.09`,textShadow:`none`,WebkitTextStrokeWidth:0},children:[`(`,t,`)`]}):null]})}),d||p?(0,l.jsx)(n.GraphFooter,{styles:{footnote:E?.footnote,source:E?.source},classNames:{footnote:D?.footnote,source:D?.source},sources:d,footNote:p}):null]})})})})}exports.StatCardFromData=u;
+//# sourceMappingURL=StatCardFromData.cjs.map

package/dist/StatCardFromData.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatCardFromData.cjs","sources":["../src/Components/Graphs/StatCard/StatCardFromData.tsx"],"sourcesContent":["import sum from 'lodash.sum';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { H3 } from '@undp/design-system-react/Typography';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport {\r\n  Languages,\r\n  SourcesDataType,\r\n  StatCardsFromDataSheetDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  NumberFormatOptions,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: StatCardsFromDataSheetDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Defines the layout for the cards */\r\n  layout?: 'primary' | 'secondary';\r\n  /** Font size of the main text */\r\n  headingFontSize?: string;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Toggle the fill color of the main text. */\r\n  textBackground?: boolean;\r\n  /** Toggle is the text is center aligned. */\r\n  centerAlign?: boolean;\r\n  /** Vertical alignment of the main text */\r\n  verticalAlign?: 'center' | 'top' | 'bottom';\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Values and Ticks\r\n  /** Sub text next to main text */\r\n  year?: number | string;\r\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\r\n  numberDisplayOptions?: NumberFormatOptions;\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\r\n\r\n  // Graph Parameters\r\n  /** Data points that need to counted for aggregation.  */\r\n  countOnly?: (string | number)[];\r\n  /** Method for aggregating the data to show as a single number in the card. If the data type of value in data object is string then only count is applicable. */\r\n  aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function StatCardFromData(props: Props) {\r\n  const {\r\n    year,\r\n    data,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    aggregationMethod = 'count',\r\n    language = 'en',\r\n    countOnly,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    textBackground = false,\r\n    headingFontSize = '4.375rem',\r\n    centerAlign = false,\r\n    verticalAlign = 'center',\r\n    layout = 'primary',\r\n    styles,\r\n    classNames,\r\n    naLabel = 'NA',\r\n    numberDisplayOptions,\r\n  } = props;\r\n\r\n  return (\r\n    <div className={`${theme || 'light'} w-full`}>\r\n      <div\r\n        id={graphID}\r\n        dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n        className={cn(\r\n          `${theme || 'light'} flex flex-col w-full box-border h-full ${\r\n            !backgroundColor\r\n              ? 'bg-transparent'\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650'\r\n                : ''\r\n          } ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n          padding: backgroundColor ? padding || '1rem' : padding || 0,\r\n        }}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}This is a statistic card.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className={`flex flex-col w-full grow ${layout !== 'secondary' ? 'gap-12 justify-between' : 'gap-4 justify-center'}`}\r\n        >\r\n          {layout !== 'secondary' ? (\r\n            <>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              <div\r\n                className={`flex flex-col justify-between grow ${\r\n                  verticalAlign === 'top'\r\n                    ? 'justify-start'\r\n                    : verticalAlign === 'bottom'\r\n                      ? 'justify-end'\r\n                      : 'justify-center'\r\n                }`}\r\n              >\r\n                <H3\r\n                  marginBottom='base'\r\n                  className={`leading-none text-outline font-heading ${\r\n                    centerAlign\r\n                      ? 'text-center'\r\n                      : language === 'he' || language === 'ar'\r\n                        ? 'text-right'\r\n                        : 'text-left'\r\n                  } ${textBackground ? 'text-primary-black dark:text-primary-white' : 'transparent'}`}\r\n                  style={{\r\n                    fontSize: headingFontSize,\r\n                    letterSpacing: '0.05rem',\r\n                  }}\r\n                >\r\n                  {data.filter(d => typeof d.value === 'string').length > 0 ||\r\n                  aggregationMethod === 'count'\r\n                    ? countOnly && countOnly?.length !== 0\r\n                      ? data.filter(d => countOnly.indexOf(d.value) !== -1).length\r\n                      : data.length\r\n                    : aggregationMethod === 'sum'\r\n                      ? numberFormattingFunction(\r\n                          sum(data.map(d => d.value)),\r\n                          naLabel,\r\n                          numberDisplayOptions?.precision ?? 2,\r\n                          numberDisplayOptions?.prefix,\r\n                          numberDisplayOptions?.suffix,\r\n                          numberDisplayOptions?.locale,\r\n                          numberDisplayOptions?.padZeros,\r\n                        )\r\n                      : aggregationMethod === 'average'\r\n                        ? numberFormattingFunction(\r\n                            parseFloat((sum(data.map(d => d.value)) / data.length).toFixed(2)),\r\n                            naLabel,\r\n                            numberDisplayOptions?.precision ?? 2,\r\n                            numberDisplayOptions?.prefix,\r\n                            numberDisplayOptions?.suffix,\r\n                            numberDisplayOptions?.locale,\r\n                            numberDisplayOptions?.padZeros,\r\n                          )\r\n                        : aggregationMethod === 'max'\r\n                          ? numberFormattingFunction(\r\n                              Math.max(\r\n                                ...data\r\n                                  .map(d => d.value as number | undefined)\r\n                                  .filter(d => d !== undefined),\r\n                              ),\r\n                              naLabel,\r\n                              numberDisplayOptions?.precision ?? 2,\r\n                              numberDisplayOptions?.prefix,\r\n                              numberDisplayOptions?.suffix,\r\n                              numberDisplayOptions?.locale,\r\n                              numberDisplayOptions?.padZeros,\r\n                            )\r\n                          : numberFormattingFunction(\r\n                              Math.min(\r\n                                ...data\r\n                                  .map(d => d.value as number | undefined)\r\n                                  .filter(d => d !== undefined),\r\n                              ),\r\n                              naLabel,\r\n                              numberDisplayOptions?.precision ?? 2,\r\n                              numberDisplayOptions?.prefix,\r\n                              numberDisplayOptions?.suffix,\r\n                              numberDisplayOptions?.locale,\r\n                              numberDisplayOptions?.padZeros,\r\n                            )}{' '}\r\n                  {year ? (\r\n                    <span\r\n                      className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\r\n                      style={{\r\n                        marginLeft: '-8px',\r\n                        lineHeight: '1.09',\r\n                        textShadow: 'none',\r\n                        WebkitTextStrokeWidth: 0,\r\n                      }}\r\n                    >\r\n                      ({year})\r\n                    </span>\r\n                  ) : null}\r\n                </H3>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </>\r\n          ) : (\r\n            <>\r\n              <H3\r\n                marginBottom={layout === 'secondary' ? 'none' : 'base'}\r\n                className={`leading-none text-outline font-heading ${\r\n                  centerAlign\r\n                    ? 'text-center'\r\n                    : language === 'he' || language === 'ar'\r\n                      ? 'text-right'\r\n                      : 'text-left'\r\n                } ${textBackground ? 'text-primary-black dark:text-primary-white' : 'transparent'}`}\r\n                style={{\r\n                  fontSize: headingFontSize,\r\n                  letterSpacing: '0.05rem',\r\n                }}\r\n              >\r\n                {data.filter(d => typeof d.value === 'string').length > 0 ||\r\n                aggregationMethod === 'count'\r\n                  ? countOnly && countOnly?.length !== 0\r\n                    ? data.filter(d => countOnly.indexOf(d.value) !== -1).length\r\n                    : data.length\r\n                  : aggregationMethod === 'sum'\r\n                    ? numberFormattingFunction(\r\n                        sum(data.map(d => d.value)),\r\n                        naLabel,\r\n                        numberDisplayOptions?.precision ?? 2,\r\n                        numberDisplayOptions?.prefix,\r\n                        numberDisplayOptions?.suffix,\r\n                        numberDisplayOptions?.locale,\r\n                        numberDisplayOptions?.padZeros,\r\n                      )\r\n                    : aggregationMethod === 'average'\r\n                      ? numberFormattingFunction(\r\n                          parseFloat((sum(data.map(d => d.value)) / data.length).toFixed(2)),\r\n                          naLabel,\r\n                          numberDisplayOptions?.precision ?? 2,\r\n                          numberDisplayOptions?.prefix,\r\n                          numberDisplayOptions?.suffix,\r\n                          numberDisplayOptions?.locale,\r\n                          numberDisplayOptions?.padZeros,\r\n                        )\r\n                      : aggregationMethod === 'max'\r\n                        ? numberFormattingFunction(\r\n                            Math.max(\r\n                              ...data\r\n                                .map(d => d.value as number | undefined)\r\n                                .filter(d => d !== undefined),\r\n                            ),\r\n                            naLabel,\r\n                            numberDisplayOptions?.precision ?? 2,\r\n                            numberDisplayOptions?.prefix,\r\n                            numberDisplayOptions?.suffix,\r\n                            numberDisplayOptions?.locale,\r\n                            numberDisplayOptions?.padZeros,\r\n                          )\r\n                        : numberFormattingFunction(\r\n                            Math.min(\r\n                              ...data\r\n                                .map(d => d.value as number | undefined)\r\n                                .filter(d => d !== undefined),\r\n                            ),\r\n                            naLabel,\r\n                            numberDisplayOptions?.precision ?? 2,\r\n                            numberDisplayOptions?.prefix,\r\n                            numberDisplayOptions?.suffix,\r\n                            numberDisplayOptions?.locale,\r\n                            numberDisplayOptions?.padZeros,\r\n                          )}{' '}\r\n                {year ? (\r\n                  <span\r\n                    className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\r\n                    style={{\r\n                      marginLeft: '-8px',\r\n                      lineHeight: '1.09',\r\n                      textShadow: 'none',\r\n                      WebkitTextStrokeWidth: 0,\r\n                    }}\r\n                  >\r\n                    ({year})\r\n                  </span>\r\n                ) : null}\r\n              </H3>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["StatCardFromData","props","$","_c","year","data","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","t0","graphID","aggregationMethod","t1","language","t2","countOnly","theme","t3","ariaLabel","textBackground","t4","headingFontSize","t5","centerAlign","t6","verticalAlign","t7","layout","t8","styles","classNames","naLabel","t9","numberDisplayOptions","undefined","t10","t11","t12","t13","graphContainer","t14","cn","t15","t16","t17","t18","t19","t20","t21","description","footnote","source","title","locale","padZeros","precision","prefix","suffix","jsxs","Fragment","jsx","GraphHeader","H3","fontSize","letterSpacing","filter","_temp","length","d","indexOf","value","numberFormattingFunction","sum","map","_temp2","parseFloat","_temp3","toFixed","Math","max","_temp4","_temp5","min","_temp6","_temp7","marginLeft","lineHeight","textShadow","WebkitTextStrokeWidth","GraphFooter","_temp8","d_7","_temp9","_temp0","_temp1","_temp10","_temp11","_temp12","t22","t23","t24","d_13","d_12","d_11","d_10","d_9","d_8","d_14","d_5","d_4","d_3","d_2","d_1","d_0","d_6"],"mappings":"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"}
+{"version":3,"file":"StatCardFromData.cjs","names":[],"sources":["../src/Components/Graphs/StatCard/StatCardFromData.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { H3 } from '@undp/design-system-react/Typography';\nimport sum from 'lodash.sum';\n\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  Languages,\n  NumberFormatOptions,\n  SourcesDataType,\n  StatCardsFromDataSheetDataType,\n  StyleObject,\n} from '@/Types';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: StatCardsFromDataSheetDataType[];\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\n  // Colors and Styling\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Defines the layout for the cards */\n  layout?: 'primary' | 'secondary';\n  /** Font size of the main text */\n  headingFontSize?: string;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Toggle the fill color of the main text. */\n  textBackground?: boolean;\n  /** Toggle is the text is center aligned. */\n  centerAlign?: boolean;\n  /** Vertical alignment of the main text */\n  verticalAlign?: 'center' | 'top' | 'bottom';\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  // Values and Ticks\n  /** Sub text next to main text */\n  year?: number | string;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n\n  // Graph Parameters\n  /** Data points that need to counted for aggregation.  */\n  countOnly?: (string | number)[];\n  /** Method for aggregating the data to show as a single number in the card. If the data type of value in data object is string then only count is applicable. */\n  aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';\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 StatCardFromData(props: Props) {\n  const {\n    year,\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    footNote,\n    padding,\n    backgroundColor = false,\n    graphID,\n    aggregationMethod = 'count',\n    language = 'en',\n    countOnly,\n    theme = 'light',\n    textBackground = false,\n    headingFontSize = '4.375rem',\n    centerAlign = false,\n    verticalAlign = 'center',\n    layout = 'primary',\n    styles,\n    classNames,\n    naLabel = 'NA',\n    numberDisplayOptions,\n  } = props;\n\n  return (\n    <div className={`${theme || 'light'} w-full`}>\n      <div\n        id={graphID}\n        dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\n        className={cn(\n          `${theme || 'light'} flex flex-col w-full box-border h-full ${\n            !backgroundColor\n              ? 'bg-transparent'\n              : backgroundColor === true\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650'\n                : ''\n          } ${language || 'en'}`,\n          classNames?.graphContainer,\n        )}\n        style={{\n          ...(styles?.graphContainer || {}),\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\n          padding: backgroundColor ? padding || '1rem' : padding || 0,\n        }}\n      >\n        <div\n          className={`flex flex-col w-full grow ${layout !== 'secondary' ? 'gap-12 justify-between' : 'gap-4 justify-center'}`}\n        >\n          {layout !== 'secondary' ? (\n            <>\n              {graphTitle || graphDescription ? (\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                />\n              ) : null}\n              <div\n                className={`flex flex-col justify-between grow ${\n                  verticalAlign === 'top'\n                    ? 'justify-start'\n                    : verticalAlign === 'bottom'\n                      ? 'justify-end'\n                      : 'justify-center'\n                }`}\n              >\n                <H3\n                  marginBottom='base'\n                  className={`leading-none text-outline font-heading ${\n                    centerAlign\n                      ? 'text-center'\n                      : language === 'he' || language === 'ar'\n                        ? 'text-right'\n                        : 'text-left'\n                  } ${textBackground ? 'text-primary-black dark:text-primary-white' : 'transparent'}`}\n                  style={{\n                    fontSize: headingFontSize,\n                    letterSpacing: '0.05rem',\n                  }}\n                >\n                  {data.filter((d) => typeof d.value === 'string').length > 0 ||\n                  aggregationMethod === 'count'\n                    ? countOnly && countOnly?.length !== 0\n                      ? data.filter((d) => countOnly.indexOf(d.value) !== -1).length\n                      : data.length\n                    : aggregationMethod === 'sum'\n                      ? numberFormattingFunction(\n                          sum(data.map((d) => d.value)),\n                          naLabel,\n                          numberDisplayOptions?.precision ?? 2,\n                          numberDisplayOptions?.prefix,\n                          numberDisplayOptions?.suffix,\n                          numberDisplayOptions?.locale,\n                          numberDisplayOptions?.padZeros,\n                        )\n                      : aggregationMethod === 'average'\n                        ? numberFormattingFunction(\n                            parseFloat((sum(data.map((d) => d.value)) / data.length).toFixed(2)),\n                            naLabel,\n                            numberDisplayOptions?.precision ?? 2,\n                            numberDisplayOptions?.prefix,\n                            numberDisplayOptions?.suffix,\n                            numberDisplayOptions?.locale,\n                            numberDisplayOptions?.padZeros,\n                          )\n                        : aggregationMethod === 'max'\n                          ? numberFormattingFunction(\n                              Math.max(\n                                ...data\n                                  .map((d) => d.value as number | undefined)\n                                  .filter((d) => d !== undefined),\n                              ),\n                              naLabel,\n                              numberDisplayOptions?.precision ?? 2,\n                              numberDisplayOptions?.prefix,\n                              numberDisplayOptions?.suffix,\n                              numberDisplayOptions?.locale,\n                              numberDisplayOptions?.padZeros,\n                            )\n                          : numberFormattingFunction(\n                              Math.min(\n                                ...data\n                                  .map((d) => d.value as number | undefined)\n                                  .filter((d) => d !== undefined),\n                              ),\n                              naLabel,\n                              numberDisplayOptions?.precision ?? 2,\n                              numberDisplayOptions?.prefix,\n                              numberDisplayOptions?.suffix,\n                              numberDisplayOptions?.locale,\n                              numberDisplayOptions?.padZeros,\n                            )}{' '}\n                  {year ? (\n                    <span\n                      className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\n                      style={{\n                        marginLeft: '-8px',\n                        lineHeight: '1.09',\n                        textShadow: 'none',\n                        WebkitTextStrokeWidth: 0,\n                      }}\n                    >\n                      ({year})\n                    </span>\n                  ) : null}\n                </H3>\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                />\n              ) : null}\n            </>\n          ) : (\n            <>\n              <H3\n                marginBottom={layout === 'secondary' ? 'none' : 'base'}\n                className={`leading-none text-outline font-heading ${\n                  centerAlign\n                    ? 'text-center'\n                    : language === 'he' || language === 'ar'\n                      ? 'text-right'\n                      : 'text-left'\n                } ${textBackground ? 'text-primary-black dark:text-primary-white' : 'transparent'}`}\n                style={{\n                  fontSize: headingFontSize,\n                  letterSpacing: '0.05rem',\n                }}\n              >\n                {data.filter((d) => typeof d.value === 'string').length > 0 ||\n                aggregationMethod === 'count'\n                  ? countOnly && countOnly?.length !== 0\n                    ? data.filter((d) => countOnly.indexOf(d.value) !== -1).length\n                    : data.length\n                  : aggregationMethod === 'sum'\n                    ? numberFormattingFunction(\n                        sum(data.map((d) => d.value)),\n                        naLabel,\n                        numberDisplayOptions?.precision ?? 2,\n                        numberDisplayOptions?.prefix,\n                        numberDisplayOptions?.suffix,\n                        numberDisplayOptions?.locale,\n                        numberDisplayOptions?.padZeros,\n                      )\n                    : aggregationMethod === 'average'\n                      ? numberFormattingFunction(\n                          parseFloat((sum(data.map((d) => d.value)) / data.length).toFixed(2)),\n                          naLabel,\n                          numberDisplayOptions?.precision ?? 2,\n                          numberDisplayOptions?.prefix,\n                          numberDisplayOptions?.suffix,\n                          numberDisplayOptions?.locale,\n                          numberDisplayOptions?.padZeros,\n                        )\n                      : aggregationMethod === 'max'\n                        ? numberFormattingFunction(\n                            Math.max(\n                              ...data\n                                .map((d) => d.value as number | undefined)\n                                .filter((d) => d !== undefined),\n                            ),\n                            naLabel,\n                            numberDisplayOptions?.precision ?? 2,\n                            numberDisplayOptions?.prefix,\n                            numberDisplayOptions?.suffix,\n                            numberDisplayOptions?.locale,\n                            numberDisplayOptions?.padZeros,\n                          )\n                        : numberFormattingFunction(\n                            Math.min(\n                              ...data\n                                .map((d) => d.value as number | undefined)\n                                .filter((d) => d !== undefined),\n                            ),\n                            naLabel,\n                            numberDisplayOptions?.precision ?? 2,\n                            numberDisplayOptions?.prefix,\n                            numberDisplayOptions?.suffix,\n                            numberDisplayOptions?.locale,\n                            numberDisplayOptions?.padZeros,\n                          )}{' '}\n                {year ? (\n                  <span\n                    className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\n                    style={{\n                      marginLeft: '-8px',\n                      lineHeight: '1.09',\n                      textShadow: 'none',\n                      WebkitTextStrokeWidth: 0,\n                    }}\n                  >\n                    ({year})\n                  </span>\n                ) : null}\n              </H3>\n              {graphTitle || graphDescription ? (\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                />\n              ) : null}\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                />\n              ) : null}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"waA0EA,SAAgB,EAAiB,EAAc,CAC7C,GAAM,CACJ,OACA,OACA,aACA,UACA,mBACA,WACA,UACA,kBAAkB,GAClB,UACA,oBAAoB,QACpB,WAAW,KACX,YACA,QAAQ,QACR,iBAAiB,GACjB,kBAAkB,WAClB,cAAc,GACd,gBAAgB,SAChB,SAAS,UACT,SACA,aACA,UAAU,KACV,wBACE,EAEJ,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,GAAG,GAAS,QAAQ,mBAClC,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,IAAK,IAAa,MAAQ,IAAa,KAAO,MAAQ,IAAA,GACtD,WAAA,EAAA,EAAA,IACE,GAAG,GAAS,QAAQ,0CACjB,EAEG,IAAoB,GAClB,+CACA,GAHF,iBAIL,GAAG,GAAY,OAChB,GAAY,cACd,EACA,MAAO,CACL,GAAI,GAAQ,gBAAkB,CAAC,EAC/B,GAAI,GAAmB,IAAoB,GAAO,CAAE,iBAAgB,EAAI,CAAC,EACzE,QAAS,EAAkB,GAAW,OAAS,GAAW,CAC5D,YAEA,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,6BAA6B,IAAW,YAAyC,uBAA3B,oCAEhE,IAAW,aAuHV,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,EAAA,GAAD,CACE,aAAc,IAAW,YAAc,OAAS,OAChD,UAAW,0CACT,EACI,cACA,IAAa,MAAQ,IAAa,KAChC,aACA,YACP,GAAG,EAAiB,6CAA+C,gBACpE,MAAO,CACL,SAAU,EACV,cAAe,SACjB,WAZF,CAcG,EAAK,OAAQ,GAAM,OAAO,EAAE,OAAU,QAAQ,EAAE,OAAS,GAC1D,IAAsB,QAClB,GAAa,GAAW,SAAW,EACjC,EAAK,OAAQ,GAAM,EAAU,QAAQ,EAAE,KAAK,IAAM,EAAE,EAAE,OACtD,EAAK,OACP,IAAsB,MACpB,EAAA,GAAA,EAAA,EAAA,SACM,EAAK,IAAK,GAAM,EAAE,KAAK,CAAC,EAC5B,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EACA,IAAsB,UACpB,EAAA,EACE,aAAA,EAAA,EAAA,SAAgB,EAAK,IAAK,GAAM,EAAE,KAAK,CAAC,EAAI,EAAK,QAAQ,QAAQ,CAAC,CAAC,EACnE,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EACA,IAAsB,MACpB,EAAA,EACE,KAAK,IACH,GAAG,EACA,IAAK,GAAM,EAAE,KAA2B,EACxC,OAAQ,GAAM,IAAM,IAAA,EAAS,CAClC,EACA,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EACA,EAAA,EACE,KAAK,IACH,GAAG,EACA,IAAK,GAAM,EAAE,KAA2B,EACxC,OAAQ,GAAM,IAAM,IAAA,EAAS,CAClC,EACA,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EAAG,IACZ,GACC,EAAA,EAAA,MAAC,OAAD,CACE,UAAU,iFACV,MAAO,CACL,WAAY,OACZ,WAAY,OACZ,WAAY,OACZ,sBAAuB,CACzB,WAPF,CAQC,IACG,EAAK,GACH,IACJ,IACF,IACH,GAAc,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CACN,MAAO,GAAQ,MACf,YAAa,GAAQ,WACvB,EACA,WAAY,CACV,MAAO,GAAY,MACnB,YAAa,GAAY,WAC3B,EACY,aACM,kBACnB,CAAA,EACC,KACH,GAAW,GACV,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CAAE,SAAU,GAAQ,SAAU,OAAQ,GAAQ,MAAO,EAC7D,WAAY,CACV,SAAU,GAAY,SACtB,OAAQ,GAAY,MACtB,EACS,UACC,UACX,CAAA,EACC,IACJ,CAAA,CAAA,GAhOF,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,GAAc,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CACN,MAAO,GAAQ,MACf,YAAa,GAAQ,WACvB,EACA,WAAY,CACV,MAAO,GAAY,MACnB,YAAa,GAAY,WAC3B,EACY,aACM,kBACnB,CAAA,EACC,MACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,sCACT,IAAkB,MACd,gBACA,IAAkB,SAChB,cACA,6BAGR,EAAA,EAAA,MAAC,EAAA,GAAD,CACE,aAAa,OACb,UAAW,0CACT,EACI,cACA,IAAa,MAAQ,IAAa,KAChC,aACA,YACP,GAAG,EAAiB,6CAA+C,gBACpE,MAAO,CACL,SAAU,EACV,cAAe,SACjB,WAZF,CAcG,EAAK,OAAQ,GAAM,OAAO,EAAE,OAAU,QAAQ,EAAE,OAAS,GAC1D,IAAsB,QAClB,GAAa,GAAW,SAAW,EACjC,EAAK,OAAQ,GAAM,EAAU,QAAQ,EAAE,KAAK,IAAM,EAAE,EAAE,OACtD,EAAK,OACP,IAAsB,MACpB,EAAA,GAAA,EAAA,EAAA,SACM,EAAK,IAAK,GAAM,EAAE,KAAK,CAAC,EAC5B,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EACA,IAAsB,UACpB,EAAA,EACE,aAAA,EAAA,EAAA,SAAgB,EAAK,IAAK,GAAM,EAAE,KAAK,CAAC,EAAI,EAAK,QAAQ,QAAQ,CAAC,CAAC,EACnE,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EACA,IAAsB,MACpB,EAAA,EACE,KAAK,IACH,GAAG,EACA,IAAK,GAAM,EAAE,KAA2B,EACxC,OAAQ,GAAM,IAAM,IAAA,EAAS,CAClC,EACA,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EACA,EAAA,EACE,KAAK,IACH,GAAG,EACA,IAAK,GAAM,EAAE,KAA2B,EACxC,OAAQ,GAAM,IAAM,IAAA,EAAS,CAClC,EACA,EACA,GAAsB,WAAa,EACnC,GAAsB,OACtB,GAAsB,OACtB,GAAsB,OACtB,GAAsB,QACxB,EAAG,IACZ,GACC,EAAA,EAAA,MAAC,OAAD,CACE,UAAU,iFACV,MAAO,CACL,WAAY,OACZ,WAAY,OACZ,WAAY,OACZ,sBAAuB,CACzB,WAPF,CAQC,IACG,EAAK,GACH,IACJ,IACF,GACD,CAAA,EACJ,GAAW,GACV,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CAAE,SAAU,GAAQ,SAAU,OAAQ,GAAQ,MAAO,EAC7D,WAAY,CACV,SAAU,GAAY,SACtB,OAAQ,GAAY,MACtB,EACS,UACC,UACX,CAAA,EACC,IACJ,CAAA,CAAA,CA8GD,CAAA,CACF,CAAA,CACF,CAAA,CAET"}

package/dist/StatCardFromData.d.ts

@@ -1,124 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare type 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: StatCardsFromDataSheetDataType[];
-    /** 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;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Defines the layout for the cards */
-    layout?: 'primary' | 'secondary';
-    /** Font size of the main text */
-    headingFontSize?: string;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Toggle the fill color of the main text. */
-    textBackground?: boolean;
-    /** Toggle is the text is center aligned. */
-    centerAlign?: boolean;
-    /** Vertical alignment of the main text */
-    verticalAlign?: 'center' | 'top' | 'bottom';
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Sub text next to main text */
-    year?: number | string;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Data points that need to counted for aggregation.  */
-    countOnly?: (string | number)[];
-    /** Method for aggregating the data to show as a single number in the card. If the data type of value in data object is string then only count is applicable. */
-    aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-export declare function StatCardFromData(props: Props): JSX.Element;
-
-declare type StatCardsFromDataSheetDataType = {
-    value: number | string;
-    data?: object;
-};
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/StatCard/StatCardFromData'
+export {}