@erpsquad/common 1.8.75 → 1.8.77

package/dist/components/charts/barChart/barChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/barChart/barChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo, useState } 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    initialWidth?: number;\n    height?: any;\n    line?: boolean;\n    chartBarWidth?: number;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency: string\n}\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\nfunction wrapText(textSelection: any, width: number) {\n    textSelection.each(function (this: any) {\n      const text = d3.select(this);\n      const originalText = text.text();\n      \n      if (originalText.length <= 8) {\n        return;\n      }\n      \n      if (originalText.length > 12) {\n        text.text(originalText.substring(0, 10) + '...');\n        return;\n      }\n      \n      const words = originalText.split(/\\s+/).reverse();\n      let word;\n      let line: string[] = [];\n      let lineNumber = 0;\n      const lineHeight = 1.1; // ems\n      const y = text.attr(\"y\");\n      const dy = parseFloat(text.attr(\"dy\")) || 0;\n  \n      let tspan = text\n        .text(null)\n        .append(\"tspan\")\n        .attr(\"x\", 0)\n        .attr(\"y\", y)\n        .attr(\"dy\", `${dy}em`);\n  \n      while ((word = words.pop())) {\n        line.push(word);\n        tspan.text(line.join(\" \"));\n        if (tspan.node() && tspan.node()!.getComputedTextLength() > width) {\n          line.pop();\n          tspan.text(line.join(\" \"));\n          line = [word];\n          tspan = text\n            .append(\"tspan\")\n            .attr(\"x\", 0)\n            .attr(\"y\", y)\n            .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n            .text(word);\n        }\n      }\n    });\n  }\n  \nconst BarChart: React.FC<BarChartProps> = ({\n    data,\n    numOfLines = 5,\n    initialWidth = 500,\n    height = 400,\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState(initialWidth);\n\n    const maxValue = useMemo(() => Math.max(...data.map((d) => d.value)), [data]);\n\n    const yAxisMaxValue = useMemo(() => maxValue * 1.25, [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\n    const needsHorizontalScroll = data.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    // ResizeObserver to make the chart responsive\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    useEffect(() => {\n        if (containerWidth === 0) return;\n\n        const svg = d3.select(svgRef.current);\n\n        svg.selectAll(\"*\").remove();\n\n        // Calculate dynamic left margin based on label length (accounting for wrapping)\n        // const sampleLabel = customLabelFormatter \n        //     ? customLabelFormatter(yAxisMaxValue)\n        //     : formatNumber(yAxisMaxValue, currency, yAxisLabelType);\n        const maxLabelWidth = 80; // Maximum width for wrapped labels\n        const dynamicLeftMargin = Math.max(60, maxLabelWidth + 30);\n        \n        const margin = { top: 20, right: 20, bottom: 25, left: dynamicLeftMargin };\n        const barWidth = calculatedChartWidth - margin.left - margin.right;\n        const barHeight = maxValue ? height - margin.top - margin.bottom : 0;\n\n        const x = d3\n            .scaleBand()\n            .domain(data.map((d) => d.label))\n            .range([0, barWidth])\n            .padding(0.5);\n\n        const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n        \n        const chart = svg\n        .append(\"g\")\n        .attr(\"transform\", `translate(${margin.left},${maxValue?margin.top:height-50})`);\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\", \"#D3D3D4\")\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(\"rx\", 5)\n            .attr(\"ry\", 5)\n            .attr(\"class\", \"bar\")\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\", (d: any) => d.color);\n\n        const xAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(0, ${barHeight})`)\n            .call(d3.axisTop(x).tickPadding(10) as any)\n            .call(d3.axisBottom(x).tickPadding(5) as any)\n            // .call(d3.axisLeft(x).tickPadding(5) as any)\n\n        xAxis.selectAll(\".tick line\").remove();\n        xAxis.selectAll(\".tick text\").call(wrapText,80);   \n\n        // Calculate optimal number of ticks to prevent overlap\n        const availableHeight = barHeight;\n        const minTickSpacing = 30; // Minimum pixels between ticks\n        const maxOptimalTicks = Math.floor(availableHeight / minTickSpacing);\n        const optimalNumTicks = Math.min(numOfLines, maxOptimalTicks, 8);\n        \n        // Generate optimal tick values\n        const optimalTicks = [];\n        const optimalInterval = yAxisMaxValue / optimalNumTicks;\n        for (let i = 0; i <= optimalNumTicks; i++) {\n            optimalTicks.push(optimalInterval * i);\n        }\n\n        const yAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .call(\n                d3.axisLeft(y)\n                    .tickValues(optimalTicks)\n                    .tickFormat((d: any) =>\n                        customLabelFormatter\n                            ? customLabelFormatter(d)\n                            : formatNumber(d, currency, yAxisLabelType)\n                    )\n                    .tickSizeOuter(0)\n                    .tickPadding(8) as any, // Add padding between ticks and labels\n            );\n\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        // Style y-axis labels for better readability and apply text wrapping\n        yAxis.selectAll(\".tick text\")\n            .style(\"font-size\", \"11px\")\n            .style(\"fill\", \"#666\")\n            .style(\"font-family\", \"Inter, system-ui, Avenir, Helvetica, Arial, sans-serif\")\n            .style(\"text-anchor\", \"end\")\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [data, containerWidth, height, line, yAxisMaxValue, yAxisTicks, currency, yAxisLabelType, customLabelFormatter, calculatedChartWidth]);\n\n    return (\n        <div ref={wrapperRef} \n        style={{ \n            width: '100%', \n            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n            overflowY: 'hidden'\n        }}>\n            <svg ref={svgRef} width={calculatedChartWidth} height={height} viewBox={`0 0 ${calculatedChartWidth} ${height}`} />\n        </div>\n    );\n};\n\nexport default BarChart;\n"],"names":["wrapText","textSelection","width","each","text","d3.select","this","originalText","length","substring","words","split","reverse","word","line","lineNumber","y","attr","dy","parseFloat","tspan","append","pop","push","join","node","getComputedTextLength","data","numOfLines","initialWidth","height","yAxisLabelType","currency","customLabelFormatter","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","needsHorizontalScroll","calculatedChartWidth","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","observe","unobserve","svg","selectAll","remove","margin","maxLabelWidth","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","d3.scaleLinear","chart","slice","forEach","tick","style","enter","bandwidth","color","xAxis","call","d3.axisTop","tickPadding","d3.axisBottom","availableHeight","maxOptimalTicks","floor","optimalNumTicks","min","optimalTicks","optimalInterval","yAxis","d3.axisLeft","tickValues","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","jsx","ref","overflowX","overflowY","children","viewBox"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/barChart/barChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo, useState } 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    initialWidth?: number;\n    height?: any;\n    line?: boolean;\n    chartBarWidth?: number;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency: string\n}\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\nfunction wrapText(textSelection: any, width: number) {\n    textSelection.each(function (this: any) {\n      const text = d3.select(this);\n      const originalText = text.text();\n      \n      if (originalText.length <= 8) {\n        return;\n      }\n      \n      if (originalText.length > 12) {\n        text.text(originalText.substring(0, 10) + '...');\n        return;\n      }\n      \n      const words = originalText.split(/\\s+/).reverse();\n      let word;\n      let line: string[] = [];\n      let lineNumber = 0;\n      const lineHeight = 1.1; // ems\n      const y = text.attr(\"y\");\n      const dy = parseFloat(text.attr(\"dy\")) || 0;\n  \n      let tspan = text\n        .text(null)\n        .append(\"tspan\")\n        .attr(\"x\", 0)\n        .attr(\"y\", y)\n        .attr(\"dy\", `${dy}em`);\n  \n      while ((word = words.pop())) {\n        line.push(word);\n        tspan.text(line.join(\" \"));\n        if (tspan.node() && tspan.node()!.getComputedTextLength() > width) {\n          line.pop();\n          tspan.text(line.join(\" \"));\n          line = [word];\n          tspan = text\n            .append(\"tspan\")\n            .attr(\"x\", 0)\n            .attr(\"y\", y)\n            .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n            .text(word);\n        }\n      }\n    });\n  }\n  \nconst BarChart: React.FC<BarChartProps> = ({\n    data,\n    numOfLines = 5,\n    initialWidth = 500,\n    height = 400,\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState(initialWidth);\n\n    const maxValue = useMemo(() => Math.max(...data.map((d) => d.value)), [data]);\n\n    const yAxisMaxValue = useMemo(() => maxValue * 1.25, [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\n    const needsHorizontalScroll = data.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    // ResizeObserver to make the chart responsive\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    useEffect(() => {\n        if (containerWidth === 0) return;\n\n        const svg = d3.select(svgRef.current);\n\n        svg.selectAll(\"*\").remove();\n\n        // Calculate dynamic left margin based on label length (accounting for wrapping)\n        // const sampleLabel = customLabelFormatter \n        //     ? customLabelFormatter(yAxisMaxValue)\n        //     : formatNumber(yAxisMaxValue, currency, yAxisLabelType);\n        const maxLabelWidth = 80; // Maximum width for wrapped labels\n        const dynamicLeftMargin = Math.max(60, maxLabelWidth + 30);\n        \n        const margin = { top: 20, right: 20, bottom: 25, left: dynamicLeftMargin };\n        const barWidth = calculatedChartWidth - margin.left - margin.right;\n        const barHeight = maxValue ? height - margin.top - margin.bottom : 0;\n\n        const x = d3\n            .scaleBand()\n            .domain(data.map((d) => d.label))\n            .range([0, barWidth])\n            .padding(0.5);\n\n        const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n        \n        const chart = svg\n        .append(\"g\")\n        .attr(\"transform\", `translate(${margin.left},${maxValue?margin.top:height-50})`);\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\", \"#D3D3D4\")\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(\"rx\", 5)\n            .attr(\"ry\", 5)\n            .attr(\"class\", \"bar\")\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\", (d: any) => d.color);\n\n        const xAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(0, ${barHeight})`)\n            .call(d3.axisTop(x).tickPadding(10) as any)\n            .call(d3.axisBottom(x).tickPadding(5) as any)\n            // .call(d3.axisLeft(x).tickPadding(5) as any)\n\n        xAxis.selectAll(\".tick line\").remove();\n        xAxis.selectAll(\".tick text\").call(wrapText,80);   \n\n        // Calculate optimal number of ticks to prevent overlap\n        const availableHeight = barHeight;\n        const minTickSpacing = 30; // Minimum pixels between ticks\n        const maxOptimalTicks = Math.floor(availableHeight / minTickSpacing);\n        const optimalNumTicks = Math.min(numOfLines, maxOptimalTicks, 8);\n        \n        // Generate optimal tick values\n        const optimalTicks = [];\n        const optimalInterval = yAxisMaxValue / optimalNumTicks;\n        for (let i = 0; i <= optimalNumTicks; i++) {\n            optimalTicks.push(optimalInterval * i);\n        }\n\n        const yAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .call(\n                d3.axisLeft(y)\n                    .tickValues(optimalTicks)\n                    .tickFormat((d: any) =>\n                        customLabelFormatter\n                            ? customLabelFormatter(d)\n                            : formatNumber(d, currency, yAxisLabelType)\n                    )\n                    .tickSizeOuter(0)\n                    .tickPadding(8) as any, // Add padding between ticks and labels\n            );\n\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        // Style y-axis labels for better readability and apply text wrapping\n        yAxis.selectAll(\".tick text\")\n            .style(\"font-size\", \"11px\")\n            .style(\"fill\", \"#666\")\n            .style(\"font-family\", \"Inter, system-ui, Avenir, Helvetica, Arial, sans-serif\")\n            .style(\"text-anchor\", \"end\")\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [data, containerWidth, height, line, yAxisMaxValue, yAxisTicks, currency, yAxisLabelType, customLabelFormatter, calculatedChartWidth]);\n\n    return (\n        <div ref={wrapperRef} \n        style={{ \n            width: '100%', \n            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n            overflowY: 'hidden'\n        }}>\n            <svg ref={svgRef} width={calculatedChartWidth} height={height} viewBox={`0 0 ${calculatedChartWidth} ${height}`} />\n        </div>\n    );\n};\n\nexport { BarChart };\nexport default BarChart;\n"],"names":["wrapText","textSelection","width","each","text","d3.select","this","originalText","length","substring","words","split","reverse","word","line","lineNumber","y","attr","dy","parseFloat","tspan","append","pop","push","join","node","getComputedTextLength","BarChart","data","numOfLines","initialWidth","height","yAxisLabelType","currency","customLabelFormatter","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","needsHorizontalScroll","calculatedChartWidth","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","observe","unobserve","svg","selectAll","remove","margin","maxLabelWidth","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","d3.scaleLinear","chart","slice","forEach","tick","style","enter","bandwidth","color","xAxis","call","d3.axisTop","tickPadding","d3.axisBottom","availableHeight","maxOptimalTicks","floor","optimalNumTicks","min","optimalTicks","optimalInterval","yAxis","d3.axisLeft","tickValues","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","jsx","ref","overflowX","overflowY","children","viewBox"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface BarChartProps {
+    data: DataPoint[];
+    numOfLines?: number;
+    initialWidth?: number;
+    height?: any;
+    line?: boolean;
+    chartBarWidth?: number;
+    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';
+    customLabelFormatter?: (value: number) => string;
+    currency: string;
+}
+declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
+export default BarChart;

package/dist/components/charts/barChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BarChart } from './barChart';
+export * from './barChart';

package/dist/components/charts/barLineChart/barLinechart.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    [key: string]: string | number;
+}
+interface ChartField {
+    field: string;
+    color: string;
+    label: string;
+}
+export interface IBarLineChartProps {
+    data: DataPoint[];
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    bars: ChartField[];
+    lines: ChartField[];
+    line?: boolean;
+    showGrid?: boolean;
+    barColors?: any[];
+    lineColors?: any[];
+}
+declare const BarLineChart: React.FC<IBarLineChartProps>;
+export default BarLineChart;

package/dist/components/charts/barLineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BarLineChart } from './barLinechart';
+export * from './barLinechart';

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

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

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

@@ -1 +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 default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc"],"mappings":"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"}
+{"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\nexport const 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 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

@@ -1,6 +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"];exports.default=({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:g=n,titleProps:x={},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)=>g[t%g.length]),n.append("text").attr("text-anchor","middle").attr("font-size","18px").attr("font-weight","600").attr("alignment-baseline","central").html(m)},[g,d,i,m,o]),h?/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsxs("div",{className:`donut-chart-container ${u}`,children:[
+"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 ${g[s]}`},children:[
-/* @__PURE__ */e.jsx("div",{className:"legend-title",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",color:"theme.secondary.800",...x,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})};
+/* @__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

@@ -1 +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 default DonutChart;\n"],"names":["defaultColors","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,2BAW4C,EAC7CC,OACAC,SAAS,IACTC,QAAQ,IACPC,iBACDC,UAAS,EACTC,YAAY,aACXC,aACDC,SAASJ,EAAiBG,EAAa,UACtCE,SAAST,EACTU,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"}
+{"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\nexport const 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 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,WAWWC,EAAwC,EACpDC,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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface DonutChartProps {
+    data: DataPoint[];
+    width?: number;
+    height?: number;
+    legend?: boolean;
+    direction?: "vertical" | "horizontal";
+    total?: string;
+    colors?: Array<string>;
+    titleProps?: any;
+    valueProps?: any;
+    isUserDashbord?: boolean;
+    totalUsers?: any;
+}
+export declare const DonutChart: React.FC<DonutChartProps>;
+export default DonutChart;

package/dist/components/charts/donut-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DonutChart } from './donut-chart';
+export * from './donut-chart';

package/dist/components/charts/donutChart/DonutChart/index.esm.js

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

package/dist/components/charts/donutChart/DonutChart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/donutChart/DonutChart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\nimport { useAuth } from \"../../../hooks/useAuth\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  donutThickerValue?: number\n  CustomLegends?: React.FC<{ data: DataPoint[] }>;\n  title: string\n}\n\nconst formatNumber = (num: number, defaultCurrencySymbol: string = ''): string => {\n  if (num >= 1_000_000) {\n    return `${defaultCurrencySymbol} ${(num / 1_000_000).toFixed(1)} M`;\n  } else if (num >= 100_000) {\n    return `${defaultCurrencySymbol} ${(num / 100_000).toFixed(1)} L`; // L for Lakhs\n  } else if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1)} K`;\n  } else {\n    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;\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  data,\n  height = 140,\n  width = 140,\n  legend = true,\n  direction = \"vertical\",\n  total = \"300\",\n  donutThickerValue,\n  CustomLegends,\n  title = ''\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const { user } = useAuth();\n  const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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    let innerRadius = Math.min(width, height) / 2 - margin * 2;\n    if (donutThickerValue) {\n      innerRadius = outerRadius - donutThickerValue;\n    }\n\n\n\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value)).padAngle(0);\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius)\n\n    const pies = g\n      .selectAll(\".arc\")\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n\n    pies\n      .append(\"path\")\n      .attr(\"d\", path)\n      .attr(\"fill\", (d: DataPoint) => d?.data?.color).attr(\"stroke\", \"none\");\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    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr('maring-top', \"20px\")\n      .attr(\"font-size\", \"13px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"dy\", \"2em\")\n      .attr(\"color\", \"#7B7C7F\")\n      .html(title);\n\n  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);\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\n\n        {CustomLegends ? (\n          <CustomLegends data={data} /> // Render the custom component\n        ) : (\n          <div className='donut-legend'>\n            <div className={`donut-chart-legend ${direction}`}>\n              {data.map((d: DataPoint) => (\n                <div\n                  className=\"legend\"\n                  key={d.label}\n                  style={{ borderLeft: `0.188rem solid ${d.color}` }}\n                >\n                  <div className=\"legend-title\" style={{ color: `${d.labelColor}` }}>{d.label}</div>\n                  <div className=\"legend-value\">\n                    <Typography\n                      type=\"s5\"\n                      weight=\"medium\"\n                      color={d.valueColor}\n                      style={{\n                        whiteSpace: 'nowrap'\n                      }}\n                    >\n                      {formatNumber(d.value, defaultCurrencySymbol)}\n                    </Typography>\n                  </div>\n                </div>\n              ))\n              }\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc","_a"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/donutChart/DonutChart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\nimport { useAuth } from \"../../../hooks/useAuth\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  donutThickerValue?: number\n  CustomLegends?: React.FC<{ data: DataPoint[] }>;\n  title: string\n}\n\nconst formatNumber = (num: number, defaultCurrencySymbol: string = ''): string => {\n  if (num >= 1_000_000) {\n    return `${defaultCurrencySymbol} ${(num / 1_000_000).toFixed(1)} M`;\n  } else if (num >= 100_000) {\n    return `${defaultCurrencySymbol} ${(num / 100_000).toFixed(1)} L`; // L for Lakhs\n  } else if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1)} K`;\n  } else {\n    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;\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  data,\n  height = 140,\n  width = 140,\n  legend = true,\n  direction = \"vertical\",\n  total = \"300\",\n  donutThickerValue,\n  CustomLegends,\n  title = ''\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const { user } = useAuth();\n  const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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    let innerRadius = Math.min(width, height) / 2 - margin * 2;\n    if (donutThickerValue) {\n      innerRadius = outerRadius - donutThickerValue;\n    }\n\n\n\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value)).padAngle(0);\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius)\n\n    const pies = g\n      .selectAll(\".arc\")\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n\n    pies\n      .append(\"path\")\n      .attr(\"d\", path)\n      .attr(\"fill\", (d: DataPoint) => d?.data?.color).attr(\"stroke\", \"none\");\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    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr('maring-top', \"20px\")\n      .attr(\"font-size\", \"13px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"dy\", \"2em\")\n      .attr(\"color\", \"#7B7C7F\")\n      .html(title);\n\n  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);\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\n\n        {CustomLegends ? (\n          <CustomLegends data={data} /> // Render the custom component\n        ) : (\n          <div className='donut-legend'>\n            <div className={`donut-chart-legend ${direction}`}>\n              {data.map((d: DataPoint) => (\n                <div\n                  className=\"legend\"\n                  key={d.label}\n                  style={{ borderLeft: `0.188rem solid ${d.color}` }}\n                >\n                  <div className=\"legend-title\" style={{ color: `${d.labelColor}` }}>{d.label}</div>\n                  <div className=\"legend-value\">\n                    <Typography\n                      type=\"s5\"\n                      weight=\"medium\"\n                      color={d.valueColor}\n                      style={{\n                        whiteSpace: 'nowrap'\n                      }}\n                    >\n                      {formatNumber(d.value, defaultCurrencySymbol)}\n                    </Typography>\n                  </div>\n                </div>\n              ))\n              }\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc","_a"],"mappings":"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"}

package/dist/components/charts/donutChart/DonutChart/index.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");;/* empty css                         */var r=,/* empty css                                    */a=,/* empty css                               */l=,/* empty css                                                      */n=,/* empty css                                               */d=;/* empty css                                               */const s=(e,t="")=>e>=1e6?`${t} ${(e/1e6).toFixed(1)} M`:e>=1e5?`${t} ${(e/1e5).toFixed(1)} L`:e>=1e3?`${(e/1e3).toFixed(1)} K`:`${t} ${e.toFixed(2)}`;exports.default=({data:i,height:o=140,width:c=140,legend:u=!0,direction:h="vertical",total:p="300",donutThickerValue:x,CustomLegends:m,title:v=""})=>{var g;const f=t.useRef(null),{user:j}=a.useAuth(),y=(null==(g=null==j?void 0:j.currency_data)?void 0:g.symbol)||"";return t.useEffect(()=>{if(!f.current)return;const e=l.default(f.current);e.selectAll("*").remove();const t=Math.min(c,o)/2-6;let r=Math.min(c,o)/2-12;x&&(r=t-x);const a=e.append("g").attr("transform",`translate(${c/2}, ${o/2})`),s=n.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)).padAngle(0),u=d.default().outerRadius(t).innerRadius(r);a.selectAll(".arc").data(s(i)).enter().append("g").attr("class","arc").append("path").attr("d",u).attr("fill",e=>{var t;return null==(t=null==e?void 0:e.data)?void 0:t.color}).attr("stroke","none"),a.append("text").attr("text-anchor","middle").attr("font-size","18px").attr("font-weight","600").attr("alignment-baseline","central").html(p),a.append("text").attr("text-anchor","middle").attr("maring-top","20px").attr("font-size","13px").attr("font-weight","600").attr("dy","2em").attr("color","#7B7C7F").html(v)},[i,o,p,c,y,x,m,v]),u?/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsxs("div",{className:`donut-chart-container ${h}`,children:[
-/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx("svg",{ref:f,width:c,height:o})}),m?/* @__PURE__ */e.jsx(m,{data:i}):/* @__PURE__ */e.jsx("div",{className:"donut-legend",children:/* @__PURE__ */e.jsx("div",{className:`donut-chart-legend ${h}`,children:i.map(t=>/* @__PURE__ */e.jsxs("div",{className:"legend",style:{borderLeft:`0.188rem solid ${t.color}`},children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");;/* empty css                         */var r=,/* empty css                                    */a=,/* empty css                               */l=,/* empty css                                                      */n=,/* empty css                                               */s=;/* empty css                                               */const d=(e,t="")=>e>=1e6?`${t} ${(e/1e6).toFixed(1)} M`:e>=1e5?`${t} ${(e/1e5).toFixed(1)} L`:e>=1e3?`${(e/1e3).toFixed(1)} K`:`${t} ${e.toFixed(2)}`,i=({data:i,height:o=140,width:u=140,legend:c=!0,direction:h="vertical",total:p="300",donutThickerValue:x,CustomLegends:m,title:v=""})=>{var g;const f=t.useRef(null),{user:j}=a.useAuth(),y=(null==(g=null==j?void 0:j.currency_data)?void 0:g.symbol)||"";return t.useEffect(()=>{if(!f.current)return;const e=l.default(f.current);e.selectAll("*").remove();const t=Math.min(u,o)/2-6;let r=Math.min(u,o)/2-12;x&&(r=t-x);const a=e.append("g").attr("transform",`translate(${u/2}, ${o/2})`),d=n.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)).padAngle(0),c=s.default().outerRadius(t).innerRadius(r);a.selectAll(".arc").data(d(i)).enter().append("g").attr("class","arc").append("path").attr("d",c).attr("fill",e=>{var t;return null==(t=null==e?void 0:e.data)?void 0:t.color}).attr("stroke","none"),a.append("text").attr("text-anchor","middle").attr("font-size","18px").attr("font-weight","600").attr("alignment-baseline","central").html(p),a.append("text").attr("text-anchor","middle").attr("maring-top","20px").attr("font-size","13px").attr("font-weight","600").attr("dy","2em").attr("color","#7B7C7F").html(v)},[i,o,p,u,y,x,m,v]),c?/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsxs("div",{className:`donut-chart-container ${h}`,children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx("svg",{ref:f,width:u,height:o})}),m?/* @__PURE__ */e.jsx(m,{data:i}):/* @__PURE__ */e.jsx("div",{className:"donut-legend",children:/* @__PURE__ */e.jsx("div",{className:`donut-chart-legend ${h}`,children:i.map(t=>/* @__PURE__ */e.jsxs("div",{className:"legend",style:{borderLeft:`0.188rem solid ${t.color}`},children:[
 /* @__PURE__ */e.jsx("div",{className:"legend-title",style:{color:`${t.labelColor}`},children:t.label}),
-/* @__PURE__ */e.jsx("div",{className:"legend-value",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",weight:"medium",color:t.valueColor,style:{whiteSpace:"nowrap"},children:s(t.value,y)})})]},t.label))})})]})}):/* @__PURE__ */e.jsx("svg",{ref:f,width:c,height:o})};
+/* @__PURE__ */e.jsx("div",{className:"legend-value",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",weight:"medium",color:t.valueColor,style:{whiteSpace:"nowrap"},children:d(t.value,y)})})]},t.label))})})]})}):/* @__PURE__ */e.jsx("svg",{ref:f,width:u,height:o})};exports.DonutChart=i,exports.default=i;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/donutChart/DonutChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/donutChart/DonutChart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\nimport { useAuth } from \"../../../hooks/useAuth\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  donutThickerValue?: number\n  CustomLegends?: React.FC<{ data: DataPoint[] }>;\n  title: string\n}\n\nconst formatNumber = (num: number, defaultCurrencySymbol: string = ''): string => {\n  if (num >= 1_000_000) {\n    return `${defaultCurrencySymbol} ${(num / 1_000_000).toFixed(1)} M`;\n  } else if (num >= 100_000) {\n    return `${defaultCurrencySymbol} ${(num / 100_000).toFixed(1)} L`; // L for Lakhs\n  } else if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1)} K`;\n  } else {\n    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;\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  data,\n  height = 140,\n  width = 140,\n  legend = true,\n  direction = \"vertical\",\n  total = \"300\",\n  donutThickerValue,\n  CustomLegends,\n  title = ''\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const { user } = useAuth();\n  const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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    let innerRadius = Math.min(width, height) / 2 - margin * 2;\n    if (donutThickerValue) {\n      innerRadius = outerRadius - donutThickerValue;\n    }\n\n\n\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value)).padAngle(0);\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius)\n\n    const pies = g\n      .selectAll(\".arc\")\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n\n    pies\n      .append(\"path\")\n      .attr(\"d\", path)\n      .attr(\"fill\", (d: DataPoint) => d?.data?.color).attr(\"stroke\", \"none\");\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    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr('maring-top', \"20px\")\n      .attr(\"font-size\", \"13px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"dy\", \"2em\")\n      .attr(\"color\", \"#7B7C7F\")\n      .html(title);\n\n  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);\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\n\n        {CustomLegends ? (\n          <CustomLegends data={data} /> // Render the custom component\n        ) : (\n          <div className='donut-legend'>\n            <div className={`donut-chart-legend ${direction}`}>\n              {data.map((d: DataPoint) => (\n                <div\n                  className=\"legend\"\n                  key={d.label}\n                  style={{ borderLeft: `0.188rem solid ${d.color}` }}\n                >\n                  <div className=\"legend-title\" style={{ color: `${d.labelColor}` }}>{d.label}</div>\n                  <div className=\"legend-value\">\n                    <Typography\n                      type=\"s5\"\n                      weight=\"medium\"\n                      color={d.valueColor}\n                      style={{\n                        whiteSpace: 'nowrap'\n                      }}\n                    >\n                      {formatNumber(d.value, defaultCurrencySymbol)}\n                    </Typography>\n                  </div>\n                </div>\n              ))\n              }\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default DonutChart;\n"],"names":["formatNumber","num","defaultCurrencySymbol","toFixed","data","height","width","legend","direction","total","donutThickerValue","CustomLegends","title","svgRef","useRef","user","useAuth","_a","currency_data","symbol","useEffect","current","svg","d3.select","selectAll","remove","outerRadius","Math","min","innerRadius","margin","g","append","attr","pie","d3.pie","value","d","str","match","Number","getSingleNumberFromString","padAngle","path","d3.arc","enter","color","html","children","jsxs","className","jsx","ref","map","style","borderLeft","labelColor","label","Typography","type","weight","valueColor","whiteSpace"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/donutChart/DonutChart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\nimport { useAuth } from \"../../../hooks/useAuth\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  donutThickerValue?: number\n  CustomLegends?: React.FC<{ data: DataPoint[] }>;\n  title: string\n}\n\nconst formatNumber = (num: number, defaultCurrencySymbol: string = ''): string => {\n  if (num >= 1_000_000) {\n    return `${defaultCurrencySymbol} ${(num / 1_000_000).toFixed(1)} M`;\n  } else if (num >= 100_000) {\n    return `${defaultCurrencySymbol} ${(num / 100_000).toFixed(1)} L`; // L for Lakhs\n  } else if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1)} K`;\n  } else {\n    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;\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  data,\n  height = 140,\n  width = 140,\n  legend = true,\n  direction = \"vertical\",\n  total = \"300\",\n  donutThickerValue,\n  CustomLegends,\n  title = ''\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const { user } = useAuth();\n  const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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    let innerRadius = Math.min(width, height) / 2 - margin * 2;\n    if (donutThickerValue) {\n      innerRadius = outerRadius - donutThickerValue;\n    }\n\n\n\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value)).padAngle(0);\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius)\n\n    const pies = g\n      .selectAll(\".arc\")\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n\n    pies\n      .append(\"path\")\n      .attr(\"d\", path)\n      .attr(\"fill\", (d: DataPoint) => d?.data?.color).attr(\"stroke\", \"none\");\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    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr('maring-top', \"20px\")\n      .attr(\"font-size\", \"13px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"dy\", \"2em\")\n      .attr(\"color\", \"#7B7C7F\")\n      .html(title);\n\n  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);\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\n\n        {CustomLegends ? (\n          <CustomLegends data={data} /> // Render the custom component\n        ) : (\n          <div className='donut-legend'>\n            <div className={`donut-chart-legend ${direction}`}>\n              {data.map((d: DataPoint) => (\n                <div\n                  className=\"legend\"\n                  key={d.label}\n                  style={{ borderLeft: `0.188rem solid ${d.color}` }}\n                >\n                  <div className=\"legend-title\" style={{ color: `${d.labelColor}` }}>{d.label}</div>\n                  <div className=\"legend-value\">\n                    <Typography\n                      type=\"s5\"\n                      weight=\"medium\"\n                      color={d.valueColor}\n                      style={{\n                        whiteSpace: 'nowrap'\n                      }}\n                    >\n                      {formatNumber(d.value, defaultCurrencySymbol)}\n                    </Typography>\n                  </div>\n                </div>\n              ))\n              }\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["formatNumber","num","defaultCurrencySymbol","toFixed","DonutChart","data","height","width","legend","direction","total","donutThickerValue","CustomLegends","title","svgRef","useRef","user","useAuth","_a","currency_data","symbol","useEffect","current","svg","d3.select","selectAll","remove","outerRadius","Math","min","innerRadius","margin","g","append","attr","pie","d3.pie","value","d","str","match","Number","getSingleNumberFromString","padAngle","path","d3.arc","enter","color","html","children","jsxs","className","jsx","ref","map","style","borderLeft","labelColor","label","Typography","type","weight","valueColor","whiteSpace"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface DonutChartProps {
+    data: DataPoint[];
+    width?: number;
+    height?: number;
+    legend?: boolean;
+    direction?: "vertical" | "horizontal";
+    total?: string;
+    donutThickerValue?: number;
+    CustomLegends?: React.FC<{
+        data: DataPoint[];
+    }>;
+    title: string;
+}
+declare const DonutChart: React.FC<DonutChartProps>;
+export { DonutChart };
+export default DonutChart;

package/dist/components/charts/donutChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DonutChart } from './DonutChart';
+export * from './DonutChart';

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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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":"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"}
+{"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":"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"}

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

@@ -0,0 +1,10 @@
+export interface IGroupChartProps {
+    chartData: any[];
+    height?: number;
+    margin?: any;
+    barWidth?: number;
+    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/groupBarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GroupedBarChart } from './GroupBarChart';
+export * from './GroupBarChart';