1mpacto-react-ui 2.0.16 → 2.0.18

package/dist/components/Chart/DoughnutChart.mjs

@@ -0,0 +1,173 @@
+import { jsxs as L, 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
+      };
+    }, 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
+      };
+      return document.body.removeChild(o), o = null, r;
+    }, S = w(), b = parseFloat(parseFloat($).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);
+      }
+      s.fillText(l, I, r);
+    }
+    s.restore(), s.save();
+  }
+}, V = ({
+  labels: f,
+  data: n,
+  backgroundColor: C,
+  options: g = {},
+  redraw: m,
+  widthInnerDoughnut: v,
+  innerLabels: x,
+  open: y = !0,
+  keyRemoveDataOpen: $ = "gap",
+  keyLabel: s = "title",
+  keyValue: w = "originalValue",
+  keyBackground: D = "backgroundColor",
+  className: S
+}) => {
+  const b = {
+    labels: f || n.map((i) => i[s]),
+    datasets: [
+      {
+        data: n.map((i) => i[w]),
+        backgroundColor: C || n.map((i) => i[D])
+      }
+    ]
+  }, I = {
+    cutout: v,
+    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";
+            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;
+          }
+          if (t.body) {
+            const r = t.title || [];
+            let p = t.body.map(c), l = "<thead>";
+            r.forEach((u) => {
+              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) => {
+              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 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";
+        },
+        displayColors: !0,
+        enabled: !1,
+        callbacks: {
+          title(i) {
+            const e = n[i[0].dataIndex];
+            return e == null ? void 0 : e[s];
+          },
+          label(i) {
+            const e = n == null ? void 0 : n[i.dataIndex];
+            let t = "Nilai: ";
+            return e && (t += e.value), t;
+          }
+        }
+      }
+    },
+    elements: {
+      arc: {
+        borderWidth: 0
+      }
+    }
+  };
+  return /* @__PURE__ */ L("div", { className: S ?? "", children: [
+    !y && /* @__PURE__ */ A(
+      T,
+      {
+        data: b,
+        redraw: m,
+        plugins: [
+          {
+            id: "draw",
+            beforeDraw(i) {
+              j(i, x);
+            }
+          }
+        ],
+        options: Object.keys(g).length > 1 ? g : I
+      }
+    ),
+    y && /* @__PURE__ */ A(
+      T,
+      {
+        data: b,
+        redraw: m,
+        plugins: [
+          {
+            id: "draw",
+            beforeDraw(i) {
+              j(
+                i,
+                x.filter((e) => e.id !== $)
+              );
+            }
+          }
+        ],
+        options: Object.keys(g).length > 1 ? g : I
+      }
+    )
+  ] });
+};
+export {
+  V as default
+};

package/dist/components/Chart/GradientBarChart.cjs

@@ -0,0 +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;

package/dist/components/Chart/GradientBarChart.mjs

@@ -0,0 +1,157 @@
+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" } }));
+    return;
+  }
+  if (!a.dataPoints || a.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
+  });
+}, z = {
+  id: "labelplugin",
+  afterDatasetsDraw(s) {
+    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);
+      });
+    }), n.restore();
+  }
+}, T = {
+  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(s) {
+          return R(s) ?? 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
+  }
+}, 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({
+    dataset: "",
+    label: "",
+    value: 0,
+    style: { opacity: 0, position: "absolute", left: 0, bottom: 0 },
+    dataPoints: []
+  }), l = v.useCallback(function({
+    ctx: P,
+    chartArea: t,
+    scales: d,
+    chartHeight: g,
+    gradientFor: y,
+    item: o
+  }) {
+    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,
+    chartArea: t,
+    scales: d,
+    gradientFor: g,
+    item: y
+  }) {
+    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) => ({
+      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 });
+      },
+      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 });
+      },
+      borderWidth: 0,
+      tension: 0,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      setDigit: !0,
+      ...t,
+      data: t.data
+    }))
+  }), [s]), S = v.useMemo(() => j(T, {
+    plugins: {
+      tooltip: {
+        enabled: !u,
+        external: ({ chart: t, tooltip: d }) => u ? M(x)({ chart: t, tooltip: d }) : 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] })
+  ] });
+};
+export {
+  K as default
+};

package/dist/components/Chart/GradientLineChart.cjs

@@ -0,0 +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;

package/dist/components/Chart/GradientLineChart.mjs

@@ -0,0 +1,143 @@
+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 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;
+  const a = {};
+  if (e.opacity === 0) {
+    r((k) => ({ ...k, style: { ...k.style, opacity: 0, pointerEvents: "none" } }));
+    return;
+  }
+  if (!e.dataPoints || e.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) ?? "";
+  r({
+    dataset: i,
+    label: c,
+    value: n,
+    style: a,
+    dataPoints: e.dataPoints
+  });
+}, W = {
+  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;
+    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());
+  }
+}, z = {
+  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
+  }
+}, 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({
+    dataset: "",
+    label: "",
+    value: 0,
+    style: { opacity: 0, position: "absolute", left: 0, bottom: 0 },
+    dataPoints: []
+  }), y = f.useCallback(function({
+    ctx: h,
+    chartArea: o,
+    scales: s,
+    chartHeight: l,
+    gradientFor: g,
+    item: t
+  }) {
+    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(
+      p,
+      (t == null ? void 0 : t.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"));
+  }, []), v = f.useCallback(function({
+    ctx: h,
+    chartArea: o,
+    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;
+  }, []), B = f.useMemo(() => ({
+    ...r,
+    datasets: r.datasets.map((o) => ({
+      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 });
+      },
+      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 });
+      },
+      borderWidth: 3,
+      tension: 0,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      ...o,
+      data: o.data
+    }))
+  }), [r]), k = f.useMemo(() => N(z, {
+    plugins: {
+      tooltip: {
+        enabled: !c,
+        external: ({ chart: o, tooltip: s }) => c ? H(x)({ chart: o, 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] })
+  ] });
+};
+export {
+  J as default
+};

package/dist/components/Chart/LineChart.cjs

@@ -0,0 +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=$;

package/dist/components/Chart/LineChart.mjs

@@ -0,0 +1,158 @@
+import { jsxs as B, jsx as h } from "react/jsx-runtime";
+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 { 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();
+  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) => {
+    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 = {
+    labels: y,
+    datasets: [
+      {
+        label: "",
+        fill: "blue",
+        backgroundColor: "rgba(75,192,192,1)",
+        borderColor: d,
+        borderCapStyle: "butt",
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBackgroundColor: function(e) {
+          const t = l[e.dataIndex];
+          let o = b;
+          return t.isCurrent && (o = "#ED0019"), o;
+        },
+        pointBorderWidth: 0.1,
+        pointHoverRadius: 4,
+        pointRadius: 5,
+        pointBorderColor: b,
+        pointHoverBorderColor: d,
+        data: x(l).passed || []
+      },
+      {
+        label: "",
+        // showTooltips: false,
+        fill: "grey",
+        backgroundColor: "rgba(75,192,192,1)",
+        borderColor: "#D6D6D6",
+        borderCapStyle: "butt",
+        borderDashOffset: 0,
+        pointRadius: 5,
+        borderJoinStyle: "miter",
+        pointBackgroundColor: b,
+        pointBorderWidth: 0.1,
+        pointHoverRadius: 4,
+        borderDash: [15, 5],
+        data: x(l).notPassed || []
+      }
+    ]
+  }, w = {
+    interaction: {
+      mode: "index",
+      intersect: !1
+    },
+    plugins: {
+      legend: {
+        display: !1,
+        labels: {
+          usePointStyle: !0
+        }
+      },
+      tooltip: {
+        external: function(e) {
+          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 = e.tooltip;
+          if (o.opacity === 0) {
+            t.style.opacity = "0";
+            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;
+          }
+          if (o.body) {
+            const m = o.title || [];
+            let a = o.body.map(c), i = "<thead>";
+            m.forEach((g) => {
+              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) => {
+              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>`;
+              i += `<tr><td>${M}</td></tr>`;
+            }), i += "</tbody>";
+            const D = t.querySelector("table");
+            D && (D.innerHTML = i);
+          }
+          const n = e.chart.canvas.getBoundingClientRect();
+          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 = n.left + window.pageXOffset + o.caretX - 30 + "px", t.style.top = n.top + window.pageYOffset + o.caretY - 60 + "px", t.style.pointerEvents = "none";
+        },
+        displayColors: !0,
+        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 });
+          },
+          label: function(e) {
+            let t = e.dataset.label ?? "";
+            return t && (t += ": "), e.parsed.y !== null && (t += new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(e.parsed.y)), t;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        grid: {
+          display: !1
+        },
+        beginAtZero: !0,
+        ticks: {
+          autoSkip: !0,
+          maxTicksLimit: 20
+        }
+      },
+      y: {
+        min: 0,
+        // position: 'right',
+        // stepSize: 5,
+        grid: {
+          display: !1
+        },
+        beginAtZero: !0,
+        ticks: {
+          maxTicksLimit: 6,
+          callback: function(e) {
+            return P(e) ?? 0;
+          }
+        }
+      }
+    }
+  };
+  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 o = e.fillStyle = "rgba(255, 255, 255, 0)";
+      k(o), C(t);
+    }
+  }, []), /* @__PURE__ */ B("div", { className: u ?? "", children: [
+    /* @__PURE__ */ h(A, { options: w, data: v, height: f }),
+    /* @__PURE__ */ h("div", { className: "iru-h-5", children: /* @__PURE__ */ h("canvas", { ref: s }) })
+  ] });
+};
+export {
+  q as default
+};

package/dist/components/Chips/Chips.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),i=require("./Chips.config.cjs"),a=n.forwardRef((c,l)=>{const{className:p,children:f,fonts:u="inter",size:o="reguler",variants:g="filled-laba-blue-10",icon:s=e.jsx(e.Fragment,{}),removeIcon:t=e.jsx(e.Fragment,{}),typography:r,...h}=c;return e.jsxs("span",{className:`${i.configChips.fonts[u]} ${i.configChips.size[o].style}
+      ${r?i.configChips.typography[r]:i.configChips.size[o].typography}
+      ${i.configChips.variants[g]} ${p??""}`,ref:l,...h,children:[typeof s=="function"&&s(),n.isValidElement(s)&&s,f,typeof t=="function"&&t(),n.isValidElement(t)&&t]})});a.displayName="Chips";exports.default=a;

package/dist/components/Chips/Chips.config.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../config/components/font.cjs"),a=require("../../config/components/typography.cjs"),e=require("./style.module.scss.cjs"),t={fonts:l.configFont,size:{reguler:{style:e.default["chips-reguler"],typography:"laba-subtitle-rb"},small:{style:e.default["chips-small"],typography:"laba-subtitle-sb"},l:{style:e.default["chips-l"],typography:"payhere-label-r"},s:{style:e.default["chips-s"],typography:"payhere-body-esm"}},typography:a.configtypography,variants:{"filled-laba-blue-10":e.default["filled-laba-blue-10"],"filled-gray-300":e.default["filled-gray-300"],"filled-blue-gray-100":e.default["filled-blue-gray-100"],"ghost-laba-grey-02":e.default["ghost-laba-grey-02"],"nude-laba-grey-10":e.default["nude-laba-grey-10"]}};exports.configChips=t;