@erpsquad/common 1.8.6 → 1.8.8

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

@@ -1,147 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useMemo, useEffect } from "react";
-import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
-import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
-import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
-import { axisTop, axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
-import { format } from "../../../../node_modules/d3-format/src/defaultLocale/index.esm.js";
-const formatNumber = (num, symbol, labelType) => {
-  if (labelType === "inPercent") {
-    return `${format(".0%")(num / 100)}`;
-  } else if (labelType === "inValue") {
-    return `${symbol || ""} ${format(".2s")(num).replace("k", "K")}`;
-  }
-  return num.toString();
-};
-function wrapText(textSelection, width) {
-  textSelection.each(function() {
-    const text = select(this);
-    const originalText = text.text();
-    if (originalText.length <= 8) {
-      return;
-    }
-    if (originalText.length > 12) {
-      text.text(originalText.substring(0, 10) + "...");
-      return;
-    }
-    const words = originalText.split(/\s+/).reverse();
-    let word;
-    let line = [];
-    let lineNumber = 0;
-    const lineHeight = 1.1;
-    const y = text.attr("y");
-    const dy = parseFloat(text.attr("dy")) || 0;
-    let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", `${dy}em`);
-    while (word = words.pop()) {
-      line.push(word);
-      tspan.text(line.join(" "));
-      if (tspan.node() && tspan.node().getComputedTextLength() > width) {
-        line.pop();
-        tspan.text(line.join(" "));
-        line = [word];
-        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", `${++lineNumber * lineHeight + dy}em`).text(word);
-      }
-    }
-  });
-}
-const BarChart = ({
-  data,
-  numOfLines = 5,
-  initialWidth = 500,
-  height = 400,
-  line = false,
-  yAxisLabelType = "inValue",
-  currency,
-  customLabelFormatter
-}) => {
-  const svgRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(initialWidth);
-  const maxValue = useMemo(() => Math.max(...data.map((d) => d.value)), [data]);
-  const yAxisMaxValue = useMemo(() => maxValue * 1.25, [maxValue]);
-  const yAxisTicks = useMemo(() => {
-    const ticks = [];
-    const interval = yAxisMaxValue / numOfLines;
-    for (let i = 0; i <= numOfLines; i++) {
-      ticks.push(interval * i);
-    }
-    return ticks;
-  }, [yAxisMaxValue, numOfLines]);
-  const needsHorizontalScroll = data.length > 12;
-  const minGroupWidth = 120;
-  const calculatedChartWidth = needsHorizontalScroll ? Math.max(data.length * minGroupWidth, containerWidth) : containerWidth;
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        const newWidth = entries[0].contentRect.width;
-        setContainerWidth(newWidth);
-      }
-    });
-    if (wrapper) {
-      resizeObserver.observe(wrapper);
-    }
-    return () => {
-      if (wrapper) {
-        resizeObserver.unobserve(wrapper);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (containerWidth === 0) return;
-    const svg = select(svgRef.current);
-    svg.selectAll("*").remove();
-    const maxLabelWidth = 80;
-    const dynamicLeftMargin = Math.max(60, maxLabelWidth + 30);
-    const margin = { top: 20, right: 20, bottom: 25, left: dynamicLeftMargin };
-    const barWidth = calculatedChartWidth - margin.left - margin.right;
-    const barHeight = maxValue ? height - margin.top - margin.bottom : 0;
-    const x = band().domain(data.map((d) => d.label)).range([0, barWidth]).padding(0.5);
-    const y = linear().domain([0, yAxisMaxValue]).range([barHeight, 0]);
-    const chart = svg.append("g").attr("transform", `translate(${margin.left},${maxValue ? margin.top : height - 50})`);
-    if (line) {
-      yAxisTicks.slice(1).forEach((tick) => {
-        chart.append("line").attr("class", "dotted-line").attr("x1", 0).attr("y1", y(tick)).attr("x2", barWidth).attr("y2", y(tick)).style("stroke", "#D3D3D4").style("stroke-dasharray", "3,3").style("opacity", 1);
-      });
-    }
-    chart.selectAll(".bar").data(data).enter().append("rect").attr("rx", 5).attr("ry", 5).attr("class", "bar").attr("x", (d) => x(d.label)).attr("y", (d) => y(d.value)).attr("width", x.bandwidth()).attr("height", (d) => barHeight - y(d.value)).style("fill", (d) => d.color);
-    const xAxis = chart.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${barHeight})`).call(axisTop(x).tickPadding(10)).call(axisBottom(x).tickPadding(5));
-    xAxis.selectAll(".tick line").remove();
-    xAxis.selectAll(".tick text").call(wrapText, 80);
-    const availableHeight = barHeight;
-    const minTickSpacing = 30;
-    const maxOptimalTicks = Math.floor(availableHeight / minTickSpacing);
-    const optimalNumTicks = Math.min(numOfLines, maxOptimalTicks, 8);
-    const optimalTicks = [];
-    const optimalInterval = yAxisMaxValue / optimalNumTicks;
-    for (let i = 0; i <= optimalNumTicks; i++) {
-      optimalTicks.push(optimalInterval * i);
-    }
-    const yAxis = chart.append("g").attr("class", "y-axis").call(
-      axisLeft(y).tickValues(optimalTicks).tickFormat(
-        (d) => customLabelFormatter ? customLabelFormatter(d) : formatNumber(d, currency, yAxisLabelType)
-      ).tickSizeOuter(0).tickPadding(8)
-      // Add padding between ticks and labels
-    );
-    yAxis.selectAll(".tick line").remove();
-    yAxis.select(".domain").attr("stroke", "none");
-    xAxis.select(".domain").attr("stroke", "none");
-    yAxis.selectAll(".tick text").style("font-size", "11px").style("fill", "#666").style("font-family", "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif").style("text-anchor", "end");
-  }, [data, containerWidth, height, line, yAxisMaxValue, yAxisTicks, currency, yAxisLabelType, customLabelFormatter, calculatedChartWidth]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: wrapperRef,
-      style: {
-        width: "100%",
-        overflowX: needsHorizontalScroll ? "auto" : "hidden",
-        overflowY: "hidden"
-      },
-      children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: calculatedChartWidth, height, viewBox: `0 0 ${calculatedChartWidth} ${height}` })
-    }
-  );
-};
-export {
-  BarChart as default
-};
-//# sourceMappingURL=index.esm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.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":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.axisTop","d3.axisBottom","d3.axisLeft"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),a=require("../../../../node_modules/d3-scale/src/linear/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),l=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");function i(e,t){e.each(function(){const e=s.default(this),r=e.text();if(r.length<=8)return;if(r.length>12)return void e.text(r.substring(0,10)+"...");const a=r.split(/\s+/).reverse();let n,l=[],i=0;const o=e.attr("y"),c=parseFloat(e.attr("dy"))||0;let d=e.text(null).append("tspan").attr("x",0).attr("y",o).attr("dy",`${c}em`);for(;n=a.pop();)l.push(n),d.text(l.join(" ")),d.node()&&d.node().getComputedTextLength()>t&&(l.pop(),d.text(l.join(" ")),l=[n],d=e.append("tspan").attr("x",0).attr("y",o).attr("dy",`${1.1*++i+c}em`).text(n))})}exports.default=({data:o,numOfLines:c=5,initialWidth:d=500,height:u=400,line:f=!1,yAxisLabelType:x="inValue",currency:m,customLabelFormatter:p})=>{const h=t.useRef(null),y=t.useRef(null),[g,v]=t.useState(d),k=t.useMemo(()=>Math.max(...o.map(e=>e.value)),[o]),b=t.useMemo(()=>1.25*k,[k]),j=t.useMemo(()=>{const e=[],t=b/c;for(let r=0;r<=c;r++)e.push(t*r);return e},[b,c]),$=o.length>12,w=$?Math.max(120*o.length,g):g;return t.useEffect(()=>{const e=y.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;v(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===g)return;const e=s.default(h.current);e.selectAll("*").remove();const t=Math.max(60,110),d=w-t-20,y=k?u-20-25:0,v=r.default().domain(o.map(e=>e.label)).range([0,d]).padding(.5),$=a.default().domain([0,b]).range([y,0]),A=e.append("g").attr("transform",`translate(${t},${k?20:u-50})`);f&&j.slice(1).forEach(e=>{A.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",$(e)).attr("x2",d).attr("y2",$(e)).style("stroke","#D3D3D4").style("stroke-dasharray","3,3").style("opacity",1)}),A.selectAll(".bar").data(o).enter().append("rect").attr("rx",5).attr("ry",5).attr("class","bar").attr("x",e=>v(e.label)).attr("y",e=>$(e.value)).attr("width",v.bandwidth()).attr("height",e=>y-$(e.value)).style("fill",e=>e.color);const M=A.append("g").attr("class","x-axis").attr("transform",`translate(0, ${y})`).call(n.axisTop(v).tickPadding(10)).call(n.axisBottom(v).tickPadding(5));M.selectAll(".tick line").remove(),M.selectAll(".tick text").call(i,80);const q=y,_=Math.floor(q/30),L=Math.min(c,_,8),P=[],O=b/L;for(let r=0;r<=L;r++)P.push(O*r);const R=A.append("g").attr("class","y-axis").call(n.axisLeft($).tickValues(P).tickFormat(e=>{return p?p(e):(t=e,r=m,"inPercent"===(a=x)?`${l.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${l.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0).tickPadding(8));R.selectAll(".tick line").remove(),R.select(".domain").attr("stroke","none"),M.select(".domain").attr("stroke","none"),R.selectAll(".tick text").style("font-size","11px").style("fill","#666").style("font-family","Inter, system-ui, Avenir, Helvetica, Arial, sans-serif").style("text-anchor","end")},[o,g,u,f,b,j,m,x,p,w]),/* @__PURE__ */e.jsx("div",{ref:y,style:{width:"100%",overflowX:$?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:h,width:w,height:u,viewBox:`0 0 ${w} ${u}`})})};
-//# sourceMappingURL=index.js.map

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

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

package/dist/components/charts/barLineChart/barLinechart/index.esm.js

@@ -1,193 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { Typography } from "../../../typography/typography/index.esm.js";
-/* empty css                             */
-import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
-import min from "../../../../node_modules/d3-array/src/min/index.esm.js";
-import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
-import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
-import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
-import { axisLeft, axisBottom } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
-import { format } from "../../../../node_modules/d3-format/src/defaultLocale/index.esm.js";
-import pointer from "../../../../node_modules/d3-selection/src/pointer/index.esm.js";
-import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
-import { monotoneX } from "../../../../node_modules/d3-shape/src/curve/monotone/index.esm.js";
-const BarLineChart = ({
-  data,
-  height = 400,
-  margin = { top: 20, right: 30, bottom: 30, left: 50 },
-  bars,
-  lines,
-  line: line$1 = true,
-  showGrid = true,
-  barColors,
-  lineColors
-}) => {
-  var _a;
-  const svgRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const scrollContainerRef = useRef(null);
-  const [tooltip, setTooltip] = useState(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const formatNumber = (num) => format(".2s")(num).replace("k", "K");
-  const needsHorizontalScroll = data.length > bars.length;
-  const minBarWidth = 60;
-  const calculatedChartWidth = needsHorizontalScroll ? Math.max(data.length * minBarWidth, containerWidth) : containerWidth;
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        const newWidth = entries[0].contentRect.width;
-        setContainerWidth(newWidth);
-      }
-    });
-    if (wrapper) {
-      resizeObserver.observe(wrapper);
-    }
-    return () => {
-      if (wrapper) {
-        resizeObserver.unobserve(wrapper);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (containerWidth === 0) return;
-    const yMax = max(data, (d) => {
-      return Math.max(
-        ...bars.map((bar) => d[bar.field]),
-        ...lines.map((line2) => d[line2.field])
-      );
-    }) ?? 0;
-    const yMin = min(data, (d) => {
-      return Math.min(
-        ...bars.map((bar) => d[bar.field]),
-        ...lines.map((line2) => d[line2.field])
-      );
-    }) ?? 0;
-    const svg = select(svgRef.current);
-    const innerWidth = calculatedChartWidth - margin.left - margin.right;
-    const innerHeight = yMax || yMin ? height - margin.top - margin.bottom : 0;
-    const x = band().domain(data.map((d) => d.month)).range([0, innerWidth]).padding(0.3);
-    const y = linear().domain([yMin, yMax]).nice().range([innerHeight, 0]);
-    svg.selectAll("*").remove();
-    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    const yAxis = g.append("g").call(axisLeft(y).tickFormat(formatNumber)).call((g2) => g2.select(".domain").remove());
-    yAxis.select(".domain").attr("stroke", "none");
-    const xAxis = g.append("g").attr("transform", `translate(0,${innerHeight})`).call(axisBottom(x)).selectAll(".tick text").attr("text-anchor", "middle");
-    xAxis.select(".domain").attr("stroke", "none");
-    if (showGrid) {
-      g.selectAll(".grid-line").data(y.ticks()).enter().append("line").attr("class", "grid-line").attr("x1", 0).attr("x2", innerWidth).attr("y1", (d) => y(d)).attr("y2", (d) => y(d)).style("stroke", "#ddd").style("stroke-dasharray", "8,8").style("stroke-width", 1);
-    }
-    if (line$1) {
-      g.selectAll(".grid-line-2").data(y.ticks()).enter().append("line").attr("class", "grid-line-2").attr("x1", 0).attr("x2", innerWidth).attr("y1", (d) => y(d)).attr("y2", (d) => y(d)).style("stroke", "#ddd").style("stroke-dasharray", "8,8").style("stroke-width", 1);
-    }
-    bars.forEach((bar, i) => {
-      g.selectAll(`.bar-${bar.field}`).data(data).enter().append("rect").attr("class", `bar bar-${bar.field}`).attr("x", (d) => x(d.month) ?? 0).attr("y", (d) => d[bar.field] >= 0 ? y(d[bar.field]) : y(0)).attr("rx", 5).attr("ry", 5).attr("width", x.bandwidth() / bars.length).attr("height", (d) => {
-        return Math.abs(y(d[bar.field]) - y(0));
-      }).attr("fill", barColors[i]).attr("transform", `translate(${i * x.bandwidth() / bars.length}, 0)`).on("mouseover", function(event, d) {
-        var _a2;
-        const [xPos, yPos] = pointer(event, svgRef.current);
-        const scrollLeft = ((_a2 = scrollContainerRef.current) == null ? void 0 : _a2.scrollLeft) || 0;
-        setTooltip({
-          x: xPos + margin.left - scrollLeft,
-          y: yPos + margin.top,
-          content: d
-        });
-      }).on("mouseout", () => setTooltip(null));
-    });
-    lines.forEach((line2, index) => {
-      const lineGenerator = line().x((d) => (x(d.month) ?? 0) + x.bandwidth() / 2).y((d) => y(d[line2.field])).curve(monotoneX);
-      g.append("path").datum(data).attr("fill", "none").attr("stroke", lineColors[index]).attr("stroke-width", 2).attr("d", lineGenerator).on("mouseover", function(event) {
-        var _a2;
-        const [xPos] = pointer(event, svgRef.current);
-        const month = x.domain().find((month2) => {
-          const monthPosition = x(month2) ?? 0;
-          return xPos >= monthPosition && xPos <= monthPosition + x.bandwidth();
-        });
-        if (month) {
-          const closestDataPoint = data.find((d) => d.month === month);
-          if (closestDataPoint) {
-            const scrollLeft = ((_a2 = scrollContainerRef.current) == null ? void 0 : _a2.scrollLeft) || 0;
-            setTooltip({
-              x: xPos + margin.left - scrollLeft,
-              y: y(closestDataPoint[line2.field]) + margin.top,
-              content: closestDataPoint
-            });
-          }
-        }
-      }).on("mouseout", () => setTooltip(null));
-    });
-  }, [data, containerWidth, calculatedChartWidth, line$1, height, margin, bars, lines, showGrid, barColors, lineColors]);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: scrollContainerRef,
-        style: {
-          width: "100%",
-          overflowX: needsHorizontalScroll ? "auto" : "hidden",
-          overflowY: "hidden"
-        },
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            ref: svgRef,
-            width: calculatedChartWidth,
-            height,
-            viewBox: `0 0 ${calculatedChartWidth} ${height}`,
-            style: { display: "block" }
-          }
-        )
-      }
-    ),
-    tooltip && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: tooltip.x,
-          top: tooltip.y,
-          pointerEvents: "none",
-          backgroundColor: "white",
-          zIndex: "99999",
-          border: "none",
-          padding: "5px",
-          borderRadius: "3px",
-          transform: "translate(-50%, -100%)"
-        },
-        children: /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx("div", { style: { background: "#F3F2F2", padding: "10px" }, children: /* @__PURE__ */ jsx(Typography, { type: "s4", style: { whiteSpace: "noWrap", width: "200px", color: "#232529" }, children: (_a = tooltip.content) == null ? void 0 : _a.month }) }),
-          /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, display: "flex", flexDirection: "column", gap: 1.5 }, children: [
-            bars.map((bar, index) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1.5, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx("div", { className: "circle", style: { backgroundColor: barColors[index] } }),
-              /* @__PURE__ */ jsxs(Typography, { type: "s5", color: "theme.secondary.900", children: [
-                bar.label,
-                ": ",
-                /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
-                  "$ ",
-                  tooltip.content[bar.field]
-                ] })
-              ] })
-            ] }, `bar-${index}`)),
-            lines.map((line2, index) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1.5, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx("div", { className: "circle", style: { backgroundColor: lineColors[index] } }),
-              /* @__PURE__ */ jsxs(Typography, { type: "s5", color: "theme.secondary.900", children: [
-                line2.label,
-                ": ",
-                /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
-                  "$ ",
-                  tooltip.content[line2.field]
-                ] })
-              ] })
-            ] }, `line-${index}`))
-          ] })
-        ] })
-      }
-    )
-  ] }) });
-};
-export {
-  BarLineChart as default
-};
-//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/barLineChart/barLinechart/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/barLineChart/barLinechart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\nimport { Box, /* List, ListItem */ } from '@mui/material';\nimport Typography from '../../typography/typography';\nimport './barLineChart.scss';\n\ninterface DataPoint {\n    [key: string]: string | number;\n}\n\ninterface ChartField {\n    field: string;\n    color: string;\n    label: string;\n}\n\nexport interface IBarLineChartProps {\n    data: DataPoint[];\n    width?: number;\n    height?: number;\n    margin?: { top: number; right: number; bottom: number; left: number };\n    bars: ChartField[];\n    lines: ChartField[];\n    line?: boolean;\n    showGrid?: boolean;\n    barColors?: any[];\n    lineColors?: any[];\n}\n\nconst BarLineChart: React.FC<IBarLineChartProps> = ({\n    data,\n    height = 400,\n    margin = { top: 20, right: 30, bottom: 30, left: 50 },\n    bars,\n    lines,\n    line = true,\n    showGrid = true,\n    barColors,\n    lineColors\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [tooltip, setTooltip] = useState<{ x: number; y: number; content: DataPoint } | null>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const formatNumber = (num: number) => d3.format('.2s')(num).replace('k', 'K');\n\n    const needsHorizontalScroll = data.length > bars.length;\n    const minBarWidth = 60\n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minBarWidth, containerWidth)\n        : containerWidth;\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        const yMax = d3.max(data, d => {\n            return Math.max(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n        const yMin = d3.min(data, d => {\n            return Math.min(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n\n        const svg = d3.select(svgRef.current);\n        const innerWidth = calculatedChartWidth - margin.left - margin.right;\n        const innerHeight = yMax || yMin ? height - margin.top - margin.bottom : 0;\n\n        const x = d3.scaleBand()\n            .domain(data.map(d => d.month as string))\n            .range([0, innerWidth])\n            .padding(0.3);\n\n        const y = d3.scaleLinear()\n            .domain([yMin, yMax])\n            .nice()\n            .range([innerHeight, 0]);\n\n        svg.selectAll('*').remove();\n\n        const g = svg.append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Y axis\n        const yAxis = g.append('g')\n            .call(d3.axisLeft(y).tickFormat(formatNumber))\n            .call(g => g.select('.domain').remove());\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // X axis\n        const xAxis = g.append('g')\n            .attr('transform', `translate(0,${innerHeight})`)\n            .call(d3.axisBottom(x))\n            .selectAll('.tick text')\n            .attr('text-anchor', 'middle');\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // Render grid lines if applicable\n        if (showGrid) {\n            g.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1);\n        }\n        \n        // Render grid lines if applicable\n        if (line) {\n            g.selectAll('.grid-line-2')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line-2')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1)\n        }\n\n        // Draw bars for bar chart\n        bars.forEach((bar, i) => {\n            g.selectAll(`.bar-${bar.field}`)\n                .data(data)\n                .enter()\n                .append('rect')\n                .attr('class', `bar bar-${bar.field}`)\n                .attr('x', d => x(d.month as string) ?? 0)\n                .attr('y', d => d[bar.field] >= 0 ? y(d[bar.field]) : y(0))  // Positive bars above y(0), negative bars below\n                .attr(\"rx\", 5)\n                .attr(\"ry\", 5)\n                .attr('width', x.bandwidth() / bars.length)\n                .attr('height', d => {\n                    return Math.abs(y(d[bar.field]) - y(0));  // Absolute height from y(0)\n                })\n                .attr('fill', barColors[i])\n                .attr('transform', `translate(${(i * x.bandwidth()) / bars.length}, 0)`)\n                .on('mouseover', function (event, d) {\n                    const [xPos, yPos] = d3.pointer(event, svgRef.current);\n                    const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                    setTooltip({ \n                        x: xPos + margin.left - scrollLeft, \n                        y: yPos + margin.top, \n                        content: d \n                    });\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n        \n        // Draw lines for line chart\n        lines.forEach((line, index) => {\n            const lineGenerator = d3.line<DataPoint>()\n                .x(d => (x(d.month as string) ?? 0) + x.bandwidth() / 2) // Calculate x position for each data point\n                .y(d => y(d[line.field] as number))\n                .curve(d3.curveMonotoneX);\n\n            g.append('path')\n                .datum(data)\n                .attr('fill', 'none')\n                .attr('stroke', lineColors[index])\n                .attr('stroke-width', 2)\n                .attr('d', lineGenerator)\n                .on('mouseover', function (event) {\n                    const [xPos] = d3.pointer(event, svgRef.current);\n                    const month = x.domain().find((month) => {\n                        const monthPosition = x(month as string) ?? 0;\n                        return xPos >= monthPosition && xPos <= monthPosition + x.bandwidth();\n                    });\n\n                    if (month) {\n                        const closestDataPoint = data.find(d => d.month === month);\n                        if (closestDataPoint) {\n                            const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                            setTooltip({\n                                x: xPos + margin.left - scrollLeft,\n                                y: y(closestDataPoint[line.field]) + margin.top,\n                                content: closestDataPoint\n                            });\n                        }\n                    }\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n    }, [data, containerWidth, calculatedChartWidth, line, height, margin, bars, lines, showGrid, barColors, lineColors]);\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                {tooltip && (\n                    <div\n                        style={{\n                            position: 'absolute',\n                            left: tooltip.x,\n                            top: tooltip.y,\n                            pointerEvents: 'none',\n                            backgroundColor: 'white',\n                            zIndex: '99999',\n                            border: 'none',\n                            padding: '5px',\n                            borderRadius: '3px',\n                            transform: 'translate(-50%, -100%)'\n                        }}\n                    >\n                        <Box>\n                            <div style={{ background: '#F3F2F2', padding: '10px' }}>\n                                <Typography type='s4' style={{ whiteSpace: 'noWrap', width: '200px', color: '#232529' }}>{tooltip.content?.month}</Typography>\n                            </div>\n                            <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n\n                                {bars.map((bar, index) => (\n                                    <Box key={`bar-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: barColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {bar.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[bar.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                                {lines.map((line, index) => (\n                                    <Box key={`line-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: lineColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {line.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[line.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                            </Box>\n                        </Box>\n                      \n                    </div>\n                )\n                }\n            </div>\n        </div>\n    );\n};\n\nexport default BarLineChart;"],"names":["line","d3.format","d3.max","d3.min","d3.select","d3.scaleBand","d3.scaleLinear","d3.axisLeft","g","d3.axisBottom","d3.pointer","_a","d3.line","d3.curveMonotoneX","month"],"mappings":"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"}

package/dist/components/charts/barLineChart/barLinechart/index.js

@@ -1,11 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=;/* empty css                                    */;/* empty css                          */var n=,/* empty css                                               */s=,/* empty css                                               */l=,/* empty css                                                */a=,/* empty css                                                  */d=,/* empty css                                                    */o=,/* empty css                                                      */i=,/* empty css                                               */c=,/* empty css                                                          */u=,/* empty css                                                       */h=,/* empty css                                                */f=;/* empty css                                                          */exports.default=({data:p,height:x=400,margin:m={top:20,right:30,bottom:30,left:50},bars:y,lines:g,line:j=!0,showGrid:v=!0,barColors:b,lineColors:k})=>{var w;const q=t.useRef(null),_=t.useRef(null),$=t.useRef(null),[C,R]=t.useState(null),[A,E]=t.useState(0),L=e=>c.format(".2s")(e).replace("k","K"),M=p.length>y.length,B=M?Math.max(60*p.length,A):A;return t.useEffect(()=>{const e=_.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;E(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===A)return;const e=n.default(p,e=>Math.max(...y.map(t=>e[t.field]),...g.map(t=>e[t.field])))??0,t=s.default(p,e=>Math.min(...y.map(t=>e[t.field]),...g.map(t=>e[t.field])))??0,r=o.default(q.current),d=B-m.left-m.right,c=e||t?x-m.top-m.bottom:0,w=l.default().domain(p.map(e=>e.month)).range([0,d]).padding(.3),_=a.default().domain([t,e]).nice().range([c,0]);r.selectAll("*").remove();const C=r.append("g").attr("transform",`translate(${m.left},${m.top})`);C.append("g").call(i.axisLeft(_).tickFormat(L)).call(e=>e.select(".domain").remove()).select(".domain").attr("stroke","none"),C.append("g").attr("transform",`translate(0,${c})`).call(i.axisBottom(w)).selectAll(".tick text").attr("text-anchor","middle").select(".domain").attr("stroke","none"),v&&C.selectAll(".grid-line").data(_.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",d).attr("y1",e=>_(e)).attr("y2",e=>_(e)).style("stroke","#ddd").style("stroke-dasharray","8,8").style("stroke-width",1),j&&C.selectAll(".grid-line-2").data(_.ticks()).enter().append("line").attr("class","grid-line-2").attr("x1",0).attr("x2",d).attr("y1",e=>_(e)).attr("y2",e=>_(e)).style("stroke","#ddd").style("stroke-dasharray","8,8").style("stroke-width",1),y.forEach((e,t)=>{C.selectAll(`.bar-${e.field}`).data(p).enter().append("rect").attr("class",`bar bar-${e.field}`).attr("x",e=>w(e.month)??0).attr("y",t=>t[e.field]>=0?_(t[e.field]):_(0)).attr("rx",5).attr("ry",5).attr("width",w.bandwidth()/y.length).attr("height",t=>Math.abs(_(t[e.field])-_(0))).attr("fill",b[t]).attr("transform",`translate(${t*w.bandwidth()/y.length}, 0)`).on("mouseover",function(e,t){var r;const[n,s]=u.default(e,q.current),l=(null==(r=$.current)?void 0:r.scrollLeft)||0;R({x:n+m.left-l,y:s+m.top,content:t})}).on("mouseout",()=>R(null))}),g.forEach((e,t)=>{const r=h.default().x(e=>(w(e.month)??0)+w.bandwidth()/2).y(t=>_(t[e.field])).curve(f.monotoneX);C.append("path").datum(p).attr("fill","none").attr("stroke",k[t]).attr("stroke-width",2).attr("d",r).on("mouseover",function(t){var r;const[n]=u.default(t,q.current),s=w.domain().find(e=>{const t=w(e)??0;return n>=t&&n<=t+w.bandwidth()});if(s){const t=p.find(e=>e.month===s);if(t){const s=(null==(r=$.current)?void 0:r.scrollLeft)||0;R({x:n+m.left-s,y:_(t[e.field])+m.top,content:t})}}}).on("mouseout",()=>R(null))})},[p,A,B,j,x,m,y,g,v,b,k]),/* @__PURE__ */e.jsx("div",{ref:_,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
-/* @__PURE__ */e.jsx("div",{ref:$,style:{width:"100%",overflowX:M?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:q,width:B,height:x,viewBox:`0 0 ${B} ${x}`,style:{display:"block"}})}),C&&/* @__PURE__ */e.jsx("div",{style:{position:"absolute",left:C.x,top:C.y,pointerEvents:"none",backgroundColor:"white",zIndex:"99999",border:"none",padding:"5px",borderRadius:"3px",transform:"translate(-50%, -100%)"},children:/* @__PURE__ */e.jsxs(d.default,{children:[
-/* @__PURE__ */e.jsx("div",{style:{background:"#F3F2F2",padding:"10px"},children:/* @__PURE__ */e.jsx(r.Typography,{type:"s4",style:{whiteSpace:"noWrap",width:"200px",color:"#232529"},children:null==(w=C.content)?void 0:w.month})}),
-/* @__PURE__ */e.jsxs(d.default,{sx:{p:1.5,display:"flex",flexDirection:"column",gap:1.5},children:[y.map((t,n)=>/* @__PURE__ */e.jsxs(d.default,{sx:{display:"flex",gap:1.5,alignItems:"center"},children:[
-/* @__PURE__ */e.jsx("div",{className:"circle",style:{backgroundColor:b[n]}}),
-/* @__PURE__ */e.jsxs(r.Typography,{type:"s5",color:"theme.secondary.900",children:[t.label,": ",
-/* @__PURE__ */e.jsxs("span",{style:{fontWeight:600},children:["$ ",C.content[t.field]]})]})]},`bar-${n}`)),g.map((t,n)=>/* @__PURE__ */e.jsxs(d.default,{sx:{display:"flex",gap:1.5,alignItems:"center"},children:[
-/* @__PURE__ */e.jsx("div",{className:"circle",style:{backgroundColor:k[n]}}),
-/* @__PURE__ */e.jsxs(r.Typography,{type:"s5",color:"theme.secondary.900",children:[t.label,": ",
-/* @__PURE__ */e.jsxs("span",{style:{fontWeight:600},children:["$ ",C.content[t.field]]})]})]},`line-${n}`))]})]})})]})})};
-//# sourceMappingURL=index.js.map

package/dist/components/charts/barLineChart/barLinechart/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/barLineChart/barLinechart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\nimport { Box, /* List, ListItem */ } from '@mui/material';\nimport Typography from '../../typography/typography';\nimport './barLineChart.scss';\n\ninterface DataPoint {\n    [key: string]: string | number;\n}\n\ninterface ChartField {\n    field: string;\n    color: string;\n    label: string;\n}\n\nexport interface IBarLineChartProps {\n    data: DataPoint[];\n    width?: number;\n    height?: number;\n    margin?: { top: number; right: number; bottom: number; left: number };\n    bars: ChartField[];\n    lines: ChartField[];\n    line?: boolean;\n    showGrid?: boolean;\n    barColors?: any[];\n    lineColors?: any[];\n}\n\nconst BarLineChart: React.FC<IBarLineChartProps> = ({\n    data,\n    height = 400,\n    margin = { top: 20, right: 30, bottom: 30, left: 50 },\n    bars,\n    lines,\n    line = true,\n    showGrid = true,\n    barColors,\n    lineColors\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [tooltip, setTooltip] = useState<{ x: number; y: number; content: DataPoint } | null>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const formatNumber = (num: number) => d3.format('.2s')(num).replace('k', 'K');\n\n    const needsHorizontalScroll = data.length > bars.length;\n    const minBarWidth = 60\n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minBarWidth, containerWidth)\n        : containerWidth;\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        const yMax = d3.max(data, d => {\n            return Math.max(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n        const yMin = d3.min(data, d => {\n            return Math.min(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n\n        const svg = d3.select(svgRef.current);\n        const innerWidth = calculatedChartWidth - margin.left - margin.right;\n        const innerHeight = yMax || yMin ? height - margin.top - margin.bottom : 0;\n\n        const x = d3.scaleBand()\n            .domain(data.map(d => d.month as string))\n            .range([0, innerWidth])\n            .padding(0.3);\n\n        const y = d3.scaleLinear()\n            .domain([yMin, yMax])\n            .nice()\n            .range([innerHeight, 0]);\n\n        svg.selectAll('*').remove();\n\n        const g = svg.append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Y axis\n        const yAxis = g.append('g')\n            .call(d3.axisLeft(y).tickFormat(formatNumber))\n            .call(g => g.select('.domain').remove());\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // X axis\n        const xAxis = g.append('g')\n            .attr('transform', `translate(0,${innerHeight})`)\n            .call(d3.axisBottom(x))\n            .selectAll('.tick text')\n            .attr('text-anchor', 'middle');\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // Render grid lines if applicable\n        if (showGrid) {\n            g.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1);\n        }\n        \n        // Render grid lines if applicable\n        if (line) {\n            g.selectAll('.grid-line-2')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line-2')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1)\n        }\n\n        // Draw bars for bar chart\n        bars.forEach((bar, i) => {\n            g.selectAll(`.bar-${bar.field}`)\n                .data(data)\n                .enter()\n                .append('rect')\n                .attr('class', `bar bar-${bar.field}`)\n                .attr('x', d => x(d.month as string) ?? 0)\n                .attr('y', d => d[bar.field] >= 0 ? y(d[bar.field]) : y(0))  // Positive bars above y(0), negative bars below\n                .attr(\"rx\", 5)\n                .attr(\"ry\", 5)\n                .attr('width', x.bandwidth() / bars.length)\n                .attr('height', d => {\n                    return Math.abs(y(d[bar.field]) - y(0));  // Absolute height from y(0)\n                })\n                .attr('fill', barColors[i])\n                .attr('transform', `translate(${(i * x.bandwidth()) / bars.length}, 0)`)\n                .on('mouseover', function (event, d) {\n                    const [xPos, yPos] = d3.pointer(event, svgRef.current);\n                    const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                    setTooltip({ \n                        x: xPos + margin.left - scrollLeft, \n                        y: yPos + margin.top, \n                        content: d \n                    });\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n        \n        // Draw lines for line chart\n        lines.forEach((line, index) => {\n            const lineGenerator = d3.line<DataPoint>()\n                .x(d => (x(d.month as string) ?? 0) + x.bandwidth() / 2) // Calculate x position for each data point\n                .y(d => y(d[line.field] as number))\n                .curve(d3.curveMonotoneX);\n\n            g.append('path')\n                .datum(data)\n                .attr('fill', 'none')\n                .attr('stroke', lineColors[index])\n                .attr('stroke-width', 2)\n                .attr('d', lineGenerator)\n                .on('mouseover', function (event) {\n                    const [xPos] = d3.pointer(event, svgRef.current);\n                    const month = x.domain().find((month) => {\n                        const monthPosition = x(month as string) ?? 0;\n                        return xPos >= monthPosition && xPos <= monthPosition + x.bandwidth();\n                    });\n\n                    if (month) {\n                        const closestDataPoint = data.find(d => d.month === month);\n                        if (closestDataPoint) {\n                            const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                            setTooltip({\n                                x: xPos + margin.left - scrollLeft,\n                                y: y(closestDataPoint[line.field]) + margin.top,\n                                content: closestDataPoint\n                            });\n                        }\n                    }\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n    }, [data, containerWidth, calculatedChartWidth, line, height, margin, bars, lines, showGrid, barColors, lineColors]);\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                {tooltip && (\n                    <div\n                        style={{\n                            position: 'absolute',\n                            left: tooltip.x,\n                            top: tooltip.y,\n                            pointerEvents: 'none',\n                            backgroundColor: 'white',\n                            zIndex: '99999',\n                            border: 'none',\n                            padding: '5px',\n                            borderRadius: '3px',\n                            transform: 'translate(-50%, -100%)'\n                        }}\n                    >\n                        <Box>\n                            <div style={{ background: '#F3F2F2', padding: '10px' }}>\n                                <Typography type='s4' style={{ whiteSpace: 'noWrap', width: '200px', color: '#232529' }}>{tooltip.content?.month}</Typography>\n                            </div>\n                            <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n\n                                {bars.map((bar, index) => (\n                                    <Box key={`bar-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: barColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {bar.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[bar.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                                {lines.map((line, index) => (\n                                    <Box key={`line-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: lineColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {line.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[line.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                            </Box>\n                        </Box>\n                      \n                    </div>\n                )\n                }\n            </div>\n        </div>\n    );\n};\n\nexport default BarLineChart;"],"names":["data","height","margin","top","right","bottom","left","bars","lines","line","showGrid","barColors","lineColors","svgRef","useRef","wrapperRef","scrollContainerRef","tooltip","setTooltip","useState","containerWidth","setContainerWidth","formatNumber","num","d3.format","replace","needsHorizontalScroll","length","calculatedChartWidth","Math","max","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","yMax","d3.max","d","map","bar","field","yMin","d3.min","min","svg","d3.select","innerWidth","innerHeight","x","d3.scaleBand","domain","month","range","padding","y","d3.scaleLinear","nice","selectAll","remove","g","append","attr","call","d3.axisLeft","tickFormat","select","d3.axisBottom","ticks","enter","style","forEach","i","bandwidth","abs","on","event","xPos","yPos","d3.pointer","scrollLeft","_a","content","index","lineGenerator","d3.line","curve","d3.curveMonotoneX","datum","find","monthPosition","closestDataPoint","ref","children","jsxs","position","jsx","overflowX","overflowY","viewBox","display","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","Box","background","Typography","type","whiteSpace","color","sx","p","flexDirection","gap","alignItems","className","label","fontWeight"],"mappings":"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"}