{"version":3,"file":"HeatMap-JDCNn_9E.cjs","names":[],"sources":["../src/Components/Graphs/HeatMap/Graph.tsx","../src/Components/Graphs/HeatMap/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { scaleBand, scaleLinear, scaleOrdinal, scaleThreshold } from 'd3-scale';\r\nimport isEqual from 'fast-deep-equal';\r\nimport { motion, useInView } from 'motion/react';\r\nimport { useRef, useState } from 'react';\r\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\r\nimport { YAxesLabels } from '@/Components/Elements/Axes/YAxesLabels';\r\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport type {\r\n  AnimateDataType,\r\n  ClassNameObject,\r\n  HeatMapDataType,\r\n  PadZerosTypes,\r\n  ScaleDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\nimport { getGraphDimensions } from '@/Utils/getGraphDimensions';\r\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { uniqBy } from '@/Utils/uniqBy';\r\n\r\ninterface Props {\r\n  data: HeatMapDataType[];\r\n  colorDomain: string[] | number[];\r\n  colors: string[];\r\n  noDataColor: string;\r\n  scaleType: ScaleDataType;\r\n  showColumnLabels: boolean | ((_d: string) => React.ReactNode);\r\n  leftMargin: number;\r\n  truncateBy: number;\r\n  width: number;\r\n  height: number;\r\n  rightMargin: number;\r\n  topMargin: number;\r\n  showRowLabels: boolean | ((_d: string) => React.ReactNode);\r\n  bottomMargin: number;\r\n  suffix: string;\r\n  prefix: string;\r\n  showValues?: boolean;\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  selectedColor?: string;\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n  resetSelectionOnDoubleClick: boolean;\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  styles?: StyleObject;\r\n  classNames?: ClassNameObject;\r\n  animate: AnimateDataType;\r\n  precision: number;\r\n  locale: string;\r\n  padZeros: PadZerosTypes;\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const {\r\n    data,\r\n    showColumnLabels,\r\n    leftMargin,\r\n    rightMargin,\r\n    truncateBy,\r\n    width,\r\n    height,\r\n    topMargin,\r\n    bottomMargin,\r\n    tooltip,\r\n    onSeriesMouseOver,\r\n    suffix,\r\n    prefix,\r\n    showValues,\r\n    colorDomain,\r\n    colors,\r\n    noDataColor,\r\n    scaleType,\r\n    showRowLabels,\r\n    selectedColor,\r\n    onSeriesMouseClick,\r\n    resetSelectionOnDoubleClick,\r\n    detailsOnClick,\r\n    styles,\r\n    classNames,\r\n    animate,\r\n    precision,\r\n    locale,\r\n    padZeros,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const isInView = useInView(svgRef, {\r\n    once: animate.once,\r\n    amount: animate.amount,\r\n  });\r\n  const margin = {\r\n    top: topMargin,\r\n    bottom: bottomMargin,\r\n    left: leftMargin,\r\n    right: rightMargin,\r\n  };\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  const [mouseOverData, setMouseOverData] = useState<HeatMapDataType | undefined>(undefined);\r\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\r\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\r\n  const { graphHeight, graphWidth } = getGraphDimensions({ width, height }, margin);\r\n  const columns = uniqBy(data, 'column', true) as string[];\r\n  const rows = uniqBy(data, 'row', true) as string[];\r\n  const y = scaleBand().domain(rows).range([0, graphHeight]);\r\n  const barHeight = y.bandwidth();\r\n  const x = scaleBand().domain(columns).range([0, graphWidth]);\r\n  const barWidth = x.bandwidth();\r\n  const colorScale =\r\n    scaleType === 'categorical'\r\n      ? scaleOrdinal<number | string, string>().domain(colorDomain).range(colors)\r\n      : scaleType === 'threshold'\r\n        ? scaleThreshold<number, string>()\r\n            .domain(colorDomain as number[])\r\n            .range(colors)\r\n        : scaleLinear<string, string>()\r\n            .domain(colorDomain as number[])\r\n            .range(colors);\r\n  return (\r\n    <>\r\n      <motion.svg\r\n        width={`${width}px`}\r\n        height={`${height}px`}\r\n        viewBox={`0 0 ${width} ${height}`}\r\n        style={{ marginLeft: 'auto', marginRight: 'auto' }}\r\n        direction='ltr'\r\n        ref={svgRef}\r\n      >\r\n        <g transform={`translate(${margin.left},${0})`}>\r\n          {showColumnLabels\r\n            ? columns.map((d) => (\r\n                <XAxesLabels\r\n                  key={d}\r\n                  y={0}\r\n                  x={x(d) as number}\r\n                  width={barWidth}\r\n                  height={margin.top - 5}\r\n                  value={\r\n                    typeof showColumnLabels === 'function'\r\n                      ? showColumnLabels(d)\r\n                      : `${d}`.length < truncateBy\r\n                        ? `${d}`\r\n                        : `${`${d}`.substring(0, truncateBy)}...`\r\n                  }\r\n                  style={styles?.xAxis?.labels}\r\n                  className={classNames?.xAxis?.labels}\r\n                  alignment='bottom'\r\n                  animate={{ duration: 0, once: true, amount: 0 }}\r\n                  isInView={isInView}\r\n                />\r\n              ))\r\n            : null}\r\n        </g>\r\n        <g transform={`translate(${0},${margin.top})`}>\r\n          {showRowLabels\r\n            ? rows.map((d) => (\r\n                <YAxesLabels\r\n                  value={\r\n                    typeof showRowLabels === 'function'\r\n                      ? showRowLabels(d)\r\n                      : `${d}`.length < truncateBy\r\n                        ? `${d}`\r\n                        : `${`${d}`.substring(0, truncateBy)}...`\r\n                  }\r\n                  key={d}\r\n                  y={y(d) as number}\r\n                  x={0}\r\n                  width={margin.left}\r\n                  height={barHeight}\r\n                  alignment='right'\r\n                  style={styles?.yAxis?.labels}\r\n                  className={classNames?.yAxis?.labels}\r\n                  animate={{ duration: 0, once: true, amount: 0 }}\r\n                  isInView={isInView}\r\n                />\r\n              ))\r\n            : null}\r\n        </g>\r\n        <g transform={`translate(${margin.left},${margin.top})`}>\r\n          {rows.map((d) => (\r\n            <g key={d} transform={`translate(0,${y(d)})`}>\r\n              {columns.map((el) => (\r\n                <rect\r\n                  key={`${d}-${el}`}\r\n                  x={x(el)}\r\n                  y={0}\r\n                  width={barWidth}\r\n                  height={barHeight}\r\n                  style={{ fill: noDataColor }}\r\n                  className='stroke-1 stroke-background'\r\n                />\r\n              ))}\r\n            </g>\r\n          ))}\r\n          {data\r\n            .filter((d) => !checkIfNullOrUndefined(d.value))\r\n            .map((d) => {\r\n              const color = !checkIfNullOrUndefined(d.value)\r\n                ? // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n                  colorScale(d.value as any)\r\n                : noDataColor;\r\n              return (\r\n                // biome-ignore lint/a11y/noStaticElementInteractions: interaction for graph\r\n                <g\r\n                  key={`${d.column}-${d.row}`}\r\n                  transform={`translate(${x(d.column)},${y(d.row)})`}\r\n                  onMouseEnter={(event) => {\r\n                    setMouseOverData(d);\r\n                    setEventY(event.clientY);\r\n                    setEventX(event.clientX);\r\n                    onSeriesMouseOver?.(d);\r\n                  }}\r\n                  onClick={() => {\r\n                    if (onSeriesMouseClick || detailsOnClick) {\r\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n                        setMouseClickData(undefined);\r\n                        onSeriesMouseClick?.(undefined);\r\n                      } else {\r\n                        setMouseClickData(d);\r\n                        onSeriesMouseClick?.(d);\r\n                      }\r\n                    }\r\n                  }}\r\n                  onMouseMove={(event) => {\r\n                    setMouseOverData(d);\r\n                    setEventY(event.clientY);\r\n                    setEventX(event.clientX);\r\n                  }}\r\n                  onMouseLeave={() => {\r\n                    setMouseOverData(undefined);\r\n                    setEventX(undefined);\r\n                    setEventY(undefined);\r\n                    onSeriesMouseOver?.(undefined);\r\n                  }}\r\n                  opacity={selectedColor ? (selectedColor === color ? 1 : 0.3) : 1}\r\n                >\r\n                  <motion.rect\r\n                    x={0}\r\n                    y={0}\r\n                    width={barWidth}\r\n                    height={barHeight}\r\n                    className='stroke-1 stroke-background'\r\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n                    variants={{\r\n                      initial: { fill: color, opacity: 0 },\r\n                      whileInView: {\r\n                        fill: color,\r\n                        opacity: 1,\r\n                        transition: { duration: animate.duration },\r\n                      },\r\n                    }}\r\n                    initial='initial'\r\n                    animate={isInView ? 'whileInView' : 'initial'}\r\n                  />\r\n                  {showValues && !checkIfNullOrUndefined(d.value) ? (\r\n                    <motion.g\r\n                      variants={{\r\n                        initial: { opacity: 0 },\r\n                        whileInView: { opacity: 1, transition: { duration: animate.duration } },\r\n                      }}\r\n                      initial='initial'\r\n                      animate={isInView ? 'whileInView' : 'initial'}\r\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n                    >\r\n                      <foreignObject y={0} x={0} width={barWidth} height={barHeight}>\r\n                        <div className='flex flex-col justify-center items-center h-inherit p-1'>\r\n                          <p\r\n                            className={cn(\r\n                              'text-xs text-center m-0 leading-sm graph-value',\r\n                              classNames?.graphObjectValues,\r\n                            )}\r\n                            style={{\r\n                              color: getTextColorBasedOnBgColor(color),\r\n                              ...(styles?.graphObjectValues || {}),\r\n                            }}\r\n                          >\r\n                            {numberFormattingFunction(\r\n                              d.value,\r\n                              undefined,\r\n                              precision,\r\n                              prefix,\r\n                              suffix,\r\n                              locale,\r\n                              padZeros,\r\n                            )}\r\n                          </p>\r\n                        </div>\r\n                      </foreignObject>\r\n                    </motion.g>\r\n                  ) : null}\r\n                </g>\r\n              );\r\n            })}\r\n          {mouseOverData ? (\r\n            <rect\r\n              x={x(mouseOverData.column)}\r\n              y={y(mouseOverData.row)}\r\n              width={barWidth}\r\n              height={barHeight}\r\n              style={{\r\n                fill: 'none',\r\n                fillOpacity: 0,\r\n                strokeWidth: 1.5,\r\n              }}\r\n              className='stroke-foreground'\r\n            />\r\n          ) : null}\r\n        </g>\r\n      </motion.svg>\r\n      {mouseOverData && tooltip && eventX && eventY ? (\r\n        <Tooltip\r\n          data={mouseOverData}\r\n          body={tooltip}\r\n          xPos={eventX}\r\n          yPos={eventY}\r\n          backgroundStyle={styles?.tooltip}\r\n          className={classNames?.tooltip}\r\n        />\r\n      ) : null}\r\n      {detailsOnClick && mouseClickData !== undefined ? (\r\n        <DetailsModal\r\n          body={detailsOnClick}\r\n          data={mouseClickData}\r\n          setData={setMouseClickData}\r\n          className={classNames?.modal}\r\n        />\r\n      ) : null}\r\n    </>\r\n  );\r\n}\r\n","import { useRef, useState } from 'react';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { ColorLegendWithMouseOver } from '@/Components/Elements/ColorLegendWithMouseOver';\r\nimport { EmptyState } from '@/Components/Elements/EmptyState';\r\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { LinearColorLegend } from '@/Components/Elements/LinearColorLegend';\r\nimport { ThresholdColorLegendWithMouseOver } from '@/Components/Elements/ThresholdColorLegendWithMouseOver';\r\nimport { useElementSize } from '@/hooks/useElementSize';\r\nimport type {\r\n  AnimateDataType,\r\n  ClassNameObject,\r\n  HeatMapDataType,\r\n  Languages,\r\n  NumberFormatOptions,\r\n  ScaleDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { Graph } from './Graph';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: HeatMapDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Array of colors for cells */\r\n  colors?: string[];\r\n  /** Color where data is not available */\r\n  noDataColor?: string;\r\n  /** Title for the color legend */\r\n  colorLegendTitle?: string;\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Left margin of the graph */\r\n  leftMargin?: number;\r\n  /** Right margin of the graph */\r\n  rightMargin?: number;\r\n  /** Top margin of the graph */\r\n  topMargin?: number;\r\n  /** Bottom margin of the graph */\r\n  bottomMargin?: number;\r\n  /** Toggles the background to fill the container. This only works if the width of the graph is defined. */\r\n  fillContainer?: boolean;\r\n\r\n  // Values and Ticks\r\n  /** Value by which the label are truncated. Only applicable if showLabel is true */\r\n  truncateBy?: number;\r\n  /** Reference values for comparison */\r\n\r\n  // Graph Parameters\r\n  /** Toggle visibility of labels in the column */\r\n  showColumnLabels?: boolean | ((_d: string) => React.ReactNode);\r\n  /** Toggle visibility of labels in the row */\r\n  showRowLabels?: boolean | ((_d: string) => React.ReactNode);\r\n  /** Scale for the colors in the cell */\r\n  scaleType?: ScaleDataType;\r\n  /** Toggle visibility of values */\r\n  showValues?: boolean;\r\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\r\n  showColorScale?: boolean;\r\n  /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */\r\n  showNAColor?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Domain for the colors in the cell.  */\r\n  colorDomain: number[] | string[];\r\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\r\n  numberDisplayOptions?: NumberFormatOptions;\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\r\n  resetSelectionOnDoubleClick?: boolean;\r\n\r\n  // Interactions and Callbacks\r\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 */\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\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 */\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  /** Callback for mouse over event */\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  /** Callback for mouse click event */\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function HeatMap(props: Props) {\r\n  const {\r\n    data,\r\n    graphTitle,\r\n    colors,\r\n    sources,\r\n    graphDescription,\r\n    showColumnLabels = true,\r\n    leftMargin = 100,\r\n    rightMargin = 10,\r\n    truncateBy = 999,\r\n    height,\r\n    width,\r\n    scaleType,\r\n    colorDomain,\r\n    footNote,\r\n    colorLegendTitle,\r\n    padding,\r\n    backgroundColor = false,\r\n    topMargin = 30,\r\n    bottomMargin = 10,\r\n    tooltip,\r\n    onSeriesMouseOver,\r\n    showRowLabels = true,\r\n    relativeHeight,\r\n    showValues,\r\n    graphID,\r\n    noDataColor = Colors.gray,\r\n    showColorScale = true,\r\n    onSeriesMouseClick,\r\n    graphDownload = false,\r\n    dataDownload = false,\r\n    fillContainer = true,\r\n    language = 'en',\r\n    showNAColor = true,\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    resetSelectionOnDoubleClick = true,\r\n    detailsOnClick,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    naLabel = 'NA',\r\n    numberDisplayOptions,\r\n  } = props;\r\n  const { graphDiv, svgWidth, svgHeight } = useElementSize<HTMLDivElement>();\r\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const scale =\r\n    scaleType ||\r\n    (typeof colorDomain[0] === 'string'\r\n      ? 'categorical'\r\n      : colorDomain.length === 2\r\n        ? 'linear'\r\n        : 'threshold');\r\n\r\n  return (\r\n    <GraphContainer\r\n      className={classNames?.graphContainer}\r\n      style={styles?.graphContainer}\r\n      id={graphID}\r\n      ref={graphParentDiv}\r\n      aria-label={ariaLabel}\r\n      backgroundColor={backgroundColor}\r\n      theme={theme}\r\n      language={language}\r\n      minHeight={minHeight}\r\n      width={fillContainer ? undefined : width}\r\n      height={height}\r\n      relativeHeight={relativeHeight}\r\n      padding={padding}\r\n    >\r\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n        <GraphHeader\r\n          styles={{\r\n            title: styles?.title,\r\n            description: styles?.description,\r\n          }}\r\n          classNames={{\r\n            title: classNames?.title,\r\n            description: classNames?.description,\r\n          }}\r\n          graphTitle={graphTitle}\r\n          graphDescription={graphDescription}\r\n          width={width}\r\n          graphDownload={graphDownload ? graphParentDiv : undefined}\r\n          dataDownload={\r\n            dataDownload\r\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\r\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\r\n                : data.filter((d) => d !== undefined)\r\n              : null\r\n          }\r\n        />\r\n      ) : null}\r\n      {showColorScale && data.length > 0 ? (\r\n        scale === 'categorical' ? (\r\n          <ColorLegendWithMouseOver\r\n            width={fillContainer ? undefined : width}\r\n            colorLegendTitle={colorLegendTitle}\r\n            colors={\r\n              colors ||\r\n              (typeof colorDomain[0] === 'string'\r\n                ? Colors[theme].categoricalColors.colors\r\n                : colorDomain.length === 2\r\n                  ? [\r\n                      Colors[theme].sequentialColors.neutralColorsx09[0],\r\n                      Colors[theme].sequentialColors.neutralColorsx09[8],\r\n                    ]\r\n                  : Colors[theme].sequentialColors[\r\n                      `neutralColorsx0${(colorDomain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n                    ])\r\n            }\r\n            colorDomain={colorDomain.map((d) => `${d}`)}\r\n            setSelectedColor={setSelectedColor}\r\n            showNAColor={showNAColor}\r\n            className={classNames?.colorLegend}\r\n          />\r\n        ) : scale === 'threshold' ? (\r\n          <ThresholdColorLegendWithMouseOver\r\n            width={fillContainer ? undefined : width}\r\n            colorLegendTitle={colorLegendTitle}\r\n            colors={\r\n              colors ||\r\n              (typeof colorDomain[0] === 'string'\r\n                ? Colors[theme].categoricalColors.colors\r\n                : colorDomain.length === 2\r\n                  ? [\r\n                      Colors[theme].sequentialColors.neutralColorsx09[0],\r\n                      Colors[theme].sequentialColors.neutralColorsx09[8],\r\n                    ]\r\n                  : Colors[theme].sequentialColors[\r\n                      `neutralColorsx0${(colorDomain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n                    ])\r\n            }\r\n            colorDomain={colorDomain as number[]}\r\n            setSelectedColor={setSelectedColor}\r\n            naColor={noDataColor}\r\n            locale={numberDisplayOptions?.locale || 'en'}\r\n            showNAColor={showNAColor}\r\n            naLabel={naLabel}\r\n          />\r\n        ) : (\r\n          <LinearColorLegend\r\n            width={fillContainer ? undefined : width}\r\n            colorLegendTitle={colorLegendTitle}\r\n            colors={\r\n              colors || [\r\n                Colors[theme].sequentialColors.neutralColorsx09[0],\r\n                Colors[theme].sequentialColors.neutralColorsx09[8],\r\n              ]\r\n            }\r\n            locale={numberDisplayOptions?.locale || 'en'}\r\n            colorDomain={colorDomain as number[]}\r\n            className={classNames?.colorLegend}\r\n          />\r\n        )\r\n      ) : null}\r\n      <GraphArea ref={graphDiv}>\r\n        {data.length === 0 && <EmptyState />}\r\n        {svgWidth && svgHeight && data.length > 0 ? (\r\n          <Graph\r\n            data={data}\r\n            colorDomain={colorDomain}\r\n            width={fillContainer || !width ? svgWidth : svgWidth < width ? svgWidth : width}\r\n            height={svgHeight}\r\n            colors={\r\n              colors ||\r\n              (typeof colorDomain[0] === 'string'\r\n                ? Colors[theme].categoricalColors.colors\r\n                : colorDomain.length === 2\r\n                  ? [\r\n                      Colors[theme].sequentialColors.neutralColorsx09[0],\r\n                      Colors[theme].sequentialColors.neutralColorsx09[8],\r\n                    ]\r\n                  : Colors[theme].sequentialColors[\r\n                      `neutralColorsx0${(colorDomain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n                    ])\r\n            }\r\n            noDataColor={noDataColor}\r\n            scaleType={scale}\r\n            showColumnLabels={showColumnLabels}\r\n            leftMargin={leftMargin}\r\n            rightMargin={rightMargin}\r\n            topMargin={topMargin}\r\n            bottomMargin={bottomMargin}\r\n            selectedColor={selectedColor}\r\n            truncateBy={truncateBy}\r\n            showRowLabels={showRowLabels}\r\n            tooltip={tooltip}\r\n            onSeriesMouseOver={onSeriesMouseOver}\r\n            showValues={showValues}\r\n            onSeriesMouseClick={onSeriesMouseClick}\r\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n            detailsOnClick={detailsOnClick}\r\n            styles={styles}\r\n            classNames={classNames}\r\n            animate={\r\n              animate === true\r\n                ? { duration: 0.5, once: true, amount: 0.5 }\r\n                : animate || { duration: 0, once: true, amount: 0 }\r\n            }\r\n            locale={numberDisplayOptions?.locale || 'en'}\r\n            padZeros={numberDisplayOptions?.padZeros || 'none'}\r\n            suffix={numberDisplayOptions?.suffix || ''}\r\n            prefix={numberDisplayOptions?.prefix || ''}\r\n            precision={numberDisplayOptions?.precision ?? 2}\r\n          />\r\n        ) : null}\r\n      </GraphArea>\r\n      {sources || footNote ? (\r\n        <GraphFooter\r\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n          classNames={{\r\n            footnote: classNames?.footnote,\r\n            source: classNames?.source,\r\n          }}\r\n          sources={sources}\r\n          footNote={footNote}\r\n          width={width}\r\n        />\r\n      ) : null}\r\n    </GraphContainer>\r\n  );\r\n}\r\n"],"mappings":"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"}