pixel-react 1.20.17 → 1.20.19

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

@@ -1,102 +1 @@
-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
+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};

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

@@ -0,0 +1 @@
+import t from"../../../node_modules/style-inject/dist/style-inject.es.js";t(".fontXs{font-family:Poppins;font-size:10px}.ff-donut-chart-svg-container svg text:first-of-type,.ff-status-item,.fontSm{font-family:Poppins;font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.ff-donut-chart-svg-container svg text:nth-of-type(2),.fontXL{font-family:Poppins;font-size:18px}.font2Xl{font-family:Poppins;font-size:24px}.ff-donut-chart-svg-container svg text:nth-of-type(3),.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-donut-chart-section{align-items:center;display:flex;padding:8px}.ff-donut-chart-svg-container{display:flex}.ff-donut-chart-svg-container svg text:first-of-type,.ff-donut-chart-svg-container svg text:nth-of-type(2){font-weight:600}.ff-donut-chart-svg-container svg text:nth-of-type(3){font-weight:500}.ff-status-container{display:flex;flex-direction:column;gap:20px}.ff-status-item{display:flex;gap:40px;justify-content:space-between;opacity:1}.ff-status-item.ff-highlighted{opacity:1}.ff-status-item.ff-fade{opacity:10%}.ff-status-item .ff-status-text{color:var(--status-skipped-text-color);font-weight:500}.ff-status-item .ff-status-details-script-count{display:flex;font-weight:600;gap:4px}.ff-status-item .ff-status-details-script-percentage{color:var(--brand2-color);font-weight:400}.ff-status-label{align-items:center;display:flex;gap:8px}.ff-status-details{display:flex;gap:4px}.ff-status-color{border-radius:4px;height:16px;opacity:80%;width:16px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRvbnV0Q2hhcnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxRQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsNkVBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxnQkFKRSxtQkFPRixDQUhBLFFBRUUsY0FDRixDQUVBLDhEQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsU0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLG1FQUNFLG1CQUFzQixDQUN0QixhQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLHdCQUVFLGtCQUFtQixDQURuQixZQUFhLENBRWIsV0FDRixDQUVBLDhCQUNFLFlBQ0YsQ0FJQSwyR0FDRSxlQUNGLENBQ0Esc0RBQ0UsZUFDRixDQUVBLHFCQUNFLFlBQWEsQ0FDYixxQkFBc0IsQ0FDdEIsUUFDRixDQUVBLGdCQUNFLFlBQWEsQ0FDYixRQUFTLENBQ1QsNkJBQThCLENBQzlCLFNBQ0YsQ0FDQSwrQkFDRSxTQUNGLENBQ0Esd0JBQ0UsV0FDRixDQUNBLGdDQUVFLHNDQUF1QyxDQUR2QyxlQUVGLENBQ0EsZ0RBQ0UsWUFBYSxDQUViLGVBQWdCLENBRGhCLE9BRUYsQ0FDQSxxREFFRSx5QkFBMEIsQ0FEMUIsZUFFRixDQUVBLGlCQUdFLGtCQUFtQixDQUZuQixZQUFhLENBQ2IsT0FFRixDQUVBLG1CQUNFLFlBQWEsQ0FDYixPQUNGLENBRUEsaUJBR0UsaUJBQWtCLENBRGxCLFdBQVksQ0FFWixXQUFZLENBSFosVUFJRiIsImZpbGUiOiJEb251dENoYXJ0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250U20sIC5mZi1kb251dC1jaGFydC1zdmctY29udGFpbmVyIHN2ZyB0ZXh0Om50aC1vZi10eXBlKDEpLCAuZmYtc3RhdHVzLWl0ZW0ge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn1cblxuLmZvbnRNZCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuXG4uZm9udExnIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5mb250WEwsIC5mZi1kb251dC1jaGFydC1zdmctY29udGFpbmVyIHN2ZyB0ZXh0Om50aC1vZi10eXBlKDIpIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE4cHg7XG59XG5cbi5mb250MlhsIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDI0cHg7XG59XG5cbi5mb250LXNpemUtOCwgLmZmLWRvbnV0LWNoYXJ0LXN2Zy1jb250YWluZXIgc3ZnIHRleHQ6bnRoLW9mLXR5cGUoMykge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogOHB4O1xufVxuXG4uZm9udC1zaXplLTEwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250LXNpemUtMjAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjBweDtcbn1cblxuLmZvbnQtc2l6ZS0zMiB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAzMnB4O1xufVxuXG4uZm9udC1zaXplLTgwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDgwcHg7XG59XG5cbi5mZi1kb251dC1jaGFydC1zZWN0aW9uIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogOHB4O1xufVxuXG4uZmYtZG9udXQtY2hhcnQtc3ZnLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4uZmYtZG9udXQtY2hhcnQtc3ZnLWNvbnRhaW5lciBzdmcgdGV4dDpudGgtb2YtdHlwZSgxKSB7XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG59XG4uZmYtZG9udXQtY2hhcnQtc3ZnLWNvbnRhaW5lciBzdmcgdGV4dDpudGgtb2YtdHlwZSgyKSB7XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG59XG4uZmYtZG9udXQtY2hhcnQtc3ZnLWNvbnRhaW5lciBzdmcgdGV4dDpudGgtb2YtdHlwZSgzKSB7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5mZi1zdGF0dXMtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZ2FwOiAyMHB4O1xufVxuXG4uZmYtc3RhdHVzLWl0ZW0ge1xuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IDQwcHg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgb3BhY2l0eTogMTtcbn1cbi5mZi1zdGF0dXMtaXRlbS5mZi1oaWdobGlnaHRlZCB7XG4gIG9wYWNpdHk6IDE7XG59XG4uZmYtc3RhdHVzLWl0ZW0uZmYtZmFkZSB7XG4gIG9wYWNpdHk6IDEwJTtcbn1cbi5mZi1zdGF0dXMtaXRlbSAuZmYtc3RhdHVzLXRleHQge1xuICBmb250LXdlaWdodDogNTAwO1xuICBjb2xvcjogdmFyKC0tc3RhdHVzLXNraXBwZWQtdGV4dC1jb2xvcik7XG59XG4uZmYtc3RhdHVzLWl0ZW0gLmZmLXN0YXR1cy1kZXRhaWxzLXNjcmlwdC1jb3VudCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogNHB4O1xuICBmb250LXdlaWdodDogNjAwO1xufVxuLmZmLXN0YXR1cy1pdGVtIC5mZi1zdGF0dXMtZGV0YWlscy1zY3JpcHQtcGVyY2VudGFnZSB7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiB2YXIoLS1icmFuZDItY29sb3IpO1xufVxuXG4uZmYtc3RhdHVzLWxhYmVsIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiA4cHg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG5cbi5mZi1zdGF0dXMtZGV0YWlscyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogNHB4O1xufVxuXG4uZmYtc3RhdHVzLWNvbG9yIHtcbiAgd2lkdGg6IDE2cHg7XG4gIGhlaWdodDogMTZweDtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBvcGFjaXR5OiA4MCU7XG59Il19 */");

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

@@ -1,81 +1 @@
-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
+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};

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

@@ -0,0 +1 @@
+import i from"../../../node_modules/style-inject/dist/style-inject.es.js";i(".ff-icon-radial-chart-container svg text,.fontXs{font-family:Poppins;font-size:10px}.fontSm{font-size:12px}.fontMd,.fontSm{font-family:Poppins}.fontMd{font-size:14px}.fontLg{font-size:16px}.fontLg,.fontXL{font-family:Poppins}.fontXL{font-size:18px}.font2Xl{font-family:Poppins;font-size:24px}.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-icon-radial-chart-container{cursor:pointer;position:relative}.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding{padding:0}.ff-icon-radial-chart-container svg text{font-size:var(--fontSize)!important;font-weight:400}.ff-icon-radial-chart-container path{transition:stroke-opacity .2s}.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip{background-color:var(--tooltip-bg-color);border-radius:4px;color:var(--tooltip-text-color);min-width:max-content;padding:5px;pointer-events:none;position:absolute;z-index:100}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkljb25SYWRpYWxDaGFydC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlEQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsZ0JBSkUsbUJBT0YsQ0FIQSxRQUVFLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxnQkFKRSxtQkFPRixDQUhBLFFBRUUsY0FDRixDQUVBLFNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxhQUNFLG1CQUFzQixDQUN0QixhQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGdDQUVFLGNBQWUsQ0FEZixpQkFFRixDQUNBLGtFQUNFLFNBQ0YsQ0FDQSx5Q0FDRSxtQ0FBcUMsQ0FDckMsZUFDRixDQUNBLHFDQUNFLDZCQUNGLENBQ0EsOERBS0Usd0NBQXlDLENBRnpDLGlCQUFrQixDQUdsQiwrQkFBZ0MsQ0FFaEMscUJBQXNCLENBTnRCLFdBQVksQ0FFWixtQkFBb0IsQ0FIcEIsaUJBQWtCLENBTWxCLFdBRUYiLCJmaWxlIjoiSWNvblJhZGlhbENoYXJ0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzLCAuZmYtaWNvbi1yYWRpYWwtY2hhcnQtY29udGFpbmVyIHN2ZyB0ZXh0IHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250U20ge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn1cblxuLmZvbnRNZCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuXG4uZm9udExnIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5mb250WEwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMThweDtcbn1cblxuLmZvbnQyWGwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjRweDtcbn1cblxuLmZvbnQtc2l6ZS04IHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDhweDtcbn1cblxuLmZvbnQtc2l6ZS0xMCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMHB4O1xufVxuXG4uZm9udC1zaXplLTIwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDIwcHg7XG59XG5cbi5mb250LXNpemUtMzIge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMzJweDtcbn1cblxuLmZvbnQtc2l6ZS04MCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiA4MHB4O1xufVxuXG4uZmYtaWNvbi1yYWRpYWwtY2hhcnQtY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4uZmYtaWNvbi1yYWRpYWwtY2hhcnQtY29udGFpbmVyIHN2ZyAuZmYtcmFkaWFsLWNoYXJ0LWljb24tcGFkZGluZyB7XG4gIHBhZGRpbmc6IDBweDtcbn1cbi5mZi1pY29uLXJhZGlhbC1jaGFydC1jb250YWluZXIgc3ZnIHRleHQge1xuICBmb250LXNpemU6IHZhcigtLWZvbnRTaXplKSAhaW1wb3J0YW50O1xuICBmb250LXdlaWdodDogNDAwO1xufVxuLmZmLWljb24tcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciBwYXRoIHtcbiAgdHJhbnNpdGlvbjogc3Ryb2tlLW9wYWNpdHkgMC4ycztcbn1cbi5mZi1pY29uLXJhZGlhbC1jaGFydC1jb250YWluZXIgLmZmLWljb24tcmFkaWFsLWNoYXJ0LXRvb2x0aXAge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHBhZGRpbmc6IDVweDtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdG9vbHRpcC1iZy1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS10b29sdGlwLXRleHQtY29sb3IpO1xuICB6LWluZGV4OiAxMDA7XG4gIG1pbi13aWR0aDogbWF4LWNvbnRlbnQ7XG59Il19 */");

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

@@ -1,243 +1 @@
-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
+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};

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

@@ -0,0 +1 @@
+import t from"../../../node_modules/style-inject/dist/style-inject.es.js";t(".fontXs{font-family:Poppins;font-size:10px}.ff--line-chart-x-line-data,.ff-line-chart-date,.ff-line-chart-inner-tooltip,.ff-line-chart-y-axis-text,.fontSm{font-family:Poppins;font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.fontXL{font-size:18px}.font2Xl,.fontXL{font-family:Poppins}.font2Xl{font-size:24px}.ff-line-chart-x-axis-label,.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-line-chart-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.ff-line-chart-text{align-items:center;display:flex;justify-content:flex-start}.ff-line-chart-text .smooth-dot{transition:cx .2s ease,cy .2s ease}.ff-line-chart-yAxisLabel-warpper{height:100%;min-width:20px;position:relative}.ff-line-chart-yAxisLabel-warpper .ff-line-chart-yAxisLabel{display:flex;position:absolute;right:0;top:50%;transform:rotate(270deg) translateX(60%);transform-origin:right center;white-space:nowrap}.ff-line-chart-text1{color:var(--drawer-title-color);left:163px;min-width:10px;position:relative;transform:rotate(-90deg);transform-origin:center;transition:transform 1s ease-in-out}.ff-line-chart-tooltip{align-items:flex-start;background-color:var(--tooltip-bg-color);border-radius:4px;display:flex;flex-direction:column;justify-content:center;min-height:30px;min-width:30px;padding:8px!important;pointer-events:none;position:absolute;row-gap:10px;z-index:99999999999999}.ff-line-chart-status-dot{border-radius:100%;height:16px;width:16px}.ff-line-chart-inner-tooltip{align-items:center;gap:5px}.ff-line-chart-date,.ff-line-chart-inner-tooltip{color:var(--arrow-button-bg-color);display:flex;justify-content:center}.ff-line-chart-date{align-items:flex-start;border-bottom:1px solid var(--arrow-button-bg-color);height:100%;width:100%}.ff-line-chart-x-axis-label{font-weight:600}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxpbmVDaGFydC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFFBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxnSEFDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLFFBRUUsY0FDRixDQUVBLGdCQUpFLG1CQU9GLENBSEEsUUFFRSxjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsaUJBSkUsbUJBT0YsQ0FIQSxTQUVFLGNBQ0YsQ0FFQSx5Q0FDRSxtQkFBc0IsQ0FDdEIsYUFDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSx5QkFLRSxrQkFBbUIsQ0FGbkIsWUFBYSxDQURiLFdBQVksQ0FFWixzQkFBdUIsQ0FIdkIsVUFLRixDQUVBLG9CQUdFLGtCQUFtQixDQUZuQixZQUFhLENBQ2IsMEJBRUYsQ0FDQSxnQ0FDRSxrQ0FDRixDQUVBLGtDQUdFLFdBQVksQ0FEWixjQUFlLENBRGYsaUJBR0YsQ0FDQSw0REFJRSxZQUFhLENBSGIsaUJBQWtCLENBQ2xCLE9BQVEsQ0FDUixPQUFRLENBR1Isd0NBQXlDLENBQ3pDLDZCQUE4QixDQUY5QixrQkFHRixDQUVBLHFCQU9FLCtCQUFnQyxDQUZoQyxVQUFXLENBQ1gsY0FBZSxDQUZmLGlCQUFrQixDQUZsQix3QkFBeUIsQ0FEekIsdUJBQXdCLENBRXhCLG1DQUtGLENBRUEsdUJBVUUsc0JBQXVCLENBUnZCLHdDQUF5QyxDQUN6QyxpQkFBa0IsQ0FFbEIsWUFBYSxDQUNiLHFCQUFzQixDQUd0QixzQkFBdUIsQ0FEdkIsZUFBZ0IsQ0FEaEIsY0FBZSxDQUtmLHFCQUF1QixDQVJ2QixtQkFBb0IsQ0FIcEIsaUJBQWtCLENBVWxCLFlBQWEsQ0FFYixzQkFDRixDQUVBLDBCQUdFLGtCQUFtQixDQURuQixXQUFZLENBRFosVUFHRixDQUVBLDZCQUdFLGtCQUFtQixDQUNuQixPQUVGLENBRUEsaURBSEUsa0NBQW1DLENBSm5DLFlBQWEsQ0FDYixzQkFjRixDQVJBLG9CQUtFLHNCQUF1QixDQUN2QixvREFBcUQsQ0FMckQsV0FBWSxDQUNaLFVBTUYsQ0FFQSw0QkFDRSxlQUNGIiwiZmlsZSI6IkxpbmVDaGFydC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmZvbnRYcyB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMHB4O1xufVxuXG4uZm9udFNtLCAuZmYtbGluZS1jaGFydC1pbm5lci10b29sdGlwLCAuZmYtLWxpbmUtY2hhcnQteC1saW5lLWRhdGEsIC5mZi1saW5lLWNoYXJ0LXktYXhpcy10ZXh0LCAuZmYtbGluZS1jaGFydC1kYXRlIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEycHg7XG59XG5cbi5mb250TWQge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTRweDtcbn1cblxuLmZvbnRMZyB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNnB4O1xufVxuXG4uZm9udFhMIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE4cHg7XG59XG5cbi5mb250MlhsIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDI0cHg7XG59XG5cbi5mb250LXNpemUtOCwgLmZmLWxpbmUtY2hhcnQteC1heGlzLWxhYmVsIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDhweDtcbn1cblxuLmZvbnQtc2l6ZS0xMCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMHB4O1xufVxuXG4uZm9udC1zaXplLTIwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDIwcHg7XG59XG5cbi5mb250LXNpemUtMzIge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMzJweDtcbn1cblxuLmZvbnQtc2l6ZS04MCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiA4MHB4O1xufVxuXG4uZmYtbGluZS1jaGFydC1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cblxuLmZmLWxpbmUtY2hhcnQtdGV4dCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5mZi1saW5lLWNoYXJ0LXRleHQgLnNtb290aC1kb3Qge1xuICB0cmFuc2l0aW9uOiBjeCAwLjJzIGVhc2UsIGN5IDAuMnMgZWFzZTtcbn1cblxuLmZmLWxpbmUtY2hhcnQteUF4aXNMYWJlbC13YXJwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtaW4td2lkdGg6IDIwcHg7XG4gIGhlaWdodDogMTAwJTtcbn1cbi5mZi1saW5lLWNoYXJ0LXlBeGlzTGFiZWwtd2FycHBlciAuZmYtbGluZS1jaGFydC15QXhpc0xhYmVsIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMDtcbiAgdG9wOiA1MCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRyYW5zZm9ybTogcm90YXRlKDI3MGRlZykgdHJhbnNsYXRlWCg2MCUpO1xuICB0cmFuc2Zvcm0tb3JpZ2luOiByaWdodCBjZW50ZXI7XG59XG5cbi5mZi1saW5lLWNoYXJ0LXRleHQxIHtcbiAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyO1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgtOTBkZWcpO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMXMgZWFzZS1pbi1vdXQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogMTYzcHg7XG4gIG1pbi13aWR0aDogMTBweDtcbiAgY29sb3I6IHZhcigtLWRyYXdlci10aXRsZS1jb2xvcik7XG59XG5cbi5mZi1saW5lLWNoYXJ0LXRvb2x0aXAge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRvb2x0aXAtYmctY29sb3IpO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBtaW4td2lkdGg6IDMwcHg7XG4gIG1pbi1oZWlnaHQ6IDMwcHg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgcm93LWdhcDogMTBweDtcbiAgcGFkZGluZzogOHB4ICFpbXBvcnRhbnQ7XG4gIHotaW5kZXg6IDk5OTk5OTk5OTk5OTk5O1xufVxuXG4uZmYtbGluZS1jaGFydC1zdGF0dXMtZG90IHtcbiAgd2lkdGg6IDE2cHg7XG4gIGhlaWdodDogMTZweDtcbiAgYm9yZGVyLXJhZGl1czogMTAwJTtcbn1cblxuLmZmLWxpbmUtY2hhcnQtaW5uZXItdG9vbHRpcCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IDVweDtcbiAgY29sb3I6IHZhcigtLWFycm93LWJ1dHRvbi1iZy1jb2xvcik7XG59XG5cbi5mZi1saW5lLWNoYXJ0LWRhdGUge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB2YXIoLS1hcnJvdy1idXR0b24tYmctY29sb3IpO1xuICBjb2xvcjogdmFyKC0tYXJyb3ctYnV0dG9uLWJnLWNvbG9yKTtcbn1cblxuLmZmLWxpbmUtY2hhcnQteC1heGlzLWxhYmVsIHtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn0iXX0= */");