@centreon/ui 24.6.4 → 24.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.6.4",
+  "version": "24.7.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -12,9 +12,9 @@
     "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
-    "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
+    "cypress:run:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
     "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
-    "cypress:cli": "cypress run --component --browser=chrome",
+    "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
   },
   "sideEffects": false,

package/src/Graph/BarChart/BarChart.tsx

@@ -8,6 +8,7 @@ import 'dayjs/locale/pt';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
+import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
@@ -33,7 +34,7 @@ export interface BarChartProps
   end: string;
   limitLegend?: false | number;
   loading: boolean;
-  orientation: 'vertical' | 'horizontal';
+  orientation: 'vertical' | 'horizontal' | 'auto';
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
@@ -71,30 +72,32 @@ const BarChart = ({
   }
 
   return (
-    <Box
-      ref={lineChartRef}
-      sx={{ height: '100%', overflow: 'hidden', width: '100%' }}
-    >
-      <ParentSize>
-        {({ height: responsiveHeight, width }) => (
-          <ResponsiveBarChart
-            axis={axis}
-            barStyle={barStyle}
-            graphData={adjustedData}
-            graphRef={lineChartRef}
-            header={header}
-            height={height || responsiveHeight}
-            legend={legend}
-            limitLegend={limitLegend}
-            orientation={orientation}
-            thresholdUnit={thresholdUnit}
-            thresholds={thresholds}
-            tooltip={tooltip}
-            width={width}
-          />
-        )}
-      </ParentSize>
-    </Box>
+    <Provider>
+      <Box
+        ref={lineChartRef}
+        sx={{ height: '100%', overflow: 'hidden', width: '100%' }}
+      >
+        <ParentSize>
+          {({ height: responsiveHeight, width }) => (
+            <ResponsiveBarChart
+              axis={axis}
+              barStyle={barStyle}
+              graphData={adjustedData}
+              graphRef={lineChartRef}
+              header={header}
+              height={height || responsiveHeight}
+              legend={legend}
+              limitLegend={limitLegend}
+              orientation={orientation}
+              thresholdUnit={thresholdUnit}
+              thresholds={thresholds}
+              tooltip={tooltip}
+              width={width}
+            />
+          )}
+        </ParentSize>
+      </Box>
+    </Provider>
   );
 };
 

package/src/Graph/BarChart/BarGroup.tsx

@@ -171,6 +171,7 @@ const BarGroup = ({
                   <BarStack
                     barIndex={barGroup.index}
                     barPadding={isHorizontal ? bar.x : bar.y}
+                    barStyle={barStyle}
                     barWidth={isHorizontal ? bar.width : bar.height}
                     isHorizontal={isHorizontal}
                     isTooltipHidden={isTooltipHidden}
@@ -183,6 +184,7 @@ const BarGroup = ({
                   <BarStack
                     barIndex={barGroup.index}
                     barPadding={isHorizontal ? bar.x : bar.y}
+                    barStyle={barStyle}
                     barWidth={isHorizontal ? bar.width : bar.height}
                     isHorizontal={isHorizontal}
                     isTooltipHidden={isTooltipHidden}

package/src/Graph/BarChart/BarStack.tsx

@@ -4,6 +4,7 @@ import { scaleBand } from '@visx/scale';
 import { equals, gt, pick } from 'ramda';
 
 import { useBarStack, UseBarStackProps } from './useBarStack';
+import { BarStyle } from './models';
 
 const xScale = scaleBand<number>({
   domain: [0, 0],
@@ -14,6 +15,7 @@ const xScale = scaleBand<number>({
 interface Props extends Omit<UseBarStackProps, 'xScale'> {
   barIndex: number;
   barPadding: number;
+  barStyle: BarStyle;
   barWidth: number;
   isTooltipHidden: boolean;
 }
@@ -34,7 +36,8 @@ const BarStack = ({
   barWidth,
   barPadding,
   barIndex,
-  isTooltipHidden
+  isTooltipHidden,
+  barStyle
 }: Props): JSX.Element => {
   const {
     BarStackComponent,
@@ -63,6 +66,7 @@ const BarStack = ({
                 fill={bar.color}
                 height={isHorizontal ? Math.abs(bar.height) : barWidth}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
+                opacity={barStyle.opacity}
                 width={isHorizontal ? barWidth : Math.abs(bar.width)}
                 x={
                   isHorizontal
@@ -107,7 +111,8 @@ const propsToMemoize = [
   'lines',
   'barPadding',
   'barIndex',
-  'isTooltipHidden'
+  'isTooltipHidden',
+  'barStyle'
 ];
 
 export default memo(BarStack, (prevProps, nextProps) => {

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -1,6 +1,6 @@
-import { MutableRefObject, useMemo, useRef, useState } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
-import { equals, flatten, has, isNil, pluck } from 'ramda';
+import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
 import { useAtom } from 'jotai';
 
 import { Skeleton } from '@mui/material';
@@ -22,6 +22,7 @@ import { useTooltipStyles } from '../common/useTooltipStyles';
 import { margin } from '../LineChart/common';
 import { Tooltip } from '../../components';
 import Thresholds from '../common/Thresholds/Thresholds';
+import { useDeepCompare } from '../../utils';
 
 import BarGroup from './BarGroup';
 import { tooltipDataAtom } from './atoms';
@@ -35,7 +36,7 @@ interface Props
   graphRef: MutableRefObject<HTMLDivElement | null>;
   height: number;
   limitLegend?: false | number;
-  orientation: 'vertical' | 'horizontal';
+  orientation: 'vertical' | 'horizontal' | 'auto';
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
   width: number;
@@ -82,7 +83,13 @@ const ResponsiveBarChart = ({
     pluck('value', thresholds?.critical || [])
   ]);
 
-  const isHorizontal = equals(orientation, 'horizontal');
+  const isHorizontal = useMemo(() => {
+    if (!equals(orientation, 'auto')) {
+      return equals(orientation, 'horizontal');
+    }
+
+    return gte(graphWidth, graphHeight + 60);
+  }, [orientation, graphWidth, graphHeight]);
 
   const xScale = useMemo(
     () =>
@@ -144,6 +151,13 @@ const ResponsiveBarChart = ({
     ]
   );
 
+  useEffect(
+    () => {
+      setLinesGraph(lines);
+    },
+    useDeepCompare([lines])
+  );
+
   const displayLegend = legend?.display ?? true;
 
   const displayedLines = useMemo(
@@ -214,7 +228,7 @@ const ResponsiveBarChart = ({
             graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
             gridLinesType={axis?.gridLinesType}
             leftScale={leftScale}
-            orientation={orientation}
+            orientation={isHorizontal ? 'horizontal' : 'vertical'}
             rightScale={rightScale}
             showGridLines={showGridLines}
             svgRef={graphSvgRef}
@@ -228,7 +242,7 @@ const ResponsiveBarChart = ({
                 isTooltipHidden={isTooltipHidden}
                 leftScale={leftScale}
                 lines={displayedLines}
-                orientation={orientation}
+                orientation={isHorizontal ? 'horizontal' : 'vertical'}
                 rightScale={rightScale}
                 secondUnit={secondUnit}
                 size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}

package/src/Graph/LineChart/LineChart.tsx

@@ -1,7 +1,7 @@
-import { MutableRefObject, useMemo, useRef, useState } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Tooltip } from '@visx/visx';
-import { equals, flatten, isNil, pluck } from 'ramda';
+import { equals, flatten, isNil, pluck, reject } from 'ramda';
 
 import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
@@ -19,10 +19,15 @@ import BaseChart from '../common/BaseChart/BaseChart';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import Thresholds from '../common/Thresholds/Thresholds';
+import { useDeepCompare } from '../../utils';
 
 import Lines from './BasicComponents/Lines';
-import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import useFilterLines from './BasicComponents/useFilterLines';
+import {
+  canDisplayThreshold,
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './BasicComponents/Lines/Threshold/models';
 import InteractionWithGraph from './InteractiveComponents';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
@@ -47,6 +52,23 @@ const baseStyles = {
   textAlign: 'center'
 };
 
+const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
+  if (!displayThreshold) {
+    return lines;
+  }
+  const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
+
+  const findLinesUpperLower = lines.map((line) =>
+    equals(line.name, lowerLineName) || equals(line.name, upperLineName)
+      ? line
+      : null
+  );
+
+  const linesUpperLower = reject((element) => !element, findLinesUpperLower);
+
+  return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
+};
+
 const LineChart = ({
   graphData,
   height = 500,
@@ -72,7 +94,11 @@ const LineChart = ({
 
   const theme = useTheme();
 
-  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
+  const { title, timeSeries, baseAxis, lines } = graphData;
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line>>(
+    filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+  );
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const { isInViewport } = useIntersection({ element: graphRef?.current });
@@ -86,21 +112,12 @@ const LineChart = ({
     showTooltip: showThresholdTooltip
   } = Tooltip.useTooltip();
 
-  const { title, timeSeries, baseAxis, lines } = graphData;
-
   const thresholdValues = flatten([
     pluck('value', thresholds?.warning || []),
     pluck('value', thresholds?.critical || [])
   ]);
 
-  const { displayedLines } = useFilterLines({
-    displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines,
-    linesGraph,
-    setLinesGraph
-  });
-
-  const [, secondUnit] = getUnits(displayedLines);
+  const [, secondUnit] = getUnits(linesGraph);
 
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
@@ -119,6 +136,11 @@ const LineChart = ({
     [timeSeries, graphWidth]
   );
 
+  const displayedLines = useMemo(
+    () => linesGraph.filter(({ display }) => display),
+    [linesGraph]
+  );
+
   const leftScale = useMemo(
     () =>
       getLeftScale({
@@ -164,6 +186,15 @@ const LineChart = ({
     ]
   );
 
+  useEffect(
+    () => {
+      setLinesGraph(
+        filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+      );
+    },
+    useDeepCompare([lines])
+  );
+
   const graphTooltipData = useGraphTooltip({
     graphWidth,
     timeSeries,
@@ -204,7 +235,7 @@ const LineChart = ({
           }}
           legendRef={legendRef}
           limitLegend={limitLegend}
-          lines={displayedLines}
+          lines={linesGraph}
           setLines={setLinesGraph}
           title={title}
         >
@@ -269,7 +300,7 @@ const LineChart = ({
                       graphSvgRef,
                       graphWidth,
                       leftScale,
-                      lines: displayedLines,
+                      lines: linesGraph,
                       rightScale,
                       timeSeries,
                       xScale

package/src/Graph/common/Axes/index.tsx

@@ -32,8 +32,14 @@ const Axes = ({
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
   const { lines, showBorder, yAxisTickLabelRotation } = data;
+  const isHorizontal = equals(orientation, 'horizontal');
 
-  const { axisLeft, axisRight } = useAxisY({ data, graphHeight: height });
+  const { axisLeft, axisRight } = useAxisY({
+    data,
+    graphHeight: height,
+    graphWidth: width,
+    isHorizontal
+  });
 
   const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
 
@@ -52,8 +58,6 @@ const Axes = ({
   const hasMoreThanTwoUnits = !isNil(thirdUnit);
   const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
 
-  const isHorizontal = equals(orientation, 'horizontal');
-
   const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
   const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
   const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;
@@ -76,7 +80,7 @@ const Axes = ({
         <UnitLabel
           unit={firstUnit}
           x={isHorizontal ? -8 : width + 8}
-          y={isHorizontal ? 16 : 0}
+          y={isHorizontal ? 16 : -2}
         />
       )}
 
@@ -88,8 +92,8 @@ const Axes = ({
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
           angle: yAxisTickLabelRotation,
-          dx: isHorizontal ? -8 : 2,
-          dy: isHorizontal ? 4 : -4
+          dx: isHorizontal ? -8 : 16,
+          dy: isHorizontal ? 4 : -6
         })}
         tickLength={2}
       />

package/src/Graph/common/Axes/useAxisY.ts

@@ -27,15 +27,24 @@ interface AxisY {
 interface Props {
   data: Omit<Data, 'timeSeries'>;
   graphHeight?: number;
+  graphWidth?: number;
+  isHorizontal: boolean;
 }
 
-const useAxisY = ({ data, graphHeight }: Props): AxisY => {
+const useAxisY = ({
+  data,
+  graphHeight,
+  graphWidth,
+  isHorizontal
+}: Props): AxisY => {
   const theme = useTheme();
 
   const { lines } = data;
   const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
 
-  const numTicks = graphHeight && Math.ceil(graphHeight / 30);
+  const numTicks = isHorizontal
+    ? graphHeight && Math.ceil(graphHeight / 30)
+    : graphWidth && Math.ceil(graphWidth / 60);
 
   const hasMoreThanTwoUnits = !isNil(thirdUnit);
   const hasTwoUnits = !isNil(secondUnit) && !hasMoreThanTwoUnits;

package/src/Graph/index.ts

@@ -1,4 +1,5 @@
 export { default as LineChart } from './LineChart';
+export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';