@undp/data-viz 1.3.0 → 1.3.1

package/dist/HeatMap.js

@@ -1,2 +1,452 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),c=require("react"),ue=require("./Typography-CDR-DAHH.cjs"),ce=require("./index-BXns0-ng.cjs"),le=require("./index-CZbIGs8q.cjs"),xe=require("./Modal-cQF2UQIa.cjs"),he=require("./numberFormattingFunction.js"),de=require("./Tooltip-BM18N_3l.cjs"),ge=require("./getTextColorBasedOnBgColor.js"),se=require("./checkIfNullOrUndefined.js"),me=require("./string2HTML-X4ZYX5jI.cjs"),pe=require("./XAxesLabels-C9REbQQs.cjs"),fe=require("./YAxesLabels-DhBdLk3Z.cjs"),U=require("./use-in-view-Dl1CsAIo.cjs"),ae=require("./band-CAApY4Pd.cjs"),je=require("./ordinal-BOeNbyae.cjs"),Ce=require("./threshold-DNsSUf8Q.cjs"),ye=require("./linear-BVckp9RD.cjs"),ve=require("./GraphHeader.js"),we=require("./GraphFooter.js"),be=require("./ColorLegendWithMouseOver.js"),Ee=require("./LinearColorLegend.js"),Re=require("./ThresholdColorLegendWithMouseOver.js"),i=require("./Colors.js"),$e=require("./EmptyState-BQguKAp5.cjs");function qe(z){const{data:m,showColumnLabels:N,leftMargin:O,rightMargin:F,truncateBy:p,width:H,height:I,topMargin:_,bottomMargin:K,tooltip:$,onSeriesMouseOver:r,suffix:J,prefix:s,showValues:G,colorDomain:q,colors:S,noDataColor:f,scaleType:X,showRowLabels:Q,selectedColor:Y,onSeriesMouseClick:V,resetSelectionOnDoubleClick:Z,detailsOnClick:y,styles:L,classNames:j,animate:v,precision:ee}=z,W=c.useRef(null),D=U.useInView(W,{once:v.once,amount:v.amount}),l={top:_,bottom:K,left:O,right:F},[w,T]=c.useState(void 0),[x,M]=c.useState(void 0),[A,b]=c.useState(void 0),[o,B]=c.useState(void 0),te=H-l.left-l.right,oe=I-l.top-l.bottom,h=le.uniqBy(m,e=>e.column).map(e=>e.column),d=le.uniqBy(m,e=>e.row).map(e=>e.row),E=ae.band().domain(d).range([0,oe]),k=E.bandwidth(),a=ae.band().domain(h).range([0,te]),R=a.bandwidth(),P=X==="categorical"?je.ordinal().domain(q).range(S):X==="threshold"?Ce.threshold().domain(q).range(S):ye.linear().domain(q).range(S);return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsxs(U.motion.svg,{width:`${H}px`,height:`${I}px`,viewBox:`0 0 ${H} ${I}`,style:{marginLeft:"auto",marginRight:"auto"},direction:"ltr",ref:W,children:[t.jsxRuntimeExports.jsx("g",{transform:`translate(${l.left},0)`,children:N?h.map((e,C)=>t.jsxRuntimeExports.jsx(pe.XAxesLabels,{y:0,x:a(e),width:R,height:l.top-5,value:`${e}`.length<p?`${e}`:`${`${e}`.substring(0,p)}...`,style:L?.xAxis?.labels,className:j?.xAxis?.labels,alignment:"bottom",animate:{duration:0,once:!0,amount:0},isInView:D},C)):null}),t.jsxRuntimeExports.jsx("g",{transform:`translate(0,${l.top})`,children:Q?d.map((e,C)=>t.jsxRuntimeExports.jsx(fe.YAxesLabels,{value:`${e}`.length<p?`${e}`:`${`${e}`.substring(0,p)}...`,y:E(e),x:0,width:l.left,height:k,alignment:"right",style:L?.yAxis?.labels,className:j?.yAxis?.labels,animate:{duration:0,once:!0,amount:0},isInView:D},C)):null}),t.jsxRuntimeExports.jsxs("g",{transform:`translate(${l.left},${l.top})`,children:[d.map((e,C)=>t.jsxRuntimeExports.jsx("g",{transform:`translate(0,${E(e)})`,children:h.map(g=>t.jsxRuntimeExports.jsx("rect",{x:a(g),y:0,width:R,height:k,style:{fill:f},className:"stroke-1 stroke-primary-white dark:stroke-primary-gray-700"},`${e}-${g}`))},C)),m.filter(e=>!se.checkIfNullOrUndefined(e.value)).map((e,C)=>{const g=se.checkIfNullOrUndefined(e.value)?f:P(e.value);return t.jsxRuntimeExports.jsxs("g",{transform:`translate(${a(e.column)},${E(e.row)})`,onMouseEnter:u=>{M(e),B(u.clientY),b(u.clientX),r?.(e)},onClick:()=>{(V||y)&&(ce.isEqual(w,e)&&Z?(T(void 0),V?.(void 0)):(T(e),V?.(e)))},onMouseMove:u=>{M(e),B(u.clientY),b(u.clientX)},onMouseLeave:()=>{M(void 0),b(void 0),B(void 0),r?.(void 0)},opacity:Y?Y===g?1:.3:1,children:[t.jsxRuntimeExports.jsx(U.motion.rect,{x:0,y:0,width:R,height:k,className:"stroke-1 stroke-primary-white dark:stroke-primary-gray-700",exit:{opacity:0,transition:{duration:v.duration}},variants:{initial:{fill:g,opacity:0},whileInView:{fill:g,opacity:1,transition:{duration:v.duration}}},initial:"initial",animate:D?"whileInView":"initial"}),G&&!se.checkIfNullOrUndefined(e.value)?t.jsxRuntimeExports.jsx(U.motion.g,{variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:v.duration}}},initial:"initial",animate:D?"whileInView":"initial",exit:{opacity:0,transition:{duration:v.duration}},children:t.jsxRuntimeExports.jsx("foreignObject",{y:0,x:0,width:R,height:k,children:t.jsxRuntimeExports.jsx("div",{className:"flex flex-col justify-center items-center h-inherit p-1",children:t.jsxRuntimeExports.jsx("p",{className:ue.cnExports.cn("text-xs text-center m-0 leading-[1.25] graph-value",j?.graphObjectValues),style:{color:ge.getTextColorBasedOnBgColor(g),...L?.graphObjectValues||{}},children:he.numberFormattingFunction(e.value,"NA",ee,s,J)})})},C)}):null]},`${e.column}-${e.row}`)}),x?t.jsxRuntimeExports.jsx("rect",{x:a(x.column),y:E(x.row),width:R,height:k,style:{fill:"none",fillOpacity:0,strokeWidth:1.5},className:"stroke-primary-gray-700 dark:stroke-primary-gray-300"}):null]})]}),x&&$&&A&&o?t.jsxRuntimeExports.jsx(de.Tooltip,{data:x,body:$,xPos:A,yPos:o,backgroundStyle:L?.tooltip,className:j?.tooltip}):null,y&&w!==void 0?t.jsxRuntimeExports.jsx(xe.ModalExports.Modal,{open:w!==void 0,onClose:()=>{T(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof y=="string"?{__html:me.string2HTML(y,w)}:void 0,children:typeof y=="function"?y(w):null})}):null]})}function Me(z){const{data:m,graphTitle:N,colors:O,sources:F,graphDescription:p,showColumnLabels:H=!0,leftMargin:I=100,rightMargin:_=10,truncateBy:K=999,height:$,width:r,scaleType:J,colorDomain:s,footNote:G,colorLegendTitle:q,padding:S,backgroundColor:f=!1,topMargin:X=30,bottomMargin:Q=10,tooltip:Y,onSeriesMouseOver:V,suffix:Z="",prefix:y="",showRowLabels:L=!0,relativeHeight:j,showValues:v,graphID:ee,noDataColor:W=i.Colors.gray,showColorScale:D=!0,onSeriesMouseClick:l,graphDownload:w=!1,dataDownload:T=!1,fillContainer:x=!0,language:M="en",showNAColor:A=!0,minHeight:b=0,theme:o="light",ariaLabel:B,resetSelectionOnDoubleClick:te=!0,detailsOnClick:oe,styles:h,classNames:d,animate:E=!1,precision:k=2}=z,[a,R]=c.useState(0),[P,e]=c.useState(0),[C,g]=c.useState(void 0),u=c.useRef(null),ie=c.useRef(null);c.useEffect(()=>{const n=new ResizeObserver(ne=>{R(r||ne[0].target.clientWidth||620),e($||ne[0].target.clientHeight||480)});return u.current&&(e(u.current.clientHeight||480),R(u.current.clientWidth||620),r||n.observe(u.current)),()=>n.disconnect()},[r,$]);const re=J||(typeof s[0]=="string"?"categorical":s.length===2?"linear":"threshold");return t.jsxRuntimeExports.jsx("div",{className:`${o||"light"} flex ${r?"grow-0":"grow"} ${x?"w-full":"w-fit"}`,dir:M==="he"||M==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:ue.cnExports.cn(`${f?f===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M||"en"}`,d?.graphContainer),style:{...h?.graphContainer||{},...f&&f!==!0?{backgroundColor:f}:{}},id:ee,ref:ie,"aria-label":B||`${N?`The graph shows ${N}. `:""}This is a heatmap. ${p?` ${p}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:f?S||"1rem":S||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[N||p||w||T?t.jsxRuntimeExports.jsx(ve.GraphHeader,{styles:{title:h?.title,description:h?.description},classNames:{title:d?.title,description:d?.description},graphTitle:N,graphDescription:p,width:r,graphDownload:w?ie.current:void 0,dataDownload:T?m.map(n=>n.data).filter(n=>n!==void 0).length>0?m.map(n=>n.data).filter(n=>n!==void 0):m.filter(n=>n!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:m.length===0?t.jsxRuntimeExports.jsx($e.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[D?re==="categorical"?t.jsxRuntimeExports.jsx(be.ColorLegendWithMouseOver,{width:x?void 0:r,colorLegendTitle:q,colors:O||(typeof s[0]=="string"?i.Colors[o].categoricalColors.colors:s.length===2?[i.Colors[o].sequentialColors.neutralColorsx09[0],i.Colors[o].sequentialColors.neutralColorsx09[8]]:i.Colors[o].sequentialColors[`neutralColorsx0${s.length+1}`]),colorDomain:s.map(n=>`${n}`),setSelectedColor:g,showNAColor:A}):re==="threshold"?t.jsxRuntimeExports.jsx(Re.ThresholdColorLegendWithMouseOver,{width:x?void 0:r,colorLegendTitle:q,colors:O||(typeof s[0]=="string"?i.Colors[o].categoricalColors.colors:s.length===2?[i.Colors[o].sequentialColors.neutralColorsx09[0],i.Colors[o].sequentialColors.neutralColorsx09[8]]:i.Colors[o].sequentialColors[`neutralColorsx0${s.length+1}`]),colorDomain:s,setSelectedColor:g,naColor:W,showNAColor:A}):t.jsxRuntimeExports.jsx(Ee.LinearColorLegend,{width:x?void 0:r,colorLegendTitle:q,colors:O||[i.Colors[o].sequentialColors.neutralColorsx09[0],i.Colors[o].sequentialColors.neutralColorsx09[8]],colorDomain:s}):null,t.jsxRuntimeExports.jsx("div",{className:"flex grow flex-col justify-center w-full leading-0",ref:u,"aria-label":"Graph area",children:(r||a)&&($||P)?t.jsxRuntimeExports.jsx(qe,{data:m,colorDomain:s,width:r||a,colors:O||(typeof s[0]=="string"?i.Colors[o].categoricalColors.colors:s.length===2?[i.Colors[o].sequentialColors.neutralColorsx09[0],i.Colors[o].sequentialColors.neutralColorsx09[8]]:i.Colors[o].sequentialColors[`neutralColorsx0${s.length+1}`]),noDataColor:W,scaleType:re,height:Math.max(b,$||(j?b?(r||a)*j>b?(r||a)*j:b:(r||a)*j:P)),showColumnLabels:H,leftMargin:I,rightMargin:_,topMargin:X,bottomMargin:Q,selectedColor:C,truncateBy:K,showRowLabels:L,tooltip:Y,onSeriesMouseOver:V,showValues:v,suffix:Z,prefix:y,onSeriesMouseClick:l,resetSelectionOnDoubleClick:te,detailsOnClick:oe,styles:h,classNames:d,animate:E===!0?{duration:.5,once:!0,amount:.5}:E||{duration:0,once:!0,amount:0},precision:k}):null})]})}),F||G?t.jsxRuntimeExports.jsx(we.GraphFooter,{styles:{footnote:h?.footnote,source:h?.source},classNames:{footnote:d?.footnote,source:d?.source},sources:F,footNote:G,width:r}):null]})})})})}exports.HeatMap=Me;
+import { j as t, m as me } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as ae, useState as O, useEffect as ue } from "react";
+import { i as he } from "./index-27yTRcko.js";
+import { u as ne } from "./index-CaAIPGZo.js";
+import { X as ge } from "./Modal-CUU6ZK3U.js";
+import { n as de } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as pe } from "./Tooltip-DyM5snqx.js";
+import { g as fe } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
+import { c as re } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { s as xe } from "./string2HTML-CWHGfz_d.js";
+import { X as ye } from "./XAxesLabels-DQFo_z2R.js";
+import { Y as ve } from "./YAxesLabels-H5-002X5.js";
+import { u as we } from "./use-in-view-BAHrBy6b.js";
+import { b as ce } from "./band-BEjh2CHI.js";
+import { o as Ce } from "./ordinal-w9Lu4Stb.js";
+import { t as be } from "./threshold-DFfqcDMa.js";
+import { a as je } from "./linear-DUdu7l2G.js";
+import { m as ie } from "./proxy-DJxJg1kD.js";
+import { GraphHeader as $e } from "./GraphHeader.js";
+import { GraphFooter as ke } from "./GraphFooter.js";
+import { ColorLegendWithMouseOver as Me } from "./ColorLegendWithMouseOver.js";
+import { LinearColorLegend as Ne } from "./LinearColorLegend.js";
+import { ThresholdColorLegendWithMouseOver as De } from "./ThresholdColorLegendWithMouseOver.js";
+import { Colors as a } from "./Colors.js";
+import { E as Oe } from "./EmptyState-DdTp-Mdn.js";
+function Le(z) {
+  const {
+    data: d,
+    showColumnLabels: L,
+    leftMargin: S,
+    rightMargin: B,
+    truncateBy: p,
+    width: I,
+    height: W,
+    topMargin: _,
+    bottomMargin: U,
+    tooltip: k,
+    onSeriesMouseOver: r,
+    suffix: J,
+    prefix: i,
+    showValues: Y,
+    colorDomain: M,
+    colors: q,
+    noDataColor: f,
+    scaleType: F,
+    showRowLabels: K,
+    selectedColor: G,
+    onSeriesMouseClick: A,
+    resetSelectionOnDoubleClick: Q,
+    detailsOnClick: v,
+    styles: T,
+    classNames: x,
+    animate: w,
+    precision: Z
+  } = z, E = ae(null), H = we(E, {
+    once: w.once,
+    amount: w.amount
+  }), s = {
+    top: _,
+    bottom: U,
+    left: S,
+    right: B
+  }, [C, V] = O(void 0), [m, N] = O(void 0), [R, b] = O(void 0), [o, X] = O(void 0), ee = I - s.left - s.right, te = W - s.top - s.bottom, u = ne(d, (e) => e.column).map((e) => e.column), h = ne(d, (e) => e.row).map((e) => e.row), j = ce().domain(h).range([0, te]), D = j.bandwidth(), n = ce().domain(u).range([0, ee]), $ = n.bandwidth(), P = F === "categorical" ? Ce().domain(M).range(q) : F === "threshold" ? be().domain(M).range(q) : je().domain(M).range(q);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      ie.svg,
+      {
+        width: `${I}px`,
+        height: `${W}px`,
+        viewBox: `0 0 ${I} ${W}`,
+        style: { marginLeft: "auto", marginRight: "auto" },
+        direction: "ltr",
+        ref: E,
+        children: [
+          /* @__PURE__ */ t.jsx("g", { transform: `translate(${s.left},0)`, children: L ? u.map((e, y) => /* @__PURE__ */ t.jsx(
+            ye,
+            {
+              y: 0,
+              x: n(e),
+              width: $,
+              height: s.top - 5,
+              value: `${e}`.length < p ? `${e}` : `${`${e}`.substring(0, p)}...`,
+              style: T?.xAxis?.labels,
+              className: x?.xAxis?.labels,
+              alignment: "bottom",
+              animate: { duration: 0, once: !0, amount: 0 },
+              isInView: H
+            },
+            y
+          )) : null }),
+          /* @__PURE__ */ t.jsx("g", { transform: `translate(0,${s.top})`, children: K ? h.map((e, y) => /* @__PURE__ */ t.jsx(
+            ve,
+            {
+              value: `${e}`.length < p ? `${e}` : `${`${e}`.substring(0, p)}...`,
+              y: j(e),
+              x: 0,
+              width: s.left,
+              height: D,
+              alignment: "right",
+              style: T?.yAxis?.labels,
+              className: x?.yAxis?.labels,
+              animate: { duration: 0, once: !0, amount: 0 },
+              isInView: H
+            },
+            y
+          )) : null }),
+          /* @__PURE__ */ t.jsxs("g", { transform: `translate(${s.left},${s.top})`, children: [
+            h.map((e, y) => /* @__PURE__ */ t.jsx("g", { transform: `translate(0,${j(e)})`, children: u.map((g) => /* @__PURE__ */ t.jsx(
+              "rect",
+              {
+                x: n(g),
+                y: 0,
+                width: $,
+                height: D,
+                style: { fill: f },
+                className: "stroke-1 stroke-primary-white dark:stroke-primary-gray-700"
+              },
+              `${e}-${g}`
+            )) }, y)),
+            d.filter((e) => !re(e.value)).map((e, y) => {
+              const g = re(e.value) ? f : (
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                P(e.value)
+              );
+              return /* @__PURE__ */ t.jsxs(
+                "g",
+                {
+                  transform: `translate(${n(e.column)},${j(e.row)})`,
+                  onMouseEnter: (c) => {
+                    N(e), X(c.clientY), b(c.clientX), r?.(e);
+                  },
+                  onClick: () => {
+                    (A || v) && (he(C, e) && Q ? (V(void 0), A?.(void 0)) : (V(e), A?.(e)));
+                  },
+                  onMouseMove: (c) => {
+                    N(e), X(c.clientY), b(c.clientX);
+                  },
+                  onMouseLeave: () => {
+                    N(void 0), b(void 0), X(void 0), r?.(void 0);
+                  },
+                  opacity: G ? G === g ? 1 : 0.3 : 1,
+                  children: [
+                    /* @__PURE__ */ t.jsx(
+                      ie.rect,
+                      {
+                        x: 0,
+                        y: 0,
+                        width: $,
+                        height: D,
+                        className: "stroke-1 stroke-primary-white dark:stroke-primary-gray-700",
+                        exit: { opacity: 0, transition: { duration: w.duration } },
+                        variants: {
+                          initial: { fill: g, opacity: 0 },
+                          whileInView: {
+                            fill: g,
+                            opacity: 1,
+                            transition: { duration: w.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: H ? "whileInView" : "initial"
+                      }
+                    ),
+                    Y && !re(e.value) ? /* @__PURE__ */ t.jsx(
+                      ie.g,
+                      {
+                        variants: {
+                          initial: { opacity: 0 },
+                          whileInView: { opacity: 1, transition: { duration: w.duration } }
+                        },
+                        initial: "initial",
+                        animate: H ? "whileInView" : "initial",
+                        exit: { opacity: 0, transition: { duration: w.duration } },
+                        children: /* @__PURE__ */ t.jsx("foreignObject", { y: 0, x: 0, width: $, height: D, children: /* @__PURE__ */ t.jsx("div", { className: "flex flex-col justify-center items-center h-inherit p-1", children: /* @__PURE__ */ t.jsx(
+                          "p",
+                          {
+                            className: me(
+                              "text-xs text-center m-0 leading-[1.25] graph-value",
+                              x?.graphObjectValues
+                            ),
+                            style: {
+                              color: fe(g),
+                              ...T?.graphObjectValues || {}
+                            },
+                            children: de(e.value, "NA", Z, i, J)
+                          }
+                        ) }) }, y)
+                      }
+                    ) : null
+                  ]
+                },
+                `${e.column}-${e.row}`
+              );
+            }),
+            m ? /* @__PURE__ */ t.jsx(
+              "rect",
+              {
+                x: n(m.column),
+                y: j(m.row),
+                width: $,
+                height: D,
+                style: {
+                  fill: "none",
+                  fillOpacity: 0,
+                  strokeWidth: 1.5
+                },
+                className: "stroke-primary-gray-700 dark:stroke-primary-gray-300"
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ),
+    m && k && R && o ? /* @__PURE__ */ t.jsx(
+      pe,
+      {
+        data: m,
+        body: k,
+        xPos: R,
+        yPos: o,
+        backgroundStyle: T?.tooltip,
+        className: x?.tooltip
+      }
+    ) : null,
+    v && C !== void 0 ? /* @__PURE__ */ t.jsx(
+      ge,
+      {
+        open: C !== void 0,
+        onClose: () => {
+          V(void 0);
+        },
+        children: /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof v == "string" ? { __html: xe(v, C) } : void 0,
+            children: typeof v == "function" ? v(C) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function ot(z) {
+  const {
+    data: d,
+    graphTitle: L,
+    colors: S,
+    sources: B,
+    graphDescription: p,
+    showColumnLabels: I = !0,
+    leftMargin: W = 100,
+    rightMargin: _ = 10,
+    truncateBy: U = 999,
+    height: k,
+    width: r,
+    scaleType: J,
+    colorDomain: i,
+    footNote: Y,
+    colorLegendTitle: M,
+    padding: q,
+    backgroundColor: f = !1,
+    topMargin: F = 30,
+    bottomMargin: K = 10,
+    tooltip: G,
+    onSeriesMouseOver: A,
+    suffix: Q = "",
+    prefix: v = "",
+    showRowLabels: T = !0,
+    relativeHeight: x,
+    showValues: w,
+    graphID: Z,
+    noDataColor: E = a.gray,
+    showColorScale: H = !0,
+    onSeriesMouseClick: s,
+    graphDownload: C = !1,
+    dataDownload: V = !1,
+    fillContainer: m = !0,
+    language: N = "en",
+    showNAColor: R = !0,
+    minHeight: b = 0,
+    theme: o = "light",
+    ariaLabel: X,
+    resetSelectionOnDoubleClick: ee = !0,
+    detailsOnClick: te,
+    styles: u,
+    classNames: h,
+    animate: j = !1,
+    precision: D = 2
+  } = z, [n, $] = O(0), [P, e] = O(0), [y, g] = O(void 0), c = ae(null), le = ae(null);
+  ue(() => {
+    const l = new ResizeObserver((se) => {
+      $(r || se[0].target.clientWidth || 620), e(k || se[0].target.clientHeight || 480);
+    });
+    return c.current && (e(c.current.clientHeight || 480), $(c.current.clientWidth || 620), r || l.observe(c.current)), () => l.disconnect();
+  }, [r, k]);
+  const oe = J || (typeof i[0] == "string" ? "categorical" : i.length === 2 ? "linear" : "threshold");
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `${o || "light"} flex ${r ? "grow-0" : "grow"} ${m ? "w-full" : "w-fit"}`,
+      dir: N === "he" || N === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: me(
+            `${f ? f === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${N || "en"}`,
+            h?.graphContainer
+          ),
+          style: {
+            ...u?.graphContainer || {},
+            ...f && f !== !0 ? { backgroundColor: f } : {}
+          },
+          id: Z,
+          ref: le,
+          "aria-label": X || `${L ? `The graph shows ${L}. ` : ""}This is a heatmap. ${p ? ` ${p}` : ""}`,
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: f ? q || "1rem" : q || 0 },
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                L || p || C || V ? /* @__PURE__ */ t.jsx(
+                  $e,
+                  {
+                    styles: {
+                      title: u?.title,
+                      description: u?.description
+                    },
+                    classNames: {
+                      title: h?.title,
+                      description: h?.description
+                    },
+                    graphTitle: L,
+                    graphDescription: p,
+                    width: r,
+                    graphDownload: C ? le.current : void 0,
+                    dataDownload: V ? d.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? d.map((l) => l.data).filter((l) => l !== void 0) : d.filter((l) => l !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: d.length === 0 ? /* @__PURE__ */ t.jsx(Oe, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                  H ? oe === "categorical" ? /* @__PURE__ */ t.jsx(
+                    Me,
+                    {
+                      width: m ? void 0 : r,
+                      colorLegendTitle: M,
+                      colors: S || (typeof i[0] == "string" ? a[o].categoricalColors.colors : i.length === 2 ? [
+                        a[o].sequentialColors.neutralColorsx09[0],
+                        a[o].sequentialColors.neutralColorsx09[8]
+                      ] : a[o].sequentialColors[`neutralColorsx0${i.length + 1}`]),
+                      colorDomain: i.map((l) => `${l}`),
+                      setSelectedColor: g,
+                      showNAColor: R
+                    }
+                  ) : oe === "threshold" ? /* @__PURE__ */ t.jsx(
+                    De,
+                    {
+                      width: m ? void 0 : r,
+                      colorLegendTitle: M,
+                      colors: S || (typeof i[0] == "string" ? a[o].categoricalColors.colors : i.length === 2 ? [
+                        a[o].sequentialColors.neutralColorsx09[0],
+                        a[o].sequentialColors.neutralColorsx09[8]
+                      ] : a[o].sequentialColors[`neutralColorsx0${i.length + 1}`]),
+                      colorDomain: i,
+                      setSelectedColor: g,
+                      naColor: E,
+                      showNAColor: R
+                    }
+                  ) : /* @__PURE__ */ t.jsx(
+                    Ne,
+                    {
+                      width: m ? void 0 : r,
+                      colorLegendTitle: M,
+                      colors: S || [
+                        a[o].sequentialColors.neutralColorsx09[0],
+                        a[o].sequentialColors.neutralColorsx09[8]
+                      ],
+                      colorDomain: i
+                    }
+                  ) : null,
+                  /* @__PURE__ */ t.jsx(
+                    "div",
+                    {
+                      className: "flex grow flex-col justify-center w-full leading-0",
+                      ref: c,
+                      "aria-label": "Graph area",
+                      children: (r || n) && (k || P) ? /* @__PURE__ */ t.jsx(
+                        Le,
+                        {
+                          data: d,
+                          colorDomain: i,
+                          width: r || n,
+                          colors: S || (typeof i[0] == "string" ? a[o].categoricalColors.colors : i.length === 2 ? [
+                            a[o].sequentialColors.neutralColorsx09[0],
+                            a[o].sequentialColors.neutralColorsx09[8]
+                          ] : a[o].sequentialColors[`neutralColorsx0${i.length + 1}`]),
+                          noDataColor: E,
+                          scaleType: oe,
+                          height: Math.max(
+                            b,
+                            k || (x ? b ? (r || n) * x > b ? (r || n) * x : b : (r || n) * x : P)
+                          ),
+                          showColumnLabels: I,
+                          leftMargin: W,
+                          rightMargin: _,
+                          topMargin: F,
+                          bottomMargin: K,
+                          selectedColor: y,
+                          truncateBy: U,
+                          showRowLabels: T,
+                          tooltip: G,
+                          onSeriesMouseOver: A,
+                          showValues: w,
+                          suffix: Q,
+                          prefix: v,
+                          onSeriesMouseClick: s,
+                          resetSelectionOnDoubleClick: ee,
+                          detailsOnClick: te,
+                          styles: u,
+                          classNames: h,
+                          animate: j === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : j || { duration: 0, once: !0, amount: 0 },
+                          precision: D
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                B || Y ? /* @__PURE__ */ t.jsx(
+                  ke,
+                  {
+                    styles: { footnote: u?.footnote, source: u?.source },
+                    classNames: {
+                      footnote: h?.footnote,
+                      source: h?.source
+                    },
+                    sources: B,
+                    footNote: Y,
+                    width: r
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  ot as HeatMap
+};
 //# sourceMappingURL=HeatMap.js.map