@undp/data-viz 1.3.0 → 1.4.0

package/dist/SlopeChart.js

@@ -1,2 +1,583 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-BHm2KTjD-D8FylaKc.cjs"),rt=require("./index-CZbIGs8q.cjs"),p=require("react"),b=require("./Typography-CDR-DAHH.cjs"),ct=require("./index-BXns0-ng.cjs"),xt=require("./Modal-cQF2UQIa.cjs"),ut=require("./Tooltip-BM18N_3l.cjs"),K=require("./checkIfNullOrUndefined.js"),a=require("./Colors.js"),yt=require("./string2HTML-X4ZYX5jI.cjs"),lt=require("./Axis-BlyBRMNw.cjs"),nt=require("./AxisTitle-BY8MI9jC.cjs"),w=require("./use-in-view-Dl1CsAIo.cjs"),ht=require("./linear-BVckp9RD.cjs"),mt=require("./index-a2C2Bqn2.cjs"),gt=require("./GraphFooter.js"),pt=require("./GraphHeader.js"),ft=require("./ColorLegendWithMouseOver.js"),dt=require("./EmptyState-BQguKAp5.cjs");function jt(J){const{data:r,width:O,height:R,showLabels:V,colors:e,colorDomain:n,radius:c,leftMargin:y,rightMargin:P,topMargin:G,bottomMargin:Q,tooltip:Y,onSeriesMouseOver:U,axisTitles:D,highlightedDataPoints:u,selectedColor:I,minValue:B,maxValue:F,onSeriesMouseClick:T,resetSelectionOnDoubleClick:Z,detailsOnClick:g,styles:f,classNames:h,animate:s,dimmedOpacity:d,customLayers:X}=J,z=p.useRef(null),j=w.useInView(z,{once:s.once,amount:s.amount}),[v,S]=p.useState(void 0),[M,N]=p.useState(void 0),[_,$]=p.useState(void 0),[q,H]=p.useState(void 0),k={top:G,bottom:Q,left:y,right:P},E=O-k.left-k.right,m=R-k.top-k.bottom,C=Math.min(Math.min(...r.map(t=>t.y1)),Math.min(...r.map(t=>t.y2))),L=Math.max(Math.max(...r.map(t=>t.y1)),Math.max(...r.map(t=>t.y2))),x=ht.linear().domain([K.checkIfNullOrUndefined(B)?C>0?0:C:B,K.checkIfNullOrUndefined(F)?L>0?L:0:F]).range([m,0]).nice();return o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(w.motion.svg,{width:`${O}px`,height:`${R}px`,viewBox:`0 0 ${O} ${R}`,className:"mx-auto",direction:"ltr",ref:z,children:o.jsxRuntimeExports.jsxs("g",{transform:`translate(${k.left},${k.top})`,children:[o.jsxRuntimeExports.jsxs("g",{children:[o.jsxRuntimeExports.jsx(lt.Axis,{y1:0,y2:m,x1:c,x2:c,classNames:{axis:b.cnExports.cn("stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",h?.yAxis?.axis)}}),o.jsxRuntimeExports.jsx(nt.AxisTitle,{x:c,y:m+15,style:f?.yAxis?.title,className:b.cnExports.cn("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",h?.yAxis?.title),text:D[0]})]}),o.jsxRuntimeExports.jsxs("g",{children:[o.jsxRuntimeExports.jsx(lt.Axis,{y1:0,y2:m,x1:E-c,x2:E-c,classNames:{axis:b.cnExports.cn("stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",h?.yAxis?.axis)}}),o.jsxRuntimeExports.jsx(nt.AxisTitle,{x:E-c,y:m+15,style:f?.yAxis?.title,className:b.cnExports.cn("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",h?.yAxis?.title),text:D[1]})]}),X.filter(t=>t.position==="before").map(t=>t.layer),o.jsxRuntimeExports.jsx(mt.AnimatePresence,{children:r.map((t,A)=>o.jsxRuntimeExports.jsxs(w.motion.g,{variants:{initial:{opacity:I?t.color&&e[n.indexOf(`${t.color}`)]===I?1:d:v?v.label===t.label?1:d:u.length!==0?u.indexOf(t.label)!==-1?1:d:1},whileInView:{opacity:I?t.color&&e[n.indexOf(`${t.color}`)]===I?1:d:v?v.label===t.label?1:d:u.length!==0?u.indexOf(t.label)!==-1?1:d:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},onMouseEnter:i=>{S(t),H(i.clientY),$(i.clientX),U?.(t)},onMouseMove:i=>{S(t),H(i.clientY),$(i.clientX)},onMouseLeave:()=>{S(void 0),$(void 0),H(void 0),U?.(void 0)},onClick:()=>{(T||g)&&(ct.isEqual(M,t)&&Z?(N(void 0),T?.(void 0)):(N(t),T?.(t)))},children:[o.jsxRuntimeExports.jsx(w.motion.circle,{cx:c,variants:{initial:{cy:x(t.y1),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,stroke:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:0},whileInView:{cy:x(t.y1),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,stroke:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},r:c,style:{fillOpacity:.6}}),V?o.jsxRuntimeExports.jsx(w.motion.text,{variants:{initial:{y:x(t.y1),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:0},whileInView:{y:x(t.y1),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},style:{textAnchor:"end",...f?.yAxis?.labels||{}},className:b.cnExports.cn("text-xs",h?.yAxis?.labels),x:5,dy:"0.33em",textAnchor:"end",dx:0-c-3,children:t.label}):u.length!==0&&u.indexOf(t.label)!==-1?o.jsxRuntimeExports.jsx(w.motion.text,{variants:{initial:{y:x(t.y1),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:0},whileInView:{y:x(t.y1),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},style:{textAnchor:"end",...f?.yAxis?.labels||{}},className:b.cnExports.cn("text-xs",h?.yAxis?.labels),x:5,dy:"0.33em",dx:-3,children:t.label}):null,o.jsxRuntimeExports.jsx(w.motion.circle,{cx:E-c,variants:{initial:{cy:x(t.y2),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,stroke:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:0},whileInView:{cy:x(t.y2),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,stroke:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},r:c,style:{fillOpacity:.6}}),V?o.jsxRuntimeExports.jsx(w.motion.text,{variants:{initial:{y:x(t.y2),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:0},whileInView:{y:x(t.y2),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},style:{textAnchor:"start",...f?.yAxis?.labels||{}},className:b.cnExports.cn("text-xs",h?.yAxis?.labels),x:E-5,dy:"0.33em",dx:c+3,children:t.label}):u.length!==0&&u.indexOf(t.label)!==-1?o.jsxRuntimeExports.jsx(w.motion.text,{variants:{initial:{y:x(t.y2),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:0},whileInView:{y:x(t.y2),fill:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},style:{textAnchor:"start",...f?.yAxis?.labels||{}},className:b.cnExports.cn("text-xs",h?.yAxis?.labels),x:E-5,dy:"0.33em",dx:3,children:t.label}):null,o.jsxRuntimeExports.jsx(w.motion.line,{x1:c,x2:E-c,variants:{initial:{y1:x(t.y1),y2:x(t.y1),stroke:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray},whileInView:{y1:x(t.y1),y2:x(t.y2),stroke:r.filter(i=>i.color).length===0?e[0]:t.color?e[n.indexOf(`${t.color}`)]:a.Colors.gray,transition:{duration:s.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:s.duration}},className:h?.dataConnectors,style:{fill:"none",strokeWidth:1,...f?.dataConnectors}})]},A))}),X.filter(t=>t.position==="after").map(t=>t.layer)]})}),v&&Y&&_&&q?o.jsxRuntimeExports.jsx(ut.Tooltip,{data:v,body:Y,xPos:_,yPos:q,backgroundStyle:f?.tooltip,className:h?.tooltip}):null,g&&M!==void 0?o.jsxRuntimeExports.jsx(xt.ModalExports.Modal,{open:M!==void 0,onClose:()=>{N(void 0)},children:o.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof g=="string"?{__html:yt.string2HTML(g,M)}:void 0,children:typeof g=="function"?g(M):null})}):null]})}function wt(J){const{data:r,graphTitle:O,colors:R,sources:V,graphDescription:e,showLabels:n=!1,height:c,width:y,footNote:P,colorDomain:G,colorLegendTitle:Q,radius:Y=5,axisTitles:U=["",""],padding:D,backgroundColor:u=!1,leftMargin:I=50,rightMargin:B=50,topMargin:F=20,bottomMargin:T=20,tooltip:Z,relativeHeight:g,onSeriesMouseOver:f,showColorScale:h=!0,highlightedDataPoints:s=[],graphID:d,minValue:X,maxValue:z,onSeriesMouseClick:j,graphDownload:v=!1,dataDownload:S=!1,fillContainer:M=!0,language:N="en",showNAColor:_=!0,minHeight:$=0,theme:q="light",ariaLabel:H,resetSelectionOnDoubleClick:k=!0,detailsOnClick:E,styles:m,classNames:C,animate:L=!1,dimmedOpacity:x=.3,customLayers:t=[]}=J,[A,i]=p.useState(0),[tt,it]=p.useState(0),[at,st]=p.useState(void 0),W=p.useRef(null),et=p.useRef(null);return p.useEffect(()=>{const l=new ResizeObserver(ot=>{i(y||ot[0].target.clientWidth||620),it(c||ot[0].target.clientHeight||480)});return W.current&&(it(W.current.clientHeight||480),i(W.current.clientWidth||620),y||l.observe(W.current)),()=>l.disconnect()},[y,c]),o.jsxRuntimeExports.jsx("div",{className:`${q||"light"} flex ${y?"grow-0":"grow"} ${M?"w-full":"w-fit"} `,dir:N==="he"||N==="ar"?"rtl":void 0,children:o.jsxRuntimeExports.jsx("div",{className:b.cnExports.cn(`${u?u===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${N||"en"}`,C?.graphContainer),style:{...m?.graphContainer||{},...u&&u!==!0?{backgroundColor:u}:{}},id:d,ref:et,"aria-label":H||`${O?`The graph shows ${O}. `:""}This is a slope chart showing changes in data between two category or starting and ending time. Each line represents a different row in data, with lines sloping up or down to show increase or decrease over two categories or time.${e?` ${e}`:""}`,children:o.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:u?D||"1rem":D||0},children:o.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[O||e||v||S?o.jsxRuntimeExports.jsx(pt.GraphHeader,{styles:{title:m?.title,description:m?.description},classNames:{title:C?.title,description:C?.description},graphTitle:O,graphDescription:e,width:y,graphDownload:v?et.current:void 0,dataDownload:S?r.map(l=>l.data).filter(l=>l!==void 0).length>0?r.map(l=>l.data).filter(l=>l!==void 0):r.filter(l=>l!==void 0):null}):null,o.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:r.length===0?o.jsxRuntimeExports.jsx(dt.EmptyState,{}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[h&&r.filter(l=>l.color).length!==0?o.jsxRuntimeExports.jsx(ft.ColorLegendWithMouseOver,{width:y,colorLegendTitle:Q,colors:R||a.Colors[q].categoricalColors.colors,colorDomain:G||rt.uniqBy(r.filter(l=>l.color),"color").map(l=>l.color),setSelectedColor:st,showNAColor:_}):null,o.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:W,"aria-label":"Graph area",children:(y||A)&&(c||tt)?o.jsxRuntimeExports.jsx(jt,{data:r.filter(l=>!K.checkIfNullOrUndefined(l.y1)&&!K.checkIfNullOrUndefined(l.y2)),width:y||A,height:Math.max($,c||(g?$?(y||A)*g>$?(y||A)*g:$:(y||A)*g:tt)),colorDomain:r.filter(l=>l.color).length===0?[]:G||rt.uniqBy(r.filter(l=>l.color),"color").map(l=>l.color),colors:r.filter(l=>l.color).length===0?R?[R]:[a.Colors.primaryColors["blue-600"]]:R||a.Colors[q].categoricalColors.colors,selectedColor:at,axisTitles:U,showLabels:n,radius:Y,leftMargin:I,rightMargin:B,topMargin:F,bottomMargin:T,tooltip:Z,onSeriesMouseOver:f,highlightedDataPoints:s,minValue:X,maxValue:z,onSeriesMouseClick:j,resetSelectionOnDoubleClick:k,detailsOnClick:E,styles:m,classNames:C,animate:L===!0?{duration:.5,once:!0,amount:.5}:L||{duration:0,once:!0,amount:0},dimmedOpacity:x,customLayers:t}):null})]})}),V||P?o.jsxRuntimeExports.jsx(gt.GraphFooter,{styles:{footnote:m?.footnote,source:m?.source},classNames:{footnote:C?.footnote,source:C?.source},sources:V,footNote:P,width:y}):null]})})})})}exports.SlopeChart=wt;
+import { j as o, m as j } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { u as ri } from "./index-CaAIPGZo.js";
+import { useRef as ii, useState as I, useEffect as yi } from "react";
+import { i as mi } from "./index-27yTRcko.js";
+import { X as xi } from "./Modal-CUU6ZK3U.js";
+import { T as hi } from "./Tooltip-DyM5snqx.js";
+import { c as J } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { Colors as n } from "./Colors.js";
+import { s as fi } from "./string2HTML-CWHGfz_d.js";
+import { A as ai } from "./Axis-Ddg-seDi.js";
+import { A as ni } from "./AxisTitle-BmHLMRJZ.js";
+import { u as gi } from "./use-in-view-BAHrBy6b.js";
+import { a as ui } from "./linear-DUdu7l2G.js";
+import { m as O } from "./proxy-DJxJg1kD.js";
+import { A as pi } from "./index-BxAUvrua.js";
+import { GraphFooter as di } from "./GraphFooter.js";
+import { GraphHeader as wi } from "./GraphHeader.js";
+import { ColorLegendWithMouseOver as vi } from "./ColorLegendWithMouseOver.js";
+import { E as bi } from "./EmptyState-DdTp-Mdn.js";
+function Oi(K) {
+  const {
+    data: l,
+    width: $,
+    height: k,
+    showLabels: H,
+    colors: e,
+    colorDomain: a,
+    radius: c,
+    leftMargin: x,
+    rightMargin: X,
+    topMargin: G,
+    bottomMargin: Q,
+    tooltip: R,
+    onSeriesMouseOver: F,
+    axisTitles: L,
+    highlightedDataPoints: m,
+    selectedColor: D,
+    minValue: q,
+    maxValue: z,
+    onSeriesMouseClick: E,
+    resetSelectionOnDoubleClick: Z,
+    detailsOnClick: g,
+    styles: u,
+    classNames: h,
+    animate: s,
+    dimmedOpacity: p,
+    customLayers: B
+  } = K, _ = ii(null), d = gi(_, {
+    once: s.once,
+    amount: s.amount
+  }), [w, S] = I(void 0), [A, N] = I(void 0), [U, M] = I(void 0), [T, W] = I(void 0), C = {
+    top: G,
+    bottom: Q,
+    left: x,
+    right: X
+  }, v = $ - C.left - C.right, f = k - C.top - C.bottom, b = Math.min(Math.min(...l.map((i) => i.y1)), Math.min(...l.map((i) => i.y2))), P = Math.max(Math.max(...l.map((i) => i.y1)), Math.max(...l.map((i) => i.y2))), y = ui().domain([
+    J(q) ? b > 0 ? 0 : b : q,
+    J(z) ? P > 0 ? P : 0 : z
+  ]).range([f, 0]).nice();
+  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      O.svg,
+      {
+        width: `${$}px`,
+        height: `${k}px`,
+        viewBox: `0 0 ${$} ${k}`,
+        className: "mx-auto",
+        direction: "ltr",
+        ref: _,
+        children: /* @__PURE__ */ o.jsxs("g", { transform: `translate(${C.left},${C.top})`, children: [
+          /* @__PURE__ */ o.jsxs("g", { children: [
+            /* @__PURE__ */ o.jsx(
+              ai,
+              {
+                y1: 0,
+                y2: f,
+                x1: c,
+                x2: c,
+                classNames: {
+                  axis: j(
+                    "stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",
+                    h?.yAxis?.axis
+                  )
+                }
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              ni,
+              {
+                x: c,
+                y: f + 15,
+                style: u?.yAxis?.title,
+                className: j(
+                  "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
+                  h?.yAxis?.title
+                ),
+                text: L[0]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o.jsxs("g", { children: [
+            /* @__PURE__ */ o.jsx(
+              ai,
+              {
+                y1: 0,
+                y2: f,
+                x1: v - c,
+                x2: v - c,
+                classNames: {
+                  axis: j(
+                    "stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",
+                    h?.yAxis?.axis
+                  )
+                }
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              ni,
+              {
+                x: v - c,
+                y: f + 15,
+                style: u?.yAxis?.title,
+                className: j(
+                  "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
+                  h?.yAxis?.title
+                ),
+                text: L[1]
+              }
+            )
+          ] }),
+          B.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ o.jsx(pi, { children: l.map((i, V) => /* @__PURE__ */ o.jsxs(
+            O.g,
+            {
+              variants: {
+                initial: {
+                  opacity: D ? i.color && e[a.indexOf(`${i.color}`)] === D ? 1 : p : w ? w.label === i.label ? 1 : p : m.length !== 0 ? m.indexOf(i.label) !== -1 ? 1 : p : 1
+                },
+                whileInView: {
+                  opacity: D ? i.color && e[a.indexOf(`${i.color}`)] === D ? 1 : p : w ? w.label === i.label ? 1 : p : m.length !== 0 ? m.indexOf(i.label) !== -1 ? 1 : p : 1,
+                  transition: { duration: s.duration }
+                }
+              },
+              initial: "initial",
+              animate: d ? "whileInView" : "initial",
+              exit: { opacity: 0, transition: { duration: s.duration } },
+              onMouseEnter: (t) => {
+                S(i), W(t.clientY), M(t.clientX), F?.(i);
+              },
+              onMouseMove: (t) => {
+                S(i), W(t.clientY), M(t.clientX);
+              },
+              onMouseLeave: () => {
+                S(void 0), M(void 0), W(void 0), F?.(void 0);
+              },
+              onClick: () => {
+                (E || g) && (mi(A, i) && Z ? (N(void 0), E?.(void 0)) : (N(i), E?.(i)));
+              },
+              children: [
+                /* @__PURE__ */ o.jsx(
+                  O.circle,
+                  {
+                    cx: c,
+                    variants: {
+                      initial: {
+                        cy: y(i.y1),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 0
+                      },
+                      whileInView: {
+                        cy: y(i.y1),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 1,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    r: c,
+                    style: {
+                      fillOpacity: 0.6
+                    }
+                  }
+                ),
+                H ? /* @__PURE__ */ o.jsx(
+                  O.text,
+                  {
+                    variants: {
+                      initial: {
+                        y: y(i.y1),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 0
+                      },
+                      whileInView: {
+                        y: y(i.y1),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 1,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    style: {
+                      textAnchor: "end",
+                      ...u?.yAxis?.labels || {}
+                    },
+                    className: j("text-xs", h?.yAxis?.labels),
+                    x: 5,
+                    dy: "0.33em",
+                    textAnchor: "end",
+                    dx: 0 - c - 3,
+                    children: i.label
+                  }
+                ) : m.length !== 0 && m.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
+                  O.text,
+                  {
+                    variants: {
+                      initial: {
+                        y: y(i.y1),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 0
+                      },
+                      whileInView: {
+                        y: y(i.y1),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 1,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    style: {
+                      textAnchor: "end",
+                      ...u?.yAxis?.labels || {}
+                    },
+                    className: j("text-xs", h?.yAxis?.labels),
+                    x: 5,
+                    dy: "0.33em",
+                    dx: -3,
+                    children: i.label
+                  }
+                ) : null,
+                /* @__PURE__ */ o.jsx(
+                  O.circle,
+                  {
+                    cx: v - c,
+                    variants: {
+                      initial: {
+                        cy: y(i.y2),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 0
+                      },
+                      whileInView: {
+                        cy: y(i.y2),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 1,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    r: c,
+                    style: {
+                      fillOpacity: 0.6
+                    }
+                  }
+                ),
+                H ? /* @__PURE__ */ o.jsx(
+                  O.text,
+                  {
+                    variants: {
+                      initial: {
+                        y: y(i.y2),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 0
+                      },
+                      whileInView: {
+                        y: y(i.y2),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 1,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    style: {
+                      textAnchor: "start",
+                      ...u?.yAxis?.labels || {}
+                    },
+                    className: j("text-xs", h?.yAxis?.labels),
+                    x: v - 5,
+                    dy: "0.33em",
+                    dx: c + 3,
+                    children: i.label
+                  }
+                ) : m.length !== 0 && m.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
+                  O.text,
+                  {
+                    variants: {
+                      initial: {
+                        y: y(i.y2),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 0
+                      },
+                      whileInView: {
+                        y: y(i.y2),
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        opacity: 1,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    style: {
+                      textAnchor: "start",
+                      ...u?.yAxis?.labels || {}
+                    },
+                    className: j("text-xs", h?.yAxis?.labels),
+                    x: v - 5,
+                    dy: "0.33em",
+                    dx: 3,
+                    children: i.label
+                  }
+                ) : null,
+                /* @__PURE__ */ o.jsx(
+                  O.line,
+                  {
+                    x1: c,
+                    x2: v - c,
+                    variants: {
+                      initial: {
+                        y1: y(i.y1),
+                        y2: y(i.y1),
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray
+                      },
+                      whileInView: {
+                        y1: y(i.y1),
+                        y2: y(i.y2),
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        transition: { duration: s.duration }
+                      }
+                    },
+                    initial: "initial",
+                    animate: d ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    className: h?.dataConnectors,
+                    style: {
+                      fill: "none",
+                      strokeWidth: 1,
+                      ...u?.dataConnectors
+                    }
+                  }
+                )
+              ]
+            },
+            V
+          )) }),
+          B.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    w && R && U && T ? /* @__PURE__ */ o.jsx(
+      hi,
+      {
+        data: w,
+        body: R,
+        xPos: U,
+        yPos: T,
+        backgroundStyle: u?.tooltip,
+        className: h?.tooltip
+      }
+    ) : null,
+    g && A !== void 0 ? /* @__PURE__ */ o.jsx(
+      xi,
+      {
+        open: A !== void 0,
+        onClose: () => {
+          N(void 0);
+        },
+        children: /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof g == "string" ? { __html: fi(g, A) } : void 0,
+            children: typeof g == "function" ? g(A) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function Gi(K) {
+  const {
+    data: l,
+    graphTitle: $,
+    colors: k,
+    sources: H,
+    graphDescription: e,
+    showLabels: a = !1,
+    height: c,
+    width: x,
+    footNote: X,
+    colorDomain: G,
+    colorLegendTitle: Q,
+    radius: R = 5,
+    axisTitles: F = ["", ""],
+    padding: L,
+    backgroundColor: m = !1,
+    leftMargin: D = 50,
+    rightMargin: q = 50,
+    topMargin: z = 20,
+    bottomMargin: E = 20,
+    tooltip: Z,
+    relativeHeight: g,
+    onSeriesMouseOver: u,
+    showColorScale: h = !0,
+    highlightedDataPoints: s = [],
+    graphID: p,
+    minValue: B,
+    maxValue: _,
+    onSeriesMouseClick: d,
+    graphDownload: w = !1,
+    dataDownload: S = !1,
+    fillContainer: A = !0,
+    language: N = "en",
+    showNAColor: U = !0,
+    minHeight: M = 0,
+    theme: T = "light",
+    ariaLabel: W,
+    resetSelectionOnDoubleClick: C = !0,
+    detailsOnClick: v,
+    styles: f,
+    classNames: b,
+    animate: P = !1,
+    dimmedOpacity: y = 0.3,
+    customLayers: i = []
+  } = K, [V, t] = I(0), [ti, ei] = I(0), [si, ci] = I(void 0), Y = ii(null), oi = ii(null);
+  return yi(() => {
+    const r = new ResizeObserver((li) => {
+      t(x || li[0].target.clientWidth || 620), ei(c || li[0].target.clientHeight || 480);
+    });
+    return Y.current && (ei(Y.current.clientHeight || 480), t(Y.current.clientWidth || 620), x || r.observe(Y.current)), () => r.disconnect();
+  }, [x, c]), /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      className: `${T || "light"} flex ${x ? "grow-0" : "grow"} ${A ? "w-full" : "w-fit"} `,
+      dir: N === "he" || N === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          className: j(
+            `${m ? m === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${N || "en"}`,
+            b?.graphContainer
+          ),
+          style: {
+            ...f?.graphContainer || {},
+            ...m && m !== !0 ? { backgroundColor: m } : {}
+          },
+          id: p,
+          ref: oi,
+          "aria-label": W || `${$ ? `The graph shows ${$}. ` : ""}This is a slope chart showing changes in data between two category or starting and ending time. Each line represents a different row in data, with lines sloping up or down to show increase or decrease over two categories or time.${e ? ` ${e}` : ""}`,
+          children: /* @__PURE__ */ o.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: m ? L || "1rem" : L || 0 },
+              children: /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                $ || e || w || S ? /* @__PURE__ */ o.jsx(
+                  wi,
+                  {
+                    styles: {
+                      title: f?.title,
+                      description: f?.description
+                    },
+                    classNames: {
+                      title: b?.title,
+                      description: b?.description
+                    },
+                    graphTitle: $,
+                    graphDescription: e,
+                    width: x,
+                    graphDownload: w ? oi.current : void 0,
+                    dataDownload: S ? l.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? l.map((r) => r.data).filter((r) => r !== void 0) : l.filter((r) => r !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ o.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: l.length === 0 ? /* @__PURE__ */ o.jsx(bi, {}) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+                  h && l.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ o.jsx(
+                    vi,
+                    {
+                      width: x,
+                      colorLegendTitle: Q,
+                      colors: k || n[T].categoricalColors.colors,
+                      colorDomain: G || ri(
+                        l.filter((r) => r.color),
+                        "color"
+                      ).map((r) => r.color),
+                      setSelectedColor: ci,
+                      showNAColor: U
+                    }
+                  ) : null,
+                  /* @__PURE__ */ o.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center w-full leading-0",
+                      ref: Y,
+                      "aria-label": "Graph area",
+                      children: (x || V) && (c || ti) ? /* @__PURE__ */ o.jsx(
+                        Oi,
+                        {
+                          data: l.filter(
+                            (r) => !J(r.y1) && !J(r.y2)
+                          ),
+                          width: x || V,
+                          height: Math.max(
+                            M,
+                            c || (g ? M ? (x || V) * g > M ? (x || V) * g : M : (x || V) * g : ti)
+                          ),
+                          colorDomain: l.filter((r) => r.color).length === 0 ? [] : G || ri(
+                            l.filter((r) => r.color),
+                            "color"
+                          ).map((r) => r.color),
+                          colors: l.filter((r) => r.color).length === 0 ? k ? [k] : [n.primaryColors["blue-600"]] : k || n[T].categoricalColors.colors,
+                          selectedColor: si,
+                          axisTitles: F,
+                          showLabels: a,
+                          radius: R,
+                          leftMargin: D,
+                          rightMargin: q,
+                          topMargin: z,
+                          bottomMargin: E,
+                          tooltip: Z,
+                          onSeriesMouseOver: u,
+                          highlightedDataPoints: s,
+                          minValue: B,
+                          maxValue: _,
+                          onSeriesMouseClick: d,
+                          resetSelectionOnDoubleClick: C,
+                          detailsOnClick: v,
+                          styles: f,
+                          classNames: b,
+                          animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
+                          dimmedOpacity: y,
+                          customLayers: i
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                H || X ? /* @__PURE__ */ o.jsx(
+                  di,
+                  {
+                    styles: { footnote: f?.footnote, source: f?.source },
+                    classNames: {
+                      footnote: b?.footnote,
+                      source: b?.source
+                    },
+                    sources: H,
+                    footNote: X,
+                    width: x
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Gi as SlopeChart
+};
 //# sourceMappingURL=SlopeChart.js.map