@erpsquad/common 1.8.7 → 1.8.9

package/dist/components/charts/line-chart/area-lineChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/line-chart/area-lineChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  width?: number | string; // Accept string for percentage width\n  height?: number | string;\n  lineColor?: string;\n  lineFillColor?: string;\n}\n\nconst AreaLineChart: React.FC<LineChartProps> = ({\n  data,\n  width = \"100%\", // Default to responsive width\n  height = 200, // Set a default numeric height\n  lineColor = \"#ADE7CB\",\n  lineFillColor = \"#EBF9F2\",\n  ...rest\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null); // Reference to the container\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useEffect(() => {\n    // Set up ResizeObserver to track container width\n    const resizeObserver = new ResizeObserver(() => {\n      if (containerRef.current) {\n        setContainerWidth(containerRef.current.clientWidth);\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n      setContainerWidth(containerRef.current.clientWidth);\n    }\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (containerWidth === 0) return; // Skip rendering until we have a valid width\n\n    const svg = d3.select(svgRef.current);\n    svg.selectAll(\"*\").remove(); // Clear previous content\n\n    const margin = { top: 5, left: 0, right: 0, bottom: 5 };\n    const chartWidth = containerWidth - margin.left - margin.right; // Use container width\n    const chartHeight = height as number;\n\n    const x = d3\n      .scaleLinear()\n      .domain([0, data.length - 1])\n      .range([0, chartWidth]);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: DataPoint) => d.value) || 1]) // Fallback for empty data\n      .range([chartHeight, 0]);\n\n    const line = d3\n      .line<DataPoint>()\n      .x((_, i) => x(i))\n      .y((d) => y(d.value));\n\n    const area = d3\n      .area<DataPoint>()\n      .x((_, i) => x(i))\n      .y0(chartHeight)\n      .y1((d) => y(d.value));\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", lineColor)\n      .style(\"stroke-width\", 5);\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"area\")\n      .attr(\"d\", area)\n      .style(\"fill\", lineFillColor);\n\n    chart.selectAll(\".domain\").remove();\n    chart.selectAll(\".tick line\").remove();\n  }, [data, height, lineColor, lineFillColor, containerWidth]);\n\n  return (\n    <div ref={containerRef} style={{ width: width, height: height }}>\n      <svg ref={svgRef} width=\"100%\" height=\"100%\" {...rest}></svg>\n    </div>\n  );\n};\n\nexport default AreaLineChart;\n"],"names":["data","width","height","lineColor","lineFillColor","rest","svgRef","useRef","containerRef","containerWidth","setContainerWidth","useState","useEffect","resizeObserver","ResizeObserver","current","clientWidth","observe","disconnect","svg","d3.select","selectAll","remove","chartWidth","chartHeight","x","d3.scaleLinear","domain","length","range","y","d3.max","d","value","line","d3.line","_","i","area","d3.area","y0","y1","chart","append","attr","datum","style","ref","children"],"mappings":"sdAgBgD,EAC9CA,OACAC,QAAQ,OACRC,SAAS,IACTC,YAAY,UACZC,gBAAgB,aACbC,MAEH,MAAMC,EAASC,EAAAA,OAAsB,MAC/BC,EAAeD,EAAAA,OAAuB,OACrCE,EAAgBC,GAAqBC,EAAAA,SAAS,GAyErD,OAvEAC,EAAAA,UAAU,KAER,MAAMC,EAAiB,IAAIC,eAAe,KACpCN,EAAaO,SACfL,EAAkBF,EAAaO,QAAQC,eAS3C,OALIR,EAAaO,UACfF,EAAeI,QAAQT,EAAaO,SACpCL,EAAkBF,EAAaO,QAAQC,cAGlC,IAAMH,EAAeK,cAC3B,IAEHN,EAAAA,UAAU,KACR,GAAuB,IAAnBH,EAAsB,OAE1B,MAAMU,EAAMC,EAAAA,QAAUd,EAAOS,SAC7BI,EAAIE,UAAU,KAAKC,SAEnB,MACMC,EAAad,EADY,EAAU,EAEnCe,EAActB,EAEduB,EAAIC,EAAAA,UAEPC,OAAO,CAAC,EAAG3B,EAAK4B,OAAS,IACzBC,MAAM,CAAC,EAAGN,IAEPO,EAAIJ,EAAAA,UAEPC,OAAO,CAAC,EAAGI,EAAAA,QAAO/B,EAAOgC,GAAiBA,EAAEC,QAAU,IACtDJ,MAAM,CAACL,EAAa,IAEjBU,EAAOC,EAAAA,UAEVV,EAAE,CAACW,EAAGC,IAAMZ,EAAEY,IACdP,EAAGE,GAAMF,EAAEE,EAAEC,QAEVK,EAAOC,EAAAA,UAEVd,EAAE,CAACW,EAAGC,IAAMZ,EAAEY,IACdG,GAAGhB,GACHiB,GAAIT,GAAMF,EAAEE,EAAEC,QAEXS,EAAQvB,EACXwB,OAAO,KACPC,KAAK,YAAa,kBAErBF,EACGC,OAAO,QACPE,MAAM7C,GACN4C,KAAK,QAAS,QACdA,KAAK,IAAKV,GACVY,MAAM,OAAQ,QACdA,MAAM,SAAU3C,GAChB2C,MAAM,eAAgB,GAEzBJ,EACGC,OAAO,QACPE,MAAM7C,GACN4C,KAAK,QAAS,QACdA,KAAK,IAAKN,GACVQ,MAAM,OAAQ1C,GAEjBsC,EAAMrB,UAAU,WAAWC,SAC3BoB,EAAMrB,UAAU,cAAcC,UAC7B,CAACtB,EAAME,EAAQC,EAAWC,EAAeK,yBAGzC,MAAA,CAAIsC,IAAKvC,EAAcsC,MAAO,CAAE7C,QAAcC,UAC7C8C,8BAAC,MAAA,CAAID,IAAKzC,EAAQL,MAAM,OAAOC,OAAO,UAAWG"}

package/dist/components/charts/line-chart/line-chart/index.esm.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect } from "react";
+import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
+import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
+import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
+import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
+import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
+import { axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
+const formatNumber = (num) => {
+  if (num >= 1e9) return (num / 1e9).toFixed(1) + "B";
+  if (num >= 1e6) return (num / 1e6).toFixed(1) + "M";
+  if (num >= 1e3) return (num / 1e3).toFixed(1) + "K";
+  return num;
+};
+const LineChart = ({
+  data,
+  numOfLines = 5,
+  width = 500,
+  height = 300
+}) => {
+  const svgRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const maxValue = useMemo(() => {
+    return Math.max(...data.map((d) => d.value));
+  }, [data]);
+  const yAxisMaxValue = useMemo(() => {
+    return maxValue * 1.25;
+  }, [maxValue]);
+  const yAxisTicks = useMemo(() => {
+    const ticks = [];
+    const interval = yAxisMaxValue / numOfLines;
+    for (let i = 0; i <= numOfLines; i++) {
+      ticks.push(interval * i);
+    }
+    return ticks;
+  }, [yAxisMaxValue, numOfLines]);
+  const needsHorizontalScroll = data.length > 12;
+  const minGroupWidth = 120;
+  const calculatedChartWidth = needsHorizontalScroll ? Math.max(data.length * minGroupWidth, width) : width;
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const newWidth = entries[0].contentRect.width;
+        setContainerWidth(newWidth);
+      }
+    });
+    if (wrapper) {
+      resizeObserver.observe(wrapper);
+    }
+    return () => {
+      if (wrapper) {
+        resizeObserver.unobserve(wrapper);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const svg = select(svgRef.current);
+    svg.selectAll("*").remove();
+    const margin = { top: 20, right: 20, bottom: 70, left: 40 };
+    const barWidth = calculatedChartWidth - margin.left - margin.right;
+    const barHeight = height - margin.top - margin.bottom;
+    const mousemove = (event, d) => {
+      const xPosition = event.offsetX + margin.left - 25;
+      const yPosition = event.offsetY + margin.top - 40;
+      const text = `${d.label} - ${d.value}`;
+      tooltip.attr("x", xPosition).attr("y", yPosition).style("opacity", 9).style("height", text.length >= 16 ? 50 : 35);
+      tooltipText.html(text);
+    };
+    const mouseleave = () => {
+      tooltip.style("opacity", 0);
+    };
+    const x = band().domain(data.map((d) => d.label)).range([0, barWidth]).padding(0.1);
+    const y = linear().domain([0, max(data, (d) => d.value)]).range([barHeight, 0]);
+    const chart = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+    const line$1 = line().x((d) => x(d.label) + x.bandwidth() / 2).y((d) => y(d.value));
+    chart.append("path").datum(data).attr("class", "line").attr("d", line$1).style("fill", "none").style("stroke", "#357AF6").style("stroke-width", 2);
+    chart.selectAll(".point").data(data).enter().append("circle").attr("class", "point").attr("cx", (d) => x(d.label) + x.bandwidth() / 2).attr("cy", (d) => y(d.value)).attr("r", 4).style("fill", "#357AF6").on("mousemove", mousemove).on("mouseleave", mouseleave);
+    yAxisTicks.slice(1).forEach((tick) => {
+      chart.append("line").attr("class", "dotted-line").attr("x1", 0).attr("y1", y(tick)).attr("x2", width).attr("y2", y(tick)).style("stroke", "gray").style("stroke-dasharray", "3,3");
+    });
+    const xAxis = chart.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${barHeight})`).call(axisBottom(x));
+    xAxis.selectAll(".tick line").remove();
+    const yAxis = chart.append("g").attr("class", "y-axis").call(
+      axisLeft(y).tickValues(yAxisTicks).tickFormat((d) => {
+        return formatNumber(d);
+      }).tickSizeOuter(0),
+      0
+    );
+    yAxis.selectAll(".domain").remove();
+    yAxis.selectAll(".tick line").remove();
+    const tooltip = svg.append("foreignObject").attr("class", "tooltip").attr("width", 120).attr("height", 20).style("opacity", 0).style("position", "absolute").style("background-color", "white").style("border", "none").style("box-shadow", "0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius", "0.313rem").style("padding", "0.625rem").style("font-size", "0.75rem");
+    const tooltipText = tooltip.append("xhtml:div").style("font-size", "0.75rem").style("color", "black");
+  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref: svgRef,
+      width: calculatedChartWidth,
+      height,
+      viewBox: `0 0 ${calculatedChartWidth} ${height}`
+    }
+  ) });
+};
+export {
+  LineChart as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/line-chart/line-chart/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/line-chart/line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst LineChart: React.FC<LineChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  const needsHorizontalScroll = data.length > 12;\n  const minGroupWidth = 120; \n  const calculatedChartWidth = needsHorizontalScroll \n      ? Math.max(data.length * minGroupWidth, width)\n      : width;\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n  useEffect(() => {\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = calculatedChartWidth - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: any, d: any) => {\n\n      const xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d: any) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: any) => d.value)])\n      .range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    const line = d3\n      .line<DataPoint>()\n      //@ts-expect-error not applicable\n      .x((d: any) => x(d.label) + x.bandwidth() / 2)\n      .y((d: any) => y(d.value));\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", \"#357AF6\")\n      .style(\"stroke-width\", 2);\n\n    chart\n      .selectAll(\".point\")\n      .data(data)\n      .enter()\n      .append(\"circle\")\n      .attr(\"class\", \"point\")\n      //@ts-expect-error not applicable\n      .attr(\"cx\", (d: any) => x(d.label) + x.bandwidth() / 2)\n      .attr(\"cy\", (d: any) => y(d.value))\n      .attr(\"r\", 4)\n      .style(\"fill\", \"#357AF6\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    yAxisTicks.slice(1).forEach((tick) => {\n      chart\n        .append(\"line\")\n        .attr(\"class\", \"dotted-line\")\n        .attr(\"x1\", 0)\n        .attr(\"y1\", y(tick))\n        .attr(\"x2\", width)\n        .attr(\"y2\", y(tick))\n        .style(\"stroke\", \"gray\")\n        .style(\"stroke-dasharray\", \"3,3\");\n    });\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x));\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0),\n        0,\n      );\n\n    yAxis.selectAll(\".domain\").remove();\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);\n\n  return (\n    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n        <svg \n            ref={svgRef}\n            width={calculatedChartWidth}\n            height={height}\n            viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n        />\n    </div>\n  );\n};\n\nexport default LineChart;\n"],"names":["d3.select","d3.scaleBand","d3.scaleLinear","d3.max","line","d3.line","d3.axisBottom","d3.axisLeft"],"mappings":";;;;;;;;AAeA,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,OAAO,IAAK,SAAQ,MAAM,KAAK,QAAQ,CAAC,IAAI;AAChD,MAAI,OAAO,IAAK,SAAQ,MAAM,KAAK,QAAQ,CAAC,IAAI;AAChD,MAAI,OAAO,IAAK,SAAQ,MAAM,KAAK,QAAQ,CAAC,IAAI;AAChD,SAAO;AACT;AAEA,MAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,SAAS;AACX,MAAM;AACJ,QAAM,SAAS,OAAsB,IAAI;AACzC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,EAC7C,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,gBAAgB,QAAQ,MAAM;AAClC,WAAO,WAAW;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,QAAQ,CAAA;AACd,UAAM,WAAW,gBAAgB;AACjC,aAAS,IAAI,GAAG,KAAK,YAAY,KAAK;AACpC,YAAM,KAAK,WAAW,CAAC;AAAA,IACzB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,UAAU,CAAC;AAE9B,QAAM,wBAAwB,KAAK,SAAS;AAC5C,QAAM,gBAAgB;AACtB,QAAM,uBAAuB,wBACvB,KAAK,IAAI,KAAK,SAAS,eAAe,KAAK,IAC3C;AACJ,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAE3B,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACnD,UAAI,QAAQ,CAAC,GAAG;AACZ,cAAM,WAAW,QAAQ,CAAC,EAAE,YAAY;AACxC,0BAAkB,QAAQ;AAAA,MAC9B;AAAA,IACJ,CAAC;AAED,QAAI,SAAS;AACT,qBAAe,QAAQ,OAAO;AAAA,IAClC;AAEA,WAAO,MAAM;AACT,UAAI,SAAS;AACT,uBAAe,UAAU,OAAO;AAAA,MACpC;AAAA,IACJ;AAAA,EACJ,GAAG,CAAA,CAAE;AACP,YAAU,MAAM;AACd,UAAM,MAAMA,OAAU,OAAO,OAAO;AAEpC,QAAI,UAAU,GAAG,EAAE,OAAA;AAEnB,UAAM,SAAS,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AACvD,UAAM,WAAW,uBAAuB,OAAO,OAAO,OAAO;AAC7D,UAAM,YAAY,SAAS,OAAO,MAAM,OAAO;AAE/C,UAAM,YAAY,CAAC,OAAY,MAAW;AAExC,YAAM,YAAY,MAAM,UAAU,OAAO,OAAO;AAChD,YAAM,YAAY,MAAM,UAAU,OAAO,MAAM;AAC/C,YAAM,OAAO,GAAG,EAAE,KAAK,MAAM,EAAE,KAAK;AACpC,cACG,KAAK,KAAK,SAAS,EACnB,KAAK,KAAK,SAAS,EACnB,MAAM,WAAW,CAAC,EAClB,MAAM,UAAU,KAAK,UAAU,KAAK,KAAK,EAAE;AAE9C,kBAAY,KAAK,IAAI;AAAA,IACvB;AAEA,UAAM,aAAa,MAAM;AACvB,cAAQ,MAAM,WAAW,CAAC;AAAA,IAC5B;AAEA,UAAM,IAAIC,OAEP,OAAO,KAAK,IAAI,CAAC,MAAW,EAAE,KAAK,CAAC,EACpC,MAAM,CAAC,GAAG,QAAQ,CAAC,EACnB,QAAQ,GAAG;AAEd,UAAM,IAAIC,SAEP,OAAO,CAAC,GAAGC,IAAO,MAAM,CAAC,MAAW,EAAE,KAAK,CAAC,CAAC,EAC7C,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvB,UAAM,QAAQ,IACX,OAAO,GAAG,EACV,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG;AAE9D,UAAMC,SAAOC,KACV,EAEA,EAAE,CAAC,MAAW,EAAE,EAAE,KAAK,IAAI,EAAE,UAAA,IAAc,CAAC,EAC5C,EAAE,CAAC,MAAW,EAAE,EAAE,KAAK,CAAC;AAE3B,UACG,OAAO,MAAM,EACb,MAAM,IAAI,EACV,KAAK,SAAS,MAAM,EACpB,KAAK,KAAKD,MAAI,EACd,MAAM,QAAQ,MAAM,EACpB,MAAM,UAAU,SAAS,EACzB,MAAM,gBAAgB,CAAC;AAE1B,UACG,UAAU,QAAQ,EAClB,KAAK,IAAI,EACT,MAAA,EACA,OAAO,QAAQ,EACf,KAAK,SAAS,OAAO,EAErB,KAAK,MAAM,CAAC,MAAW,EAAE,EAAE,KAAK,IAAI,EAAE,UAAA,IAAc,CAAC,EACrD,KAAK,MAAM,CAAC,MAAW,EAAE,EAAE,KAAK,CAAC,EACjC,KAAK,KAAK,CAAC,EACX,MAAM,QAAQ,SAAS,EACvB,GAAG,aAAa,SAAS,EACzB,GAAG,cAAc,UAAU;AAE9B,eAAW,MAAM,CAAC,EAAE,QAAQ,CAAC,SAAS;AACpC,YACG,OAAO,MAAM,EACb,KAAK,SAAS,aAAa,EAC3B,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,EAAE,IAAI,CAAC,EAClB,KAAK,MAAM,KAAK,EAChB,KAAK,MAAM,EAAE,IAAI,CAAC,EAClB,MAAM,UAAU,MAAM,EACtB,MAAM,oBAAoB,KAAK;AAAA,IACpC,CAAC;AAED,UAAM,QAAQ,MACX,OAAO,GAAG,EACV,KAAK,SAAS,QAAQ,EACtB,KAAK,aAAa,gBAAgB,SAAS,GAAG,EAC9C,KAAKE,WAAc,CAAC,CAAC;AAExB,UAAM,UAAU,YAAY,EAAE,OAAA;AAE9B,UAAM,QAAQ,MACX,OAAO,GAAG,EACV,KAAK,SAAS,QAAQ,EACtB;AAAA,MACCC,SACY,CAAC,EACV,WAAW,UAAU,EAErB,WAAW,CAAC,MAAW;AACtB,eAAO,aAAa,CAAC;AAAA,MACvB,CAAC,EACA,cAAc,CAAC;AAAA,MAClB;AAAA,IAAA;AAGJ,UAAM,UAAU,SAAS,EAAE,OAAA;AAC3B,UAAM,UAAU,YAAY,EAAE,OAAA;AAE9B,UAAM,UAAU,IACb,OAAO,eAAe,EACtB,KAAK,SAAS,SAAS,EACvB,KAAK,SAAS,GAAG,EACjB,KAAK,UAAU,EAAE,EACjB,MAAM,WAAW,CAAC,EAClB,MAAM,YAAY,UAAU,EAC5B,MAAM,oBAAoB,OAAO,EACjC,MAAM,UAAU,MAAM,EACtB,MAAM,cAAc,6CAA6C,EACjE,MAAM,iBAAiB,UAAU,EACjC,MAAM,WAAW,UAAU,EAC3B,MAAM,aAAa,SAAS;AAE/B,UAAM,cAAc,QACjB,OAAO,WAAW,EAClB,MAAM,aAAa,SAAS,EAC5B,MAAM,SAAS,OAAO;AAAA,EAC3B,GAAG,CAAC,MAAM,QAAQ,OAAO,eAAe,YAAY,oBAAoB,CAAC;AAEzE,SACE,oBAAC,OAAA,EAAI,KAAK,YAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,GAClD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA,SAAS,OAAO,oBAAoB,IAAI,MAAM;AAAA,IAAA;AAAA,EAAA,GAEtD;AAEJ;"}

package/dist/components/charts/line-chart/line-chart/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),s=require("../../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../../node_modules/d3-array/src/max/index.js"),l=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-shape/src/line/index.js"),o=require("../../../../node_modules/d3-axis/src/axis/index.js");exports.default=({data:i,numOfLines:d=5,width:c=500,height:u=300})=>{const m=t.useRef(null),h=t.useRef(null),p=t.useMemo(()=>Math.max(...i.map(e=>e.value)),[i]),y=t.useMemo(()=>1.25*p,[p]),x=t.useMemo(()=>{const e=[],t=y/d;for(let r=0;r<=d;r++)e.push(t*r);return e},[y,d]),f=i.length>12?Math.max(120*i.length,c):c;return t.useEffect(()=>{const e=h.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;setContainerWidth(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{const e=l.default(m.current);e.selectAll("*").remove();const t=f-40-20,d=u-20-70,h=r.default().domain(i.map(e=>e.label)).range([0,t]).padding(.1),p=s.default().domain([0,a.default(i,e=>e.value)]).range([d,0]),y=e.append("g").attr("transform","translate(40,20)"),v=n.default().x(e=>h(e.label)+h.bandwidth()/2).y(e=>p(e.value));y.append("path").datum(i).attr("class","line").attr("d",v).style("fill","none").style("stroke","#357AF6").style("stroke-width",2),y.selectAll(".point").data(i).enter().append("circle").attr("class","point").attr("cx",e=>h(e.label)+h.bandwidth()/2).attr("cy",e=>p(e.value)).attr("r",4).style("fill","#357AF6").on("mousemove",(e,t)=>{const r=e.offsetX+40-25,s=e.offsetY+20-40,a=`${t.label} - ${t.value}`;b.attr("x",r).attr("y",s).style("opacity",9).style("height",a.length>=16?50:35),w.html(a)}).on("mouseleave",()=>{b.style("opacity",0)}),x.slice(1).forEach(e=>{y.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",p(e)).attr("x2",c).attr("y2",p(e)).style("stroke","gray").style("stroke-dasharray","3,3")}),y.append("g").attr("class","x-axis").attr("transform",`translate(0, ${d})`).call(o.axisBottom(h)).selectAll(".tick line").remove();const g=y.append("g").attr("class","y-axis").call(o.axisLeft(p).tickValues(x).tickFormat(e=>{return(t=e)>=1e9?(t/1e9).toFixed(1)+"B":t>=1e6?(t/1e6).toFixed(1)+"M":t>=1e3?(t/1e3).toFixed(1)+"K":t;var t}).tickSizeOuter(0),0);g.selectAll(".domain").remove(),g.selectAll(".tick line").remove();const b=e.append("foreignObject").attr("class","tooltip").attr("width",120).attr("height",20).style("opacity",0).style("position","absolute").style("background-color","white").style("border","none").style("box-shadow","0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius","0.313rem").style("padding","0.625rem").style("font-size","0.75rem"),w=b.append("xhtml:div").style("font-size","0.75rem").style("color","black")},[i,u,c,y,x,f]),/* @__PURE__ */e.jsx("div",{ref:h,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("svg",{ref:m,width:f,height:u,viewBox:`0 0 ${f} ${u}`})})};
+//# sourceMappingURL=index.js.map

package/dist/components/charts/line-chart/line-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/line-chart/line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst LineChart: React.FC<LineChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  const needsHorizontalScroll = data.length > 12;\n  const minGroupWidth = 120; \n  const calculatedChartWidth = needsHorizontalScroll \n      ? Math.max(data.length * minGroupWidth, width)\n      : width;\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n  useEffect(() => {\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = calculatedChartWidth - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: any, d: any) => {\n\n      const xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d: any) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: any) => d.value)])\n      .range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    const line = d3\n      .line<DataPoint>()\n      //@ts-expect-error not applicable\n      .x((d: any) => x(d.label) + x.bandwidth() / 2)\n      .y((d: any) => y(d.value));\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", \"#357AF6\")\n      .style(\"stroke-width\", 2);\n\n    chart\n      .selectAll(\".point\")\n      .data(data)\n      .enter()\n      .append(\"circle\")\n      .attr(\"class\", \"point\")\n      //@ts-expect-error not applicable\n      .attr(\"cx\", (d: any) => x(d.label) + x.bandwidth() / 2)\n      .attr(\"cy\", (d: any) => y(d.value))\n      .attr(\"r\", 4)\n      .style(\"fill\", \"#357AF6\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    yAxisTicks.slice(1).forEach((tick) => {\n      chart\n        .append(\"line\")\n        .attr(\"class\", \"dotted-line\")\n        .attr(\"x1\", 0)\n        .attr(\"y1\", y(tick))\n        .attr(\"x2\", width)\n        .attr(\"y2\", y(tick))\n        .style(\"stroke\", \"gray\")\n        .style(\"stroke-dasharray\", \"3,3\");\n    });\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x));\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0),\n        0,\n      );\n\n    yAxis.selectAll(\".domain\").remove();\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);\n\n  return (\n    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n        <svg \n            ref={svgRef}\n            width={calculatedChartWidth}\n            height={height}\n            viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n        />\n    </div>\n  );\n};\n\nexport default LineChart;\n"],"names":["data","numOfLines","width","height","svgRef","useRef","wrapperRef","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","push","calculatedChartWidth","length","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","setContainerWidth","observe","unobserve","svg","d3.select","selectAll","remove","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","y","d3.scaleLinear","d3.max","chart","append","attr","line","d3.line","bandwidth","datum","style","enter","on","event","xPosition","offsetX","yPosition","offsetY","text","tooltip","tooltipText","html","slice","forEach","tick","call","d3.axisBottom","yAxis","d3.axisLeft","tickValues","tickFormat","num","toFixed","tickSizeOuter","jsx","ref","children","viewBox"],"mappings":"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"}

package/dist/components/charts/multiLineChart/multi-line-chart/index.esm.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
+import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
+import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
+import { axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
+import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
+import { monotoneX } from "../../../../node_modules/d3-shape/src/curve/monotone/index.esm.js";
+import curveLinear from "../../../../node_modules/d3-shape/src/curve/linear/index.esm.js";
+import { format } from "../../../../node_modules/d3-format/src/defaultLocale/index.esm.js";
+const formatNumber = (num, symbol, labelType) => {
+  if (labelType === "inPercent") {
+    return `${format(".0%")(num / 100)}`;
+  } else if (labelType === "inValue") {
+    return `${symbol || ""} ${format(".2s")(num).replace("k", "K")}`;
+  }
+  return num.toString();
+};
+const MultiLineChart = ({
+  data,
+  yAxisData,
+  xAxisData,
+  colors = ["steelblue", "orange", "green", "red"],
+  // Default colors
+  height = 400,
+  margin = { top: 20, right: 50, bottom: 30, left: 50 },
+  line: line$1 = false,
+  yAxisLabelType = "inValue",
+  currency,
+  customLabelFormatter
+}) => {
+  const svgRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+  }, [yAxisLabelType]);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const newWidth = entries[0].contentRect.width;
+        setContainerWidth(newWidth);
+      }
+    });
+    if (wrapper) {
+      resizeObserver.observe(wrapper);
+    }
+    return () => {
+      if (wrapper) {
+        resizeObserver.unobserve(wrapper);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (containerWidth === 0) return;
+    const svg = select(svgRef.current);
+    svg.selectAll("*").remove();
+    const innerWidth = containerWidth - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const x = linear().domain([0, xAxisData.length]).range([0, innerWidth]);
+    const y = linear().domain([0, max(yAxisData)]).nice().range([innerHeight, 0]);
+    const xAxis = svg.append("g").attr("class", "x-axis").attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(
+      axisBottom(x).ticks(xAxisData.length - 1).tickFormat((d, i) => xAxisData[i])
+    );
+    xAxis.selectAll("text").attr("transform", "translate(20, 10)").style("text-anchor", "middle");
+    xAxis.select(".domain").attr("stroke", "none");
+    const yAxis = svg.append("g").attr("class", "y-axis").attr("transform", `translate(${margin.left},${margin.top})`).call(axisLeft(y).tickPadding(10).tickFormat(
+      (d) => customLabelFormatter ? customLabelFormatter(d) : formatNumber(d, currency, yAxisLabelType)
+    ).tickSizeOuter(0));
+    if (line$1) {
+      yAxis.selectAll(".grid-line").data(y.ticks()).enter().append("line").attr("class", "grid-line").attr("x1", 0).attr("x2", innerWidth).attr("y1", (d) => y(d)).attr("y2", (d) => y(d)).style("stroke", "#ddd").style("stroke-dasharray", "6,3").style("stroke-width", 1);
+    }
+    xAxis.selectAll(".tick line").remove();
+    yAxis.selectAll(".tick line").remove();
+    yAxis.select(".domain").attr("stroke", "none");
+    Object.keys(data).forEach((key, index) => {
+      var _a, _b, _c;
+      if (key !== "months") {
+        const chartLine = line().x((d, i) => x(i)).y((d) => y(d)).curve(data[key].isSmooth ? monotoneX : curveLinear);
+        svg.append("path").datum((_a = data[key]) == null ? void 0 : _a.data).attr("fill", "none").attr("stroke", colors[index % colors.length]).attr("stroke-width", 2).attr("transform", `translate(${margin.left},${margin.top})`).attr("d", chartLine).on("mouseover", function() {
+          select(this).attr("stroke-width", 4);
+        }).on("mouseout", function() {
+          select(this).attr("stroke-width", 2);
+        });
+        if ((_b = data[key]) == null ? void 0 : _b.displayDot) {
+          svg.selectAll(`.circle-${key}`).data((_c = data[key]) == null ? void 0 : _c.data).enter().append("circle").attr("class", `circle-${key}`).attr("cx", (d, i) => x(i) + margin.left).attr("cy", (d) => y(d) + margin.top).attr("r", 4).attr("fill", colors[index % colors.length]).attr("stroke", "white").attr("stroke-width", 1.5).on("mouseover", function() {
+            select(this).attr("r", 6);
+          }).on("mouseout", function() {
+            select(this).attr("r", 4);
+          });
+        }
+      }
+    });
+  }, [data, yAxisData, xAxisData, height, containerWidth, colors, margin, line$1, yAxisLabelType, currency, customLabelFormatter]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height, viewBox: `0 0 ${containerWidth} ${height}` }) }) });
+};
+export {
+  MultiLineChart as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/multiLineChart/multi-line-chart/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/multiLineChart/multi-line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\n\nexport interface IMultiLineChartProps {\n    data: any;\n    width?: number;\n    height?: number;\n    margin?: { top: number, right: number, bottom: number, left: number };\n    yAxisData: any;\n    xAxisData: any;\n    colors?: string[];\n    line?: boolean;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string\n}\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol||''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\n\n\nconst MultiLineChart = ({\n    data,\n    yAxisData,\n    xAxisData,\n    colors = ['steelblue', 'orange', 'green', 'red'], // Default colors\n    height = 400,\n    margin = { top: 20, right: 50, bottom: 30, left: 50 },\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}: IMultiLineChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    useEffect(() => {\n    }, [yAxisLabelType]);\n    // ResizeObserver to adjust the chart size dynamically\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n      \n        if (containerWidth === 0) return; \n\n        const svg = d3.select(svgRef.current);\n        svg.selectAll(\"*\").remove(); \n\n        const innerWidth = containerWidth-margin.left- margin.right;\n        const innerHeight = height - margin.top - margin.bottom;\n\n        // Scales\n        const x = d3.scaleLinear()\n            .domain([0, xAxisData.length]) // Linear scale based on index of xAxisData\n            .range([0, innerWidth]);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(yAxisData) as number])\n            .nice()\n            .range([innerHeight, 0]);\n\n\n        // Append x-axis\n        const xAxis = svg.append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(${margin.left},${height - margin.bottom})`)\n            .call(d3.axisBottom(x)\n                .ticks(xAxisData.length - 1)\n                .tickFormat((d, i) => xAxisData[i])\n            );\n\n        xAxis.selectAll(\"text\")\n            .attr(\"transform\", \"translate(20, 10)\") // Push labels down by 10px\n            .style(\"text-anchor\", \"middle\"); // Keep the labels centered\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Append y-axis\n        const yAxis = svg.append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            )\n                .tickSizeOuter(0) as any,);\n\n        if (line) {\n            yAxis.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '6,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n        xAxis.selectAll(\".tick line\").remove();\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Plot the lines for each dataset\n\n        Object.keys(data).forEach((key, index) => {\n            if (key !== 'months') {\n                const chartLine = d3.line()\n                    .x((d, i) => x(i)) // Use index-based positioning for x-axis\n                    .y((d: any) => y(d)).curve(data[key].isSmooth ? d3.curveMonotoneX : d3.curveLinear);\n                // Append the line\n                svg.append(\"path\")\n                    .datum(data[key]?.data)\n                    .attr(\"fill\", \"none\")\n                    .attr(\"stroke\", colors[index % colors.length])\n                    .attr(\"stroke-width\", 2)\n                    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n                    .attr(\"d\", chartLine)\n                    .on(\"mouseover\", function () {\n                        d3.select(this).attr(\"stroke-width\", 4);\n                    })\n                    .on(\"mouseout\", function () {\n                        d3.select(this).attr(\"stroke-width\", 2);\n                    });\n\n\n\n                // Append circles for each data point\n                if (data[key]?.displayDot) {\n                    svg.selectAll(`.circle-${key}`)\n                        .data(data[key]?.data)\n                        .enter()\n                        .append(\"circle\")\n                        .attr(\"class\", `circle-${key}`)\n                        .attr(\"cx\", (d, i) => x(i) + margin.left) // Adjust for margin.left\n                        .attr(\"cy\", (d: any) => y(d) + margin.top) // Adjust for margin.top\n                        .attr(\"r\", 4) // Circle radius\n                        .attr(\"fill\", colors[index % colors.length])\n                        .attr(\"stroke\", \"white\") // Optional: adds a border for contrast\n                        .attr(\"stroke-width\", 1.5)\n                        .on(\"mouseover\", function () {\n                            d3.select(this).attr(\"r\", 6); // Increase size on hover\n                        })\n                        .on(\"mouseout\", function () {\n                            d3.select(this).attr(\"r\", 4); // Return to normal size\n                        });\n                }\n\n            }\n        });\n    }, [data, yAxisData, xAxisData, height, containerWidth, colors, margin, line, yAxisLabelType, currency, customLabelFormatter]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} viewBox={`0 0 ${containerWidth} ${height}`} />\n            </div>\n        </div>\n    );\n};\n\nexport default MultiLineChart;\n"],"names":["d3.format","line","d3.select","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","d3.line","d3.curveMonotoneX","d3.curveLinear"],"mappings":";;;;;;;;;;AAgBA,MAAM,eAAe,CAAC,KAAa,QAAgB,cAAsB;AACrE,MAAI,cAAc,aAAa;AAC3B,WAAO,GAAGA,OAAU,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EACzC,WAAW,cAAc,WAAW;AAChC,WAAO,GAAG,UAAQ,EAAE,IAAIA,OAAU,KAAK,EAAE,GAAG,EAAE,QAAQ,KAAK,GAAG,CAAC;AAAA,EACnE;AACA,SAAO,IAAI,SAAA;AACf;AAIA,MAAM,iBAAiB,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC,aAAa,UAAU,SAAS,KAAK;AAAA;AAAA,EAC/C,SAAS;AAAA,EACT,SAAS,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AAAA,EAAG,MACpDC,SAAO;AAAA,EACP,iBAAiB;AAAA,EACjB;AAAA,EACA;AACJ,MAA4B;AACxB,QAAM,SAAS,OAAsB,IAAI;AACzC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,CAAC;AAE9D,YAAU,MAAM;AAAA,EAChB,GAAG,CAAC,cAAc,CAAC;AAEnB,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAE3B,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACnD,UAAI,QAAQ,CAAC,GAAG;AACZ,cAAM,WAAW,QAAQ,CAAC,EAAE,YAAY;AACxC,0BAAkB,QAAQ;AAAA,MAC9B;AAAA,IACJ,CAAC;AAED,QAAI,SAAS;AACT,qBAAe,QAAQ,OAAO;AAAA,IAClC;AAEA,WAAO,MAAM;AACT,UAAI,SAAS;AACT,uBAAe,UAAU,OAAO;AAAA,MACpC;AAAA,IACJ;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AAEZ,QAAI,mBAAmB,EAAG;AAE1B,UAAM,MAAMC,OAAU,OAAO,OAAO;AACpC,QAAI,UAAU,GAAG,EAAE,OAAA;AAEnB,UAAM,aAAa,iBAAe,OAAO,OAAM,OAAO;AACtD,UAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AAGjD,UAAM,IAAIC,OAAG,EACR,OAAO,CAAC,GAAG,UAAU,MAAM,CAAC,EAC5B,MAAM,CAAC,GAAG,UAAU,CAAC;AAE1B,UAAM,IAAIA,OAAG,EACR,OAAO,CAAC,GAAGC,IAAO,SAAS,CAAW,CAAC,EACvC,KAAA,EACA,MAAM,CAAC,aAAa,CAAC,CAAC;AAI3B,UAAM,QAAQ,IAAI,OAAO,GAAG,EACvB,KAAK,SAAS,QAAQ,EACtB,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,SAAS,OAAO,MAAM,GAAG,EACvE;AAAA,MAAKC,WAAc,CAAC,EAChB,MAAM,UAAU,SAAS,CAAC,EAC1B,WAAW,CAAC,GAAG,MAAM,UAAU,CAAC,CAAC;AAAA,IAAA;AAG1C,UAAM,UAAU,MAAM,EACjB,KAAK,aAAa,mBAAmB,EACrC,MAAM,eAAe,QAAQ;AAClC,UAAM,OAAO,SAAS,EAAE,KAAK,UAAU,MAAM;AAG7C,UAAM,QAAQ,IAAI,OAAO,GAAG,EACvB,KAAK,SAAS,QAAQ,EACtB,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG,EAC3D,KAAKC,SAAY,CAAC,EAAE,YAAY,EAAE,EAAE;AAAA,MAAW,CAAC,MAC7C,uBACM,qBAAqB,CAAC,IACtB,aAAa,GAAG,UAAU,cAAc;AAAA,IAAA,EAE7C,cAAc,CAAC,CAAS;AAEjC,QAAIL,QAAM;AACN,YAAM,UAAU,YAAY,EACvB,KAAK,EAAE,OAAO,EACd,MAAA,EACA,OAAO,MAAM,EACb,KAAK,SAAS,WAAW,EACzB,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,UAAU,EACrB,KAAK,MAAM,OAAK,EAAE,CAAC,CAAC,EACpB,KAAK,MAAM,CAAA,MAAK,EAAE,CAAC,CAAC,EACpB,MAAM,UAAU,MAAM,EACtB,MAAM,oBAAoB,KAAK,EAC/B,MAAM,gBAAgB,CAAC;AAAA,IAChC;AACA,UAAM,UAAU,YAAY,EAAE,OAAA;AAC9B,UAAM,UAAU,YAAY,EAAE,OAAA;AAC9B,UAAM,OAAO,SAAS,EAAE,KAAK,UAAU,MAAM;AAI7C,WAAO,KAAK,IAAI,EAAE,QAAQ,CAAC,KAAK,UAAU;;AACtC,UAAI,QAAQ,UAAU;AAClB,cAAM,YAAYM,KAAG,EAChB,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,EAChB,EAAE,CAAC,MAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,EAAE,WAAWC,YAAoBC,WAAc;AAEtF,YAAI,OAAO,MAAM,EACZ,OAAM,UAAK,GAAG,MAAR,mBAAW,IAAI,EACrB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,OAAO,QAAQ,OAAO,MAAM,CAAC,EAC5C,KAAK,gBAAgB,CAAC,EACtB,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG,EAC3D,KAAK,KAAK,SAAS,EACnB,GAAG,aAAa,WAAY;AACzBP,iBAAU,IAAI,EAAE,KAAK,gBAAgB,CAAC;AAAA,QAC1C,CAAC,EACA,GAAG,YAAY,WAAY;AACxBA,iBAAU,IAAI,EAAE,KAAK,gBAAgB,CAAC;AAAA,QAC1C,CAAC;AAKL,aAAI,UAAK,GAAG,MAAR,mBAAW,YAAY;AACvB,cAAI,UAAU,WAAW,GAAG,EAAE,EACzB,MAAK,UAAK,GAAG,MAAR,mBAAW,IAAI,EACpB,MAAA,EACA,OAAO,QAAQ,EACf,KAAK,SAAS,UAAU,GAAG,EAAE,EAC7B,KAAK,MAAM,CAAC,GAAG,MAAM,EAAE,CAAC,IAAI,OAAO,IAAI,EACvC,KAAK,MAAM,CAAC,MAAW,EAAE,CAAC,IAAI,OAAO,GAAG,EACxC,KAAK,KAAK,CAAC,EACX,KAAK,QAAQ,OAAO,QAAQ,OAAO,MAAM,CAAC,EAC1C,KAAK,UAAU,OAAO,EACtB,KAAK,gBAAgB,GAAG,EACxB,GAAG,aAAa,WAAY;AACzBA,mBAAU,IAAI,EAAE,KAAK,KAAK,CAAC;AAAA,UAC/B,CAAC,EACA,GAAG,YAAY,WAAY;AACxBA,mBAAU,IAAI,EAAE,KAAK,KAAK,CAAC;AAAA,UAC/B,CAAC;AAAA,QACT;AAAA,MAEJ;AAAA,IACJ,CAAC;AAAA,EACL,GAAG,CAAC,MAAM,WAAW,WAAW,QAAQ,gBAAgB,QAAQ,QAAQD,QAAM,gBAAgB,UAAU,oBAAoB,CAAC;AAE7H,SACI,oBAAC,OAAA,EAAI,KAAK,YAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,GAClD,UAAA,oBAAC,OAAA,EAAI,OAAO,EAAE,UAAU,WAAA,GACpB,UAAA,oBAAC,OAAA,EAAI,KAAK,QAAQ,OAAM,QAAO,QAAgB,SAAS,OAAO,cAAc,IAAI,MAAM,GAAA,CAAI,GAC/F,GACJ;AAER;"}

package/dist/components/charts/multiLineChart/multi-line-chart/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../../node_modules/d3-array/src/max/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),o=require("../../../../node_modules/d3-axis/src/axis/index.js"),l=require("../../../../node_modules/d3-shape/src/line/index.js"),n=require("../../../../node_modules/d3-shape/src/curve/monotone/index.js"),i=require("../../../../node_modules/d3-shape/src/curve/linear/index.js"),d=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");exports.default=({data:c,yAxisData:u,xAxisData:f,colors:m=["steelblue","orange","green","red"],height:h=400,margin:x={top:20,right:50,bottom:30,left:50},line:p=!1,yAxisLabelType:v="inValue",currency:g,customLabelFormatter:k})=>{const y=t.useRef(null),j=t.useRef(null),[$,b]=t.useState(0);return t.useEffect(()=>{},[v]),t.useEffect(()=>{const e=j.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;b(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===$)return;const e=s.default(y.current);e.selectAll("*").remove();const t=$-x.left-x.right,j=h-x.top-x.bottom,b=r.default().domain([0,f.length]).range([0,t]),w=r.default().domain([0,a.default(u)]).nice().range([j,0]),q=e.append("g").attr("class","x-axis").attr("transform",`translate(${x.left},${h-x.bottom})`).call(o.axisBottom(b).ticks(f.length-1).tickFormat((e,t)=>f[t]));q.selectAll("text").attr("transform","translate(20, 10)").style("text-anchor","middle"),q.select(".domain").attr("stroke","none");const _=e.append("g").attr("class","y-axis").attr("transform",`translate(${x.left},${x.top})`).call(o.axisLeft(w).tickPadding(10).tickFormat(e=>{return k?k(e):(t=e,r=g,"inPercent"===(a=v)?`${d.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${d.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0));p&&_.selectAll(".grid-line").data(w.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",t).attr("y1",e=>w(e)).attr("y2",e=>w(e)).style("stroke","#ddd").style("stroke-dasharray","6,3").style("stroke-width",1),q.selectAll(".tick line").remove(),_.selectAll(".tick line").remove(),_.select(".domain").attr("stroke","none"),Object.keys(c).forEach((t,r)=>{var a,o,d;if("months"!==t){const u=l.default().x((e,t)=>b(t)).y(e=>w(e)).curve(c[t].isSmooth?n.monotoneX:i.default);e.append("path").datum(null==(a=c[t])?void 0:a.data).attr("fill","none").attr("stroke",m[r%m.length]).attr("stroke-width",2).attr("transform",`translate(${x.left},${x.top})`).attr("d",u).on("mouseover",function(){s.default(this).attr("stroke-width",4)}).on("mouseout",function(){s.default(this).attr("stroke-width",2)}),(null==(o=c[t])?void 0:o.displayDot)&&e.selectAll(`.circle-${t}`).data(null==(d=c[t])?void 0:d.data).enter().append("circle").attr("class",`circle-${t}`).attr("cx",(e,t)=>b(t)+x.left).attr("cy",e=>w(e)+x.top).attr("r",4).attr("fill",m[r%m.length]).attr("stroke","white").attr("stroke-width",1.5).on("mouseover",function(){s.default(this).attr("r",6)}).on("mouseout",function(){s.default(this).attr("r",4)})}})},[c,u,f,h,$,m,x,p,v,g,k]),/* @__PURE__ */e.jsx("div",{ref:j,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("div",{style:{position:"relative"},children:/* @__PURE__ */e.jsx("svg",{ref:y,width:"100%",height:h,viewBox:`0 0 ${$} ${h}`})})})};
+//# sourceMappingURL=index.js.map

package/dist/components/charts/multiLineChart/multi-line-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/multiLineChart/multi-line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\n\nexport interface IMultiLineChartProps {\n    data: any;\n    width?: number;\n    height?: number;\n    margin?: { top: number, right: number, bottom: number, left: number };\n    yAxisData: any;\n    xAxisData: any;\n    colors?: string[];\n    line?: boolean;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string\n}\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol||''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\n\n\nconst MultiLineChart = ({\n    data,\n    yAxisData,\n    xAxisData,\n    colors = ['steelblue', 'orange', 'green', 'red'], // Default colors\n    height = 400,\n    margin = { top: 20, right: 50, bottom: 30, left: 50 },\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}: IMultiLineChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    useEffect(() => {\n    }, [yAxisLabelType]);\n    // ResizeObserver to adjust the chart size dynamically\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n      \n        if (containerWidth === 0) return; \n\n        const svg = d3.select(svgRef.current);\n        svg.selectAll(\"*\").remove(); \n\n        const innerWidth = containerWidth-margin.left- margin.right;\n        const innerHeight = height - margin.top - margin.bottom;\n\n        // Scales\n        const x = d3.scaleLinear()\n            .domain([0, xAxisData.length]) // Linear scale based on index of xAxisData\n            .range([0, innerWidth]);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(yAxisData) as number])\n            .nice()\n            .range([innerHeight, 0]);\n\n\n        // Append x-axis\n        const xAxis = svg.append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(${margin.left},${height - margin.bottom})`)\n            .call(d3.axisBottom(x)\n                .ticks(xAxisData.length - 1)\n                .tickFormat((d, i) => xAxisData[i])\n            );\n\n        xAxis.selectAll(\"text\")\n            .attr(\"transform\", \"translate(20, 10)\") // Push labels down by 10px\n            .style(\"text-anchor\", \"middle\"); // Keep the labels centered\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Append y-axis\n        const yAxis = svg.append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            )\n                .tickSizeOuter(0) as any,);\n\n        if (line) {\n            yAxis.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '6,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n        xAxis.selectAll(\".tick line\").remove();\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Plot the lines for each dataset\n\n        Object.keys(data).forEach((key, index) => {\n            if (key !== 'months') {\n                const chartLine = d3.line()\n                    .x((d, i) => x(i)) // Use index-based positioning for x-axis\n                    .y((d: any) => y(d)).curve(data[key].isSmooth ? d3.curveMonotoneX : d3.curveLinear);\n                // Append the line\n                svg.append(\"path\")\n                    .datum(data[key]?.data)\n                    .attr(\"fill\", \"none\")\n                    .attr(\"stroke\", colors[index % colors.length])\n                    .attr(\"stroke-width\", 2)\n                    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n                    .attr(\"d\", chartLine)\n                    .on(\"mouseover\", function () {\n                        d3.select(this).attr(\"stroke-width\", 4);\n                    })\n                    .on(\"mouseout\", function () {\n                        d3.select(this).attr(\"stroke-width\", 2);\n                    });\n\n\n\n                // Append circles for each data point\n                if (data[key]?.displayDot) {\n                    svg.selectAll(`.circle-${key}`)\n                        .data(data[key]?.data)\n                        .enter()\n                        .append(\"circle\")\n                        .attr(\"class\", `circle-${key}`)\n                        .attr(\"cx\", (d, i) => x(i) + margin.left) // Adjust for margin.left\n                        .attr(\"cy\", (d: any) => y(d) + margin.top) // Adjust for margin.top\n                        .attr(\"r\", 4) // Circle radius\n                        .attr(\"fill\", colors[index % colors.length])\n                        .attr(\"stroke\", \"white\") // Optional: adds a border for contrast\n                        .attr(\"stroke-width\", 1.5)\n                        .on(\"mouseover\", function () {\n                            d3.select(this).attr(\"r\", 6); // Increase size on hover\n                        })\n                        .on(\"mouseout\", function () {\n                            d3.select(this).attr(\"r\", 4); // Return to normal size\n                        });\n                }\n\n            }\n        });\n    }, [data, yAxisData, xAxisData, height, containerWidth, colors, margin, line, yAxisLabelType, currency, customLabelFormatter]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} viewBox={`0 0 ${containerWidth} ${height}`} />\n            </div>\n        </div>\n    );\n};\n\nexport default MultiLineChart;\n"],"names":["data","yAxisData","xAxisData","colors","height","margin","top","right","bottom","left","line","yAxisLabelType","currency","customLabelFormatter","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","svg","d3.select","selectAll","remove","innerWidth","innerHeight","x","d3.scaleLinear","domain","length","range","y","d3.max","nice","xAxis","append","attr","call","d3.axisBottom","ticks","tickFormat","d","i","style","select","yAxis","d3.axisLeft","tickPadding","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","enter","Object","keys","forEach","key","index","chartLine","d3.line","curve","isSmooth","d3.curveMonotoneX","d3.curveLinear","datum","_a","on","this","_b","displayDot","_c","jsx","ref","children","position","viewBox"],"mappings":"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"}

package/dist/components/filter/filter/index.esm.js

@@ -30,13 +30,13 @@ import DialogTitle from "../../../node_modules/@mui/material/DialogTitle/DialogT
 import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import MenuItem from "../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
 import IconButton from "../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import { Edit } from "../../icons/edit/index.esm.js";
 import OutlinedInput from "../../../node_modules/@mui/material/OutlinedInput/OutlinedInput/index.esm.js";
 import InputAdornment from "../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
 import Close from "../../../node_modules/@mui/icons-material/esm/Close/index.esm.js";
 import DialogContent from "../../../node_modules/@mui/material/DialogContent/DialogContent/index.esm.js";
 import Alert from "../../../node_modules/@mui/material/Alert/Alert/index.esm.js";
 import DialogActions from "../../../node_modules/@mui/material/DialogActions/DialogActions/index.esm.js";
-import { Edit } from "../../icons/edit/index.esm.js";
 import { Trash } from "../../icons/trash/index.esm.js";
 setBaseUrl(`${void 0}/system-feature`);
 const initialQuery = { combinator: "and", rules: [] };

package/dist/components/filter/filter/index.js

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),r=require("react-querybuilder"),t=;/* empty css                                                                                         */;/* empty css                    */var i=,/* empty css                         */n=,/* empty css                                 */s=,/* empty css                                     */a=,/* empty css                                 */o=,/* empty css                                */u=,/* empty css                              */d=,/* empty css                             */c=,/* empty css                                */m=,/* empty css                                   */f=,/* empty css                         */x=,/* empty css                                */p=,/* empty css                                 */h=,/* empty css                                               */j=,/* empty css                                                */v=,/* empty css                             */g=,/* empty css                           */q=,/* empty css                              */y=require("lodash"),b=,/* empty css                                                   */S=,/* empty css                                       */C=require("react-router-dom"),k=,/* empty css                                */_=,/* empty css                                                       */A=,/* empty css                                                                 */I=,/* empty css                                                 */F=,/* empty css                                                           */N=,/* empty css                                                               */w=,/* empty css                                                                     */E=,/* empty css                                                                       */D=,/* empty css                                                         */z=,/* empty css                                                                     */P=,/* empty css                                                     */T=,/* empty css                                                                     */B=,/* empty css                      */M=;/* empty css                       */function R(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var L=/* @__PURE__ */R(y);j.setBaseUrl("undefined/system-feature");const Q={combinator:"and",rules:[]};exports.default=({open:y,onClose:R,savedFilters:O,fetchSavedFilters:V,onSaveFilter:W,onSelectedFilter:G,applyFilter:U,fields:K=[]})=>{const H=C.useLocation(),J=localStorage.getItem(v.auth.storageTokenKeyName),{updatePageInfo:X,activePage:Y,schemaFields:Z,setActivePage:$}=q.usePages();K=Z.length?g.generateFields(Z):K;const[ee,le]=l.useState(Q),[re,te]=l.useState(O??[]),[ie,ne]=l.useState(null),[se,ae]=l.useState(null),[oe,ue]=l.useState(null),{isRtl:de}=k.useLanguage(),ce=l.useMemo(()=>S.routeToResourceMap[H.pathname]||null,[H.pathname]);l.useEffect(()=>{O&&te(O)},[O]);const me=l.useCallback((e=!1)=>{let l=ee;if(pe(l))ue("Invalid filter");else if(e)l=Q,le(l);else{const e=l?g.generateQueryString(l):l;X({filters:l,filterQueryString:e}),R()}},[ee,U,R]),fe=e=>{e?(ne(e),le(e.query),G&&G(e)):(ne(null),le(Q),G&&G(null))},xe=e=>{const l=null==O?void 0:O.filter(l=>l.name.toLowerCase().includes(e.toLowerCase()));l&&te(l)};l.useEffect(()=>{let e=Q;L.default.isEmpty(Y.filters)||(e=Y.filters),le(e);const l=null==O?void 0:O.find(e=>{var l;return e.name===(null==(l=null==Y?void 0:Y.filters)?void 0:l.name)});ne(l||null)},[null==Y?void 0:Y.filters,O]);const pe=e=>{var l,r;let t=[];return null==(l=null==e?void 0:e.rules)||l.forEach(l=>{if(t.includes(l.field)&&"and"==e.combinator)return!0;t.push(l.field)}),t.length!==(null==(r=null==e?void 0:e.rules)?void 0:r.length)},he=e=>Array.isArray(e.rules)?e.rules.length?e.rules.some(he):!e.rules.length:!e.field||L.default.isEmpty(e.value)&&!["null","notNull"].includes(e.operator),je=l.useMemo(()=>he(ee)||oe,[ee,oe]);/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),r=require("react-querybuilder"),t=;/* empty css                                                                                         */;/* empty css                    */var i=,/* empty css                         */n=,/* empty css                                 */s=,/* empty css                                     */a=,/* empty css                                 */o=,/* empty css                                */u=,/* empty css                              */d=,/* empty css                             */c=,/* empty css                                */m=,/* empty css                                   */f=,/* empty css                         */x=,/* empty css                                */p=,/* empty css                                 */h=,/* empty css                                               */j=,/* empty css                                                */v=,/* empty css                             */g=,/* empty css                           */q=,/* empty css                              */y=require("lodash"),b=,/* empty css                                                   */S=,/* empty css                                       */C=require("react-router-dom"),k=,/* empty css                                */_=,/* empty css                                                       */A=,/* empty css                                                                 */I=,/* empty css                                                 */F=,/* empty css                                                           */N=,/* empty css                                                               */w=,/* empty css                      */E=,/* empty css                                                                     */D=,/* empty css                                                                       */z=,/* empty css                                                         */P=,/* empty css                                                                     */T=,/* empty css                                                     */B=,/* empty css                                                                     */M=;/* empty css                       */function R(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var L=/* @__PURE__ */R(y);j.setBaseUrl("undefined/system-feature");const Q={combinator:"and",rules:[]};exports.default=({open:y,onClose:R,savedFilters:O,fetchSavedFilters:V,onSaveFilter:W,onSelectedFilter:G,applyFilter:U,fields:K=[]})=>{const H=C.useLocation(),J=localStorage.getItem(v.auth.storageTokenKeyName),{updatePageInfo:X,activePage:Y,schemaFields:Z,setActivePage:$}=q.usePages();K=Z.length?g.generateFields(Z):K;const[ee,le]=l.useState(Q),[re,te]=l.useState(O??[]),[ie,ne]=l.useState(null),[se,ae]=l.useState(null),[oe,ue]=l.useState(null),{isRtl:de}=k.useLanguage(),ce=l.useMemo(()=>S.routeToResourceMap[H.pathname]||null,[H.pathname]);l.useEffect(()=>{O&&te(O)},[O]);const me=l.useCallback((e=!1)=>{let l=ee;if(pe(l))ue("Invalid filter");else if(e)l=Q,le(l);else{const e=l?g.generateQueryString(l):l;X({filters:l,filterQueryString:e}),R()}},[ee,U,R]),fe=e=>{e?(ne(e),le(e.query),G&&G(e)):(ne(null),le(Q),G&&G(null))},xe=e=>{const l=null==O?void 0:O.filter(l=>l.name.toLowerCase().includes(e.toLowerCase()));l&&te(l)};l.useEffect(()=>{let e=Q;L.default.isEmpty(Y.filters)||(e=Y.filters),le(e);const l=null==O?void 0:O.find(e=>{var l;return e.name===(null==(l=null==Y?void 0:Y.filters)?void 0:l.name)});ne(l||null)},[null==Y?void 0:Y.filters,O]);const pe=e=>{var l,r;let t=[];return null==(l=null==e?void 0:e.rules)||l.forEach(l=>{if(t.includes(l.field)&&"and"==e.combinator)return!0;t.push(l.field)}),t.length!==(null==(r=null==e?void 0:e.rules)?void 0:r.length)},he=e=>Array.isArray(e.rules)?e.rules.length?e.rules.some(he):!e.rules.length:!e.field||L.default.isEmpty(e.value)&&!["null","notNull"].includes(e.operator),je=l.useMemo(()=>he(ee)||oe,[ee,oe]);/* @__PURE__ */
 return e.jsx("div",{children:/* @__PURE__ */e.jsxs(_.default,{open:y,onClose:R,maxWidth:"md",fullWidth:!0,PaperProps:{sx:{borderRadius:2}},children:[
 /* @__PURE__ */e.jsxs(A.default,{className:"filter-header",children:[
 /* @__PURE__ */e.jsx(n.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:"Filters"}),
 /* @__PURE__ */e.jsxs(I.default,{gap:1,display:"flex",children:[
-/* @__PURE__ */e.jsxs(i.default,{fullWidth:!0,size:"small",className:"filter-dropdown",value:ie?ie.name:"Saved Filters",onChange:e=>{const l=null==O?void 0:O.find(l=>l.name==e.target.value);fe(l)},variant:"outlined",onClose:()=>{setTimeout(()=>{xe("")},500)},input:ie?/* @__PURE__ */e.jsx(w.default,{label:"",endAdornment:/* @__PURE__ */e.jsx(E.default,{position:"end",children:/* @__PURE__ */e.jsx(N.default,{"aria-label":"clear selection",onClick:()=>{fe()},edge:"end",sx:{mr:1.5},size:"small",children:/* @__PURE__ */e.jsx(D.default,{sx:{fontSize:"1rem"}})})})}):void 0,children:[
+/* @__PURE__ */e.jsxs(i.default,{fullWidth:!0,size:"small",className:"filter-dropdown",value:ie?ie.name:"Saved Filters",onChange:e=>{const l=null==O?void 0:O.find(l=>l.name==e.target.value);fe(l)},variant:"outlined",onClose:()=>{setTimeout(()=>{xe("")},500)},input:ie?/* @__PURE__ */e.jsx(E.default,{label:"",endAdornment:/* @__PURE__ */e.jsx(D.default,{position:"end",children:/* @__PURE__ */e.jsx(N.default,{"aria-label":"clear selection",onClick:()=>{fe()},edge:"end",sx:{mr:1.5},size:"small",children:/* @__PURE__ */e.jsx(z.default,{sx:{fontSize:"1rem"}})})})}):void 0,children:[
 /* @__PURE__ */e.jsx("div",{className:"searchbar-box-list",children:/* @__PURE__ */e.jsx(p.default,{placeholder:"Search Filters",handleSearch:e=>xe(e)})}),null==re?void 0:re.map(l=>/* @__PURE__ */e.jsxs(F.default,{value:null==l?void 0:l.name,className:"menu-list",selected:(null==ie?void 0:ie.name)==(null==l?void 0:l.name),children:[
 /* @__PURE__ */e.jsx(n.Typography,{color:"theme.secondary.1000",type:"s3",children:null==l?void 0:l.name}),
 /* @__PURE__ */e.jsxs("div",{className:"icon-list",children:[
-/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),ae(l)},children:/* @__PURE__ */e.jsx(B.Edit,{fontSize:"small",color:(null==ie?void 0:ie.name)==(null==l?void 0:l.name)?"theme.primary.800":"inherit"})}),
+/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),ae(l)},children:/* @__PURE__ */e.jsx(w.Edit,{fontSize:"small",color:(null==ie?void 0:ie.name)==(null==l?void 0:l.name)?"theme.primary.800":"inherit"})}),
 /* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),(async e=>{const l={"x-token":J,id:e};j.deleteV1FilterId(l).then(e=>{ne(null),le(Q),V&&V()}).catch(e=>{})})(l.id)},color:"error",children:/* @__PURE__ */e.jsx(M.Trash,{fontSize:"small",color:"theme.error.600"})})]})]},l.id))]}),
 /* @__PURE__ */e.jsx(h.default,{open:null!==se,onClose:()=>ae(null),handleSubmit:e=>(e=>{if(se)return(async(e,l)=>{const r={"x-token":J,id:e,name:l,module:(null==ce?void 0:ce.fieldResource)||(null==ce?void 0:ce.pageResource)};try{await j.putV1FilterId(r),V&&V(),b.enqueueSnackbar("Filters renamed successfully.")}catch(t){let e="Something went wrong on saving filters";return t instanceof Error&&(e=g.getErrorMessage(t.message)),b.enqueueSnackbar(e,{variant:"error"}),!1}return!0})(se.id,e)})(e),oldName:null==se?void 0:se.name}),
-/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:R,children:/* @__PURE__ */e.jsx(D.default,{fontSize:"small"})})})]})]}),
-/* @__PURE__ */e.jsxs(z.default,{className:"content",children:[oe&&/* @__PURE__ */e.jsx(P.default,{severity:"error",sx:{px:1,pt:.5,mb:1},children:/* @__PURE__ */e.jsx(n.Typography,{color:"error",type:"s4",children:oe})}),
+/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:R,children:/* @__PURE__ */e.jsx(z.default,{fontSize:"small"})})})]})]}),
+/* @__PURE__ */e.jsxs(P.default,{className:"content",children:[oe&&/* @__PURE__ */e.jsx(T.default,{severity:"error",sx:{px:1,pt:.5,mb:1},children:/* @__PURE__ */e.jsx(n.Typography,{color:"error",type:"s4",children:oe})}),
 /* @__PURE__ */e.jsxs(t.QueryBuilderMaterial,{children:[
 /* @__PURE__ */e.jsx(r.QueryBuilder,{fields:K||[],query:ee,onQueryChange:e=>{const l=e.rules.map((e,l)=>{var r,t;return{...e,value:e.field!==(null==(t=null==(r=ee.rules)?void 0:r[l])?void 0:t.field)||["null","notNull"].includes(e.operator)?"":e.value}});le({...e,rules:l}),ue(null),W&&W(e)},showCombinatorsBetweenRules:!0,controlClassnames:{header:"actions"},controlElements:{addRuleAction:u.default,addGroupAction:d.default,combinatorSelector:s.default,fieldSelector:o.default,operatorSelector:m.default,removeRuleAction:a.default,valueEditor:c.default,removeGroupAction:x.default}}),
 /* @__PURE__ */e.jsx(f.default,{variant:"text",className:de?"remove-filters_rtl":"remove-filters",onClick:()=>{me(!0)},disabled:je,children:"Clear all filters"})]})]}),
-/* @__PURE__ */e.jsx(T.default,{className:"filter-footer",children:/* @__PURE__ */e.jsxs(I.default,{sx:{display:"flex",alignItems:"center",justifyContent:ie?"space-between":"flex-end",width:"100%"},children:[ie&&/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(f.default,{onClick:async()=>{if(ie){const e={"x-token":J,id:ie.id,data:ee};j.putV1FilterId(e).then(e=>{V&&V(),$(e=>({...e,filters:{...e.filters,rules:ee.rules,combinator:ee.combinator,name:ie.name}}))}).catch(e=>b.enqueueSnackbar("Error renaming saved filters:",{variant:"error"}))}},children:"Update Seleted filter"})}),
+/* @__PURE__ */e.jsx(B.default,{className:"filter-footer",children:/* @__PURE__ */e.jsxs(I.default,{sx:{display:"flex",alignItems:"center",justifyContent:ie?"space-between":"flex-end",width:"100%"},children:[ie&&/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(f.default,{onClick:async()=>{if(ie){const e={"x-token":J,id:ie.id,data:ee};j.putV1FilterId(e).then(e=>{V&&V(),$(e=>({...e,filters:{...e.filters,rules:ee.rules,combinator:ee.combinator,name:ie.name}}))}).catch(e=>b.enqueueSnackbar("Error renaming saved filters:",{variant:"error"}))}},children:"Update Seleted filter"})}),
 /* @__PURE__ */e.jsxs(I.default,{sx:{display:"flex",gap:1},children:[
 /* @__PURE__ */e.jsx(f.default,{className:"cancel-filter-btn",onClick:R,children:"Cancel"}),
 /* @__PURE__ */e.jsx(f.default,{disabled:je,onClick:()=>me(),children:"Apply"})]})]})})]})})};

package/dist/components/grid/custom-grid-card/custom-grid-card/index.esm.js

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Typography } from "../../../typography/typography/index.esm.js";
+import { formatDate } from "../../../../utils/dateFormat/index.esm.js";
+import Menu from "../../../menu/menu/index.esm.js";
+import Card from "../../../../node_modules/@mui/material/Card/Card/index.esm.js";
+import CardContent from "../../../../node_modules/@mui/material/CardContent/CardContent/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import { MoreIcon } from "../../../icons/more/index.esm.js";
+const CustomGridCard = ({
+  title,
+  subTitle,
+  children,
+  data,
+  rowActionMenu,
+  destructiveActionMenu
+}) => {
+  const [rowAnchorEl, setRowAnchorEl] = useState(null);
+  const [row, setRow] = useState(null);
+  const handleMenuOpen = (e, currencyRow) => {
+    setRow(currencyRow);
+    setRowAnchorEl(e.currentTarget);
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      sx: {
+        width: "16.625rem",
+        borderRadius: "0.5rem",
+        border: "0.5px solid #eeeff1",
+        // backgroundColor: 'theme.secondary.100',
+        boxShadow: `
+              0px 0px 2px 0px #e0e0e0,
+              0px 1px 4px -2px rgba(24, 39, 75, 0.02),
+              0px 4px 4px -2px rgba(24, 39, 75, 0.06);`
+        // m: 3
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          CardContent,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              padding: "1rem 1rem 1.25rem 1rem",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    width: "100%",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start"
+                    // marginBottom: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "theme.secondary.1000", children: title }),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        color: "inherit",
+                        size: "small",
+                        onClick: (e) => handleMenuOpen(e, data),
+                        children: /* @__PURE__ */ jsx(
+                          MoreIcon,
+                          {
+                            sx: { transform: "rotate(90deg)" },
+                            orient: "vertical",
+                            fontSize: "small"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.800", children: subTitle }) }),
+              children,
+              (data == null ? void 0 : data.created_at) && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Typography, { type: "s4", color: "theme.secondary.800", children: [
+                "Created On ",
+                formatDate(data == null ? void 0 : data.created_at, "DD MMM, YYYY")
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            anchorEl: rowAnchorEl,
+            open: Boolean(rowAnchorEl),
+            onClose: () => setRowAnchorEl(null),
+            children: [
+              /* @__PURE__ */ jsx(Box, { children: rowActionMenu.map((item) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => {
+                    row && item.handleAction(row);
+                    setRowAnchorEl(null);
+                  },
+                  children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: item.label })
+                }
+              )) }),
+              /* @__PURE__ */ jsx(Box, { className: "dropdown-inner--DestructiveHeader", children: destructiveActionMenu.map((item) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => {
+                    row && item.handleAction(row);
+                    setRowAnchorEl(null);
+                  },
+                  className: "dropdown-inner--DestructiveActions",
+                  children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: item.label })
+                }
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CustomGridCard as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/grid/custom-grid-card/custom-grid-card/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/grid/custom-grid-card/custom-grid-card.tsx"],"sourcesContent":["import { Box, Card, CardContent, IconButton, MenuItem } from '@mui/material';\nimport React, { useState } from 'react';\nimport Typography, { ITypography } from '../../typography/typography';\nimport { MoreIcon } from '../../icons';\nimport { formatDate } from '../../../utils/dateFormat';\n// import Chip from '../../chip/chip';\nimport Menu from '../../menu/menu';\n\ninterface CustomGridCardProps {\n\ttitle: React.ReactNode | string;\n\tsubTitle?: React.ReactNode | string;\n\tchildren?: React.ReactNode | string;\n\ttitleProps?: ITypography;\n\tdata: Record<any, any>;\n\trowActionMenu: any[];\n\tdestructiveActionMenu: any[];\n}\n\nconst CustomGridCard: React.FC<CustomGridCardProps> = ({\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tdata,\n\trowActionMenu,\n\tdestructiveActionMenu\n}) => {\n\tconst [rowAnchorEl, setRowAnchorEl] = useState<HTMLElement | null>(null);\n\tconst [row, setRow] = useState<[] | null>(null);\n\n\tconst handleMenuOpen = (\n\t\te: React.MouseEvent<HTMLButtonElement>,\n\t\tcurrencyRow: []\n\t) => {\n\t\tsetRow(currencyRow);\n\t\tsetRowAnchorEl(e.currentTarget);\n\t};\n\n\treturn (\n\t\t<Card\n\t\t\tsx={{\n\t\t\t\twidth: '16.625rem',\n\t\t\t\tborderRadius: '0.5rem',\n\t\t\t\tborder: '0.5px solid #eeeff1',\n\t\t\t\t// backgroundColor: 'theme.secondary.100',\n\t\t\t\tboxShadow: `\n              0px 0px 2px 0px #e0e0e0,\n              0px 1px 4px -2px rgba(24, 39, 75, 0.02),\n              0px 4px 4px -2px rgba(24, 39, 75, 0.06);`\n\t\t\t\t// m: 3\n\t\t\t}}>\n\t\t\t<CardContent\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tpadding: '1rem 1rem 1.25rem 1rem',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\tflexShrink: 0\n\t\t\t\t}}>\n\t\t\t\t{/* Title & More Button */}\n\t\t\t\t<Box\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'flex-start'\n\t\t\t\t\t\t// marginBottom: 1\n\t\t\t\t\t}}>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tcolor='inherit'\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\tonClick={(e) => handleMenuOpen(e, data)}>\n\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\tsx={{ transform: 'rotate(90deg)' }}\n\t\t\t\t\t\t\torient='vertical'\n\t\t\t\t\t\t\tfontSize='small'\n\t\t\t\t\t\t/>\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t\t{/* Sub Title */}\n\t\t\t\t<Box>\n\t\t\t\t\t<Typography type='s4' color='theme.secondary.800'>\n\t\t\t\t\t\t{subTitle}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{children}\n\t\t\t\t{data?.created_at && (\n\t\t\t\t\t<Box>\n\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.800'>\n\t\t\t\t\t\t\tCreated On {formatDate(data?.created_at, 'DD MMM, YYYY')}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</CardContent>\n\n\t\t\t{/* Action Menu */}\n\t\t\t<Menu\n\t\t\t\tanchorEl={rowAnchorEl}\n\t\t\t\topen={Boolean(rowAnchorEl)}\n\t\t\t\tonClose={() => setRowAnchorEl(null)}>\n\t\t\t\t<Box>\n\t\t\t\t\t{rowActionMenu.map((item) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\trow && item.handleAction(row);\n\t\t\t\t\t\t\t\tsetRowAnchorEl(null);\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t<Box className='dropdown-inner--DestructiveHeader'>\n\t\t\t\t\t{destructiveActionMenu.map((item) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\trow && item.handleAction(row);\n\t\t\t\t\t\t\t\tsetRowAnchorEl(null);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName='dropdown-inner--DestructiveActions'>\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t</Menu>\n\t\t</Card>\n\t);\n};\n\nexport default CustomGridCard;\n"],"names":[],"mappings":"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"}