@centreon/ui 24.8.2 → 24.8.3

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -3,8 +3,8 @@ import { MutableRefObject } from 'react';
 import { Group } from '@visx/visx';
 import { equals } from 'ramda';
 
-import { margin } from '../../LineChart/common';
-import { LineChartAxis } from '../../LineChart/models';
+import { margin } from '../../Chart/common';
+import { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
@@ -12,7 +12,8 @@ import { Line, TimeValue } from '../timeSeries/models';
 import { extraMargin } from './useComputeBaseChartDimensions';
 
 interface Props {
-  axis?: LineChartAxis;
+  allUnits: Array<string>;
+  axis?: ChartAxis;
   base?: number;
   children: JSX.Element;
   displayedLines: Array<Line>;
@@ -42,7 +43,8 @@ const ChartSvgWrapper = ({
   timeSeries,
   axis,
   children,
-  orientation = 'horizontal'
+  orientation = 'horizontal',
+  allUnits
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
@@ -64,13 +66,14 @@ const ChartSvgWrapper = ({
           />
         )}
         <Axes
+          allUnits={allUnits}
           data={{
             baseAxis: base,
             lines: displayedLines,
             timeSeries,
             ...axis
           }}
-          height={graphHeight - margin.top}
+          height={graphHeight}
           leftScale={leftScale}
           orientation={orientation}
           rightScale={rightScale}

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -2,7 +2,7 @@ import { MutableRefObject, useRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 
-import { margin } from '../../LineChart/common';
+import { margin } from '../../Chart/common';
 
 export const extraMargin = 10;
 

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

@@ -4,9 +4,9 @@ import { Grid } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
 import { includes } from 'ramda';
 
-import { LineChartAxis } from '../../LineChart/models';
+import { ChartAxis } from '../../Chart/models';
 
-interface Props extends Pick<LineChartAxis, 'gridLinesType'> {
+interface Props extends Pick<ChartAxis, 'gridLinesType'> {
   height: number;
   leftScale: ScaleLinear<number, number>;
   width: number;

package/src/Graph/common/Thresholds/ThresholdLine.tsx

@@ -2,7 +2,7 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
-import { margin } from '../../LineChart/common';
+import { margin } from '../../Chart/common';
 
 interface Props {
   hideTooltip: () => void;

package/src/Graph/common/Thresholds/Thresholds.tsx

@@ -1,4 +1,5 @@
-import { equals, isNil } from 'ramda';
+import { equals } from 'ramda';
+import { ScaleLinear } from 'd3-scale';
 
 import { getUnits, getYScale } from '../timeSeries';
 import { Line } from '../timeSeries/models';
@@ -10,40 +11,34 @@ interface Props {
   displayedLines: Array<Line>;
   hideTooltip: () => void;
   isHorizontal?: boolean;
-  leftScale: (value: number) => number;
-  rightScale: (value: number) => number;
   showTooltip: (props) => void;
   thresholdUnit?: string;
   thresholds: ThresholdsModel;
   width: number;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 const Thresholds = ({
   thresholds,
-  leftScale,
-  rightScale,
   width,
   displayedLines,
   thresholdUnit,
   showTooltip,
   hideTooltip,
+  yScalesPerUnit,
   isHorizontal = true
 }: Props): JSX.Element => {
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(
-    displayedLines as Array<Line>
-  );
+  const [firstUnit, secondUnit] = getUnits(displayedLines as Array<Line>);
 
-  const shouldUseRightScale = equals(thresholdUnit, secondUnit);
+  const shouldUseRightScale =
+    thresholdUnit && equals(thresholdUnit, secondUnit);
 
   const yScale = shouldUseRightScale
-    ? rightScale
+    ? yScalesPerUnit[secondUnit]
     : getYScale({
-        hasMoreThanTwoUnits: !isNil(thirdUnit),
         invert: null,
-        leftScale,
-        rightScale,
-        secondUnit,
-        unit: firstUnit
+        unit: firstUnit,
+        yScalesPerUnit
       });
 
   return (

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

@@ -22,9 +22,6 @@ import {
   add,
   isEmpty,
   any,
-  not,
-  min,
-  max,
   lt,
   identity,
   head,
@@ -33,10 +30,12 @@ import {
   always,
   T,
   includes,
-  split
+  split,
+  negate,
+  isNotNil
 } from 'ramda';
 
-import { margin } from '../../LineChart/common';
+import { margin } from '../../Chart/common';
 import { LineChartData } from '../models';
 
 import {
@@ -46,7 +45,6 @@ import {
   AxeScale,
   Xscale,
   FormatMetricValueProps,
-  YScales,
   TimeValueProps
 } from './models';
 
@@ -119,12 +117,14 @@ const toLine = ({
   average_value,
   minimum_value,
   maximum_value,
-  metric_id
+  metric_id,
+  displayAs
 }: Metric): Line => ({
   areaColor: ds_data.ds_color_area,
   average_value,
   color: ds_data.ds_color_line,
   display: true,
+  displayAs,
   filled: ds_data.ds_filled,
   highlight: undefined,
   invert: ds_data.ds_invert,
@@ -220,6 +220,7 @@ export const getLinesForMetrics = ({
   filter(({ metric_id }) => metricIds.includes(metric_id), lines);
 
 interface LinesTimeSeries {
+  invert?: boolean | string | null;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
 }
@@ -269,17 +270,13 @@ const getSortedStackedLines = (lines: Array<Line>): Array<Line> =>
 
 const getInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
-    reject(({ invert }: Line): boolean => isNil(invert)) as (
-      lines
-    ) => Array<Line>,
+    filter(({ invert }: Line): boolean => invert) as (lines) => Array<Line>,
     getSortedStackedLines
   )(lines);
 
 const getNotInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
-    filter(({ invert }: Line): boolean => isNil(invert)) as (
-      lines
-    ) => Array<Line>,
+    reject(({ invert }: Line): boolean => invert) as (lines) => Array<Line>,
     getSortedStackedLines
   )(lines);
 
@@ -293,7 +290,8 @@ const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
 
 const getTimeSeriesForLines = ({
   lines,
-  timeSeries
+  timeSeries,
+  invert
 }: LinesTimeSeries): Array<TimeValue> => {
   const metrics = map(prop('metric_id'), lines);
 
@@ -302,7 +300,10 @@ const getTimeSeriesForLines = ({
       ...reduce(
         (acc, metric_id): Omit<TimeValue, 'timePick'> => ({
           ...acc,
-          [metric_id]: metricsValue[metric_id]
+          [metric_id]:
+            invert && metricsValue[metric_id]
+              ? negate(metricsValue[metric_id])
+              : metricsValue[metric_id]
         }),
         {},
         metrics
@@ -314,39 +315,39 @@ const getTimeSeriesForLines = ({
 };
 
 interface GetYScaleProps {
-  hasMoreThanTwoUnits: boolean;
   invert: string | null;
-  leftScale: ScaleLinear<number, number>;
-  rightScale: ScaleLinear<number, number>;
-  secondUnit: string;
+  scale?: 'linear' | 'logarithmic';
+  scaleLogarithmicBase?: number;
   unit: string;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 const getYScale = ({
-  hasMoreThanTwoUnits,
   unit,
-  secondUnit,
-  leftScale,
-  rightScale,
-  invert
+  invert,
+  yScalesPerUnit,
+  scale = 'linear',
+  scaleLogarithmicBase
 }: GetYScaleProps): ScaleLinear<number, number> => {
-  const isLeftScale = hasMoreThanTwoUnits || unit !== secondUnit;
-  const scale = isLeftScale ? leftScale : rightScale;
+  const yScale = yScalesPerUnit[unit];
 
   return invert
-    ? Scale.scaleLinear<number>({
-        domain: scale.domain().reverse(),
-        nice: true,
-        range: scale.range().reverse()
+    ? getScaleType(scale)({
+        base: scaleLogarithmicBase,
+        domain: yScale.domain().reverse(),
+        range: yScale.range().reverse()
       })
-    : scale;
+    : yScale;
 };
 
 const getScaleType = (
-  scale: 'linear' | 'logarithimc'
+  scale: 'linear' | 'logarithmic'
 ): typeof Scale.scaleLinear | typeof Scale.scaleLog =>
   equals(scale, 'logarithmic') ? Scale.scaleLog : Scale.scaleLinear;
 
+const hasOnlyZeroesHasValue = (graphValues: Array<number>): boolean =>
+  graphValues.every((value) => equals(value, 0) || equals(value, null));
+
 const getScale = ({
   graphValues,
   height,
@@ -355,17 +356,21 @@ const getScale = ({
   isCenteredZero,
   scale,
   scaleLogarithmicBase,
-  isHorizontal
+  isHorizontal,
+  invert,
+  hasDisplayAsBar
 }): ScaleLinear<number, number> => {
   const isLogScale = equals(scale, 'logarithmic');
   const minValue = Math.min(
-    getMin(graphValues),
+    hasDisplayAsBar && 0,
+    invert ? negate(getMax(graphValues)) : getMin(graphValues),
     getMin(stackedValues),
     Math.min(...thresholds)
   );
   const maxValue = Math.max(
     getMax(graphValues),
     getMax(stackedValues),
+    hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
     Math.max(...thresholds)
   );
 
@@ -384,68 +389,15 @@ const getScale = ({
     });
   }
 
+  const domain = [isLogScale ? 0.001 : minValue, maxValue];
+
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
-    domain: [isLogScale ? 0.001 : minValue, maxValue],
+    domain,
     range: isHorizontal ? range : range.reverse()
   });
 };
 
-const getLeftScale = ({
-  dataLines,
-  dataTimeSeries,
-  valueGraphHeight,
-  thresholds,
-  thresholdUnit,
-  isCenteredZero,
-  scale,
-  scaleLogarithmicBase,
-  isHorizontal = true
-}: AxeScale): ScaleLinear<number, number> => {
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(dataLines);
-
-  const shouldApplyThresholds =
-    equals(thresholdUnit, firstUnit) ||
-    equals(thresholdUnit, thirdUnit) ||
-    !thresholdUnit;
-
-  const graphValues = isNil(thirdUnit)
-    ? getMetricValuesForUnit({
-        lines: dataLines,
-        timeSeries: dataTimeSeries,
-        unit: firstUnit
-      })
-    : getMetricValuesForLines({
-        lines: dataLines,
-        timeSeries: dataTimeSeries
-      });
-
-  const firstUnitHasStackedLines =
-    isNil(thirdUnit) && not(isNil(firstUnit))
-      ? hasUnitStackedLines({ lines: dataLines, unit: firstUnit })
-      : false;
-
-  const stackedValues = firstUnitHasStackedLines
-    ? getStackedMetricValues({
-        lines: getSortedStackedLines(dataLines).filter(
-          ({ unit }) => !equals(unit, secondUnit)
-        ),
-        timeSeries: dataTimeSeries
-      })
-    : [0];
-
-  return getScale({
-    graphValues,
-    height: valueGraphHeight,
-    isCenteredZero,
-    isHorizontal,
-    scale,
-    scaleLogarithmicBase,
-    stackedValues,
-    thresholds: shouldApplyThresholds ? thresholds : []
-  });
-};
-
 const getXScale = ({
   dataTime,
   valueWidth
@@ -467,7 +419,7 @@ export const getXScaleBand = ({
   });
 };
 
-const getRightScale = ({
+const getYScaleUnit = ({
   dataLines,
   dataTimeSeries,
   valueGraphHeight,
@@ -476,26 +428,32 @@ const getRightScale = ({
   isCenteredZero,
   scale,
   scaleLogarithmicBase,
-  isHorizontal = true
-}: AxeScale): ScaleLinear<number, number> => {
-  const [, secondUnit] = getUnits(dataLines);
+  isHorizontal = true,
+  unit,
+  invert
+}: AxeScale & { invert?: boolean | string | null; unit: string }): ScaleLinear<
+  number,
+  number
+> => {
+  const [firstUnit] = getUnits(dataLines);
+  const shouldApplyThresholds =
+    equals(unit, thresholdUnit) || (!thresholdUnit && equals(firstUnit, unit));
 
   const graphValues = getMetricValuesForUnit({
     lines: dataLines,
     timeSeries: dataTimeSeries,
-    unit: secondUnit
+    unit
   });
 
-  const shouldApplyThresholds = equals(thresholdUnit, secondUnit);
-
-  const secondUnitHasStackedLines = isNil(secondUnit)
-    ? false
-    : hasUnitStackedLines({ lines: dataLines, unit: secondUnit });
+  const hasStackedLines = hasUnitStackedLines({
+    lines: dataLines,
+    unit
+  });
 
-  const stackedValues = secondUnitHasStackedLines
+  const stackedValues = hasStackedLines
     ? getStackedMetricValues({
-        lines: getSortedStackedLines(dataLines).filter(({ unit }) =>
-          equals(unit, secondUnit)
+        lines: getSortedStackedLines(dataLines).filter(
+          ({ unit: stackedUnit }) => equals(unit, stackedUnit)
         ),
         timeSeries: dataTimeSeries
       })
@@ -503,7 +461,14 @@ const getRightScale = ({
 
   return getScale({
     graphValues,
+    hasDisplayAsBar: dataLines.some(
+      ({ displayAs, unit: lineUnit, stackOrder }) =>
+        equals(unit, lineUnit) &&
+        equals(displayAs, 'bar') &&
+        isNotNil(stackOrder)
+    ),
     height: valueGraphHeight,
+    invert,
     isCenteredZero,
     isHorizontal,
     scale,
@@ -513,6 +478,43 @@ const getRightScale = ({
   });
 };
 
+const getYScalePerUnit = ({
+  dataLines,
+  dataTimeSeries,
+  valueGraphHeight,
+  thresholds,
+  thresholdUnit,
+  isCenteredZero,
+  scale,
+  scaleLogarithmicBase,
+  isHorizontal = true
+}: AxeScale): Record<string, ScaleLinear<number, number>> => {
+  const units = getUnits(dataLines);
+
+  const scalePerUnit = units.reduce((acc, unit) => {
+    return {
+      ...acc,
+      [unit]: getYScaleUnit({
+        dataLines,
+        dataTimeSeries,
+        invert: dataLines.some(
+          ({ unit: lineUnit, invert }) => equals(lineUnit, unit) && invert
+        ),
+        isCenteredZero,
+        isHorizontal,
+        scale,
+        scaleLogarithmicBase,
+        thresholdUnit,
+        thresholds,
+        unit,
+        valueGraphHeight
+      })
+    };
+  }, {});
+
+  return scalePerUnit;
+};
+
 const formatTime = (value: number): string => {
   if (value < 1000) {
     return `${numeral(value).format('0.[00]a')} ms`;
@@ -606,7 +608,7 @@ const formatMetricValueWithUnit = ({
   }
 
   if (equals('%', unit)) {
-    return `${numeral(Math.abs(value)).format('0.[00]')}%`;
+    return `${numeral(value).format('0.[00]')}%`;
   }
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
@@ -616,29 +618,6 @@ const formatMetricValueWithUnit = ({
     : `${formattedMetricValue} ${unit}`;
 };
 
-const getStackedYScale = ({
-  leftScale,
-  rightScale
-}: YScales): ScaleLinear<number, number> => {
-  const minDomain = min(
-    getMin(leftScale.domain()),
-    getMin(rightScale.domain())
-  );
-  const maxDomain = max(
-    getMax(leftScale.domain()),
-    getMax(rightScale.domain())
-  );
-
-  const minRange = min(getMin(leftScale.range()), getMin(rightScale.range()));
-  const maxRange = max(getMax(leftScale.range()), getMax(rightScale.range()));
-
-  return Scale.scaleLinear<number>({
-    domain: [minDomain, maxDomain],
-    nice: true,
-    range: [maxRange, minRange]
-  });
-};
-
 const bisectDate = bisector(identity).center;
 
 const getTimeValue = ({
@@ -707,13 +686,12 @@ export {
   hasUnitStackedLines,
   getYScale,
   getScale,
-  getLeftScale,
   getXScale,
-  getRightScale,
   formatMetricValue,
-  getStackedYScale,
   getTimeValue,
   bisectDate,
   getMetricWithLatestData,
-  formatMetricValueWithUnit
+  formatMetricValueWithUnit,
+  getYScaleUnit,
+  getYScalePerUnit
 };

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

@@ -1,6 +1,6 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 
-import { LineChartAxis } from '../../LineChart/models';
+import { ChartAxis } from '../../Chart/models';
 
 interface DsData {
   ds_color_area: string;
@@ -19,6 +19,7 @@ export interface Metric {
   critical_high_threshold: number | null;
   critical_low_threshold: number | null;
   data: Array<number | null>;
+  displayAs?: 'line' | 'bar';
   ds_data?: DsData;
   legend: string;
   maximum_value: number | null;
@@ -41,6 +42,7 @@ export interface Line {
   average_value: number | null;
   color: string;
   display: boolean;
+  displayAs?: 'line' | 'bar';
   filled: boolean;
   highlight?: boolean;
   invert: string | null;
@@ -70,10 +72,7 @@ export interface Xscale {
   valueWidth: number;
 }
 export interface AxeScale
-  extends Pick<
-    LineChartAxis,
-    'isCenteredZero' | 'scale' | 'scaleLogarithmicBase'
-  > {
+  extends Pick<ChartAxis, 'isCenteredZero' | 'scale' | 'scaleLogarithmicBase'> {
   dataLines: Array<Line>;
   dataTimeSeries: Array<TimeValue>;
   isHorizontal?: boolean;

package/src/Graph/index.ts

@@ -1,6 +1,6 @@
-export { default as LineChart } from './LineChart';
-export { default as ThresholdLines } from './LineChart/BasicComponents/Lines/Threshold';
-export { default as useLineChartData } from './LineChart/useLineChartData';
+export { default as LineChart } from './Chart';
+export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
+export { default as useLineChartData } from './Chart/useChartData';
 export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
@@ -13,5 +13,5 @@ export * from './Tree';
 export type { LineChartData } from './common/models';
 export * from './common/timeSeries';
 export type { Metric } from './common/timeSeries/models';
-export * from './LineChart/models';
+export * from './Chart/models';
 export * from './PieChart/models';