@undp/data-viz 1.3.0 → 1.3.1

package/dist/UnitChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitChart.cjs","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\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  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\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  /** Colors of the highlighted circles */\r\n  colors?: 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\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\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\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 UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\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  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\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.current : 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            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            cx={(i % gridSize) * gridDimension + gridDimension / 2}\r\n                            cy={Math.floor(i / gridSize) * gridDimension + gridDimension / 2}\r\n                            style={{\r\n                              ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}

package/dist/UnitChart.js

@@ -1,2 +1,217 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),H=require("react"),U=require("./index-C21TvELx.cjs"),E=require("./Typography-CDR-DAHH.cjs"),K=require("./GraphFooter.js"),J=require("./GraphHeader.js"),Q=require("./Colors.js"),X=require("./numberFormattingFunction.js"),M=require("./use-in-view-Dl1CsAIo.cjs"),Y=require("./index-a2C2Bqn2.cjs");function Z(V){const{data:n,size:g=200,graphTitle:x,sources:R,colors:b=Q.Colors.light.categoricalColors.colors,graphDescription:d,totalNoOfDots:f=100,unitPadding:z=3,gridSize:c=10,footNote:N,padding:$,backgroundColor:l=!1,graphID:I,graphDownload:k=!1,language:j="en",showColorScale:S=!0,showStrokeForWhiteDots:m=!0,note:C,dataDownload:G=!1,theme:P="light",width:r,height:p,minHeight:s=0,relativeHeight:a,ariaLabel:B,styles:u,classNames:y,animate:q=!1,precision:L=2}=V,D=H.useRef(null),w=q===!0?{duration:.5,once:!0,amount:.5}:q||{duration:0,once:!0,amount:0},W=M.useInView(D,{once:w.once,amount:w.amount}),A=U.sum(n.map(e=>e.value)),T=H.useRef(null),o=g/c,h=(o-z*2)/2;if(h<=0)return console.error("The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0."),null;const v=[];return n.forEach((e,i)=>{const O=Math.round(e.value/A*f);for(let F=0;F<O;F+=1)v.push({color:b[i]})}),t.jsxRuntimeExports.jsx("div",{className:`${P||"light"} flex  ${r?"w-fit grow-0":"w-full grow"}`,dir:j==="he"||j==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:E.cnExports.cn(`${l?l===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${j||"en"}`,y?.graphContainer),style:{...u?.graphContainer||{},minHeight:"inherit",...l&&l!==!0?{backgroundColor:l}:{}},id:I,ref:T,"aria-label":B||`${x?`The graph shows ${x}. `:""}${d?` ${d}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:l?$||"1rem":$||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3 w-full grow",children:[x||d||k?t.jsxRuntimeExports.jsx(J.GraphHeader,{styles:{title:u?.title,description:u?.description},classNames:{title:y?.title,description:y?.description},graphTitle:x,graphDescription:d,width:r,graphDownload:k?T.current:void 0,dataDownload:G?n.map(e=>e.data).filter(e=>e!==void 0).length>0?n.map(e=>e.data).filter(e=>e!==void 0):n.filter(e=>e!==void 0):null}):null,C?t.jsxRuntimeExports.jsx(E.TypographyExports.H2,{marginBottom:"2xs",className:"text-primary-gray-700 dark:text-primary-gray-100 font-bold",style:{width:r?`${r}px`:"100%"},children:C}):null,t.jsxRuntimeExports.jsxs("div",{className:"flex grow flex-col gap-4 justify-between",children:[t.jsxRuntimeExports.jsxs("div",{children:[S?t.jsxRuntimeExports.jsx("div",{className:"mb-4 leading-0",style:{width:r?`${r}px`:"100%"},"aria-label":"Color legend",children:t.jsxRuntimeExports.jsx("div",{className:"flex mb-0 flex-wrap gap-x-4 gap-y-1",children:n.map((e,i)=>t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",children:[t.jsxRuntimeExports.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:b[i]}}),t.jsxRuntimeExports.jsxs(E.TypographyExports.P,{marginBottom:"none",size:"sm",className:"text-primary-gray-700 dark:text-primary-gray-100",children:[e.label,":"," ",t.jsxRuntimeExports.jsx("span",{className:"font-bold",children:X.numberFormattingFunction(e.value,"NA",L)})]})]},i))})}):null,t.jsxRuntimeExports.jsx("div",{"aria-label":"Graph area",children:t.jsxRuntimeExports.jsx("svg",{width:`${r||g}px`,height:`${Math.max(s,p?a&&r?s?r*a>s?r*a:s:r*a:p:Math.floor((f-1)/c)*o+o/2+h+5)}px`,ref:D,direction:"ltr",viewBox:`0 0 ${r||g} ${Math.max(s,p?a&&r?s?r*a>s?r*a:s:r*a:p:Math.floor((f-1)/c)*o+o/2+h+5)}`,children:t.jsxRuntimeExports.jsx(Y.AnimatePresence,{children:t.jsxRuntimeExports.jsx("g",{children:v.map((e,i)=>t.jsxRuntimeExports.jsx(M.motion.circle,{cx:i%c*o+o/2,cy:Math.floor(i/c)*o+o/2,style:{...m?{}:{stroke:e.color},strokeWidth:1},variants:{initial:{fill:"#fff",opacity:0,...m?{}:{stroke:e.color},strokeWidth:1},whileInView:{fill:e.color,opacity:1,...m?{}:{stroke:e.color},strokeWidth:1,transition:{duration:0,delay:w.duration/v.length*i}}},initial:"initial",animate:W?"whileInView":"initial",className:(e.color.toLowerCase()==="#fff"||e.color.toLowerCase()==="#ffffff"||e.color.toLowerCase()==="white")&&m?"stroke-primary-gray-400 dark:stroke-primary-gray-500":"",r:h},i))})})})})]}),R||N?t.jsxRuntimeExports.jsx(K.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},sources:R,footNote:N,width:r}):null]})]})})})})}exports.UnitChart=Z;
+import { j as r, m as E } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as F } from "react";
+import { s as O } from "./index-D7ltPi18.js";
+import { f as U, u as J } from "./Typography-Ctgfl1J5.js";
+import { GraphFooter as K } from "./GraphFooter.js";
+import { GraphHeader as Q } from "./GraphHeader.js";
+import { Colors as X } from "./Colors.js";
+import { n as Y } from "./numberFormattingFunction-14YCbkN2.js";
+import { u as Z } from "./use-in-view-BAHrBy6b.js";
+import { A as _ } from "./index-BxAUvrua.js";
+import { m as ee } from "./proxy-DJxJg1kD.js";
+function he(H) {
+  const {
+    data: s,
+    size: u = 200,
+    graphTitle: d,
+    sources: N,
+    colors: b = X.light.categoricalColors.colors,
+    graphDescription: h,
+    totalNoOfDots: x = 100,
+    unitPadding: L = 3,
+    gridSize: c = 10,
+    footNote: k,
+    padding: $,
+    backgroundColor: n = !1,
+    graphID: S,
+    graphDownload: C = !1,
+    language: w = "en",
+    showColorScale: W = !0,
+    showStrokeForWhiteDots: f = !0,
+    note: D,
+    dataDownload: A = !1,
+    theme: B = "light",
+    width: o,
+    height: g,
+    minHeight: i = 0,
+    relativeHeight: l,
+    ariaLabel: G,
+    styles: m,
+    classNames: y,
+    animate: z = !1,
+    precision: P = 2
+  } = H, M = F(null), v = z === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : z || { duration: 0, once: !0, amount: 0 }, R = Z(M, {
+    once: v.once,
+    amount: v.amount
+  }), T = O(s.map((e) => e.value)), V = F(null), a = u / c, p = (a - L * 2) / 2;
+  if (p <= 0)
+    return console.error(
+      "The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0."
+    ), null;
+  const j = [];
+  return s.forEach((e, t) => {
+    const q = Math.round(e.value / T * x);
+    for (let I = 0; I < q; I += 1)
+      j.push({ color: b[t] });
+  }), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${B || "light"} flex  ${o ? "w-fit grow-0" : "w-full grow"}`,
+      dir: w === "he" || w === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: E(
+            `${n ? n === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${w || "en"}`,
+            y?.graphContainer
+          ),
+          style: {
+            ...m?.graphContainer || {},
+            minHeight: "inherit",
+            ...n && n !== !0 ? { backgroundColor: n } : {}
+          },
+          id: S,
+          ref: V,
+          "aria-label": G || `${d ? `The graph shows ${d}. ` : ""}${h ? ` ${h}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: n ? $ || "1rem" : $ || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-3 w-full grow", children: [
+                d || h || C ? /* @__PURE__ */ r.jsx(
+                  Q,
+                  {
+                    styles: {
+                      title: m?.title,
+                      description: m?.description
+                    },
+                    classNames: {
+                      title: y?.title,
+                      description: y?.description
+                    },
+                    graphTitle: d,
+                    graphDescription: h,
+                    width: o,
+                    graphDownload: C ? V.current : void 0,
+                    dataDownload: A ? s.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? s.map((e) => e.data).filter((e) => e !== void 0) : s.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                D ? /* @__PURE__ */ r.jsx(
+                  U,
+                  {
+                    marginBottom: "2xs",
+                    className: "text-primary-gray-700 dark:text-primary-gray-100 font-bold",
+                    style: { width: o ? `${o}px` : "100%" },
+                    children: D
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsxs("div", { className: "flex grow flex-col gap-4 justify-between", children: [
+                  /* @__PURE__ */ r.jsxs("div", { children: [
+                    W ? /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        className: "mb-4 leading-0",
+                        style: { width: o ? `${o}px` : "100%" },
+                        "aria-label": "Color legend",
+                        children: /* @__PURE__ */ r.jsx("div", { className: "flex mb-0 flex-wrap gap-x-4 gap-y-1", children: s.map((e, t) => /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 items-center", children: [
+                          /* @__PURE__ */ r.jsx(
+                            "div",
+                            {
+                              className: "w-3 h-3 rounded-full",
+                              style: { backgroundColor: b[t] }
+                            }
+                          ),
+                          /* @__PURE__ */ r.jsxs(
+                            J,
+                            {
+                              marginBottom: "none",
+                              size: "sm",
+                              className: "text-primary-gray-700 dark:text-primary-gray-100",
+                              children: [
+                                e.label,
+                                ":",
+                                " ",
+                                /* @__PURE__ */ r.jsx("span", { className: "font-bold", children: Y(e.value, "NA", P) })
+                              ]
+                            }
+                          )
+                        ] }, t)) })
+                      }
+                    ) : null,
+                    /* @__PURE__ */ r.jsx("div", { "aria-label": "Graph area", children: /* @__PURE__ */ r.jsx(
+                      "svg",
+                      {
+                        width: `${o || u}px`,
+                        height: `${Math.max(
+                          i,
+                          g ? l && o ? i ? o * l > i ? o * l : i : o * l : g : Math.floor((x - 1) / c) * a + a / 2 + p + 5
+                        )}px`,
+                        ref: M,
+                        direction: "ltr",
+                        viewBox: `0 0 ${o || u} ${Math.max(
+                          i,
+                          g ? l && o ? i ? o * l > i ? o * l : i : o * l : g : Math.floor((x - 1) / c) * a + a / 2 + p + 5
+                        )}`,
+                        children: /* @__PURE__ */ r.jsx(_, { children: /* @__PURE__ */ r.jsx("g", { children: j.map((e, t) => /* @__PURE__ */ r.jsx(
+                          ee.circle,
+                          {
+                            cx: t % c * a + a / 2,
+                            cy: Math.floor(t / c) * a + a / 2,
+                            style: {
+                              ...f ? {} : { stroke: e.color },
+                              strokeWidth: 1
+                            },
+                            variants: {
+                              initial: {
+                                fill: "#fff",
+                                opacity: 0,
+                                ...f ? {} : { stroke: e.color },
+                                strokeWidth: 1
+                              },
+                              whileInView: {
+                                fill: e.color,
+                                opacity: 1,
+                                ...f ? {} : { stroke: e.color },
+                                strokeWidth: 1,
+                                transition: {
+                                  duration: 0,
+                                  delay: v.duration / j.length * t
+                                }
+                              }
+                            },
+                            initial: "initial",
+                            animate: R ? "whileInView" : "initial",
+                            className: (e.color.toLowerCase() === "#fff" || e.color.toLowerCase() === "#ffffff" || e.color.toLowerCase() === "white") && f ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "",
+                            r: p
+                          },
+                          t
+                        )) }) })
+                      }
+                    ) })
+                  ] }),
+                  N || k ? /* @__PURE__ */ r.jsx(
+                    K,
+                    {
+                      styles: {
+                        footnote: m?.footnote,
+                        source: m?.source
+                      },
+                      sources: N,
+                      footNote: k,
+                      width: o
+                    }
+                  ) : null
+                ] })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  he as UnitChart
+};
 //# sourceMappingURL=UnitChart.js.map

package/dist/UnitChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnitChart.js","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\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  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\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  /** Colors of the highlighted circles */\r\n  colors?: 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\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\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\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 UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\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  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\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.current : 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            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            cx={(i % gridSize) * gridDimension + gridDimension / 2}\r\n                            cy={Math.floor(i / gridSize) * gridDimension + gridDimension / 2}\r\n                            style={{\r\n                              ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"UnitChart.js","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\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  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\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  /** Colors of the highlighted circles */\r\n  colors?: 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\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\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\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 UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\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  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\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.current : 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            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            cx={(i % gridSize) * gridDimension + gridDimension / 2}\r\n                            cy={Math.floor(i / gridSize) * gridDimension + gridDimension / 2}\r\n                            style={{\r\n                              ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}

package/dist/XAxesLabels-CJMQbfVy.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("./index-CHPV5EwG-DDoeWRVt.cjs"),u=require("./proxy-PQd2AItT.cjs");function d(n){const{value:a,y:s,x:t,style:r,className:l,width:o,height:x,alignment:c="top",animate:e,isInView:m}=n;return i.jsxRuntimeExports.jsx(u.motion.foreignObject,{width:o,height:x,y:s,variants:{initial:{x:t},whileInView:{x:t,transition:{duration:e.duration}}},initial:"initial",animate:m?"whileInView":"initial",exit:{opacity:0,transition:{duration:e.duration}},children:i.jsxRuntimeExports.jsx("div",{className:`flex flex-col items-center h-inherit ${c==="top"?"justify-start":"justify-end"}`,children:i.jsxRuntimeExports.jsx("p",{className:i.mo("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none",l),style:r,children:a})})})}exports.XAxesLabels=d;
+//# sourceMappingURL=XAxesLabels-CJMQbfVy.cjs.map

package/dist/{XAxesLabels-C9REbQQs.cjs.map → XAxesLabels-CJMQbfVy.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"XAxesLabels-C9REbQQs.cjs","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.foreignObject\r\n      width={width}\r\n      height={height}\r\n      y={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          transition: { duration: animate.duration },\r\n        },\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      <div\r\n        className={`flex flex-col items-center h-inherit ${\r\n          alignment === 'top' ? 'justify-start' : 'justify-end'\r\n        }`}\r\n      >\r\n        <p\r\n          className={cn(\r\n            'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n            className,\r\n          )}\r\n          style={style}\r\n        >\r\n          {value}\r\n        </p>\r\n      </div>\r\n    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":"6IAkBO,SAASA,EAAYC,EAAc,CACxC,KAAM,CACJ,MAAAC,EACA,EAAAC,EACA,EAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,MACZ,QAAAC,EACA,SAAAC,CAAA,EACEV,EACJ,OACEW,EAAAA,kBAAAA,IAACC,EAAAA,OAAO,cAAP,CACC,MAAAN,EACA,OAAAC,EACA,EAAAL,EACA,SAAU,CACR,QAAS,CACP,EAAAC,CAAA,EAEF,YAAa,CACX,EAAAA,EACA,WAAY,CAAE,SAAUM,EAAQ,QAAA,CAAS,CAC3C,EAEF,QAAQ,UACR,QAASC,EAAW,cAAgB,UACpC,KAAM,CAAE,QAAS,EAAG,WAAY,CAAE,SAAUD,EAAQ,SAAS,EAE7D,SAAAE,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW,wCACTH,IAAc,MAAQ,gBAAkB,aAC1C,GAEA,SAAAG,EAAAA,kBAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,UAAAA,GACT,oGACAR,CAAA,EAEF,MAAAD,EAEC,SAAAH,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAGN"}
+{"version":3,"file":"XAxesLabels-CJMQbfVy.cjs","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.foreignObject\r\n      width={width}\r\n      height={height}\r\n      y={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          transition: { duration: animate.duration },\r\n        },\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      <div\r\n        className={`flex flex-col items-center h-inherit ${\r\n          alignment === 'top' ? 'justify-start' : 'justify-end'\r\n        }`}\r\n      >\r\n        <p\r\n          className={cn(\r\n            'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n            className,\r\n          )}\r\n          style={style}\r\n        >\r\n          {value}\r\n        </p>\r\n      </div>\r\n    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":"gGAkBO,SAASA,EAAYC,EAAc,CACxC,KAAM,CACJ,MAAAC,EACA,EAAAC,EACA,EAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,MACZ,QAAAC,EACA,SAAAC,CAAA,EACEV,EACJ,OACEW,EAAAA,kBAAAA,IAACC,EAAAA,OAAO,cAAP,CACC,MAAAN,EACA,OAAAC,EACA,EAAAL,EACA,SAAU,CACR,QAAS,CACP,EAAAC,CAAA,EAEF,YAAa,CACX,EAAAA,EACA,WAAY,CAAE,SAAUM,EAAQ,QAAA,CAAS,CAC3C,EAEF,QAAQ,UACR,QAASC,EAAW,cAAgB,UACpC,KAAM,CAAE,QAAS,EAAG,WAAY,CAAE,SAAUD,EAAQ,SAAS,EAE7D,SAAAE,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW,wCACTH,IAAc,MAAQ,gBAAkB,aAC1C,GAEA,SAAAG,EAAAA,kBAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,GACT,oGACAR,CAAA,EAEF,MAAAD,EAEC,SAAAH,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAGN"}

package/dist/{XAxesLabels-DVw7Lvuz.js → XAxesLabels-DQFo_z2R.js}

@@ -1,23 +1,22 @@
-import { j as i } from "./index-BHm2KTjD-2e-Fu8L-.js";
-import { c as p } from "./Typography-XJoSE-By.js";
-import { m as d } from "./use-in-view-CZPXmTZM.js";
-function y(e) {
+import { j as i, m as d } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { m as p } from "./proxy-DJxJg1kD.js";
+function u(a) {
   const {
-    value: a,
+    value: n,
     y: r,
     x: t,
     style: s,
-    className: o,
-    width: l,
+    className: l,
+    width: o,
     height: m,
-    alignment: c = "top",
-    animate: n,
-    isInView: x
-  } = e;
+    alignment: x = "top",
+    animate: e,
+    isInView: c
+  } = a;
   return /* @__PURE__ */ i.jsx(
-    d.foreignObject,
+    p.foreignObject,
     {
-      width: l,
+      width: o,
       height: m,
       y: r,
       variants: {
@@ -26,25 +25,25 @@ function y(e) {
         },
         whileInView: {
           x: t,
-          transition: { duration: n.duration }
+          transition: { duration: e.duration }
         }
       },
       initial: "initial",
-      animate: x ? "whileInView" : "initial",
-      exit: { opacity: 0, transition: { duration: n.duration } },
+      animate: c ? "whileInView" : "initial",
+      exit: { opacity: 0, transition: { duration: e.duration } },
       children: /* @__PURE__ */ i.jsx(
         "div",
         {
-          className: `flex flex-col items-center h-inherit ${c === "top" ? "justify-start" : "justify-end"}`,
+          className: `flex flex-col items-center h-inherit ${x === "top" ? "justify-start" : "justify-end"}`,
           children: /* @__PURE__ */ i.jsx(
             "p",
             {
-              className: p.cn(
+              className: d(
                 "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none",
-                o
+                l
               ),
               style: s,
-              children: a
+              children: n
             }
           )
         }
@@ -53,6 +52,6 @@ function y(e) {
   );
 }
 export {
-  y as X
+  u as X
 };
-//# sourceMappingURL=XAxesLabels-DVw7Lvuz.js.map
+//# sourceMappingURL=XAxesLabels-DQFo_z2R.js.map

package/dist/{XAxesLabels-DVw7Lvuz.js.map → XAxesLabels-DQFo_z2R.js.map}

@@ -1 +1 @@
-{"version":3,"file":"XAxesLabels-DVw7Lvuz.js","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.foreignObject\r\n      width={width}\r\n      height={height}\r\n      y={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          transition: { duration: animate.duration },\r\n        },\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      <div\r\n        className={`flex flex-col items-center h-inherit ${\r\n          alignment === 'top' ? 'justify-start' : 'justify-end'\r\n        }`}\r\n      >\r\n        <p\r\n          className={cn(\r\n            'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n            className,\r\n          )}\r\n          style={style}\r\n        >\r\n          {value}\r\n        </p>\r\n      </div>\r\n    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":";;;AAkBO,SAASA,EAAYC,GAAc;AACxC,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,GAAAC;AAAA,IACA,GAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEV;AACJ,SACEW,gBAAAA,EAAAA;AAAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,OAAAN;AAAA,MACA,QAAAC;AAAA,MACA,GAAAL;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAAC;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX,GAAAA;AAAA,UACA,YAAY,EAAE,UAAUM,EAAQ,SAAA;AAAA,QAAS;AAAA,MAC3C;AAAA,MAEF,SAAQ;AAAA,MACR,SAASC,IAAW,gBAAgB;AAAA,MACpC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAUD,EAAQ,WAAS;AAAA,MAE7D,UAAAE,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,wCACTH,MAAc,QAAQ,kBAAkB,aAC1C;AAAA,UAEA,UAAAG,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE,EAAAA;AAAAA,gBACT;AAAA,gBACAR;AAAA,cAAA;AAAA,cAEF,OAAAD;AAAA,cAEC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"XAxesLabels-DQFo_z2R.js","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.foreignObject\r\n      width={width}\r\n      height={height}\r\n      y={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          transition: { duration: animate.duration },\r\n        },\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      <div\r\n        className={`flex flex-col items-center h-inherit ${\r\n          alignment === 'top' ? 'justify-start' : 'justify-end'\r\n        }`}\r\n      >\r\n        <p\r\n          className={cn(\r\n            'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n            className,\r\n          )}\r\n          style={style}\r\n        >\r\n          {value}\r\n        </p>\r\n      </div>\r\n    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":";;AAkBO,SAASA,EAAYC,GAAc;AACxC,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,GAAAC;AAAA,IACA,GAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEV;AACJ,SACEW,gBAAAA,EAAAA;AAAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,OAAAN;AAAA,MACA,QAAAC;AAAA,MACA,GAAAL;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAAC;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX,GAAAA;AAAA,UACA,YAAY,EAAE,UAAUM,EAAQ,SAAA;AAAA,QAAS;AAAA,MAC3C;AAAA,MAEF,SAAQ;AAAA,MACR,SAASC,IAAW,gBAAgB;AAAA,MACpC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAUD,EAAQ,WAAS;AAAA,MAE7D,UAAAE,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,wCACTH,MAAc,QAAQ,kBAAkB,aAC1C;AAAA,UAEA,UAAAG,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAAA,gBACT;AAAA,gBACAR;AAAA,cAAA;AAAA,cAEF,OAAAD;AAAA,cAEC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/{XTicksAndGridLines-CUefTINd.js → XTicksAndGridLines-Bn9u5gOM.js}

@@ -1,57 +1,56 @@
-import { j as s } from "./index-BHm2KTjD-2e-Fu8L-.js";
-import { c as x } from "./Typography-XJoSE-By.js";
-import { numberFormattingFunction as u } from "./numberFormattingFunction.js";
-function h(o) {
+import { j as a, m as x } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { n as u } from "./numberFormattingFunction-14YCbkN2.js";
+function b(o) {
   const {
     values: r,
-    x: c,
+    x: f,
     y1: l,
     y2: t,
     styles: n,
     classNames: m,
-    prefix: f,
+    prefix: c,
     suffix: d,
     labelType: e,
     showGridLines: y,
     precision: g,
     leftLabel: p = !1
   } = o;
-  return !r && !y ? null : /* @__PURE__ */ s.jsx(s.Fragment, { children: c.map((i, a) => /* @__PURE__ */ s.jsxs("g", { children: [
-    y ? /* @__PURE__ */ s.jsx(
+  return !r && !y ? null : /* @__PURE__ */ a.jsx(a.Fragment, { children: f.map((s, i) => /* @__PURE__ */ a.jsxs("g", { children: [
+    y ? /* @__PURE__ */ a.jsx(
       "line",
       {
-        x1: i,
-        x2: i,
+        x1: s,
+        x2: s,
         y1: l,
         y2: t,
-        className: x.cn(
+        className: x(
           "undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550",
           m?.gridLines
         ),
         style: n?.gridLines
       }
     ) : null,
-    r ? /* @__PURE__ */ s.jsx(
+    r ? /* @__PURE__ */ a.jsx(
       "text",
       {
-        x: i,
+        x: s,
         y: e === "primary" ? t : l,
         dy: e === "primary" ? "1em" : "0.75em",
-        dx: e === "primary" ? 0 : i < 0 || p ? -3 : 3,
+        dx: e === "primary" ? 0 : s < 0 || p ? -3 : 3,
         style: {
-          textAnchor: e === "primary" ? "middle" : i < 0 || p ? "end" : "start",
+          textAnchor: e === "primary" ? "middle" : s < 0 || p ? "end" : "start",
           ...n?.labels || {}
         },
-        className: x.cn(
+        className: x(
           e === "primary" ? "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs" : "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
           m?.labels
         ),
-        children: typeof r[a] == "string" ? r[a] : u(r[a], "NA", g, f, d)
+        children: typeof r[i] == "string" ? r[i] : u(r[i], "NA", g, c, d)
       }
     ) : null
-  ] }, a)) });
+  ] }, i)) });
 }
 export {
-  h as X
+  b as X
 };
-//# sourceMappingURL=XTicksAndGridLines-CUefTINd.js.map
+//# sourceMappingURL=XTicksAndGridLines-Bn9u5gOM.js.map

package/dist/{XTicksAndGridLines-CUefTINd.js.map → XTicksAndGridLines-Bn9u5gOM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"XTicksAndGridLines-CUefTINd.js","sources":["../src/Components/Elements/Axes/XTicksAndGridLines.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  values?: (number | string)[];\r\n  x: number[];\r\n  y2: number;\r\n  y1: number;\r\n  styles: { gridLines?: React.CSSProperties; labels?: React.CSSProperties };\r\n  classNames: { gridLines?: string; labels?: string };\r\n  prefix?: string;\r\n  suffix?: string;\r\n  labelType: 'primary' | 'secondary';\r\n  showGridLines: boolean;\r\n  leftLabel?: boolean;\r\n  precision: number;\r\n}\r\n\r\nexport function XTicksAndGridLines(props: Props) {\r\n  const {\r\n    values,\r\n    x,\r\n    y1,\r\n    y2,\r\n    styles,\r\n    classNames,\r\n    prefix,\r\n    suffix,\r\n    labelType,\r\n    showGridLines,\r\n    precision,\r\n    leftLabel = false,\r\n  } = props;\r\n  if (!values && !showGridLines) return null;\r\n  return (\r\n    <>\r\n      {x.map((d, i) => (\r\n        <g key={i}>\r\n          {showGridLines ? (\r\n            <line\r\n              x1={d}\r\n              x2={d}\r\n              y1={y1}\r\n              y2={y2}\r\n              className={cn(\r\n                'undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550',\r\n                classNames?.gridLines,\r\n              )}\r\n              style={styles?.gridLines}\r\n            />\r\n          ) : null}\r\n          {values ? (\r\n            <text\r\n              x={d}\r\n              y={labelType === 'primary' ? y2 : y1}\r\n              dy={labelType === 'primary' ? '1em' : '0.75em'}\r\n              dx={labelType === 'primary' ? 0 : d < 0 || leftLabel ? -3 : 3}\r\n              style={{\r\n                textAnchor:\r\n                  labelType === 'primary' ? 'middle' : d < 0 || leftLabel ? 'end' : 'start',\r\n                ...(styles?.labels || {}),\r\n              }}\r\n              className={cn(\r\n                labelType === 'primary'\r\n                  ? 'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n                  : 'fill-primary-gray-550 dark:fill-primary-gray-500 text-xs',\r\n                classNames?.labels,\r\n              )}\r\n            >\r\n              {typeof values[i] === 'string'\r\n                ? values[i]\r\n                : numberFormattingFunction(values[i], 'NA', precision, prefix, suffix)}\r\n            </text>\r\n          ) : null}\r\n        </g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["XTicksAndGridLines","props","values","x","y1","y2","styles","classNames","prefix","suffix","labelType","showGridLines","precision","leftLabel","d","i","jsx","cn","numberFormattingFunction"],"mappings":";;;AAmBO,SAASA,EAAmBC,GAAc;AAC/C,QAAM;AAAA,IACJ,QAAAC;AAAA,IACA,GAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACVZ;AACJ,SAAI,CAACC,KAAU,CAACS,IAAsB,2CAGjC,UAAAR,EAAE,IAAI,CAACW,GAAGC,6BACR,KAAA,EACE,UAAA;AAAA,IAAAJ,IACCK,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIF;AAAA,QACJ,IAAIA;AAAA,QACJ,IAAAV;AAAA,QACA,IAAAC;AAAA,QACA,WAAWY,EAAAA;AAAAA,UACT;AAAA,UACAV,GAAY;AAAA,QAAA;AAAA,QAEd,OAAOD,GAAQ;AAAA,MAAA;AAAA,IAAA,IAEf;AAAA,IACHJ,IACCc,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGF;AAAA,QACH,GAAGJ,MAAc,YAAYL,IAAKD;AAAA,QAClC,IAAIM,MAAc,YAAY,QAAQ;AAAA,QACtC,IAAIA,MAAc,YAAY,IAAII,IAAI,KAAKD,IAAY,KAAK;AAAA,QAC5D,OAAO;AAAA,UACL,YACEH,MAAc,YAAY,WAAWI,IAAI,KAAKD,IAAY,QAAQ;AAAA,UACpE,GAAIP,GAAQ,UAAU,CAAA;AAAA,QAAC;AAAA,QAEzB,WAAWW,EAAAA;AAAAA,UACTP,MAAc,YACV,6DACA;AAAA,UACJH,GAAY;AAAA,QAAA;AAAA,QAGb,UAAA,OAAOL,EAAOa,CAAC,KAAM,WAClBb,EAAOa,CAAC,IACRG,EAAyBhB,EAAOa,CAAC,GAAG,MAAMH,GAAWJ,GAAQC,CAAM;AAAA,MAAA;AAAA,IAAA,IAEvE;AAAA,EAAA,KApCEM,CAqCR,CACD,GACH;AAEJ;"}
+{"version":3,"file":"XTicksAndGridLines-Bn9u5gOM.js","sources":["../src/Components/Elements/Axes/XTicksAndGridLines.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  values?: (number | string)[];\r\n  x: number[];\r\n  y2: number;\r\n  y1: number;\r\n  styles: { gridLines?: React.CSSProperties; labels?: React.CSSProperties };\r\n  classNames: { gridLines?: string; labels?: string };\r\n  prefix?: string;\r\n  suffix?: string;\r\n  labelType: 'primary' | 'secondary';\r\n  showGridLines: boolean;\r\n  leftLabel?: boolean;\r\n  precision: number;\r\n}\r\n\r\nexport function XTicksAndGridLines(props: Props) {\r\n  const {\r\n    values,\r\n    x,\r\n    y1,\r\n    y2,\r\n    styles,\r\n    classNames,\r\n    prefix,\r\n    suffix,\r\n    labelType,\r\n    showGridLines,\r\n    precision,\r\n    leftLabel = false,\r\n  } = props;\r\n  if (!values && !showGridLines) return null;\r\n  return (\r\n    <>\r\n      {x.map((d, i) => (\r\n        <g key={i}>\r\n          {showGridLines ? (\r\n            <line\r\n              x1={d}\r\n              x2={d}\r\n              y1={y1}\r\n              y2={y2}\r\n              className={cn(\r\n                'undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550',\r\n                classNames?.gridLines,\r\n              )}\r\n              style={styles?.gridLines}\r\n            />\r\n          ) : null}\r\n          {values ? (\r\n            <text\r\n              x={d}\r\n              y={labelType === 'primary' ? y2 : y1}\r\n              dy={labelType === 'primary' ? '1em' : '0.75em'}\r\n              dx={labelType === 'primary' ? 0 : d < 0 || leftLabel ? -3 : 3}\r\n              style={{\r\n                textAnchor:\r\n                  labelType === 'primary' ? 'middle' : d < 0 || leftLabel ? 'end' : 'start',\r\n                ...(styles?.labels || {}),\r\n              }}\r\n              className={cn(\r\n                labelType === 'primary'\r\n                  ? 'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n                  : 'fill-primary-gray-550 dark:fill-primary-gray-500 text-xs',\r\n                classNames?.labels,\r\n              )}\r\n            >\r\n              {typeof values[i] === 'string'\r\n                ? values[i]\r\n                : numberFormattingFunction(values[i], 'NA', precision, prefix, suffix)}\r\n            </text>\r\n          ) : null}\r\n        </g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["XTicksAndGridLines","props","values","x","y1","y2","styles","classNames","prefix","suffix","labelType","showGridLines","precision","leftLabel","d","jsx","cn","numberFormattingFunction"],"mappings":";;AAmBO,SAASA,EAAmBC,GAAc;AAC/C,QAAM;AAAA,IACJ,QAAAC;AAAA,IACA,GAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACVZ;AACJ,SAAI,CAACC,KAAU,CAACS,IAAsB,2CAGjC,UAAAR,EAAE,IAAI,CAACW,GAAG,6BACR,KAAA,EACE,UAAA;AAAA,IAAAH,IACCI,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAID;AAAA,QACJ,IAAIA;AAAA,QACJ,IAAAV;AAAA,QACA,IAAAC;AAAA,QACA,WAAWW;AAAAA,UACT;AAAA,UACAT,GAAY;AAAA,QAAA;AAAA,QAEd,OAAOD,GAAQ;AAAA,MAAA;AAAA,IAAA,IAEf;AAAA,IACHJ,IACCa,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGD;AAAA,QACH,GAAGJ,MAAc,YAAYL,IAAKD;AAAA,QAClC,IAAIM,MAAc,YAAY,QAAQ;AAAA,QACtC,IAAIA,MAAc,YAAY,IAAII,IAAI,KAAKD,IAAY,KAAK;AAAA,QAC5D,OAAO;AAAA,UACL,YACEH,MAAc,YAAY,WAAWI,IAAI,KAAKD,IAAY,QAAQ;AAAA,UACpE,GAAIP,GAAQ,UAAU,CAAA;AAAA,QAAC;AAAA,QAEzB,WAAWU;AAAAA,UACTN,MAAc,YACV,6DACA;AAAA,UACJH,GAAY;AAAA,QAAA;AAAA,QAGb,UAAA,OAAOL,EAAO,CAAC,KAAM,WAClBA,EAAO,CAAC,IACRe,EAAyBf,EAAO,CAAC,GAAG,MAAMU,GAAWJ,GAAQC,CAAM;AAAA,MAAA;AAAA,IAAA,IAEvE;AAAA,EAAA,KApCE,CAqCR,CACD,GACH;AAEJ;"}

package/dist/XTicksAndGridLines-CCzXIV8d.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),g=require("./numberFormattingFunction-02t-wJta.cjs");function f(p){const{values:e,x:o,y1:n,y2:a,styles:l,classNames:m,prefix:u,suffix:c,labelType:i,showGridLines:x,precision:d,leftLabel:y=!1}=p;return!e&&!x?null:r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:o.map((s,t)=>r.jsxRuntimeExports.jsxs("g",{children:[x?r.jsxRuntimeExports.jsx("line",{x1:s,x2:s,y1:n,y2:a,className:r.mo("undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550",m?.gridLines),style:l?.gridLines}):null,e?r.jsxRuntimeExports.jsx("text",{x:s,y:i==="primary"?a:n,dy:i==="primary"?"1em":"0.75em",dx:i==="primary"?0:s<0||y?-3:3,style:{textAnchor:i==="primary"?"middle":s<0||y?"end":"start",...l?.labels||{}},className:r.mo(i==="primary"?"fill-primary-gray-700 dark:fill-primary-gray-300 text-xs":"fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",m?.labels),children:typeof e[t]=="string"?e[t]:g.numberFormattingFunction(e[t],"NA",d,u,c)}):null]},t))})}exports.XTicksAndGridLines=f;
+//# sourceMappingURL=XTicksAndGridLines-CCzXIV8d.cjs.map

package/dist/{XTicksAndGridLines-DuK35ROS.cjs.map → XTicksAndGridLines-CCzXIV8d.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"XTicksAndGridLines-DuK35ROS.cjs","sources":["../src/Components/Elements/Axes/XTicksAndGridLines.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  values?: (number | string)[];\r\n  x: number[];\r\n  y2: number;\r\n  y1: number;\r\n  styles: { gridLines?: React.CSSProperties; labels?: React.CSSProperties };\r\n  classNames: { gridLines?: string; labels?: string };\r\n  prefix?: string;\r\n  suffix?: string;\r\n  labelType: 'primary' | 'secondary';\r\n  showGridLines: boolean;\r\n  leftLabel?: boolean;\r\n  precision: number;\r\n}\r\n\r\nexport function XTicksAndGridLines(props: Props) {\r\n  const {\r\n    values,\r\n    x,\r\n    y1,\r\n    y2,\r\n    styles,\r\n    classNames,\r\n    prefix,\r\n    suffix,\r\n    labelType,\r\n    showGridLines,\r\n    precision,\r\n    leftLabel = false,\r\n  } = props;\r\n  if (!values && !showGridLines) return null;\r\n  return (\r\n    <>\r\n      {x.map((d, i) => (\r\n        <g key={i}>\r\n          {showGridLines ? (\r\n            <line\r\n              x1={d}\r\n              x2={d}\r\n              y1={y1}\r\n              y2={y2}\r\n              className={cn(\r\n                'undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550',\r\n                classNames?.gridLines,\r\n              )}\r\n              style={styles?.gridLines}\r\n            />\r\n          ) : null}\r\n          {values ? (\r\n            <text\r\n              x={d}\r\n              y={labelType === 'primary' ? y2 : y1}\r\n              dy={labelType === 'primary' ? '1em' : '0.75em'}\r\n              dx={labelType === 'primary' ? 0 : d < 0 || leftLabel ? -3 : 3}\r\n              style={{\r\n                textAnchor:\r\n                  labelType === 'primary' ? 'middle' : d < 0 || leftLabel ? 'end' : 'start',\r\n                ...(styles?.labels || {}),\r\n              }}\r\n              className={cn(\r\n                labelType === 'primary'\r\n                  ? 'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n                  : 'fill-primary-gray-550 dark:fill-primary-gray-500 text-xs',\r\n                classNames?.labels,\r\n              )}\r\n            >\r\n              {typeof values[i] === 'string'\r\n                ? values[i]\r\n                : numberFormattingFunction(values[i], 'NA', precision, prefix, suffix)}\r\n            </text>\r\n          ) : null}\r\n        </g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["XTicksAndGridLines","props","values","x","y1","y2","styles","classNames","prefix","suffix","labelType","showGridLines","precision","leftLabel","d","i","jsx","cn","numberFormattingFunction"],"mappings":"gJAmBO,SAASA,EAAmBC,EAAc,CAC/C,KAAM,CACJ,OAAAC,EACA,EAAAC,EACA,GAAAC,EACA,GAAAC,EACA,OAAAC,EACA,WAAAC,EACA,OAAAC,EACA,OAAAC,EACA,UAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,EAAA,EACVZ,EACJ,MAAI,CAACC,GAAU,CAACS,EAAsB,2DAGjC,SAAAR,EAAE,IAAI,CAACW,EAAGC,6BACR,IAAA,CACE,SAAA,CAAAJ,EACCK,EAAAA,kBAAAA,IAAC,OAAA,CACC,GAAIF,EACJ,GAAIA,EACJ,GAAAV,EACA,GAAAC,EACA,UAAWY,EAAAA,UAAAA,GACT,sEACAV,GAAY,SAAA,EAEd,MAAOD,GAAQ,SAAA,CAAA,EAEf,KACHJ,EACCc,EAAAA,kBAAAA,IAAC,OAAA,CACC,EAAGF,EACH,EAAGJ,IAAc,UAAYL,EAAKD,EAClC,GAAIM,IAAc,UAAY,MAAQ,SACtC,GAAIA,IAAc,UAAY,EAAII,EAAI,GAAKD,EAAY,GAAK,EAC5D,MAAO,CACL,WACEH,IAAc,UAAY,SAAWI,EAAI,GAAKD,EAAY,MAAQ,QACpE,GAAIP,GAAQ,QAAU,CAAA,CAAC,EAEzB,UAAWW,EAAAA,UAAAA,GACTP,IAAc,UACV,2DACA,2DACJH,GAAY,MAAA,EAGb,SAAA,OAAOL,EAAOa,CAAC,GAAM,SAClBb,EAAOa,CAAC,EACRG,EAAAA,yBAAyBhB,EAAOa,CAAC,EAAG,KAAMH,EAAWJ,EAAQC,CAAM,CAAA,CAAA,EAEvE,IAAA,GApCEM,CAqCR,CACD,EACH,CAEJ"}
+{"version":3,"file":"XTicksAndGridLines-CCzXIV8d.cjs","sources":["../src/Components/Elements/Axes/XTicksAndGridLines.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  values?: (number | string)[];\r\n  x: number[];\r\n  y2: number;\r\n  y1: number;\r\n  styles: { gridLines?: React.CSSProperties; labels?: React.CSSProperties };\r\n  classNames: { gridLines?: string; labels?: string };\r\n  prefix?: string;\r\n  suffix?: string;\r\n  labelType: 'primary' | 'secondary';\r\n  showGridLines: boolean;\r\n  leftLabel?: boolean;\r\n  precision: number;\r\n}\r\n\r\nexport function XTicksAndGridLines(props: Props) {\r\n  const {\r\n    values,\r\n    x,\r\n    y1,\r\n    y2,\r\n    styles,\r\n    classNames,\r\n    prefix,\r\n    suffix,\r\n    labelType,\r\n    showGridLines,\r\n    precision,\r\n    leftLabel = false,\r\n  } = props;\r\n  if (!values && !showGridLines) return null;\r\n  return (\r\n    <>\r\n      {x.map((d, i) => (\r\n        <g key={i}>\r\n          {showGridLines ? (\r\n            <line\r\n              x1={d}\r\n              x2={d}\r\n              y1={y1}\r\n              y2={y2}\r\n              className={cn(\r\n                'undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550',\r\n                classNames?.gridLines,\r\n              )}\r\n              style={styles?.gridLines}\r\n            />\r\n          ) : null}\r\n          {values ? (\r\n            <text\r\n              x={d}\r\n              y={labelType === 'primary' ? y2 : y1}\r\n              dy={labelType === 'primary' ? '1em' : '0.75em'}\r\n              dx={labelType === 'primary' ? 0 : d < 0 || leftLabel ? -3 : 3}\r\n              style={{\r\n                textAnchor:\r\n                  labelType === 'primary' ? 'middle' : d < 0 || leftLabel ? 'end' : 'start',\r\n                ...(styles?.labels || {}),\r\n              }}\r\n              className={cn(\r\n                labelType === 'primary'\r\n                  ? 'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n                  : 'fill-primary-gray-550 dark:fill-primary-gray-500 text-xs',\r\n                classNames?.labels,\r\n              )}\r\n            >\r\n              {typeof values[i] === 'string'\r\n                ? values[i]\r\n                : numberFormattingFunction(values[i], 'NA', precision, prefix, suffix)}\r\n            </text>\r\n          ) : null}\r\n        </g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["XTicksAndGridLines","props","values","x","y1","y2","styles","classNames","prefix","suffix","labelType","showGridLines","precision","leftLabel","d","i","jsx","cn","numberFormattingFunction"],"mappings":"mHAmBO,SAASA,EAAmBC,EAAc,CAC/C,KAAM,CACJ,OAAAC,EACA,EAAAC,EACA,GAAAC,EACA,GAAAC,EACA,OAAAC,EACA,WAAAC,EACA,OAAAC,EACA,OAAAC,EACA,UAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,EAAA,EACVZ,EACJ,MAAI,CAACC,GAAU,CAACS,EAAsB,2DAGjC,SAAAR,EAAE,IAAI,CAACW,EAAGC,6BACR,IAAA,CACE,SAAA,CAAAJ,EACCK,EAAAA,kBAAAA,IAAC,OAAA,CACC,GAAIF,EACJ,GAAIA,EACJ,GAAAV,EACA,GAAAC,EACA,UAAWY,EAAAA,GACT,sEACAV,GAAY,SAAA,EAEd,MAAOD,GAAQ,SAAA,CAAA,EAEf,KACHJ,EACCc,EAAAA,kBAAAA,IAAC,OAAA,CACC,EAAGF,EACH,EAAGJ,IAAc,UAAYL,EAAKD,EAClC,GAAIM,IAAc,UAAY,MAAQ,SACtC,GAAIA,IAAc,UAAY,EAAII,EAAI,GAAKD,EAAY,GAAK,EAC5D,MAAO,CACL,WACEH,IAAc,UAAY,SAAWI,EAAI,GAAKD,EAAY,MAAQ,QACpE,GAAIP,GAAQ,QAAU,CAAA,CAAC,EAEzB,UAAWW,EAAAA,GACTP,IAAc,UACV,2DACA,2DACJH,GAAY,MAAA,EAGb,SAAA,OAAOL,EAAOa,CAAC,GAAM,SAClBb,EAAOa,CAAC,EACRG,EAAAA,yBAAyBhB,EAAOa,CAAC,EAAG,KAAMH,EAAWJ,EAAQC,CAAM,CAAA,CAAA,EAEvE,IAAA,GApCEM,CAqCR,CACD,EACH,CAEJ"}