@undp/data-viz 1.3.0 → 1.3.1

package/dist/ButterflyChart.js

@@ -1,2 +1,693 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),y=require("react"),te=require("./Typography-CDR-DAHH.cjs"),de=require("./getSliderMarks-DDJ1CdhL.cjs"),ye=require("./parse-hMnG_lRV.cjs"),$e=require("./index-CZbIGs8q.cjs"),je=require("./index-BXns0-ng.cjs"),Ae=require("./Modal-cQF2UQIa.cjs"),be=require("./numberFormattingFunction.js"),Le=require("./Tooltip-BM18N_3l.cjs"),ke=require("./string2HTML-X4ZYX5jI.cjs"),ve=require("./XTicksAndGridLines-DuK35ROS.cjs"),we=require("./Axis-BlyBRMNw.cjs"),Ce=require("./YAxesLabels-DhBdLk3Z.cjs"),Ee=require("./ReferenceLine-Bsb5jeE4.cjs"),k=require("./use-in-view-Dl1CsAIo.cjs"),Ne=require("./band-CAApY4Pd.cjs"),Re=require("./linear-BVckp9RD.cjs"),he=require("./index-a2C2Bqn2.cjs"),qe=require("./GraphFooter.js"),Se=require("./GraphHeader.js"),Te=require("./ColorLegend.js"),Be=require("./Colors.js"),Ve=require("./EmptyState-BQguKAp5.cjs"),Me=require("./index-CEc_9zWy.cjs"),pe=require("./checkIfNullOrUndefined.js"),Oe=require("./ensureCompleteData-DqWQ2Zbi.cjs"),Ie=require("./init-DU0ybBc_.cjs");function De(U){const{data:x,width:j,height:E,barColors:c,centerGap:d,refValues:o,maxValue:R,minValue:W,showValues:z,axisTitles:B,rightMargin:oe,leftMargin:le,topMargin:_,bottomMargin:xe,tooltip:K,onSeriesMouseOver:O,barPadding:ce,truncateBy:I,onSeriesMouseClick:C,showTicks:ie,suffix:G,prefix:H,resetSelectionOnDoubleClick:se,detailsOnClick:M,styles:h,classNames:a,noOfTicks:$,animate:m,precision:P,customLayers:re,minValueLeftBar:N,minValueRightBar:q,naLabel:J}=U,Q=y.useRef(null),b=k.useInView(Q,{once:m.once,amount:m.amount}),[ae,v]=y.useState(void 0),[S,D]=y.useState(void 0),[ne,T]=y.useState(void 0),[A,g]=y.useState(void 0),u={top:_,bottom:xe,left:le,right:oe},L=j-u.left-u.right,w=E-u.top-u.bottom,X=x.map((e,r)=>({...e,id:`${r}`})),s=Ne.band().domain(X.map(e=>`${e.id}`)).range([w,0]).paddingInner(ce),l=Re.linear().domain([W,R]).range([0,(L-d)/2]).nice(),V=l.ticks($),n=Re.linear().domain([W,R]).range([(L-d)/2,0]).nice(),Z=n.ticks($);return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(k.motion.svg,{width:`${j}px`,height:`${E}px`,viewBox:`0 0 ${j} ${E}`,direction:"ltr",ref:Q,children:t.jsxRuntimeExports.jsxs("g",{transform:`translate(${u.left},${u.top})`,children:[re.filter(e=>e.position==="before").map(e=>e.layer),t.jsxRuntimeExports.jsxs("g",{transform:"translate(0,0)",children:[ie?t.jsxRuntimeExports.jsx(ve.XTicksAndGridLines,{values:Z.filter(e=>e!==0),x:Z.filter(e=>e!==0).map(e=>n(e)),y1:0-_,y2:w+u.bottom,styles:{gridLines:h?.xAxis?.gridLines,labels:h?.xAxis?.labels},classNames:{gridLines:a?.xAxis?.gridLines,labels:a?.xAxis?.labels},suffix:G,prefix:H,labelType:"secondary",showGridLines:!0,leftLabel:!0,precision:P}):null,t.jsxRuntimeExports.jsxs(he.AnimatePresence,{children:[X.map((e,r)=>t.jsxRuntimeExports.jsxs(k.motion.g,{className:"undp-viz-g-with-hover",opacity:.85,onMouseEnter:f=>{v(e),g(f.clientY),T(f.clientX),O?.(e)},onClick:()=>{(C||M)&&(je.isEqual(S,e)&&se?(D(void 0),C?.(void 0)):(D(e),C?.(e)))},onMouseMove:f=>{v(e),g(f.clientY),T(f.clientX)},onMouseLeave:()=>{v(void 0),T(void 0),g(void 0),O?.(void 0)},children:[e.leftBar?t.jsxRuntimeExports.jsx(k.motion.rect,{y:s(`${r}`),style:{fill:c[0]},height:s.bandwidth(),variants:{initial:{x:n(0),width:0},whileInView:{x:e.leftBar<0?n(0):n(e.leftBar),width:e.leftBar<0?n(e.leftBar)-n(0):n(0)-n(e.leftBar),transition:{duration:m.duration}}},initial:"initial",animate:b?"whileInView":"initial",exit:{x:n(0),width:0,transition:{duration:m.duration}}}):null,z?t.jsxRuntimeExports.jsx(k.motion.text,{y:s(`${r}`)+s.bandwidth()/2,style:{fill:c[0],textAnchor:e.rightBar&&e.rightBar>0?"end":"start",...h?.graphObjectValues||{}},dx:e.rightBar&&e.rightBar>0?-5:5,dy:"0.33em",className:te.cnExports.cn("graph-value text-sm",a?.graphObjectValues),exit:{opacity:0,transition:{duration:m.duration}},variants:{initial:{x:n(0),opacity:0},whileInView:{x:e.leftBar?n(e.leftBar):n(N<0?0:N),opacity:1,transition:{duration:m.duration}}},initial:"initial",animate:b?"whileInView":"initial",children:be.numberFormattingFunction(e.rightBar,J,P,H,G)}):null]},e.label)),t.jsxRuntimeExports.jsx(we.Axis,{y1:-2.5,y2:w+u.bottom,x1:n(N<0?0:N),x2:n(N<0?0:N),classNames:{axis:a?.yAxis?.axis},styles:{axis:h?.yAxis?.axis}}),o?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:o.map((e,r)=>t.jsxRuntimeExports.jsx(Ee.RefLineX,{text:e.text,color:e.color,x:n(e.value),y1:0-u.top,y2:w+u.bottom,textSide:"left",classNames:e.classNames,styles:e.styles,animate:m,isInView:b},r))}):null]})]}),t.jsxRuntimeExports.jsxs("g",{transform:`translate(${(L+d)/2},0)`,children:[ie?t.jsxRuntimeExports.jsx(ve.XTicksAndGridLines,{values:V.filter(e=>e!==0),x:V.filter(e=>e!==0).map(e=>l(e)),y1:0-_,y2:w+u.bottom,styles:{gridLines:h?.xAxis?.gridLines,labels:h?.xAxis?.labels},classNames:{gridLines:a?.xAxis?.gridLines,labels:a?.xAxis?.labels},suffix:G,prefix:H,labelType:"secondary",showGridLines:!0,precision:P}):null,t.jsxRuntimeExports.jsxs(he.AnimatePresence,{children:[X.map((e,r)=>t.jsxRuntimeExports.jsxs(k.motion.g,{className:"undp-viz-g-with-hover",opacity:.85,onMouseEnter:f=>{v(e),g(f.clientY),T(f.clientX),O?.(e)},onClick:()=>{(C||M)&&(je.isEqual(S,e)&&se?(D(void 0),C?.(void 0)):(D(e),C?.(e)))},onMouseMove:f=>{v(e),g(f.clientY),T(f.clientX)},onMouseLeave:()=>{v(void 0),T(void 0),g(void 0),O?.(void 0)},children:[e.rightBar?t.jsxRuntimeExports.jsx(k.motion.rect,{y:s(`${r}`),style:{fill:c[1]},height:s.bandwidth(),exit:{x:l(0),width:0,transition:{duration:m.duration}},variants:{initial:{x:l(0),width:0},whileInView:{x:e.rightBar>=0?l(0):l(e.rightBar),width:e.rightBar>=0?l(e.rightBar)-l(0):l(0)-l(e.rightBar),transition:{duration:m.duration}}},initial:"initial",animate:b?"whileInView":"initial"}):null,z?t.jsxRuntimeExports.jsx(k.motion.text,{y:s(`${r}`)+s.bandwidth()/2,style:{fill:c[1],textAnchor:e.rightBar&&e.rightBar<0?"end":"start",...h?.graphObjectValues||{}},className:te.cnExports.cn("graph-value text-sm",a?.graphObjectValues),dx:e.rightBar&&e.rightBar<0?-5:5,dy:"0.33em",exit:{opacity:0,transition:{duration:m.duration}},variants:{initial:{x:l(0),opacity:0},whileInView:{x:e.rightBar?l(e.rightBar):l(q<0?0:q),opacity:1,transition:{duration:m.duration}}},initial:"initial",animate:b?"whileInView":"initial",children:be.numberFormattingFunction(e.rightBar,J,P,H,G)}):null]},r)),t.jsxRuntimeExports.jsx(we.Axis,{y1:-2.5,y2:w+u.bottom,x1:l(q<0?0:q),x2:l(q<0?0:q),classNames:{axis:a?.yAxis?.axis},styles:{axis:h?.yAxis?.axis}}),o?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:o.map((e,r)=>t.jsxRuntimeExports.jsx(Ee.RefLineX,{text:e.text,color:e.color,x:l(e.value),y1:0-u.top,y2:w+u.bottom,textSide:"right",classNames:e.classNames,styles:e.styles,animate:m,isInView:b},r))}):null]})]}),t.jsxRuntimeExports.jsx(he.AnimatePresence,{children:t.jsxRuntimeExports.jsx(k.motion.g,{transform:`translate(${L/2},0)`,children:X.map((e,r)=>t.jsxRuntimeExports.jsx(Ce.YAxesLabels,{value:`${e.label}`.length<I?`${e.label}`:`${`${e.label}`.substring(0,I)}...`,y:s(`${e.id}`),x:0-d/2,width:d,height:s.bandwidth(),alignment:"center",style:h?.yAxis?.labels,className:a?.yAxis?.labels,animate:m,isInView:b},r))})}),t.jsxRuntimeExports.jsxs("g",{transform:`translate(0,${w})`,children:[t.jsxRuntimeExports.jsx("text",{style:{fill:c[0],textAnchor:"end",...h?.yAxis?.title},className:te.cnExports.cn("text-base",a?.yAxis?.title),x:L/2-d/2,y:0,dx:-5,dy:20,children:B[0]}),t.jsxRuntimeExports.jsx("text",{style:{fill:c[1],textAnchor:"start",...h?.yAxis?.title},className:te.cnExports.cn("text-base",a?.yAxis?.title),x:L/2+d/2,y:0,dx:5,dy:20,children:B[1]})]}),re.filter(e=>e.position==="after").map(e=>e.layer)]})}),ae&&K&&ne&&A?t.jsxRuntimeExports.jsx(Le.Tooltip,{data:ae,body:K,xPos:ne,yPos:A,backgroundStyle:h?.tooltip,className:a?.tooltip}):null,M&&S!==void 0?t.jsxRuntimeExports.jsx(Ae.ModalExports.Modal,{open:S!==void 0,onClose:()=>{D(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof M=="string"?{__html:ke.string2HTML(M,S)}:void 0,children:typeof M=="function"?M(S):null})}):null]})}function Y(U,x,j,E){const c=U.map(R=>R[x]).filter(R=>!pe.checkIfNullOrUndefined(R)),d=pe.checkIfNullOrUndefined(j)?Math.min(...c)>=0?0:Math.min(...c):j,o=pe.checkIfNullOrUndefined(E)?Math.max(...c)<0?0:Math.max(...c):E;return{min:d,max:o}}function Fe(U){const{data:x,graphTitle:j,sources:E,graphDescription:c,height:d,width:o,footNote:R,padding:W,barColors:z=[Be.Colors.light.categoricalColors.colors[0],Be.Colors.light.categoricalColors.colors[1]],backgroundColor:B=!1,leftMargin:oe=20,rightMargin:le=20,topMargin:_=25,bottomMargin:xe=30,rightBarTitle:K="Right bar graph",leftBarTitle:O="Left bar graph",tooltip:ce,relativeHeight:I,onSeriesMouseOver:C,graphID:ie,barPadding:G=.25,truncateBy:H=999,onSeriesMouseClick:se,centerGap:M=100,showValues:h=!0,maxValue:a,minValue:$,refValues:m=[],suffix:P="",prefix:re="",showTicks:N=!0,showColorScale:q=!1,graphDownload:J=!1,dataDownload:Q=!1,language:b="en",colorLegendTitle:ae,minHeight:v=0,theme:S="light",ariaLabel:D,resetSelectionOnDoubleClick:ne=!0,detailsOnClick:T,styles:A,classNames:g,noOfTicks:u=5,animate:L=!1,precision:w=2,customLayers:X=[],timeline:s={enabled:!1,autoplay:!1,showOnlyActiveDate:!0},naLabel:l="NA"}=U,[V,n]=y.useState(0),[Z,e]=y.useState(0),[r,f]=y.useState(s.autoplay),p=de.sort($e.uniqBy(x.filter(i=>i.date!==void 0&&i.date!==null),i=>i.date).map(i=>ye.parse(`${i.date}`,s.dateFormat||"yyyy",new Date).getTime()),(i,F)=>Ie.ascending(i,F)),[ue,me]=y.useState(s.autoplay?0:p.length-1),ee=y.useRef(null),ge=y.useRef(null);y.useEffect(()=>{const i=new ResizeObserver(F=>{n(o||F[0].target.clientWidth||620),e(d||F[0].target.clientHeight||480)});return ee.current&&(e(ee.current.clientHeight||480),n(ee.current.clientWidth||620),o||i.observe(ee.current)),()=>i.disconnect()},[o,d]),y.useEffect(()=>{const i=setInterval(()=>{me(F=>F<p.length-1?F+1:0)},(s.speed||2)*1e3);return r||clearInterval(i),()=>clearInterval(i)},[p,r,s.speed]);const fe=de.getSliderMarks(p,ue,s.showOnlyActiveDate,s.dateFormat||"yyyy");return t.jsxRuntimeExports.jsx("div",{className:`${S||"light"} flex  ${o?"w-fit grow-0":"w-full grow"}`,dir:b==="he"||b==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:te.cnExports.cn(`${B?B===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${b||"en"}`,g?.graphContainer),style:{...A?.graphContainer||{},...B&&B!==!0?{backgroundColor:B}:{}},id:ie,ref:ge,"aria-label":D||`${j?`The graph shows ${j}. `:""}This is a diverging bar chart. ${c?` ${c}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:B?W||"1rem":W||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[j||c||J||Q?t.jsxRuntimeExports.jsx(Se.GraphHeader,{styles:{title:A?.title,description:A?.description},classNames:{title:g?.title,description:g?.description},graphTitle:j,graphDescription:c,width:o,graphDownload:J?ge.current:void 0,dataDownload:Q?x.map(i=>i.data).filter(i=>i!==void 0).length>0?x.map(i=>i.data).filter(i=>i!==void 0):x.filter(i=>i!==void 0):null}):null,s.enabled&&p.length>0&&fe?t.jsxRuntimeExports.jsxs("div",{className:"flex gap-6 items-center",dir:"ltr",children:[t.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>{f(!r)},className:"p-0 border-0 cursor-pointer bg-transparent","aria-label":r?"Click to pause animation":"Click to play animation",children:r?t.jsxRuntimeExports.jsx(Me.Pause,{}):t.jsxRuntimeExports.jsx(Me.Play,{})}),t.jsxRuntimeExports.jsx(de.SliderUIExports.SliderUI,{min:p[0],max:p[p.length-1],marks:fe,step:null,defaultValue:p[p.length-1],value:p[ue],onChangeComplete:i=>{me(p.indexOf(i))},onChange:i=>{me(p.indexOf(i))},"aria-label":"Time slider. Use arrow keys to adjust selected time period."})]}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:x.length===0?t.jsxRuntimeExports.jsx(Ve.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[q?t.jsxRuntimeExports.jsx(Te.ColorLegend,{colorLegendTitle:ae,colorDomain:[O,K],colors:z,showNAColor:!1}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:ee,"aria-label":"Graph area",children:(o||V)&&(d||Z)?t.jsxRuntimeExports.jsx(De,{data:Oe.ensureCompleteDataForButterFlyChart(x,s.dateFormat||"yyyy").filter(i=>s.enabled?i.date===ye.format(new Date(p[ue]),s.dateFormat||"yyyy"):i),barColors:z,width:o||V,centerGap:M,height:Math.max(v,d||(I?v?(o||V)*I>v?(o||V)*I:v:(o||V)*I:Z)),truncateBy:H,leftMargin:oe,rightMargin:le,topMargin:_,bottomMargin:xe,axisTitles:[O,K],tooltip:ce,onSeriesMouseOver:C,barPadding:G,refValues:m,maxValue:Math.max(Y(x,"leftBar",$,a).max,Y(x,"rightBar",$,a).max),minValue:Math.min(Y(x,"leftBar",$,a).min,Y(x,"rightBar",$,a).min),minValueLeftBar:Y(x,"leftBar",$,a).min,minValueRightBar:Y(x,"rightBar",$,a).min,showValues:h,onSeriesMouseClick:se,showTicks:N,suffix:P,prefix:re,resetSelectionOnDoubleClick:ne,detailsOnClick:T,styles:A,classNames:g,noOfTicks:u,animate:L===!0?{duration:.5,once:!0,amount:.5}:L||{duration:0,once:!0,amount:0},precision:w,customLayers:X,naLabel:l}):null})]})}),E||R?t.jsxRuntimeExports.jsx(qe.GraphFooter,{styles:{footnote:A?.footnote,source:A?.source},classNames:{footnote:g?.footnote,source:g?.source},sources:E,footNote:R,width:o}):null]})})})})}exports.ButterflyChart=Fe;
+import { j as e, m as et } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as gt, useState as S, useEffect as yt } from "react";
+import { s as Nt, g as At, x as Ct } from "./getSliderMarks-C0jptXeP.js";
+import { p as kt, f as Lt } from "./parse-DlCRUFh_.js";
+import { u as Vt } from "./index-CaAIPGZo.js";
+import { i as vt } from "./index-27yTRcko.js";
+import { X as Tt } from "./Modal-CUU6ZK3U.js";
+import { n as bt } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Ot } from "./Tooltip-DyM5snqx.js";
+import { s as Dt } from "./string2HTML-CWHGfz_d.js";
+import { X as wt } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { A as jt } from "./Axis-Ddg-seDi.js";
+import { Y as It } from "./YAxesLabels-H5-002X5.js";
+import { a as Bt } from "./ReferenceLine-C1GpoG9d.js";
+import { u as St } from "./use-in-view-BAHrBy6b.js";
+import { b as Ft } from "./band-BEjh2CHI.js";
+import { a as Mt } from "./linear-DUdu7l2G.js";
+import { m as I } from "./proxy-DJxJg1kD.js";
+import { A as xt } from "./index-BxAUvrua.js";
+import { GraphFooter as Ht } from "./GraphFooter.js";
+import { GraphHeader as Pt } from "./GraphHeader.js";
+import { ColorLegend as Rt } from "./ColorLegend.js";
+import { Colors as $t } from "./Colors.js";
+import { E as Xt } from "./EmptyState-DdTp-Mdn.js";
+import { P as Et, f as Gt } from "./index-BmCqpO1B.js";
+import { c as ut } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { a as Yt } from "./ensureCompleteData-BBDZbDCE.js";
+import { c as Wt } from "./init-BhZylTFx.js";
+function zt(z) {
+  const {
+    data: c,
+    width: y,
+    height: j,
+    barColors: m,
+    centerGap: x,
+    refValues: n,
+    maxValue: B,
+    minValue: q,
+    showValues: U,
+    axisTitles: M,
+    rightMargin: nt,
+    leftMargin: ot,
+    topMargin: _,
+    bottomMargin: ct,
+    tooltip: J,
+    onSeriesMouseOver: F,
+    barPadding: mt,
+    truncateBy: H,
+    onSeriesMouseClick: k,
+    showTicks: it,
+    suffix: X,
+    prefix: E,
+    resetSelectionOnDoubleClick: at,
+    detailsOnClick: $,
+    styles: u,
+    classNames: s,
+    noOfTicks: N,
+    animate: d,
+    precision: G,
+    customLayers: rt,
+    minValueLeftBar: L,
+    minValueRightBar: V,
+    naLabel: K
+  } = z, Q = gt(null), v = St(Q, {
+    once: d.once,
+    amount: d.amount
+  }), [st, b] = S(void 0), [T, P] = S(void 0), [lt, O] = S(void 0), [A, f] = S(void 0), h = {
+    top: _,
+    bottom: ct,
+    left: ot,
+    right: nt
+  }, C = y - h.left - h.right, w = j - h.top - h.bottom, Y = c.map((t, r) => ({ ...t, id: `${r}` })), a = Ft().domain(Y.map((t) => `${t.id}`)).range([w, 0]).paddingInner(mt), o = Mt().domain([q, B]).range([0, (C - x) / 2]).nice(), D = o.ticks(N), l = Mt().domain([q, B]).range([(C - x) / 2, 0]).nice(), Z = l.ticks(N);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      I.svg,
+      {
+        width: `${y}px`,
+        height: `${j}px`,
+        viewBox: `0 0 ${y} ${j}`,
+        direction: "ltr",
+        ref: Q,
+        children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
+          rt.filter((t) => t.position === "before").map((t) => t.layer),
+          /* @__PURE__ */ e.jsxs("g", { transform: "translate(0,0)", children: [
+            it ? /* @__PURE__ */ e.jsx(
+              wt,
+              {
+                values: Z.filter((t) => t !== 0),
+                x: Z.filter((t) => t !== 0).map((t) => l(t)),
+                y1: 0 - _,
+                y2: w + h.bottom,
+                styles: {
+                  gridLines: u?.xAxis?.gridLines,
+                  labels: u?.xAxis?.labels
+                },
+                classNames: {
+                  gridLines: s?.xAxis?.gridLines,
+                  labels: s?.xAxis?.labels
+                },
+                suffix: X,
+                prefix: E,
+                labelType: "secondary",
+                showGridLines: !0,
+                leftLabel: !0,
+                precision: G
+              }
+            ) : null,
+            /* @__PURE__ */ e.jsxs(xt, { children: [
+              Y.map((t, r) => /* @__PURE__ */ e.jsxs(
+                I.g,
+                {
+                  className: "undp-viz-g-with-hover",
+                  opacity: 0.85,
+                  onMouseEnter: (p) => {
+                    b(t), f(p.clientY), O(p.clientX), F?.(t);
+                  },
+                  onClick: () => {
+                    (k || $) && (vt(T, t) && at ? (P(void 0), k?.(void 0)) : (P(t), k?.(t)));
+                  },
+                  onMouseMove: (p) => {
+                    b(t), f(p.clientY), O(p.clientX);
+                  },
+                  onMouseLeave: () => {
+                    b(void 0), O(void 0), f(void 0), F?.(void 0);
+                  },
+                  children: [
+                    t.leftBar ? /* @__PURE__ */ e.jsx(
+                      I.rect,
+                      {
+                        y: a(`${r}`),
+                        style: { fill: m[0] },
+                        height: a.bandwidth(),
+                        variants: {
+                          initial: {
+                            x: l(0),
+                            width: 0
+                          },
+                          whileInView: {
+                            x: t.leftBar < 0 ? l(0) : l(t.leftBar),
+                            width: t.leftBar < 0 ? l(t.leftBar) - l(0) : l(0) - l(t.leftBar),
+                            transition: { duration: d.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: v ? "whileInView" : "initial",
+                        exit: {
+                          x: l(0),
+                          width: 0,
+                          transition: { duration: d.duration }
+                        }
+                      }
+                    ) : null,
+                    U ? /* @__PURE__ */ e.jsx(
+                      I.text,
+                      {
+                        y: a(`${r}`) + a.bandwidth() / 2,
+                        style: {
+                          fill: m[0],
+                          textAnchor: t.rightBar && t.rightBar > 0 ? "end" : "start",
+                          ...u?.graphObjectValues || {}
+                        },
+                        dx: t.rightBar && t.rightBar > 0 ? -5 : 5,
+                        dy: "0.33em",
+                        className: et("graph-value text-sm", s?.graphObjectValues),
+                        exit: {
+                          opacity: 0,
+                          transition: { duration: d.duration }
+                        },
+                        variants: {
+                          initial: {
+                            x: l(0),
+                            opacity: 0
+                          },
+                          whileInView: {
+                            x: t.leftBar ? l(t.leftBar) : l(L < 0 ? 0 : L),
+                            opacity: 1,
+                            transition: { duration: d.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: v ? "whileInView" : "initial",
+                        children: bt(t.rightBar, K, G, E, X)
+                      }
+                    ) : null
+                  ]
+                },
+                t.label
+              )),
+              /* @__PURE__ */ e.jsx(
+                jt,
+                {
+                  y1: -2.5,
+                  y2: w + h.bottom,
+                  x1: l(L < 0 ? 0 : L),
+                  x2: l(L < 0 ? 0 : L),
+                  classNames: { axis: s?.yAxis?.axis },
+                  styles: { axis: u?.yAxis?.axis }
+                }
+              ),
+              n ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n.map((t, r) => /* @__PURE__ */ e.jsx(
+                Bt,
+                {
+                  text: t.text,
+                  color: t.color,
+                  x: l(t.value),
+                  y1: 0 - h.top,
+                  y2: w + h.bottom,
+                  textSide: "left",
+                  classNames: t.classNames,
+                  styles: t.styles,
+                  animate: d,
+                  isInView: v
+                },
+                r
+              )) }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("g", { transform: `translate(${(C + x) / 2},0)`, children: [
+            it ? /* @__PURE__ */ e.jsx(
+              wt,
+              {
+                values: D.filter((t) => t !== 0),
+                x: D.filter((t) => t !== 0).map((t) => o(t)),
+                y1: 0 - _,
+                y2: w + h.bottom,
+                styles: {
+                  gridLines: u?.xAxis?.gridLines,
+                  labels: u?.xAxis?.labels
+                },
+                classNames: {
+                  gridLines: s?.xAxis?.gridLines,
+                  labels: s?.xAxis?.labels
+                },
+                suffix: X,
+                prefix: E,
+                labelType: "secondary",
+                showGridLines: !0,
+                precision: G
+              }
+            ) : null,
+            /* @__PURE__ */ e.jsxs(xt, { children: [
+              Y.map((t, r) => /* @__PURE__ */ e.jsxs(
+                I.g,
+                {
+                  className: "undp-viz-g-with-hover",
+                  opacity: 0.85,
+                  onMouseEnter: (p) => {
+                    b(t), f(p.clientY), O(p.clientX), F?.(t);
+                  },
+                  onClick: () => {
+                    (k || $) && (vt(T, t) && at ? (P(void 0), k?.(void 0)) : (P(t), k?.(t)));
+                  },
+                  onMouseMove: (p) => {
+                    b(t), f(p.clientY), O(p.clientX);
+                  },
+                  onMouseLeave: () => {
+                    b(void 0), O(void 0), f(void 0), F?.(void 0);
+                  },
+                  children: [
+                    t.rightBar ? /* @__PURE__ */ e.jsx(
+                      I.rect,
+                      {
+                        y: a(`${r}`),
+                        style: { fill: m[1] },
+                        height: a.bandwidth(),
+                        exit: {
+                          x: o(0),
+                          width: 0,
+                          transition: { duration: d.duration }
+                        },
+                        variants: {
+                          initial: {
+                            x: o(0),
+                            width: 0
+                          },
+                          whileInView: {
+                            x: t.rightBar >= 0 ? o(0) : o(t.rightBar),
+                            width: t.rightBar >= 0 ? o(t.rightBar) - o(0) : o(0) - o(t.rightBar),
+                            transition: { duration: d.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: v ? "whileInView" : "initial"
+                      }
+                    ) : null,
+                    U ? /* @__PURE__ */ e.jsx(
+                      I.text,
+                      {
+                        y: a(`${r}`) + a.bandwidth() / 2,
+                        style: {
+                          fill: m[1],
+                          textAnchor: t.rightBar && t.rightBar < 0 ? "end" : "start",
+                          ...u?.graphObjectValues || {}
+                        },
+                        className: et("graph-value text-sm", s?.graphObjectValues),
+                        dx: t.rightBar && t.rightBar < 0 ? -5 : 5,
+                        dy: "0.33em",
+                        exit: {
+                          opacity: 0,
+                          transition: { duration: d.duration }
+                        },
+                        variants: {
+                          initial: {
+                            x: o(0),
+                            opacity: 0
+                          },
+                          whileInView: {
+                            x: t.rightBar ? o(t.rightBar) : o(V < 0 ? 0 : V),
+                            opacity: 1,
+                            transition: { duration: d.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: v ? "whileInView" : "initial",
+                        children: bt(t.rightBar, K, G, E, X)
+                      }
+                    ) : null
+                  ]
+                },
+                r
+              )),
+              /* @__PURE__ */ e.jsx(
+                jt,
+                {
+                  y1: -2.5,
+                  y2: w + h.bottom,
+                  x1: o(V < 0 ? 0 : V),
+                  x2: o(V < 0 ? 0 : V),
+                  classNames: { axis: s?.yAxis?.axis },
+                  styles: { axis: u?.yAxis?.axis }
+                }
+              ),
+              n ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n.map((t, r) => /* @__PURE__ */ e.jsx(
+                Bt,
+                {
+                  text: t.text,
+                  color: t.color,
+                  x: o(t.value),
+                  y1: 0 - h.top,
+                  y2: w + h.bottom,
+                  textSide: "right",
+                  classNames: t.classNames,
+                  styles: t.styles,
+                  animate: d,
+                  isInView: v
+                },
+                r
+              )) }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx(xt, { children: /* @__PURE__ */ e.jsx(I.g, { transform: `translate(${C / 2},0)`, children: Y.map((t, r) => /* @__PURE__ */ e.jsx(
+            It,
+            {
+              value: `${t.label}`.length < H ? `${t.label}` : `${`${t.label}`.substring(0, H)}...`,
+              y: a(`${t.id}`),
+              x: 0 - x / 2,
+              width: x,
+              height: a.bandwidth(),
+              alignment: "center",
+              style: u?.yAxis?.labels,
+              className: s?.yAxis?.labels,
+              animate: d,
+              isInView: v
+            },
+            r
+          )) }) }),
+          /* @__PURE__ */ e.jsxs("g", { transform: `translate(0,${w})`, children: [
+            /* @__PURE__ */ e.jsx(
+              "text",
+              {
+                style: {
+                  fill: m[0],
+                  textAnchor: "end",
+                  ...u?.yAxis?.title
+                },
+                className: et("text-base", s?.yAxis?.title),
+                x: C / 2 - x / 2,
+                y: 0,
+                dx: -5,
+                dy: 20,
+                children: M[0]
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "text",
+              {
+                style: {
+                  fill: m[1],
+                  textAnchor: "start",
+                  ...u?.yAxis?.title
+                },
+                className: et("text-base", s?.yAxis?.title),
+                x: C / 2 + x / 2,
+                y: 0,
+                dx: 5,
+                dy: 20,
+                children: M[1]
+              }
+            )
+          ] }),
+          rt.filter((t) => t.position === "after").map((t) => t.layer)
+        ] })
+      }
+    ),
+    st && J && lt && A ? /* @__PURE__ */ e.jsx(
+      Ot,
+      {
+        data: st,
+        body: J,
+        xPos: lt,
+        yPos: A,
+        backgroundStyle: u?.tooltip,
+        className: s?.tooltip
+      }
+    ) : null,
+    $ && T !== void 0 ? /* @__PURE__ */ e.jsx(
+      Tt,
+      {
+        open: T !== void 0,
+        onClose: () => {
+          P(void 0);
+        },
+        children: /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof $ == "string" ? { __html: Dt($, T) } : void 0,
+            children: typeof $ == "function" ? $(T) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function W(z, c, y, j) {
+  const m = z.map((B) => B[c]).filter((B) => !ut(B)), x = ut(y) ? Math.min(...m) >= 0 ? 0 : Math.min(...m) : y, n = ut(j) ? Math.max(...m) < 0 ? 0 : Math.max(...m) : j;
+  return { min: x, max: n };
+}
+function we(z) {
+  const {
+    data: c,
+    graphTitle: y,
+    sources: j,
+    graphDescription: m,
+    height: x,
+    width: n,
+    footNote: B,
+    padding: q,
+    barColors: U = [
+      $t.light.categoricalColors.colors[0],
+      $t.light.categoricalColors.colors[1]
+    ],
+    backgroundColor: M = !1,
+    leftMargin: nt = 20,
+    rightMargin: ot = 20,
+    topMargin: _ = 25,
+    bottomMargin: ct = 30,
+    rightBarTitle: J = "Right bar graph",
+    leftBarTitle: F = "Left bar graph",
+    tooltip: mt,
+    relativeHeight: H,
+    onSeriesMouseOver: k,
+    graphID: it,
+    barPadding: X = 0.25,
+    truncateBy: E = 999,
+    onSeriesMouseClick: at,
+    centerGap: $ = 100,
+    showValues: u = !0,
+    maxValue: s,
+    minValue: N,
+    refValues: d = [],
+    suffix: G = "",
+    prefix: rt = "",
+    showTicks: L = !0,
+    showColorScale: V = !1,
+    graphDownload: K = !1,
+    dataDownload: Q = !1,
+    language: v = "en",
+    colorLegendTitle: st,
+    minHeight: b = 0,
+    theme: T = "light",
+    ariaLabel: P,
+    resetSelectionOnDoubleClick: lt = !0,
+    detailsOnClick: O,
+    styles: A,
+    classNames: f,
+    noOfTicks: h = 5,
+    animate: C = !1,
+    precision: w = 2,
+    customLayers: Y = [],
+    timeline: a = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
+    naLabel: o = "NA"
+  } = z, [D, l] = S(0), [Z, t] = S(0), [r, p] = S(a.autoplay), g = Nt(
+    Vt(
+      c.filter((i) => i.date !== void 0 && i.date !== null),
+      (i) => i.date
+    ).map((i) => kt(`${i.date}`, a.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
+    (i, R) => Wt(i, R)
+  ), [ht, dt] = S(a.autoplay ? 0 : g.length - 1), tt = gt(null), ft = gt(null);
+  yt(() => {
+    const i = new ResizeObserver((R) => {
+      l(n || R[0].target.clientWidth || 620), t(x || R[0].target.clientHeight || 480);
+    });
+    return tt.current && (t(tt.current.clientHeight || 480), l(tt.current.clientWidth || 620), n || i.observe(tt.current)), () => i.disconnect();
+  }, [n, x]), yt(() => {
+    const i = setInterval(
+      () => {
+        dt((R) => R < g.length - 1 ? R + 1 : 0);
+      },
+      (a.speed || 2) * 1e3
+    );
+    return r || clearInterval(i), () => clearInterval(i);
+  }, [g, r, a.speed]);
+  const pt = At(
+    g,
+    ht,
+    a.showOnlyActiveDate,
+    a.dateFormat || "yyyy"
+  );
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: `${T || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
+      dir: v === "he" || v === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: et(
+            `${M ? M === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${v || "en"}`,
+            f?.graphContainer
+          ),
+          style: {
+            ...A?.graphContainer || {},
+            ...M && M !== !0 ? { backgroundColor: M } : {}
+          },
+          id: it,
+          ref: ft,
+          "aria-label": P || `${y ? `The graph shows ${y}. ` : ""}This is a diverging bar chart. ${m ? ` ${m}` : ""}`,
+          children: /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: M ? q || "1rem" : q || 0 },
+              children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                y || m || K || Q ? /* @__PURE__ */ e.jsx(
+                  Pt,
+                  {
+                    styles: {
+                      title: A?.title,
+                      description: A?.description
+                    },
+                    classNames: {
+                      title: f?.title,
+                      description: f?.description
+                    },
+                    graphTitle: y,
+                    graphDescription: m,
+                    width: n,
+                    graphDownload: K ? ft.current : void 0,
+                    dataDownload: Q ? c.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? c.map((i) => i.data).filter((i) => i !== void 0) : c.filter((i) => i !== void 0) : null
+                  }
+                ) : null,
+                a.enabled && g.length > 0 && pt ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        p(!r);
+                      },
+                      className: "p-0 border-0 cursor-pointer bg-transparent",
+                      "aria-label": r ? "Click to pause animation" : "Click to play animation",
+                      children: r ? /* @__PURE__ */ e.jsx(Et, {}) : /* @__PURE__ */ e.jsx(Gt, {})
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    Ct,
+                    {
+                      min: g[0],
+                      max: g[g.length - 1],
+                      marks: pt,
+                      step: null,
+                      defaultValue: g[g.length - 1],
+                      value: g[ht],
+                      onChangeComplete: (i) => {
+                        dt(g.indexOf(i));
+                      },
+                      onChange: (i) => {
+                        dt(g.indexOf(i));
+                      },
+                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: c.length === 0 ? /* @__PURE__ */ e.jsx(Xt, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  V ? /* @__PURE__ */ e.jsx(
+                    Rt,
+                    {
+                      colorLegendTitle: st,
+                      colorDomain: [F, J],
+                      colors: U,
+                      showNAColor: !1
+                    }
+                  ) : null,
+                  /* @__PURE__ */ e.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center leading-0",
+                      ref: tt,
+                      "aria-label": "Graph area",
+                      children: (n || D) && (x || Z) ? /* @__PURE__ */ e.jsx(
+                        zt,
+                        {
+                          data: Yt(
+                            c,
+                            a.dateFormat || "yyyy"
+                          ).filter(
+                            (i) => a.enabled ? i.date === Lt(
+                              new Date(g[ht]),
+                              a.dateFormat || "yyyy"
+                            ) : i
+                          ),
+                          barColors: U,
+                          width: n || D,
+                          centerGap: $,
+                          height: Math.max(
+                            b,
+                            x || (H ? b ? (n || D) * H > b ? (n || D) * H : b : (n || D) * H : Z)
+                          ),
+                          truncateBy: E,
+                          leftMargin: nt,
+                          rightMargin: ot,
+                          topMargin: _,
+                          bottomMargin: ct,
+                          axisTitles: [F, J],
+                          tooltip: mt,
+                          onSeriesMouseOver: k,
+                          barPadding: X,
+                          refValues: d,
+                          maxValue: Math.max(
+                            W(c, "leftBar", N, s).max,
+                            W(c, "rightBar", N, s).max
+                          ),
+                          minValue: Math.min(
+                            W(c, "leftBar", N, s).min,
+                            W(c, "rightBar", N, s).min
+                          ),
+                          minValueLeftBar: W(c, "leftBar", N, s).min,
+                          minValueRightBar: W(c, "rightBar", N, s).min,
+                          showValues: u,
+                          onSeriesMouseClick: at,
+                          showTicks: L,
+                          suffix: G,
+                          prefix: rt,
+                          resetSelectionOnDoubleClick: lt,
+                          detailsOnClick: O,
+                          styles: A,
+                          classNames: f,
+                          noOfTicks: h,
+                          animate: C === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : C || { duration: 0, once: !0, amount: 0 },
+                          precision: w,
+                          customLayers: Y,
+                          naLabel: o
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                j || B ? /* @__PURE__ */ e.jsx(
+                  Ht,
+                  {
+                    styles: { footnote: A?.footnote, source: A?.source },
+                    classNames: {
+                      footnote: f?.footnote,
+                      source: f?.source
+                    },
+                    sources: j,
+                    footNote: B,
+                    width: n
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  we as ButterflyChart
+};
 //# sourceMappingURL=ButterflyChart.js.map