1mpacto-react-ui 2.0.20 → 2.0.22

package/dist/components/Chart/DoughnutChart.mjs

@@ -1,125 +1,122 @@
-import { jsxs as L, jsx as A } from "react/jsx-runtime";
+import { jsxs as H, jsx as A } from "react/jsx-runtime";
 import { Doughnut as T } from "react-chartjs-2";
-import { Chart as R, CategoryScale as F, LinearScale as M, PointElement as Y, LineElement as B, ArcElement as O, Title as k, Tooltip as N, Legend as P } from "chart.js";
-R.register(F, M, Y, B, O, k, N, P);
-const j = (f, n) => {
-  var m, v, x, y;
-  const C = f.getVisibleDatasetCount(), g = f.getDatasetMeta(C - 1).data.at(0);
-  if (g) {
-    const { innerRadius: $ } = g.getProps(["innerRadius"]), { ctx: s } = f, w = () => {
-      var u;
-      const c = [].concat(n), d = c.length, o = s.font;
-      let r = 0, p = 0, l;
-      for (l = 0; l < d; ++l)
-        s.font = c[l].font, r = Math.max(s.measureText(c[l].text).width, r), p += (u = c[l].font) == null ? void 0 : u.lineHeight;
-      return s.font = o, {
-        height: p,
-        width: r
+import { Chart as L, CategoryScale as R, LinearScale as F, PointElement as M, LineElement as Y, ArcElement as O, Title as k, Tooltip as N, Legend as P } from "chart.js";
+L.register(R, F, M, Y, O, k, N, P);
+const j = (d, e) => {
+  const I = d.getVisibleDatasetCount(), f = d.getDatasetMeta(I - 1).data.at(0);
+  if (f) {
+    const { innerRadius: m } = f.getProps(["innerRadius"]), { ctx: s } = d, v = () => {
+      const t = [].concat(e), o = t.length, r = s.font;
+      let p = 0, h = 0, l;
+      for (l = 0; l < o; ++l)
+        s.font = t[l].font, p = Math.max(s.measureText(t[l].text).width, p), h += t[l].font?.lineHeight;
+      return s.font = r, {
+        height: h,
+        width: p
       };
-    }, D = (c, d) => {
-      let o = document.createElement("div");
-      document.body.appendChild(o), o.style.fontSize = `${d}px`, o.style.position = "absolute", o.style.left = "-10", o.style.top = "-10", o.textContent = c;
-      const r = {
-        width: o.clientWidth,
-        height: o.clientHeight
+    }, g = (t, o) => {
+      let r = document.createElement("div");
+      document.body.appendChild(r), r.style.fontSize = `${o}px`, r.style.position = "absolute", r.style.left = "-10", r.style.top = "-10", r.textContent = t;
+      const p = {
+        width: r.clientWidth,
+        height: r.clientHeight
       };
-      return document.body.removeChild(o), o = null, r;
-    }, S = w(), b = parseFloat(parseFloat($).toFixed(2));
+      return document.body.removeChild(r), r = null, p;
+    }, b = v(), x = parseFloat(parseFloat(m).toFixed(2));
     s.textAlign = "center", s.textBaseline = "middle";
-    const I = (f.chartArea.left + f.chartArea.right) / 2, e = (f.chartArea.top + f.chartArea.bottom) / 2 - S.height / 2;
-    let t;
-    const z = n.length;
-    let E = 0;
-    for (t = 0; t < z; ++t) {
-      let c = (m = n[t].font) == null ? void 0 : m.size, d = (v = n[t].font) == null ? void 0 : v.lineHeight;
-      const o = typeof n[t].text == "number" ? n[t].text.toString() : n[t].text;
-      for (; D(o, c).width > b + (n[t].id === "value" ? 50 : 0); )
-        c -= 1, d = D(o, c).height;
-      o.length > 22 && d < 14 && (d = 18);
-      const r = e + d / 2 + E, p = typeof n[t].text == "number" ? new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(
-        n[t].text
-      ) : n[t].text;
-      let l = n[t].urlIconDesc ? "    " : "";
-      if (n[t].percentage !== void 0 ? l += `${n[t].percentage}% ${n[t].text}` : l += p, s.fillStyle = n[t].color, s.font = `${c < 10 ? 10 : c}px sans-serif`, E += d, n[t].percentage !== void 0 && n[t].urlIconDesc) {
-        const h = ((y = (x = n[t]) == null ? void 0 : x.percentage) == null ? void 0 : y.length) ?? 0, u = new Image();
-        u.src = n[t].urlIconDesc, s.drawImage(u, 45 - (h > 6 ? h + 2 : h - 2.5), r - 8, 16, 14);
+    const w = (d.chartArea.left + d.chartArea.right) / 2, E = (d.chartArea.top + d.chartArea.bottom) / 2 - b.height / 2;
+    let n;
+    const D = e.length;
+    let i = 0;
+    for (n = 0; n < D; ++n) {
+      let t = e[n].font?.size, o = e[n].font?.lineHeight;
+      const r = typeof e[n].text == "number" ? e[n].text.toString() : e[n].text;
+      for (; g(r, t).width > x + (e[n].id === "value" ? 50 : 0); )
+        t -= 1, o = g(r, t).height;
+      r.length > 22 && o < 14 && (o = 18);
+      const p = E + o / 2 + i, h = typeof e[n].text == "number" ? new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(
+        e[n].text
+      ) : e[n].text;
+      let l = e[n].urlIconDesc ? "    " : "";
+      if (e[n].percentage !== void 0 ? l += `${e[n].percentage}% ${e[n].text}` : l += h, s.fillStyle = e[n].color, s.font = `${t < 10 ? 10 : t}px sans-serif`, i += o, e[n].percentage !== void 0 && e[n].urlIconDesc) {
+        const u = e[n]?.percentage?.length ?? 0, c = new Image();
+        c.src = e[n].urlIconDesc, s.drawImage(c, 45 - (u > 6 ? u + 2 : u - 2.5), p - 8, 16, 14);
       }
-      s.fillText(l, I, r);
+      s.fillText(l, w, p);
     }
     s.restore(), s.save();
   }
 }, V = ({
-  labels: f,
-  data: n,
-  backgroundColor: C,
-  options: g = {},
+  labels: d,
+  data: e,
+  backgroundColor: I,
+  options: f = {},
   redraw: m,
-  widthInnerDoughnut: v,
-  innerLabels: x,
-  open: y = !0,
-  keyRemoveDataOpen: $ = "gap",
-  keyLabel: s = "title",
+  widthInnerDoughnut: s,
+  innerLabels: v,
+  open: g = !0,
+  keyRemoveDataOpen: b = "gap",
+  keyLabel: x = "title",
   keyValue: w = "originalValue",
-  keyBackground: D = "backgroundColor",
-  className: S
+  keyBackground: S = "backgroundColor",
+  className: E
 }) => {
-  const b = {
-    labels: f || n.map((i) => i[s]),
+  const n = {
+    labels: d || e.map((i) => i[x]),
     datasets: [
       {
-        data: n.map((i) => i[w]),
-        backgroundColor: C || n.map((i) => i[D])
+        data: e.map((i) => i[w]),
+        backgroundColor: I || e.map((i) => i[S])
       }
     ]
-  }, I = {
-    cutout: v,
+  }, D = {
+    cutout: s,
     animation: { duration: m ? 400 : 0 },
     plugins: {
       legend: { display: !1 },
       tooltip: {
         external(i) {
-          let e = document.getElementById("chartjs-tooltip");
-          e || (e = document.createElement("div"), e.id = "chartjs-tooltip", e.innerHTML = "<table></table>", document.body.appendChild(e));
-          const t = i.tooltip;
-          if (t.opacity === 0) {
-            e.style.opacity = "0";
+          let t = document.getElementById("chartjs-tooltip");
+          t || (t = document.createElement("div"), t.id = "chartjs-tooltip", t.innerHTML = "<table></table>", document.body.appendChild(t));
+          const o = i.tooltip;
+          if (o.opacity === 0) {
+            t.style.opacity = "0";
             return;
           }
-          e.classList.remove("above", "below", "no-transform"), t.yAlign ? e.classList.add(t.yAlign) : e.classList.add("no-transform");
-          const z = n.filter((r) => !r[s]), E = n.filter((r) => r[w] > 0 && r[w] < 1);
-          if (z.length === 1 && E.length === 1) return;
-          function c(r) {
-            return r.lines;
+          t.classList.remove("above", "below", "no-transform"), o.yAlign ? t.classList.add(o.yAlign) : t.classList.add("no-transform");
+          const r = e.filter((c) => !c[x]), p = e.filter((c) => c[w] > 0 && c[w] < 1);
+          if (r.length === 1 && p.length === 1) return;
+          function h(c) {
+            return c.lines;
           }
-          if (t.body) {
-            const r = t.title || [];
-            let p = t.body.map(c), l = "<thead>";
-            r.forEach((u) => {
+          if (o.body) {
+            const c = o.title || [];
+            let y = o.body.map(h), C = "<thead>";
+            c.forEach(($) => {
               let a = "";
-              a += "display: flex", a += "; justify-content: center", a += "; font-weight: 600", a += "; font-size: 12px", a += "; padding: 0px 14px", l += `<tr><span style="${a}">${u}</span></tr>`;
-            }), l += "</thead><tbody>", p.length > 1 && p[0][0] === p[1][0] && (p = [p[0]]), p.forEach((u) => {
+              a += "display: flex", a += "; justify-content: center", a += "; font-weight: 600", a += "; font-size: 12px", a += "; padding: 0px 14px", C += `<tr><span style="${a}">${$}</span></tr>`;
+            }), C += "</thead><tbody>", y.length > 1 && y[0][0] === y[1][0] && (y = [y[0]]), y.forEach(($) => {
               let a = "";
               a += "display: flex", a += "; justify-content: center", a += "; color: #0163C8", a += "; padding: 0px 14px", a += "; font-size: 12px";
-              const H = `<span style="${a}">${u}</span>`;
-              l += `<tr><td>${H}</td></tr>`;
-            }), l += "</tbody>";
-            const h = e.querySelector("table");
-            h && (h.innerHTML = l);
+              const B = `<span style="${a}">${$}</span>`;
+              C += `<tr><td>${B}</td></tr>`;
+            }), C += "</tbody>";
+            const z = t.querySelector("table");
+            z && (z.innerHTML = C);
           }
-          const d = i.chart.canvas.getBoundingClientRect(), o = d.top + window.pageYOffset + t.caretY;
-          e.style.opacity = "1", e.style.border = "solid 1px #0163C8", e.style.background = "white", e.style.height = "fit-content", e.style.borderRadius = "10px", e.style.position = "absolute", e.style.zIndex = "10", e.style.padding = "4px 0", e.style.left = `${d.left + window.pageXOffset + t.caretX - 80}px`, e.style.top = `${o > 300 && !y ? 280 : o}px`, e.style.pointerEvents = "none";
+          const l = i.chart.canvas.getBoundingClientRect(), u = l.top + window.pageYOffset + o.caretY;
+          t.style.opacity = "1", t.style.border = "solid 1px #0163C8", t.style.background = "white", t.style.height = "fit-content", t.style.borderRadius = "10px", t.style.position = "absolute", t.style.zIndex = "10", t.style.padding = "4px 0", t.style.left = `${l.left + window.pageXOffset + o.caretX - 80}px`, t.style.top = `${u > 300 && !g ? 280 : u}px`, t.style.pointerEvents = "none";
         },
         displayColors: !0,
         enabled: !1,
         callbacks: {
           title(i) {
-            const e = n[i[0].dataIndex];
-            return e == null ? void 0 : e[s];
+            return e[i[0].dataIndex]?.[x];
           },
           label(i) {
-            const e = n == null ? void 0 : n[i.dataIndex];
-            let t = "Nilai: ";
-            return e && (t += e.value), t;
+            const t = e?.[i.dataIndex];
+            let o = "Nilai: ";
+            return t && (o += t.value), o;
           }
         }
       }
@@ -130,27 +127,27 @@ const j = (f, n) => {
       }
     }
   };
-  return /* @__PURE__ */ L("div", { className: S ?? "", children: [
-    !y && /* @__PURE__ */ A(
+  return /* @__PURE__ */ H("div", { className: E ?? "", children: [
+    !g && /* @__PURE__ */ A(
       T,
       {
-        data: b,
+        data: n,
         redraw: m,
         plugins: [
           {
             id: "draw",
             beforeDraw(i) {
-              j(i, x);
+              j(i, v);
             }
           }
         ],
-        options: Object.keys(g).length > 1 ? g : I
+        options: Object.keys(f).length > 1 ? f : D
       }
     ),
-    y && /* @__PURE__ */ A(
+    g && /* @__PURE__ */ A(
       T,
       {
-        data: b,
+        data: n,
         redraw: m,
         plugins: [
           {
@@ -158,12 +155,12 @@ const j = (f, n) => {
             beforeDraw(i) {
               j(
                 i,
-                x.filter((e) => e.id !== $)
+                v.filter((t) => t.id !== b)
               );
             }
           }
         ],
-        options: Object.keys(g).length > 1 ? g : I
+        options: Object.keys(f).length > 1 ? f : D
       }
     )
   ] });

package/dist/components/Chart/GradientBarChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react/jsx-runtime"),y=require("chart.js"),x=require("react"),j=require("react-chartjs-2"),R=require("../../utils/common.cjs"),w=require("../PortalComponent/PortalComponent.cjs");y.Chart.register(y.CategoryScale,y.LinearScale,y.BarElement,y.Tooltip,y.PointElement,y.Filler,y.Tooltip);const E=a=>({chart:n,tooltip:s})=>{var C,g,B,l,f,S;const c={};if(s.opacity===0){a(D=>({...D,style:{...D.style,opacity:0,pointerEvents:"none"}}));return}if(!s.dataPoints||s.dataPoints.length===0)return;c.opacity="1",c.position="absolute",c.pointerEvents="none";const o=n.canvas.getBoundingClientRect();c.left=o.left+window.pageXOffset+s.caretX+"px",c.top=o.top+window.pageYOffset+s.caretY+"px";const d=((g=(C=s.dataPoints)==null?void 0:C[0])==null?void 0:g.label)??"",r=((l=(B=s.dataPoints)==null?void 0:B[0])==null?void 0:l.raw)??"",i=((S=(f=s.dataPoints)==null?void 0:f[0])==null?void 0:S.dataset.label)??"";a({dataset:i,label:d,value:r,style:c,dataPoints:s.dataPoints})},F={id:"labelplugin",afterDatasetsDraw(a){const{ctx:n,chartArea:{top:s,bottom:c}}=a;n.save(),a.data.datasets.forEach((o,d)=>{const r=a.getDatasetMeta(d);r.visible&&r.data.forEach((i,C)=>{const g=o.data[C]||0,B=o!=null&&o.setDigit?R.setDigit(String(g)):String(g);n.font="12px Lato",n.textAlign="center";let l,f=!1;typeof g=="number"&&g>=0?(n.textBaseline="bottom",n.fillStyle=(o==null?void 0:o.colorTextLabelPositive)||i.options.borderColor,l=i.y-5,l>s&&(f=!0)):(n.textBaseline="top",n.fillStyle=(o==null?void 0:o.colorTextLabelNegative)||i.options.borderColor,l=i.y+5,l<c&&(f=!0)),f&&n.fillText(B,i.x,l)})}),n.restore()}},O={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1}},scales:{y:{grace:"15%",position:"left",border:{display:!1,dash:[5,3],color:"#CFD8DC"},ticks:{callback:function(a){return R.setDigit(a)??0},font:{size:10,weight:"normal"},padding:10,color:"#898989"}},x:{grid:{display:!1},border:{dash:[5,3],color:"#CFD8DC"},ticks:{font:{size:10,weight:"normal"},color:"#898989"}}},interaction:{mode:"index",intersect:!1}},q=({data:a,classNameContainer:n,height:s,id:c,options:o,CustomTooltip:d})=>{const r=x.useRef(void 0),i=x.useRef(0),C=x.useRef(0),[g,B]=x.useState({dataset:"",label:"",value:0,style:{opacity:0,position:"absolute",left:0,bottom:0},dataPoints:[]}),l=x.useCallback(function({ctx:P,chartArea:t,scales:u,chartHeight:p,gradientFor:h,item:e}){let v=(u.y.getPixelForValue(0)-t.top)/p;v=v<0?0:v>1?1:v,r.current=P.createLinearGradient(0,t.top,0,p+t.top),h==="background"?(r.current.addColorStop(0,(e==null?void 0:e.colorBackgroundPositiveZero)||"#9FD2FF"),r.current.addColorStop(v,(e==null?void 0:e.colorBackgroundPositivePercentage)||"rgba(115, 235, 163, 0.1)"),r.current.addColorStop(v,(e==null?void 0:e.colorBackgroundNegativePercentage)||"rgba(235, 107, 107, 0.1)"),r.current.addColorStop(1,(e==null?void 0:e.colorBackgroundNegativeOne)||"#EB6B6B")):(r.current.addColorStop(v,(e==null?void 0:e.colorBorderPositive)||"#80CBC4"),r.current.addColorStop(v,(e==null?void 0:e.colorBorderNegative)||"#EB6B6B"))},[]),f=x.useCallback(function({ctx:P,chartArea:t,scales:u,gradientFor:p,item:h}){const e=t.right-t.left,b=t.bottom-t.top;return(!r.current||i.current!==e||C.current!==b)&&(i.current=e,C.current=b,l({ctx:P,chartArea:t,scales:u,chartHeight:b,gradientFor:p,item:h})),l({ctx:P,chartArea:t,scales:u,chartHeight:b,gradientFor:p,item:h}),r.current},[]),S=x.useMemo(()=>({...a,datasets:a.datasets.map(t=>({fill:!0,backgroundColor:function(u){const p=u.chart,{ctx:h,chartArea:e,scales:b}=p;if(e)return f({ctx:h,chartArea:e,scales:b,gradientFor:"background",item:t})},borderColor:function(u){const p=u.chart,{ctx:h,chartArea:e,scales:b}=p;if(e)return f({ctx:h,chartArea:e,scales:b,gradientFor:"border",item:t})},borderWidth:0,tension:0,pointRadius:0,pointHoverRadius:4,setDigit:!0,...t,data:t.data}))}),[a]),D=x.useMemo(()=>{const P={plugins:{tooltip:{enabled:!d,external:({chart:t,tooltip:u})=>d?E(B)({chart:t,tooltip:u}):void 0}}};return R.mergeObjects(O,P,o??{})},[o,d]);return k.jsxs("div",{id:c,className:n,style:{height:s||"300px"},children:[d&&k.jsx(w.default,{selector:"body",children:k.jsx(d,{...g})}),k.jsx(j.Bar,{data:S,options:D,plugins:[F]})]})};exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("react/jsx-runtime"),h=require("chart.js"),v=require("react"),m=require("react-chartjs-2"),D=require("../../utils/common.cjs"),j=require("../PortalComponent/PortalComponent.cjs");h.Chart.register(h.CategoryScale,h.LinearScale,h.BarElement,h.Tooltip,h.PointElement,h.Filler,h.Tooltip);const w=a=>({chart:r,tooltip:n})=>{const s={};if(n.opacity===0){a(y=>({...y,style:{...y.style,opacity:0,pointerEvents:"none"}}));return}if(!n.dataPoints||n.dataPoints.length===0)return;s.opacity="1",s.position="absolute",s.pointerEvents="none";const i=r.canvas.getBoundingClientRect();s.left=i.left+window.pageXOffset+n.caretX+"px",s.top=i.top+window.pageYOffset+n.caretY+"px";const d=n.dataPoints?.[0]?.label??"",o=n.dataPoints?.[0]?.raw??"",l=n.dataPoints?.[0]?.dataset.label??"";a({dataset:l,label:d,value:o,style:s,dataPoints:n.dataPoints})},E={id:"labelplugin",afterDatasetsDraw(a){const{ctx:r,chartArea:{top:n,bottom:s}}=a;r.save(),a.data.datasets.forEach((i,d)=>{const o=a.getDatasetMeta(d);o.visible&&o.data.forEach((l,y)=>{const C=i.data[y]||0,S=i?.setDigit?D.setDigit(String(C)):String(C);r.font="12px Lato",r.textAlign="center";let f,P=!1;typeof C=="number"&&C>=0?(r.textBaseline="bottom",r.fillStyle=i?.colorTextLabelPositive||l.options.borderColor,f=l.y-5,f>n&&(P=!0)):(r.textBaseline="top",r.fillStyle=i?.colorTextLabelNegative||l.options.borderColor,f=l.y+5,f<s&&(P=!0)),P&&r.fillText(S,l.x,f)})}),r.restore()}},F={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1}},scales:{y:{grace:"15%",position:"left",border:{display:!1,dash:[5,3],color:"#CFD8DC"},ticks:{callback:function(a){return D.setDigit(a)??0},font:{size:10,weight:"normal"},padding:10,color:"#898989"}},x:{grid:{display:!1},border:{dash:[5,3],color:"#CFD8DC"},ticks:{font:{size:10,weight:"normal"},color:"#898989"}}},interaction:{mode:"index",intersect:!1}},O=({data:a,classNameContainer:r,height:n,id:s,options:i,CustomTooltip:d})=>{const o=v.useRef(void 0),l=v.useRef(0),y=v.useRef(0),[C,S]=v.useState({dataset:"",label:"",value:0,style:{opacity:0,position:"absolute",left:0,bottom:0},dataPoints:[]}),f=v.useCallback(function({ctx:x,chartArea:t,scales:c,chartHeight:u,gradientFor:p,item:e}){let b=(c.y.getPixelForValue(0)-t.top)/u;b=b<0?0:b>1?1:b,o.current=x.createLinearGradient(0,t.top,0,u+t.top),p==="background"?(o.current.addColorStop(0,e?.colorBackgroundPositiveZero||"#9FD2FF"),o.current.addColorStop(b,e?.colorBackgroundPositivePercentage||"rgba(115, 235, 163, 0.1)"),o.current.addColorStop(b,e?.colorBackgroundNegativePercentage||"rgba(235, 107, 107, 0.1)"),o.current.addColorStop(1,e?.colorBackgroundNegativeOne||"#EB6B6B")):(o.current.addColorStop(b,e?.colorBorderPositive||"#80CBC4"),o.current.addColorStop(b,e?.colorBorderNegative||"#EB6B6B"))},[]),P=v.useCallback(function({ctx:x,chartArea:t,scales:c,gradientFor:u,item:p}){const e=t.right-t.left,g=t.bottom-t.top;return(!o.current||l.current!==e||y.current!==g)&&(l.current=e,y.current=g,f({ctx:x,chartArea:t,scales:c,chartHeight:g,gradientFor:u,item:p})),f({ctx:x,chartArea:t,scales:c,chartHeight:g,gradientFor:u,item:p}),o.current},[]),k=v.useMemo(()=>({...a,datasets:a.datasets.map(t=>({fill:!0,backgroundColor:function(c){const u=c.chart,{ctx:p,chartArea:e,scales:g}=u;if(e)return P({ctx:p,chartArea:e,scales:g,gradientFor:"background",item:t})},borderColor:function(c){const u=c.chart,{ctx:p,chartArea:e,scales:g}=u;if(e)return P({ctx:p,chartArea:e,scales:g,gradientFor:"border",item:t})},borderWidth:0,tension:0,pointRadius:0,pointHoverRadius:4,setDigit:!0,...t,data:t.data}))}),[a]),R=v.useMemo(()=>{const x={plugins:{tooltip:{enabled:!d,external:({chart:t,tooltip:c})=>d?w(S)({chart:t,tooltip:c}):void 0}}};return D.mergeObjects(F,x,i??{})},[i,d]);return B.jsxs("div",{id:s,className:r,style:{height:n||"300px"},children:[d&&B.jsx(j.default,{selector:"body",children:B.jsx(d,{...C})}),B.jsx(m.Bar,{data:k,options:R,plugins:[E]})]})};exports.default=O;

package/dist/components/Chart/GradientBarChart.mjs

@@ -1,48 +1,47 @@
-import { jsxs as w, jsx as k } from "react/jsx-runtime";
-import { Chart as E, CategoryScale as F, LinearScale as O, BarElement as L, Tooltip as D, PointElement as Z, Filler as N } from "chart.js";
-import v from "react";
-import { Bar as G } from "react-chartjs-2";
-import { mergeObjects as j, setDigit as R } from "../../utils/common.mjs";
-import H from "../PortalComponent/PortalComponent.mjs";
-E.register(F, O, L, D, Z, N, D);
-const M = (s) => ({ chart: n, tooltip: a }) => {
-  var C, f, x, l, p, B;
-  const i = {};
-  if (a.opacity === 0) {
-    s((S) => ({ ...S, style: { ...S.style, opacity: 0, pointerEvents: "none" } }));
+import { jsxs as R, jsx as m } from "react/jsx-runtime";
+import { Chart as w, CategoryScale as E, LinearScale as F, BarElement as O, Tooltip as B, PointElement as L, Filler as Z } from "chart.js";
+import y from "react";
+import { Bar as N } from "react-chartjs-2";
+import { mergeObjects as G, setDigit as S } from "../../utils/common.mjs";
+import j from "../PortalComponent/PortalComponent.mjs";
+w.register(E, F, O, B, L, Z, B);
+const H = (a) => ({ chart: r, tooltip: n }) => {
+  const s = {};
+  if (n.opacity === 0) {
+    a((h) => ({ ...h, style: { ...h.style, opacity: 0, pointerEvents: "none" } }));
     return;
   }
-  if (!a.dataPoints || a.dataPoints.length === 0)
+  if (!n.dataPoints || n.dataPoints.length === 0)
     return;
-  i.opacity = "1", i.position = "absolute", i.pointerEvents = "none";
-  const e = n.canvas.getBoundingClientRect();
-  i.left = e.left + window.pageXOffset + a.caretX + "px", i.top = e.top + window.pageYOffset + a.caretY + "px";
-  const u = ((f = (C = a.dataPoints) == null ? void 0 : C[0]) == null ? void 0 : f.label) ?? "", r = ((l = (x = a.dataPoints) == null ? void 0 : x[0]) == null ? void 0 : l.raw) ?? "", c = ((B = (p = a.dataPoints) == null ? void 0 : p[0]) == null ? void 0 : B.dataset.label) ?? "";
-  s({
-    dataset: c,
-    label: u,
-    value: r,
-    style: i,
-    dataPoints: a.dataPoints
+  s.opacity = "1", s.position = "absolute", s.pointerEvents = "none";
+  const i = r.canvas.getBoundingClientRect();
+  s.left = i.left + window.pageXOffset + n.caretX + "px", s.top = i.top + window.pageYOffset + n.caretY + "px";
+  const d = n.dataPoints?.[0]?.label ?? "", o = n.dataPoints?.[0]?.raw ?? "", l = n.dataPoints?.[0]?.dataset.label ?? "";
+  a({
+    dataset: l,
+    label: d,
+    value: o,
+    style: s,
+    dataPoints: n.dataPoints
   });
-}, z = {
+}, M = {
   id: "labelplugin",
-  afterDatasetsDraw(s) {
+  afterDatasetsDraw(a) {
     const {
-      ctx: n,
-      chartArea: { top: a, bottom: i }
-    } = s;
-    n.save(), s.data.datasets.forEach((e, u) => {
-      const r = s.getDatasetMeta(u);
-      r.visible && r.data.forEach((c, C) => {
-        const f = e.data[C] || 0, x = e != null && e.setDigit ? R(String(f)) : String(f);
-        n.font = "12px Lato", n.textAlign = "center";
-        let l, p = !1;
-        typeof f == "number" && f >= 0 ? (n.textBaseline = "bottom", n.fillStyle = (e == null ? void 0 : e.colorTextLabelPositive) || c.options.borderColor, l = c.y - 5, l > a && (p = !0)) : (n.textBaseline = "top", n.fillStyle = (e == null ? void 0 : e.colorTextLabelNegative) || c.options.borderColor, l = c.y + 5, l < i && (p = !0)), p && n.fillText(x, c.x, l);
+      ctx: r,
+      chartArea: { top: n, bottom: s }
+    } = a;
+    r.save(), a.data.datasets.forEach((i, d) => {
+      const o = a.getDatasetMeta(d);
+      o.visible && o.data.forEach((l, h) => {
+        const v = i.data[h] || 0, P = i?.setDigit ? S(String(v)) : String(v);
+        r.font = "12px Lato", r.textAlign = "center";
+        let p, C = !1;
+        typeof v == "number" && v >= 0 ? (r.textBaseline = "bottom", r.fillStyle = i?.colorTextLabelPositive || l.options.borderColor, p = l.y - 5, p > n && (C = !0)) : (r.textBaseline = "top", r.fillStyle = i?.colorTextLabelNegative || l.options.borderColor, p = l.y + 5, p < s && (C = !0)), C && r.fillText(P, l.x, p);
       });
-    }), n.restore();
+    }), r.restore();
   }
-}, T = {
+}, z = {
   responsive: !0,
   maintainAspectRatio: !1,
   plugins: {
@@ -56,8 +55,8 @@ const M = (s) => ({ chart: n, tooltip: a }) => {
       position: "left",
       border: { display: !1, dash: [5, 3], color: "#CFD8DC" },
       ticks: {
-        callback: function(s) {
-          return R(s) ?? 0;
+        callback: function(a) {
+          return S(a) ?? 0;
         },
         font: {
           size: 10,
@@ -85,51 +84,51 @@ const M = (s) => ({ chart: n, tooltip: a }) => {
     mode: "index",
     intersect: !1
   }
-}, K = ({ data: s, classNameContainer: n, height: a, id: i, options: e, CustomTooltip: u }) => {
-  const r = v.useRef(void 0), c = v.useRef(0), C = v.useRef(0), [f, x] = v.useState({
+}, J = ({ data: a, classNameContainer: r, height: n, id: s, options: i, CustomTooltip: d }) => {
+  const o = y.useRef(void 0), l = y.useRef(0), h = y.useRef(0), [v, P] = y.useState({
     dataset: "",
     label: "",
     value: 0,
     style: { opacity: 0, position: "absolute", left: 0, bottom: 0 },
     dataPoints: []
-  }), l = v.useCallback(function({
-    ctx: P,
+  }), p = y.useCallback(function({
+    ctx: x,
     chartArea: t,
-    scales: d,
-    chartHeight: g,
-    gradientFor: y,
-    item: o
+    scales: c,
+    chartHeight: u,
+    gradientFor: g,
+    item: e
   }) {
-    let h = (d.y.getPixelForValue(0) - t.top) / g;
-    h = h < 0 ? 0 : h > 1 ? 1 : h, r.current = P.createLinearGradient(0, t.top, 0, g + t.top), y === "background" ? (r.current.addColorStop(0, (o == null ? void 0 : o.colorBackgroundPositiveZero) || "#9FD2FF"), r.current.addColorStop(
-      h,
-      (o == null ? void 0 : o.colorBackgroundPositivePercentage) || "rgba(115, 235, 163, 0.1)"
-    ), r.current.addColorStop(
-      h,
-      (o == null ? void 0 : o.colorBackgroundNegativePercentage) || "rgba(235, 107, 107, 0.1)"
-    ), r.current.addColorStop(1, (o == null ? void 0 : o.colorBackgroundNegativeOne) || "#EB6B6B")) : (r.current.addColorStop(h, (o == null ? void 0 : o.colorBorderPositive) || "#80CBC4"), r.current.addColorStop(h, (o == null ? void 0 : o.colorBorderNegative) || "#EB6B6B"));
-  }, []), p = v.useCallback(function({
-    ctx: P,
+    let b = (c.y.getPixelForValue(0) - t.top) / u;
+    b = b < 0 ? 0 : b > 1 ? 1 : b, o.current = x.createLinearGradient(0, t.top, 0, u + t.top), g === "background" ? (o.current.addColorStop(0, e?.colorBackgroundPositiveZero || "#9FD2FF"), o.current.addColorStop(
+      b,
+      e?.colorBackgroundPositivePercentage || "rgba(115, 235, 163, 0.1)"
+    ), o.current.addColorStop(
+      b,
+      e?.colorBackgroundNegativePercentage || "rgba(235, 107, 107, 0.1)"
+    ), o.current.addColorStop(1, e?.colorBackgroundNegativeOne || "#EB6B6B")) : (o.current.addColorStop(b, e?.colorBorderPositive || "#80CBC4"), o.current.addColorStop(b, e?.colorBorderNegative || "#EB6B6B"));
+  }, []), C = y.useCallback(function({
+    ctx: x,
     chartArea: t,
-    scales: d,
-    gradientFor: g,
-    item: y
+    scales: c,
+    gradientFor: u,
+    item: g
   }) {
-    const o = t.right - t.left, b = t.bottom - t.top;
-    return (!r.current || c.current !== o || C.current !== b) && (c.current = o, C.current = b, l({ ctx: P, chartArea: t, scales: d, chartHeight: b, gradientFor: g, item: y })), l({ ctx: P, chartArea: t, scales: d, chartHeight: b, gradientFor: g, item: y }), r.current;
-  }, []), B = v.useMemo(() => ({
-    ...s,
-    datasets: s.datasets.map((t) => ({
+    const e = t.right - t.left, f = t.bottom - t.top;
+    return (!o.current || l.current !== e || h.current !== f) && (l.current = e, h.current = f, p({ ctx: x, chartArea: t, scales: c, chartHeight: f, gradientFor: u, item: g })), p({ ctx: x, chartArea: t, scales: c, chartHeight: f, gradientFor: u, item: g }), o.current;
+  }, []), k = y.useMemo(() => ({
+    ...a,
+    datasets: a.datasets.map((t) => ({
       fill: !0,
-      backgroundColor: function(d) {
-        const g = d.chart, { ctx: y, chartArea: o, scales: b } = g;
-        if (o)
-          return p({ ctx: y, chartArea: o, scales: b, gradientFor: "background", item: t });
+      backgroundColor: function(c) {
+        const u = c.chart, { ctx: g, chartArea: e, scales: f } = u;
+        if (e)
+          return C({ ctx: g, chartArea: e, scales: f, gradientFor: "background", item: t });
       },
-      borderColor: function(d) {
-        const g = d.chart, { ctx: y, chartArea: o, scales: b } = g;
-        if (o)
-          return p({ ctx: y, chartArea: o, scales: b, gradientFor: "border", item: t });
+      borderColor: function(c) {
+        const u = c.chart, { ctx: g, chartArea: e, scales: f } = u;
+        if (e)
+          return C({ ctx: g, chartArea: e, scales: f, gradientFor: "border", item: t });
       },
       borderWidth: 0,
       tension: 0,
@@ -139,19 +138,19 @@ const M = (s) => ({ chart: n, tooltip: a }) => {
       ...t,
       data: t.data
     }))
-  }), [s]), S = v.useMemo(() => j(T, {
+  }), [a]), D = y.useMemo(() => G(z, {
     plugins: {
       tooltip: {
-        enabled: !u,
-        external: ({ chart: t, tooltip: d }) => u ? M(x)({ chart: t, tooltip: d }) : void 0
+        enabled: !d,
+        external: ({ chart: t, tooltip: c }) => d ? H(P)({ chart: t, tooltip: c }) : void 0
       }
     }
-  }, e ?? {}), [e, u]);
-  return /* @__PURE__ */ w("div", { id: i, className: n, style: { height: a || "300px" }, children: [
-    u && /* @__PURE__ */ k(H, { selector: "body", children: /* @__PURE__ */ k(u, { ...f }) }),
-    /* @__PURE__ */ k(G, { data: B, options: S, plugins: [z] })
+  }, i ?? {}), [i, d]);
+  return /* @__PURE__ */ R("div", { id: s, className: r, style: { height: n || "300px" }, children: [
+    d && /* @__PURE__ */ m(j, { selector: "body", children: /* @__PURE__ */ m(d, { ...v }) }),
+    /* @__PURE__ */ m(N, { data: k, options: D, plugins: [M] })
   ] });
 };
 export {
-  K as default
+  J as default
 };

package/dist/components/Chart/GradientLineChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react/jsx-runtime"),P=require("chart.js"),p=require("react"),j=require("react-chartjs-2"),w=require("../../utils/common.cjs"),D=require("../PortalComponent/PortalComponent.cjs");P.Chart.register(P.CategoryScale,P.LinearScale,P.PointElement,P.LineElement,P.Filler,P.Tooltip);const F=r=>({chart:u,tooltip:t})=>{var v,x,B,y,C,S;const s={};if(t.opacity===0){r(k=>({...k,style:{...k.style,opacity:0,pointerEvents:"none"}}));return}if(!t.dataPoints||t.dataPoints.length===0)return;s.opacity="1",s.position="absolute",s.pointerEvents="none";const b=u.canvas.getBoundingClientRect();s.left=b.left+window.pageXOffset+t.caretX+"px",s.top=b.top+window.pageYOffset+t.caretY+"px";const c=((x=(v=t.dataPoints)==null?void 0:v[0])==null?void 0:x.label)??"",n=((y=(B=t.dataPoints)==null?void 0:B[0])==null?void 0:y.raw)??"",i=((S=(C=t.dataPoints)==null?void 0:C[0])==null?void 0:S.dataset.label)??"";r({dataset:i,label:c,value:n,style:s,dataPoints:t.dataPoints})},O={id:"hairlinePlugin",beforeDatasetsDraw:r=>{const u=r.scales.y;if(!u)return;const{ctx:t}=r,{top:s,bottom:b,left:c,right:n}=r.chartArea;if(u.min>0||u.max<0)return;const i=u.getPixelForValue(0);i<s||i>b||(t.save(),t.beginPath(),t.moveTo(c,i),t.lineTo(n,i),t.lineWidth=2,t.strokeStyle="rgb(207, 216, 220)",t.setLineDash([4,3]),t.stroke(),t.restore())}},q={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1}},scales:{y:{grace:"15%",position:"right",border:{display:!1,dash:[5,3],color:"#CFD8DC"},ticks:{font:{size:10,weight:"normal"},padding:10,color:"#898989"}},x:{border:{dash:[5,3],color:"#CFD8DC"},ticks:{font:{size:10,weight:"normal"},color:"#898989"}}},interaction:{mode:"index",intersect:!1}},E=({data:r,height:u,classNameContainer:t,id:s,options:b,CustomTooltip:c})=>{const n=p.useRef(void 0),i=p.useRef(0),v=p.useRef(0),[x,B]=p.useState({dataset:"",label:"",value:0,style:{opacity:0,position:"absolute",left:0,bottom:0},dataPoints:[]}),y=p.useCallback(function({ctx:h,chartArea:o,scales:a,chartHeight:l,gradientFor:g,item:e}){let f=(a.y.getPixelForValue(0)-o.top)/l;f=f<0?0:f>1?1:f,n.current=h.createLinearGradient(0,o.top,0,l+o.top),g==="background"?(n.current.addColorStop(0,(e==null?void 0:e.colorBackgroundPositiveZero)||"#9FD2FF"),n.current.addColorStop(f,(e==null?void 0:e.colorBackgroundPositivePercentage)||"rgba(115, 235, 163, 0.1)"),n.current.addColorStop(f,(e==null?void 0:e.colorBackgroundNegativePercentage)||"rgba(235, 107, 107, 0.1)"),n.current.addColorStop(1,(e==null?void 0:e.colorBackgroundNegativeOne)||"#EB6B6B")):(n.current.addColorStop(f,(e==null?void 0:e.colorBorderPositive)||"#80CBC4"),n.current.addColorStop(f,(e==null?void 0:e.colorBorderNegative)||"#EB6B6B"))},[]),C=p.useCallback(function({ctx:h,chartArea:o,scales:a,gradientFor:l,item:g}){const e=o.right-o.left,d=o.bottom-o.top;return(!n.current||i.current!==e||v.current!==d)&&(i.current=e,v.current=d,y({ctx:h,chartArea:o,scales:a,chartHeight:d,gradientFor:l,item:g})),y({ctx:h,chartArea:o,scales:a,chartHeight:d,gradientFor:l,item:g}),n.current},[]),S=p.useMemo(()=>({...r,datasets:r.datasets.map(o=>({fill:!0,backgroundColor:function(a){const l=a.chart,{ctx:g,chartArea:e,scales:d}=l;if(e)return C({ctx:g,chartArea:e,scales:d,gradientFor:"background",item:o})},borderColor:function(a){const l=a.chart,{ctx:g,chartArea:e,scales:d}=l;if(e)return C({ctx:g,chartArea:e,scales:d,gradientFor:"border",item:o})},borderWidth:3,tension:0,pointRadius:0,pointHoverRadius:4,...o,data:o.data}))}),[r]),k=p.useMemo(()=>{const h={plugins:{tooltip:{enabled:!c,external:({chart:o,tooltip:a})=>c?F(B)({chart:o,tooltip:a}):void 0}}};return w.mergeObjects(q,h,b??{})},[b,c]);return R.jsxs("div",{id:s,className:t,style:{height:u||"300px"},children:[c&&R.jsx(D.default,{selector:"body",children:R.jsx(c,{...x})}),R.jsx(j.Line,{data:S,options:k,plugins:[O]})]})};exports.default=E;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),P=require("chart.js"),p=require("react"),m=require("react-chartjs-2"),j=require("../../utils/common.cjs"),w=require("../PortalComponent/PortalComponent.cjs");P.Chart.register(P.CategoryScale,P.LinearScale,P.PointElement,P.LineElement,P.Filler,P.Tooltip);const D=r=>({chart:u,tooltip:e})=>{const s={};if(e.opacity===0){r(v=>({...v,style:{...v.style,opacity:0,pointerEvents:"none"}}));return}if(!e.dataPoints||e.dataPoints.length===0)return;s.opacity="1",s.position="absolute",s.pointerEvents="none";const b=u.canvas.getBoundingClientRect();s.left=b.left+window.pageXOffset+e.caretX+"px",s.top=b.top+window.pageYOffset+e.caretY+"px";const i=e.dataPoints?.[0]?.label??"",n=e.dataPoints?.[0]?.raw??"",c=e.dataPoints?.[0]?.dataset.label??"";r({dataset:c,label:i,value:n,style:s,dataPoints:e.dataPoints})},F={id:"hairlinePlugin",beforeDatasetsDraw:r=>{const u=r.scales.y;if(!u)return;const{ctx:e}=r,{top:s,bottom:b,left:i,right:n}=r.chartArea;if(u.min>0||u.max<0)return;const c=u.getPixelForValue(0);c<s||c>b||(e.save(),e.beginPath(),e.moveTo(i,c),e.lineTo(n,c),e.lineWidth=2,e.strokeStyle="rgb(207, 216, 220)",e.setLineDash([4,3]),e.stroke(),e.restore())}},O={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1}},scales:{y:{grace:"15%",position:"right",border:{display:!1,dash:[5,3],color:"#CFD8DC"},ticks:{font:{size:10,weight:"normal"},padding:10,color:"#898989"}},x:{border:{dash:[5,3],color:"#CFD8DC"},ticks:{font:{size:10,weight:"normal"},color:"#898989"}}},interaction:{mode:"index",intersect:!1}},q=({data:r,height:u,classNameContainer:e,id:s,options:b,CustomTooltip:i})=>{const n=p.useRef(void 0),c=p.useRef(0),v=p.useRef(0),[B,S]=p.useState({dataset:"",label:"",value:0,style:{opacity:0,position:"absolute",left:0,bottom:0},dataPoints:[]}),C=p.useCallback(function({ctx:h,chartArea:t,scales:a,chartHeight:l,gradientFor:g,item:o}){let f=(a.y.getPixelForValue(0)-t.top)/l;f=f<0?0:f>1?1:f,n.current=h.createLinearGradient(0,t.top,0,l+t.top),g==="background"?(n.current.addColorStop(0,o?.colorBackgroundPositiveZero||"#9FD2FF"),n.current.addColorStop(f,o?.colorBackgroundPositivePercentage||"rgba(115, 235, 163, 0.1)"),n.current.addColorStop(f,o?.colorBackgroundNegativePercentage||"rgba(235, 107, 107, 0.1)"),n.current.addColorStop(1,o?.colorBackgroundNegativeOne||"#EB6B6B")):(n.current.addColorStop(f,o?.colorBorderPositive||"#80CBC4"),n.current.addColorStop(f,o?.colorBorderNegative||"#EB6B6B"))},[]),x=p.useCallback(function({ctx:h,chartArea:t,scales:a,gradientFor:l,item:g}){const o=t.right-t.left,d=t.bottom-t.top;return(!n.current||c.current!==o||v.current!==d)&&(c.current=o,v.current=d,C({ctx:h,chartArea:t,scales:a,chartHeight:d,gradientFor:l,item:g})),C({ctx:h,chartArea:t,scales:a,chartHeight:d,gradientFor:l,item:g}),n.current},[]),k=p.useMemo(()=>({...r,datasets:r.datasets.map(t=>({fill:!0,backgroundColor:function(a){const l=a.chart,{ctx:g,chartArea:o,scales:d}=l;if(o)return x({ctx:g,chartArea:o,scales:d,gradientFor:"background",item:t})},borderColor:function(a){const l=a.chart,{ctx:g,chartArea:o,scales:d}=l;if(o)return x({ctx:g,chartArea:o,scales:d,gradientFor:"border",item:t})},borderWidth:3,tension:0,pointRadius:0,pointHoverRadius:4,...t,data:t.data}))}),[r]),R=p.useMemo(()=>{const h={plugins:{tooltip:{enabled:!i,external:({chart:t,tooltip:a})=>i?D(S)({chart:t,tooltip:a}):void 0}}};return j.mergeObjects(O,h,b??{})},[b,i]);return y.jsxs("div",{id:s,className:e,style:{height:u||"300px"},children:[i&&y.jsx(w.default,{selector:"body",children:y.jsx(i,{...B})}),y.jsx(m.Line,{data:k,options:R,plugins:[F]})]})};exports.default=q;