@undp/data-viz 2.5.4 → 2.6.1

package/dist/ButterflyChart-CHMH57WF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButterflyChart-CHMH57WF.js","names":[],"sources":["../src/Components/Graphs/ButterflyChart/Graph.tsx","../src/Components/Graphs/ButterflyChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YAxesLabels } from '@/Components/Elements/Axes/YAxesLabels';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { RefLineX } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ButterflyChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: ButterflyChartDataType[];\n  barColors: [string, string];\n  centerGap: number;\n  refValues: ReferenceDataType[];\n  axisTitles: [string, string];\n  width: number;\n  height: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  maxValue: number;\n  minValue: number;\n  barPadding: number;\n  truncateBy: number;\n  showValues: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  showTicks: boolean;\n  suffix: string;\n  prefix: string;\n  resetSelectionOnDoubleClick: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  noOfTicks: number;\n  animate: AnimateDataType;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  minValueLeftBar: number;\n  minValueRightBar: number;\n  naLabel: string;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    barColors,\n    centerGap,\n    refValues,\n    maxValue,\n    minValue,\n    showValues,\n    axisTitles,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    onSeriesMouseOver,\n    barPadding,\n    truncateBy,\n    onSeriesMouseClick,\n    showTicks,\n    suffix,\n    prefix,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    styles,\n    classNames,\n    noOfTicks,\n    animate,\n    precision,\n    customLayers,\n    minValueLeftBar,\n    minValueRightBar,\n    naLabel,\n    hideAxisLine,\n    locale,\n    padZeros,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin,\n    right: rightMargin,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));\n  const y = scaleBand()\n    .domain(dataWithId.map((d) => `${d.id}`))\n    .range([graphHeight, 0])\n    .paddingInner(barPadding);\n  const xRightBar = scaleLinear()\n    .domain([minValue, maxValue])\n    .range([0, (graphWidth - centerGap) / 2])\n    .nice();\n  const xRightTicks = xRightBar.ticks(noOfTicks);\n  const xLeftBar = scaleLinear()\n    .domain([minValue, maxValue])\n    .range([(graphWidth - centerGap) / 2, 0])\n    .nice();\n  const xLeftTicks = xLeftBar.ticks(noOfTicks);\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g transform={`translate(${0},${0})`}>\n            {showTicks ? (\n              <XTicksAndGridLines\n                values={xLeftTicks.filter((d) => d !== 0)}\n                x={xLeftTicks.filter((d) => d !== 0).map((d) => xLeftBar(d))}\n                y1={0 - topMargin}\n                y2={graphHeight + margin.bottom}\n                styles={{\n                  gridLines: styles?.xAxis?.gridLines,\n                  labels: styles?.xAxis?.labels,\n                }}\n                classNames={{\n                  gridLines: classNames?.xAxis?.gridLines,\n                  labels: classNames?.xAxis?.labels,\n                }}\n                suffix={suffix}\n                prefix={prefix}\n                labelType='secondary'\n                showGridLines\n                leftLabel\n                precision={precision}\n                padZeros={padZeros}\n                locale={locale}\n              />\n            ) : null}\n            <AnimatePresence>\n              {dataWithId.map((d) => {\n                return (\n                  <motion.g\n                    className='undp-viz-g-with-hover'\n                    key={d.label}\n                    opacity={0.85}\n                    onMouseEnter={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.(d);\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData(d);\n                          onSeriesMouseClick?.(d);\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                    }}\n                    onMouseLeave={() => {\n                      setMouseOverData(undefined);\n                      setEventX(undefined);\n                      setEventY(undefined);\n                      onSeriesMouseOver?.(undefined);\n                    }}\n                  >\n                    {d.leftBar ? (\n                      <motion.rect\n                        y={y(d.id)}\n                        style={{ fill: barColors[0] }}\n                        height={y.bandwidth()}\n                        variants={{\n                          initial: {\n                            x: xLeftBar(0),\n                            width: 0,\n                          },\n                          whileInView: {\n                            x: d.leftBar < 0 ? xLeftBar(0) : xLeftBar(d.leftBar),\n                            width:\n                              d.leftBar < 0\n                                ? xLeftBar(d.leftBar) - xLeftBar(0)\n                                : xLeftBar(0) - xLeftBar(d.leftBar),\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        exit={{\n                          x: xLeftBar(0),\n                          width: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        y={(y(d.id) as number) + y.bandwidth() / 2}\n                        style={{\n                          textAnchor: d.leftBar ? (d.leftBar > 0 ? 'end' : 'start') : 'start',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        dx={d.leftBar ? (d.leftBar > 0 ? -5 : 5) : 5}\n                        dy='0.33em'\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        exit={{\n                          opacity: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        variants={{\n                          initial: {\n                            x: xLeftBar(0),\n                            opacity: 0,\n                            fill: barColors[0],\n                          },\n                          whileInView: {\n                            x: d.leftBar\n                              ? xLeftBar(d.leftBar)\n                              : xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar),\n                            opacity: 1,\n                            fill: barColors[0],\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.leftBar,\n                          naLabel,\n                          precision,\n                          prefix,\n                          suffix,\n                          locale,\n                          padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </motion.g>\n                );\n              })}\n              <Axis\n                hideAxisLine={hideAxisLine}\n                y1={-2.5}\n                y2={graphHeight + margin.bottom}\n                x1={xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar)}\n                x2={xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar)}\n                classNames={{ axis: classNames?.yAxis?.axis }}\n                styles={{ axis: styles?.yAxis?.axis }}\n              />\n              {refValues?.map((el) => (\n                <RefLineX\n                  key={el.text}\n                  text={el.text}\n                  color={el.color}\n                  x={xLeftBar(el.value as number)}\n                  y1={0 - margin.top}\n                  y2={graphHeight + margin.bottom}\n                  textSide='left'\n                  classNames={el.classNames}\n                  styles={el.styles}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              ))}\n            </AnimatePresence>\n          </g>\n          <g transform={`translate(${(graphWidth + centerGap) / 2},${0})`}>\n            {showTicks ? (\n              <XTicksAndGridLines\n                values={xRightTicks.filter((d) => d !== 0)}\n                x={xRightTicks.filter((d) => d !== 0).map((d) => xRightBar(d))}\n                y1={0 - topMargin}\n                y2={graphHeight + margin.bottom}\n                styles={{\n                  gridLines: styles?.xAxis?.gridLines,\n                  labels: styles?.xAxis?.labels,\n                }}\n                classNames={{\n                  gridLines: classNames?.xAxis?.gridLines,\n                  labels: classNames?.xAxis?.labels,\n                }}\n                suffix={suffix}\n                prefix={prefix}\n                labelType='secondary'\n                showGridLines\n                precision={precision}\n                padZeros={padZeros}\n                locale={locale}\n              />\n            ) : null}\n            <AnimatePresence>\n              {dataWithId.map((d) => {\n                return (\n                  <motion.g\n                    className='undp-viz-g-with-hover'\n                    key={d.label}\n                    opacity={0.85}\n                    onMouseEnter={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.(d);\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData(d);\n                          onSeriesMouseClick?.(d);\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                    }}\n                    onMouseLeave={() => {\n                      setMouseOverData(undefined);\n                      setEventX(undefined);\n                      setEventY(undefined);\n                      onSeriesMouseOver?.(undefined);\n                    }}\n                  >\n                    {d.rightBar ? (\n                      <motion.rect\n                        y={y(d.id)}\n                        style={{ fill: barColors[1] }}\n                        height={y.bandwidth()}\n                        exit={{\n                          x: xRightBar(0),\n                          width: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        variants={{\n                          initial: {\n                            x: xRightBar(0),\n                            width: 0,\n                          },\n                          whileInView: {\n                            x: d.rightBar >= 0 ? xRightBar(0) : xRightBar(d.rightBar),\n                            width:\n                              d.rightBar >= 0\n                                ? xRightBar(d.rightBar) - xRightBar(0)\n                                : xRightBar(0) - xRightBar(d.rightBar),\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        y={(y(d.id) as number) + y.bandwidth() / 2}\n                        style={{\n                          textAnchor: d.rightBar ? (d.rightBar < 0 ? 'end' : 'start') : 'start',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        dx={d.rightBar ? (d.rightBar < 0 ? -5 : 5) : 5}\n                        dy='0.33em'\n                        exit={{\n                          opacity: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        variants={{\n                          initial: {\n                            x: xRightBar(0),\n                            opacity: 0,\n                            fill: barColors[1],\n                          },\n                          whileInView: {\n                            x: d.rightBar\n                              ? xRightBar(d.rightBar)\n                              : xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar),\n                            opacity: 1,\n                            fill: barColors[1],\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.rightBar,\n                          naLabel,\n                          precision,\n                          prefix,\n                          suffix,\n                          locale,\n                          padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </motion.g>\n                );\n              })}\n              <Axis\n                hideAxisLine={hideAxisLine}\n                y1={-2.5}\n                y2={graphHeight + margin.bottom}\n                x1={xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar)}\n                x2={xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar)}\n                classNames={{ axis: classNames?.yAxis?.axis }}\n                styles={{ axis: styles?.yAxis?.axis }}\n              />\n              {refValues?.map((el) => (\n                <RefLineX\n                  key={el.text}\n                  text={el.text}\n                  color={el.color}\n                  x={xRightBar(el.value as number)}\n                  y1={0 - margin.top}\n                  y2={graphHeight + margin.bottom}\n                  textSide='right'\n                  classNames={el.classNames}\n                  styles={el.styles}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              ))}\n            </AnimatePresence>\n          </g>\n          <AnimatePresence>\n            <motion.g transform={`translate(${graphWidth / 2},${0})`}>\n              {dataWithId.map((d) => (\n                <YAxesLabels\n                  key={d.id}\n                  value={\n                    `${d.label}`.length < truncateBy\n                      ? `${d.label}`\n                      : `${`${d.label}`.substring(0, truncateBy)}...`\n                  }\n                  y={y(`${d.id}`) as number}\n                  x={0 - centerGap / 2}\n                  width={centerGap}\n                  height={y.bandwidth()}\n                  alignment='center'\n                  style={styles?.yAxis?.labels}\n                  className={classNames?.yAxis?.labels}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              ))}\n            </motion.g>\n          </AnimatePresence>\n          <g transform={`translate(${0},${graphHeight})`}>\n            <text\n              style={{\n                fill: barColors[0],\n                textAnchor: 'end',\n                ...styles?.yAxis?.title,\n              }}\n              className={cn('text-base', classNames?.yAxis?.title)}\n              x={graphWidth / 2 - centerGap / 2}\n              y={0}\n              dx={-5}\n              dy={20}\n            >\n              {axisTitles[0]}\n            </text>\n            <text\n              style={{\n                fill: barColors[1],\n                textAnchor: 'start',\n                ...styles?.yAxis?.title,\n              }}\n              className={cn('text-base', classNames?.yAxis?.title)}\n              x={graphWidth / 2 + centerGap / 2}\n              y={0}\n              dx={5}\n              dy={20}\n            >\n              {axisTitles[1]}\n            </text>\n          </g>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n        </g>\n      </motion.svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n      {detailsOnClick && mouseClickData !== undefined ? (\n        <DetailsModal\n          body={detailsOnClick}\n          data={mouseClickData}\n          setData={setMouseClickData}\n          className={classNames?.modal}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { SliderUI } from '@undp/design-system-react/SliderUI';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport { Pause, Play } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  ButterflyChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  TimelineDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { ensureCompleteDataForButterFlyChart } from '@/Utils/ensureCompleteData';\nimport { getSliderMarks } from '@/Utils/getSliderMarks';\nimport { Graph } from './Graph';\n\nfunction getMinMax(\n  data: ButterflyChartDataType[],\n  key: 'leftBar' | 'rightBar',\n  minValue?: number | null,\n  maxValue?: number | null,\n) {\n  const values = data.map((d) => d[key]).filter((v) => !checkIfNullOrUndefined(v)) as number[];\n\n  const min = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...values) >= 0\n      ? 0\n      : Math.min(...values);\n\n  const max = !checkIfNullOrUndefined(maxValue)\n    ? (maxValue as number)\n    : Math.max(...values) < 0\n      ? 0\n      : Math.max(...values);\n\n  return { min, max };\n}\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: ButterflyChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Color for the left and right bars */\n  barColors?: [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  /** Padding between bars */\n  barPadding?: number;\n  /** Spacing between the left and right bars */\n  centerGap?: number;\n\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Truncate labels by specified length */\n  truncateBy?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** Number of ticks on the axis */\n  noOfTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Toggle visibility of axis ticks */\n  showTicks?: boolean;\n  /** Toggle visibility of axis line for the  main axis */\n  hideAxisLine?: boolean;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Title for the left bars */\n  leftBarTitle?: string;\n  /** Title for the right bars */\n  rightBarTitle?: string;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */\n  timeline?: TimelineDataType;\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function ButterflyChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    padding,\n    barColors = [\n      Colors.light.categoricalColors.colors[0],\n      Colors.light.categoricalColors.colors[1],\n    ],\n    backgroundColor = false,\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 25,\n    bottomMargin = 30,\n    rightBarTitle = 'Right bar graph',\n    leftBarTitle = 'Left bar graph',\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    barPadding = 0.25,\n    truncateBy = 999,\n    onSeriesMouseClick,\n    centerGap = 100,\n    showValues = true,\n    maxValue,\n    minValue,\n    refValues = [],\n    showTicks = true,\n    showColorScale = false,\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    colorLegendTitle,\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    styles,\n    classNames,\n    noOfTicks = 5,\n    animate = false,\n    customLayers = [],\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\n    naLabel = 'NA',\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [play, setPlay] = useState(timeline.autoplay);\n  const uniqDatesSorted = useMemo(() => {\n    const dates = [\n      ...new Set(\n        data\n          .filter((d) => d.date)\n          .map((d) => parse(`${d.date}`, timeline.dateFormat || 'yyyy', new Date()).getTime()),\n      ),\n    ];\n    dates.sort((a, b) => a - b);\n    return dates;\n  }, [data, timeline.dateFormat]);\n  const [index, setIndex] = useState(timeline.autoplay ? 0 : uniqDatesSorted.length - 1);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setIndex((i) => (i < uniqDatesSorted.length - 1 ? i + 1 : 0));\n      },\n      (timeline.speed || 2) * 1000,\n    );\n    if (!play) clearInterval(interval);\n    return () => clearInterval(interval);\n  }, [uniqDatesSorted, play, timeline.speed]);\n\n  const markObj = getSliderMarks(\n    uniqDatesSorted,\n    index,\n    timeline.showOnlyActiveDate,\n    timeline.dateFormat || 'yyyy',\n  );\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {timeline.enabled && uniqDatesSorted.length > 0 && markObj ? (\n        <div className='flex gap-6 items-center' dir='ltr'>\n          <button\n            type='button'\n            onClick={() => {\n              setPlay(!play);\n            }}\n            className='p-0 border-0 cursor-pointer bg-transparent'\n            aria-label={play ? 'Click to pause animation' : 'Click to play animation'}\n          >\n            {play ? <Pause /> : <Play />}\n          </button>\n          <SliderUI\n            min={uniqDatesSorted[0]}\n            max={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            marks={markObj}\n            step={null}\n            defaultValue={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            value={uniqDatesSorted[index]}\n            onChangeComplete={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            onChange={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            aria-label='Time slider. Use arrow keys to adjust selected time period.'\n          />\n        </div>\n      ) : null}\n      {showColorScale && data.length > 0 ? (\n        <ColorLegend\n          colorLegendTitle={colorLegendTitle}\n          colorDomain={[leftBarTitle, rightBarTitle]}\n          colors={barColors}\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            hideAxisLine={hideAxisLine}\n            data={ensureCompleteDataForButterFlyChart(data, timeline.dateFormat || 'yyyy').filter(\n              (d) =>\n                timeline.enabled\n                  ? `${d.date}` ===\n                    format(new Date(uniqDatesSorted[index]), timeline.dateFormat || 'yyyy')\n                  : d,\n            )}\n            barColors={barColors}\n            width={svgWidth}\n            centerGap={centerGap}\n            height={svgHeight}\n            truncateBy={truncateBy}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            axisTitles={[leftBarTitle, rightBarTitle]}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            barPadding={barPadding}\n            refValues={refValues}\n            maxValue={Math.max(\n              getMinMax(data, 'leftBar', minValue, maxValue).max,\n              getMinMax(data, 'rightBar', minValue, maxValue).max,\n            )}\n            minValue={Math.min(\n              getMinMax(data, 'leftBar', minValue, maxValue).min,\n              getMinMax(data, 'rightBar', minValue, maxValue).min,\n            )}\n            minValueLeftBar={getMinMax(data, 'leftBar', minValue, maxValue).min}\n            minValueRightBar={getMinMax(data, 'rightBar', minValue, maxValue).min}\n            showValues={showValues}\n            onSeriesMouseClick={onSeriesMouseClick}\n            showTicks={showTicks}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            styles={styles}\n            classNames={classNames}\n            noOfTicks={noOfTicks}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            customLayers={customLayers}\n            naLabel={naLabel}\n            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/ButterflyChart.cjs

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

package/dist/ButterflyChart.d.ts

@@ -1,210 +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;
-}
-
-export declare function ButterflyChart(props: Props): JSX.Element;
-
-declare interface ButterflyChartDataType {
-    label: string | number;
-    leftBar?: number | null;
-    rightBar?: number | null;
-    date?: string | number;
-    data?: object;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: ButterflyChartDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Color for the left and right bars */
-    barColors?: [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;
-    /** Padding between bars */
-    barPadding?: number;
-    /** Spacing between the left and right bars */
-    centerGap?: number;
-    /** Maximum value for the chart */
-    maxValue?: number;
-    /** Minimum value for the chart */
-    minValue?: number;
-    /** Truncate labels by specified length */
-    truncateBy?: number;
-    /** Reference values for comparison */
-    refValues?: ReferenceDataType[];
-    /** Number of ticks on the axis */
-    noOfTicks?: number;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Toggle visibility of axis ticks */
-    showTicks?: boolean;
-    /** Toggle visibility of axis line for the  main axis */
-    hideAxisLine?: boolean;
-    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
-    showColorScale?: boolean;
-    /** Title for the left bars */
-    leftBarTitle?: string;
-    /** Title for the right bars */
-    rightBarTitle?: string;
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Toggles if the graph animates in when loaded.  */
-    animate?: boolean | AnimateDataType;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
-    timeline?: TimelineDataType;
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
-    resetSelectionOnDoubleClick?: boolean;
-    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    detailsOnClick?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface ReferenceDataType {
-    value: number | null;
-    text: string;
-    color?: string;
-    styles?: {
-        line?: React.CSSProperties;
-        text?: React.CSSProperties;
-    };
-    classNames?: {
-        line?: string;
-        text?: string;
-    };
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-declare interface TimelineDataType {
-    autoplay: boolean;
-    enabled: boolean;
-    showOnlyActiveDate: boolean;
-    speed?: number;
-    dateFormat?: string;
-}
-
-export { }
+export * from './Components/Graphs/ButterflyChart/index'
+export {}