1mpacto-react-ui 2.0.20 → 2.0.21

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;

package/dist/components/Chart/GradientLineChart.mjs

@@ -1,41 +1,40 @@
-import { jsxs as R, jsx as S } from "react/jsx-runtime";
-import { Chart as w, CategoryScale as D, LinearScale as F, PointElement as O, LineElement as E, Filler as L, Tooltip as Z } from "chart.js";
+import { jsxs as S, jsx as y } from "react/jsx-runtime";
+import { Chart as R, CategoryScale as w, LinearScale as D, PointElement as F, LineElement as O, Filler as E, Tooltip as L } from "chart.js";
 import f from "react";
-import { Line as G } from "react-chartjs-2";
-import { mergeObjects as N } from "../../utils/common.mjs";
-import j from "../PortalComponent/PortalComponent.mjs";
-w.register(D, F, O, E, L, Z);
-const H = (r) => ({ chart: u, tooltip: e }) => {
-  var P, C, x, y, v, B;
+import { Line as Z } from "react-chartjs-2";
+import { mergeObjects as G } from "../../utils/common.mjs";
+import N from "../PortalComponent/PortalComponent.mjs";
+R.register(w, D, F, O, E, L);
+const j = (r) => ({ chart: u, tooltip: t }) => {
   const a = {};
-  if (e.opacity === 0) {
-    r((k) => ({ ...k, style: { ...k.style, opacity: 0, pointerEvents: "none" } }));
+  if (t.opacity === 0) {
+    r((P) => ({ ...P, style: { ...P.style, opacity: 0, pointerEvents: "none" } }));
     return;
   }
-  if (!e.dataPoints || e.dataPoints.length === 0)
+  if (!t.dataPoints || t.dataPoints.length === 0)
     return;
   a.opacity = "1", a.position = "absolute", a.pointerEvents = "none";
   const b = u.canvas.getBoundingClientRect();
-  a.left = b.left + window.pageXOffset + e.caretX + "px", a.top = b.top + window.pageYOffset + e.caretY + "px";
-  const c = ((C = (P = e.dataPoints) == null ? void 0 : P[0]) == null ? void 0 : C.label) ?? "", n = ((y = (x = e.dataPoints) == null ? void 0 : x[0]) == null ? void 0 : y.raw) ?? "", i = ((B = (v = e.dataPoints) == null ? void 0 : v[0]) == null ? void 0 : B.dataset.label) ?? "";
+  a.left = b.left + window.pageXOffset + t.caretX + "px", a.top = b.top + window.pageYOffset + t.caretY + "px";
+  const i = t.dataPoints?.[0]?.label ?? "", n = t.dataPoints?.[0]?.raw ?? "", c = t.dataPoints?.[0]?.dataset.label ?? "";
   r({
-    dataset: i,
-    label: c,
+    dataset: c,
+    label: i,
     value: n,
     style: a,
-    dataPoints: e.dataPoints
+    dataPoints: t.dataPoints
   });
-}, W = {
+}, H = {
   id: "hairlinePlugin",
   beforeDatasetsDraw: (r) => {
     const u = r.scales.y;
     if (!u) return;
-    const { ctx: e } = r, { top: a, bottom: b, left: c, right: n } = r.chartArea;
+    const { ctx: t } = r, { top: a, bottom: b, left: i, right: n } = r.chartArea;
     if (u.min > 0 || u.max < 0) return;
-    const i = u.getPixelForValue(0);
-    i < a || i > b || (e.save(), e.beginPath(), e.moveTo(c, i), e.lineTo(n, i), e.lineWidth = 2, e.strokeStyle = "rgb(207, 216, 220)", e.setLineDash([4, 3]), e.stroke(), e.restore());
+    const c = u.getPixelForValue(0);
+    c < a || c > b || (t.save(), t.beginPath(), t.moveTo(i, c), t.lineTo(n, c), t.lineWidth = 2, t.strokeStyle = "rgb(207, 216, 220)", t.setLineDash([4, 3]), t.stroke(), t.restore());
   }
-}, z = {
+}, W = {
   responsive: !0,
   maintainAspectRatio: !1,
   plugins: {
@@ -72,72 +71,72 @@ const H = (r) => ({ chart: u, tooltip: e }) => {
     mode: "index",
     intersect: !1
   }
-}, J = ({ data: r, height: u, classNameContainer: e, id: a, options: b, CustomTooltip: c }) => {
-  const n = f.useRef(void 0), i = f.useRef(0), P = f.useRef(0), [C, x] = f.useState({
+}, I = ({ data: r, height: u, classNameContainer: t, id: a, options: b, CustomTooltip: i }) => {
+  const n = f.useRef(void 0), c = f.useRef(0), P = f.useRef(0), [C, x] = f.useState({
     dataset: "",
     label: "",
     value: 0,
     style: { opacity: 0, position: "absolute", left: 0, bottom: 0 },
     dataPoints: []
-  }), y = f.useCallback(function({
+  }), m = f.useCallback(function({
     ctx: h,
-    chartArea: o,
+    chartArea: e,
     scales: s,
     chartHeight: l,
     gradientFor: g,
-    item: t
+    item: o
   }) {
-    let p = (s.y.getPixelForValue(0) - o.top) / l;
-    p = p < 0 ? 0 : p > 1 ? 1 : p, n.current = h.createLinearGradient(0, o.top, 0, l + o.top), g === "background" ? (n.current.addColorStop(0, (t == null ? void 0 : t.colorBackgroundPositiveZero) || "#9FD2FF"), n.current.addColorStop(
+    let p = (s.y.getPixelForValue(0) - e.top) / l;
+    p = p < 0 ? 0 : p > 1 ? 1 : p, n.current = h.createLinearGradient(0, e.top, 0, l + e.top), g === "background" ? (n.current.addColorStop(0, o?.colorBackgroundPositiveZero || "#9FD2FF"), n.current.addColorStop(
       p,
-      (t == null ? void 0 : t.colorBackgroundPositivePercentage) || "rgba(115, 235, 163, 0.1)"
+      o?.colorBackgroundPositivePercentage || "rgba(115, 235, 163, 0.1)"
     ), n.current.addColorStop(
       p,
-      (t == null ? void 0 : t.colorBackgroundNegativePercentage) || "rgba(235, 107, 107, 0.1)"
-    ), n.current.addColorStop(1, (t == null ? void 0 : t.colorBackgroundNegativeOne) || "#EB6B6B")) : (n.current.addColorStop(p, (t == null ? void 0 : t.colorBorderPositive) || "#80CBC4"), n.current.addColorStop(p, (t == null ? void 0 : t.colorBorderNegative) || "#EB6B6B"));
+      o?.colorBackgroundNegativePercentage || "rgba(235, 107, 107, 0.1)"
+    ), n.current.addColorStop(1, o?.colorBackgroundNegativeOne || "#EB6B6B")) : (n.current.addColorStop(p, o?.colorBorderPositive || "#80CBC4"), n.current.addColorStop(p, o?.colorBorderNegative || "#EB6B6B"));
   }, []), v = f.useCallback(function({
     ctx: h,
-    chartArea: o,
+    chartArea: e,
     scales: s,
     gradientFor: l,
     item: g
   }) {
-    const t = o.right - o.left, d = o.bottom - o.top;
-    return (!n.current || i.current !== t || P.current !== d) && (i.current = t, P.current = d, y({ ctx: h, chartArea: o, scales: s, chartHeight: d, gradientFor: l, item: g })), y({ ctx: h, chartArea: o, scales: s, chartHeight: d, gradientFor: l, item: g }), n.current;
+    const o = e.right - e.left, d = e.bottom - e.top;
+    return (!n.current || c.current !== o || P.current !== d) && (c.current = o, P.current = d, m({ ctx: h, chartArea: e, scales: s, chartHeight: d, gradientFor: l, item: g })), m({ ctx: h, chartArea: e, scales: s, chartHeight: d, gradientFor: l, item: g }), n.current;
   }, []), B = f.useMemo(() => ({
     ...r,
-    datasets: r.datasets.map((o) => ({
+    datasets: r.datasets.map((e) => ({
       fill: !0,
       backgroundColor: function(s) {
-        const l = s.chart, { ctx: g, chartArea: t, scales: d } = l;
-        if (t)
-          return v({ ctx: g, chartArea: t, scales: d, gradientFor: "background", item: o });
+        const l = s.chart, { ctx: g, chartArea: o, scales: d } = l;
+        if (o)
+          return v({ ctx: g, chartArea: o, scales: d, gradientFor: "background", item: e });
       },
       borderColor: function(s) {
-        const l = s.chart, { ctx: g, chartArea: t, scales: d } = l;
-        if (t)
-          return v({ ctx: g, chartArea: t, scales: d, gradientFor: "border", item: o });
+        const l = s.chart, { ctx: g, chartArea: o, scales: d } = l;
+        if (o)
+          return v({ ctx: g, chartArea: o, scales: d, gradientFor: "border", item: e });
       },
       borderWidth: 3,
       tension: 0,
       pointRadius: 0,
       pointHoverRadius: 4,
-      ...o,
-      data: o.data
+      ...e,
+      data: e.data
     }))
-  }), [r]), k = f.useMemo(() => N(z, {
+  }), [r]), k = f.useMemo(() => G(W, {
     plugins: {
       tooltip: {
-        enabled: !c,
-        external: ({ chart: o, tooltip: s }) => c ? H(x)({ chart: o, tooltip: s }) : void 0
+        enabled: !i,
+        external: ({ chart: e, tooltip: s }) => i ? j(x)({ chart: e, tooltip: s }) : void 0
       }
     }
-  }, b ?? {}), [b, c]);
-  return /* @__PURE__ */ R("div", { id: a, className: e, style: { height: u || "300px" }, children: [
-    c && /* @__PURE__ */ S(j, { selector: "body", children: /* @__PURE__ */ S(c, { ...C }) }),
-    /* @__PURE__ */ S(G, { data: B, options: k, plugins: [W] })
+  }, b ?? {}), [b, i]);
+  return /* @__PURE__ */ S("div", { id: a, className: t, style: { height: u || "300px" }, children: [
+    i && /* @__PURE__ */ y(N, { selector: "body", children: /* @__PURE__ */ y(i, { ...C }) }),
+    /* @__PURE__ */ y(Z, { data: B, options: k, plugins: [H] })
   ] });
 };
 export {
-  J as default
+  I as default
 };

package/dist/components/Chart/LineChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),y=require("react"),s=require("chart.js"),B=require("react-chartjs-2"),S=require("date-fns"),v=require("date-fns/locale"),E=require("../../utils/common.cjs");s.Chart.register(s.CategoryScale,s.LinearScale,s.PointElement,s.LineElement,s.Title,s.Tooltip,s.Legend);const R=(a,f,b)=>{const i=a,g=f||new Date().getMonth(),c=b||new Date().getFullYear();return new Date(`${g}/${i}/${c}`)},$=({data:a,className:f,height:b=65})=>{const i=y.useRef(null),g=a.map(t=>S.formatDate(R(1,t.label,t.year),"MMM yy",{locale:v.id}))||[],[c,x]=y.useState(""),[h,M]=y.useState(""),D=t=>{const e=[],o=[];let u=!t.find(n=>n.isCurrent);return t.forEach(n=>{u?(o.push(n.value),e.push(null)):(e.push(n.value),n.isCurrent?(u=!0,o.push(n.value)):o.push(null))}),{passed:e,notPassed:o}},k={labels:g,datasets:[{label:"",fill:"blue",backgroundColor:"rgba(75,192,192,1)",borderColor:c,borderCapStyle:"butt",borderDashOffset:0,borderJoinStyle:"miter",pointBackgroundColor:function(t){const e=a[t.dataIndex];let o=h;return e.isCurrent&&(o="#ED0019"),o},pointBorderWidth:.1,pointHoverRadius:4,pointRadius:5,pointBorderColor:h,pointHoverBorderColor:c,data:D(a).passed||[]},{label:"",fill:"grey",backgroundColor:"rgba(75,192,192,1)",borderColor:"#D6D6D6",borderCapStyle:"butt",borderDashOffset:0,pointRadius:5,borderJoinStyle:"miter",pointBackgroundColor:h,pointBorderWidth:.1,pointHoverRadius:4,borderDash:[15,5],data:D(a).notPassed||[]}]},j={interaction:{mode:"index",intersect:!1},plugins:{legend:{display:!1,labels:{usePointStyle:!0}},tooltip:{external:function(t){let e=document.getElementById("chartjs-tooltip");e||(e=document.createElement("div"),e.id="chartjs-tooltip",e.innerHTML="<table></table>",document.body.appendChild(e));const o=t.tooltip;if(o.opacity===0){e.style.opacity="0";return}e.classList.remove("above","below","no-transform"),o.yAlign?e.classList.add(o.yAlign):e.classList.add("no-transform");function u(m){return m.lines}if(o.body){const m=o.title||[];let l=o.body.map(u),d="<thead>";m.forEach(C=>{let r="";r+="display: flex",r+="; justify-content: center",r+="; font-weight: 600",r+="; font-size: 12px",r+="; padding: 0px 14px",d+=`<tr><span style="${r}">${C}</span></tr>`}),d+="</thead><tbody>",l.length>1&&l[0][0]===l[1][0]&&(l=[l[0]]),l.forEach(C=>{let r="";r+="display: flex",r+="; justify-content: center",r+="; color: #0163C8",r+="; padding: 0px 14px",r+="; font-size: 12px";const w=`<span style="${r}">${C}</span>`;d+=`<tr><td>${w}</td></tr>`}),d+="</tbody>";const L=e.querySelector("table");L&&(L.innerHTML=d)}const n=t.chart.canvas.getBoundingClientRect();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=n.left+window.pageXOffset+o.caretX-30+"px",e.style.top=n.top+window.pageYOffset+o.caretY-60+"px",e.style.pointerEvents="none"},displayColors:!0,enabled:!1,callbacks:{title:function(t){const e=a[t[0].dataIndex];return S.formatDate(new Date(`1/${e.label}/${e.year}`),"MMMM yyyy",{locale:v.id})},label:function(t){let e=t.dataset.label??"";return e&&(e+=": "),t.parsed.y!==null&&(e+=new Intl.NumberFormat("id-ID",{style:"currency",currency:"IDR"}).format(t.parsed.y)),e}}}},scales:{x:{grid:{display:!1},beginAtZero:!0,ticks:{autoSkip:!0,maxTicksLimit:20}},y:{min:0,grid:{display:!1},beginAtZero:!0,ticks:{maxTicksLimit:6,callback:function(t){return E.setDigit(t)??0}}}}};return y.useEffect(()=>{if(i.current){const t=i.current.getContext("2d"),e=t==null?void 0:t.createLinearGradient(0,100,500,-500);e==null||e.addColorStop(0,"rgba(237, 0, 25, 0)"),e==null||e.addColorStop(1,"rgba(237, 0, 25, 20)");const o=t.fillStyle="rgba(255, 255, 255, 0)";M(o),x(e)}},[]),p.jsxs("div",{className:f??"",children:[p.jsx(B.Line,{options:j,data:k,height:b}),p.jsx("div",{className:"iru-h-5",children:p.jsx("canvas",{ref:i})})]})};exports.default=$;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),y=require("react"),a=require("chart.js"),B=require("react-chartjs-2"),L=require("date-fns"),S=require("date-fns/locale"),E=require("../../utils/common.cjs");a.Chart.register(a.CategoryScale,a.LinearScale,a.PointElement,a.LineElement,a.Title,a.Tooltip,a.Legend);const R=(s,f,b)=>{const i=s,g=f||new Date().getMonth(),c=b||new Date().getFullYear();return new Date(`${g}/${i}/${c}`)},$=({data:s,className:f,height:b=65})=>{const i=y.useRef(null),g=s.map(t=>L.formatDate(R(1,t.label,t.year),"MMM yy",{locale:S.id}))||[],[c,x]=y.useState(""),[h,M]=y.useState(""),D=t=>{const e=[],o=[];let u=!t.find(n=>n.isCurrent);return t.forEach(n=>{u?(o.push(n.value),e.push(null)):(e.push(n.value),n.isCurrent?(u=!0,o.push(n.value)):o.push(null))}),{passed:e,notPassed:o}},k={labels:g,datasets:[{label:"",fill:"blue",backgroundColor:"rgba(75,192,192,1)",borderColor:c,borderCapStyle:"butt",borderDashOffset:0,borderJoinStyle:"miter",pointBackgroundColor:function(t){const e=s[t.dataIndex];let o=h;return e.isCurrent&&(o="#ED0019"),o},pointBorderWidth:.1,pointHoverRadius:4,pointRadius:5,pointBorderColor:h,pointHoverBorderColor:c,data:D(s).passed||[]},{label:"",fill:"grey",backgroundColor:"rgba(75,192,192,1)",borderColor:"#D6D6D6",borderCapStyle:"butt",borderDashOffset:0,pointRadius:5,borderJoinStyle:"miter",pointBackgroundColor:h,pointBorderWidth:.1,pointHoverRadius:4,borderDash:[15,5],data:D(s).notPassed||[]}]},j={interaction:{mode:"index",intersect:!1},plugins:{legend:{display:!1,labels:{usePointStyle:!0}},tooltip:{external:function(t){let e=document.getElementById("chartjs-tooltip");e||(e=document.createElement("div"),e.id="chartjs-tooltip",e.innerHTML="<table></table>",document.body.appendChild(e));const o=t.tooltip;if(o.opacity===0){e.style.opacity="0";return}e.classList.remove("above","below","no-transform"),o.yAlign?e.classList.add(o.yAlign):e.classList.add("no-transform");function u(m){return m.lines}if(o.body){const m=o.title||[];let l=o.body.map(u),d="<thead>";m.forEach(C=>{let r="";r+="display: flex",r+="; justify-content: center",r+="; font-weight: 600",r+="; font-size: 12px",r+="; padding: 0px 14px",d+=`<tr><span style="${r}">${C}</span></tr>`}),d+="</thead><tbody>",l.length>1&&l[0][0]===l[1][0]&&(l=[l[0]]),l.forEach(C=>{let r="";r+="display: flex",r+="; justify-content: center",r+="; color: #0163C8",r+="; padding: 0px 14px",r+="; font-size: 12px";const w=`<span style="${r}">${C}</span>`;d+=`<tr><td>${w}</td></tr>`}),d+="</tbody>";const v=e.querySelector("table");v&&(v.innerHTML=d)}const n=t.chart.canvas.getBoundingClientRect();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=n.left+window.pageXOffset+o.caretX-30+"px",e.style.top=n.top+window.pageYOffset+o.caretY-60+"px",e.style.pointerEvents="none"},displayColors:!0,enabled:!1,callbacks:{title:function(t){const e=s[t[0].dataIndex];return L.formatDate(new Date(`1/${e.label}/${e.year}`),"MMMM yyyy",{locale:S.id})},label:function(t){let e=t.dataset.label??"";return e&&(e+=": "),t.parsed.y!==null&&(e+=new Intl.NumberFormat("id-ID",{style:"currency",currency:"IDR"}).format(t.parsed.y)),e}}}},scales:{x:{grid:{display:!1},beginAtZero:!0,ticks:{autoSkip:!0,maxTicksLimit:20}},y:{min:0,grid:{display:!1},beginAtZero:!0,ticks:{maxTicksLimit:6,callback:function(t){return E.setDigit(t)??0}}}}};return y.useEffect(()=>{if(i.current){const t=i.current.getContext("2d"),e=t?.createLinearGradient(0,100,500,-500);e?.addColorStop(0,"rgba(237, 0, 25, 0)"),e?.addColorStop(1,"rgba(237, 0, 25, 20)");const o=t.fillStyle="rgba(255, 255, 255, 0)";M(o),x(e)}},[]),p.jsxs("div",{className:f??"",children:[p.jsx(B.Line,{options:j,data:k,height:b}),p.jsx("div",{className:"iru-h-5",children:p.jsx("canvas",{ref:i})})]})};exports.default=$;

package/dist/components/Chart/LineChart.mjs

@@ -3,20 +3,20 @@ import p from "react";
 import { Chart as E, CategoryScale as R, LinearScale as $, PointElement as I, LineElement as T, Title as j, Tooltip as H, Legend as O } from "chart.js";
 import { Line as A } from "react-chartjs-2";
 import { formatDate as L } from "date-fns";
-import { id as S } from "date-fns/locale";
+import { id as v } from "date-fns/locale";
 import { setDigit as P } from "../../utils/common.mjs";
 E.register(R, $, I, T, j, H, O);
-const Y = (l, u, f) => {
-  const s = l, y = u || (/* @__PURE__ */ new Date()).getMonth(), d = f || (/* @__PURE__ */ new Date()).getFullYear();
+const Y = (a, u, f) => {
+  const s = a, y = u || (/* @__PURE__ */ new Date()).getMonth(), d = f || (/* @__PURE__ */ new Date()).getFullYear();
   return /* @__PURE__ */ new Date(`${y}/${s}/${d}`);
-}, q = ({ data: l, className: u, height: f = 65 }) => {
-  const s = p.useRef(null), y = l.map((e) => L(Y(1, e.label, e.year), "MMM yy", { locale: S })) || [], [d, C] = p.useState(""), [b, k] = p.useState(""), x = (e) => {
+}, q = ({ data: a, className: u, height: f = 65 }) => {
+  const s = p.useRef(null), y = a.map((e) => L(Y(1, e.label, e.year), "MMM yy", { locale: v })) || [], [d, C] = p.useState(""), [b, S] = p.useState(""), x = (e) => {
     const t = [], o = [];
     let c = !e.find((n) => n.isCurrent);
     return e.forEach((n) => {
       c ? (o.push(n.value), t.push(null)) : (t.push(n.value), n.isCurrent ? (c = !0, o.push(n.value)) : o.push(null));
     }), { passed: t, notPassed: o };
-  }, v = {
+  }, k = {
     labels: y,
     datasets: [
       {
@@ -28,7 +28,7 @@ const Y = (l, u, f) => {
         borderDashOffset: 0,
         borderJoinStyle: "miter",
         pointBackgroundColor: function(e) {
-          const t = l[e.dataIndex];
+          const t = a[e.dataIndex];
           let o = b;
           return t.isCurrent && (o = "#ED0019"), o;
         },
@@ -37,7 +37,7 @@ const Y = (l, u, f) => {
         pointRadius: 5,
         pointBorderColor: b,
         pointHoverBorderColor: d,
-        data: x(l).passed || []
+        data: x(a).passed || []
       },
       {
         label: "",
@@ -53,7 +53,7 @@ const Y = (l, u, f) => {
         pointBorderWidth: 0.1,
         pointHoverRadius: 4,
         borderDash: [15, 5],
-        data: x(l).notPassed || []
+        data: x(a).notPassed || []
       }
     ]
   }, w = {
@@ -78,19 +78,19 @@ const Y = (l, u, f) => {
             return;
           }
           t.classList.remove("above", "below", "no-transform"), o.yAlign ? t.classList.add(o.yAlign) : t.classList.add("no-transform");
-          function c(m) {
-            return m.lines;
+          function c(g) {
+            return g.lines;
           }
           if (o.body) {
-            const m = o.title || [];
-            let a = o.body.map(c), i = "<thead>";
-            m.forEach((g) => {
+            const g = o.title || [];
+            let l = o.body.map(c), i = "<thead>";
+            g.forEach((m) => {
               let r = "";
-              r += "display: flex", r += "; justify-content: center", r += "; font-weight: 600", r += "; font-size: 12px", r += "; padding: 0px 14px", i += `<tr><span style="${r}">${g}</span></tr>`;
-            }), i += "</thead><tbody>", a.length > 1 && a[0][0] === a[1][0] && (a = [a[0]]), a.forEach((g) => {
+              r += "display: flex", r += "; justify-content: center", r += "; font-weight: 600", r += "; font-size: 12px", r += "; padding: 0px 14px", i += `<tr><span style="${r}">${m}</span></tr>`;
+            }), i += "</thead><tbody>", l.length > 1 && l[0][0] === l[1][0] && (l = [l[0]]), l.forEach((m) => {
               let r = "";
               r += "display: flex", r += "; justify-content: center", r += "; color: #0163C8", r += "; padding: 0px 14px", r += "; font-size: 12px";
-              const M = `<span style="${r}">${g}</span>`;
+              const M = `<span style="${r}">${m}</span>`;
               i += `<tr><td>${M}</td></tr>`;
             }), i += "</tbody>";
             const D = t.querySelector("table");
@@ -103,8 +103,8 @@ const Y = (l, u, f) => {
         enabled: !1,
         callbacks: {
           title: function(e) {
-            const t = l[e[0].dataIndex];
-            return L(/* @__PURE__ */ new Date(`1/${t.label}/${t.year}`), "MMMM yyyy", { locale: S });
+            const t = a[e[0].dataIndex];
+            return L(/* @__PURE__ */ new Date(`1/${t.label}/${t.year}`), "MMMM yyyy", { locale: v });
           },
           label: function(e) {
             let t = e.dataset.label ?? "";
@@ -143,13 +143,13 @@ const Y = (l, u, f) => {
   };
   return p.useEffect(() => {
     if (s.current) {
-      const e = s.current.getContext("2d"), t = e == null ? void 0 : e.createLinearGradient(0, 100, 500, -500);
-      t == null || t.addColorStop(0, "rgba(237, 0, 25, 0)"), t == null || t.addColorStop(1, "rgba(237, 0, 25, 20)");
+      const e = s.current.getContext("2d"), t = e?.createLinearGradient(0, 100, 500, -500);
+      t?.addColorStop(0, "rgba(237, 0, 25, 0)"), t?.addColorStop(1, "rgba(237, 0, 25, 20)");
       const o = e.fillStyle = "rgba(255, 255, 255, 0)";
-      k(o), C(t);
+      S(o), C(t);
     }
   }, []), /* @__PURE__ */ B("div", { className: u ?? "", children: [
-    /* @__PURE__ */ h(A, { options: w, data: v, height: f }),
+    /* @__PURE__ */ h(A, { options: w, data: k, height: f }),
     /* @__PURE__ */ h("div", { className: "iru-h-5", children: /* @__PURE__ */ h("canvas", { ref: s }) })
   ] });
 };

package/dist/components/Chart/PieChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react/jsx-runtime"),j=require("chart.js"),h=require("react"),E=require("react-chartjs-2"),w=require("../../utils/common.cjs"),T=require("../PortalComponent/PortalComponent.cjs");j.Chart.register(j.ArcElement,j.Tooltip);const I=(t,l,n)=>{const r=l>0?t/l*100:0;switch(n){case"decimal":return w.formatNumber(t,"decimal");case"currency":return w.formatNumber(t,"currency");case"percentage":default:return`${Math.round(r)}%`}},O=()=>{const t=Math.floor(Math.random()*360),l=60+Math.floor(Math.random()*30),n=45+Math.floor(Math.random()*20);return((o,a,c)=>{a/=100,c/=100;const s=a*Math.min(c,1-c),d=u=>{const i=(u+o/30)%12,e=c-s*Math.max(Math.min(i-3,9-i,1),-1);return Math.round(255*e).toString(16).padStart(2,"0")};return`#${d(0)}${d(8)}${d(4)}`})(t,l,n)},A=(t,l)=>Array.isArray(t)?t[l]||O():typeof t=="string"?t:O(),B=t=>{const l=t.labels??[],n=t.datasets[0];return n?(n.data??[]).map((o,a)=>({label:l[a]??"",value:o,backgroundColor:A(n.backgroundColor,a)})):[]},R=(t,l)=>{if(!l)return{labels:t.map(e=>e.label),values:t.map(e=>e.value),colors:t.map(e=>e.backgroundColor||O()),mergedMap:{}};const{mode:n,value:r,otherLabel:o="Other",otherBackgroundColor:a="#B0BEC5"}=l,c=t.reduce((e,p)=>e+p.value,0),s=[],d=[];let u=0;t.forEach(e=>{(n==="percentage"?e.value/c*100<r:e.value<r)?(u+=e.value,d.push(e)):s.push({label:e.label,value:e.value,color:e.backgroundColor||O()})});const i={};return u>0&&(s.push({label:o,value:u,color:a}),i[s.length-1]=d),{labels:s.map(e=>e.label),values:s.map(e=>e.value),colors:s.map(e=>e.color),mergedMap:i}},F=(t,l,n)=>({chart:r,tooltip:o})=>{var g,f,b,m,v,x,y,M,S,k;const a={};if(o.opacity===0){t(P=>({...P,style:{...P.style,opacity:0,pointerEvents:"none"}}));return}if(!o.dataPoints||o.dataPoints.length===0)return;a.opacity="1",a.position="absolute",a.pointerEvents="none";const c=r.canvas.getBoundingClientRect();a.left=c.left+window.pageXOffset+o.caretX+"px",a.top=c.top+window.pageYOffset+o.caretY+"px";const s=o.dataPoints[0].dataIndex,d=((f=(g=o.dataPoints)==null?void 0:g[0])==null?void 0:f.label)??"",u=((m=(b=o.dataPoints)==null?void 0:b[0])==null?void 0:m.raw)??0,i=((y=(x=(v=o.dataPoints)==null?void 0:v[0])==null?void 0:x.dataset.backgroundColor)==null?void 0:y[s])??"",e=((k=(S=(M=o.dataPoints)==null?void 0:M[0])==null?void 0:S.dataset.data)==null?void 0:k.reduce((P,q)=>P+q,0))||1,p=e>0?u/e*100:0;t({label:d,value:u,percentage:p,formattedValue:I(u,e,l),backgroundColor:typeof i=="string"?i:"#000",mergedItems:n[s]??[],style:a,dataPoints:o.dataPoints})},V=(t,l)=>({id:"pieLabelPlugin",afterDraw(n){const{ctx:r}=n,o=n.getDatasetMeta(0),a=n.data.datasets[0].data.reduce((c,s)=>c+s,0);o.data.forEach((c,s)=>{var f;const u=n.data.datasets[0].data[s]??0;if((a>0?u/a*100:0)<l)return;const{x:e,y:p}=c.tooltipPosition(!1),g=(f=n.data.labels)==null?void 0:f[s];r.save(),r.textAlign="center",r.textBaseline="middle",r.fillStyle="#FFFFFF",r.font="bold 10px Inter, sans-serif",r.fillText(g,e||0,(p||0)-6),r.fillText(I(u,a,t),e||0,(p||0)+8),r.restore()})}}),$={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1},tooltip:{enabled:!0}},elements:{arc:{hoverOffset:8,borderWidth:0}}},D=({data:t,height:l,classNameContainer:n,id:r,options:o,CustomTooltip:a,threshold:c,valueFormat:s,hideLabelBelowPercentage:d=5})=>{const[u,i]=h.useState({style:{opacity:0,position:"absolute",left:0,top:0},label:"",value:0,percentage:0,formattedValue:"",backgroundColor:"",mergedItems:[],dataPoints:[]}),e=h.useMemo(()=>B(t),[t]),{labels:p,values:g,colors:f,mergedMap:b}=h.useMemo(()=>R(e,c),[e,c]),m=h.useMemo(()=>({labels:p,datasets:[{...t.datasets[0],data:g,backgroundColor:f,hoverOffset:8,borderWidth:0}]}),[p,g,f,t.datasets]),v=h.useMemo(()=>{const x={plugins:{tooltip:{enabled:!a,external:a?({chart:y,tooltip:M})=>F(i,s,b)({chart:y,tooltip:M}):void 0}}};return w.mergeObjects($,x,o??{})},[o,a,s,b]);return C.jsxs("div",{id:r,className:n,style:{height:l||"300px"},children:[a&&C.jsx(T.default,{selector:"body",children:C.jsx(a,{...u})}),C.jsx(E.Pie,{data:m,options:v,plugins:[V(s,d)]})]})};exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),v=require("chart.js"),g=require("react"),S=require("react-chartjs-2"),x=require("../../utils/common.cjs"),k=require("../PortalComponent/PortalComponent.cjs");v.Chart.register(v.ArcElement,v.Tooltip);const M=(t,l,n)=>{const r=l>0?t/l*100:0;switch(n){case"decimal":return x.formatNumber(t,"decimal");case"currency":return x.formatNumber(t,"currency");default:return`${Math.round(r)}%`}},m=()=>{const t=Math.floor(Math.random()*360),l=60+Math.floor(Math.random()*30),n=45+Math.floor(Math.random()*20);return((o,a,c)=>{a/=100,c/=100;const s=a*Math.min(c,1-c),d=u=>{const i=(u+o/30)%12,e=c-s*Math.max(Math.min(i-3,9-i,1),-1);return Math.round(255*e).toString(16).padStart(2,"0")};return`#${d(0)}${d(8)}${d(4)}`})(t,l,n)},I=(t,l)=>Array.isArray(t)?t[l]||m():typeof t=="string"?t:m(),q=t=>{const l=t.labels??[],n=t.datasets[0];return n?(n.data??[]).map((o,a)=>({label:l[a]??"",value:o,backgroundColor:I(n.backgroundColor,a)})):[]},E=(t,l)=>{if(!l)return{labels:t.map(e=>e.label),values:t.map(e=>e.value),colors:t.map(e=>e.backgroundColor||m()),mergedMap:{}};const{mode:n,value:r,otherLabel:o="Other",otherBackgroundColor:a="#B0BEC5"}=l,c=t.reduce((e,p)=>e+p.value,0),s=[],d=[];let u=0;t.forEach(e=>{(n==="percentage"?e.value/c*100<r:e.value<r)?(u+=e.value,d.push(e)):s.push({label:e.label,value:e.value,color:e.backgroundColor||m()})});const i={};return u>0&&(s.push({label:o,value:u,color:a}),i[s.length-1]=d),{labels:s.map(e=>e.label),values:s.map(e=>e.value),colors:s.map(e=>e.color),mergedMap:i}},T=(t,l,n)=>({chart:r,tooltip:o})=>{const a={};if(o.opacity===0){t(f=>({...f,style:{...f.style,opacity:0,pointerEvents:"none"}}));return}if(!o.dataPoints||o.dataPoints.length===0)return;a.opacity="1",a.position="absolute",a.pointerEvents="none";const c=r.canvas.getBoundingClientRect();a.left=c.left+window.pageXOffset+o.caretX+"px",a.top=c.top+window.pageYOffset+o.caretY+"px";const s=o.dataPoints[0].dataIndex,d=o.dataPoints?.[0]?.label??"",u=o.dataPoints?.[0]?.raw??0,i=o.dataPoints?.[0]?.dataset.backgroundColor?.[s]??"",e=o.dataPoints?.[0]?.dataset.data?.reduce((f,b)=>f+b,0)||1,p=e>0?u/e*100:0;t({label:d,value:u,percentage:p,formattedValue:M(u,e,l),backgroundColor:typeof i=="string"?i:"#000",mergedItems:n[s]??[],style:a,dataPoints:o.dataPoints})},A=(t,l)=>({id:"pieLabelPlugin",afterDraw(n){const{ctx:r}=n,o=n.getDatasetMeta(0),a=n.data.datasets[0].data.reduce((c,s)=>c+s,0);o.data.forEach((c,s)=>{const u=n.data.datasets[0].data[s]??0;if((a>0?u/a*100:0)<l)return;const{x:e,y:p}=c.tooltipPosition(!1),f=n.data.labels?.[s];r.save(),r.textAlign="center",r.textBaseline="middle",r.fillStyle="#FFFFFF",r.font="bold 10px Inter, sans-serif",r.fillText(f,e||0,(p||0)-6),r.fillText(M(u,a,t),e||0,(p||0)+8),r.restore()})}}),B={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1},tooltip:{enabled:!0}},elements:{arc:{hoverOffset:8,borderWidth:0}}},R=({data:t,height:l,classNameContainer:n,id:r,options:o,CustomTooltip:a,threshold:c,valueFormat:s,hideLabelBelowPercentage:d=5})=>{const[u,i]=g.useState({style:{opacity:0,position:"absolute",left:0,top:0},label:"",value:0,percentage:0,formattedValue:"",backgroundColor:"",mergedItems:[],dataPoints:[]}),e=g.useMemo(()=>q(t),[t]),{labels:p,values:f,colors:b,mergedMap:y}=g.useMemo(()=>E(e,c),[e,c]),P=g.useMemo(()=>({labels:p,datasets:[{...t.datasets[0],data:f,backgroundColor:b,hoverOffset:8,borderWidth:0}]}),[p,f,b,t.datasets]),C=g.useMemo(()=>{const O={plugins:{tooltip:{enabled:!a,external:a?({chart:j,tooltip:w})=>T(i,s,y)({chart:j,tooltip:w}):void 0}}};return x.mergeObjects(B,O,o??{})},[o,a,s,y]);return h.jsxs("div",{id:r,className:n,style:{height:l||"300px"},children:[a&&h.jsx(k.default,{selector:"body",children:h.jsx(a,{...u})}),h.jsx(S.Pie,{data:P,options:C,plugins:[A(s,d)]})]})};exports.default=R;