pixel-react 1.20.21 → 1.20.22

package/lib/components/Charts/DonutChart/DonutChart.js

@@ -1 +1,102 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as a}from"react";import"./DonutChart.scss.js";import{convertToCamelCase as s}from"../../../utils/converToCamelCase.js";const o=t=>t?.toLowerCase().trim()||"",r=(t,e,a,s,o)=>{const r=t+a*Math.cos(s),n=e+a*Math.sin(s),l=t+a*Math.cos(o),c=e+a*Math.sin(o);return`M ${r} ${n} A ${a} ${a} 0 ${o-s>Math.PI?1:0} 1 ${l} ${c}`},n=({radius:n=60,lineWidth:l=15,resultStats:c=[],gapAngle:d=.06,legendDetailsType:i="",isLegendDetails:u=!0,totalCount:h})=>{const[f,p]=a(null),{colorMapping:v,hoverMapping:g}={colorMapping:{passed:"var(--status-success-text-color)",failed:"var(--status-rejected-text-color)",warning:"var(--status-warning-text-color)",skipped:"var(--status-skipped-text-color)",default:"var(--brand-color)","on hold":"var(--ff-onhold-donutchart-color)",descoped:"var(--ff-descope-donutchart-color)","to be validated":"var(--ff-to-be-validate-donutchart-color)","to be tested":"var(--status-button-bg-tobetested)",terminated:"var(--ff-terminated-donutchart-color)"},hoverMapping:{passed:"var(--status-success-bg-color)",failed:"var(--status-rejected-bg-color)",warning:"var(--status-warning-bg-color)",skipped:"var(--status-skipped-bg-color)",default:"var(--status-percentage-growth-bg-color)","on hold":"var(--ff-onhold-donutchart-color)",descoped:"var(--ff-descope-donutchart-color)","to be validated":"var(--ff-to-be-validate-donutchart-color)","to be tested":"var(--status-button-bg-tobetested)",terminated:"var(--ff-terminated-donutchart-color)"}},m=c?.filter(({count:t})=>t>0),x=c?.map(t=>t?.status),M=d*m.length;let b=2*Math.PI-M,$=-Math.PI/2;const k=2*Math.PI*.01;m.forEach(({count:t})=>{const e=t/h,a=Math.max(e*(2*Math.PI),k);b-=a});const w=t=>p(t),N=()=>p(null),y=2*(n+l)+8;return t("div",{className:"ff-donut-chart-section",children:[e("div",{className:"ff-donut-chart-svg-container",children:e("svg",{width:y,height:y,viewBox:`0 0 ${y} ${y}`,children:t("g",{transform:`translate(${n+l+4}, ${n+l+4})`,children:[m?.map((a,s)=>{const c=a.count/h;let i=Math.max(c*(2*Math.PI),k);i+=b*c;return((a,s,c)=>{const i=o(a?.status).toLowerCase(),u=1===m.length,h=u?r(0,0,n,0,2*Math.PI):r(0,0,n,$,s),p=n+l-1,g=u?r(0,0,p,0,2*Math.PI):r(0,0,p,$,s);return $=s+d,t("g",{children:[e("path",{d:h,fill:"none",stroke:v[i],strokeWidth:l,onMouseEnter:()=>w(i),onMouseLeave:N,strokeOpacity:null===f||f===i?.8:.3}),f===i&&e("path",{d:g,fill:"none",stroke:v[i],strokeWidth:4,strokeOpacity:.3})]},c)})(a,$+i,s)}),e("text",{x:"0",y:"-18",textAnchor:"middle",fill:v.default,children:f?f?.toUpperCase():"TOTAL"}),e("text",{x:"0",y:"5",textAnchor:"middle",fill:v.skipped,children:f?`${c?.find(t=>o(t?.status)===f)?.count??0} ${i}`:`${h} ${i}`}),e("rect",{x:-17,y:14,width:34,height:18,fill:f?g[f]:g.default,rx:"5",ry:"5"}),e("text",{x:"0",y:"26",textAnchor:"middle",fill:f?v[f]:v.default,children:f?`${(c?.find(t=>o(t?.status)===f)?.percentage||0)?.toFixed(2)}%`:"100%"})]})})}),u&&e("div",{className:"ff-status-container",children:x?.map(a=>(a=>{const r=o(a),n=c?.find(t=>o(t?.status)===r);return t("div",{className:"ff-status-item "+(null===f||f===r?"ff-highlighted":"ff-fade"),onMouseEnter:()=>w(r),onMouseLeave:N,children:[t("div",{className:"ff-status-label",children:[e("div",{className:"ff-status-color",style:{backgroundColor:v[r]}}),e("div",{className:"ff-status-text",children:s(a)})]}),t("div",{className:"ff-status-details",children:[t("div",{className:"ff-status-details-script-count",children:[n?.count||0,e("span",{children:i})]}),t("div",{className:"ff-status-details-script-percentage",children:["(",n?.percentage?.toFixed(2)||0,"%)"]})]})]},a)})(a))})]})};export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import './DonutChart.scss';
+import { convertToCamelCase } from '../../../utils/converToCamelCase';
+const normalizeStatus = (s) => s?.toLowerCase().trim() || '';
+const calculateArc = (x, y, radius, startAngle, endAngle) => {
+    const startX = x + radius * Math.cos(startAngle);
+    const startY = y + radius * Math.sin(startAngle);
+    const endX = x + radius * Math.cos(endAngle);
+    const endY = y + radius * Math.sin(endAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+const useColorMappings = () => ({
+    colorMapping: {
+        passed: 'var(--status-success-text-color)',
+        failed: 'var(--status-rejected-text-color)',
+        warning: 'var(--status-warning-text-color)',
+        skipped: 'var(--status-skipped-text-color)',
+        default: 'var(--brand-color)',
+        'on hold': 'var(--ff-onhold-donutchart-color)',
+        descoped: 'var(--ff-descope-donutchart-color)',
+        'to be validated': 'var(--ff-to-be-validate-donutchart-color)',
+        'to be tested': 'var(--status-button-bg-tobetested)',
+        terminated: 'var(--ff-terminated-donutchart-color)',
+    },
+    hoverMapping: {
+        passed: 'var(--status-success-bg-color)',
+        failed: 'var(--status-rejected-bg-color)',
+        warning: 'var(--status-warning-bg-color)',
+        skipped: 'var(--status-skipped-bg-color)',
+        default: 'var(--status-percentage-growth-bg-color)',
+        'on hold': 'var(--ff-onhold-donutchart-color)',
+        descoped: 'var(--ff-descope-donutchart-color)',
+        'to be validated': 'var(--ff-to-be-validate-donutchart-color)',
+        'to be tested': 'var(--status-button-bg-tobetested)',
+        terminated: 'var(--ff-terminated-donutchart-color)',
+    },
+});
+const DonutChart = ({ radius = 60, lineWidth = 15, resultStats = [], gapAngle = 0.06, legendDetailsType = '', isLegendDetails = true, totalCount, }) => {
+    const [hoveredStatus, setHoveredStatus] = useState(null);
+    const { colorMapping, hoverMapping } = useColorMappings();
+    const nonZeroValues = resultStats?.filter(({ count }) => count > 0);
+    const statusColors = resultStats?.map((status) => status?.status);
+    const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
+    let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
+    let currentAngle = -Math.PI / 2;
+    const MIN_PERCENTAGE = 1;
+    const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
+    let minAngleTotal = 0;
+    nonZeroValues.forEach(({ count }) => {
+        const valuePercentage = count / totalCount;
+        const angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
+        minAngleTotal += angle;
+        remainingAngle -= angle;
+    });
+    const handleMouseEnter = (status) => setHoveredStatus(status);
+    const handleMouseLeave = () => setHoveredStatus(null);
+    const SVG_PADDING = 4;
+    const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
+    const renderArc = (statusValue, endAngle, i) => {
+        const normalizedStatus = normalizeStatus(statusValue?.status).toLowerCase();
+        const isFullCircle = nonZeroValues.length === 1;
+        const foregroundArcPath = isFullCircle
+            ? calculateArc(0, 0, radius, 0, 2 * Math.PI)
+            : calculateArc(0, 0, radius, currentAngle, endAngle);
+        const outerArcRadius = radius + lineWidth - 1;
+        const outerArcPath = isFullCircle
+            ? calculateArc(0, 0, outerArcRadius, 0, 2 * Math.PI)
+            : calculateArc(0, 0, outerArcRadius, currentAngle, endAngle);
+        currentAngle = endAngle + gapAngle;
+        return (_jsxs("g", { children: [_jsx("path", { d: foregroundArcPath, fill: "none", stroke: colorMapping[normalizedStatus], strokeWidth: lineWidth, onMouseEnter: () => handleMouseEnter(normalizedStatus), onMouseLeave: handleMouseLeave, strokeOpacity: hoveredStatus === null || hoveredStatus === normalizedStatus
+                        ? 0.8
+                        : 0.3 }), hoveredStatus === normalizedStatus && (_jsx("path", { d: outerArcPath, fill: "none", stroke: colorMapping[normalizedStatus], strokeWidth: 4, strokeOpacity: 0.3 }))] }, i));
+    };
+    const renderLegendItem = (statusKey) => {
+        const normalizedKey = normalizeStatus(statusKey);
+        const statusData = resultStats?.find((statusValue) => normalizeStatus(statusValue?.status) === normalizedKey);
+        return (_jsxs("div", { className: `ff-status-item ${hoveredStatus === null || hoveredStatus === normalizedKey
+                ? 'ff-highlighted'
+                : 'ff-fade'}`, onMouseEnter: () => handleMouseEnter(normalizedKey), onMouseLeave: handleMouseLeave, children: [_jsxs("div", { className: "ff-status-label", children: [_jsx("div", { className: "ff-status-color", style: {
+                                backgroundColor: colorMapping[normalizedKey],
+                            } }), _jsx("div", { className: "ff-status-text", children: convertToCamelCase(statusKey) })] }), _jsxs("div", { className: "ff-status-details", children: [_jsxs("div", { className: "ff-status-details-script-count", children: [statusData?.count || 0, _jsx("span", { children: legendDetailsType })] }), _jsxs("div", { className: "ff-status-details-script-percentage", children: ["(", statusData?.percentage?.toFixed(2) || 0, "%)"] })] })] }, statusKey));
+    };
+    return (_jsxs("div", { className: "ff-donut-chart-section", children: [_jsx("div", { className: "ff-donut-chart-svg-container", children: _jsx("svg", { width: DONUT_SVG_SIZE, height: DONUT_SVG_SIZE, viewBox: `0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`, children: _jsxs("g", { transform: `translate(${radius + lineWidth + SVG_PADDING}, ${radius + lineWidth + SVG_PADDING})`, children: [nonZeroValues?.map((status, i) => {
+                                const valuePercentage = status.count / totalCount;
+                                let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
+                                angle += remainingAngle * valuePercentage;
+                                const endAngle = currentAngle + angle;
+                                return renderArc(status, endAngle, i);
+                            }), _jsx("text", { x: "0", y: "-18", textAnchor: "middle", fill: colorMapping.default, children: hoveredStatus ? hoveredStatus?.toUpperCase() : 'TOTAL' }), _jsx("text", { x: "0", y: "5", textAnchor: "middle", fill: colorMapping.skipped, children: hoveredStatus
+                                    ? `${resultStats?.find((statusValue) => normalizeStatus(statusValue?.status) === hoveredStatus)?.count ?? 0} ${legendDetailsType}`
+                                    : `${totalCount} ${legendDetailsType}` }), _jsx("rect", { x: -17, y: 14, width: 34, height: 18, fill: hoveredStatus
+                                    ? hoverMapping[hoveredStatus]
+                                    : hoverMapping.default, rx: "5", ry: "5" }), _jsx("text", { x: "0", y: "26", textAnchor: "middle", fill: hoveredStatus
+                                    ? colorMapping[hoveredStatus]
+                                    : colorMapping['default'], children: hoveredStatus
+                                    ? `${(resultStats?.find((statusValue) => normalizeStatus(statusValue?.status) === hoveredStatus)?.percentage || 0)?.toFixed(2)}%`
+                                    : '100%' })] }) }) }), isLegendDetails && (_jsx("div", { className: "ff-status-container", children: statusColors?.map((status) => renderLegendItem(status)) }))] }));
+};
+export default DonutChart;
+//# sourceMappingURL=DonutChart.js.map

package/lib/components/Charts/IconRadialChart/IconRadialChart.js

@@ -1 +1,81 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as r}from"react";import n from"../../Icon/Icon.js";import"./IconRadialChart.scss.js";import a from"../../Typography/Typography.js";const i=({x:e,y:t,radius:o,startAngle:r,endAngle:n})=>{const a=e+o*Math.cos(r),i=t+o*Math.sin(r),l=e+o*Math.cos(n),c=t+o*Math.sin(n),s=n-r>Math.PI?1:0;return n-r>=2*Math.PI?`\n      M ${e+o} ${t}\n      A ${o} ${o} 0 1 1 ${e-o} ${t}  \n      A ${o} ${o} 0 1 1 ${e+o} ${t}\n    `:`M ${a} ${i} A ${o} ${o} 0 ${s} 1 ${l} ${c}`},l=({radius:l=15,lineWidth:c=5,label:s,percentageValue:d,icon:h,fontSize:u=10,labelColor:f="",arcColor:M="var(--brand-color)",backgroundArcColor:$="var(--ff-select-scroll-thumb-color)",isSelectedArch:g=!1,onSelect:p})=>{const[m,x]=o({x:0,y:0}),[y,A]=o(!1),v=r(null);let k=-Math.PI/2;const b=2*(l+c),{backgroundArcPath:P,foregroundArcPath:I}=((e,t,o)=>{const r=t,n=r+Math.max(0,Math.min(e,100))/100*2*Math.PI;return{backgroundArcPath:i({x:0,y:0,radius:o,startAngle:0,endAngle:2*Math.PI}),foregroundArcPath:i({x:0,y:0,radius:o,startAngle:r,endAngle:n})}})(d,k,l),C=()=>{A(!0)},j=()=>{x({x:0,y:0}),A(!1)},w=e=>{if(v.current){const t=v.current.getBoundingClientRect();x({x:e.clientX-t.left,y:e.clientY-t.top})}};return e("div",{ref:v,className:"ff-icon-radial-chart-container",style:{"--fontSize":`${u}px`},onClick:p,children:[t("svg",{width:b,height:b,viewBox:`0 0 ${b} ${b}`,role:"img",children:e("g",{transform:`translate(${l+c}, ${l+c})`,children:[t("path",{d:P,fill:"none",stroke:$,strokeWidth:c,onMouseEnter:C,onMouseLeave:j,onMouseMove:w}),t("path",{d:I,fill:"none",stroke:M,strokeWidth:c,onMouseEnter:C,onMouseLeave:j,onMouseMove:w}),g&&t("path",{d:I,fill:"none",stroke:"var(--dotted-border-color)",strokeOpacity:"0.4",strokeWidth:c,onMouseEnter:C,onMouseLeave:j,onMouseMove:w}),h?t("foreignObject",{x:"-10",y:"-10",width:"20",height:"20",children:t(n,{className:"ff-radial-chart-icon-padding",name:h,height:20,width:20})}):t("text",{x:"0",y:"0",fill:f||M,textAnchor:"middle",dominantBaseline:"central",children:`${Math.round(d)}%`})]})}),y&&e("div",{className:"ff-icon-radial-chart-tooltip",style:{position:"absolute",left:`${m.x+15}px`,top:m.y-5+"px"},children:[t(a,{children:`${s} : `}),e(a,{children:[d,"%"]})]})]})};export{l as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import Icon from '../../Icon';
+import './IconRadialChart.scss';
+import Typography from '../../Typography';
+// Function to generate SVG arc paths
+const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
+    const startX = x + radius * Math.cos(startAngle);
+    const startY = y + radius * Math.sin(startAngle);
+    const endX = x + radius * Math.cos(endAngle);
+    const endY = y + radius * Math.sin(endAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    if (endAngle - startAngle >= 2 * Math.PI) {
+        // Special case for a full circle
+        return `
+      M ${x + radius} ${y}
+      A ${radius} ${radius} 0 1 1 ${x - radius} ${y}  
+      A ${radius} ${radius} 0 1 1 ${x + radius} ${y}
+    `;
+    }
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+// Function to calculate arc paths and angles
+const calculateArcPaths = (percentage, currentAngle, radius) => {
+    // Normalize percentage to 0-1 range
+    const normalizedPercentage = Math.max(0, Math.min(percentage, 100)) / 100;
+    const startAngle = currentAngle;
+    const angleIncrement = normalizedPercentage * 2 * Math.PI;
+    const endAngle = startAngle + angleIncrement;
+    // Background arc: always a full circle
+    const backgroundArcPath = calculateArc({
+        x: 0,
+        y: 0,
+        radius,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+    });
+    // Foreground arc: a partial arc based on the normalized percentage
+    const foregroundArcPath = calculateArc({
+        x: 0,
+        y: 0,
+        radius,
+        startAngle,
+        endAngle,
+    });
+    return { backgroundArcPath, foregroundArcPath };
+};
+const IconRadialChart = ({ radius = 15, lineWidth = 5, label, percentageValue, icon, fontSize = 10, labelColor = '', arcColor = 'var(--brand-color)', backgroundArcColor = 'var(--ff-select-scroll-thumb-color)', isSelectedArch = false, onSelect, }) => {
+    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+    const [showTooltip, setShowTooltip] = useState(false);
+    const containerRef = useRef(null);
+    let currentAngle = -Math.PI / 2;
+    const svgSize = 2 * (radius + lineWidth);
+    const { backgroundArcPath, foregroundArcPath } = calculateArcPaths(percentageValue, currentAngle, radius);
+    const handleMouseEnter = () => {
+        setShowTooltip(true);
+    };
+    const handleMouseLeave = () => {
+        setTooltipPosition({ x: 0, y: 0 });
+        setShowTooltip(false);
+    };
+    const handleMouseMove = (event) => {
+        if (containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            setTooltipPosition({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+        }
+    };
+    const renderTooltip = () => {
+        return (_jsxs("div", { className: "ff-icon-radial-chart-tooltip", style: {
+                position: 'absolute',
+                left: `${tooltipPosition.x + 15}px`,
+                top: `${tooltipPosition.y - 5}px`,
+            }, children: [_jsx(Typography, { children: `${label} : ` }), _jsxs(Typography, { children: [percentageValue, "%"] })] }));
+    };
+    return (_jsxs("div", { ref: containerRef, className: "ff-icon-radial-chart-container", style: { '--fontSize': `${fontSize}px` }, onClick: onSelect, children: [_jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, role: "img", children: _jsxs("g", { transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`, children: [_jsx("path", { d: backgroundArcPath, fill: "none", stroke: backgroundArcColor, strokeWidth: lineWidth, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove }), _jsx("path", { d: foregroundArcPath, fill: "none", stroke: arcColor, strokeWidth: lineWidth, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove }), isSelectedArch && (_jsx("path", { d: foregroundArcPath, fill: "none", stroke: "var(--dotted-border-color)", strokeOpacity: "0.4", strokeWidth: lineWidth, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove })), icon ? (_jsx("foreignObject", { x: "-10", y: "-10", width: "20", height: "20", children: _jsx(Icon, { className: "ff-radial-chart-icon-padding", name: icon, height: 20, width: 20 }) })) : (_jsx("text", { x: "0", y: "0", fill: labelColor || arcColor, textAnchor: "middle", dominantBaseline: "central", children: `${Math.round(percentageValue)}%` }))] }) }), showTooltip && renderTooltip()] }));
+};
+export default IconRadialChart;
+//# sourceMappingURL=IconRadialChart.js.map

package/lib/components/Charts/LineChart/LineChart.js

@@ -1 +1,243 @@
-import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import{useState as i,useEffect as l}from"react";import"./LineChart.scss.js";import n from"../../Typography/Typography.js";import{MEMORY_VALIDATION_REGEX as o,NUMBER_REGEX as a,UNIT_REGEX as s}from"../../../validations/regex.js";const c=({data:c=[],width:h,height:d,lineChartWidth:f,yAxisLabel:u,xAxisLabel:x,yAxisValueColor:m,xAxisColor:y,yAxisColor:p,yAxisLabelColor:g,textSize:v,fontWeight:N,numberSize:b,chartName:A,shouldCenterSinglePoint:w,xAxisLabelGap:S=16,isLeftOverflow:M=!1})=>{const P=40,$=h-80,k=d-80,[L,V]=i(!1),[z,W]=i({cursorX:null,hoverValues:{},dotPositions:{},tooltip:{visible:!1,left:0,top:0},currentXValue:null});l(()=>{const t=()=>{V(!1),W(t=>({...t,tooltip:{...t.tooltip,visible:!1}}))};return window.addEventListener("scroll",t,!0),()=>window.removeEventListener("scroll",t,!0)},[]);if(!(c&&c.length>0&&c?.some(t=>Array.isArray(t?.data)&&t?.data?.length>0))){const r=[];for(let t=6;t>=0;t--){const e=new Date;e.setDate(e.getDate()-t);const i=e?.toLocaleDateString("en-US",{day:"numeric",month:"short"});r.push(i)}const i=1024,l=6,o=7;return t("div",{className:"ff-line-chart-text",style:{width:h+20+S,gap:S},children:[e("div",{className:"ff-line-chart-yAxisLabel-warpper",style:{height:d},children:e(n,{className:"ff-line-chart-yAxisLabel",fontSize:v,fontWeight:"semi-bold",children:u})}),e("div",{className:"ff-line-chart-svg",children:e("svg",{height:d,width:h,className:"ff-line-chart-svg",children:t("g",{transform:"translate(40, 40)",children:[e("line",{x1:0,y1:k,x2:$,y2:k,stroke:y,strokeWidth:1}),e("text",{x:$/2.1,y:k+P/1.2,textAnchor:"middle",fill:g,className:"ff-line-chart-x-axis-label",style:{fontSize:v,fontWeight:N},children:x}),r.map((t,r)=>e("text",{x:r*($/(o-1)),y:k+15,textAnchor:0===r?"start":r===o-1?"end":"middle",fill:p,className:"ff--line-chart-x-line-data",style:{fontSize:b},children:t},t)),Array.from({length:l}).map((t,r)=>{const n=r*i/(l-1),o=n/1024;return e("text",{x:-10,y:k-n*k/i,textAnchor:"end",fill:m,className:"ff-line-chart-y-axis-text",style:{fontSize:b},children:o?.toFixed(1)},`y-${r}`)})]})})})]})}function F(t){if(!isNaN(t))return parseFloat(t);const e=o,r=t.match(e);if(!r)throw new Error("Invalid input format. Use '<value> <unit>' format (e.g., '10.9580078125 KB') or just a number.");const i=parseFloat(r[1]);switch(r[2]?r[2].toUpperCase():null){case"GB":return parseFloat((1024*i).toFixed(2));case"MB":return parseFloat(i.toFixed(2));case"KB":return parseFloat((i/1024).toFixed(2));default:throw new Error("Invalid unit. Supported units are GB, MB, and KB.")}}const C=c?.[0]?.data?.[0]?.hasOwnProperty("date")&&c?.[0]?.data?.[0]?.hasOwnProperty("totalMemory"),X="date",B=C?"totalMemory":"value",j=t=>{const e=c?.[0]?.data?.length;if(1===e)return w?$/2:$;const r=c[0].data.findIndex(e=>e[X]===t);return-1===r?0:r/(e-1)*$},D=Math.max(...c?.flatMap(t=>t?.data?.map(t=>F(t[B]))),5),E=t=>{if("memory"===A){const e=Math.max(...c?.flatMap(t=>t?.data?.map(t=>F(t[B]))));return k-t*k/(e>1024?e:1024)}return k-t*k/(0===D?1024:D)},O=t=>{if(1===t?.length){const e=t?.[0],r=j(e[X]),i=E(F(e[B]));return`M 0 ${E(0)} L ${r} ${i}`}return t?.reduce((e,r,i)=>{const l=j(r[X]),n=E(F(r[B]));if(0===i)return`M ${l} ${n}`;const o=t[i-1],a=o?j(o[X]):0;return`${e} C ${a+(l-a)/2} ${o?E(F(o[B])):0}, ${l-(l-a)/2} ${n}, ${l} ${n}`},"")},G=c[0].data;return t("div",{className:"ff-line-chart-text",style:{width:h+20+S,gap:S},children:[e("div",{className:"ff-line-chart-yAxisLabel-warpper",style:{height:d},children:e(n,{className:"ff-line-chart-yAxisLabel",fontSize:v,fontWeight:"semi-bold",children:u})}),t("div",{className:"ff-line-chart-svg",children:[e("svg",{height:d,width:h,onMouseMove:t=>{const e=t.currentTarget.getBoundingClientRect(),r=t.clientX-e.left-P;if(t.clientY-e.top-P>k)return V(!1),void W({cursorX:null,hoverValues:{},dotPositions:{},tooltip:{visible:!1,left:0,top:0},currentXValue:null});let i={hoverValues:{},dotPositions:{}},l=null;c.forEach((t,e)=>{const n=t.data.reduce((t,e)=>{const i=Math.abs(r-j(e[X]));return i<t.distance?{point:e,distance:i}:t},{point:null,distance:1/0}).point;n&&(l=n[X],i.hoverValues[e]=((t,e=2)=>{let r="";if("string"==typeof t){const e=t.match(a),i=t.match(s);e&&(t=parseFloat(e[0])),i&&(r=i[0])}const i=Math.pow(10,e);return`${Math.ceil(t*i)/i} ${r}`.trim()})(n[B]),i.dotPositions[e]={x:j(n[X]),y:E(F(n[B]))})}),V(!0),W({cursorX:r,hoverValues:i.hoverValues,dotPositions:i.dotPositions,currentXValue:l,tooltip:l?{visible:!0,left:t.clientX+10,top:t.clientY-20}:{visible:!1,left:0,top:0}})},onMouseLeave:()=>W({cursorX:null,hoverValues:{},dotPositions:{},tooltip:{visible:!1,left:0,top:0},currentXValue:null}),className:"ff-line-chart-svg",children:t("g",{transform:"translate(40, 40)",children:[e("line",{x1:0,y1:0,x2:0,y2:k,strokeWidth:2}),e("line",{x1:0,y1:k,x2:$,y2:k,stroke:y,strokeWidth:1}),e("text",{x:$/2.1,y:k+P/1.2,textAnchor:"middle",fill:g,className:"ff-line-chart-x-axis-label",style:{fontSize:v,fontWeight:N},children:x}),c.map((i,l)=>{return!1!==i.show?t("g",{children:[e("path",{d:O(i.data),fill:"none",stroke:i.color,strokeWidth:f,opacity:(n=i.data,n.every(t=>0===F(t[B]))?.5:1)}),z.dotPositions[l]&&t(r,{children:[e("line",{x1:z.dotPositions[l].x,y1:0,x2:z.dotPositions[l].x,y2:k,stroke:"gray",strokeWidth:.5,strokeDasharray:"4"}),e("circle",{cx:z.dotPositions[l].x,cy:z.dotPositions[l].y,r:5,fill:"white",stroke:i.color,strokeWidth:f,style:{transition:"cx 0.1s, cy 0.1s"}}),e("line",{x1:0,y1:z.dotPositions[l].y,x2:$,y2:z.dotPositions[l].y,stroke:"gray",strokeWidth:.5,strokeDasharray:"4"})]})]},l):null;var n}),(()=>{if(1===G.length){const t=G?.[0];return e("text",{x:w?$/2:$,y:k+15,textAnchor:w?"middle":"end",fill:p,className:"ff--line-chart-x-line-data",style:{fontSize:b},children:null!=t[X]?String(t[X]):""},String(t[X]))}if(G.length<7)return G.map(t=>e("text",{x:j(t[X]),y:k+15,textAnchor:"middle",fill:p,className:"ff--line-chart-x-line-data",style:{fontSize:b},children:null!=t[X]?String(t[X]):""},String(t[X])));{const t=(h-80-7*9.2)/6;return Array.from({length:7}).map((r,i)=>{const l=Math.floor(i*(G?.length-1)/6),n=G[l];return e("text",{x:i*t,y:k+15,fill:p,className:"ff--line-chart-x-line-data",style:{fontSize:b},children:null!=n?.[X]?String(n?.[X]):""},String(n?.[X]))})}})(),(()=>{if("memory"===A){const t=Math.max(D,1024);return Array.from({length:6}).map((r,i)=>{const l=i*t/5,n=l/1024;return e("text",{x:-10,y:E(l),textAnchor:"end",fill:m,className:"ff-line-chart-y-axis-text",style:{fontSize:b},children:n.toFixed(1)},`y-${i}`)})}return Array.from({length:6}).map((t,r)=>{const i=r*D/5;return e("text",{x:-10,y:E(i),textAnchor:"end",fill:m,className:"ff-line-chart-y-axis-text",style:{fontSize:b},children:i.toFixed(0)},`y-${r}`)})})()]})}),L&&z.tooltip.visible&&t("div",{className:"ff-line-chart-tooltip",style:{left:M&&z.tooltip.left/2>h/1.75?z.tooltip.left-180:z.tooltip.left,top:z.tooltip.top},children:[e("div",{className:"ff-line-chart-date",children:z.currentXValue}),Object.entries(z.hoverValues).map(([r,i])=>!1!==c[Number(r)]?.show&&t("div",{className:"ff-line-chart-inner-tooltip",children:["default"!==c[Number(r)]?.name&&e("div",{className:"ff-line-chart-status-dot",style:{backgroundColor:c[Number(r)]?.color}}),c[Number(r)]?.name,": ",i]},r))]})]})]})};export{c as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './LineChart.scss';
+import Typography from '../../Typography';
+import { MEMORY_VALIDATION_REGEX, NUMBER_REGEX, UNIT_REGEX, } from '../../../validations/regex';
+const LineChart = ({ data = [], width, height, lineChartWidth, yAxisLabel, xAxisLabel, yAxisValueColor, xAxisColor, yAxisColor, yAxisLabelColor, textSize, fontWeight, numberSize, chartName, shouldCenterSinglePoint, xAxisLabelGap = 16, isLeftOverflow = false, }) => {
+    const margin = 40;
+    const xMax = width - margin * 2;
+    const yMax = height - margin * 2;
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const [hoverState, setHoverState] = useState({
+        cursorX: null,
+        hoverValues: {},
+        dotPositions: {},
+        tooltip: { visible: false, left: 0, top: 0 },
+        currentXValue: null,
+    });
+    useEffect(() => {
+        const handleScroll = () => {
+            setTooltipVisible(false);
+            setHoverState((prev) => ({
+                ...prev,
+                tooltip: { ...prev.tooltip, visible: false },
+            }));
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        return () => window.removeEventListener('scroll', handleScroll, true);
+    }, []);
+    const hasData = data &&
+        data.length > 0 &&
+        data?.some((line) => Array.isArray(line?.data) && line?.data?.length > 0);
+    if (!hasData) {
+        const defaultDates = [];
+        for (let i = 6; i >= 0; i--) {
+            const d = new Date();
+            d.setDate(d.getDate() - i);
+            const formatted = d?.toLocaleDateString('en-US', {
+                day: 'numeric',
+                month: 'short',
+            });
+            defaultDates.push(formatted);
+        }
+        const maxMemory = 1024;
+        const numberOfYTicks = 6;
+        const numberOfXTicks = 7;
+        return (_jsxs("div", { className: "ff-line-chart-text", style: { width: width + 20 + xAxisLabelGap, gap: xAxisLabelGap }, children: [_jsx("div", { className: "ff-line-chart-yAxisLabel-warpper", style: { height: height }, children: _jsx(Typography, { className: "ff-line-chart-yAxisLabel", fontSize: textSize, fontWeight: "semi-bold", children: yAxisLabel }) }), _jsx("div", { className: "ff-line-chart-svg", children: _jsx("svg", { height: height, width: width, className: "ff-line-chart-svg", children: _jsxs("g", { transform: `translate(${margin}, ${margin})`, children: [_jsx("line", { x1: 0, y1: yMax, x2: xMax, y2: yMax, stroke: xAxisColor, strokeWidth: 1 }), _jsx("text", { x: xMax / 2.1, y: yMax + margin / 1.2, textAnchor: "middle", fill: yAxisLabelColor, className: "ff-line-chart-x-axis-label", style: { fontSize: textSize, fontWeight: fontWeight }, children: xAxisLabel }), defaultDates.map((date, i) => {
+                                    const tickSpacing = xMax / (numberOfXTicks - 1);
+                                    return (_jsx("text", { x: i * tickSpacing, y: yMax + 15, textAnchor: i === 0
+                                            ? 'start'
+                                            : i === numberOfXTicks - 1
+                                                ? 'end'
+                                                : 'middle', fill: yAxisColor, className: "ff--line-chart-x-line-data", style: { fontSize: numberSize }, children: date }, date));
+                                }), Array.from({ length: numberOfYTicks }).map((_, i) => {
+                                    const yValue = (i * maxMemory) / (numberOfYTicks - 1);
+                                    const displayValue = yValue / 1024;
+                                    const yPos = yMax - (yValue * yMax) / maxMemory;
+                                    return (_jsx("text", { x: -10, y: yPos, textAnchor: "end", fill: yAxisValueColor, className: "ff-line-chart-y-axis-text", style: { fontSize: numberSize }, children: displayValue?.toFixed(1) }, `y-${i}`));
+                                })] }) }) })] }));
+    }
+    const roundUp = (value, decimals = 2) => {
+        let unit = '';
+        if (typeof value === 'string') {
+            const match = value.match(NUMBER_REGEX);
+            const unitMatch = value.match(UNIT_REGEX);
+            if (match) {
+                value = parseFloat(match[0]);
+            }
+            if (unitMatch) {
+                unit = unitMatch[0];
+            }
+        }
+        const multiplier = Math.pow(10, decimals);
+        const roundedValue = Math.ceil(value * multiplier) / multiplier;
+        return `${roundedValue} ${unit}`.trim();
+    };
+    function convertToMB(input) {
+        if (!isNaN(input)) {
+            return parseFloat(input);
+        }
+        const regex = MEMORY_VALIDATION_REGEX;
+        const match = input.match(regex);
+        if (!match) {
+            throw new Error("Invalid input format. Use '<value> <unit>' format (e.g., '10.9580078125 KB') or just a number.");
+        }
+        const value = parseFloat(match[1]);
+        const unit = match[2] ? match[2].toUpperCase() : null;
+        switch (unit) {
+            case 'GB':
+                return parseFloat((value * 1024).toFixed(2));
+            case 'MB':
+                return parseFloat(value.toFixed(2));
+            case 'KB':
+                return parseFloat((value / 1024).toFixed(2));
+            default:
+                throw new Error('Invalid unit. Supported units are GB, MB, and KB.');
+        }
+    }
+    const isDefaultLineChart = data?.[0]?.data?.[0]?.hasOwnProperty('date') &&
+        data?.[0]?.data?.[0]?.hasOwnProperty('totalMemory');
+    const xKey = isDefaultLineChart ? 'date' : 'date';
+    const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
+    const xScale = (x) => {
+        const totalPoints = data?.[0]?.data?.length;
+        if (totalPoints === 1) {
+            return shouldCenterSinglePoint ? xMax / 2 : xMax;
+        }
+        const index = data[0].data.findIndex((point) => point[xKey] === x);
+        if (index === -1)
+            return 0;
+        return (index / (totalPoints - 1)) * xMax;
+    };
+    const maxValue = Math.max(...data?.flatMap((line) => line?.data?.map((point) => convertToMB(point[yKey]))), 5);
+    const yScale = (y) => {
+        if (chartName === 'memory') {
+            const maxMemoryValue = Math.max(...data?.flatMap((line) => line?.data?.map((point) => convertToMB(point[yKey]))));
+            const scaleMax = maxMemoryValue > 1024 ? maxMemoryValue : 1024;
+            return yMax - (y * yMax) / scaleMax;
+        }
+        else {
+            return yMax - (y * yMax) / (maxValue === 0 ? 1024 : maxValue);
+        }
+    };
+    const isAllValuesZero = (lineData) => {
+        return lineData.every((point) => convertToMB(point[yKey]) === 0);
+    };
+    const generateLinePath = (lineData) => {
+        if (lineData?.length === 1) {
+            const point = lineData?.[0];
+            const x = xScale(point[xKey]);
+            const yValue = yScale(convertToMB(point[yKey]));
+            return `M 0 ${yScale(0)} L ${x} ${yValue}`;
+        }
+        return lineData?.reduce((path, point, i) => {
+            const x = xScale(point[xKey]);
+            const y = yScale(convertToMB(point[yKey]));
+            if (i === 0) {
+                return `M ${x} ${y}`;
+            }
+            const prevPoint = lineData[i - 1];
+            const prevX = prevPoint ? xScale(prevPoint[xKey]) : 0;
+            const prevY = prevPoint ? yScale(convertToMB(prevPoint[yKey])) : 0;
+            return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${x - (x - prevX) / 2} ${y}, ${x} ${y}`;
+        }, '');
+    };
+    const dataPoints = data[0].data;
+    const numberOfXTicks = 7;
+    const renderTickLabels = () => {
+        if (dataPoints.length === 1) {
+            const point = dataPoints?.[0];
+            return (_jsx("text", { x: shouldCenterSinglePoint ? xMax / 2 : xMax, y: yMax + 15, textAnchor: shouldCenterSinglePoint ? 'middle' : 'end', fill: yAxisColor, className: "ff--line-chart-x-line-data", style: { fontSize: numberSize }, children: point[xKey] != null ? String(point[xKey]) : '' }, String(point[xKey])));
+        }
+        else if (dataPoints.length < 7) {
+            return dataPoints.map((point) => (_jsx("text", { x: xScale(point[xKey]), y: yMax + 15, textAnchor: "middle", fill: yAxisColor, className: "ff--line-chart-x-line-data", style: { fontSize: numberSize }, children: point[xKey] != null ? String(point[xKey]) : '' }, String(point[xKey]))));
+        }
+        else {
+            const tickSpacing = (width - margin * 2 - numberOfXTicks * 9.2) / (numberOfXTicks - 1);
+            return Array.from({ length: numberOfXTicks }).map((_, i) => {
+                const dataIndex = Math.floor((i * (dataPoints?.length - 1)) / (numberOfXTicks - 1));
+                const point = dataPoints[dataIndex];
+                return (_jsx("text", { x: i * tickSpacing, y: yMax + 15, fill: yAxisColor, className: "ff--line-chart-x-line-data", style: { fontSize: numberSize }, children: point?.[xKey] != null ? String(point?.[xKey]) : '' }, String(point?.[xKey])));
+            });
+        }
+    };
+    const renderYAxisLabels = () => {
+        const numberOfYTicks = 6;
+        if (chartName === 'memory') {
+            const dynamicMaxValue = Math.max(maxValue, 1024);
+            return Array.from({ length: numberOfYTicks }).map((_, i) => {
+                const yValue = (i * dynamicMaxValue) / (numberOfYTicks - 1);
+                const displayValue = yValue / 1024; // Convert MB to GB
+                return (_jsx("text", { x: -10, y: yScale(yValue), textAnchor: "end", fill: yAxisValueColor, className: "ff-line-chart-y-axis-text", style: { fontSize: numberSize }, children: displayValue.toFixed(1) }, `y-${i}`));
+            });
+        }
+        else {
+            return Array.from({ length: numberOfYTicks }).map((_, i) => {
+                const yValue = (i * maxValue) / (numberOfYTicks - 1);
+                return (_jsx("text", { x: -10, y: yScale(yValue), textAnchor: "end", fill: yAxisValueColor, className: "ff-line-chart-y-axis-text", style: { fontSize: numberSize }, children: yValue.toFixed(0) }, `y-${i}`));
+            });
+        }
+    };
+    const handleMouseMove = (e) => {
+        const svgRect = e.currentTarget.getBoundingClientRect();
+        const mouseX = e.clientX - svgRect.left - margin;
+        const mouseY = e.clientY - svgRect.top - margin;
+        if (mouseY > yMax) {
+            setTooltipVisible(false);
+            setHoverState({
+                cursorX: null,
+                hoverValues: {},
+                dotPositions: {},
+                tooltip: { visible: false, left: 0, top: 0 },
+                currentXValue: null,
+            });
+            return;
+        }
+        let nearestValues = {
+            hoverValues: {},
+            dotPositions: {},
+        };
+        let nearestXValue = null;
+        data.forEach((line, lineIndex) => {
+            const nearestPoint = line.data.reduce((closest, point) => {
+                const distance = Math.abs(mouseX - xScale(point[xKey]));
+                return distance < closest.distance ? { point, distance } : closest;
+            }, { point: null, distance: Infinity }).point;
+            if (nearestPoint) {
+                nearestXValue = nearestPoint[xKey];
+                nearestValues.hoverValues[lineIndex] = roundUp(nearestPoint[yKey]);
+                nearestValues.dotPositions[lineIndex] = {
+                    x: xScale(nearestPoint[xKey]),
+                    y: yScale(convertToMB(nearestPoint[yKey])),
+                };
+            }
+        });
+        setTooltipVisible(true);
+        setHoverState({
+            cursorX: mouseX,
+            hoverValues: nearestValues.hoverValues,
+            dotPositions: nearestValues.dotPositions,
+            currentXValue: nearestXValue,
+            tooltip: nearestXValue
+                ? { visible: true, left: e.clientX + 10, top: e.clientY - 20 }
+                : { visible: false, left: 0, top: 0 },
+        });
+    };
+    const handleMouseLeave = () => setHoverState({
+        cursorX: null,
+        hoverValues: {},
+        dotPositions: {},
+        tooltip: { visible: false, left: 0, top: 0 },
+        currentXValue: null,
+    });
+    return (_jsxs("div", { className: "ff-line-chart-text", style: { width: width + 20 + xAxisLabelGap, gap: xAxisLabelGap }, children: [_jsx("div", { className: "ff-line-chart-yAxisLabel-warpper", style: { height: height }, children: _jsx(Typography, { className: "ff-line-chart-yAxisLabel", fontSize: textSize, fontWeight: "semi-bold", children: yAxisLabel }) }), _jsxs("div", { className: "ff-line-chart-svg", children: [_jsx("svg", { height: height, width: width, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "ff-line-chart-svg", children: _jsxs("g", { transform: `translate(${margin}, ${margin})`, children: [_jsx("line", { x1: 0, y1: 0, x2: 0, y2: yMax, strokeWidth: 2 }), _jsx("line", { x1: 0, y1: yMax, x2: xMax, y2: yMax, stroke: xAxisColor, strokeWidth: 1 }), _jsx("text", { x: xMax / 2.1, y: yMax + margin / 1.2, textAnchor: "middle", fill: yAxisLabelColor, className: "ff-line-chart-x-axis-label", style: { fontSize: textSize, fontWeight: fontWeight }, children: xAxisLabel }), data.map((line, index) => line.show !== false ? (_jsxs("g", { children: [_jsx("path", { d: generateLinePath(line.data), fill: "none", stroke: line.color, strokeWidth: lineChartWidth, opacity: !isAllValuesZero(line.data) ? 1 : 0.5 }), hoverState.dotPositions[index] && (_jsxs(_Fragment, { children: [_jsx("line", { x1: hoverState.dotPositions[index].x, y1: 0, x2: hoverState.dotPositions[index].x, y2: yMax, stroke: "gray", strokeWidth: 0.5, strokeDasharray: "4" }), _jsx("circle", { cx: hoverState.dotPositions[index].x, cy: hoverState.dotPositions[index].y, r: 5, fill: "white", stroke: line.color, strokeWidth: lineChartWidth, style: { transition: 'cx 0.1s, cy 0.1s' } }), _jsx("line", { x1: 0, y1: hoverState.dotPositions[index].y, x2: xMax, y2: hoverState.dotPositions[index].y, stroke: "gray", strokeWidth: 0.5, strokeDasharray: "4" })] }))] }, index)) : null), renderTickLabels(), renderYAxisLabels()] }) }), tooltipVisible && hoverState.tooltip.visible && (_jsxs("div", { className: "ff-line-chart-tooltip", style: {
+                            left: isLeftOverflow
+                                ? hoverState.tooltip.left / 2 > width / 1.75
+                                    ? hoverState.tooltip.left - 180
+                                    : hoverState.tooltip.left
+                                : hoverState.tooltip.left,
+                            top: hoverState.tooltip.top,
+                        }, children: [_jsx("div", { className: "ff-line-chart-date", children: hoverState.currentXValue }), Object.entries(hoverState.hoverValues).map(([index, value]) => data[Number(index)]?.show !== false && (_jsxs("div", { className: "ff-line-chart-inner-tooltip", children: [data[Number(index)]?.name !== 'default' && (_jsx("div", { className: "ff-line-chart-status-dot", style: { backgroundColor: data[Number(index)]?.color } })), data[Number(index)]?.name, ": ", value] }, index)))] }))] })] }));
+};
+export default LineChart;
+//# sourceMappingURL=LineChart.js.map