npm - @erpsquad/common - Versions diffs - 1.8.45 → 1.8.46 - Mend

@erpsquad/common 1.8.45 → 1.8.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1471) hide show

package/dist/components/charts/bar-chart/bar-chart/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/charts/bar-chart/bar-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 BarChartProps {\n data: DataPoint[];\n numOfLines?: number;\n width?: number;\n height?: number;\n line?: boolean;\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 BarChart: React.FC<BarChartProps> = ({\n data,\n numOfLines = 5,\n width = 500,\n height = 300,\n line = false,\n}) => {\n const svgRef = useRef<SVGSVGElement>(null);\n\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 useEffect(() => {\n if (!svgRef.current) return;\n\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 = width - margin.left - margin.right;\n const barHeight = height - margin.top - margin.bottom;\n\n const mousemove = (event: MouseEvent, d: DataPoint) => {\n let xPosition = event.offsetX + margin.left - 25;\n const yPosition = event.offsetY + margin.top - 40;\n const tooltipWidth = tooltip.node()?.getBoundingClientRect()?.width;\n const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;\n if (rightOffset > width) {\n xPosition = Math.floor(\n tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20,\n );\n }\n\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) => d.label))\n .range([0, barWidth])\n .padding(0.1);\n\n const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n const chart = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n if (line) {\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\", barWidth)\n .attr(\"y2\", y(tick))\n .style(\"stroke\", \"gray\")\n .style(\"stroke-dasharray\", \"3,3\")\n .style(\"opacity\", 1);\n });\n }\n\n chart\n .selectAll(\".bar\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"class\", \"bar\")\n //@ts-expect-error not applicable\n .attr(\"x\", (d: any) => x(d.label))\n .attr(\"y\", (d: any) => y(d.value))\n .attr(\"width\", x.bandwidth())\n .attr(\"height\", (d: any) => barHeight - y(d.value))\n .style(\"fill\", \"#357AF6\")\n .style(\"opacity\", \"1\")\n .on(\"mousemove\", mousemove)\n .on(\"mouseleave\", mouseleave);\n\n const xAxis = chart\n .append(\"g\")\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${barHeight})`)\n .call(d3.axisBottom(x) as any);\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) as any,\n );\n\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, line, yAxisMaxValue, yAxisTicks]);\n\n return (\n <>\n <svg ref={svgRef} width={width} height={height}></svg>\n </>\n );\n};\n\nexport { BarChart };\nexport default BarChart;\n"],"names":["BarChart","data","numOfLines","width","height","line","svgRef","useRef","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","push","useEffect","current","svg","d3.select","selectAll","remove","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","y","d3.scaleLinear","chart","append","attr","slice","forEach","tick","style","enter","bandwidth","on","event","xPosition","offsetX","yPosition","offsetY","tooltipWidth","_b","_a","tooltip","node","getBoundingClientRect","floor","text","length","tooltipText","html","call","d3.axisBottom","d3.axisLeft","tickValues","tickFormat","num","toFixed","tickSizeOuter","children","jsx","ref"],"mappings":"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"}

package/dist/components/charts/bar-chart/bar-chart.d.ts CHANGED Viewed

@@ -12,4 +12,5 @@ interface BarChartProps {
     line?: boolean;
 }
 declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
 export default BarChart;

package/dist/components/charts/barChart/barChart.d.ts CHANGED Viewed

@@ -16,4 +16,5 @@ interface BarChartProps {
     currency: string;
 }
 declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
 export default BarChart;

package/dist/components/charts/donut-chart/donut-chart/index.esm.js ADDED Viewed

@@ -0,0 +1,86 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+/* empty css                            */
+import { Typography } from "../../../typography/typography/index.esm.js";
+import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
+import pie from "../../../../node_modules/d3-shape/src/pie/index.esm.js";
+import arc from "../../../../node_modules/d3-shape/src/arc/index.esm.js";
+const defaultColors = [
+  "#5BCE97",
+  "#B3D8E2",
+  "#F5F6F5",
+  "#AE6B9E",
+  "#CBD49A",
+  "#EEE0B3"
+];
+const getSingleNumberFromString = (str) => {
+  if (typeof str === "number") {
+    return str;
+  }
+  const match = (str == null ? void 0 : str.match(/\d.+/)) || null;
+  return match ? Number(match[0]) : 0;
+};
+const DonutChart = ({
+  data,
+  height = 140,
+  width = 140,
+  isUserDashbord,
+  legend = true,
+  direction = "horizontal",
+  totalUsers,
+  total = isUserDashbord ? totalUsers : "2.4 GB",
+  colors = defaultColors,
+  titleProps = {},
+  valueProps = {}
+}) => {
+  const svgRef = useRef(null);
+  useEffect(() => {
+    if (!svgRef.current) return;
+    const svg = select(svgRef.current);
+    svg.selectAll("*").remove();
+    const margin = 6;
+    const outerRadius = Math.min(width, height) / 2 - margin;
+    const innerRadius = Math.min(width, height) / 2 - margin * 2;
+    const g = svg.append("g").attr("transform", `translate(${width / 2}, ${height / 2})`);
+    const pie$1 = pie().value((d) => getSingleNumberFromString(d.value));
+    const path = arc().outerRadius(outerRadius).innerRadius(innerRadius);
+    const pies = g.selectAll(".arc").data(pie$1(data)).enter().append("g").attr("class", "arc");
+    pies.append("path").attr("d", path).attr("fill", (d, i) => {
+      return colors[i % colors.length];
+    });
+    g.append("text").attr("text-anchor", "middle").attr("font-size", "18px").attr("font-weight", "600").attr("alignment-baseline", `central`).html(total);
+  }, [colors, data, height, total, width]);
+  if (!legend) {
+    return /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `donut-chart-container ${direction}`, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height }) }),
+    /* @__PURE__ */ jsx("div", { className: "donut-chart-legend", children: data && data.map((d, i) => {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "legend",
+          style: { borderLeft: `0.188rem solid ${colors[i]}` },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "legend-title", children: /* @__PURE__ */ jsx(Typography, { type: "s5", color: "theme.secondary.800", ...titleProps, children: d.label }) }),
+            /* @__PURE__ */ jsx("div", { className: "legend-value", children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                type: "s5",
+                weight: "medium",
+                color: "theme.secondary.1000",
+                children: /* @__PURE__ */ jsx(Typography, { type: "s5", color: "theme.secondary.1000", weight: "bold", ...valueProps, children: d.value })
+              }
+            ) })
+          ]
+        },
+        d.label
+      );
+    }) })
+  ] }) });
+};
+export {
+  DonutChart,
+  DonutChart as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/donut-chart/donut-chart/index.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/donut-chart/donut-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\n\ninterface DataPoint {\n label: string;\n value: number;\n}\n\ninterface DonutChartProps {\n data: DataPoint[];\n width?: number;\n height?: number;\n legend?: boolean;\n direction?: \"vertical\" | \"horizontal\";\n total?: string;\n colors ?:Array<string>;\n titleProps?:any\n valueProps?:any \n isUserDashbord ?: boolean \n totalUsers ? : any \n}\n\nconst defaultColors = [\n \"#5BCE97\",\n \"#B3D8E2\",\n \"#F5F6F5\",\n \"#AE6B9E\",\n \"#CBD49A\",\n \"#EEE0B3\",\n];\n\nconst getSingleNumberFromString = (str) => {\n if (typeof str === \"number\") {\n return str;\n }\n const match = str?.match(/\\d.+/) || null;\n return match ? Number(match[0]) : 0;\n};\n\nconst DonutChart: React.FC<DonutChartProps> = ({\n\tdata,\n\theight = 140,\n\twidth = 140,\n isUserDashbord , \n\tlegend = true,\n\tdirection = 'horizontal' ,\n totalUsers , \n\ttotal = isUserDashbord ? totalUsers : \"2.4 GB\",\n colors = defaultColors,\n titleProps={},\n valueProps={}, \n\n}) => {\n const svgRef = useRef<SVGSVGElement>(null);\n\n useEffect(() => {\n if (!svgRef.current) return;\n\n const svg = d3.select(svgRef.current);\n\n svg.selectAll(\"*\").remove();\n\n const margin = 6;\n\n const outerRadius = Math.min(width, height) / 2 - margin;\n const innerRadius = Math.min(width, height) / 2 - margin * 2;\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n //@ts-expect-error not applicable\n const pie = d3\n .pie()\n .value((d: DataPoint) => getSingleNumberFromString(d.value));\n\n const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);\n\n const pies = g\n .selectAll(\".arc\")\n //@ts-expect-error not applicable\n .data(pie(data))\n .enter()\n .append(\"g\")\n .attr(\"class\", \"arc\");\n\n pies\n .append(\"path\")\n //@ts-expect-error not applicable\n .attr(\"d\", path)\n //@ts-expect-error not applicable\n .attr(\"fill\", (d: DataPoint, i: number) => {\n return colors[i % colors.length]});\n\n\n // const words = total.split(' '); // Split the text into words\n // const lineHeight = 22; // Define the line height\n // const maxCharsPerLine = 15; // Define the maximum number of characters per line\n\n // let currentLine = '';\n // let lineNumber = 0;\n\n // const textElement =\n g.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", \"18px\")\n .attr(\"font-weight\", \"600\")\n .attr(\"alignment-baseline\", `central`)\n .html(total);\n // .text(total);\n\n // words.forEach((word) => {\n // \tconst tempLine = currentLine + word + ' ';\n\n // \t// Check if the line exceeds the max character count\n // \tif (tempLine.length > maxCharsPerLine && currentLine.length > 0) {\n // \t\ttextElement\n // \t\t\t.append('tspan')\n // \t\t\t.attr('x', 0)\n // \t\t\t.attr('y', lineHeight * lineNumber)\n // \t\t\t.text(currentLine.trim());\n\n // \t\tcurrentLine = word + ' ';\n // \t\tlineNumber++;\n // \t} else {\n // \t\tcurrentLine = tempLine;\n // \t}\n // });\n\n // // Add the last line\n // textElement\n // \t.append('tspan')\n // \t.attr('x', 0)\n // \t.attr('y', lineHeight * lineNumber)\n // \t.text(currentLine.trim());\n }, [colors, data, height, total, width]);\n\n if (!legend) {\n return <svg ref={svgRef} width={width} height={height}></svg>;\n }\n\n return (\n <>\n <div className={`donut-chart-container ${direction}`}>\n <div>\n <svg ref={svgRef} width={width} height={height}></svg>\n </div>\n <div className=\"donut-chart-legend\">\n {data && data.map((d: DataPoint, i: number) => {\n return (\n <div\n className=\"legend\"\n key={d.label}\n style={{ borderLeft: `0.188rem solid ${colors[i]}` }}\n >\n <div className=\"legend-title\">\n <Typography type=\"s5\" color=\"theme.secondary.800\" {...titleProps}>\n {d.label}\n </Typography>\n </div>\n <div className=\"legend-value\">\n <Typography\n type=\"s5\"\n weight=\"medium\"\n color=\"theme.secondary.1000\"\n >\n <Typography type=\"s5\" color=\"theme.secondary.1000\" weight=\"bold\" {...valueProps}>\n {d.value}\n </Typography>\n </Typography>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </>\n );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc"],"mappings":"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"}

package/dist/components/charts/donut-chart/donut-chart/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");;/* empty css                         */var r=,/* empty css                                    */s=,/* empty css                                                      */a=,/* empty css                                               */l=;/* empty css                                               */const n=["#5BCE97","#B3D8E2","#F5F6F5","#AE6B9E","#CBD49A","#EEE0B3"],d=({data:d,height:i=140,width:o=140,isUserDashbord:c,legend:h=!0,direction:u="horizontal",totalUsers:p,total:m=(c?p:"2.4 GB"),colors:x=n,titleProps:g={},valueProps:j={}})=>{const y=t.useRef(null);return t.useEffect(()=>{if(!y.current)return;const e=s.default(y.current);e.selectAll("*").remove();const t=Math.min(o,i)/2-6,r=Math.min(o,i)/2-12,n=e.append("g").attr("transform",`translate(${o/2}, ${i/2})`),c=a.default().value(e=>(e=>{if("number"==typeof e)return e;const t=(null==e?void 0:e.match(/\d.+/))||null;return t?Number(t[0]):0})(e.value)),h=l.default().outerRadius(t).innerRadius(r);n.selectAll(".arc").data(c(d)).enter().append("g").attr("class","arc").append("path").attr("d",h).attr("fill",(e,t)=>x[t%x.length]),n.append("text").attr("text-anchor","middle").attr("font-size","18px").attr("font-weight","600").attr("alignment-baseline","central").html(m)},[x,d,i,m,o]),h?/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsxs("div",{className:`donut-chart-container ${u}`,children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx("svg",{ref:y,width:o,height:i})}),
+/* @__PURE__ */e.jsx("div",{className:"donut-chart-legend",children:d&&d.map((t,s)=>/* @__PURE__ */e.jsxs("div",{className:"legend",style:{borderLeft:`0.188rem solid ${x[s]}`},children:[
+/* @__PURE__ */e.jsx("div",{className:"legend-title",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",color:"theme.secondary.800",...g,children:t.label})}),
+/* @__PURE__ */e.jsx("div",{className:"legend-value",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",color:"theme.secondary.1000",weight:"bold",...j,children:t.value})})})]},t.label))})]})}):/* @__PURE__ */e.jsx("svg",{ref:y,width:o,height:i})};exports.DonutChart=d,exports.default=d;
+//# sourceMappingURL=index.js.map

package/dist/components/charts/donut-chart/donut-chart/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/charts/donut-chart/donut-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\n\ninterface DataPoint {\n label: string;\n value: number;\n}\n\ninterface DonutChartProps {\n data: DataPoint[];\n width?: number;\n height?: number;\n legend?: boolean;\n direction?: \"vertical\" | \"horizontal\";\n total?: string;\n colors ?:Array<string>;\n titleProps?:any\n valueProps?:any \n isUserDashbord ?: boolean \n totalUsers ? : any \n}\n\nconst defaultColors = [\n \"#5BCE97\",\n \"#B3D8E2\",\n \"#F5F6F5\",\n \"#AE6B9E\",\n \"#CBD49A\",\n \"#EEE0B3\",\n];\n\nconst getSingleNumberFromString = (str) => {\n if (typeof str === \"number\") {\n return str;\n }\n const match = str?.match(/\\d.+/) || null;\n return match ? Number(match[0]) : 0;\n};\n\nconst DonutChart: React.FC<DonutChartProps> = ({\n\tdata,\n\theight = 140,\n\twidth = 140,\n isUserDashbord , \n\tlegend = true,\n\tdirection = 'horizontal' ,\n totalUsers , \n\ttotal = isUserDashbord ? totalUsers : \"2.4 GB\",\n colors = defaultColors,\n titleProps={},\n valueProps={}, \n\n}) => {\n const svgRef = useRef<SVGSVGElement>(null);\n\n useEffect(() => {\n if (!svgRef.current) return;\n\n const svg = d3.select(svgRef.current);\n\n svg.selectAll(\"*\").remove();\n\n const margin = 6;\n\n const outerRadius = Math.min(width, height) / 2 - margin;\n const innerRadius = Math.min(width, height) / 2 - margin * 2;\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n //@ts-expect-error not applicable\n const pie = d3\n .pie()\n .value((d: DataPoint) => getSingleNumberFromString(d.value));\n\n const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);\n\n const pies = g\n .selectAll(\".arc\")\n //@ts-expect-error not applicable\n .data(pie(data))\n .enter()\n .append(\"g\")\n .attr(\"class\", \"arc\");\n\n pies\n .append(\"path\")\n //@ts-expect-error not applicable\n .attr(\"d\", path)\n //@ts-expect-error not applicable\n .attr(\"fill\", (d: DataPoint, i: number) => {\n return colors[i % colors.length]});\n\n\n // const words = total.split(' '); // Split the text into words\n // const lineHeight = 22; // Define the line height\n // const maxCharsPerLine = 15; // Define the maximum number of characters per line\n\n // let currentLine = '';\n // let lineNumber = 0;\n\n // const textElement =\n g.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", \"18px\")\n .attr(\"font-weight\", \"600\")\n .attr(\"alignment-baseline\", `central`)\n .html(total);\n // .text(total);\n\n // words.forEach((word) => {\n // \tconst tempLine = currentLine + word + ' ';\n\n // \t// Check if the line exceeds the max character count\n // \tif (tempLine.length > maxCharsPerLine && currentLine.length > 0) {\n // \t\ttextElement\n // \t\t\t.append('tspan')\n // \t\t\t.attr('x', 0)\n // \t\t\t.attr('y', lineHeight * lineNumber)\n // \t\t\t.text(currentLine.trim());\n\n // \t\tcurrentLine = word + ' ';\n // \t\tlineNumber++;\n // \t} else {\n // \t\tcurrentLine = tempLine;\n // \t}\n // });\n\n // // Add the last line\n // textElement\n // \t.append('tspan')\n // \t.attr('x', 0)\n // \t.attr('y', lineHeight * lineNumber)\n // \t.text(currentLine.trim());\n }, [colors, data, height, total, width]);\n\n if (!legend) {\n return <svg ref={svgRef} width={width} height={height}></svg>;\n }\n\n return (\n <>\n <div className={`donut-chart-container ${direction}`}>\n <div>\n <svg ref={svgRef} width={width} height={height}></svg>\n </div>\n <div className=\"donut-chart-legend\">\n {data && data.map((d: DataPoint, i: number) => {\n return (\n <div\n className=\"legend\"\n key={d.label}\n style={{ borderLeft: `0.188rem solid ${colors[i]}` }}\n >\n <div className=\"legend-title\">\n <Typography type=\"s5\" color=\"theme.secondary.800\" {...titleProps}>\n {d.label}\n </Typography>\n </div>\n <div className=\"legend-value\">\n <Typography\n type=\"s5\"\n weight=\"medium\"\n color=\"theme.secondary.1000\"\n >\n <Typography type=\"s5\" color=\"theme.secondary.1000\" weight=\"bold\" {...valueProps}>\n {d.value}\n </Typography>\n </Typography>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </>\n );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["defaultColors","DonutChart","data","height","width","isUserDashbord","legend","direction","totalUsers","total","colors","titleProps","valueProps","svgRef","useRef","useEffect","current","svg","d3.select","selectAll","remove","outerRadius","Math","min","innerRadius","margin","g","append","attr","pie","d3.pie","value","d","str","match","Number","getSingleNumberFromString","path","d3.arc","enter","i","length","html","children","jsxs","className","jsx","ref","map","style","borderLeft","Typography","type","color","label","weight"],"mappings":"kaAwBA,MAAMA,EAAgB,CACpB,UACA,UACA,UACA,UACA,UACA,WAWIC,EAAwC,EAC7CC,OACAC,SAAS,IACTC,QAAQ,IACPC,iBACDC,UAAS,EACTC,YAAY,aACXC,aACDC,SAASJ,EAAiBG,EAAa,UACtCE,SAASV,EACTW,aAAW,CAAA,EACXC,aAAW,CAAA,MAGX,MAAMC,EAASC,EAAAA,OAAsB,MAmFrC,OAjFAC,EAAAA,UAAU,KACR,IAAKF,EAAOG,QAAS,OAErB,MAAMC,EAAMC,EAAAA,QAAUL,EAAOG,SAE7BC,EAAIE,UAAU,KAAKC,SAEnB,MAEMC,EAAcC,KAAKC,IAAInB,EAAOD,GAAU,EAF/B,EAGTqB,EAAcF,KAAKC,IAAInB,EAAOD,GAAU,EAAIsB,GAE5CC,EAAIT,EACPU,OAAO,KACPC,KAAK,YAAa,aAAaxB,EAAQ,MAAMD,EAAS,MAEnD0B,EAAMC,EAAAA,UAETC,MAAOC,GA1CoB,CAACC,IACjC,GAAmB,iBAARA,EACT,OAAOA,EAET,MAAMC,GAAQ,MAAAD,OAAA,EAAAA,EAAKC,MAAM,UAAW,KACpC,OAAOA,EAAQC,OAAOD,EAAM,IAAM,GAqCLE,CAA0BJ,EAAED,QAEjDM,EAAOC,EAAAA,UAASjB,YAAYA,GAAaG,YAAYA,GAE9CE,EACVP,UAAU,QAEVjB,KAAK2B,EAAI3B,IACTqC,QACAZ,OAAO,KACPC,KAAK,QAAS,OAGdD,OAAO,QAEPC,KAAK,IAAKS,GAEVT,KAAK,OAAQ,CAACI,EAAcQ,IACpB9B,EAAO8B,EAAI9B,EAAO+B,SAW7Bf,EAAEC,OAAO,QACNC,KAAK,cAAe,UACpBA,KAAK,YAAa,QAClBA,KAAK,cAAe,OACpBA,KAAK,qBAAsB,WAC3Bc,KAAKjC,IA2BP,CAACC,EAAQR,EAAMC,EAAQM,EAAOL,IAE5BE,mCAMDqC,wBAAAC,EAAAA,KAAC,MAAA,CAAIC,UAAW,yBAAyBtC,IACvCoC,SAAA;eAAAG,EAAAA,IAAC,OACCH,wBAAAG,EAAAA,IAAC,MAAA,CAAIC,IAAKlC,EAAQT,QAAcD;eAElC2C,EAAAA,IAAC,OAAID,UAAU,qBACZF,YAAQzC,EAAK8C,IAAI,CAAChB,EAAcQ,mBAE7BI,EAAAA,KAAC,MAAA,CACCC,UAAU,SAEVI,MAAO,CAAEC,WAAY,kBAAkBxC,EAAO8B,MAE9CG,SAAA;eAAAG,EAAAA,IAAC,MAAA,CAAID,UAAU,eACfF,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,yBAA0B1C,EACnDgC,SAAAX,EAAEsB;iBAGLR,IAAC,MAAA,CAAID,UAAU,eACbF,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CACCC,KAAK,KACLG,OAAO,SACPF,MAAM,uBAENV,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,uBAAuBE,OAAO,UAAW3C,EAClE+B,SAAAX,EAAED,cAfJC,EAAEsB,8BAdZR,EAAAA,IAAC,MAAA,CAAIC,IAAKlC,EAAQT,QAAcD"}

package/dist/components/charts/donut-chart/donut-chart.d.ts CHANGED Viewed

@@ -18,4 +18,5 @@ interface DonutChartProps {
     totalUsers?: any;
 }
 declare const DonutChart: React.FC<DonutChartProps>;
+export { DonutChart };
 export default DonutChart;

package/dist/components/charts/donutChart/DonutChart.d.ts CHANGED Viewed

@@ -18,4 +18,5 @@ interface DonutChartProps {
     title: string;
 }
 declare const DonutChart: React.FC<DonutChartProps>;
+export { DonutChart };
 export default DonutChart;

package/dist/components/charts/groupBarChart/GroupBarChart/index.esm.js CHANGED Viewed

@@ -87,6 +87,7 @@ const GroupedBarChart = ({
   ) }) });
 };
 export {
+  GroupedBarChart,
   GroupedBarChart as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/charts/groupBarChart/GroupBarChart/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n chartData: any[],\n height?: number,\n margin?: any,\n barWidth?: number,\n line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n chartData, \n height = 500, \n barWidth = 40, \n margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n line = false \n}: IGroupChartProps) => {\n const svgRef = useRef<SVGSVGElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n\n const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n const needsHorizontalScroll = chartData.length > 12;\n const minGroupWidth = 120; \n const calculatedChartWidth = needsHorizontalScroll \n ? Math.max(chartData.length * minGroupWidth, containerWidth)\n : containerWidth;\n\n const { user } = useAuth();\n const defaultCurrencySymbol = user?.currency_data?.symbol \|\| '';\n\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 if (containerWidth === 0) return; \n \n const chartWidth = calculatedChartWidth - margin.left - margin.right;\n const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n \n d3.select(svgRef.current).selectAll('*').remove();\n \n const svg = d3.select(svgRef.current)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n const x0 = d3.scaleBand()\n .domain(chartData.map(d => d.month))\n .range([0, chartWidth])\n .padding(0.2);\n\n const x1 = d3.scaleBand()\n .domain(['Total Transaction', 'Total Value', 'Average Value'])\n .range([0, x0.bandwidth()])\n .padding(0.1);\n\n const y = d3.scaleLinear()\n .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n .nice()\n .range([chartHeight, 0]);\n\n const xAxis = svg.append('g')\n .attr('class', 'x-axis')\n .attr('transform', `translate(0, ${chartHeight})`)\n .call(d3.axisBottom(x0).tickPadding(20));\n \n const yAxis = svg.append('g')\n .attr('class', 'y-axis')\n .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n \n if (line) {\n svg.selectAll('.grid-line')\n .data(y.ticks())\n .enter()\n .append('line')\n .attr('class', 'grid-line')\n .attr('x1', 0)\n .attr('x2', chartWidth)\n .attr('y1', d => y(d))\n .attr('y2', d => y(d))\n .style('stroke', '#ddd')\n .style('stroke-dasharray', '3,3') // Dotted line\n .style('stroke-width', 1);\n }\n\n const monthGroups = svg.selectAll('.month-group')\n .data(chartData)\n .enter()\n .append('g')\n .attr('class', 'month-group')\n .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n monthGroups.selectAll('rect')\n .data(d => d.data)\n .enter()\n .append('rect')\n .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n .attr('y', d => y(d.value))\n .attr('width', barWidth)\n .attr('height', d => chartHeight - y(d.value))\n .attr('fill', d => d.color)\n .attr('rx', 5)\n .attr('ry', 5);\n\n }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <div \n ref={scrollContainerRef}\n style={{ \n width: '100%', \n overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n overflowY: 'hidden'\n }}\n >\n <svg \n ref={svgRef} \n width={calculatedChartWidth} \n height={height} \n viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n style={{ display: 'block' }}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default GroupedBarChart;"],"names":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft"],"mappings":"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"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n chartData: any[],\n height?: number,\n margin?: any,\n barWidth?: number,\n line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n chartData, \n height = 500, \n barWidth = 40, \n margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n line = false \n}: IGroupChartProps) => {\n const svgRef = useRef<SVGSVGElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n\n const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n const needsHorizontalScroll = chartData.length > 12;\n const minGroupWidth = 120; \n const calculatedChartWidth = needsHorizontalScroll \n ? Math.max(chartData.length * minGroupWidth, containerWidth)\n : containerWidth;\n\n const { user } = useAuth();\n const defaultCurrencySymbol = user?.currency_data?.symbol \|\| '';\n\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 if (containerWidth === 0) return; \n \n const chartWidth = calculatedChartWidth - margin.left - margin.right;\n const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n \n d3.select(svgRef.current).selectAll('*').remove();\n \n const svg = d3.select(svgRef.current)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n const x0 = d3.scaleBand()\n .domain(chartData.map(d => d.month))\n .range([0, chartWidth])\n .padding(0.2);\n\n const x1 = d3.scaleBand()\n .domain(['Total Transaction', 'Total Value', 'Average Value'])\n .range([0, x0.bandwidth()])\n .padding(0.1);\n\n const y = d3.scaleLinear()\n .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n .nice()\n .range([chartHeight, 0]);\n\n const xAxis = svg.append('g')\n .attr('class', 'x-axis')\n .attr('transform', `translate(0, ${chartHeight})`)\n .call(d3.axisBottom(x0).tickPadding(20));\n \n const yAxis = svg.append('g')\n .attr('class', 'y-axis')\n .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n \n if (line) {\n svg.selectAll('.grid-line')\n .data(y.ticks())\n .enter()\n .append('line')\n .attr('class', 'grid-line')\n .attr('x1', 0)\n .attr('x2', chartWidth)\n .attr('y1', d => y(d))\n .attr('y2', d => y(d))\n .style('stroke', '#ddd')\n .style('stroke-dasharray', '3,3') // Dotted line\n .style('stroke-width', 1);\n }\n\n const monthGroups = svg.selectAll('.month-group')\n .data(chartData)\n .enter()\n .append('g')\n .attr('class', 'month-group')\n .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n monthGroups.selectAll('rect')\n .data(d => d.data)\n .enter()\n .append('rect')\n .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n .attr('y', d => y(d.value))\n .attr('width', barWidth)\n .attr('height', d => chartHeight - y(d.value))\n .attr('fill', d => d.color)\n .attr('rx', 5)\n .attr('ry', 5);\n\n }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <div \n ref={scrollContainerRef}\n style={{ \n width: '100%', \n overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n overflowY: 'hidden'\n }}\n >\n <svg \n ref={svgRef} \n width={calculatedChartWidth} \n height={height} \n viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n style={{ display: 'block' }}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport { GroupedBarChart };\nexport default GroupedBarChart;"],"names":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft"],"mappings":"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"}

package/dist/components/charts/groupBarChart/GroupBarChart/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../../../hooks/useAuth/index.js"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),s=require("../../../../node_modules/d3-scale/src/linear/index.js"),l=require("../../../../node_modules/d3-array/src/max/index.js"),d=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");exports.default=({chartData:o,height:u=500,barWidth:c=40,margin:h={top:40,right:20,bottom:40,left:50},line:f=!1})=>{var m;const p=t.useRef(null),x=t.useRef(null),g=t.useRef(null),[v,y]=t.useState(0),j=t.useMemo(()=>Math.max(...o.map(e=>e.data.map(e=>e.value)).flat()),[o]),b=o.length>12,k=b?Math.max(120*o.length,v):v,{user:w}=a.useAuth(),q=(null==(m=null==w?void 0:w.currency_data)?void 0:m.symbol)||"";return t.useEffect(()=>{const e=x.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;y(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===v)return;const e=k-h.left-h.right,t=j?u-h.top-h.bottom:0;d.default(p.current).selectAll("*").remove();const a=d.default(p.current).attr("height",u).append("g").attr("transform",`translate(${h.left}, ${j?h.top:u-50})`),m=r.default().domain(o.map(e=>e.month)).range([0,e]).padding(.2),x=r.default().domain(["Total Transaction","Total Value","Average Value"]).range([0,m.bandwidth()]).padding(.1),g=s.default().domain([0,l.default(o,e=>l.default(e.data,e=>e.value))]).nice().range([t,0]),y=a.append("g").attr("class","x-axis").attr("transform",`translate(0, ${t})`).call(n.axisBottom(m).tickPadding(20));a.append("g").attr("class","y-axis").call(n.axisLeft(g).tickPadding(10).tickFormat(e=>{return t=e,`${q} ${i.format(".2s")(t).replace("k","K")}`;var t})).select(".domain").attr("stroke","none"),y.select(".domain").attr("stroke","none"),f&&a.selectAll(".grid-line").data(g.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",e).attr("y1",e=>g(e)).attr("y2",e=>g(e)).style("stroke","#ddd").style("stroke-dasharray","3,3").style("stroke-width",1),a.selectAll(".month-group").data(o).enter().append("g").attr("class","month-group").attr("transform",e=>`translate(${m(e.month)}, 0)`).selectAll("rect").data(e=>e.data).enter().append("rect").attr("x",e=>x(e.type)+(x.bandwidth()-c)/2).attr("y",e=>g(e.value)).attr("width",c).attr("height",e=>t-g(e.value)).attr("fill",e=>e.color).attr("rx",5).attr("ry",5)},[o,c,u,k,v,f,h,q,j]),/* @__PURE__ */e.jsx("div",{ref:x,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("div",{style:{position:"relative"},children:/* @__PURE__ */e.jsx("div",{ref:g,style:{width:"100%",overflowX:b?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:p,width:k,height:u,viewBox:`0 0 ${k} ${u}`,style:{display:"block"}})})})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../../../hooks/useAuth/index.js"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),s=require("../../../../node_modules/d3-scale/src/linear/index.js"),l=require("../../../../node_modules/d3-array/src/max/index.js"),d=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");const o=({chartData:o,height:u=500,barWidth:c=40,margin:h={top:40,right:20,bottom:40,left:50},line:f=!1})=>{var m;const p=t.useRef(null),x=t.useRef(null),g=t.useRef(null),[v,y]=t.useState(0),j=t.useMemo(()=>Math.max(...o.map(e=>e.data.map(e=>e.value)).flat()),[o]),b=o.length>12,k=b?Math.max(120*o.length,v):v,{user:w}=a.useAuth(),q=(null==(m=null==w?void 0:w.currency_data)?void 0:m.symbol)||"";return t.useEffect(()=>{const e=x.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;y(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===v)return;const e=k-h.left-h.right,t=j?u-h.top-h.bottom:0;d.default(p.current).selectAll("*").remove();const a=d.default(p.current).attr("height",u).append("g").attr("transform",`translate(${h.left}, ${j?h.top:u-50})`),m=r.default().domain(o.map(e=>e.month)).range([0,e]).padding(.2),x=r.default().domain(["Total Transaction","Total Value","Average Value"]).range([0,m.bandwidth()]).padding(.1),g=s.default().domain([0,l.default(o,e=>l.default(e.data,e=>e.value))]).nice().range([t,0]),y=a.append("g").attr("class","x-axis").attr("transform",`translate(0, ${t})`).call(n.axisBottom(m).tickPadding(20));a.append("g").attr("class","y-axis").call(n.axisLeft(g).tickPadding(10).tickFormat(e=>{return t=e,`${q} ${i.format(".2s")(t).replace("k","K")}`;var t})).select(".domain").attr("stroke","none"),y.select(".domain").attr("stroke","none"),f&&a.selectAll(".grid-line").data(g.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",e).attr("y1",e=>g(e)).attr("y2",e=>g(e)).style("stroke","#ddd").style("stroke-dasharray","3,3").style("stroke-width",1),a.selectAll(".month-group").data(o).enter().append("g").attr("class","month-group").attr("transform",e=>`translate(${m(e.month)}, 0)`).selectAll("rect").data(e=>e.data).enter().append("rect").attr("x",e=>x(e.type)+(x.bandwidth()-c)/2).attr("y",e=>g(e.value)).attr("width",c).attr("height",e=>t-g(e.value)).attr("fill",e=>e.color).attr("rx",5).attr("ry",5)},[o,c,u,k,v,f,h,q,j]),/* @__PURE__ */e.jsx("div",{ref:x,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("div",{style:{position:"relative"},children:/* @__PURE__ */e.jsx("div",{ref:g,style:{width:"100%",overflowX:b?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:p,width:k,height:u,viewBox:`0 0 ${k} ${u}`,style:{display:"block"}})})})})};exports.GroupedBarChart=o,exports.default=o;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/groupBarChart/GroupBarChart/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n chartData: any[],\n height?: number,\n margin?: any,\n barWidth?: number,\n line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n chartData, \n height = 500, \n barWidth = 40, \n margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n line = false \n}: IGroupChartProps) => {\n const svgRef = useRef<SVGSVGElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n\n const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n const needsHorizontalScroll = chartData.length > 12;\n const minGroupWidth = 120; \n const calculatedChartWidth = needsHorizontalScroll \n ? Math.max(chartData.length * minGroupWidth, containerWidth)\n : containerWidth;\n\n const { user } = useAuth();\n const defaultCurrencySymbol = user?.currency_data?.symbol \|\| '';\n\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 if (containerWidth === 0) return; \n \n const chartWidth = calculatedChartWidth - margin.left - margin.right;\n const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n \n d3.select(svgRef.current).selectAll('*').remove();\n \n const svg = d3.select(svgRef.current)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n const x0 = d3.scaleBand()\n .domain(chartData.map(d => d.month))\n .range([0, chartWidth])\n .padding(0.2);\n\n const x1 = d3.scaleBand()\n .domain(['Total Transaction', 'Total Value', 'Average Value'])\n .range([0, x0.bandwidth()])\n .padding(0.1);\n\n const y = d3.scaleLinear()\n .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n .nice()\n .range([chartHeight, 0]);\n\n const xAxis = svg.append('g')\n .attr('class', 'x-axis')\n .attr('transform', `translate(0, ${chartHeight})`)\n .call(d3.axisBottom(x0).tickPadding(20));\n \n const yAxis = svg.append('g')\n .attr('class', 'y-axis')\n .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n \n if (line) {\n svg.selectAll('.grid-line')\n .data(y.ticks())\n .enter()\n .append('line')\n .attr('class', 'grid-line')\n .attr('x1', 0)\n .attr('x2', chartWidth)\n .attr('y1', d => y(d))\n .attr('y2', d => y(d))\n .style('stroke', '#ddd')\n .style('stroke-dasharray', '3,3') // Dotted line\n .style('stroke-width', 1);\n }\n\n const monthGroups = svg.selectAll('.month-group')\n .data(chartData)\n .enter()\n .append('g')\n .attr('class', 'month-group')\n .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n monthGroups.selectAll('rect')\n .data(d => d.data)\n .enter()\n .append('rect')\n .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n .attr('y', d => y(d.value))\n .attr('width', barWidth)\n .attr('height', d => chartHeight - y(d.value))\n .attr('fill', d => d.color)\n .attr('rx', 5)\n .attr('ry', 5);\n\n }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <div \n ref={scrollContainerRef}\n style={{ \n width: '100%', \n overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n overflowY: 'hidden'\n }}\n >\n <svg \n ref={svgRef} \n width={calculatedChartWidth} \n height={height} \n viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n style={{ display: 'block' }}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default GroupedBarChart;"],"names":["chartData","height","barWidth","margin","top","right","bottom","left","line","svgRef","useRef","wrapperRef","scrollContainerRef","containerWidth","setContainerWidth","useState","maxValue","useMemo","Math","max","map","d","data","v","value","flat","needsHorizontalScroll","length","calculatedChartWidth","user","useAuth","defaultCurrencySymbol","_a","currency_data","symbol","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartWidth","chartHeight","d3.select","selectAll","remove","svg","attr","append","x0","d3.scaleBand","domain","month","range","padding","x1","bandwidth","y","d3.scaleLinear","d3.max","nice","xAxis","call","d3.axisBottom","tickPadding","d3.axisLeft","tickFormat","formatNumber","num","d3.format","replace","select","ticks","enter","style","type","color","ref","children","jsx","position","overflowX","overflowY","viewBox","display"],"mappings":"~~glBAgBwB~~,~~EACpBA~~,YACAC,SAAS,IACTC,WAAW,GACXC,SAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACjDC,QAAO,YAEP,MAAMC,EAASC,EAAAA,OAAsB,MAC/BC,EAAaD,EAAAA,OAAuB,MACpCE,EAAqBF,EAAAA,OAAuB,OAC3CG,EAAgBC,GAAqBC,EAAAA,SAAiB,GAEvDC,EAAWC,UAAQ,IAAMC,KAAKC,OAAOnB,EAAUoB,IAAKC,GAAMA,EAAEC,KAAKF,IAAIG,GAAGA,EAAEC,QAAQC,QAAS,CAACzB,IAE5F0B,EAAwB1B,EAAU2B,OAAS,GAE3CC,EAAuBF,EACvBR,KAAKC,IAFW,IAEPnB,EAAU2B,OAAwBd,GAC3CA,GAEAgB,KAAEA,GAASC,YACXC,GAAwB,OAAAC,EAAA,MAAAH,OAAA,EAAAA,EAAMI,oBAAN,EAAAD,EAAqBE,SAAU,GAmG7D,OAjGAC,EAAAA,UAAU,KACN,MAAMC,EAAUzB,EAAW0B,QAErBC,EAAiB,IAAIC,eAAgBC,IACvC,GAAIA,EAAQ,GAAI,CACZ,MAAMC,EAAWD,EAAQ,GAAGE,YAAYC,MACxC7B,EAAkB2B,EACtB,IAOJ,OAJIL,GACAE,EAAeM,QAAQR,GAGpB,KACCA,GACAE,EAAeO,UAAUT,KAGlC,IAEHD,EAAAA,UAAU,KACN,GAAuB,IAAnBtB,EAAsB,OAE1B,MAAMiC,EAAalB,EAAuBzB,EAAOI,KAAOJ,EAAOE,MACzD0C,EAAc/B,EAAWf,EAASE,EAAOC,IAAMD,EAAOG,OAAS,EAErE0C,EAAAA,QAAUvC,EAAO4B,SAASY,UAAU,KAAKC,SAEzC,MAAMC,EAAMH,EAAAA,QAAUvC,EAAO4B,SACxBe,KAAK,SAAUnD,GACfoD,OAAO,KACPD,KAAK,YAAa,aAAajD,EAAOI,SAASS,EAAWb,EAAOC,IAAMH,EAAO,OAE7EqD,EAAKC,EAAAA,UACNC,OAAOxD,EAAUoB,IAAIC,GAAKA,EAAEoC,QAC5BC,MAAM,CAAC,EAAGZ,IACVa,QAAQ,IAEPC,EAAKL,EAAAA,UACNC,OAAO,CAAC,oBAAqB,cAAe,kBAC5CE,MAAM,CAAC,EAAGJ,EAAGO,cACbF,QAAQ,IAEPG,EAAIC,EAAAA,UACLP,OAAO,CAAC,EAAGQ,EAAAA,QAAOhE,EAAWqB,GAAK2C,EAAAA,QAAO3C,EAAEC,KAAMA,GAAQA,EAAKE,UAC9DyC,OACAP,MAAM,CAACX,EAAa,IAEnBmB,EAAQf,EAAIE,OAAO,KACpBD,KAAK,QAAS,UACdA,KAAK,YAAa,gBAAgBL,MAClCoB,KAAKC,EAAAA,WAAcd,GAAIe,YAAY,KAE1BlB,EAAIE,OAAO,KACpBD,KAAK,QAAS,UACde,KAAKG,EAAAA,SAAYR,GAAGO,YAAY,IAAIE,WAAYlD,IAAWmD,OAnFlDC,EAmF+DpD,EAlF1E,GAkF6EU,KAlFhE2C,EAAAA,OAAU,MAAVA,CAAiBD,GAAKE,QAAQ,IAAK,OADtC,IAACF,KAqFRG,OAAO,WAAWxB,KAAK,SAAU,QACvCc,EAAMU,OAAO,WAAWxB,KAAK,SAAU,QAEnC5C,GACA2C,EAAIF,UAAU,cACT3B,KAAKwC,EAAEe,SACPC,QACAzB,OAAO,QACPD,KAAK,QAAS,aACdA,KAAK,KAAM,GACXA,KAAK,KAAMN,GACXM,KAAK,QAAWU,EAAEzC,IAClB+B,KAAK,KAAM/B,GAAKyC,EAAEzC,IAClB0D,MAAM,SAAU,QAChBA,MAAM,mBAAoB,OAC1BA,MAAM,eAAgB,GAGX5B,EAAIF,UAAU,gBAC7B3B,KAAKtB,GACL8E,QACAzB,OAAO,KACPD,KAAK,QAAS,eACdA,KAAK,YAAa/B,GAAK,aAAaiC,EAAGjC,EAAEoC,cAElCR,UAAU,QACjB3B,KAAKD,GAAKA,EAAEC,MACZwD,QACAzB,OAAO,QACPD,KAAK,IAAK/B,GAAKuC,EAAGvC,EAAE2D,OAASpB,EAAGC,YAAc3D,GAAY,GAC1DkD,KAAK,IAAK/B,GAAKyC,EAAEzC,EAAEG,QACnB4B,KAAK,QAASlD,GACdkD,KAAK,SAAU/B,GAAK0B,EAAce,EAAEzC,EAAEG,QACtC4B,KAAK,OAAQ/B,GAAKA,EAAE4D,OACpB7B,KAAK,KAAM,GACXA,KAAK,KAAM,IAEjB,CAACpD,EAAWE,EAAUD,EAAQ2B,EAAsBf,EAAgBL,EAAML,EAAQ4B,EAAuBf,yBAGvG,MAAA,CAAIkE,IAAKvE,EAAYoE,MAAO,CAAEpC,MAAO,OAAQ1C,OAAQ,QAClDkF,wBAAAC,MAAC,MAAA,CAAIL,MAAO,CAAEM,SAAU,YACpBF,wBAAAC,EAAAA,IAAC,MAAA,CACGF,IAAKtE,EACDmE,MAAO,CACHpC,MAAO,OACP2C,UAAW5D,EAAwB,OAAS,SAC5C6D,UAAW,UAGnBJ,wBAAAC,EAAAA,IAAC,MAAA,CACGF,IAAKzE,EACLkC,MAAOf,EACP3B,SACAuF,QAAS,OAAO5D,KAAwB3B,IACxC8E,MAAO,CAAEU,QAAS"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n chartData: any[],\n height?: number,\n margin?: any,\n barWidth?: number,\n line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n chartData, \n height = 500, \n barWidth = 40, \n margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n line = false \n}: IGroupChartProps) => {\n const svgRef = useRef<SVGSVGElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n\n const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n const needsHorizontalScroll = chartData.length > 12;\n const minGroupWidth = 120; \n const calculatedChartWidth = needsHorizontalScroll \n ? Math.max(chartData.length * minGroupWidth, containerWidth)\n : containerWidth;\n\n const { user } = useAuth();\n const defaultCurrencySymbol = user?.currency_data?.symbol \|\| '';\n\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 if (containerWidth === 0) return; \n \n const chartWidth = calculatedChartWidth - margin.left - margin.right;\n const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n \n d3.select(svgRef.current).selectAll('*').remove();\n \n const svg = d3.select(svgRef.current)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n const x0 = d3.scaleBand()\n .domain(chartData.map(d => d.month))\n .range([0, chartWidth])\n .padding(0.2);\n\n const x1 = d3.scaleBand()\n .domain(['Total Transaction', 'Total Value', 'Average Value'])\n .range([0, x0.bandwidth()])\n .padding(0.1);\n\n const y = d3.scaleLinear()\n .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n .nice()\n .range([chartHeight, 0]);\n\n const xAxis = svg.append('g')\n .attr('class', 'x-axis')\n .attr('transform', `translate(0, ${chartHeight})`)\n .call(d3.axisBottom(x0).tickPadding(20));\n \n const yAxis = svg.append('g')\n .attr('class', 'y-axis')\n .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n \n if (line) {\n svg.selectAll('.grid-line')\n .data(y.ticks())\n .enter()\n .append('line')\n .attr('class', 'grid-line')\n .attr('x1', 0)\n .attr('x2', chartWidth)\n .attr('y1', d => y(d))\n .attr('y2', d => y(d))\n .style('stroke', '#ddd')\n .style('stroke-dasharray', '3,3') // Dotted line\n .style('stroke-width', 1);\n }\n\n const monthGroups = svg.selectAll('.month-group')\n .data(chartData)\n .enter()\n .append('g')\n .attr('class', 'month-group')\n .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n monthGroups.selectAll('rect')\n .data(d => d.data)\n .enter()\n .append('rect')\n .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n .attr('y', d => y(d.value))\n .attr('width', barWidth)\n .attr('height', d => chartHeight - y(d.value))\n .attr('fill', d => d.color)\n .attr('rx', 5)\n .attr('ry', 5);\n\n }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <div \n ref={scrollContainerRef}\n style={{ \n width: '100%', \n overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n overflowY: 'hidden'\n }}\n >\n <svg \n ref={svgRef} \n width={calculatedChartWidth} \n height={height} \n viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n style={{ display: 'block' }}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport { GroupedBarChart };\nexport default GroupedBarChart;"],"names":["GroupedBarChart","chartData","height","barWidth","margin","top","right","bottom","left","line","svgRef","useRef","wrapperRef","scrollContainerRef","containerWidth","setContainerWidth","useState","maxValue","useMemo","Math","max","map","d","data","v","value","flat","needsHorizontalScroll","length","calculatedChartWidth","user","useAuth","defaultCurrencySymbol","_a","currency_data","symbol","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartWidth","chartHeight","d3.select","selectAll","remove","svg","attr","append","x0","d3.scaleBand","domain","month","range","padding","x1","bandwidth","y","d3.scaleLinear","d3.max","nice","xAxis","call","d3.axisBottom","tickPadding","d3.axisLeft","tickFormat","formatNumber","num","d3.format","replace","select","ticks","enter","style","type","color","ref","children","jsx","position","overflowX","overflowY","viewBox","display"],"mappings":"gkBAYA,MAIMA,EAAkB,EACpBC,YACAC,SAAS,IACTC,WAAW,GACXC,SAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACjDC,QAAO,YAEP,MAAMC,EAASC,EAAAA,OAAsB,MAC/BC,EAAaD,EAAAA,OAAuB,MACpCE,EAAqBF,EAAAA,OAAuB,OAC3CG,EAAgBC,GAAqBC,EAAAA,SAAiB,GAEvDC,EAAWC,UAAQ,IAAMC,KAAKC,OAAOnB,EAAUoB,IAAKC,GAAMA,EAAEC,KAAKF,IAAIG,GAAGA,EAAEC,QAAQC,QAAS,CAACzB,IAE5F0B,EAAwB1B,EAAU2B,OAAS,GAE3CC,EAAuBF,EACvBR,KAAKC,IAFW,IAEPnB,EAAU2B,OAAwBd,GAC3CA,GAEAgB,KAAEA,GAASC,YACXC,GAAwB,OAAAC,EAAA,MAAAH,OAAA,EAAAA,EAAMI,oBAAN,EAAAD,EAAqBE,SAAU,GAmG7D,OAjGAC,EAAAA,UAAU,KACN,MAAMC,EAAUzB,EAAW0B,QAErBC,EAAiB,IAAIC,eAAgBC,IACvC,GAAIA,EAAQ,GAAI,CACZ,MAAMC,EAAWD,EAAQ,GAAGE,YAAYC,MACxC7B,EAAkB2B,EACtB,IAOJ,OAJIL,GACAE,EAAeM,QAAQR,GAGpB,KACCA,GACAE,EAAeO,UAAUT,KAGlC,IAEHD,EAAAA,UAAU,KACN,GAAuB,IAAnBtB,EAAsB,OAE1B,MAAMiC,EAAalB,EAAuBzB,EAAOI,KAAOJ,EAAOE,MACzD0C,EAAc/B,EAAWf,EAASE,EAAOC,IAAMD,EAAOG,OAAS,EAErE0C,EAAAA,QAAUvC,EAAO4B,SAASY,UAAU,KAAKC,SAEzC,MAAMC,EAAMH,EAAAA,QAAUvC,EAAO4B,SACxBe,KAAK,SAAUnD,GACfoD,OAAO,KACPD,KAAK,YAAa,aAAajD,EAAOI,SAASS,EAAWb,EAAOC,IAAMH,EAAO,OAE7EqD,EAAKC,EAAAA,UACNC,OAAOxD,EAAUoB,IAAIC,GAAKA,EAAEoC,QAC5BC,MAAM,CAAC,EAAGZ,IACVa,QAAQ,IAEPC,EAAKL,EAAAA,UACNC,OAAO,CAAC,oBAAqB,cAAe,kBAC5CE,MAAM,CAAC,EAAGJ,EAAGO,cACbF,QAAQ,IAEPG,EAAIC,EAAAA,UACLP,OAAO,CAAC,EAAGQ,EAAAA,QAAOhE,EAAWqB,GAAK2C,EAAAA,QAAO3C,EAAEC,KAAMA,GAAQA,EAAKE,UAC9DyC,OACAP,MAAM,CAACX,EAAa,IAEnBmB,EAAQf,EAAIE,OAAO,KACpBD,KAAK,QAAS,UACdA,KAAK,YAAa,gBAAgBL,MAClCoB,KAAKC,EAAAA,WAAcd,GAAIe,YAAY,KAE1BlB,EAAIE,OAAO,KACpBD,KAAK,QAAS,UACde,KAAKG,EAAAA,SAAYR,GAAGO,YAAY,IAAIE,WAAYlD,IAAWmD,OAnFlDC,EAmF+DpD,EAlF1E,GAkF6EU,KAlFhE2C,EAAAA,OAAU,MAAVA,CAAiBD,GAAKE,QAAQ,IAAK,OADtC,IAACF,KAqFRG,OAAO,WAAWxB,KAAK,SAAU,QACvCc,EAAMU,OAAO,WAAWxB,KAAK,SAAU,QAEnC5C,GACA2C,EAAIF,UAAU,cACT3B,KAAKwC,EAAEe,SACPC,QACAzB,OAAO,QACPD,KAAK,QAAS,aACdA,KAAK,KAAM,GACXA,KAAK,KAAMN,GACXM,KAAK,QAAWU,EAAEzC,IAClB+B,KAAK,KAAM/B,GAAKyC,EAAEzC,IAClB0D,MAAM,SAAU,QAChBA,MAAM,mBAAoB,OAC1BA,MAAM,eAAgB,GAGX5B,EAAIF,UAAU,gBAC7B3B,KAAKtB,GACL8E,QACAzB,OAAO,KACPD,KAAK,QAAS,eACdA,KAAK,YAAa/B,GAAK,aAAaiC,EAAGjC,EAAEoC,cAElCR,UAAU,QACjB3B,KAAKD,GAAKA,EAAEC,MACZwD,QACAzB,OAAO,QACPD,KAAK,IAAK/B,GAAKuC,EAAGvC,EAAE2D,OAASpB,EAAGC,YAAc3D,GAAY,GAC1DkD,KAAK,IAAK/B,GAAKyC,EAAEzC,EAAEG,QACnB4B,KAAK,QAASlD,GACdkD,KAAK,SAAU/B,GAAK0B,EAAce,EAAEzC,EAAEG,QACtC4B,KAAK,OAAQ/B,GAAKA,EAAE4D,OACpB7B,KAAK,KAAM,GACXA,KAAK,KAAM,IAEjB,CAACpD,EAAWE,EAAUD,EAAQ2B,EAAsBf,EAAgBL,EAAML,EAAQ4B,EAAuBf,yBAGvG,MAAA,CAAIkE,IAAKvE,EAAYoE,MAAO,CAAEpC,MAAO,OAAQ1C,OAAQ,QAClDkF,wBAAAC,MAAC,MAAA,CAAIL,MAAO,CAAEM,SAAU,YACpBF,wBAAAC,EAAAA,IAAC,MAAA,CACGF,IAAKtE,EACDmE,MAAO,CACHpC,MAAO,OACP2C,UAAW5D,EAAwB,OAAS,SAC5C6D,UAAW,UAGnBJ,wBAAAC,EAAAA,IAAC,MAAA,CACGF,IAAKzE,EACLkC,MAAOf,EACP3B,SACAuF,QAAS,OAAO5D,KAAwB3B,IACxC8E,MAAO,CAAEU,QAAS"}

package/dist/components/charts/groupBarChart/GroupBarChart.d.ts CHANGED Viewed

@@ -6,4 +6,5 @@ export interface IGroupChartProps {
     line?: boolean;
 }
 declare const GroupedBarChart: ({ chartData, height, barWidth, margin, line }: IGroupChartProps) => import("react/jsx-runtime").JSX.Element;
+export { GroupedBarChart };
 export default GroupedBarChart;

package/dist/components/charts/index.d.ts CHANGED Viewed

@@ -3,10 +3,7 @@ export * from './areaLinerChart';
 export { default as ChartLegends } from './ChartLegends';
 export * from './ChartLegends';
 export * from './bar-chart';
-export * from './barChart';
 export * from './barLineChart';
 export * from './donut-chart';
-export * from './donutChart';
 export * from './groupBarChart';
-export * from './line-chart';
 export * from './multiLineChart';

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

@@ -95,6 +95,7 @@ const MultiLineChart = ({
   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,
   MultiLineChart as default
 };
 //# sourceMappingURL=index.esm.js.map

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

	@@ -1 +1 @@
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":"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"}
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 { MultiLineChart };\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 CHANGED Viewed

@@ -1,2 +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}`})})})};
+"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"),n=require("../../../../node_modules/d3-shape/src/line/index.js"),l=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");const c=({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=n.default().x((e,t)=>b(t)).y(e=>w(e)).curve(c[t].isSmooth?l.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}`})})})};exports.MultiLineChart=c,exports.default=c;
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
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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"}
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 { MultiLineChart };\nexport default MultiLineChart;\n"],"names":["MultiLineChart","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/charts/multiLineChart/multi-line-chart.d.ts CHANGED Viewed

@@ -17,4 +17,5 @@ export interface IMultiLineChartProps {
     currency?: string;
 }
 declare const MultiLineChart: ({ data, yAxisData, xAxisData, colors, height, margin, line, yAxisLabelType, currency, customLabelFormatter, }: IMultiLineChartProps) => import("react/jsx-runtime").JSX.Element;
+export { MultiLineChart };
 export default MultiLineChart;

package/dist/components/checkbox/checkbox/index.esm.js CHANGED Viewed

@@ -33,6 +33,7 @@ const Checkbox = memo((props) => {
   );
 });
 export {
+  Checkbox,
   Checkbox as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/checkbox/checkbox/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport default Checkbox;\n"],"names":["MUICheckbox"],"mappings":";;;;;;AAIA,MAAM,iBAAiB,OAAOA,UAAW,EAAE,CAAC,EAAE,OAAO,EAAE,QAAA,QAAU;;AAAO;AAAA,IACvE,SAAS;AAAA,IACT,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAChC,cAAc;AAAA,IACd,iBAAiB;AAAA,MAChB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAC9B,WAAW;AAAA,QACV,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAAG;AAAA,IAClC;AAAA,IAED,kBAAkB;AAAA,MACjB,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAAG;AAAA,EAErC;AAAA,CAAE;AAEF,MAAM,WAAW,KAAK,CAAC,UAAyB;AAC/C,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM,oBAAC,gBAAA,EAAe,WAAU,+BAAO,SAAQ,SAAS;AAAA,MACxD,aAAa,oBAAC,cAAA,EAAa,WAAU,+BAAO,SAAQ,SAAS;AAAA,MAC7D,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport { Checkbox };\nexport default Checkbox;\n"],"names":["MUICheckbox"],"mappings":";;;;;;AAIA,MAAM,iBAAiB,OAAOA,UAAW,EAAE,CAAC,EAAE,OAAO,EAAE,QAAA,QAAU;;AAAO;AAAA,IACvE,SAAS;AAAA,IACT,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAChC,cAAc;AAAA,IACd,iBAAiB;AAAA,MAChB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAC9B,WAAW;AAAA,QACV,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAAG;AAAA,IAClC;AAAA,IAED,kBAAkB;AAAA,MACjB,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAAG;AAAA,EAErC;AAAA,CAAE;AAEF,MAAM,WAAW,KAAK,CAAC,UAAyB;AAC/C,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM,oBAAC,gBAAA,EAAe,WAAU,+BAAO,SAAQ,SAAS;AAAA,MACxD,aAAa,oBAAC,cAAA,EAAa,WAAU,+BAAO,SAAQ,SAAS;AAAA,MAC7D,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/checkbox/checkbox/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../../node_modules/@mui/material/styles/styled/index.js"),i=require("../../icons/check-box/index.js"),l=require("../../icons/rectangle/index.js"),d=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");const s=o.default(d.default)(({theme:{palette:e}})=>{var r,o,i,l;return{padding:"0rem",color:null==(r=e.theme)?void 0:r.secondary[300],borderRadius:".625rem","&.Mui-checked":{color:null==(o=e.theme)?void 0:o.primary[600],"&:hover":{color:null==(i=e.theme)?void 0:i.primary[500]}},"&.Mui-disabled":{color:null==(l=e.theme)?void 0:l.secondary[400]}}}),n=r.memo(r=>/* @__PURE__ */e.jsx(s,{icon:/* @__PURE__ */e.jsx(l.RecgtangleIcon,{fontSize:(null==r?void 0:r.size)||"small"}),checkedIcon:/* @__PURE__ */e.jsx(i.CheckBoxIcon,{fontSize:(null==r?void 0:r.size)||"small"}),disableRipple:!0,...r}));exports.default=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../../node_modules/@mui/material/styles/styled/index.js"),i=require("../../icons/check-box/index.js"),l=require("../../icons/rectangle/index.js"),d=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");const s=o.default(d.default)(({theme:{palette:e}})=>{var r,o,i,l;return{padding:"0rem",color:null==(r=e.theme)?void 0:r.secondary[300],borderRadius:".625rem","&.Mui-checked":{color:null==(o=e.theme)?void 0:o.primary[600],"&:hover":{color:null==(i=e.theme)?void 0:i.primary[500]}},"&.Mui-disabled":{color:null==(l=e.theme)?void 0:l.secondary[400]}}}),t=r.memo(r=>/* @__PURE__ */e.jsx(s,{icon:/* @__PURE__ */e.jsx(l.RecgtangleIcon,{fontSize:(null==r?void 0:r.size)||"small"}),checkedIcon:/* @__PURE__ */e.jsx(i.CheckBoxIcon,{fontSize:(null==r?void 0:r.size)||"small"}),disableRipple:!0,...r}));exports.Checkbox=t,exports.default=t;
 //# sourceMappingURL=index.js.map

package/dist/components/checkbox/checkbox/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport default Checkbox;\n"],"names":["StyledCheckbox","styled","MUICheckbox","theme","palette","padding","color","_a","secondary","borderRadius","_b","primary","_c","_d","Checkbox","memo","props","jsx","icon","RecgtangleIcon","fontSize","size","checkedIcon","CheckBoxIcon","disableRipple"],"mappings":"sWAIA,MAAMA,EAAiBC,EAAAA,QAAOC,UAAPD,CAAoB,EAAGE,OAASC,2BAAiB,MAAA,CACvEC,QAAS,OACTC,MAAO,OAAAC,EAAAH,EAAQD,YAAR,EAAAI,EAAeC,UAAU,KAChCC,aAAc,UACd,gBAAiB,CAChBH,MAAO,OAAAI,EAAAN,EAAQD,YAAR,EAAAO,EAAeC,QAAQ,KAC9B,UAAW,CACVL,MAAO,OAAAM,EAAAR,EAAQD,YAAR,EAAAS,EAAeD,QAAQ,OAGhC,iBAAkB,CACjBL,MAAO,OAAAO,EAAAT,EAAQD,YAAR,EAAAU,EAAeL,UAAU,SAI5BM,EAAWC,EAAAA,KAAMC,kBAErBC,EAAAA,IAACjB,EAAA,CACAkB,oBAAMD,EAAAA,IAACE,iBAAA,CAAeC,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UAC/CC,2BAAaL,EAAAA,IAACM,eAAA,CAAaH,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UACpDG,eAAa,KACTR"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size \|\| 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport { Checkbox };\nexport default Checkbox;\n"],"names":["StyledCheckbox","styled","MUICheckbox","theme","palette","padding","color","_a","secondary","borderRadius","_b","primary","_c","_d","Checkbox","memo","props","jsx","icon","RecgtangleIcon","fontSize","size","checkedIcon","CheckBoxIcon","disableRipple"],"mappings":"sWAIA,MAAMA,EAAiBC,EAAAA,QAAOC,UAAPD,CAAoB,EAAGE,OAASC,2BAAiB,MAAA,CACvEC,QAAS,OACTC,MAAO,OAAAC,EAAAH,EAAQD,YAAR,EAAAI,EAAeC,UAAU,KAChCC,aAAc,UACd,gBAAiB,CAChBH,MAAO,OAAAI,EAAAN,EAAQD,YAAR,EAAAO,EAAeC,QAAQ,KAC9B,UAAW,CACVL,MAAO,OAAAM,EAAAR,EAAQD,YAAR,EAAAS,EAAeD,QAAQ,OAGhC,iBAAkB,CACjBL,MAAO,OAAAO,EAAAT,EAAQD,YAAR,EAAAU,EAAeL,UAAU,SAI5BM,EAAWC,EAAAA,KAAMC,kBAErBC,EAAAA,IAACjB,EAAA,CACAkB,oBAAMD,EAAAA,IAACE,iBAAA,CAAeC,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UAC/CC,2BAAaL,EAAAA,IAACM,eAAA,CAAaH,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UACpDG,eAAa,KACTR"}

package/dist/components/checkbox/checkbox.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { CheckboxProps } from '@mui/material';
 declare const Checkbox: import('react').MemoExoticComponent<(props: CheckboxProps) => import("react/jsx-runtime").JSX.Element>;
+export { Checkbox };
 export default Checkbox;

package/dist/components/chip/chip/index.esm.js CHANGED Viewed

@@ -85,6 +85,7 @@ const Chip = (props) => {
   );
 };
 export {
+  Chip,
   Chip as default
 };
 //# sourceMappingURL=index.esm.js.map