pixel-react 1.20.18 → 1.20.19

package/lib/components/Button/types.d.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
     /**
      * Variant of the button
      */
-    variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning' | 'custom' | 'danger' | string;
+    variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning' | 'custom' | 'danger';
     /**
      * What background color to use
      */

package/lib/components/Charts/BarChart/BarChart.js

@@ -1,291 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from 'react';
-import './BarChart.scss';
-import Typography from '../../Typography';
-import Icon from '../../Icon';
-import { truncateText } from '../../../utils/truncateText/truncateText';
-import { convertToBytes } from '../../../utils/convertToBytes/convertToBytes';
-import { convertToGB } from '../../../utils/convertToGB/convertToGB';
-import { convertToKB } from '../../../utils/convertToKB/convertToKB';
-import { convertToTB } from '../../../utils/convertToTB/convertToTB';
-import { convertToMB } from '../../../utils/convertToMB/convertToMB';
-const BarChart = ({ data, isYaxisSticky = false, barWidth, height, barGap = 20, colors = [], xAxisLabel, isTruncateText = true, yAxisLabel, padding = 20, yAxisDivisions = 5, barBorderRadius = 0, legend = true, showXAxisLabels = true, icons = [], iconSize, legendPosition = 'bottom', legendGap = 5, extendBarChartRightWidth = 0, isYAxisValuePercentage = false, selectedBar, setSelectedBar, onSelectedBar = (_label) => { }, totalLabel = 'Total Execution', customToolTip = false, isOnclick = false, isDashboardVersions, type = '', isMemory, tooltipWidth = 'fit-content', }) => {
-    const tooltipRef = useRef(null);
-    const [hoveredLegendIndex, setHoveredLegendIndex] = useState(null);
-    const [isHoveringBar, setIsHoveringBar] = useState(false);
-    useEffect(() => {
-        const handleScroll = () => {
-            const tooltip = tooltipRef.current;
-            if (tooltip && isHoveringBar) {
-                tooltip.style.display = 'none';
-            }
-        };
-        window.addEventListener('scroll', handleScroll, true);
-        return () => window.removeEventListener('scroll', handleScroll, true);
-    }, [isHoveringBar]);
-    const getHighestPriorityMemoryUnit = (data) => {
-        const priority = ['TB', 'GB', 'MB', 'KB'];
-        for (const unit of priority) {
-            const found = data.some((item) => typeof item.value === 'string' &&
-                item.value.toLowerCase().includes(unit.toLowerCase()));
-            if (found) {
-                return unit;
-            }
-        }
-        return null;
-    };
-    const unit = getHighestPriorityMemoryUnit(data);
-    const normalizedData = data.map((item) => {
-        if (typeof item.value === 'string') {
-            let normalizedValue = 0;
-            if (type === 'memory') {
-                normalizedValue = convertToGB(item.value);
-            }
-            else if (isMemory) {
-                switch (unit) {
-                    case 'TB':
-                        normalizedValue = convertToTB(item.value);
-                        break;
-                    case 'GB':
-                        normalizedValue = convertToGB(item.value);
-                        break;
-                    case 'MB':
-                        normalizedValue = convertToMB(item.value);
-                        break;
-                    case 'KB':
-                        normalizedValue = convertToKB(item.value);
-                        break;
-                }
-            }
-            else {
-                normalizedValue = parseFloat(item.value);
-            }
-            return {
-                ...item,
-                normalizedValue,
-            };
-        }
-        return {
-            ...item,
-            normalizedValue: item.value,
-        };
-    });
-    let totalBytes = 0;
-    if (type === 'memory') {
-        totalBytes = data.reduce((acc, item) => {
-            if (typeof item.value === 'string') {
-                return acc + convertToBytes(item.value);
-            }
-            else {
-                return acc + Number(item.value) * 1024 * 1024 * 1024;
-            }
-        }, 0);
-    }
-    const totalMB = totalBytes / (1024 * 1024);
-    const totalMemoryDisplay = totalMB < 1024
-        ? `${Math.round(totalMB)} mb`
-        : `${(totalMB / 1024).toFixed(1)} gb`;
-    let maxValue = Math.max(...normalizedData.map((item) => item.normalizedValue));
-    if (type === 'memory') {
-        maxValue = Math.max(maxValue, 1);
-    }
-    else {
-        maxValue = Math.max(maxValue, yAxisDivisions);
-    }
-    const topPadding = 40;
-    const leftPadding = 40;
-    const totalBarWidth = normalizedData.length * barWidth + (normalizedData.length - 1) * barGap;
-    const chartWidth = totalBarWidth +
-        (isYaxisSticky ? leftPadding : leftPadding * 2 + 10) +
-        extendBarChartRightWidth;
-    const id = Date.now();
-    const renderGradients = (gradients) => {
-        return gradients
-            .filter((gradient) => gradient.length > 1)
-            .map((gradient, index) => (_jsx("defs", { children: _jsx("linearGradient", { id: `gradient-${id}-${type}-${index}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: gradient.map((color, i) => (_jsx("stop", { offset: `${(i / (gradient.length - 1)) * 100}%`, stopColor: color }, `${index}-${i}`))) }) }, index)));
-    };
-    const getFillColor = (index) => {
-        if (!colors.length)
-            return 'grey';
-        const colorGroup = colors[index % colors.length];
-        return colorGroup?.length === 1
-            ? colorGroup[0]
-            : `url(#gradient-${id}-${type}-${index % colors.length})`;
-    };
-    const handleMouseEnter = (label, value, id, percent, versions) => {
-        setIsHoveringBar(true);
-        const tooltip = tooltipRef.current;
-        if (tooltip) {
-            tooltip.style.display = 'block';
-            if (customToolTip) {
-                tooltip.innerHTML = `<div>
-          <div><Typography fontWeight='semi-bold'>${label}</Typography></div>
-          <div><Typography>${id ? id : ''}</Typography></div>
-          <div><Typography>${totalLabel} : ${value} ${percent ? '(' + percent + '%)' : ''}</Typography></div>
-        </div>`;
-            }
-            else if (isDashboardVersions) {
-                const versionsList = versions ? versions.join(', ') : '';
-                tooltip.innerHTML = `
-        <div>
-          <div><Typography>${totalLabel} : ${value}</Typography></div>
-          ${versionsList
-                    ? `<div><Typography>Versions : ${versionsList}</Typography></div>`
-                    : ''}
-        </div>`;
-            }
-            else {
-                if (type === 'memory') {
-                    tooltip.innerHTML = `<strong>${label}</strong>: ${value} / ${totalMemoryDisplay}`;
-                }
-                else {
-                    tooltip.innerHTML = `<strong>${label}</strong>: ${value} ${isYAxisValuePercentage ? '%' : ''}`;
-                }
-            }
-        }
-    };
-    const handleMouseMove = (e, isLastBar = false) => {
-        const tooltip = tooltipRef.current;
-        if (tooltip) {
-            const rect = tooltip.parentElement?.getBoundingClientRect();
-            const xOffset = window.scrollX;
-            const yOffset = window.scrollY;
-            const isSingleBar = normalizedData?.length === 1;
-            const tooltipX = isSingleBar || !isLastBar
-                ? e.clientX - (rect?.left || 0) + xOffset + 10
-                : e.clientX - (rect?.left || 0) + xOffset - tooltip?.offsetWidth - 10;
-            const tooltipY = e.clientY - (rect?.top || 0) + yOffset - 20;
-            tooltip.style.left = `${tooltipX}px`;
-            tooltip.style.top = `${tooltipY}px`;
-        }
-    };
-    const handleMouseLeave = () => {
-        setIsHoveringBar(false);
-        const tooltip = tooltipRef.current;
-        if (tooltip) {
-            tooltip.style.display = 'none';
-        }
-    };
-    const handleSelectLabel = (label) => {
-        if (setSelectedBar) {
-            setSelectedBar(label);
-            if (isOnclick) {
-                onSelectedBar(label);
-            }
-        }
-    };
-    const handleXaxisMouseEnter = (item) => {
-        if (isTruncateText) {
-            const displayedText = truncateText(item, 10);
-            const isActuallyTruncated = displayedText.endsWith('...');
-            if (isActuallyTruncated) {
-                const tooltip = tooltipRef.current;
-                if (tooltip) {
-                    tooltip.style.display = 'block';
-                    tooltip.innerHTML = item;
-                }
-            }
-        }
-    };
-    const handleXaxisMouseMove = (e, item, index) => {
-        if (isTruncateText) {
-            const displayedText = truncateText(item, 10);
-            const isActuallyTruncated = displayedText.endsWith('...');
-            if (isActuallyTruncated) {
-                handleMouseMove(e, index === normalizedData.length - 1);
-            }
-        }
-    };
-    const renderYAxis = () => (_jsxs(_Fragment, { children: [Array.from({ length: yAxisDivisions + 1 }).map((_, i) => {
-                const yAxisLabelYPosition = height - (i / yAxisDivisions) * height + topPadding + 4;
-                const yAxisValue = (i * maxValue) / yAxisDivisions;
-                const formattedValue = type === 'memory'
-                    ? yAxisValue.toFixed(1)
-                    : isYAxisValuePercentage
-                        ? `${yAxisValue.toFixed(0).padStart(2, '0')}%`
-                        : yAxisValue.toFixed(0).padStart(2, '0');
-                return (_jsx("text", { x: 50, y: yAxisLabelYPosition, fill: "black", textAnchor: "middle", className: "ff-bar-chart-labels", children: formattedValue }, i));
-            }), yAxisLabel && (_jsx("text", { x: -(height / 2 + 35), y: isYaxisSticky ? 20 : leftPadding - 30, transform: "rotate(-90)", fill: "black", textAnchor: "middle", alignmentBaseline: "middle", className: "ff-bar-chart-labels", children: yAxisLabel }))] }));
-    return (_jsxs("div", { className: "ff-bar-chart-container", children: [_jsx("div", { ref: tooltipRef, className: "ff-bar-chart-tooltip", style: { width: tooltipWidth } }), legend && legendPosition === 'top' && (_jsx("div", { className: "ff-legend-container", children: _jsx("div", { className: "ff-bar-chart-legend", style: { gap: `${legendGap}px` }, children: normalizedData.map((item, index) => (_jsxs("div", { className: "ff-bar-chart-legend-item", onMouseEnter: () => setHoveredLegendIndex(index), onMouseLeave: () => setHoveredLegendIndex(null), children: [icons[index] && typeof icons[index] === 'string' ? (_jsx(Icon, { name: String(icons[index]), width: iconSize, height: iconSize })) : (_jsx("span", { className: "ff-bar-chart-legend-item-circle", style: {
-                                    backgroundColor: colors[index % colors.length]?.[0] || 'grey',
-                                } })), _jsx(Typography, { as: "div", fontSize: 10, fontWeight: "regular", className: "ff-legend-label", children: item.label })] }, item.label))) }) })), isYaxisSticky ? (_jsxs("div", { className: "ff-bar-chart-wrapper", children: [_jsx("div", { className: "ff-y-axis", children: _jsx("svg", { width: 60, height: height + topPadding + (xAxisLabel ? 20 : 0), children: renderYAxis() }) }), _jsx("div", { className: "ff-chart-scrollable", children: _jsxs("svg", { width: chartWidth, height: height +
-                                topPadding +
-                                5 +
-                                (showXAxisLabels ? 20 : 0) +
-                                (xAxisLabel ? 20 : 0), children: [Array.isArray(colors) &&
-                                    colors.length > 0 &&
-                                    renderGradients(colors), normalizedData.map((item, index) => {
-                                    const computedBarHeight = (item.normalizedValue / maxValue) * height;
-                                    const minBarHeight = 2;
-                                    const barHeight = item.normalizedValue < 1 ? minBarHeight : computedBarHeight;
-                                    const barX = index * (barWidth + barGap) + padding;
-                                    const barY = height - barHeight + topPadding;
-                                    const iconWidth = iconSize || 20;
-                                    const iconX = barX + barWidth / 2 - iconWidth / 2;
-                                    const iconY = barY - iconWidth;
-                                    const isSelected = selectedBar === item.label;
-                                    const isHovered = hoveredLegendIndex === index;
-                                    return (_jsxs("g", { children: [icons[index] && typeof icons[index] === 'string' && (_jsx("g", { onMouseEnter: () => handleMouseEnter(item.label, type === 'memory'
-                                                    ? item.value
-                                                    : item.normalizedValue, item.id, item.percent, item.versions), onMouseMove: (e) => handleMouseMove(e, index === normalizedData.length - 1), onMouseLeave: handleMouseLeave, children: _jsx(Icon, { name: String(icons[index]), x: String(iconX), y: String(iconY), width: iconWidth, height: iconWidth, chartIcon: true }) })), _jsx("rect", { x: barX, y: barY, width: barWidth, height: barHeight, fill: getFillColor(index), rx: barBorderRadius, ry: barBorderRadius, style: {
-                                                    strokeWidth: isSelected ? 3 : 0,
-                                                    opacity: hoveredLegendIndex === null || isHovered ? 1 : 0.3,
-                                                    cursor: isOnclick ? 'pointer' : 'default',
-                                                    transition: 'opacity 0.5s ease',
-                                                }, onMouseEnter: () => handleMouseEnter(item.label, type === 'memory' || isMemory
-                                                    ? item.value
-                                                    : item.normalizedValue, item.id, item.percent, item.versions), onMouseMove: (e) => handleMouseMove(e, index === normalizedData.length - 1), onMouseLeave: handleMouseLeave, onClick: () => handleSelectLabel(item.label) }), isSelected && isOnclick && (_jsx("rect", { x: barX, y: barY, width: barWidth, height: barHeight, fill: "var(--select-chart-highlight-color)", rx: barBorderRadius, ry: barBorderRadius, onMouseEnter: () => handleMouseEnter(item.label, type === 'memory'
-                                                    ? item.value
-                                                    : item.normalizedValue, item.id, item.percent, item.versions), onMouseMove: (e) => handleMouseMove(e, index === normalizedData.length - 1), onMouseLeave: handleMouseLeave })), showXAxisLabels && (_jsx("text", { onMouseEnter: () => handleXaxisMouseEnter(item.label), onMouseMove: (e) => handleXaxisMouseMove(e, item.label, index), onMouseLeave: handleMouseLeave, x: index === 0
-                                                    ? barX
-                                                    : index === normalizedData.length - 1
-                                                        ? barX + barWidth
-                                                        : barX + barWidth / 2, y: height + topPadding + 15, className: "ff-bar-chart-labels", fill: isSelected ? 'var(--brand-color)' : 'black', fontWeight: isSelected ? 'bold' : 'normal', textAnchor: index === 0 ? 'start' : 'middle', children: isTruncateText
-                                                    ? truncateText(item.label, 10)
-                                                    : item.label }))] }, index));
-                                }), _jsx("line", { x1: isYaxisSticky ? 0 : padding, y1: height + topPadding, x2: chartWidth, y2: height + topPadding, stroke: "#D9D9D9", strokeWidth: "1" }), !isYaxisSticky && xAxisLabel && (_jsx("text", { x: chartWidth / 2, y: height + topPadding + (showXAxisLabels ? 40 : 20), fontSize: "12", fill: "black", textAnchor: "middle", className: "ff-bar-chart-labels", children: xAxisLabel }))] }) }), _jsx("div", { className: "ff-bar-chart-x-axis-label", children: xAxisLabel })] })) : (_jsx("div", { children: _jsxs("svg", { width: chartWidth, height: height +
-                        topPadding +
-                        5 +
-                        (showXAxisLabels ? 20 : 0) +
-                        (xAxisLabel ? 20 : 0), children: [Array.isArray(colors) &&
-                            colors.length > 0 &&
-                            renderGradients(colors), Array.from({ length: yAxisDivisions + 1 }).map((_, i) => {
-                            const yAxisLabelYPosition = height - (i / yAxisDivisions) * height + topPadding + 4;
-                            const yAxisValue = (i * maxValue) / yAxisDivisions;
-                            const formattedValue = type === 'memory'
-                                ? yAxisValue.toFixed(1)
-                                : isYAxisValuePercentage
-                                    ? `${yAxisValue.toFixed(0).padStart(2, '0')}%`
-                                    : yAxisValue.toFixed(0).padStart(2, '0');
-                            return (_jsx("text", { x: leftPadding, y: yAxisLabelYPosition, fill: "black", textAnchor: "middle", className: "ff-bar-chart-labels", children: formattedValue }, i));
-                        }), normalizedData.map((item, index) => {
-                            const computedBarHeight = (item.normalizedValue / maxValue) * height;
-                            const minBarHeight = 2;
-                            const barHeight = item.normalizedValue < 1 ? minBarHeight : computedBarHeight;
-                            const barX = index * (barWidth + barGap) + leftPadding + padding;
-                            const barY = height - barHeight + topPadding;
-                            const iconWidth = iconSize || 20;
-                            const iconX = barX + barWidth / 2 - iconWidth / 2;
-                            const iconY = barY - iconWidth;
-                            const isSelected = selectedBar === item.label;
-                            const isHovered = hoveredLegendIndex === index;
-                            return (_jsxs("g", { children: [icons[index] && typeof icons[index] === 'string' && (_jsx("g", { onMouseEnter: () => handleMouseEnter(item.label, type === 'memory' ? item.value : item.normalizedValue, item.id, item.percent, item.versions), onMouseMove: (e) => handleMouseMove(e, index === normalizedData.length - 1), onMouseLeave: handleMouseLeave, children: _jsx(Icon, { name: String(icons[index]), x: String(iconX), y: String(iconY), width: iconWidth, height: iconWidth, chartIcon: true }) })), _jsx("rect", { x: barX, y: barY, width: barWidth, height: barHeight, fill: getFillColor(index), rx: barBorderRadius, ry: barBorderRadius, style: {
-                                            strokeWidth: isSelected ? 3 : 0,
-                                            opacity: hoveredLegendIndex === null || isHovered ? 1 : 0.3,
-                                            cursor: isOnclick ? 'pointer' : 'default',
-                                            transition: 'opacity 0.5s ease',
-                                        }, onMouseEnter: () => handleMouseEnter(item.label, type === 'memory' || isMemory
-                                            ? item.value
-                                            : item.normalizedValue, item.id, item.percent, item.versions), onMouseMove: (e) => handleMouseMove(e, index === normalizedData.length - 1), onMouseLeave: handleMouseLeave, onClick: () => handleSelectLabel(item.label) }), isSelected && isOnclick && (_jsx("rect", { x: barX, y: barY, width: barWidth, height: barHeight, fill: "var(--select-chart-highlight-color)", rx: barBorderRadius, ry: barBorderRadius, onMouseEnter: () => handleMouseEnter(item.label, type === 'memory' ? item.value : item.normalizedValue, item.id, item.percent, item.versions), onMouseMove: (e) => handleMouseMove(e, index === normalizedData.length - 1), onMouseLeave: handleMouseLeave })), showXAxisLabels && (_jsx("g", { children: _jsx("text", { x: index === 0
-                                                ? barX
-                                                : index === normalizedData.length - 1
-                                                    ? barX + barWidth
-                                                    : barX + barWidth / 2, y: height + topPadding + 15, className: "ff-bar-chart-labels", fill: isSelected ? 'var(--brand-color)' : 'black', fontWeight: isSelected ? 'bold' : 'normal', textAnchor: index === 0 ? 'start' : 'middle', onMouseEnter: () => handleXaxisMouseEnter(item.label), onMouseMove: (e) => handleXaxisMouseMove(e, item.label, index), onMouseLeave: handleMouseLeave, children: isTruncateText
-                                                ? truncateText(item.label, 10)
-                                                : item.label }) }))] }, index));
-                        }), _jsx("line", { x1: 60, y1: height + topPadding, x2: chartWidth, y2: height + topPadding, stroke: "#D9D9D9", strokeWidth: "1" }), xAxisLabel && (_jsx("text", { x: chartWidth / 2, y: height + topPadding + (showXAxisLabels ? 40 : 20), fontSize: "12", fill: "black", textAnchor: "middle", className: "ff-bar-chart-labels", children: xAxisLabel })), yAxisLabel && (_jsx("text", { x: -(height / 2 + 35), y: leftPadding - 30, transform: "rotate(-90)", fill: "black", textAnchor: "middle", alignmentBaseline: "middle", className: "ff-bar-chart-labels", children: yAxisLabel }))] }) })), legend && legendPosition === 'bottom' && (_jsx("div", { className: "ff-legend-container", children: _jsx("div", { className: "ff-bar-chart-legend", style: { gap: `${legendGap}px` }, children: data.map((item, index) => (_jsxs("div", { className: "ff-bar-chart-legend-item", onMouseEnter: () => setHoveredLegendIndex(index), onMouseLeave: () => setHoveredLegendIndex(null), children: [icons[index] && typeof icons[index] === 'string' ? (_jsx(Icon, { name: String(icons[index]), width: iconSize, height: iconSize })) : (_jsx("span", { className: "ff-bar-chart-legend-item-circle", style: {
-                                    backgroundColor: colors[index % colors.length]?.[0] || 'grey',
-                                } })), _jsx("div", { children: _jsx(Typography, { as: "div", fontSize: 10, fontWeight: "regular", className: "ff-legend-label", children: item.label }) })] }, item.label))) }) }))] }));
-};
-export default BarChart;
-//# sourceMappingURL=BarChart.js.map
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{useRef as r,useState as a,useEffect as n}from"react";import"./BarChart.scss.js";import o from"../../Typography/Typography.js";import i from"../../Icon/Icon.js";import{truncateText as s}from"../../../utils/truncateText/truncateText.js";import{convertToBytes as c}from"../../../utils/convertToBytes/convertToBytes.js";import{convertToGB as d}from"../../../utils/convertToGB/convertToGB.js";import{convertToKB as h}from"../../../utils/convertToKB/convertToKB.js";import{convertToTB as m}from"../../../utils/convertToTB/convertToTB.js";import{convertToMB as f}from"../../../utils/convertToMB/convertToMB.js";const g=({data:g,isYaxisSticky:u=!1,barWidth:y,height:p,barGap:v=20,colors:b=[],xAxisLabel:x,isTruncateText:M=!0,yAxisLabel:T,padding:$=20,yAxisDivisions:B=5,barBorderRadius:w=0,legend:k=!0,showXAxisLabels:N=!0,icons:L=[],iconSize:S,legendPosition:A="bottom",legendGap:z=5,extendBarChartRightWidth:V=0,isYAxisValuePercentage:W=!1,selectedBar:E,setSelectedBar:j,onSelectedBar:C=e=>{},totalLabel:D="Total Execution",customToolTip:F=!1,isOnclick:G=!1,isDashboardVersions:H,type:I="",isMemory:K,tooltipWidth:X="fit-content"})=>{const Y=r(null),[R,P]=a(null),[O,q]=a(!1);n(()=>{const e=()=>{const e=Y.current;e&&O&&(e.style.display="none")};return window.addEventListener("scroll",e,!0),()=>window.removeEventListener("scroll",e,!0)},[O]);const J=(e=>{const t=["TB","GB","MB","KB"];for(const l of t){if(e.some(e=>"string"==typeof e.value&&e.value.toLowerCase().includes(l.toLowerCase())))return l}return null})(g),Q=g.map(e=>{if("string"==typeof e.value){let t=0;if("memory"===I)t=d(e.value);else if(K)switch(J){case"TB":t=m(e.value);break;case"GB":t=d(e.value);break;case"MB":t=f(e.value);break;case"KB":t=h(e.value)}else t=parseFloat(e.value);return{...e,normalizedValue:t}}return{...e,normalizedValue:e.value}});let U=0;"memory"===I&&(U=g.reduce((e,t)=>"string"==typeof t.value?e+c(t.value):e+1024*Number(t.value)*1024*1024,0));const Z=U/1048576,_=Z<1024?`${Math.round(Z)} mb`:`${(Z/1024).toFixed(1)} gb`;let ee=Math.max(...Q.map(e=>e.normalizedValue));ee="memory"===I?Math.max(ee,1):Math.max(ee,B);const te=40,le=40,re=Q.length*y+(Q.length-1)*v+(u?le:90)+V,ae=Date.now(),ne=e=>e.filter(e=>e.length>1).map((e,l)=>t("defs",{children:t("linearGradient",{id:`gradient-${ae}-${I}-${l}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:e.map((r,a)=>t("stop",{offset:a/(e.length-1)*100+"%",stopColor:r},`${l}-${a}`))})},l)),oe=e=>{if(!b.length)return"grey";const t=b[e%b.length];return 1===t?.length?t[0]:`url(#gradient-${ae}-${I}-${e%b.length})`},ie=(e,t,l,r,a)=>{q(!0);const n=Y.current;if(n)if(n.style.display="block",F)n.innerHTML=`<div>\n          <div><Typography fontWeight='semi-bold'>${e}</Typography></div>\n          <div><Typography>${l||""}</Typography></div>\n          <div><Typography>${D} : ${t} ${r?"("+r+"%)":""}</Typography></div>\n        </div>`;else if(H){const e=a?a.join(", "):"";n.innerHTML=`\n        <div>\n          <div><Typography>${D} : ${t}</Typography></div>\n          ${e?`<div><Typography>Versions : ${e}</Typography></div>`:""}\n        </div>`}else n.innerHTML="memory"===I?`<strong>${e}</strong>: ${t} / ${_}`:`<strong>${e}</strong>: ${t} ${W?"%":""}`},se=(e,t=!1)=>{const l=Y.current;if(l){const r=l.parentElement?.getBoundingClientRect(),a=window.scrollX,n=window.scrollY,o=1===Q?.length||!t?e.clientX-(r?.left||0)+a+10:e.clientX-(r?.left||0)+a-l?.offsetWidth-10,i=e.clientY-(r?.top||0)+n-20;l.style.left=`${o}px`,l.style.top=`${i}px`}},ce=()=>{q(!1);const e=Y.current;e&&(e.style.display="none")},de=e=>{j&&(j(e),G&&C(e))},he=e=>{if(M){if(s(e,10).endsWith("...")){const t=Y.current;t&&(t.style.display="block",t.innerHTML=e)}}},me=(e,t,l)=>{if(M){s(t,10).endsWith("...")&&se(e,l===Q.length-1)}};return e("div",{className:"ff-bar-chart-container",children:[t("div",{ref:Y,className:"ff-bar-chart-tooltip",style:{width:X}}),k&&"top"===A&&t("div",{className:"ff-legend-container",children:t("div",{className:"ff-bar-chart-legend",style:{gap:`${z}px`},children:Q.map((l,r)=>e("div",{className:"ff-bar-chart-legend-item",onMouseEnter:()=>P(r),onMouseLeave:()=>P(null),children:[L[r]&&"string"==typeof L[r]?t(i,{name:String(L[r]),width:S,height:S}):t("span",{className:"ff-bar-chart-legend-item-circle",style:{backgroundColor:b[r%b.length]?.[0]||"grey"}}),t(o,{as:"div",fontSize:10,fontWeight:"regular",className:"ff-legend-label",children:l.label})]},l.label))})}),u?e("div",{className:"ff-bar-chart-wrapper",children:[t("div",{className:"ff-y-axis",children:t("svg",{width:60,height:p+te+(x?20:0),children:e(l,{children:[Array.from({length:B+1}).map((e,l)=>{const r=p-l/B*p+te+4,a=l*ee/B,n="memory"===I?a.toFixed(1):W?`${a.toFixed(0).padStart(2,"0")}%`:a.toFixed(0).padStart(2,"0");return t("text",{x:50,y:r,fill:"black",textAnchor:"middle",className:"ff-bar-chart-labels",children:n},l)}),T&&t("text",{x:-(p/2+35),y:u?20:10,transform:"rotate(-90)",fill:"black",textAnchor:"middle",alignmentBaseline:"middle",className:"ff-bar-chart-labels",children:T})]})})}),t("div",{className:"ff-chart-scrollable",children:e("svg",{width:re,height:p+te+5+(N?20:0)+(x?20:0),children:[Array.isArray(b)&&b.length>0&&ne(b),Q.map((l,r)=>{const a=l.normalizedValue/ee*p,n=l.normalizedValue<1?2:a,o=r*(y+v)+$,c=p-n+te,d=S||20,h=o+y/2-d/2,m=c-d,f=E===l.label,g=R===r;return e("g",{children:[L[r]&&"string"==typeof L[r]&&t("g",{onMouseEnter:()=>ie(l.label,"memory"===I?l.value:l.normalizedValue,l.id,l.percent,l.versions),onMouseMove:e=>se(e,r===Q.length-1),onMouseLeave:ce,children:t(i,{name:String(L[r]),x:String(h),y:String(m),width:d,height:d,chartIcon:!0})}),t("rect",{x:o,y:c,width:y,height:n,fill:oe(r),rx:w,ry:w,style:{strokeWidth:f?3:0,opacity:null===R||g?1:.3,cursor:G?"pointer":"default",transition:"opacity 0.5s ease"},onMouseEnter:()=>ie(l.label,"memory"===I||K?l.value:l.normalizedValue,l.id,l.percent,l.versions),onMouseMove:e=>se(e,r===Q.length-1),onMouseLeave:ce,onClick:()=>de(l.label)}),f&&G&&t("rect",{x:o,y:c,width:y,height:n,fill:"var(--select-chart-highlight-color)",rx:w,ry:w,onMouseEnter:()=>ie(l.label,"memory"===I?l.value:l.normalizedValue,l.id,l.percent,l.versions),onMouseMove:e=>se(e,r===Q.length-1),onMouseLeave:ce}),N&&t("text",{onMouseEnter:()=>he(l.label),onMouseMove:e=>me(e,l.label,r),onMouseLeave:ce,x:0===r?o:r===Q.length-1?o+y:o+y/2,y:p+te+15,className:"ff-bar-chart-labels",fill:f?"var(--brand-color)":"black",fontWeight:f?"bold":"normal",textAnchor:0===r?"start":"middle",children:M?s(l.label,10):l.label})]},r)}),t("line",{x1:u?0:$,y1:p+te,x2:re,y2:p+te,stroke:"#D9D9D9",strokeWidth:"1"}),!u&&x&&t("text",{x:re/2,y:p+te+(N?40:20),fontSize:"12",fill:"black",textAnchor:"middle",className:"ff-bar-chart-labels",children:x})]})}),t("div",{className:"ff-bar-chart-x-axis-label",children:x})]}):t("div",{children:e("svg",{width:re,height:p+te+5+(N?20:0)+(x?20:0),children:[Array.isArray(b)&&b.length>0&&ne(b),Array.from({length:B+1}).map((e,l)=>{const r=p-l/B*p+te+4,a=l*ee/B,n="memory"===I?a.toFixed(1):W?`${a.toFixed(0).padStart(2,"0")}%`:a.toFixed(0).padStart(2,"0");return t("text",{x:le,y:r,fill:"black",textAnchor:"middle",className:"ff-bar-chart-labels",children:n},l)}),Q.map((l,r)=>{const a=l.normalizedValue/ee*p,n=l.normalizedValue<1?2:a,o=r*(y+v)+le+$,c=p-n+te,d=S||20,h=o+y/2-d/2,m=c-d,f=E===l.label,g=R===r;return e("g",{children:[L[r]&&"string"==typeof L[r]&&t("g",{onMouseEnter:()=>ie(l.label,"memory"===I?l.value:l.normalizedValue,l.id,l.percent,l.versions),onMouseMove:e=>se(e,r===Q.length-1),onMouseLeave:ce,children:t(i,{name:String(L[r]),x:String(h),y:String(m),width:d,height:d,chartIcon:!0})}),t("rect",{x:o,y:c,width:y,height:n,fill:oe(r),rx:w,ry:w,style:{strokeWidth:f?3:0,opacity:null===R||g?1:.3,cursor:G?"pointer":"default",transition:"opacity 0.5s ease"},onMouseEnter:()=>ie(l.label,"memory"===I||K?l.value:l.normalizedValue,l.id,l.percent,l.versions),onMouseMove:e=>se(e,r===Q.length-1),onMouseLeave:ce,onClick:()=>de(l.label)}),f&&G&&t("rect",{x:o,y:c,width:y,height:n,fill:"var(--select-chart-highlight-color)",rx:w,ry:w,onMouseEnter:()=>ie(l.label,"memory"===I?l.value:l.normalizedValue,l.id,l.percent,l.versions),onMouseMove:e=>se(e,r===Q.length-1),onMouseLeave:ce}),N&&t("g",{children:t("text",{x:0===r?o:r===Q.length-1?o+y:o+y/2,y:p+te+15,className:"ff-bar-chart-labels",fill:f?"var(--brand-color)":"black",fontWeight:f?"bold":"normal",textAnchor:0===r?"start":"middle",onMouseEnter:()=>he(l.label),onMouseMove:e=>me(e,l.label,r),onMouseLeave:ce,children:M?s(l.label,10):l.label})})]},r)}),t("line",{x1:60,y1:p+te,x2:re,y2:p+te,stroke:"#D9D9D9",strokeWidth:"1"}),x&&t("text",{x:re/2,y:p+te+(N?40:20),fontSize:"12",fill:"black",textAnchor:"middle",className:"ff-bar-chart-labels",children:x}),T&&t("text",{x:-(p/2+35),y:10,transform:"rotate(-90)",fill:"black",textAnchor:"middle",alignmentBaseline:"middle",className:"ff-bar-chart-labels",children:T})]})}),k&&"bottom"===A&&t("div",{className:"ff-legend-container",children:t("div",{className:"ff-bar-chart-legend",style:{gap:`${z}px`},children:g.map((l,r)=>e("div",{className:"ff-bar-chart-legend-item",onMouseEnter:()=>P(r),onMouseLeave:()=>P(null),children:[L[r]&&"string"==typeof L[r]?t(i,{name:String(L[r]),width:S,height:S}):t("span",{className:"ff-bar-chart-legend-item-circle",style:{backgroundColor:b[r%b.length]?.[0]||"grey"}}),t("div",{children:t(o,{as:"div",fontSize:10,fontWeight:"regular",className:"ff-legend-label",children:l.label})})]},l.label))})})]})};export{g as default};

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

@@ -0,0 +1 @@
+import i from"../../../node_modules/style-inject/dist/style-inject.es.js";i(".fontXs{font-family:Poppins;font-size:10px}.ff-bar-chart-labels,.ff-bar-chart-tooltip,.ff-bar-chart-x-axis-label,.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}.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-bar-chart-container{align-items:center;display:flex;flex-direction:column;max-width:100%;position:relative}.ff-bar-chart-container svg{display:block}.ff-bar-chart-wrapper{display:flex;width:100%}.ff-y-axis{background:var(--background-color);left:0;position:sticky;z-index:10}.ff-y-axis svg{display:block}.ff-chart-scrollable{flex:1;overflow-x:auto;overflow-y:hidden}.ff-chart-scrollable svg{display:block}.ff-legend-container{display:flex;justify-content:flex-end;padding-right:10px;width:100%}.ff-legend-container .ff-bar-chart-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;width:290px}.ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item{align-items:center;display:flex}.ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle{border-radius:50%;display:inline-block;height:12px;margin-right:5px;width:12px}.ff-legend-container .ff-bar-chart-legend .ff-legend-label{margin-left:5px}.ff-bar-chart-labels{color:var(--text-color)}.ff-bar-chart-x-axis-label{bottom:15px;position:absolute;text-align:center;width:100%}.ff-bar-chart-tooltip{background-color:var(--tooltip-bg-color);border-radius:4px;color:var(--primary-icon-color);display:none;font-weight:600;padding:5px 10px;pointer-events:none;position:absolute;z-index:20}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhckNoYXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsUUFDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLDhFQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsZ0JBSkUsbUJBT0YsQ0FIQSxRQUVFLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxpQkFKRSxtQkFPRixDQUhBLFNBRUUsY0FDRixDQUVBLGFBQ0UsbUJBQXNCLENBQ3RCLGFBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsd0JBSUUsa0JBQW1CLENBRm5CLFlBQWEsQ0FDYixxQkFBc0IsQ0FFdEIsY0FBZSxDQUpmLGlCQUtGLENBQ0EsNEJBQ0UsYUFDRixDQUVBLHNCQUNFLFlBQWEsQ0FDYixVQUNGLENBRUEsV0FJRSxrQ0FBbUMsQ0FGbkMsTUFBTyxDQURQLGVBQWdCLENBRWhCLFVBRUYsQ0FDQSxlQUNFLGFBQ0YsQ0FFQSxxQkFHRSxNQUFPLENBRlAsZUFBZ0IsQ0FDaEIsaUJBRUYsQ0FDQSx5QkFDRSxhQUNGLENBRUEscUJBRUUsWUFBYSxDQUNiLHdCQUF5QixDQUN6QixrQkFBbUIsQ0FIbkIsVUFJRixDQUNBLDBDQUVFLFlBQWEsQ0FFYixjQUFlLENBRGYsd0JBQXlCLENBRnpCLFdBSUYsQ0FDQSxvRUFFRSxrQkFBbUIsQ0FEbkIsWUFFRixDQUNBLHFHQUtFLGlCQUFrQixDQUpsQixvQkFBcUIsQ0FFckIsV0FBWSxDQUNaLGdCQUFpQixDQUZqQixVQUlGLENBQ0EsMkRBQ0UsZUFDRixDQUVBLHFCQUNFLHVCQUNGLENBRUEsMkJBRUUsV0FBWSxDQURaLGlCQUFrQixDQUdsQixpQkFBa0IsQ0FEbEIsVUFFRixDQUVBLHNCQUlFLHdDQUF5QyxDQUV6QyxpQkFBa0IsQ0FEbEIsK0JBQWdDLENBSmhDLFlBQWEsQ0FPYixlQUFnQixDQUxoQixnQkFBaUIsQ0FJakIsbUJBQW9CLENBTHBCLGlCQUFrQixDQU9sQixVQUNGIiwiZmlsZSI6IkJhckNoYXJ0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250U20sIC5mZi1iYXItY2hhcnQtbGFiZWxzLCAuZmYtYmFyLWNoYXJ0LXgtYXhpcy1sYWJlbCwgLmZmLWJhci1jaGFydC10b29sdGlwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEycHg7XG59XG5cbi5mb250TWQge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTRweDtcbn1cblxuLmZvbnRMZyB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNnB4O1xufVxuXG4uZm9udFhMIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE4cHg7XG59XG5cbi5mb250MlhsIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDI0cHg7XG59XG5cbi5mb250LXNpemUtOCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiA4cHg7XG59XG5cbi5mb250LXNpemUtMTAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTBweDtcbn1cblxuLmZvbnQtc2l6ZS0yMCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAyMHB4O1xufVxuXG4uZm9udC1zaXplLTMyIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDMycHg7XG59XG5cbi5mb250LXNpemUtODAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogODBweDtcbn1cblxuLmZmLWJhci1jaGFydC1jb250YWluZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1heC13aWR0aDogMTAwJTtcbn1cbi5mZi1iYXItY2hhcnQtY29udGFpbmVyIHN2ZyB7XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uZmYtYmFyLWNoYXJ0LXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLmZmLXktYXhpcyB7XG4gIHBvc2l0aW9uOiBzdGlja3k7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDEwO1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLWNvbG9yKTtcbn1cbi5mZi15LWF4aXMgc3ZnIHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG5cbi5mZi1jaGFydC1zY3JvbGxhYmxlIHtcbiAgb3ZlcmZsb3cteDogYXV0bztcbiAgb3ZlcmZsb3cteTogaGlkZGVuO1xuICBmbGV4OiAxO1xufVxuLmZmLWNoYXJ0LXNjcm9sbGFibGUgc3ZnIHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG5cbi5mZi1sZWdlbmQtY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG59XG4uZmYtbGVnZW5kLWNvbnRhaW5lciAuZmYtYmFyLWNoYXJ0LWxlZ2VuZCB7XG4gIHdpZHRoOiAyOTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgZmxleC13cmFwOiB3cmFwO1xufVxuLmZmLWxlZ2VuZC1jb250YWluZXIgLmZmLWJhci1jaGFydC1sZWdlbmQgLmZmLWJhci1jaGFydC1sZWdlbmQtaXRlbSB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4uZmYtbGVnZW5kLWNvbnRhaW5lciAuZmYtYmFyLWNoYXJ0LWxlZ2VuZCAuZmYtYmFyLWNoYXJ0LWxlZ2VuZC1pdGVtIC5mZi1iYXItY2hhcnQtbGVnZW5kLWl0ZW0tY2lyY2xlIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB3aWR0aDogMTJweDtcbiAgaGVpZ2h0OiAxMnB4O1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xufVxuLmZmLWxlZ2VuZC1jb250YWluZXIgLmZmLWJhci1jaGFydC1sZWdlbmQgLmZmLWxlZ2VuZC1sYWJlbCB7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG59XG5cbi5mZi1iYXItY2hhcnQtbGFiZWxzIHtcbiAgY29sb3I6IHZhcigtLXRleHQtY29sb3IpO1xufVxuXG4uZmYtYmFyLWNoYXJ0LXgtYXhpcy1sYWJlbCB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm90dG9tOiAxNXB4O1xuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4uZmYtYmFyLWNoYXJ0LXRvb2x0aXAge1xuICBkaXNwbGF5OiBub25lO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHBhZGRpbmc6IDVweCAxMHB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10b29sdGlwLWJnLWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLXByaW1hcnktaWNvbi1jb2xvcik7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG4gIHotaW5kZXg6IDIwO1xufSJdfQ== */");