@centreon/ui 24.11.23 → 24.11.24

package/package.json

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

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { T, equals, gt, lt } from 'ramda';
@@ -13,6 +13,7 @@ import { HeatMapProps } from './model';
 const gap = 8;
 const maxTileSize = 120;
 const smallestTileSize = 44;
+const toleratedRangeWidth = 10;
 
 const ResponsiveHeatMap = <TData,>({
   width,
@@ -28,6 +29,7 @@ const ResponsiveHeatMap = <TData,>({
   width: number;
 }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
+  const previousTileSize = useRef(0);
 
   const tileSize = useMemo(() => {
     const scaleWidth = scaleLinear({
@@ -44,6 +46,13 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
+    const canUpdateTileSize =
+      Math.abs(tileWidth - previousTileSize.current) > toleratedRangeWidth;
+
+    if (!canUpdateTileSize) {
+      return previousTileSize.current;
+    }
+
     if (
       (lt(height, maxTileSize) ||
         (lt(width, 680) && gt(maxTotalTilesWidth, width))) &&
@@ -60,6 +69,8 @@ const ResponsiveHeatMap = <TData,>({
   }, [width, tiles, height]);
 
   const isSmallestSize = equals(tileSize, smallestTileSize);
+  const isMediumSize = !isSmallestSize && lt(tileSize, 90);
+  previousTileSize.current = tileSize;
 
   if (equals(width, 0)) {
     return null;
@@ -100,7 +111,14 @@ const ResponsiveHeatMap = <TData,>({
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>
-              {children({ backgroundColor, data, id, isSmallestSize })}
+              {children({
+                backgroundColor,
+                data,
+                id,
+                isSmallestSize,
+                tileSize,
+                isMediumSize
+              })}
             </div>
           </Tooltip>
         </Box>

package/src/Graph/HeatMap/model.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 interface Tile<TData> {
   backgroundColor: string;
@@ -11,6 +11,8 @@ interface ChildrenProps<TData> {
   data: TData;
   id: string;
   isSmallestSize: boolean;
+  isMediumSize?: boolean;
+  tileSize?: number;
 }
 
 export interface HeatMapProps<TData> {
@@ -19,7 +21,9 @@ export interface HeatMapProps<TData> {
     backgroundColor,
     id,
     data,
-    isSmallestSize
+    isSmallestSize,
+    tileSize,
+    isMediumSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
   displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;