@undp/data-viz 1.3.0 → 1.4.0

package/dist/ParetoChart.js

@@ -1,2 +1,637 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BHm2KTjD-D8FylaKc.cjs"),y=require("react"),B=require("./Typography-CDR-DAHH.cjs"),gt=require("./index-BXns0-ng.cjs"),wt=require("./Modal-cQF2UQIa.cjs"),at=require("./numberFormattingFunction.js"),Et=require("./Tooltip-BM18N_3l.cjs"),Rt=require("./string2HTML-X4ZYX5jI.cjs"),pt=require("./checkIfNullOrUndefined.js"),ht=require("./Axis-BlyBRMNw.cjs"),ft=require("./AxisTitle-BY8MI9jC.cjs"),At=require("./XAxesLabels-C9REbQQs.cjs"),q=require("./use-in-view-Dl1CsAIo.cjs"),Mt=require("./band-CAApY4Pd.cjs"),yt=require("./linear-BVckp9RD.cjs"),jt=require("./line-DHV4JwCR.cjs"),ot=require("./step-BZ3C8QFW.cjs"),Ct=require("./index-a2C2Bqn2.cjs"),Nt=require("./GraphFooter.js"),kt=require("./GraphHeader.js"),$t=require("./ColorLegend.js"),lt=require("./Colors.js"),qt=require("./EmptyState-BQguKAp5.cjs");function St(xt){const{data:S,width:R,height:V,barColor:d,lineColor:p,axisTitles:n,sameAxes:j,rightMargin:G,leftMargin:U,topMargin:z,bottomMargin:ct,tooltip:b,showValues:_,onSeriesMouseOver:D,barPadding:ut,truncateBy:K,showLabels:J,onSeriesMouseClick:v,resetSelectionOnDoubleClick:Q,detailsOnClick:h,noOfTicks:Z,lineSuffix:tt,barSuffix:W,linePrefix:X,barPrefix:et,curveType:F,styles:o,classNames:l,animate:r,precision:H,customLayers:I,naLabel:A}=xt,it=y.useRef(null),M=q.useInView(it,{once:r.once,amount:r.amount}),mt=F==="linear"?jt.curveLinear:F==="step"?ot.curveStep:F==="stepAfter"?ot.stepAfter:F==="stepBefore"?ot.stepBefore:ot.monotoneX,[st,C]=y.useState(void 0),[N,T]=y.useState(void 0),[nt,k]=y.useState(void 0),[rt,u]=y.useState(void 0),a={top:z,bottom:ct,left:U+50,right:G+65},m=R-a.left-a.right,g=V-a.top-a.bottom,s=S.map((t,E)=>({...t,id:`${E}`})),x=Mt.band().domain(s.map(t=>`${t.id}`)).range([0,m]).paddingInner(ut),w=Math.min(...s.map(t=>t.bar).filter(t=>t!=null))!==1/0?Math.min(...s.map(t=>t.bar).filter(t=>t!=null))>0?0:Math.min(...s.map(t=>t.bar).filter(t=>t!=null)):0,Y=Math.min(...s.map(t=>t.line).filter(t=>t!=null))!==1/0?Math.min(...s.map(t=>t.line).filter(t=>t!=null))>0?0:Math.min(...s.map(t=>t.line).filter(t=>t!=null)):0,L=Math.max(...s.map(t=>t.bar).filter(t=>t!=null))!==1/0?Math.max(...s.map(t=>t.bar).filter(t=>t!=null)):0,O=Math.max(...s.map(t=>t.line).filter(t=>t!=null))!==1/0?Math.max(...s.map(t=>t.line).filter(t=>t!=null)):0,$=w<Y?w:Y,P=L>O?L:O,i=yt.linear().domain([j?$:w,j?P>0?P:0:L>0?L:0]).range([g,0]).nice(),c=yt.linear().domain([j?$:Y,j?P>0?P:0:O>0?O:0]).range([g,0]).nice(),dt=jt.line().defined(t=>!pt.checkIfNullOrUndefined(t.line)).x(t=>x(`${t.id}`)+x.bandwidth()/2).y(t=>c(t.line)).curve(mt),bt=i.ticks(Z),vt=c.ticks(Z);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(q.motion.svg,{width:`${R}px`,height:`${V}px`,viewBox:`0 0 ${R} ${V}`,direction:"ltr",ref:it,children:e.jsxRuntimeExports.jsxs("g",{transform:`translate(${a.left},${a.top})`,children:[e.jsxRuntimeExports.jsxs("g",{children:[bt.map((t,E)=>e.jsxRuntimeExports.jsxs("g",{children:[e.jsxRuntimeExports.jsx("line",{y1:i(t),y2:i(t),x1:-15,x2:-20,style:{stroke:d,strokeWidth:1,...o?.yAxis?.gridLines||{}},className:l?.yAxis?.gridLines}),e.jsxRuntimeExports.jsx("text",{x:-25,y:i(t),dy:"0.33em",className:B.cnExports.cn("text-xs",l?.yAxis?.labels),style:{textAnchor:"end",fill:d,...o?.yAxis?.labels||{}},children:at.numberFormattingFunction(t,A,H,et,W)})]},E)),e.jsxRuntimeExports.jsx(ht.Axis,{y1:0,y2:g,x1:-15,x2:-15,classNames:{axis:l?.xAxis?.axis},styles:{axis:{stroke:d,...o?.xAxis?.axis||{}}}}),e.jsxRuntimeExports.jsx(ft.AxisTitle,{x:10-a.left,y:g/2,style:{fill:d,...o?.yAxis?.title||{}},className:l?.yAxis?.title,text:n[0].length>100?`${n[0].substring(0,100)}...`:n[0],rotate90:!0})]}),e.jsxRuntimeExports.jsxs("g",{children:[vt.map((t,E)=>e.jsxRuntimeExports.jsxs("g",{children:[e.jsxRuntimeExports.jsx("line",{y1:c(t),y2:c(t),x1:m+15,x2:m+20,style:{stroke:p,strokeWidth:1,...o?.yAxis?.gridLines||{}},className:l?.yAxis?.gridLines}),e.jsxRuntimeExports.jsx("text",{x:m+25,y:c(t),dy:"0.33em",dx:-2,style:{textAnchor:"start",fill:p,...o?.yAxis?.labels||{}},className:B.cnExports.cn("text-xs",l?.yAxis?.labels),children:at.numberFormattingFunction(t,A,H,X,tt)})]},E)),e.jsxRuntimeExports.jsx(ht.Axis,{y1:0,y2:g,x1:m+15,x2:m+15,classNames:{axis:l?.xAxis?.axis},styles:{axis:{stroke:p,...o?.xAxis?.axis||{}}}}),e.jsxRuntimeExports.jsx(ft.AxisTitle,{x:m+a.right-15,y:g/2,style:{fill:p,...o?.yAxis?.title||{}},className:l?.yAxis?.title,text:n[1].length>100?`${n[1].substring(0,100)}...`:n[1],rotate90:!0})]}),e.jsxRuntimeExports.jsx(ht.Axis,{y1:j?i(0):g,y2:j?i(0):g,x1:-15,x2:m+15,classNames:{axis:l?.xAxis?.axis},styles:{axis:o?.xAxis?.axis}}),I.filter(t=>t.position==="before").map(t=>t.layer),e.jsxRuntimeExports.jsxs(Ct.AnimatePresence,{children:[s.map((t,E)=>e.jsxRuntimeExports.jsxs(q.motion.g,{className:"undp-viz-g-with-hover",opacity:.85,onMouseEnter:f=>{C(t),u(f.clientY),k(f.clientX),D?.(t)},onClick:()=>{(v||h)&&(gt.isEqual(N,t)&&Q?(T(void 0),v?.(void 0)):(T(t),v?.(t)))},onMouseMove:f=>{C(t),u(f.clientY),k(f.clientX)},onMouseLeave:()=>{C(void 0),k(void 0),u(void 0),D?.(void 0)},children:[e.jsxRuntimeExports.jsx(q.motion.rect,{variants:{initial:{attrY:i(0),height:0,opacity:1},whileInView:{attrY:t.bar?t.bar>0?i(t.bar):i(0):0,height:t.bar?Math.abs(i(t.bar)-i(0)):0,opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:M?"whileInView":"initial",exit:{attrY:i(0),height:0,opacity:0,transition:{duration:r.duration}},x:x(`${E}`),width:x.bandwidth(),style:{fill:d}}),_&&!pt.checkIfNullOrUndefined(t.bar)?e.jsxRuntimeExports.jsx(q.motion.text,{x:x(`${t.id}`)+x.bandwidth()/2,exit:{attrY:i(0),opacity:0,transition:{duration:r.duration}},variants:{initial:{attrY:i(0),opacity:0},whileInView:{attrY:i(t.bar||0),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:M?"whileInView":"initial",style:{fill:d,textAnchor:"middle",...o?.graphObjectValues||{}},className:B.cnExports.cn("graph-value text-sm",l?.graphObjectValues),dy:t.bar?t.bar>=0?"-5px":"1em":"-5px",children:at.numberFormattingFunction(t.bar,A,H,et,W)}):null,J?e.jsxRuntimeExports.jsx(At.XAxesLabels,{value:`${t.label}`.length<K?`${t.label}`:`${`${t.label}`.substring(0,K)}...`,y:g+5,x:x(`${t.id}`),width:x.bandwidth(),height:a.bottom,style:o?.xAxis?.labels,className:l?.xAxis?.labels,alignment:"top",animate:r,isInView:M}):null]},t.label)),e.jsxRuntimeExports.jsx(q.motion.path,{exit:{opacity:0,transition:{duration:r.duration}},variants:{initial:{d:dt(s.map(t=>({...t,line:0}))),opacity:0},whileInView:{d:dt(s),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:M?"whileInView":"initial",style:{stroke:p,fill:"none",strokeWidth:2}}),s.map((t,E)=>e.jsxRuntimeExports.jsx("g",{children:pt.checkIfNullOrUndefined(t.line)?null:e.jsxRuntimeExports.jsxs("g",{onMouseEnter:f=>{C(t),u(f.clientY),k(f.clientX),D?.(t)},onClick:()=>{(v||h)&&(gt.isEqual(N,t)&&Q?(T(void 0),v?.(void 0)):(T(t),v?.(t)))},onMouseMove:f=>{C(t),u(f.clientY),k(f.clientX)},onMouseLeave:()=>{C(void 0),k(void 0),u(void 0),D?.(void 0)},children:[e.jsxRuntimeExports.jsx(q.motion.circle,{exit:{cy:c(0),opacity:0,transition:{duration:r.duration}},variants:{initial:{cy:c(0),opacity:0},whileInView:{cy:c(t.line),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:M?"whileInView":"initial",cx:x(t.id)+x.bandwidth()/2,r:m/s.length<5?0:m/s.length<20?2:4,style:{fill:p}}),_?e.jsxRuntimeExports.jsx(q.motion.text,{x:x(`${t.id}`)+x.bandwidth()/2,exit:{y:c(0),opacity:0,transition:{duration:r.duration}},style:{fill:p,textAnchor:"middle",...o?.graphObjectValues||{}},variants:{initial:{y:c(0),opacity:0},whileInView:{y:c(t.line),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:M?"whileInView":"initial",className:B.cnExports.cn("graph-value text-sm",l?.graphObjectValues),dy:"-5px",children:at.numberFormattingFunction(t.line,A,H,X,tt)}):null]})},E))]}),I.filter(t=>t.position==="after").map(t=>t.layer)]})}),st&&b&&nt&&rt?e.jsxRuntimeExports.jsx(Et.Tooltip,{data:st,body:b,xPos:nt,yPos:rt,backgroundStyle:o?.tooltip,className:l?.tooltip}):null,h&&N!==void 0?e.jsxRuntimeExports.jsx(wt.ModalExports.Modal,{open:N!==void 0,onClose:()=>{T(void 0)},children:e.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof h=="string"?{__html:Rt.string2HTML(h,N)}:void 0,children:typeof h=="function"?h(N):null})}):null]})}function It(xt){const{data:S,graphTitle:R,sources:V,graphDescription:d,height:p,width:n,footNote:j,padding:G,lineColor:U=lt.Colors.light.categoricalColors.colors[1],barColor:z=lt.Colors.light.categoricalColors.colors[0],sameAxes:ct=!1,backgroundColor:b=!1,leftMargin:_=80,rightMargin:D=80,topMargin:ut=20,bottomMargin:K=25,lineAxisTitle:J="Line chart",barAxisTitle:v="Bar graph",tooltip:Q,relativeHeight:h,onSeriesMouseOver:Z,graphID:tt,graphDownload:W=!1,dataDownload:X=!1,barPadding:et=.25,truncateBy:F=999,showLabels:o=!0,onSeriesMouseClick:l,language:r="en",colorLegendTitle:H,minHeight:I=0,theme:A="light",ariaLabel:it,resetSelectionOnDoubleClick:M=!0,detailsOnClick:mt,showValues:st=!0,noOfTicks:C=5,lineSuffix:N="",barSuffix:T="",linePrefix:nt="",barPrefix:k="",curveType:rt="curve",styles:u,classNames:a,animate:m=!1,precision:g=2,customLayers:s=[],naLabel:x="NA"}=xt,[w,Y]=y.useState(0),[L,O]=y.useState(0),$=y.useRef(null),P=y.useRef(null);return y.useEffect(()=>{const i=new ResizeObserver(c=>{Y(n||c[0].target.clientWidth||620),O(p||c[0].target.clientHeight||480)});return $.current&&(O($.current.clientHeight||480),Y($.current.clientWidth||620),n||i.observe($.current)),()=>i.disconnect()},[n,p]),e.jsxRuntimeExports.jsx("div",{className:`${A||"light"} flex  ${n?"w-fit grow-0":"w-full grow"}`,dir:r==="he"||r==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:B.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 ${r||"en"}`,a?.graphContainer),style:{...u?.graphContainer||{},...b&&b!==!0?{backgroundColor:b}:{}},id:tt,ref:P,"aria-label":it||`${R?`The graph shows ${R}. `:""}This is a pareto chart that shows a variable as bars and another as line chart.${d?` ${d}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:b?G||"1rem":G||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[R||d||W||X?e.jsxRuntimeExports.jsx(kt.GraphHeader,{styles:{title:u?.title,description:u?.description},classNames:{title:a?.title,description:a?.description},graphTitle:R,graphDescription:d,width:n,graphDownload:W?P.current:void 0,dataDownload:X?S.map(i=>i.data).filter(i=>i!==void 0).length>0?S.map(i=>i.data).filter(i=>i!==void 0):S.filter(i=>i!==void 0):null}):null,e.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:S.length===0?e.jsxRuntimeExports.jsx(qt.EmptyState,{}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx($t.ColorLegend,{colorDomain:[v,J],colors:[z||lt.Colors[A].categoricalColors.colors[0],U||lt.Colors[A].categoricalColors.colors[1]],colorLegendTitle:H,showNAColor:!1}),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:$,"aria-label":"Graph area",children:(n||w)&&(p||L)?e.jsxRuntimeExports.jsx(St,{data:S,sameAxes:ct,lineColor:U,barColor:z,width:n||w,height:Math.max(I,p||(h?I?(n||w)*h>I?(n||w)*h:I:(n||w)*h:L)),truncateBy:F,leftMargin:_,rightMargin:D,topMargin:ut,bottomMargin:K,axisTitles:[v,J],tooltip:Q,onSeriesMouseOver:Z,barPadding:et,showLabels:o,onSeriesMouseClick:l,resetSelectionOnDoubleClick:M,detailsOnClick:mt,noOfTicks:C,lineSuffix:N,barSuffix:T,linePrefix:nt,barPrefix:k,curveType:rt,showValues:st,styles:u,classNames:a,animate:m===!0?{duration:.5,once:!0,amount:.5}:m||{duration:0,once:!0,amount:0},precision:g,customLayers:s,naLabel:x}):null})]})}),V||j?e.jsxRuntimeExports.jsx(Nt.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},classNames:{footnote:a?.footnote,source:a?.source},sources:V,footNote:j,width:n}):null]})})})})}exports.ParetoChart=It;
+import { j as t, m as R } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as di, useState as B, useEffect as wi } from "react";
+import { i as fi } from "./index-27yTRcko.js";
+import { X as ji } from "./Modal-CUU6ZK3U.js";
+import { n as ni } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Ai } from "./Tooltip-DyM5snqx.js";
+import { s as Mi } from "./string2HTML-CWHGfz_d.js";
+import { c as hi } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { A as ui } from "./Axis-Ddg-seDi.js";
+import { A as gi } from "./AxisTitle-BmHLMRJZ.js";
+import { X as Ni } from "./XAxesLabels-DQFo_z2R.js";
+import { u as ki } from "./use-in-view-BAHrBy6b.js";
+import { b as $i } from "./band-BEjh2CHI.js";
+import { a as yi } from "./linear-DUdu7l2G.js";
+import { l as Ci, c as Ii } from "./line-CPfhohvF.js";
+import { c as Li, s as Ti, a as Si, m as Vi } from "./step-BrDul-H4.js";
+import { m as D } from "./proxy-DJxJg1kD.js";
+import { A as Oi } from "./index-BxAUvrua.js";
+import { GraphFooter as Pi } from "./GraphFooter.js";
+import { GraphHeader as Di } from "./GraphHeader.js";
+import { ColorLegend as Yi } from "./ColorLegend.js";
+import { Colors as oi } from "./Colors.js";
+import { E as Hi } from "./EmptyState-DdTp-Mdn.js";
+function Xi(li) {
+  const {
+    data: L,
+    width: A,
+    height: Y,
+    barColor: p,
+    lineColor: u,
+    axisTitles: s,
+    sameAxes: y,
+    rightMargin: z,
+    leftMargin: _,
+    topMargin: q,
+    bottomMargin: ci,
+    tooltip: v,
+    showValues: U,
+    onSeriesMouseOver: H,
+    barPadding: mi,
+    truncateBy: J,
+    showLabels: K,
+    onSeriesMouseClick: b,
+    resetSelectionOnDoubleClick: Q,
+    detailsOnClick: d,
+    noOfTicks: Z,
+    lineSuffix: ii,
+    barSuffix: F,
+    linePrefix: G,
+    barPrefix: ti,
+    curveType: X,
+    styles: o,
+    classNames: l,
+    animate: r,
+    precision: E,
+    customLayers: T,
+    naLabel: M
+  } = li, ei = di(null), N = ki(ei, {
+    once: r.once,
+    amount: r.amount
+  }), xi = X === "linear" ? Ii : X === "step" ? Li : X === "stepAfter" ? Ti : X === "stepBefore" ? Si : Vi, [ai, k] = B(void 0), [$, S] = B(void 0), [si, C] = B(void 0), [ri, x] = B(void 0), n = {
+    top: q,
+    bottom: ci,
+    left: _ + 50,
+    right: z + 65
+  }, h = A - n.left - n.right, f = Y - n.top - n.bottom, a = L.map((i, j) => ({ ...i, id: `${j}` })), c = $i().domain(a.map((i) => `${i.id}`)).range([0, h]).paddingInner(mi), w = Math.min(...a.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.min(...a.map((i) => i.bar).filter((i) => i != null)) > 0 ? 0 : Math.min(...a.map((i) => i.bar).filter((i) => i != null)) : 0, W = Math.min(...a.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.min(...a.map((i) => i.line).filter((i) => i != null)) > 0 ? 0 : Math.min(...a.map((i) => i.line).filter((i) => i != null)) : 0, V = Math.max(...a.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.max(...a.map((i) => i.bar).filter((i) => i != null)) : 0, O = Math.max(...a.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.max(...a.map((i) => i.line).filter((i) => i != null)) : 0, I = w < W ? w : W, P = V > O ? V : O, e = yi().domain([
+    y ? I : w,
+    y ? P > 0 ? P : 0 : V > 0 ? V : 0
+  ]).range([f, 0]).nice(), m = yi().domain([
+    y ? I : W,
+    y ? P > 0 ? P : 0 : O > 0 ? O : 0
+  ]).range([f, 0]).nice(), pi = Ci().defined((i) => !hi(i.line)).x((i) => c(`${i.id}`) + c.bandwidth() / 2).y((i) => m(i.line)).curve(xi), vi = e.ticks(Z), bi = m.ticks(Z);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      D.svg,
+      {
+        width: `${A}px`,
+        height: `${Y}px`,
+        viewBox: `0 0 ${A} ${Y}`,
+        direction: "ltr",
+        ref: ei,
+        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${n.left},${n.top})`, children: [
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            vi.map((i, j) => /* @__PURE__ */ t.jsxs("g", { children: [
+              /* @__PURE__ */ t.jsx(
+                "line",
+                {
+                  y1: e(i),
+                  y2: e(i),
+                  x1: -15,
+                  x2: -20,
+                  style: {
+                    stroke: p,
+                    strokeWidth: 1,
+                    ...o?.yAxis?.gridLines || {}
+                  },
+                  className: l?.yAxis?.gridLines
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                "text",
+                {
+                  x: -25,
+                  y: e(i),
+                  dy: "0.33em",
+                  className: R("text-xs", l?.yAxis?.labels),
+                  style: {
+                    textAnchor: "end",
+                    fill: p,
+                    ...o?.yAxis?.labels || {}
+                  },
+                  children: ni(i, M, E, ti, F)
+                }
+              )
+            ] }, j)),
+            /* @__PURE__ */ t.jsx(
+              ui,
+              {
+                y1: 0,
+                y2: f,
+                x1: -15,
+                x2: -15,
+                classNames: { axis: l?.xAxis?.axis },
+                styles: { axis: { stroke: p, ...o?.xAxis?.axis || {} } }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              gi,
+              {
+                x: 10 - n.left,
+                y: f / 2,
+                style: { fill: p, ...o?.yAxis?.title || {} },
+                className: l?.yAxis?.title,
+                text: s[0].length > 100 ? `${s[0].substring(0, 100)}...` : s[0],
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            bi.map((i, j) => /* @__PURE__ */ t.jsxs("g", { children: [
+              /* @__PURE__ */ t.jsx(
+                "line",
+                {
+                  y1: m(i),
+                  y2: m(i),
+                  x1: h + 15,
+                  x2: h + 20,
+                  style: {
+                    stroke: u,
+                    strokeWidth: 1,
+                    ...o?.yAxis?.gridLines || {}
+                  },
+                  className: l?.yAxis?.gridLines
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                "text",
+                {
+                  x: h + 25,
+                  y: m(i),
+                  dy: "0.33em",
+                  dx: -2,
+                  style: {
+                    textAnchor: "start",
+                    fill: u,
+                    ...o?.yAxis?.labels || {}
+                  },
+                  className: R("text-xs", l?.yAxis?.labels),
+                  children: ni(i, M, E, G, ii)
+                }
+              )
+            ] }, j)),
+            /* @__PURE__ */ t.jsx(
+              ui,
+              {
+                y1: 0,
+                y2: f,
+                x1: h + 15,
+                x2: h + 15,
+                classNames: { axis: l?.xAxis?.axis },
+                styles: { axis: { stroke: u, ...o?.xAxis?.axis || {} } }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              gi,
+              {
+                x: h + n.right - 15,
+                y: f / 2,
+                style: { fill: u, ...o?.yAxis?.title || {} },
+                className: l?.yAxis?.title,
+                text: s[1].length > 100 ? `${s[1].substring(0, 100)}...` : s[1],
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            ui,
+            {
+              y1: y ? e(0) : f,
+              y2: y ? e(0) : f,
+              x1: -15,
+              x2: h + 15,
+              classNames: { axis: l?.xAxis?.axis },
+              styles: { axis: o?.xAxis?.axis }
+            }
+          ),
+          T.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ t.jsxs(Oi, { children: [
+            a.map((i, j) => /* @__PURE__ */ t.jsxs(
+              D.g,
+              {
+                className: "undp-viz-g-with-hover",
+                opacity: 0.85,
+                onMouseEnter: (g) => {
+                  k(i), x(g.clientY), C(g.clientX), H?.(i);
+                },
+                onClick: () => {
+                  (b || d) && (fi($, i) && Q ? (S(void 0), b?.(void 0)) : (S(i), b?.(i)));
+                },
+                onMouseMove: (g) => {
+                  k(i), x(g.clientY), C(g.clientX);
+                },
+                onMouseLeave: () => {
+                  k(void 0), C(void 0), x(void 0), H?.(void 0);
+                },
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    D.rect,
+                    {
+                      variants: {
+                        initial: {
+                          attrY: e(0),
+                          height: 0,
+                          opacity: 1
+                        },
+                        whileInView: {
+                          attrY: i.bar ? i.bar > 0 ? e(i.bar) : e(0) : 0,
+                          height: i.bar ? Math.abs(e(i.bar) - e(0)) : 0,
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      exit: {
+                        attrY: e(0),
+                        height: 0,
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      x: c(`${j}`),
+                      width: c.bandwidth(),
+                      style: { fill: p }
+                    }
+                  ),
+                  U && !hi(i.bar) ? /* @__PURE__ */ t.jsx(
+                    D.text,
+                    {
+                      x: c(`${i.id}`) + c.bandwidth() / 2,
+                      exit: {
+                        attrY: e(0),
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      variants: {
+                        initial: {
+                          attrY: e(0),
+                          opacity: 0
+                        },
+                        whileInView: {
+                          attrY: e(i.bar || 0),
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      style: {
+                        fill: p,
+                        textAnchor: "middle",
+                        ...o?.graphObjectValues || {}
+                      },
+                      className: R("graph-value text-sm", l?.graphObjectValues),
+                      dy: i.bar ? i.bar >= 0 ? "-5px" : "1em" : "-5px",
+                      children: ni(i.bar, M, E, ti, F)
+                    }
+                  ) : null,
+                  K ? /* @__PURE__ */ t.jsx(
+                    Ni,
+                    {
+                      value: `${i.label}`.length < J ? `${i.label}` : `${`${i.label}`.substring(0, J)}...`,
+                      y: f + 5,
+                      x: c(`${i.id}`),
+                      width: c.bandwidth(),
+                      height: n.bottom,
+                      style: o?.xAxis?.labels,
+                      className: l?.xAxis?.labels,
+                      alignment: "top",
+                      animate: r,
+                      isInView: N
+                    }
+                  ) : null
+                ]
+              },
+              i.label
+            )),
+            /* @__PURE__ */ t.jsx(
+              D.path,
+              {
+                exit: {
+                  opacity: 0,
+                  transition: { duration: r.duration }
+                },
+                variants: {
+                  initial: {
+                    d: pi(a.map((i) => ({ ...i, line: 0 }))),
+                    opacity: 0
+                  },
+                  whileInView: {
+                    d: pi(a),
+                    opacity: 1,
+                    transition: { duration: r.duration }
+                  }
+                },
+                initial: "initial",
+                animate: N ? "whileInView" : "initial",
+                style: {
+                  stroke: u,
+                  fill: "none",
+                  strokeWidth: 2
+                }
+              }
+            ),
+            a.map((i, j) => /* @__PURE__ */ t.jsx("g", { children: hi(i.line) ? null : /* @__PURE__ */ t.jsxs(
+              "g",
+              {
+                onMouseEnter: (g) => {
+                  k(i), x(g.clientY), C(g.clientX), H?.(i);
+                },
+                onClick: () => {
+                  (b || d) && (fi($, i) && Q ? (S(void 0), b?.(void 0)) : (S(i), b?.(i)));
+                },
+                onMouseMove: (g) => {
+                  k(i), x(g.clientY), C(g.clientX);
+                },
+                onMouseLeave: () => {
+                  k(void 0), C(void 0), x(void 0), H?.(void 0);
+                },
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    D.circle,
+                    {
+                      exit: {
+                        cy: m(0),
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      variants: {
+                        initial: {
+                          cy: m(0),
+                          opacity: 0
+                        },
+                        whileInView: {
+                          cy: m(i.line),
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      cx: c(i.id) + c.bandwidth() / 2,
+                      r: h / a.length < 5 ? 0 : h / a.length < 20 ? 2 : 4,
+                      style: { fill: u }
+                    }
+                  ),
+                  U ? /* @__PURE__ */ t.jsx(
+                    D.text,
+                    {
+                      x: c(`${i.id}`) + c.bandwidth() / 2,
+                      exit: {
+                        y: m(0),
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      style: {
+                        fill: u,
+                        textAnchor: "middle",
+                        ...o?.graphObjectValues || {}
+                      },
+                      variants: {
+                        initial: {
+                          y: m(0),
+                          opacity: 0
+                        },
+                        whileInView: {
+                          y: m(i.line),
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      className: R("graph-value text-sm", l?.graphObjectValues),
+                      dy: "-5px",
+                      children: ni(
+                        i.line,
+                        M,
+                        E,
+                        G,
+                        ii
+                      )
+                    }
+                  ) : null
+                ]
+              }
+            ) }, j))
+          ] }),
+          T.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    ai && v && si && ri ? /* @__PURE__ */ t.jsx(
+      Ai,
+      {
+        data: ai,
+        body: v,
+        xPos: si,
+        yPos: ri,
+        backgroundStyle: o?.tooltip,
+        className: l?.tooltip
+      }
+    ) : null,
+    d && $ !== void 0 ? /* @__PURE__ */ t.jsx(
+      ji,
+      {
+        open: $ !== void 0,
+        onClose: () => {
+          S(void 0);
+        },
+        children: /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof d == "string" ? { __html: Mi(d, $) } : void 0,
+            children: typeof d == "function" ? d($) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function ct(li) {
+  const {
+    data: L,
+    graphTitle: A,
+    sources: Y,
+    graphDescription: p,
+    height: u,
+    width: s,
+    footNote: y,
+    padding: z,
+    lineColor: _ = oi.light.categoricalColors.colors[1],
+    barColor: q = oi.light.categoricalColors.colors[0],
+    sameAxes: ci = !1,
+    backgroundColor: v = !1,
+    leftMargin: U = 80,
+    rightMargin: H = 80,
+    topMargin: mi = 20,
+    bottomMargin: J = 25,
+    lineAxisTitle: K = "Line chart",
+    barAxisTitle: b = "Bar graph",
+    tooltip: Q,
+    relativeHeight: d,
+    onSeriesMouseOver: Z,
+    graphID: ii,
+    graphDownload: F = !1,
+    dataDownload: G = !1,
+    barPadding: ti = 0.25,
+    truncateBy: X = 999,
+    showLabels: o = !0,
+    onSeriesMouseClick: l,
+    language: r = "en",
+    colorLegendTitle: E,
+    minHeight: T = 0,
+    theme: M = "light",
+    ariaLabel: ei,
+    resetSelectionOnDoubleClick: N = !0,
+    detailsOnClick: xi,
+    showValues: ai = !0,
+    noOfTicks: k = 5,
+    lineSuffix: $ = "",
+    barSuffix: S = "",
+    linePrefix: si = "",
+    barPrefix: C = "",
+    curveType: ri = "curve",
+    styles: x,
+    classNames: n,
+    animate: h = !1,
+    precision: f = 2,
+    customLayers: a = [],
+    naLabel: c = "NA"
+  } = li, [w, W] = B(0), [V, O] = B(0), I = di(null), P = di(null);
+  return wi(() => {
+    const e = new ResizeObserver((m) => {
+      W(s || m[0].target.clientWidth || 620), O(u || m[0].target.clientHeight || 480);
+    });
+    return I.current && (O(I.current.clientHeight || 480), W(I.current.clientWidth || 620), s || e.observe(I.current)), () => e.disconnect();
+  }, [s, u]), /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `${M || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: r === "he" || r === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: R(
+            `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${r || "en"}`,
+            n?.graphContainer
+          ),
+          style: {
+            ...x?.graphContainer || {},
+            ...v && v !== !0 ? { backgroundColor: v } : {}
+          },
+          id: ii,
+          ref: P,
+          "aria-label": ei || `${A ? `The graph shows ${A}. ` : ""}This is a pareto chart that shows a variable as bars and another as line chart.${p ? ` ${p}` : ""}`,
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: v ? z || "1rem" : z || 0 },
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                A || p || F || G ? /* @__PURE__ */ t.jsx(
+                  Di,
+                  {
+                    styles: {
+                      title: x?.title,
+                      description: x?.description
+                    },
+                    classNames: {
+                      title: n?.title,
+                      description: n?.description
+                    },
+                    graphTitle: A,
+                    graphDescription: p,
+                    width: s,
+                    graphDownload: F ? P.current : void 0,
+                    dataDownload: G ? L.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? L.map((e) => e.data).filter((e) => e !== void 0) : L.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: L.length === 0 ? /* @__PURE__ */ t.jsx(Hi, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    Yi,
+                    {
+                      colorDomain: [b, K],
+                      colors: [
+                        q || oi[M].categoricalColors.colors[0],
+                        _ || oi[M].categoricalColors.colors[1]
+                      ],
+                      colorLegendTitle: E,
+                      showNAColor: !1
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center leading-0",
+                      ref: I,
+                      "aria-label": "Graph area",
+                      children: (s || w) && (u || V) ? /* @__PURE__ */ t.jsx(
+                        Xi,
+                        {
+                          data: L,
+                          sameAxes: ci,
+                          lineColor: _,
+                          barColor: q,
+                          width: s || w,
+                          height: Math.max(
+                            T,
+                            u || (d ? T ? (s || w) * d > T ? (s || w) * d : T : (s || w) * d : V)
+                          ),
+                          truncateBy: X,
+                          leftMargin: U,
+                          rightMargin: H,
+                          topMargin: mi,
+                          bottomMargin: J,
+                          axisTitles: [b, K],
+                          tooltip: Q,
+                          onSeriesMouseOver: Z,
+                          barPadding: ti,
+                          showLabels: o,
+                          onSeriesMouseClick: l,
+                          resetSelectionOnDoubleClick: N,
+                          detailsOnClick: xi,
+                          noOfTicks: k,
+                          lineSuffix: $,
+                          barSuffix: S,
+                          linePrefix: si,
+                          barPrefix: C,
+                          curveType: ri,
+                          showValues: ai,
+                          styles: x,
+                          classNames: n,
+                          animate: h === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : h || { duration: 0, once: !0, amount: 0 },
+                          precision: f,
+                          customLayers: a,
+                          naLabel: c
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                Y || y ? /* @__PURE__ */ t.jsx(
+                  Pi,
+                  {
+                    styles: { footnote: x?.footnote, source: x?.source },
+                    classNames: {
+                      footnote: n?.footnote,
+                      source: n?.source
+                    },
+                    sources: Y,
+                    footNote: y,
+                    width: s
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  ct as ParetoChart
+};
 //# sourceMappingURL=ParetoChart.js.map