@undp/data-viz 2.5.4 → 2.6.1

package/dist/GriddedGraphsFromConfig.js

@@ -1,29 +1,41 @@
-import { c as f, j as s } from "./index-CHPV5EwG-BzibaIRc.js";
-import { useState as p, useEffect as h } from "react";
-import { w as c } from "./Spinner-B2IIKg9r.js";
-import { GriddedGraphs as g } from "./GriddedGraphs.js";
-import { f as u } from "./fetchAndParseData-BAXhgTDM.js";
-function w(l) {
-  const e = f.c(23), {
-    config: a
-  } = l, [t, d] = p(void 0);
-  let i, r;
-  if (e[0] !== a ? (i = () => {
-    (async () => {
-      if (typeof a == "string") {
-        const m = await u(a);
-        d(m);
-      } else
-        d(a);
-    })();
-  }, r = [a], e[0] = a, e[1] = i, e[2] = r) : (i = e[1], r = e[2]), h(i, r), !t) {
-    let o;
-    return e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ s.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ s.jsx(c, {}) }), e[3] = o) : o = e[3], o;
-  }
-  let n;
-  return e[4] !== t.advancedDataSelectionOptions || e[5] !== t.columnGridBy || e[6] !== t.dataFilters || e[7] !== t.dataSelectionOptions || e[8] !== t.dataSettings || e[9] !== t.dataTransform || e[10] !== t.debugMode || e[11] !== t.filters || e[12] !== t.graphDataConfiguration || e[13] !== t.graphSettings || e[14] !== t.graphType || e[15] !== t.minGraphHeight || e[16] !== t.minGraphWidth || e[17] !== t.noOfColumns || e[18] !== t.noOfFiltersPerRow || e[19] !== t.readableHeader || e[20] !== t.showCommonColorScale || e[21] !== t.theme ? (n = /* @__PURE__ */ s.jsx(g, { noOfColumns: t.noOfColumns, columnGridBy: t.columnGridBy, graphSettings: t.graphSettings, dataSettings: t.dataSettings, filters: t.filters, graphType: t.graphType, minGraphHeight: t.minGraphHeight, minGraphWidth: t.minGraphWidth, dataTransform: t.dataTransform, graphDataConfiguration: t.graphDataConfiguration, dataFilters: t.dataFilters, showCommonColorScale: t.showCommonColorScale, debugMode: t.debugMode, dataSelectionOptions: t.dataSelectionOptions, advancedDataSelectionOptions: t.advancedDataSelectionOptions, readableHeader: t.readableHeader, noOfFiltersPerRow: t.noOfFiltersPerRow, theme: t.theme }), e[4] = t.advancedDataSelectionOptions, e[5] = t.columnGridBy, e[6] = t.dataFilters, e[7] = t.dataSelectionOptions, e[8] = t.dataSettings, e[9] = t.dataTransform, e[10] = t.debugMode, e[11] = t.filters, e[12] = t.graphDataConfiguration, e[13] = t.graphSettings, e[14] = t.graphType, e[15] = t.minGraphHeight, e[16] = t.minGraphWidth, e[17] = t.noOfColumns, e[18] = t.noOfFiltersPerRow, e[19] = t.readableHeader, e[20] = t.showCommonColorScale, e[21] = t.theme, e[22] = n) : n = e[22], n;
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { r as t } from "./fetchAndParseData-C50SqMPu.js";
+import { GriddedGraphs as n } from "./GriddedGraphs.js";
+import { useEffect as r, useState as i } from "react";
+import { Spinner as a } from "@undp/design-system-react/Spinner";
+//#region src/Components/Dashboard/GriddedGraphsFromConfig.tsx
+var o = e();
+function s(e) {
+	let { config: s } = e, [c, l] = i(void 0);
+	return r(() => {
+		(async () => {
+			l(typeof s == "string" ? await t(s) : s);
+		})();
+	}, [s]), c ? /* @__PURE__ */ (0, o.jsx)(n, {
+		noOfColumns: c.noOfColumns,
+		columnGridBy: c.columnGridBy,
+		graphSettings: c.graphSettings,
+		dataSettings: c.dataSettings,
+		filters: c.filters,
+		graphType: c.graphType,
+		minGraphHeight: c.minGraphHeight,
+		minGraphWidth: c.minGraphWidth,
+		dataTransform: c.dataTransform,
+		graphDataConfiguration: c.graphDataConfiguration,
+		dataFilters: c.dataFilters,
+		showCommonColorScale: c.showCommonColorScale,
+		debugMode: c.debugMode,
+		dataSelectionOptions: c.dataSelectionOptions,
+		advancedDataSelectionOptions: c.advancedDataSelectionOptions,
+		readableHeader: c.readableHeader,
+		noOfFiltersPerRow: c.noOfFiltersPerRow,
+		theme: c.theme
+	}) : /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "w-full flex justify-center p-4",
+		children: /* @__PURE__ */ (0, o.jsx)(a, {})
+	});
 }
-export {
-  w as GriddedGraphsFromConfig
-};
-//# sourceMappingURL=GriddedGraphsFromConfig.js.map
+//#endregion
+export { s as GriddedGraphsFromConfig };
+
+//# sourceMappingURL=GriddedGraphsFromConfig.js.map

package/dist/GriddedGraphsFromConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"GriddedGraphsFromConfig.js","sources":["../src/Components/Dashboard/GriddedGraphsFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { GriddedGraphs } from './GriddedGraphs';\r\n\r\nimport {\r\n  AdvancedDataSelectionDataType,\r\n  AggregationSettingsDataType,\r\n  DataFilterDataType,\r\n  DataSelectionDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  GraphConfigurationDataType,\r\n  GraphSettingsDataType,\r\n  GraphType,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  noOfColumns?: number;\r\n  columnGridBy: string;\r\n  graphSettings?: GraphSettingsDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  graphType: Exclude<GraphType, 'geoHubMap' | 'geoHubCompareMap' | 'geoHubMapWithLayerSelection'>;\r\n  dataTransform?: {\r\n    keyColumn: string;\r\n    aggregationColumnsSetting?: AggregationSettingsDataType[];\r\n  };\r\n  dataFilters?: DataFilterDataType[];\r\n  graphDataConfiguration?: GraphConfigurationDataType[];\r\n  showCommonColorScale?: boolean;\r\n  minGraphWidth?: number;\r\n  minGraphHeight?: number;\r\n  debugMode?: boolean;\r\n  dataSelectionOptions?: DataSelectionDataType[];\r\n  advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  theme?: 'dark' | 'light';\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function GriddedGraphsFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <GriddedGraphs\r\n      noOfColumns={configSettings.noOfColumns}\r\n      columnGridBy={configSettings.columnGridBy}\r\n      graphSettings={configSettings.graphSettings}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      graphType={configSettings.graphType}\r\n      minGraphHeight={configSettings.minGraphHeight}\r\n      minGraphWidth={configSettings.minGraphWidth}\r\n      dataTransform={configSettings.dataTransform}\r\n      graphDataConfiguration={configSettings.graphDataConfiguration}\r\n      dataFilters={configSettings.dataFilters}\r\n      showCommonColorScale={configSettings.showCommonColorScale}\r\n      debugMode={configSettings.debugMode}\r\n      dataSelectionOptions={configSettings.dataSelectionOptions}\r\n      advancedDataSelectionOptions={configSettings.advancedDataSelectionOptions}\r\n      readableHeader={configSettings.readableHeader}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      theme={configSettings.theme}\r\n    />\r\n  );\r\n}\r\n"],"names":["GriddedGraphsFromConfig","props","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","fetchData","data","fetchAndParseJSON","useEffect","t2","Symbol","for","jsx","Spinner","advancedDataSelectionOptions","columnGridBy","dataFilters","dataSelectionOptions","dataSettings","dataTransform","debugMode","filters","graphDataConfiguration","graphSettings","graphType","minGraphHeight","minGraphWidth","noOfColumns","noOfFiltersPerRow","readableHeader","showCommonColorScale","theme","GriddedGraphs"],"mappings":";;;;;AAiDO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAAA,EAAA,EAAA,GACL;AAAA,IAAAC,QAAAA;AAAAA,EAAAA,IAAmBH,GACnB,CAAAI,GAAAC,CAAA,IAA4CC,EAAmCC,MAAS;AAAE,MAAAC,GAAAC;AAa1F,MAb0FR,SAAAE,KAChFK,IAAAA,MAAA;AASRE,KARkB,YAAA;AAChB,UAAI,OAAOP,KAAW,UAAQ;AAC5B,cAAAQ,IAAa,MAAMC,EAAkBT,CAAM;AAC3CE,QAAAA,EAAkBM,CAAI;AAAA,MAAC;AAEvBN,QAAAA,EAAkBF,CAAM;AAAA,IACzB,GAEHO;AAAAA,EAAW,GACVD,IAAA,CAACN,CAAM,GAACF,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,MAAAD,IAAAP,EAAA,CAAA,GAAAQ,IAAAR,EAAA,CAAA,IAVXY,EAAUL,GAUPC,CAAQ,GAEP,CAACL,GAAc;AAAA,QAAAU;AAAA,WAAAb,EAAA,CAAA,MAAAc,uBAAAC,IAAA,2BAAA,KAEfF,IAAAG,gBAAAA,EAAAA,IAAA,OAAA,EAAe,WAAA,kCACb,UAAAA,gBAAAA,MAACC,KAAO,GACV,GAAMjB,OAAAa,KAAAA,IAAAb,EAAA,CAAA,GAFNa;AAAAA,EAEM;AACN,MAAAA;AAAA,SAAAb,SAAAG,EAAAe,gCAAAlB,EAAA,CAAA,MAAAG,EAAAgB,gBAAAnB,EAAA,CAAA,MAAAG,EAAAiB,eAAApB,EAAA,CAAA,MAAAG,EAAAkB,wBAAArB,SAAAG,EAAAmB,gBAAAtB,EAAA,CAAA,MAAAG,EAAAoB,iBAAAvB,EAAA,EAAA,MAAAG,EAAAqB,aAAAxB,EAAA,EAAA,MAAAG,EAAAsB,WAAAzB,EAAA,EAAA,MAAAG,EAAAuB,0BAAA1B,EAAA,EAAA,MAAAG,EAAAwB,iBAAA3B,EAAA,EAAA,MAAAG,EAAAyB,aAAA5B,EAAA,EAAA,MAAAG,EAAA0B,kBAAA7B,UAAAG,EAAA2B,iBAAA9B,EAAA,EAAA,MAAAG,EAAA4B,eAAA/B,EAAA,EAAA,MAAAG,EAAA6B,qBAAAhC,EAAA,EAAA,MAAAG,EAAA8B,kBAAAjC,EAAA,EAAA,MAAAG,EAAA+B,wBAAAlC,EAAA,EAAA,MAAAG,EAAAgC,SAEFtB,IAAAG,gBAAAA,EAAAA,IAACoB,GAAA,EACc,aAAAjC,EAAc4B,aACb,cAAA5B,EAAcgB,cACb,eAAAhB,EAAcwB,eACf,cAAAxB,EAAcmB,cACnB,SAAAnB,EAAcsB,SACZ,WAAAtB,EAAcyB,WACT,gBAAAzB,EAAc0B,gBACf,eAAA1B,EAAc2B,eACd,eAAA3B,EAAcoB,eACL,wBAAApB,EAAcuB,wBACzB,aAAAvB,EAAciB,aACL,sBAAAjB,EAAc+B,sBACzB,WAAA/B,EAAcqB,WACH,sBAAArB,EAAckB,sBACN,8BAAAlB,EAAce,8BAC5B,gBAAAf,EAAc8B,gBACX,mBAAA9B,EAAc6B,mBAC1B,OAAA7B,EAAcgC,MAAAA,CAAM,GAC3BnC,EAAA,CAAA,IAAAG,EAAAe,8BAAAlB,EAAA,CAAA,IAAAG,EAAAgB,cAAAnB,EAAA,CAAA,IAAAG,EAAAiB,aAAApB,EAAA,CAAA,IAAAG,EAAAkB,sBAAArB,EAAA,CAAA,IAAAG,EAAAmB,cAAAtB,EAAA,CAAA,IAAAG,EAAAoB,eAAAvB,EAAA,EAAA,IAAAG,EAAAqB,WAAAxB,EAAA,EAAA,IAAAG,EAAAsB,SAAAzB,EAAA,EAAA,IAAAG,EAAAuB,wBAAA1B,EAAA,EAAA,IAAAG,EAAAwB,eAAA3B,EAAA,EAAA,IAAAG,EAAAyB,WAAA5B,EAAA,EAAA,IAAAG,EAAA0B,gBAAA7B,EAAA,EAAA,IAAAG,EAAA2B,eAAA9B,EAAA,EAAA,IAAAG,EAAA4B,aAAA/B,EAAA,EAAA,IAAAG,EAAA6B,mBAAAhC,EAAA,EAAA,IAAAG,EAAA8B,gBAAAjC,EAAA,EAAA,IAAAG,EAAA+B,sBAAAlC,EAAA,EAAA,IAAAG,EAAAgC,OAAAnC,QAAAa,KAAAA,IAAAb,EAAA,EAAA,GAnBFa;AAmBE;"}
+{"version":3,"file":"GriddedGraphsFromConfig.js","names":[],"sources":["../src/Components/Dashboard/GriddedGraphsFromConfig.tsx"],"sourcesContent":["import { Spinner } from '@undp/design-system-react/Spinner';\nimport { useEffect, useState } from 'react';\nimport type {\n  AdvancedDataSelectionDataType,\n  AggregationSettingsDataType,\n  DataFilterDataType,\n  DataSelectionDataType,\n  DataSettingsDataType,\n  FilterUiSettingsDataType,\n  GraphConfigurationDataType,\n  GraphSettingsDataType,\n  GraphType,\n} from '@/Types';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { GriddedGraphs } from './GriddedGraphs';\n\ninterface ConfigObject {\n  noOfColumns?: number;\n  columnGridBy: string;\n  graphSettings?: GraphSettingsDataType;\n  dataSettings: DataSettingsDataType;\n  filters?: FilterUiSettingsDataType[];\n  noOfFiltersPerRow?: number;\n  graphType: Exclude<GraphType, 'geoHubMap' | 'geoHubCompareMap' | 'geoHubMapWithLayerSelection'>;\n  dataTransform?: {\n    keyColumn: string;\n    aggregationColumnsSetting?: AggregationSettingsDataType[];\n  };\n  dataFilters?: DataFilterDataType[];\n  graphDataConfiguration?: GraphConfigurationDataType[];\n  showCommonColorScale?: boolean;\n  minGraphWidth?: number;\n  minGraphHeight?: number;\n  debugMode?: boolean;\n  dataSelectionOptions?: DataSelectionDataType[];\n  advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];\n  readableHeader?: {\n    value: string;\n    label: string;\n  }[];\n  theme?: 'dark' | 'light';\n}\n\ninterface Props {\n  config: string | ConfigObject;\n}\n\nexport function GriddedGraphsFromConfig(props: Props) {\n  const { config } = props;\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\n  useEffect(() => {\n    const fetchData = async () => {\n      if (typeof config === 'string') {\n        const data = await fetchAndParseJSON(config);\n        setConfigSettings(data);\n      } else {\n        setConfigSettings(config);\n      }\n    };\n    fetchData();\n  }, [config]);\n\n  if (!configSettings)\n    return (\n      <div className='w-full flex justify-center p-4'>\n        <Spinner />\n      </div>\n    );\n  return (\n    <GriddedGraphs\n      noOfColumns={configSettings.noOfColumns}\n      columnGridBy={configSettings.columnGridBy}\n      graphSettings={configSettings.graphSettings}\n      dataSettings={configSettings.dataSettings}\n      filters={configSettings.filters}\n      graphType={configSettings.graphType}\n      minGraphHeight={configSettings.minGraphHeight}\n      minGraphWidth={configSettings.minGraphWidth}\n      dataTransform={configSettings.dataTransform}\n      graphDataConfiguration={configSettings.graphDataConfiguration}\n      dataFilters={configSettings.dataFilters}\n      showCommonColorScale={configSettings.showCommonColorScale}\n      debugMode={configSettings.debugMode}\n      dataSelectionOptions={configSettings.dataSelectionOptions}\n      advancedDataSelectionOptions={configSettings.advancedDataSelectionOptions}\n      readableHeader={configSettings.readableHeader}\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\n      theme={configSettings.theme}\n    />\n  );\n}\n"],"mappings":";;;;;;;AA+CA,SAAgB,EAAwB,GAAc;CACpD,IAAM,EAAE,cAAW,GACb,CAAC,GAAgB,KAAqB,EAAmC,KAAA,CAAS;CAmBxF,OAlBA,QAAgB;EASd,aAR8B;GAC5B,AAEE,EAFE,OAAO,KAAW,WAEF,MADC,EAAkB,CAAM,IAGzB,CAAM;EAE5B,GACU;CACZ,GAAG,CAAC,CAAM,CAAC,GAEN,IAOH,iBAAA,GAAA,EAAA,KAAC,GAAD;EACE,aAAa,EAAe;EAC5B,cAAc,EAAe;EAC7B,eAAe,EAAe;EAC9B,cAAc,EAAe;EAC7B,SAAS,EAAe;EACxB,WAAW,EAAe;EAC1B,gBAAgB,EAAe;EAC/B,eAAe,EAAe;EAC9B,eAAe,EAAe;EAC9B,wBAAwB,EAAe;EACvC,aAAa,EAAe;EAC5B,sBAAsB,EAAe;EACrC,WAAW,EAAe;EAC1B,sBAAsB,EAAe;EACrC,8BAA8B,EAAe;EAC7C,gBAAgB,EAAe;EAC/B,mBAAmB,EAAe;EAClC,OAAO,EAAe;CACvB,CAAA,IAxBC,iBAAA,GAAA,EAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAU,CAAA;CACP,CAAA;AAwBX"}

package/dist/HeatMap-CpWBTEmB.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Colors.cjs`),ee=require(`./GraphFooter.cjs`),te=require(`./GraphHeader.cjs`),r=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),i=require(`./uniqBy-DTdieuuc.cjs`),a=require(`./GraphContainer-7xAPK4Tb.cjs`),o=require(`./ColorLegendWithMouseOver.cjs`),s=require(`./EmptyState-Bq7ZJmZB.cjs`),c=require(`./ordinal-FQwO0oQx.cjs`),l=require(`./linear-B93YyHf_.cjs`),u=require(`./band-BWpW41la.cjs`),d=require(`./threshold-BXJz-mv7.cjs`),f=require(`./fast-deep-equal-DN3ilkVq.cjs`),p=require(`./proxy-DaRMphjR.cjs`),ne=require(`./use-in-view-C4EPQfwM.cjs`),m=require(`./XAxesLabels-BvzqZwll.cjs`),re=require(`./numberFormattingFunction-Caf5NyIo.cjs`),h=require(`./YAxesLabels-DKRDxuHA.cjs`),g=require(`./DetailsModal-CtGqGcX9.cjs`),_=require(`./Tooltip-CO_iOj_w.cjs`),ie=require(`./getTextColorBasedOnBgColor-B0B-azeJ.cjs`),ae=require(`./LinearColorLegend.cjs`),v=require(`./ThresholdColorLegendWithMouseOver.cjs`);let oe=require(`@undp/design-system-react/cn`),y=require(`react`);var se=e.a(f.t(),1),b=t.t();function x(e){let{data:t,showColumnLabels:n,leftMargin:ee,rightMargin:te,truncateBy:a,width:o,height:s,topMargin:f,bottomMargin:ae,tooltip:v,onSeriesMouseOver:x,suffix:S,prefix:ce,showValues:le,colorDomain:C,colors:w,noDataColor:T,scaleType:E,showRowLabels:D,selectedColor:O,onSeriesMouseClick:k,resetSelectionOnDoubleClick:A,detailsOnClick:j,styles:M,classNames:N,animate:P,precision:ue,locale:F,padZeros:de}=e,I=(0,y.useRef)(null),L=ne.t(I,{once:P.once,amount:P.amount}),R={top:f,bottom:ae,left:ee,right:te},[z,B]=(0,y.useState)(void 0),[V,H]=(0,y.useState)(void 0),[U,W]=(0,y.useState)(void 0),[G,K]=(0,y.useState)(void 0),fe=o-R.left-R.right,q=s-R.top-R.bottom,J=i.t(t,`column`,!0),Y=i.t(t,`row`,!0),X=u.t().domain(Y).range([0,q]),Z=X.bandwidth(),Q=u.t().domain(J).range([0,fe]),$=Q.bandwidth(),pe=E===`categorical`?c.t().domain(C).range(w):E===`threshold`?d.t().domain(C).range(w):l.t().domain(C).range(w);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsxs)(p.t.svg,{width:`${o}px`,height:`${s}px`,viewBox:`0 0 ${o} ${s}`,style:{marginLeft:`auto`,marginRight:`auto`},direction:`ltr`,ref:I,children:[(0,b.jsx)(`g`,{transform:`translate(${R.left},0)`,children:n?J.map(e=>(0,b.jsx)(m.t,{y:0,x:Q(e),width:$,height:R.top-5,value:`${e}`.length<a?`${e}`:`${`${e}`.substring(0,a)}...`,style:M?.xAxis?.labels,className:N?.xAxis?.labels,alignment:`bottom`,animate:{duration:0,once:!0,amount:0},isInView:L},e)):null}),(0,b.jsx)(`g`,{transform:`translate(0,${R.top})`,children:D?Y.map(e=>(0,b.jsx)(h.t,{value:`${e}`.length<a?`${e}`:`${`${e}`.substring(0,a)}...`,y:X(e),x:0,width:R.left,height:Z,alignment:`right`,style:M?.yAxis?.labels,className:N?.yAxis?.labels,animate:{duration:0,once:!0,amount:0},isInView:L},e)):null}),(0,b.jsxs)(`g`,{transform:`translate(${R.left},${R.top})`,children:[Y.map(e=>(0,b.jsx)(`g`,{transform:`translate(0,${X(e)})`,children:J.map(t=>(0,b.jsx)(`rect`,{x:Q(t),y:0,width:$,height:Z,style:{fill:T},className:`stroke-1 stroke-primary-white dark:stroke-primary-gray-700`},`${e}-${t}`))},e)),t.filter(e=>!r.t(e.value)).map(e=>{let t=r.t(e.value)?T:pe(e.value);return(0,b.jsxs)(`g`,{transform:`translate(${Q(e.column)},${X(e.row)})`,onMouseEnter:t=>{H(e),K(t.clientY),W(t.clientX),x?.(e)},onClick:()=>{(k||j)&&((0,se.default)(z,e)&&A?(B(void 0),k?.(void 0)):(B(e),k?.(e)))},onMouseMove:t=>{H(e),K(t.clientY),W(t.clientX)},onMouseLeave:()=>{H(void 0),W(void 0),K(void 0),x?.(void 0)},opacity:O?O===t?1:.3:1,children:[(0,b.jsx)(p.t.rect,{x:0,y:0,width:$,height:Z,className:`stroke-1 stroke-primary-white dark:stroke-primary-gray-700`,exit:{opacity:0,transition:{duration:P.duration}},variants:{initial:{fill:t,opacity:0},whileInView:{fill:t,opacity:1,transition:{duration:P.duration}}},initial:`initial`,animate:L?`whileInView`:`initial`}),le&&!r.t(e.value)?(0,b.jsx)(p.t.g,{variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:P.duration}}},initial:`initial`,animate:L?`whileInView`:`initial`,exit:{opacity:0,transition:{duration:P.duration}},children:(0,b.jsx)(`foreignObject`,{y:0,x:0,width:$,height:Z,children:(0,b.jsx)(`div`,{className:`flex flex-col justify-center items-center h-inherit p-1`,children:(0,b.jsx)(`p`,{className:(0,oe.cn)(`text-xs text-center m-0 leading-[1.25] graph-value`,N?.graphObjectValues),style:{color:ie.t(t),...M?.graphObjectValues||{}},children:re.t(e.value,void 0,ue,ce,S,F,de)})})})}):null]},`${e.column}-${e.row}`)}),V?(0,b.jsx)(`rect`,{x:Q(V.column),y:X(V.row),width:$,height:Z,style:{fill:`none`,fillOpacity:0,strokeWidth:1.5},className:`stroke-primary-gray-700 dark:stroke-primary-gray-300`}):null]})]}),V&&v&&U&&G?(0,b.jsx)(_.t,{data:V,body:v,xPos:U,yPos:G,backgroundStyle:M?.tooltip,className:N?.tooltip}):null,j&&z!==void 0?(0,b.jsx)(g.t,{body:j,data:z,setData:B,className:N?.modal}):null]})}function S(e){let{data:t,graphTitle:r,colors:i,sources:c,graphDescription:l,showColumnLabels:u=!0,leftMargin:d=100,rightMargin:f=10,truncateBy:p=999,height:ne,width:m,scaleType:re,colorDomain:h,footNote:g,colorLegendTitle:_,padding:ie,backgroundColor:oe=!1,topMargin:se=30,bottomMargin:S=10,tooltip:ce,onSeriesMouseOver:le,showRowLabels:C=!0,relativeHeight:w,showValues:T,graphID:E,noDataColor:D=n.Colors.gray,showColorScale:O=!0,onSeriesMouseClick:k,graphDownload:A=!1,dataDownload:j=!1,fillContainer:M=!0,language:N=`en`,showNAColor:P=!0,minHeight:ue=0,theme:F=`light`,ariaLabel:de,resetSelectionOnDoubleClick:I=!0,detailsOnClick:L,styles:R,classNames:z,animate:B=!1,naLabel:V=`NA`,numberDisplayOptions:H}=e,[U,W]=(0,y.useState)(0),[G,K]=(0,y.useState)(0),[fe,q]=(0,y.useState)(void 0),J=(0,y.useRef)(null),Y=(0,y.useRef)(null);(0,y.useEffect)(()=>{let e=new ResizeObserver(e=>{W(e[0].target.clientWidth||620),K(e[0].target.clientHeight||480)});return J.current&&e.observe(J.current),()=>e.disconnect()},[]);let X=re||(typeof h[0]==`string`?`categorical`:h.length===2?`linear`:`threshold`);return(0,b.jsxs)(a.n,{className:z?.graphContainer,style:R?.graphContainer,id:E,ref:Y,"aria-label":de,backgroundColor:oe,theme:F,language:N,minHeight:ue,width:M?void 0:m,height:ne,relativeHeight:w,padding:ie,children:[r||l||A||j?(0,b.jsx)(te.GraphHeader,{styles:{title:R?.title,description:R?.description},classNames:{title:z?.title,description:z?.description},graphTitle:r,graphDescription:l,width:m,graphDownload:A?Y:void 0,dataDownload:j?t.map(e=>e.data).filter(e=>e!==void 0).length>0?t.map(e=>e.data).filter(e=>e!==void 0):t.filter(e=>e!==void 0):null}):null,O&&t.length>0?X===`categorical`?(0,b.jsx)(o.ColorLegendWithMouseOver,{width:M?void 0:m,colorLegendTitle:_,colors:i||(typeof h[0]==`string`?n.Colors[F].categoricalColors.colors:h.length===2?[n.Colors[F].sequentialColors.neutralColorsx09[0],n.Colors[F].sequentialColors.neutralColorsx09[8]]:n.Colors[F].sequentialColors[`neutralColorsx0${h.length+1}`]),colorDomain:h.map(e=>`${e}`),setSelectedColor:q,showNAColor:P,className:z?.colorLegend}):X===`threshold`?(0,b.jsx)(v.ThresholdColorLegendWithMouseOver,{width:M?void 0:m,colorLegendTitle:_,colors:i||(typeof h[0]==`string`?n.Colors[F].categoricalColors.colors:h.length===2?[n.Colors[F].sequentialColors.neutralColorsx09[0],n.Colors[F].sequentialColors.neutralColorsx09[8]]:n.Colors[F].sequentialColors[`neutralColorsx0${h.length+1}`]),colorDomain:h,setSelectedColor:q,naColor:D,locale:H?.locale||`en`,showNAColor:P,naLabel:V}):(0,b.jsx)(ae.LinearColorLegend,{width:M?void 0:m,colorLegendTitle:_,colors:i||[n.Colors[F].sequentialColors.neutralColorsx09[0],n.Colors[F].sequentialColors.neutralColorsx09[8]],locale:H?.locale||`en`,colorDomain:h,className:z?.colorLegend}):null,(0,b.jsxs)(a.t,{ref:J,children:[t.length===0&&(0,b.jsx)(s.t,{}),U&&G&&t.length>0?(0,b.jsx)(x,{data:t,colorDomain:h,width:M||!m||U<m?U:m,height:G,colors:i||(typeof h[0]==`string`?n.Colors[F].categoricalColors.colors:h.length===2?[n.Colors[F].sequentialColors.neutralColorsx09[0],n.Colors[F].sequentialColors.neutralColorsx09[8]]:n.Colors[F].sequentialColors[`neutralColorsx0${h.length+1}`]),noDataColor:D,scaleType:X,showColumnLabels:u,leftMargin:d,rightMargin:f,topMargin:se,bottomMargin:S,selectedColor:fe,truncateBy:p,showRowLabels:C,tooltip:ce,onSeriesMouseOver:le,showValues:T,onSeriesMouseClick:k,resetSelectionOnDoubleClick:I,detailsOnClick:L,styles:R,classNames:z,animate:B===!0?{duration:.5,once:!0,amount:.5}:B||{duration:0,once:!0,amount:0},locale:H?.locale||`en`,padZeros:H?.padZeros||!1,suffix:H?.suffix||``,prefix:H?.prefix||``,precision:H?.precision??2}):null]}),c||g?(0,b.jsx)(ee.GraphFooter,{styles:{footnote:R?.footnote,source:R?.source},classNames:{footnote:z?.footnote,source:z?.source},sources:c,footNote:g,width:m}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return S}});
+//# sourceMappingURL=HeatMap-CpWBTEmB.cjs.map

package/dist/HeatMap-CpWBTEmB.cjs.map

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

package/dist/HeatMap-V6VFVvJv.js

@@ -0,0 +1,338 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { GraphFooter as ee } from "./GraphFooter.js";
+import { GraphHeader as r } from "./GraphHeader.js";
+import { t as i } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { t as a } from "./uniqBy-feeqYuys.js";
+import { n as o, t as s } from "./GraphContainer-DgEB1AVN.js";
+import { ColorLegendWithMouseOver as c } from "./ColorLegendWithMouseOver.js";
+import { t as te } from "./EmptyState-DBmT1Adf.js";
+import { t as l } from "./ordinal-Dq1sg8_s.js";
+import { t as u } from "./linear-BkosG4OK.js";
+import { t as d } from "./band-XivI9IHG.js";
+import { t as ne } from "./threshold-j3AJep9l.js";
+import { t as f } from "./fast-deep-equal--80N92KJ.js";
+import { t as p } from "./proxy-BiRrIImK.js";
+import { t as re } from "./use-in-view-CjlKdln1.js";
+import { t as m } from "./XAxesLabels-DIs04SK7.js";
+import { t as ie } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as h } from "./YAxesLabels-voV_CThY.js";
+import { t as g } from "./DetailsModal-DxUowfkg.js";
+import { t as _ } from "./Tooltip-Y6uTGwkF.js";
+import { t as ae } from "./getTextColorBasedOnBgColor-Ch7uw_Px.js";
+import { LinearColorLegend as v } from "./LinearColorLegend.js";
+import { ThresholdColorLegendWithMouseOver as y } from "./ThresholdColorLegendWithMouseOver.js";
+import { cn as oe } from "@undp/design-system-react/cn";
+import { useEffect as se, useRef as b, useState as x } from "react";
+//#region src/Components/Graphs/HeatMap/Graph.tsx
+var ce = /* @__PURE__ */ e(f(), 1), S = t();
+function le(e) {
+	let { data: t, showColumnLabels: n, leftMargin: ee, rightMargin: r, truncateBy: o, width: s, height: c, topMargin: te, bottomMargin: f, tooltip: v, onSeriesMouseOver: y, suffix: se, prefix: le, showValues: C, colorDomain: w, colors: T, noDataColor: E, scaleType: D, showRowLabels: O, selectedColor: k, onSeriesMouseClick: A, resetSelectionOnDoubleClick: ue, detailsOnClick: j, styles: M, classNames: N, animate: P, precision: de, locale: F, padZeros: fe } = e, I = b(null), L = re(I, {
+		once: P.once,
+		amount: P.amount
+	}), R = {
+		top: te,
+		bottom: f,
+		left: ee,
+		right: r
+	}, [z, B] = x(void 0), [V, H] = x(void 0), [U, W] = x(void 0), [G, K] = x(void 0), q = s - R.left - R.right, pe = c - R.top - R.bottom, J = a(t, "column", !0), Y = a(t, "row", !0), X = d().domain(Y).range([0, pe]), Z = X.bandwidth(), Q = d().domain(J).range([0, q]), $ = Q.bandwidth(), me = D === "categorical" ? l().domain(w).range(T) : D === "threshold" ? ne().domain(w).range(T) : u().domain(w).range(T);
+	return /* @__PURE__ */ (0, S.jsxs)(S.Fragment, { children: [
+		/* @__PURE__ */ (0, S.jsxs)(p.svg, {
+			width: `${s}px`,
+			height: `${c}px`,
+			viewBox: `0 0 ${s} ${c}`,
+			style: {
+				marginLeft: "auto",
+				marginRight: "auto"
+			},
+			direction: "ltr",
+			ref: I,
+			children: [
+				/* @__PURE__ */ (0, S.jsx)("g", {
+					transform: `translate(${R.left},0)`,
+					children: n ? J.map((e) => /* @__PURE__ */ (0, S.jsx)(m, {
+						y: 0,
+						x: Q(e),
+						width: $,
+						height: R.top - 5,
+						value: `${e}`.length < o ? `${e}` : `${`${e}`.substring(0, o)}...`,
+						style: M?.xAxis?.labels,
+						className: N?.xAxis?.labels,
+						alignment: "bottom",
+						animate: {
+							duration: 0,
+							once: !0,
+							amount: 0
+						},
+						isInView: L
+					}, e)) : null
+				}),
+				/* @__PURE__ */ (0, S.jsx)("g", {
+					transform: `translate(0,${R.top})`,
+					children: O ? Y.map((e) => /* @__PURE__ */ (0, S.jsx)(h, {
+						value: `${e}`.length < o ? `${e}` : `${`${e}`.substring(0, o)}...`,
+						y: X(e),
+						x: 0,
+						width: R.left,
+						height: Z,
+						alignment: "right",
+						style: M?.yAxis?.labels,
+						className: N?.yAxis?.labels,
+						animate: {
+							duration: 0,
+							once: !0,
+							amount: 0
+						},
+						isInView: L
+					}, e)) : null
+				}),
+				/* @__PURE__ */ (0, S.jsxs)("g", {
+					transform: `translate(${R.left},${R.top})`,
+					children: [
+						Y.map((e) => /* @__PURE__ */ (0, S.jsx)("g", {
+							transform: `translate(0,${X(e)})`,
+							children: J.map((t) => /* @__PURE__ */ (0, S.jsx)("rect", {
+								x: Q(t),
+								y: 0,
+								width: $,
+								height: Z,
+								style: { fill: E },
+								className: "stroke-1 stroke-primary-white dark:stroke-primary-gray-700"
+							}, `${e}-${t}`))
+						}, e)),
+						t.filter((e) => !i(e.value)).map((e) => {
+							let t = i(e.value) ? E : me(e.value);
+							return /* @__PURE__ */ (0, S.jsxs)("g", {
+								transform: `translate(${Q(e.column)},${X(e.row)})`,
+								onMouseEnter: (t) => {
+									H(e), K(t.clientY), W(t.clientX), y?.(e);
+								},
+								onClick: () => {
+									(A || j) && ((0, ce.default)(z, e) && ue ? (B(void 0), A?.(void 0)) : (B(e), A?.(e)));
+								},
+								onMouseMove: (t) => {
+									H(e), K(t.clientY), W(t.clientX);
+								},
+								onMouseLeave: () => {
+									H(void 0), W(void 0), K(void 0), y?.(void 0);
+								},
+								opacity: k ? k === t ? 1 : .3 : 1,
+								children: [/* @__PURE__ */ (0, S.jsx)(p.rect, {
+									x: 0,
+									y: 0,
+									width: $,
+									height: Z,
+									className: "stroke-1 stroke-primary-white dark:stroke-primary-gray-700",
+									exit: {
+										opacity: 0,
+										transition: { duration: P.duration }
+									},
+									variants: {
+										initial: {
+											fill: t,
+											opacity: 0
+										},
+										whileInView: {
+											fill: t,
+											opacity: 1,
+											transition: { duration: P.duration }
+										}
+									},
+									initial: "initial",
+									animate: L ? "whileInView" : "initial"
+								}), C && !i(e.value) ? /* @__PURE__ */ (0, S.jsx)(p.g, {
+									variants: {
+										initial: { opacity: 0 },
+										whileInView: {
+											opacity: 1,
+											transition: { duration: P.duration }
+										}
+									},
+									initial: "initial",
+									animate: L ? "whileInView" : "initial",
+									exit: {
+										opacity: 0,
+										transition: { duration: P.duration }
+									},
+									children: /* @__PURE__ */ (0, S.jsx)("foreignObject", {
+										y: 0,
+										x: 0,
+										width: $,
+										height: Z,
+										children: /* @__PURE__ */ (0, S.jsx)("div", {
+											className: "flex flex-col justify-center items-center h-inherit p-1",
+											children: /* @__PURE__ */ (0, S.jsx)("p", {
+												className: oe("text-xs text-center m-0 leading-[1.25] graph-value", N?.graphObjectValues),
+												style: {
+													color: ae(t),
+													...M?.graphObjectValues || {}
+												},
+												children: ie(e.value, void 0, de, le, se, F, fe)
+											})
+										})
+									})
+								}) : null]
+							}, `${e.column}-${e.row}`);
+						}),
+						V ? /* @__PURE__ */ (0, S.jsx)("rect", {
+							x: Q(V.column),
+							y: X(V.row),
+							width: $,
+							height: Z,
+							style: {
+								fill: "none",
+								fillOpacity: 0,
+								strokeWidth: 1.5
+							},
+							className: "stroke-primary-gray-700 dark:stroke-primary-gray-300"
+						}) : null
+					]
+				})
+			]
+		}),
+		V && v && U && G ? /* @__PURE__ */ (0, S.jsx)(_, {
+			data: V,
+			body: v,
+			xPos: U,
+			yPos: G,
+			backgroundStyle: M?.tooltip,
+			className: N?.tooltip
+		}) : null,
+		j && z !== void 0 ? /* @__PURE__ */ (0, S.jsx)(g, {
+			body: j,
+			data: z,
+			setData: B,
+			className: N?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/HeatMap/index.tsx
+function C(e) {
+	let { data: t, graphTitle: i, colors: a, sources: l, graphDescription: u, showColumnLabels: d = !0, leftMargin: ne = 100, rightMargin: f = 10, truncateBy: p = 999, height: re, width: m, scaleType: ie, colorDomain: h, footNote: g, colorLegendTitle: _, padding: ae, backgroundColor: oe = !1, topMargin: ce = 30, bottomMargin: C = 10, tooltip: w, onSeriesMouseOver: T, showRowLabels: E = !0, relativeHeight: D, showValues: O, graphID: k, noDataColor: A = n.gray, showColorScale: ue = !0, onSeriesMouseClick: j, graphDownload: M = !1, dataDownload: N = !1, fillContainer: P = !0, language: de = "en", showNAColor: F = !0, minHeight: fe = 0, theme: I = "light", ariaLabel: L, resetSelectionOnDoubleClick: R = !0, detailsOnClick: z, styles: B, classNames: V, animate: H = !1, naLabel: U = "NA", numberDisplayOptions: W } = e, [G, K] = x(0), [q, pe] = x(0), [J, Y] = x(void 0), X = b(null), Z = b(null);
+	se(() => {
+		let e = new ResizeObserver((e) => {
+			K(e[0].target.clientWidth || 620), pe(e[0].target.clientHeight || 480);
+		});
+		return X.current && e.observe(X.current), () => e.disconnect();
+	}, []);
+	let Q = ie || (typeof h[0] == "string" ? "categorical" : h.length === 2 ? "linear" : "threshold");
+	return /* @__PURE__ */ (0, S.jsxs)(o, {
+		className: V?.graphContainer,
+		style: B?.graphContainer,
+		id: k,
+		ref: Z,
+		"aria-label": L,
+		backgroundColor: oe,
+		theme: I,
+		language: de,
+		minHeight: fe,
+		width: P ? void 0 : m,
+		height: re,
+		relativeHeight: D,
+		padding: ae,
+		children: [
+			i || u || M || N ? /* @__PURE__ */ (0, S.jsx)(r, {
+				styles: {
+					title: B?.title,
+					description: B?.description
+				},
+				classNames: {
+					title: V?.title,
+					description: V?.description
+				},
+				graphTitle: i,
+				graphDescription: u,
+				width: m,
+				graphDownload: M ? Z : void 0,
+				dataDownload: N ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			ue && t.length > 0 ? Q === "categorical" ? /* @__PURE__ */ (0, S.jsx)(c, {
+				width: P ? void 0 : m,
+				colorLegendTitle: _,
+				colors: a || (typeof h[0] == "string" ? n[I].categoricalColors.colors : h.length === 2 ? [n[I].sequentialColors.neutralColorsx09[0], n[I].sequentialColors.neutralColorsx09[8]] : n[I].sequentialColors[`neutralColorsx0${h.length + 1}`]),
+				colorDomain: h.map((e) => `${e}`),
+				setSelectedColor: Y,
+				showNAColor: F,
+				className: V?.colorLegend
+			}) : Q === "threshold" ? /* @__PURE__ */ (0, S.jsx)(y, {
+				width: P ? void 0 : m,
+				colorLegendTitle: _,
+				colors: a || (typeof h[0] == "string" ? n[I].categoricalColors.colors : h.length === 2 ? [n[I].sequentialColors.neutralColorsx09[0], n[I].sequentialColors.neutralColorsx09[8]] : n[I].sequentialColors[`neutralColorsx0${h.length + 1}`]),
+				colorDomain: h,
+				setSelectedColor: Y,
+				naColor: A,
+				locale: W?.locale || "en",
+				showNAColor: F,
+				naLabel: U
+			}) : /* @__PURE__ */ (0, S.jsx)(v, {
+				width: P ? void 0 : m,
+				colorLegendTitle: _,
+				colors: a || [n[I].sequentialColors.neutralColorsx09[0], n[I].sequentialColors.neutralColorsx09[8]],
+				locale: W?.locale || "en",
+				colorDomain: h,
+				className: V?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, S.jsxs)(s, {
+				ref: X,
+				children: [t.length === 0 && /* @__PURE__ */ (0, S.jsx)(te, {}), G && q && t.length > 0 ? /* @__PURE__ */ (0, S.jsx)(le, {
+					data: t,
+					colorDomain: h,
+					width: P || !m || G < m ? G : m,
+					height: q,
+					colors: a || (typeof h[0] == "string" ? n[I].categoricalColors.colors : h.length === 2 ? [n[I].sequentialColors.neutralColorsx09[0], n[I].sequentialColors.neutralColorsx09[8]] : n[I].sequentialColors[`neutralColorsx0${h.length + 1}`]),
+					noDataColor: A,
+					scaleType: Q,
+					showColumnLabels: d,
+					leftMargin: ne,
+					rightMargin: f,
+					topMargin: ce,
+					bottomMargin: C,
+					selectedColor: J,
+					truncateBy: p,
+					showRowLabels: E,
+					tooltip: w,
+					onSeriesMouseOver: T,
+					showValues: O,
+					onSeriesMouseClick: j,
+					resetSelectionOnDoubleClick: R,
+					detailsOnClick: z,
+					styles: B,
+					classNames: V,
+					animate: H === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : H || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					locale: W?.locale || "en",
+					padZeros: W?.padZeros || !1,
+					suffix: W?.suffix || "",
+					prefix: W?.prefix || "",
+					precision: W?.precision ?? 2
+				}) : null]
+			}),
+			l || g ? /* @__PURE__ */ (0, S.jsx)(ee, {
+				styles: {
+					footnote: B?.footnote,
+					source: B?.source
+				},
+				classNames: {
+					footnote: V?.footnote,
+					source: V?.source
+				},
+				sources: l,
+				footNote: g,
+				width: m
+			}) : null
+		]
+	});
+}
+//#endregion
+export { C as t };
+
+//# sourceMappingURL=HeatMap-V6VFVvJv.js.map

package/dist/HeatMap-V6VFVvJv.js.map

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