@undp/data-viz 2.5.4 → 2.6.1

package/dist/DualAxisLineChart-DzVs-ftM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualAxisLineChart-DzVs-ftM.js","names":[],"sources":["../src/Components/Graphs/LineCharts/DualAxisLineChart/Graph.tsx","../src/Components/Graphs/LineCharts/DualAxisLineChart/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  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport { motion, useInView } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { HighlightArea } from '@/Components/Elements/HighlightArea';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  DualAxisLineChartDataType,\n  HighlightAreaSettingsDataType,\n  NumberFormatOptions,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: DualAxisLineChartDataType[];\n  lineColors: [string, string];\n  labels: [string, string];\n  width: number;\n  height: number;\n  dateFormat: string;\n  showValues: boolean;\n  noOfXTicks: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  sameAxes: boolean;\n  highlightAreaSettings: HighlightAreaSettingsDataType[];\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  animate: AnimateDataType;\n  strokeWidth: number;\n  showDots: boolean;\n  noOfYTicks: number;\n  minDate?: string | number;\n  maxDate?: string | number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  customLayers: CustomLayerDataType[];\n  showAxisLabels: boolean;\n  leftLineNumberDisplayOptions?: NumberFormatOptions;\n  rightLineNumberDisplayOptions?: NumberFormatOptions;\n  naLabel: string;\n}\n\ninterface FormattedDataType {\n  y1: number;\n  y2: number;\n  date: Date;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    lineColors,\n    labels,\n    sameAxes,\n    dateFormat,\n    showValues,\n    noOfXTicks,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    highlightAreaSettings,\n    onSeriesMouseOver,\n    animate,\n    strokeWidth,\n    showDots,\n    noOfYTicks,\n    leftLineNumberDisplayOptions,\n    rightLineNumberDisplayOptions,\n    minDate,\n    maxDate,\n    curveType,\n    styles,\n    classNames,\n    customLayers,\n    showAxisLabels,\n    naLabel,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const [hasAnimatedOnce, setHasAnimatedOnce] = useState(false);\n\n  useEffect(() => {\n    if (isInView && !hasAnimatedOnce) {\n      const timeout = setTimeout(\n        () => {\n          setHasAnimatedOnce(true);\n        },\n        (animate.duration + 0.5) * 1000,\n      );\n      return () => clearTimeout(timeout);\n    }\n  }, [isInView, hasAnimatedOnce, animate.duration]);\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: leftMargin + 50,\n    right: rightMargin + 65,\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 graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = minDate ? parse(`${minDate}`, dateFormat, new Date()) : dataFormatted[0].date;\n  const maxYear = maxDate\n    ? parse(`${maxDate}`, dateFormat, new Date())\n    : dataFormatted[dataFormatted.length - 1].date;\n  const minParam1 =\n    Math.min(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const minParam2 =\n    Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam1 =\n    Math.max(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam2 =\n    Math.max(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null))\n      : 0;\n\n  const minParam = minParam1 < minParam2 ? minParam1 : minParam2;\n  const maxParam = maxParam1 > maxParam2 ? maxParam1 : maxParam2;\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n\n  const y1 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam1,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam1 > 0 ? maxParam1 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n  const y2 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam2,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam2 > 0 ? maxParam2 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const lineShape1 = line<FormattedDataType>()\n    .defined((d) => !checkIfNullOrUndefined(d.y1))\n    .x((d) => x(d.date))\n    .y((d) => y1(d.y1))\n    .curve(curve);\n\n  const lineShape2 = line<FormattedDataType>()\n    .defined((d) => !checkIfNullOrUndefined(d.y2))\n    .x((d) => x(d.date))\n    .y((d) => y2(d.y2))\n    .curve(curve);\n  const y1Ticks = y1.ticks(noOfYTicks);\n  const y2Ticks = y2.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  }, [x, dataFormatted, onSeriesMouseOver]);\n\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <HighlightArea\n            areaSettings={highlightAreaSettingsFormatted}\n            width={graphWidth}\n            height={graphHeight}\n            scale={x}\n            animate={animate}\n            isInView={isInView}\n          />\n          <g>\n            {y1Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y1(d)}\n                  y2={y1(d)}\n                  x1={-15}\n                  x2={-20}\n                  style={{\n                    stroke: lineColors[0],\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={0 - 25}\n                  y={y1(d)}\n                  dy='0.33em'\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                  style={{\n                    textAnchor: 'end',\n                    fill: lineColors[0],\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    undefined,\n                    leftLineNumberDisplayOptions?.precision,\n                    leftLineNumberDisplayOptions?.prefix,\n                    leftLineNumberDisplayOptions?.suffix,\n                    leftLineNumberDisplayOptions?.locale,\n                    leftLineNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={-15}\n              x2={-15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: lineColors[0], ...(styles?.xAxis?.axis || {}) } }}\n            />\n\n            {showAxisLabels ? (\n              <AxisTitle\n                x={10 - margin.left}\n                y={graphHeight / 2}\n                style={{ fill: lineColors[0], ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={labels[0].length > 100 ? `${labels[0].substring(0, 100)}...` : labels[0]}\n                rotate90\n              />\n            ) : null}\n          </g>\n          <g>\n            {y2Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y2(d)}\n                  y2={y2(d)}\n                  x1={graphWidth + 15}\n                  x2={graphWidth + 20}\n                  style={{\n                    stroke: lineColors[1],\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={graphWidth + 25}\n                  y={y2(d)}\n                  dy='0.33em'\n                  dx={-2}\n                  style={{\n                    textAnchor: 'start',\n                    fill: lineColors[1],\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    undefined,\n                    rightLineNumberDisplayOptions?.precision,\n                    rightLineNumberDisplayOptions?.prefix,\n                    rightLineNumberDisplayOptions?.suffix,\n                    rightLineNumberDisplayOptions?.locale,\n                    rightLineNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={graphWidth + 15}\n              x2={graphWidth + 15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: lineColors[1], ...(styles?.xAxis?.axis || {}) } }}\n            />\n            {showAxisLabels ? (\n              <AxisTitle\n                x={graphWidth + margin.right - 15}\n                y={graphHeight / 2}\n                style={{ fill: lineColors[1], ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={labels[1].length > 100 ? `${labels[1].substring(0, 100)}...` : labels[1]}\n                rotate90\n              />\n            ) : null}\n          </g>\n          <g>\n            <Axis\n              y1={graphHeight}\n              y2={graphHeight}\n              x1={-15}\n              x2={graphWidth + 15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: styles?.xAxis?.axis }}\n            />\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-[9px] md:text-[10px] lg:text-xs',\n                  classNames?.xAxis?.labels,\n                ),\n              }}\n              labelType='primary'\n              showGridLines\n              padZeros={false}\n            />\n          </g>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            <motion.path\n              style={{\n                stroke: lineColors[0],\n                strokeWidth,\n                fill: 'none',\n              }}\n              exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              variants={{\n                initial: {\n                  pathLength: 0,\n                  d:\n                    lineShape1(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y1),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                },\n                whileInView: {\n                  pathLength: 1,\n                  d:\n                    lineShape1(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y1),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\n            />\n            <motion.path\n              d={\n                lineShape2(\n                  dataFormatted.filter(\n                    (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y2),\n                  ),\n                ) || ''\n              }\n              style={{\n                stroke: lineColors[1],\n                strokeWidth,\n                fill: 'none',\n              }}\n              exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              variants={{\n                initial: {\n                  pathLength: 0,\n                  d:\n                    lineShape2(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y2),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                },\n                whileInView: {\n                  pathLength: 1,\n                  d:\n                    lineShape2(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y2),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\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          </g>\n          <g>\n            {dataFormatted.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <motion.g key={i}>\n                {!checkIfNullOrUndefined(d.y1) ? (\n                  <>\n                    {showDots ? (\n                      <motion.circle\n                        r={\n                          graphWidth / dataFormatted.length < 5\n                            ? 0\n                            : graphWidth / dataFormatted.length < 20\n                              ? 2\n                              : 4\n                        }\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            cx: x(d.date),\n                            cy: y1(d.y1 as number),\n                            fill: lineColors[0],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            fill: lineColors[0],\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                            cx: x(d.date),\n                            cy: y1(d.y1 as number),\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        dy={\n                          checkIfNullOrUndefined(d.y2)\n                            ? -8\n                            : (d.y2 as number) < (d.y1 as number)\n                              ? -8\n                              : '1em'\n                        }\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn(\n                          'graph-value graph-value-line-1 text-xs font-bold',\n                          classNames?.graphObjectValues,\n                        )}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            x: x(d.date),\n                            y: y2(d.y1 as number),\n                            fill: lineColors[0],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            x: x(d.date),\n                            fill: lineColors[0],\n                            y: y2(d.y1 as number),\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.y1,\n                          naLabel,\n                          leftLineNumberDisplayOptions?.precision ?? 2,\n                          leftLineNumberDisplayOptions?.prefix,\n                          leftLineNumberDisplayOptions?.suffix,\n                          leftLineNumberDisplayOptions?.locale,\n                          leftLineNumberDisplayOptions?.padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </>\n                ) : null}\n                {!checkIfNullOrUndefined(d.y2) ? (\n                  <>\n                    {showDots ? (\n                      <motion.circle\n                        r={\n                          graphWidth / dataFormatted.length < 5\n                            ? 0\n                            : graphWidth / dataFormatted.length < 20\n                              ? 2\n                              : 4\n                        }\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            cx: x(d.date),\n                            cy: y2(d.y2 as number),\n                            fill: lineColors[1],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                            fill: lineColors[1],\n                            cx: x(d.date),\n                            cy: y2(d.y2 as number),\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        dy={\n                          checkIfNullOrUndefined(d.y1)\n                            ? -8\n                            : (d.y1 as number) < (d.y2 as number)\n                              ? -8\n                              : '1em'\n                        }\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn(\n                          'graph-value graph-value-line-2 text-xs font-bold',\n                          classNames?.graphObjectValues,\n                        )}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            x: x(d.date),\n                            y: y2(d.y2 as number),\n                            fill: lineColors[1],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            x: x(d.date),\n                            y: y2(d.y2 as number),\n                            fill: lineColors[1],\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.y2,\n                          naLabel,\n                          rightLineNumberDisplayOptions?.precision ?? 2,\n                          rightLineNumberDisplayOptions?.prefix,\n                          rightLineNumberDisplayOptions?.suffix,\n                          rightLineNumberDisplayOptions?.locale,\n                          rightLineNumberDisplayOptions?.padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </>\n                ) : null}\n              </motion.g>\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        </g>\n      </motion.svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  DualAxisLineChartDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  NumberFormatOptions,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { getNoOfTicks } from '@/Utils/getNoOfTicks';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: DualAxisLineChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Array of colors for the 2 lines */\n  lineColors?: [string, 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 of the date for the chart */\n  maxDate?: string | number;\n  /** Minimum value of the date for the chart */\n  minDate?: string | number;\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  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Toggle visibility of dots on the line */\n  showDots?: boolean;\n  /** Stroke width of the line */\n  strokeWidth?: number;\n  /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */\n  animate?: boolean | AnimateDataType;\n  /** Enables same axis for the 2 lines */\n  sameAxes?: boolean;\n  /** Toggle visibility of color scale. */\n  showColorScale?: boolean;\n  /** Toggle visibility of labels of the axis. */\n  showAxisLabels?: boolean;\n  /** Labels for the lines  */\n  labels: [string, string];\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  /** Highlighted area(square) on the chart  */\n  highlightAreaSettings?: HighlightAreaSettingsDataType[];\n  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for left line. */\n  leftLineNumberDisplayOptions?: NumberFormatOptions;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for right line. */\n  rightLineNumberDisplayOptions?: NumberFormatOptions;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** 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 DualAxisLineChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks,\n    dateFormat = 'yyyy',\n    showValues = false,\n    padding,\n    lineColors = [\n      Colors.light.categoricalColors.colors[0],\n      Colors.light.categoricalColors.colors[1],\n    ],\n    sameAxes = false,\n    backgroundColor = false,\n    leftMargin = 80,\n    rightMargin = 80,\n    topMargin = 20,\n    bottomMargin = 25,\n    labels,\n    rightLineNumberDisplayOptions,\n    leftLineNumberDisplayOptions,\n    tooltip,\n    highlightAreaSettings = [],\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    graphDownload = false,\n    dataDownload = false,\n    animate = false,\n    strokeWidth = 2,\n    showDots = true,\n    language = 'en',\n    showColorScale = true,\n    minHeight = 0,\n    colorLegendTitle,\n    theme = 'light',\n    ariaLabel,\n    noOfYTicks = 5,\n    maxDate,\n    minDate,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n    showAxisLabels = true,\n    naLabel = 'NA',\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {showColorScale && labels.length > 0 ? (\n        <ColorLegend\n          colorDomain={labels}\n          colorLegendTitle={colorLegendTitle}\n          colors={lineColors}\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            sameAxes={sameAxes}\n            lineColors={lineColors}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            showValues={showValues}\n            noOfXTicks={noOfXTicks ?? getNoOfTicks(svgWidth)}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            labels={labels}\n            highlightAreaSettings={highlightAreaSettings}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            strokeWidth={strokeWidth}\n            showDots={showDots}\n            noOfYTicks={noOfYTicks}\n            leftLineNumberDisplayOptions={leftLineNumberDisplayOptions}\n            rightLineNumberDisplayOptions={rightLineNumberDisplayOptions}\n            minDate={minDate}\n            maxDate={maxDate}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\n            showAxisLabels={showAxisLabels}\n            naLabel={naLabel}\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/DualAxisLineChart.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-CHPV5EwG-D4pAp7u0.cjs"),N=require("react"),Ft=require("./parse-xYI9yrvL.cjs"),Re=require("./index-Cno4Q0YE.cjs"),ae=require("./numberFormattingFunction-u2iNHL_c.cjs"),ke=require("./Tooltip-C9F3uYG0.cjs"),T=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),Ne=require("./XTicksAndGridLines-B4UhDVyU.cjs"),he=require("./Axis-BTaS9oPQ.cjs"),ve=require("./AxisTitle-DP_evhbe.cjs"),Le=require("./index-BuhBhuCq.cjs"),Oe=require("./time-CkcKbhwe.cjs"),je=require("./linear-CgUCbw9F.cjs"),ye=require("./line-DaEMhXmx.cjs"),ce=require("./step-BZ3C8QFW.cjs"),De=require("./select-Bnfk0lJx.cjs"),ct=require("./proxy-CqH8m8IQ.cjs"),Ie=require("./init-DU0ybBc_.cjs"),qe=require("./pointer-Dkq5NV1q.cjs"),Me=require("./use-in-view-dnRv_qqF.cjs"),Se=require("./GraphFooter.cjs"),Te=require("./GraphHeader.cjs"),Ce=require("./ColorLegend.cjs"),Ae=require("./Colors.cjs"),Ve=require("./EmptyState-CFmiFPHz.cjs"),we=require("./GraphContainer-Cul9b74X.cjs"),$e=require("./getNoOfTicks-C_1CFXv_.cjs");function Fe(e){const t=n.compilerRuntimeExports.c(117),{data:v,width:B,height:z,lineColors:o,labels:j,sameAxes:A,dateFormat:p,showValues:At,noOfXTicks:Zt,rightMargin:Bt,leftMargin:Gt,topMargin:J,bottomMargin:wt,tooltip:ut,highlightAreaSettings:bt,onSeriesMouseOver:Et,animate:s,strokeWidth:H,showDots:C,noOfYTicks:Rt,leftLineNumberDisplayOptions:w,rightLineNumberDisplayOptions:b,minDate:xt,maxDate:kt,curveType:K,styles:a,classNames:c,customLayers:U,showAxisLabels:P,naLabel:Ht}=e,Ut=N.useRef(null);let mt;t[0]!==s.amount||t[1]!==s.once?(mt={once:s.once,amount:s.amount},t[0]=s.amount,t[1]=s.once,t[2]=mt):mt=t[2];const d=Me.useInView(Ut,mt),[y,Pt]=N.useState(!1);let pt,Q;t[3]!==s.duration||t[4]!==y||t[5]!==d?(pt=()=>{if(d&&!y){const i=setTimeout(()=>{Pt(!0)},(s.duration+.5)*1e3);return()=>clearTimeout(i)}},Q=[d,y,s.duration],t[3]=s.duration,t[4]=y,t[5]=d,t[6]=pt,t[7]=Q):(pt=t[6],Q=t[7]),N.useEffect(pt,Q);const Wt=K==="linear"?ye.curveLinear:K==="step"?ce.curveStep:K==="stepAfter"?ce.stepAfter:K==="stepBefore"?ce.stepBefore:ce.monotoneX,[O,Nt]=N.useState(void 0),[ft,f]=N.useState(void 0),[u,dt]=N.useState(void 0),Lt=Gt+50,Ot=Bt+65;let _;t[8]!==wt||t[9]!==Lt||t[10]!==Ot||t[11]!==J?(_={top:J,bottom:wt,left:Lt,right:Ot},t[8]=wt,t[9]=Lt,t[10]=Ot,t[11]=J,t[12]=_):_=t[12];const h=_,W=N.useRef(null);let D;t[13]!==p?(D=i=>({...i,date:Ft.parse(`${i.date}`,p,new Date)}),t[13]=p,t[14]=D):D=t[14];const r=Re.orderBy(v.map(D),["date"],["asc"]);let tt;if(t[15]!==p||t[16]!==bt){let i;t[18]!==p?(i=k=>({...k,coordinates:[k.coordinates[0]===null?null:Ft.parse(`${k.coordinates[0]}`,p,new Date),k.coordinates[1]===null?null:Ft.parse(`${k.coordinates[1]}`,p,new Date)]}),t[18]=p,t[19]=i):i=t[19],tt=bt.map(i),t[15]=p,t[16]=bt,t[17]=tt}else tt=t[17];const ht=tt,x=B-h.left-h.right,l=z-h.top-h.bottom,Xt=xt?Ft.parse(`${xt}`,p,new Date):r[0].date,Dt=kt?Ft.parse(`${kt}`,p,new Date):r[r.length-1].date,yt=Math.min(...r.map(yi).filter(hi))!==1/0?Math.min(...r.map(di).filter(fi))>0?0:Math.min(...r.map(pi).filter(mi)):0,et=Math.min(...r.map(xi).filter(ui))!==1/0?Math.min(...r.map(ci).filter(ai))>0?0:Math.min(...r.map(li).filter(ri)):0,X=Math.max(...r.map(oi).filter(si))!==1/0?Math.max(...r.map(ni).filter(ii)):0,Y=Math.max(...r.map(ei).filter(ti))!==1/0?Math.max(...r.map(_e).filter(Qe)):0,It=yt<et?yt:et,it=X>Y?X:Y,m=Oe.time().domain([Xt,Dt]).range([0,x]),I=je.linear().domain([A?It:yt,A?it>0?it:0:X>0?X:0]).range([l,0]).nice(),g=je.linear().domain([A?It:et,A?it>0?it:0:Y>0?Y:0]).range([l,0]).nice(),qt=ye.line().defined(Ke).x(i=>m(i.date)).y(i=>I(i.y1)).curve(Wt),gt=ye.line().defined(Je).x(i=>m(i.date)).y(i=>g(i.y2)).curve(Wt),Yt=I.ticks(Rt),Mt=g.ticks(Rt),St=m.ticks(Zt);N.useEffect(()=>{const i=de=>{const ge=r[Ie.bisectCenter(r.map(ze),m.invert(qe.pointer(de)[0]),0)];Nt(ge||r[r.length-1]),Et?.(ge||r[r.length-1]),dt(de.clientY),f(de.clientX)},k=()=>{Nt(void 0),f(void 0),dt(void 0),Et?.(void 0)};De.select(W.current).on("mousemove",i).on("mouseout",k)},[m,r,Et]);let nt;t[20]!==s||t[21]!==l||t[22]!==x||t[23]!==ht||t[24]!==d||t[25]!==m?(nt=n.jsxRuntimeExports.jsx(Le.HighlightArea,{areaSettings:ht,width:x,height:l,scale:m,animate:s,isInView:d}),t[20]=s,t[21]=l,t[22]=x,t[23]=ht,t[24]=d,t[25]=m,t[26]=nt):nt=t[26];const vt=c?.xAxis?.axis;let L;t[27]!==vt?(L={axis:vt},t[27]=vt,t[28]=L):L=t[28];let st;t[29]!==a?.xAxis?.axis?(st=a?.xAxis?.axis||{},t[29]=a?.xAxis?.axis,t[30]=st):st=t[30];let q;t[31]!==o[0]||t[32]!==st?(q={axis:{stroke:o[0],...st}},t[31]=o[0],t[32]=st,t[33]=q):q=t[33];let Tt;t[34]!==l||t[35]!==L||t[36]!==q?(Tt=n.jsxRuntimeExports.jsx(he.Axis,{y1:0,y2:l,x1:-15,x2:-15,classNames:L,styles:q}),t[34]=l,t[35]=L,t[36]=q,t[37]=Tt):Tt=t[37];let ot;t[38]!==c?.yAxis?.title||t[39]!==l||t[40]!==j||t[41]!==o[0]||t[42]!==h.left||t[43]!==P||t[44]!==a?.yAxis?.title?(ot=P?n.jsxRuntimeExports.jsx(ve.AxisTitle,{x:10-h.left,y:l/2,style:{fill:o[0],...a?.yAxis?.title||{}},className:c?.yAxis?.title,text:j[0].length>100?`${j[0].substring(0,100)}...`:j[0],rotate90:!0}):null,t[38]=c?.yAxis?.title,t[39]=l,t[40]=j,t[41]=o[0],t[42]=h.left,t[43]=P,t[44]=a?.yAxis?.title,t[45]=ot):ot=t[45];const Ct=x+15,rt=x+15,lt=c?.xAxis?.axis;let V;t[46]!==lt?(V={axis:lt},t[46]=lt,t[47]=V):V=t[47];let $;t[48]!==a?.xAxis?.axis?($=a?.xAxis?.axis||{},t[48]=a?.xAxis?.axis,t[49]=$):$=t[49];let E;t[50]!==o[1]||t[51]!==$?(E={axis:{stroke:o[1],...$}},t[50]=o[1],t[51]=$,t[52]=E):E=t[52];let M;t[53]!==l||t[54]!==Ct||t[55]!==rt||t[56]!==V||t[57]!==E?(M=n.jsxRuntimeExports.jsx(he.Axis,{y1:0,y2:l,x1:Ct,x2:rt,classNames:V,styles:E}),t[53]=l,t[54]=Ct,t[55]=rt,t[56]=V,t[57]=E,t[58]=M):M=t[58];let S;t[59]!==c?.yAxis?.title||t[60]!==l||t[61]!==x||t[62]!==j||t[63]!==o[1]||t[64]!==h.right||t[65]!==P||t[66]!==a?.yAxis?.title?(S=P?n.jsxRuntimeExports.jsx(ve.AxisTitle,{x:x+h.right-15,y:l/2,style:{fill:o[1],...a?.yAxis?.title||{}},className:c?.yAxis?.title,text:j[1].length>100?`${j[1].substring(0,100)}...`:j[1],rotate90:!0}):null,t[59]=c?.yAxis?.title,t[60]=l,t[61]=x,t[62]=j,t[63]=o[1],t[64]=h.right,t[65]=P,t[66]=a?.yAxis?.title,t[67]=S):S=t[67];const F=x+15,G=c?.xAxis?.axis;let R;t[68]!==G?(R={axis:G},t[68]=G,t[69]=R):R=t[69];const at=a?.xAxis?.axis;let Z;t[70]!==at?(Z={axis:at},t[70]=at,t[71]=Z):Z=t[71];let jt;t[72]!==l||t[73]!==F||t[74]!==R||t[75]!==Z?(jt=n.jsxRuntimeExports.jsx(he.Axis,{y1:l,y2:l,x1:-15,x2:F,classNames:R,styles:Z}),t[72]=l,t[73]=F,t[74]=R,t[75]=Z,t[76]=jt):jt=t[76];let zt;t[77]!==p?(zt=i=>Ft.format(i,p),t[77]=p,t[78]=zt):zt=t[78];const be=St.map(zt),Ee=St.map(i=>m(i)),ue=a?.xAxis?.gridLines,xe=a?.xAxis?.labels;let Jt;t[79]!==ue||t[80]!==xe?(Jt={gridLines:ue,labels:xe},t[79]=ue,t[80]=xe,t[81]=Jt):Jt=t[81];const me=c?.xAxis?.gridLines;let Vt;t[82]!==me?(Vt=n.mo("opacity-0",me),t[82]=me,t[83]=Vt):Vt=t[83];const pe=c?.xAxis?.labels;let $t;t[84]!==pe?($t=n.mo("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",pe),t[84]=pe,t[85]=$t):$t=t[85];let Kt;t[86]!==Vt||t[87]!==$t?(Kt={gridLines:Vt,labels:$t},t[86]=Vt,t[87]=$t,t[88]=Kt):Kt=t[88];let Qt;t[89]!==U?(Qt=U.filter(Be).map(Ze),t[89]=U,t[90]=Qt):Qt=t[90];let _t;t[91]!==o[0]||t[92]!==H?(_t={stroke:o[0],strokeWidth:H,fill:"none"},t[91]=o[0],t[92]=H,t[93]=_t):_t=t[93];let te;t[94]!==s.duration?(te={opacity:0,transition:{duration:s.duration}},t[94]=s.duration,t[95]=te):te=t[95];let ee;t[96]!==o[1]||t[97]!==H?(ee={stroke:o[1],strokeWidth:H,fill:"none"},t[96]=o[1],t[97]=H,t[98]=ee):ee=t[98];let ie;t[99]!==s.duration?(ie={opacity:0,transition:{duration:s.duration}},t[99]=s.duration,t[100]=ie):ie=t[100];const fe=r.map((i,k)=>n.jsxRuntimeExports.jsxs(ct.motion.g,{children:[T.checkIfNullOrUndefined(i.y1)?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[C?n.jsxRuntimeExports.jsx(ct.motion.circle,{r:x/r.length<5?0:x/r.length<20?2:4,exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,cx:m(i.date),cy:I(i.y1),fill:o[0]},whileInView:{opacity:1,fill:o[0],transition:{duration:y?s.duration:.5,delay:y?0:s.duration},cx:m(i.date),cy:I(i.y1)}},initial:"initial",animate:d?"whileInView":"initial"}):null,At?n.jsxRuntimeExports.jsx(ct.motion.text,{dy:T.checkIfNullOrUndefined(i.y2)||i.y2<i.y1?-8:"1em",style:{textAnchor:"middle",...a?.graphObjectValues||{}},className:n.mo("graph-value graph-value-line-1 text-xs font-bold",c?.graphObjectValues),exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,x:m(i.date),y:g(i.y1),fill:o[0]},whileInView:{opacity:1,x:m(i.date),fill:o[0],y:g(i.y1),transition:{duration:y?s.duration:.5,delay:y?0:s.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:ae.numberFormattingFunction(i.y1,Ht,w?.precision??2,w?.prefix,w?.suffix,w?.locale,w?.padZeros)}):null]}),T.checkIfNullOrUndefined(i.y2)?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[C?n.jsxRuntimeExports.jsx(ct.motion.circle,{r:x/r.length<5?0:x/r.length<20?2:4,exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,cx:m(i.date),cy:g(i.y2),fill:o[1]},whileInView:{opacity:1,transition:{duration:y?s.duration:.5,delay:y?0:s.duration},fill:o[1],cx:m(i.date),cy:g(i.y2)}},initial:"initial",animate:d?"whileInView":"initial"}):null,At?n.jsxRuntimeExports.jsx(ct.motion.text,{dy:T.checkIfNullOrUndefined(i.y1)||i.y1<i.y2?-8:"1em",style:{textAnchor:"middle",...a?.graphObjectValues||{}},className:n.mo("graph-value graph-value-line-2 text-xs font-bold",c?.graphObjectValues),exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,x:m(i.date),y:g(i.y2),fill:o[1]},whileInView:{opacity:1,x:m(i.date),y:g(i.y2),fill:o[1],transition:{duration:y?s.duration:.5,delay:y?0:s.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:ae.numberFormattingFunction(i.y2,Ht,b?.precision??2,b?.prefix,b?.suffix,b?.locale,b?.padZeros)}):null]})]},k));let ne;t[101]!==fe?(ne=n.jsxRuntimeExports.jsx("g",{children:fe}),t[101]=fe,t[102]=ne):ne=t[102];let se;t[103]!==U?(se=U.filter(He).map(Ge),t[103]=U,t[104]=se):se=t[104];let oe;t[105]===Symbol.for("react.memo_cache_sentinel")?(oe={fill:"none",pointerEvents:"all"},t[105]=oe):oe=t[105];let re;t[106]!==W||t[107]!==l||t[108]!==x?(re=n.jsxRuntimeExports.jsx("rect",{ref:W,style:oe,width:x,height:l}),t[106]=W,t[107]=l,t[108]=x,t[109]=re):re=t[109];let le;return t[110]!==c?.tooltip||t[111]!==ft||t[112]!==u||t[113]!==O||t[114]!==a?.tooltip||t[115]!==ut?(le=O&&ut&&ft&&u?n.jsxRuntimeExports.jsx(ke.Tooltip,{data:O,body:ut,xPos:ft,yPos:u,backgroundStyle:a?.tooltip,className:c?.tooltip}):null,t[110]=c?.tooltip,t[111]=ft,t[112]=u,t[113]=O,t[114]=a?.tooltip,t[115]=ut,t[116]=le):le=t[116],n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(ct.motion.svg,{width:`${B}px`,height:`${z}px`,viewBox:`0 0 ${B} ${z}`,direction:"ltr",ref:Ut,children:n.jsxRuntimeExports.jsxs("g",{transform:`translate(${h.left},${h.top})`,children:[nt,n.jsxRuntimeExports.jsxs("g",{children:[Yt.map((i,k)=>n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx("line",{y1:I(i),y2:I(i),x1:-15,x2:-20,style:{stroke:o[0],strokeWidth:1,...a?.yAxis?.gridLines||{}},className:c?.yAxis?.gridLines}),n.jsxRuntimeExports.jsx("text",{x:-25,y:I(i),dy:"0.33em",className:n.mo("text-xs",c?.yAxis?.labels),style:{textAnchor:"end",fill:o[0],...a?.yAxis?.labels||{}},children:ae.numberFormattingFunction(i,void 0,w?.precision,w?.prefix,w?.suffix,w?.locale,w?.padZeros)})]},k)),Tt,ot]}),n.jsxRuntimeExports.jsxs("g",{children:[Mt.map((i,k)=>n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx("line",{y1:g(i),y2:g(i),x1:x+15,x2:x+20,style:{stroke:o[1],strokeWidth:1,...a?.yAxis?.gridLines||{}},className:c?.yAxis?.gridLines}),n.jsxRuntimeExports.jsx("text",{x:x+25,y:g(i),dy:"0.33em",dx:-2,style:{textAnchor:"start",fill:o[1],...a?.yAxis?.labels||{}},className:n.mo("text-xs",c?.yAxis?.labels),children:ae.numberFormattingFunction(i,void 0,b?.precision,b?.prefix,b?.suffix,b?.locale,b?.padZeros)})]},k)),M,S]}),n.jsxRuntimeExports.jsxs("g",{children:[jt,n.jsxRuntimeExports.jsx(Ne.XTicksAndGridLines,{values:be,x:Ee,y1:0,y2:l,styles:Jt,classNames:Kt,labelType:"primary",showGridLines:!0,padZeros:!1})]}),Qt,n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx(ct.motion.path,{style:_t,exit:te,variants:{initial:{pathLength:0,d:qt(r.filter(Ye))||"",opacity:1},whileInView:{pathLength:1,d:qt(r.filter(Xe))||"",opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:d?"whileInView":"initial"}),n.jsxRuntimeExports.jsx(ct.motion.path,{d:gt(r.filter(We))||"",style:ee,exit:ie,variants:{initial:{pathLength:0,d:gt(r.filter(Pe))||"",opacity:1},whileInView:{pathLength:1,d:gt(r.filter(Ue))||"",opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:d?"whileInView":"initial"}),O?n.jsxRuntimeExports.jsx("line",{y1:0,y2:l,x1:m(O.date),x2:m(O.date),className:n.mo("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",c?.mouseOverLine),style:a?.mouseOverLine}):null]}),ne,se,re]})}),le]})}function Ge(e){return e.layer}function He(e){return e.position==="after"}function Ue(e){return!T.checkIfNullOrUndefined(e.y2)}function Pe(e){return!T.checkIfNullOrUndefined(e.y2)}function We(e){return!T.checkIfNullOrUndefined(e.y2)}function Xe(e){return!T.checkIfNullOrUndefined(e.y1)}function Ye(e){return!T.checkIfNullOrUndefined(e.y1)}function Ze(e){return e.layer}function Be(e){return e.position==="before"}function ze(e){return e.date}function Je(e){return!T.checkIfNullOrUndefined(e.y2)}function Ke(e){return!T.checkIfNullOrUndefined(e.y1)}function Qe(e){return e!=null}function _e(e){return e.y2}function ti(e){return e!=null}function ei(e){return e.y2}function ii(e){return e!=null}function ni(e){return e.y1}function si(e){return e!=null}function oi(e){return e.y1}function ri(e){return e!=null}function li(e){return e.y2}function ai(e){return e!=null}function ci(e){return e.y2}function ui(e){return e!=null}function xi(e){return e.y2}function mi(e){return e!=null}function pi(e){return e.y1}function fi(e){return e!=null}function di(e){return e.y2}function hi(e){return e!=null}function yi(e){return e.y1}function gi(e){const t=n.compilerRuntimeExports.c(86),{data:v,graphTitle:B,sources:z,graphDescription:o,height:j,width:A,footNote:p,noOfXTicks:At,dateFormat:Zt,showValues:Bt,padding:Gt,lineColors:J,sameAxes:wt,backgroundColor:ut,leftMargin:bt,rightMargin:Et,topMargin:s,bottomMargin:H,labels:C,rightLineNumberDisplayOptions:Rt,leftLineNumberDisplayOptions:w,tooltip:b,highlightAreaSettings:xt,relativeHeight:kt,onSeriesMouseOver:K,graphID:a,graphDownload:c,dataDownload:U,animate:P,strokeWidth:Ht,showDots:Ut,language:mt,showColorScale:d,minHeight:y,colorLegendTitle:Pt,theme:pt,ariaLabel:Q,noOfYTicks:Wt,maxDate:O,minDate:Nt,curveType:ft,styles:f,classNames:u,customLayers:dt,showAxisLabels:Lt,naLabel:Ot}=e,_=Zt===void 0?"yyyy":Zt,h=Bt===void 0?!1:Bt;let W;t[0]!==J?(W=J===void 0?[Ae.Colors.light.categoricalColors.colors[0],Ae.Colors.light.categoricalColors.colors[1]]:J,t[0]=J,t[1]=W):W=t[1];const D=W,r=wt===void 0?!1:wt,tt=ut===void 0?!1:ut,ht=bt===void 0?80:bt,x=Et===void 0?80:Et,l=s===void 0?20:s,Xt=H===void 0?25:H;let Dt;t[2]!==xt?(Dt=xt===void 0?[]:xt,t[2]=xt,t[3]=Dt):Dt=t[3];const yt=Dt,et=c===void 0?!1:c,X=U===void 0?!1:U,Y=P===void 0?!1:P,It=Ht===void 0?2:Ht,it=Ut===void 0?!0:Ut,m=mt===void 0?"en":mt,I=d===void 0?!0:d,g=y===void 0?0:y,qt=pt===void 0?"light":pt,gt=Wt===void 0?5:Wt,Yt=ft===void 0?"curve":ft;let Mt;t[4]!==dt?(Mt=dt===void 0?[]:dt,t[4]=dt,t[5]=Mt):Mt=t[5];const St=Mt,nt=Lt===void 0?!0:Lt,vt=Ot===void 0?"NA":Ot,[L,st]=N.useState(0),[q,Tt]=N.useState(0),ot=N.useRef(null),Ct=N.useRef(null);let rt,lt;t[6]===Symbol.for("react.memo_cache_sentinel")?(rt=()=>{const Z=new ResizeObserver(jt=>{st(jt[0].target.clientWidth||620),Tt(jt[0].target.clientHeight||480)});return ot.current&&Z.observe(ot.current),()=>Z.disconnect()},lt=[],t[6]=rt,t[7]=lt):(rt=t[6],lt=t[7]),N.useEffect(rt,lt);const V=u?.graphContainer,$=f?.graphContainer;let E;t[8]!==u?.description||t[9]!==u?.title||t[10]!==v||t[11]!==X||t[12]!==o||t[13]!==et||t[14]!==B||t[15]!==f?.description||t[16]!==f?.title||t[17]!==A?(E=B||o||et||X?n.jsxRuntimeExports.jsx(Te.GraphHeader,{styles:{title:f?.title,description:f?.description},classNames:{title:u?.title,description:u?.description},graphTitle:B,graphDescription:o,width:A,graphDownload:et?Ct:void 0,dataDownload:X?v.map(bi).filter(wi).length>0?v.map(Ai).filter(ji):v.filter(vi):null}):null,t[8]=u?.description,t[9]=u?.title,t[10]=v,t[11]=X,t[12]=o,t[13]=et,t[14]=B,t[15]=f?.description,t[16]=f?.title,t[17]=A,t[18]=E):E=t[18];let M;t[19]!==u?.colorLegend||t[20]!==Pt||t[21]!==C||t[22]!==D||t[23]!==I?(M=I&&C.length>0?n.jsxRuntimeExports.jsx(Ce.ColorLegend,{colorDomain:C,colorLegendTitle:Pt,colors:D,showNAColor:!1,className:u?.colorLegend}):null,t[19]=u?.colorLegend,t[20]=Pt,t[21]=C,t[22]=D,t[23]=I,t[24]=M):M=t[24];let S;t[25]!==v.length?(S=v.length===0&&n.jsxRuntimeExports.jsx(Ve.EmptyState,{}),t[25]=v.length,t[26]=S):S=t[26];let F;t[27]!==Y||t[28]!==Xt||t[29]!==u||t[30]!==Yt||t[31]!==St||t[32]!==v||t[33]!==_||t[34]!==yt||t[35]!==C||t[36]!==w||t[37]!==ht||t[38]!==D||t[39]!==O||t[40]!==Nt||t[41]!==vt||t[42]!==At||t[43]!==gt||t[44]!==K||t[45]!==Rt||t[46]!==x||t[47]!==r||t[48]!==nt||t[49]!==it||t[50]!==h||t[51]!==It||t[52]!==f||t[53]!==q||t[54]!==L||t[55]!==b||t[56]!==l?(F=L&&q&&v.length>0?n.jsxRuntimeExports.jsx(Fe,{data:v,sameAxes:r,lineColors:D,width:L,height:q,dateFormat:_,showValues:h,noOfXTicks:At??$e.getNoOfTicks(L),leftMargin:ht,rightMargin:x,topMargin:l,bottomMargin:Xt,labels:C,highlightAreaSettings:yt,tooltip:b,onSeriesMouseOver:K,animate:Y===!0?{duration:.5,once:!0,amount:.5}:Y||{duration:0,once:!0,amount:0},strokeWidth:It,showDots:it,noOfYTicks:gt,leftLineNumberDisplayOptions:w,rightLineNumberDisplayOptions:Rt,minDate:Nt,maxDate:O,curveType:Yt,styles:f,classNames:u,customLayers:St,showAxisLabels:nt,naLabel:vt}):null,t[27]=Y,t[28]=Xt,t[29]=u,t[30]=Yt,t[31]=St,t[32]=v,t[33]=_,t[34]=yt,t[35]=C,t[36]=w,t[37]=ht,t[38]=D,t[39]=O,t[40]=Nt,t[41]=vt,t[42]=At,t[43]=gt,t[44]=K,t[45]=Rt,t[46]=x,t[47]=r,t[48]=nt,t[49]=it,t[50]=h,t[51]=It,t[52]=f,t[53]=q,t[54]=L,t[55]=b,t[56]=l,t[57]=F):F=t[57];let G;t[58]!==S||t[59]!==F?(G=n.jsxRuntimeExports.jsxs(we.GraphArea,{ref:ot,children:[S,F]}),t[58]=S,t[59]=F,t[60]=G):G=t[60];let R;t[61]!==u?.footnote||t[62]!==u?.source||t[63]!==p||t[64]!==z||t[65]!==f?.footnote||t[66]!==f?.source||t[67]!==A?(R=z||p?n.jsxRuntimeExports.jsx(Se.GraphFooter,{styles:{footnote:f?.footnote,source:f?.source},classNames:{footnote:u?.footnote,source:u?.source},sources:z,footNote:p,width:A}):null,t[61]=u?.footnote,t[62]=u?.source,t[63]=p,t[64]=z,t[65]=f?.footnote,t[66]=f?.source,t[67]=A,t[68]=R):R=t[68];let at;return t[69]!==Q||t[70]!==tt||t[71]!==a||t[72]!==j||t[73]!==m||t[74]!==g||t[75]!==Gt||t[76]!==kt||t[77]!==V||t[78]!==$||t[79]!==E||t[80]!==M||t[81]!==G||t[82]!==R||t[83]!==qt||t[84]!==A?(at=n.jsxRuntimeExports.jsxs(we.GraphContainer,{className:V,style:$,id:a,ref:Ct,"aria-label":Q,backgroundColor:tt,theme:qt,language:m,minHeight:g,width:A,height:j,relativeHeight:kt,padding:Gt,children:[E,M,G,R]}),t[69]=Q,t[70]=tt,t[71]=a,t[72]=j,t[73]=m,t[74]=g,t[75]=Gt,t[76]=kt,t[77]=V,t[78]=$,t[79]=E,t[80]=M,t[81]=G,t[82]=R,t[83]=qt,t[84]=A,t[85]=at):at=t[85],at}function vi(e){return e!==void 0}function ji(e){return e!==void 0}function Ai(e){return e.data}function wi(e){return e!==void 0}function bi(e){return e.data}exports.DualAxisLineChart=gi;
-//# sourceMappingURL=DualAxisLineChart.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./DualAxisLineChart-CUD-jRfN.cjs`);exports.DualAxisLineChart=e.t;

package/dist/DualAxisLineChart.d.ts

@@ -1,193 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AnimateDataType {
-    duration: number;
-    once: boolean;
-    amount: 'some' | 'all' | number;
-}
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
-
-declare interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-export declare function DualAxisLineChart(props: Props): JSX.Element;
-
-declare interface DualAxisLineChartDataType {
-    date: number | string;
-    y1?: number | null;
-    y2?: number | null;
-    data?: object;
-}
-
-declare interface HighlightAreaSettingsDataType {
-    coordinates: [number | string | null, number | string | null];
-    style?: React.CSSProperties;
-    className?: string;
-    color?: string;
-    strokeWidth?: number;
-}
-
-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: DualAxisLineChartDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Array of colors for the 2 lines */
-    lineColors?: [string, string];
-    /** Title for the color legend */
-    colorLegendTitle?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Left margin of the graph */
-    leftMargin?: number;
-    /** Right margin of the graph */
-    rightMargin?: number;
-    /** Top margin of the graph */
-    topMargin?: number;
-    /** Bottom margin of the graph */
-    bottomMargin?: number;
-    /** Maximum value of the date for the chart */
-    maxDate?: string | number;
-    /** Minimum value of the date for the chart */
-    minDate?: string | number;
-    /** No. of ticks on the x-axis  */
-    noOfXTicks?: number;
-    /** No. of ticks on the y-axis  */
-    noOfYTicks?: number;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Toggle visibility of dots on the line */
-    showDots?: boolean;
-    /** Stroke width of the line */
-    strokeWidth?: number;
-    /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */
-    animate?: boolean | AnimateDataType;
-    /** Enables same axis for the 2 lines */
-    sameAxes?: boolean;
-    /** Toggle visibility of color scale. */
-    showColorScale?: boolean;
-    /** Toggle visibility of labels of the axis. */
-    showAxisLabels?: boolean;
-    /** Labels for the lines  */
-    labels: [string, string];
-    /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */
-    dateFormat?: string;
-    /** Highlighted area(square) on the chart  */
-    highlightAreaSettings?: HighlightAreaSettingsDataType[];
-    /** Curve type for the line */
-    curveType?: CurveTypes;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for left line. */
-    leftLineNumberDisplayOptions?: NumberFormatOptions;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for right line. */
-    rightLineNumberDisplayOptions?: NumberFormatOptions;
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/LineCharts/DualAxisLineChart/index'
+export {}