@centreon/ui 24.8.2 → 24.8.3

package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/index.tsx

@@ -12,8 +12,7 @@ import { displayArea } from '../../helpers/index';
 import { DisplayAnchor, GlobalAreaLines } from '../../models';
 import {
   getDates,
-  getStackedYScale,
-  getUnits,
+  getTimeSeriesForLines,
   getYScale
 } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';
@@ -39,14 +38,15 @@ interface Props extends GlobalAreaLines {
   dotOffset?: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   height: number;
-  leftScale: ScaleLinear<number, number>;
   lineWidth?: number;
-  rightScale: ScaleLinear<number, number>;
+  scale?: 'linear' | 'logarithmic';
+  scaleLogarithmicBase?: number;
   showArea?: boolean;
   showPoints?: boolean;
   timeSeries: Array<TimeValue>;
   width: number;
   xScale: ScaleLinear<number, number>;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 const Lines = ({
@@ -55,9 +55,8 @@ const Lines = ({
   graphSvgRef,
   width,
   displayAnchor,
-  leftScale,
-  rightScale,
   curve,
+  yScalesPerUnit,
   xScale,
   timeSeries,
   displayedLines,
@@ -69,7 +68,9 @@ const Lines = ({
   lineWidth,
   dotOffset,
   dashLength,
-  dashOffset
+  dashOffset,
+  scale,
+  scaleLogarithmicBase
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -85,11 +86,6 @@ const Lines = ({
   const displayAreaRegularLines =
     (areaRegularLines?.display ?? true) && displayArea(regularLines);
 
-  const stackedYScale = getStackedYScale({
-    leftScale,
-    rightScale
-  });
-
   const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
   const commonStackedLinesProps = {
     areaTransparency,
@@ -104,8 +100,7 @@ const Lines = ({
     lineWidth,
     showArea,
     showPoints,
-    xScale,
-    yScale: stackedYScale
+    xScale
   };
 
   return (
@@ -121,20 +116,33 @@ const Lines = ({
 
       {(areaStackedLines?.display ?? true) && (
         <>
-          {displayArea(stackedLinesData.lines) && (
-            <StackedLines
-              lines={stackedLinesData.lines}
-              timeSeries={stackedLinesData.timeSeries}
-              {...commonStackedLinesProps}
-            />
+          {Object.entries(stackedLinesData).map(
+            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
+              <StackedLines
+                key={`stacked-${unit}`}
+                lines={lines}
+                timeSeries={stackedTimeSeries}
+                yScale={yScalesPerUnit[unit]}
+                {...commonStackedLinesProps}
+              />
+            )
           )}
-
-          {displayArea(invertedStackedLinesData.lines) && (
-            <StackedLines
-              lines={invertedStackedLinesData.lines}
-              timeSeries={invertedStackedLinesData.timeSeries}
-              {...commonStackedLinesProps}
-            />
+          {Object.entries(invertedStackedLinesData).map(
+            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
+              <StackedLines
+                key={`invert-stacked-${unit}`}
+                lines={lines}
+                timeSeries={stackedTimeSeries}
+                yScale={getYScale({
+                  invert: '1',
+                  scale,
+                  scaleLogarithmicBase,
+                  unit,
+                  yScalesPerUnit
+                })}
+                {...commonStackedLinesProps}
+              />
+            )
           )}
         </>
       )}
@@ -143,11 +151,10 @@ const Lines = ({
         <WrapperThresholdLines
           areaThresholdLines={areaThresholdLines}
           graphHeight={height}
-          leftScale={leftScale}
           lines={displayedLines}
-          rightScale={rightScale}
           timeSeries={timeSeries}
           xScale={xScale}
+          yScalesPerUnit={yScalesPerUnit}
         />
       )}
 
@@ -161,18 +168,32 @@ const Lines = ({
               unit,
               highlight,
               invert,
-              metric_id
+              metric_id,
+              ...rest
             }) => {
-              const [, secondUnit, thirdUnit] = getUnits(
-                regularLines as Array<Line>
-              );
               const yScale = getYScale({
-                hasMoreThanTwoUnits: !isNil(thirdUnit),
                 invert,
-                leftScale,
-                rightScale,
-                secondUnit,
-                unit
+                scale,
+                scaleLogarithmicBase,
+                unit,
+                yScalesPerUnit
+              });
+              const relatedTimeSeries = getTimeSeriesForLines({
+                invert,
+                lines: [
+                  {
+                    areaColor,
+                    filled,
+                    highlight,
+                    invert,
+                    lineColor,
+                    metric_id,
+                    transparency,
+                    unit,
+                    ...rest
+                  }
+                ],
+                timeSeries
               });
 
               return (
@@ -182,25 +203,25 @@ const Lines = ({
                       areaColor={areaColor || lineColor}
                       lineColor={lineColor}
                       metric_id={metric_id}
-                      timeSeries={timeSeries}
+                      timeSeries={relatedTimeSeries}
                       transparency={transparency}
                       xScale={xScale}
                       yScale={yScale}
                     />
                   )}
                   {showPoints &&
-                    getDates(timeSeries).map((timeTick) => (
+                    getDates(relatedTimeSeries).map((timeTick) => (
                       <Point
                         key={timeTick.toString()}
                         lineColor={lineColor}
                         metric_id={metric_id}
                         radius={getPointRadius(lineWidth)}
-                        timeSeries={timeSeries}
+                        timeSeries={relatedTimeSeries}
                         timeTick={timeTick}
                         xScale={xScale}
                         yPoint={getYAnchorPoint({
                           metric_id,
-                          timeSeries,
+                          timeSeries: relatedTimeSeries,
                           timeTick,
                           yScale
                         })}
@@ -219,7 +240,7 @@ const Lines = ({
                     lineColor={lineColor}
                     lineWidth={lineWidth}
                     metric_id={metric_id}
-                    timeSeries={timeSeries}
+                    timeSeries={relatedTimeSeries}
                     transparency={
                       isNil(areaTransparency)
                         ? transparency || 80