@centreon/ui 25.10.29 → 25.10.30

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -5,10 +5,7 @@ import { LineChartData } from '../common/models';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-import dataPingServiceStackeKey from '../mockedData/pingServiceWithStackedKeys.json';
 
-import { ClickAwayListener } from '@mui/material';
-import { useState } from 'react';
 import BarChart from './BarChart';
 
 const meta: Meta<typeof BarChart> = {
@@ -262,51 +259,4 @@ export const mixedStackedMinMax: Story = {
     max: 20
   },
   render: Template
-};
-
-const LegendSecondaryClick = (args) => {
-  const [position, setPosition] = useState<Array<[number, number]> | null>(
-    null
-  );
-
-  return (
-    <>
-      <Template
-        {...args}
-        legend={{
-          secondaryClick: ({ position }) => setPosition(position)
-        }}
-      />
-      {position && (
-        <ClickAwayListener onClickAway={() => setPosition(null)}>
-          <div
-            className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
-            style={{ left: position?.[0], top: position?.[1] }}
-            open={Boolean(position)}
-            onClose={() => setPosition(null)}
-          >
-            menu
-          </div>
-        </ClickAwayListener>
-      )}
-    </>
-  );
-};
-
-export const withLegendSecondaryClick: Story = {
-  args: defaultArgs,
-  render: (args) => (
-    <LegendSecondaryClick
-      {...args}
-      data={dataPingService as unknown as LineChartData}
-    />
-  )
-};
-
-export const stackKey: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStackeKey
-  },
-  render: Template
-};
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -116,4 +116,4 @@ const BarChart = ({
   );
 };
 
-export default BarChart;
+export default BarChart;

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,13 +1,12 @@
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
-import { difference, equals, keys, omit, pick } from 'ramda';
+import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
 import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
   getSortedStackedLines,
-  getStackedLinesTimeSeriesPerStackAndUnit,
   getTime,
   getTimeSeriesForLines,
   getUnits
@@ -55,18 +54,41 @@ const BarGroup = ({
   );
 
   const stackedLines = getSortedStackedLines(lines);
+  const stackedUnits = uniq(pluck('unit', stackedLines));
   const notStackedLines = difference(lines, stackedLines);
+
+  const stackedKeys = stackedUnits.reduce(
+    (acc, unit) => ({
+      ...acc,
+      [`stacked-${unit}`]: null
+    }),
+    {}
+  );
+  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = stackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
+
   const notStackedTimeSeries = getTimeSeriesForLines({
     lines: notStackedLines,
     timeSeries
   });
 
-  const { stackedLinesTimeSeriesPerStackKeyAndUnit, stackedKeys } = useMemo(
-    () =>
-      getStackedLinesTimeSeriesPerStackAndUnit({ stackedLines, timeSeries }),
-    [stackedLines, timeSeries]
-  );
-
   const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
     ...timeSerie,
     ...stackedKeys
@@ -76,16 +98,6 @@ const BarGroup = ({
     deps: [normalizedTimeSeries],
     variable: keys(omit(['timeTick'], normalizedTimeSeries[0]))
   });
-  const sortedLineKeys = lineKeys.sort((lineKeyA: string, lineKeyB: string) => {
-    if (lineKeyA.startsWith('stacked-') && !lineKeyB.startsWith('stacked-')) {
-      return true;
-    }
-
-    const lineKeysA = lineKeyA.split('-');
-    const lineKeysB = lineKeyB.split('-');
-
-    return lineKeysA[2] === '' && lineKeysB[2] !== '';
-  });
   const colors = useDeepMemo({
     deps: [lineKeys, lines],
     variable: lineKeys.map((key) => {
@@ -142,7 +154,7 @@ const BarGroup = ({
       color={colorScale}
       data={normalizedTimeSeries}
       height={size}
-      keys={sortedLineKeys}
+      keys={lineKeys}
       {...barComponentBaseProps}
     >
       {(barGroups) =>
@@ -152,9 +164,7 @@ const BarGroup = ({
               key={`bar-group-${barGroup.index}-${barGroup.x0}`}
               barGroup={barGroup}
               barStyle={barStyle}
-              stackedLinesTimeSeriesPerStackKeyAndUnit={
-                stackedLinesTimeSeriesPerStackKeyAndUnit
-              }
+              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
               notStackedTimeSeries={notStackedTimeSeries}
               notStackedLines={notStackedLines}
               isTooltipHidden={isTooltipHidden}

package/src/Graph/BarChart/BarStack.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, ReactElement } from 'react';
 
 import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
@@ -22,6 +22,7 @@ interface Props extends Omit<UseBarStackProps, 'xScale'> {
   barWidth: number;
   isTooltipHidden: boolean;
   neutralValue: number;
+  isStacked?: boolean;
 }
 
 const getPadding = ({ padding, size, isNegativeValue }): number => {
@@ -83,8 +84,9 @@ const BarStack = ({
   barIndex,
   isTooltipHidden,
   barStyle = { opacity: 1, radius: 0.2 },
-  neutralValue
-}: Props): JSX.Element => {
+  neutralValue,
+  isStacked
+}: Props): ReactElement => {
   const {
     BarStackComponent,
     commonBarStackProps,
@@ -118,6 +120,15 @@ const BarStack = ({
               metricId: Number(bar.key)
             }) as BarStyle;
 
+            const barY =
+              isNegativeValue && isStacked && !shouldApplyRadiusOnBottom
+                ? getPadding({
+                  isNegativeValue,
+                  padding: bar.y,
+                  size: bar.height
+                })
+                : bar.y;
+
             return (
               <BarRounded
                 {...barRoundedProps}
@@ -128,10 +139,10 @@ const BarStack = ({
                   barWidth,
                   y: isHorizontal
                     ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
+                      isNegativeValue,
+                      padding: bar.y,
+                      size: bar.height
+                    })
                     : barPadding,
                   isFirstBar: shouldApplyRadiusOnBottom,
                   isHorizontal,
@@ -146,19 +157,19 @@ const BarStack = ({
                   isHorizontal
                     ? barPadding
                     : getPadding({
-                        isNegativeValue,
-                        padding: bar.x,
-                        size: bar.width
-                      })
+                      isNegativeValue,
+                      padding: bar.x,
+                      size: bar.width
+                    })
                 }
-                y={isHorizontal ? bar.y : barPadding}
+                y={isHorizontal ? barY : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
                     : hoverBar({
-                        barIndex,
-                        highlightedMetric: Number(bar.key)
-                      })
+                      barIndex,
+                      highlightedMetric: Number(bar.key)
+                    })
                 }
                 onMouseLeave={isTooltipHidden ? undefined : exitBar}
               />

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -12,7 +12,7 @@ interface Props {
   isTooltipHidden: boolean;
   barStyle: BarStyle;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
-  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
+  stackedLinesTimeSeriesPerUnit: Record<
     string,
     { lines: Array<Line>; timeSeries: Array<TimeValue> }
   >;
@@ -25,7 +25,7 @@ interface Props {
 
 const MemoizedGroup = ({
   barGroup,
-  stackedLinesTimeSeriesPerStackKeyAndUnit,
+  stackedLinesTimeSeriesPerUnit,
   notStackedLines,
   notStackedTimeSeries,
   isHorizontal,
@@ -38,7 +38,9 @@ const MemoizedGroup = ({
   const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
     if (key.startsWith('stacked-')) {
       const timeValueBar =
-        stackedLinesTimeSeriesPerStackKeyAndUnit[key].timeSeries[barIndex];
+        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
+          barIndex
+        ];
 
       return Object.values(omit(['timeTick'], timeValueBar)).every(
         (value) => !value
@@ -57,19 +59,21 @@ const MemoizedGroup = ({
       {barGroup.bars.map((bar) => {
         const isStackedBar = bar.key.startsWith('stacked-');
         const linesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
+          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
           : (notStackedLines.find(({ metric_id }) =>
-              equals(metric_id, Number(bar.key))
-            ) as Line);
+            equals(metric_id, Number(bar.key))
+          ) as Line);
         const timeSeriesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
+          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+              .timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
-              timeTick: timeSerie.timeTick,
-              [bar.key]: timeSerie[Number(bar.key)]
-            }));
+            timeTick: timeSerie.timeTick,
+            [bar.key]: timeSerie[Number(bar.key)]
+          }));
 
         return isStackedBar ? (
           <BarStack
+            isStacked
             key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
             barIndex={barGroup.index}
             barPadding={isHorizontal ? bar.x : bar.y}
@@ -79,7 +83,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.split('-')[1] || undefined]}
+            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')] ?? undefined}
             neutralValue={neutralValue}
           />
         ) : (
@@ -93,7 +97,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={[linesBar as Line]}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[(linesBar as Line).unit]}
+            yScale={yScalesPerUnit[(linesBar as Line).unit ?? undefined]}
             neutralValue={neutralValue}
           />
         );
@@ -107,8 +111,8 @@ export default memo(
   (prevProps, nextProps) =>
     equals(prevProps.barGroup, nextProps.barGroup) &&
     equals(
-      prevProps.stackedLinesTimeSeriesPerStackKeyAndUnit,
-      nextProps.stackedLinesTimeSeriesPerStackKeyAndUnit
+      prevProps.stackedLinesTimeSeriesPerUnit,
+      nextProps.stackedLinesTimeSeriesPerUnit
     ) &&
     equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
     equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -68,7 +68,7 @@ const ResponsiveBarChart = ({
 
   const { classes, cx } = useTooltipStyles();
 
-  const [linesGraph, setLinesGraph] = useState<Array<Line>>(lines);
+  const [linesGraph, setLinesGraph] = useState<Array<Line>>(lines || []);
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const [tooltipData, setTooltipData] = useAtom(tooltipDataAtom);
@@ -81,7 +81,7 @@ const ResponsiveBarChart = ({
   );
 
   const [firstUnit, secondUnit] = getUnits(displayedLines);
-  const allUnits = getUnits(lines);
+  const allUnits = getUnits(lines || []);
 
   const { maxLeftAxisCharacters, maxRightAxisCharacters } =
     useComputeYAxisMaxCharacters({
@@ -156,12 +156,12 @@ const ResponsiveBarChart = ({
     ]
   );
 
-  const leftScale = yScalesPerUnit[firstUnit];
-  const rightScale = yScalesPerUnit[secondUnit];
+  const leftScale = yScalesPerUnit[firstUnit ?? allUnits?.[0]];
+  const rightScale = yScalesPerUnit[secondUnit ?? allUnits?.[1]];
 
   useEffect(
     () => {
-      setLinesGraph(lines);
+      setLinesGraph(lines || []);
     },
     useDeepCompare([lines])
   );
@@ -196,8 +196,7 @@ const ResponsiveBarChart = ({
         displayLegend,
         mode: legend?.mode,
         placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent,
-        secondaryClick: legend?.secondaryClick
+        renderExtraComponent: legend?.renderExtraComponent
       }}
       legendRef={legendRef}
       limitLegend={limitLegend}

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -36,7 +36,7 @@ const BarChartTooltip = ({
   sortOrder
 }: Props): JSX.Element | null => {
   const { classes } = useBarChartTooltipStyles();
-  const { format } = useLocaleDateTimeFormat();
+  const { toDate, toTime } = useLocaleDateTimeFormat();
   const tooltipData = useAtomValue(tooltipDataAtom);
 
   if (isNil(tooltipData)) {
@@ -48,7 +48,7 @@ const BarChartTooltip = ({
   }
 
   const date = timeSeries[tooltipData.index].timeTick;
-  const formattedDateTime = format({ date, formatString: 'L LTS' });
+  const formattedDateTime = `${toDate(date)} / ${toTime(date)}`;
 
   const isSingleMode = equals(mode, 'single');
 

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

@@ -27,6 +27,7 @@ import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
 import { LineStyle } from '../../../models';
 import Point from '../Point';
+import { ReactElement } from 'react';
 
 interface Props {
   areaTransparency?: number;
@@ -56,7 +57,7 @@ const StackLines = ({
   lineStyle,
   hasSecondUnit,
   maxLeftAxisCharacters
-}: Props): JSX.Element => {
+}: Props): ReactElement => {
   const curveType = getCurveFactory(
     (equals(type(lineStyle), 'Array')
       ? lineStyle?.[0].curve
@@ -134,9 +135,9 @@ const StackLines = ({
                   equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
-                        areaColor: areaColor || lineColor,
-                        transparency: formattedTransparency
-                      })
+                      areaColor: areaColor || lineColor,
+                      transparency: formattedTransparency
+                    })
                 }
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -1,7 +1,9 @@
+import { equals, pluck, uniq } from 'ramda';
+
 import {
   getInvertedStackedLines,
   getNotInvertedStackedLines,
-  getStackedLinesTimeSeriesPerStackAndUnit
+  getTimeSeriesForLines
 } from '../../../../common/timeSeries';
 import { LinesData } from '../models';
 
@@ -12,28 +14,53 @@ interface StackedLinesState {
 
 const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
   const regularStackedLines = getNotInvertedStackedLines(lines);
-  const {
-    stackedLinesTimeSeriesPerStackKeyAndUnit:
-      regularStackedLinesTimeSeriesPerStackKeyAndUnit
-  } = getStackedLinesTimeSeriesPerStackAndUnit({
-    stackedLines: regularStackedLines,
-    timeSeries
-  });
+  const regularStackedUnits = uniq(pluck('unit', regularStackedLines));
+  const regularStackedLinesTimeSeriesPerUnit = regularStackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = regularStackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
 
   const invertedStackedLines = getInvertedStackedLines(lines);
+  const invertedStackedUnits = uniq(pluck('unit', invertedStackedLines));
+  const invertedStackedLinesTimeSeriesPerUnit = invertedStackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = invertedStackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
 
-  const {
-    stackedLinesTimeSeriesPerStackKeyAndUnit:
-      invertedStackedLinesTimeSeriesPerStackKeyAndUnit
-  } = getStackedLinesTimeSeriesPerStackAndUnit({
-    stackedLines: invertedStackedLines,
-    timeSeries,
-    invert: true
-  });
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            invert: true,
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
 
   return {
-    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerStackKeyAndUnit,
-    stackedLinesData: regularStackedLinesTimeSeriesPerStackKeyAndUnit
+    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerUnit,
+    stackedLinesData: regularStackedLinesTimeSeriesPerUnit
   };
 };