@lunit/oui 2.4.9 → 2.4.10

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { findIndex as _findIndex } from 'lodash';
 import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
-import { parseStringValToNumber } from './AnalysisBar.utils';
+import { parseStringValToNumber, normalizeSegmentWidths } from './AnalysisBar.utils';
 import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
 const Segments = ({ segments, isCutoff }) => {
     if (!segments) {
@@ -18,7 +18,7 @@ const Segments = ({ segments, isCutoff }) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex >= 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
+            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === validSegments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex >= 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
         }) }));
 };
 const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
@@ -26,8 +26,8 @@ const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressi
         throw new Error("The 'componentType' prop is required.");
     if (!expressionLevels.length)
         throw new Error("The 'expressionLevels' prop must contain at least one item.");
-    const validSegments = segments.filter((segment) => segment.width > 0);
-    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: validSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
+    const normalizedSegments = normalizeSegmentWidths(segments, isCutoff);
+    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: normalizedSegments?.[0]?.color === 'jet' })), _jsx(Segments, { segments: normalizedSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                         expressionLevels.map((val, i) => {
                             return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, isCutoff: isCutoff, leftPos: parseStringValToNumber(val) }, i));
                         }), caption && (_jsx(GraphAxisLabel, { label: caption, isCutoff: isCutoff, leftPos: 50 }))] }))] }));

package/dist/presentations/AnalysisBar/AnalysisBar.utils.d.ts

@@ -1,3 +1,16 @@
 export declare function parseStringValToNumber(val: string): number;
 export declare function clampNumericalPercentage(value: number): number;
 export declare function clampBarLabelPosition(value: number): number;
+/**
+ * @description normalizeSegmentWidths is a function that normalizes the width of the segments in the analysis bar.
+ * @param segments - The segments to normalize.
+ * @param isCutoff - Whether the analysis bar is a cutoff.
+ * @returns The normalized segments.
+ */
+export declare function normalizeSegmentWidths(segments: {
+    color: 'jet' | string;
+    width: number;
+}[], isCutoff?: boolean): {
+    color: 'jet' | string;
+    width: number;
+}[];

package/dist/presentations/AnalysisBar/AnalysisBar.utils.js

@@ -16,3 +16,44 @@ export function clampBarLabelPosition(value) {
         return 1;
     return value;
 }
+const round = (value) => Math.round(value * 10) / 10;
+/**
+ * @description normalizeSegmentWidths is a function that normalizes the width of the segments in the analysis bar.
+ * @param segments - The segments to normalize.
+ * @param isCutoff - Whether the analysis bar is a cutoff.
+ * @returns The normalized segments.
+ */
+export function normalizeSegmentWidths(segments, isCutoff) {
+    if (isCutoff)
+        return segments;
+    let validSegments = segments
+        .map((segment) => ({ ...segment, width: round(segment.width) }))
+        .filter((segment) => segment.width > 0);
+    if (validSegments.length === 0)
+        return [];
+    const normalize = (segments) => {
+        const total = segments.reduce((sum, s) => sum + s.width, 0);
+        if (total === 0 || Math.abs(total - 100) < 0.1)
+            return segments;
+        const normalized = segments.map((segment) => ({
+            ...segment,
+            width: round((segment.width / total) * 100),
+        }));
+        const normalizedTotal = normalized.reduce((sum, s) => sum + s.width, 0);
+        const difference = 100 - normalizedTotal;
+        if (normalized.length > 0 && Math.abs(difference) > 0.01) {
+            const lastIndex = normalized.length - 1;
+            normalized[lastIndex] = {
+                ...normalized[lastIndex],
+                width: round(normalized[lastIndex].width + difference),
+            };
+        }
+        return normalized;
+    };
+    validSegments = normalize(validSegments);
+    const filtered = validSegments.filter((segment) => segment.width > 0);
+    if (filtered.length < validSegments.length && filtered.length > 0) {
+        return normalize(filtered);
+    }
+    return filtered;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.9",
+  "version": "2.4.10",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"