@centreon/ui 26.5.0 → 26.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.5.0",
+  "version": "26.5.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -95,6 +95,14 @@ const StackLines = ({
             ? transparency || 80
             : style.areaTransparency;
 
+          const linePartStack = stack.map((stackValue, index) => {
+            if (isNil(timeSeries[index][metric_id])) {
+              return [stackValue[0], null];
+            }
+
+            return stackValue;
+          });
+
           return (
             <g key={`stack-${prop('key', stack)}`}>
               {displayAnchor && (
@@ -140,6 +148,16 @@ const StackLines = ({
                       })
                 }
                 opacity={highlight === false ? 0.3 : 1}
+                stroke="none"
+              />
+              <Shape.LinePath
+                curve={curveType}
+                data={linePartStack}
+                defined={(d) => {
+                  return !isNil(d[1]);
+                }}
+                fill="none"
+                opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}
                 strokeDasharray={getStrokeDashArray({
                   dashLength: style?.dashLength,
@@ -152,6 +170,8 @@ const StackLines = ({
                     ? Math.ceil(formattedLineWidth * 1.3)
                     : formattedLineWidth
                 }
+                x={(d) => xScale(getTime(d.data)) ?? 0}
+                y={(d) => yScale(d[1]) ?? 0}
               />
             </g>
           );

package/src/Graph/common/timeSeries/index.ts

@@ -136,7 +136,9 @@ const toLine = ({
     ...defaultDsData,
     ...(ds_data || {}),
     ds_color_area:
-      ds_data?.ds_color_area ?? ds_data?.ds_color_line ?? defaultDsData.ds_color_line
+      ds_data?.ds_color_area ??
+      ds_data?.ds_color_line ??
+      defaultDsData.ds_color_line
   };
 
   return {

package/src/Listing/Row/Row.tsx

@@ -6,7 +6,6 @@ import { equals, lt, not, pluck } from 'ramda';
 import { memo, useCallback, useEffect, useRef } from 'react';
 
 import { useViewportIntersection } from '../../utils/useViewportIntersection';
-
 import type { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
 type Props = {
@@ -146,7 +145,7 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
 
   useEffect(() => {
     setElement(getFirstCellElement() as HTMLDivElement);
-  }, [getFirstCellElement, setElement]);
+  }, [getFirstCellElement()]);
 
   return (
     <div className="contents w-full" data-is-hovered={isHovered} ref={rowRef}>

package/src/Listing/index.tsx

@@ -45,8 +45,6 @@ import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { ListingHeader } from './Header';
-import ListingRow from './Row/Row';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import type {
   Column,
   ColumnConfiguration,
@@ -55,6 +53,8 @@ import type {
   RowId,
   SortOrder
 } from './models';
+import ListingRow from './Row/Row';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { subItemsPivotsAtom } from './tableAtoms';
 import { labelNoResultFound as defaultLabelNoResultFound } from './translatedLabels';
 import useStyleTable, { useColumnStyle } from './useStyleTable';
@@ -595,7 +595,7 @@ const Listing = <
                     component="div"
                     onMouseLeave={clearHoveredRow}
                   >
-                    {rowsToDisplay.map((row, index) => {
+                    {rowsToDisplay.map((row) => {
                       const isRowSelected = isSelected(row);
                       const isSubItem = allSubItemIds.includes(
                         getSubItemRowId(row)

package/src/utils/useMemoComponent.ts

@@ -21,7 +21,7 @@ interface MemoComponent {
 export const useMemoComponent = ({
   Component,
   memoProps
-}: MemoComponent): JSX.Element =>
-  useMemo(() => Component, [...useDeepCompare(memoProps), Component]);
+}: MemoComponent): ReactElement =>
+  useMemo(() => Component, useDeepCompare(memoProps));
 
 export default useMemoComponent;