@centreon/ui 24.8.2 → 24.8.3

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx

@@ -0,0 +1,61 @@
+import { equals } from 'ramda';
+
+import { Typography } from '@mui/material';
+
+import { Tooltip as MuiTooltip } from '../../../../components/Tooltip';
+import { ThresholdTooltip, Tooltip } from '../../models';
+import { useTooltipStyles } from '../../../common/useTooltipStyles';
+
+import GraphValueTooltipContent from './GraphValueTooltipContent';
+
+interface Props {
+  baseAxis: number;
+  children: JSX.Element;
+  thresholdTooltip: ThresholdTooltip | null;
+  tooltip?: Tooltip;
+}
+
+const GraphValueTooltip = ({
+  children,
+  tooltip,
+  baseAxis,
+  thresholdTooltip
+}: Props): JSX.Element => {
+  const { classes, cx } = useTooltipStyles();
+
+  if (thresholdTooltip) {
+    return (
+      <MuiTooltip
+        classes={{
+          tooltip: classes.tooltip
+        }}
+        placement="top-start"
+        title={<Typography>{thresholdTooltip?.thresholdLabel}</Typography>}
+      >
+        {children}
+      </MuiTooltip>
+    );
+  }
+
+  return (
+    <MuiTooltip
+      classes={{
+        tooltip: cx(classes.tooltip, classes.tooltipDisablePadding)
+      }}
+      placement="top-start"
+      title={
+        equals('hidden', tooltip?.mode) ? null : (
+          <GraphValueTooltipContent
+            base={baseAxis}
+            isSingleMode={equals('single', tooltip?.mode)}
+            sortOrder={tooltip?.sortOrder}
+          />
+        )
+      }
+    >
+      {children}
+    </MuiTooltip>
+  );
+};
+
+export default GraphValueTooltip;

package/src/Graph/{LineChart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx → Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx}

@@ -15,7 +15,7 @@ interface Props extends Pick<Tooltip, 'sortOrder'> {
   isSingleMode: boolean;
 }
 
-const GraphValueTooltip = ({
+const GraphValueTooltipContent = ({
   base,
   isSingleMode,
   sortOrder
@@ -71,4 +71,4 @@ const GraphValueTooltip = ({
   );
 };
 
-export default GraphValueTooltip;
+export default GraphValueTooltipContent;

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

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
 
 import { Event } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
+import { ScaleTime, ScaleLinear } from 'd3-scale';
 import { useSetAtom } from 'jotai';
 import {
   all,
@@ -11,6 +11,7 @@ import {
   isNil,
   keys,
   map,
+  negate,
   pick,
   pipe,
   pluck,
@@ -31,7 +32,6 @@ import {
   getLineForMetric,
   getLinesForMetrics,
   getTimeValue,
-  getUnits,
   getYScale
 } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
@@ -61,11 +61,10 @@ interface CommonData {
   graphHeight: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   graphWidth: number;
-  leftScale;
   lines;
-  rightScale;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
+  yScalesPerUnit: Record<string, ScaleLinear<string, string>>;
 }
 
 interface TimeShiftZonesData extends InteractedZone {
@@ -99,9 +98,8 @@ const InteractionWithGraph = ({
     graphSvgRef,
     xScale,
     timeSeries,
-    leftScale,
-    rightScale,
-    lines
+    lines,
+    yScalesPerUnit
   } = commonData;
 
   const displayZoomPreview = zoomData?.enable ?? true;
@@ -164,7 +162,6 @@ const InteractionWithGraph = ({
     const date = timeValue.timeTick;
     const displayedMetricIds = pluck('metric_id', lines);
     const filteredMetricsValue = pick(displayedMetricIds, timeValue);
-    const [, secondUnit, thirdUnit] = getUnits(lines as Array<Line>);
     const areAllValuesEmpty = pipe(values, all(isNil))(filteredMetricsValue);
 
     const linesData = getLinesForMetrics({
@@ -190,12 +187,9 @@ const InteractionWithGraph = ({
           metric_id: Number(metricId)
         });
         const yScale = getYScale({
-          hasMoreThanTwoUnits: Boolean(thirdUnit),
           invert: (lineData as Line).invert,
-          leftScale,
-          rightScale,
-          secondUnit,
-          unit: (lineData as Line).unit
+          unit: (lineData as Line).unit,
+          yScalesPerUnit
         });
 
         const y0 = yScale(value);
@@ -225,12 +219,14 @@ const InteractionWithGraph = ({
       date,
       highlightedMetricId: Number(nearestLine[0]),
       metrics: map(
-        ({ metric_id, color, unit, legend, name }) => ({
+        ({ metric_id, color, unit, legend, name, invert }) => ({
           color,
           id: metric_id,
           name: formatMetricName({ legend, name }),
           unit,
-          value: timeValue?.[metric_id]
+          value: invert
+            ? negate(timeValue?.[metric_id])
+            : timeValue?.[metric_id]
         }),
         linesData
       ).filter(({ value }) => !isNil(value))

package/src/Graph/{LineChart → Chart}/Legend/Legend.styles.ts

@@ -93,10 +93,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       width: theme.spacing(1.5)
     },
     legendName: {
-      maxWidth: '95%'
-    },
-    legendNameSide: {
-      maxWidth: '95%'
+      width: '91%'
     },
     markerAndLegendName: {
       alignItems: 'center',
@@ -122,9 +119,6 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
     },
     textListBottom: {
       width: 'auto'
-    },
-    textListSide: {
-      width: '95%'
     }
   })
 );

package/src/Graph/{LineChart → Chart}/Legend/LegendHeader.tsx

@@ -19,6 +19,7 @@ interface Props {
   isListMode: boolean;
   line: Line;
   minMaxAvg?;
+  unit: string;
   value?: string | null;
 }
 
@@ -29,7 +30,8 @@ const LegendHeader = ({
   value,
   minMaxAvg,
   isListMode,
-  isDisplayedOnSide
+  isDisplayedOnSide,
+  unit
 }: Props): JSX.Element => {
   const { classes, cx } = useLegendHeaderStyles({ color });
 
@@ -74,12 +76,11 @@ const LegendHeader = ({
             className={cx(classes.icon, { [classes.disabled]: disabled })}
           />
           <EllipsisTypography
-            className={cx(
-              classes.text,
+            className={classes.text}
+            containerClassname={cx(
               !isListMode && classes.legendName,
-              !isListMode && isDisplayedOnSide && classes.legendNameSide,
               isListMode && !isDisplayedOnSide && classes.textListBottom,
-              isListMode && isDisplayedOnSide && classes.textListSide
+              isListMode && isDisplayedOnSide && classes.legendName
             )}
             data-mode={
               value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
@@ -87,6 +88,9 @@ const LegendHeader = ({
           >
             {metricName}
           </EllipsisTypography>
+          <Typography sx={{ lineHeight: 1.25 }} variant="caption">
+            {unit}
+          </Typography>
         </div>
       </Tooltip>
     </div>

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

@@ -113,7 +113,7 @@ const MainLegend = ({
         data-mode={itemMode}
       >
         {displayedLines.map((line) => {
-          const { color, display, highlight, metric_id } = line;
+          const { color, display, highlight, metric_id, unit } = line;
 
           const markerColor = display
             ? color
@@ -155,6 +155,7 @@ const MainLegend = ({
                 minMaxAvg={
                   shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
                 }
+                unit={unit}
               />
               {!shouldDisplayLegendInCompactMode && !isListMode && (
                 <div>

package/src/Graph/Chart/graphAtoms.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+import { ThresholdTooltip } from './models';
+
+export const timeTickGraphAtom = atom<Date | null>(null);
+export const thresholdTooltipAtom = atom<ThresholdTooltip | null>(null);

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

@@ -1,4 +1,4 @@
-import { MutableRefObject, useRef } from 'react';
+import { memo, MutableRefObject, useRef } from 'react';
 
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
@@ -8,15 +8,16 @@ import 'dayjs/locale/pt';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
+import { equals } from 'ramda';
 
 import { ParentSize } from '../..';
 import { LineChartData, Thresholds } from '../common/models';
 import Loading from '../../LoadingSkeleton';
 
-import LineChart from './LineChart';
+import Chart from './Chart';
 import LoadingSkeleton from './LoadingSkeleton';
 import { GlobalAreaLines, LineChartProps } from './models';
-import useLineChartData from './useLineChartData';
+import useChartData from './useChartData';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
@@ -33,7 +34,7 @@ interface Props extends Partial<LineChartProps> {
   thresholds?: Thresholds;
 }
 
-const WrapperLineChart = ({
+const WrapperChart = ({
   end,
   start,
   height = 500,
@@ -57,11 +58,12 @@ const WrapperLineChart = ({
   },
   header,
   lineStyle,
+  barStyle,
   thresholds,
   thresholdUnit,
   limitLegend
 }: Props): JSX.Element | null => {
-  const { adjustedData } = useLineChartData({ data, end, start });
+  const { adjustedData } = useChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
   if (loading && !adjustedData) {
@@ -88,9 +90,10 @@ const WrapperLineChart = ({
           width: responsiveWidth
         }): JSX.Element => {
           return (
-            <LineChart
+            <Chart
               annotationEvent={annotationEvent}
               axis={axis}
+              barStyle={barStyle}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
@@ -115,4 +118,4 @@ const WrapperLineChart = ({
   );
 };
 
-export default WrapperLineChart;
+export default memo(WrapperChart, equals);

package/src/Graph/{LineChart → Chart}/models.ts

@@ -5,6 +5,7 @@ import { ScaleLinear } from 'd3-scale';
 import { Line, TimeValue } from '../common/timeSeries/models';
 import { LineChartData } from '../common/models';
 import { AxisX, Axis as AxisYLeft, AxisYRight } from '../common/Axes/models';
+import { BarStyle } from '../BarChart/models';
 
 import {
   AreaRegularLines,
@@ -44,13 +45,13 @@ export interface ShapeLines {
   areaStackedLines?: AreaStackedLines;
 }
 
-export interface LineChartAxis {
+export interface ChartAxis {
   axisX?: AxisX;
   axisYLeft?: AxisYLeft;
   axisYRight?: AxisYRight;
   gridLinesType?: 'horizontal' | 'vertical' | 'all';
   isCenteredZero?: boolean;
-  scale?: 'linear' | 'logarithimc';
+  scale?: 'linear' | 'logarithmic';
   scaleLogarithmicBase?: number;
   showBorder?: boolean;
   showGridLines?: boolean;
@@ -67,6 +68,9 @@ export interface TooltipData {
   hideTooltip: () => void;
   tooltipOpen: boolean;
 }
+export interface ThresholdTooltip {
+  thresholdLabel?: string;
+}
 export interface Tooltip {
   mode: 'all' | 'single' | 'hidden';
   renderComponent?: (args: TooltipData) => ReactNode;
@@ -101,7 +105,8 @@ export interface LineStyle {
 
 export interface LineChartProps {
   annotationEvent?: AnnotationEvent;
-  axis?: LineChartAxis;
+  axis?: ChartAxis;
+  barStyle?: BarStyle;
   displayAnchor?: DisplayAnchor;
   header?: LineChartHeader;
   height?: number | null;

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

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useYAxisStyles = makeStyles()((theme) => ({
+  axisInput: {
+    maxHeight: theme.spacing(3),
+    minHeight: theme.spacing(3)
+  },
+  unitContainer: {
+    marginTop: '2px'
+  }
+}));

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

@@ -1,20 +1,51 @@
+import SelectField from '../../../InputField/Select';
 import { commonTickLabelProps } from '../utils';
 
+import { useYAxisStyles } from './AxisStyles';
+
 interface UnitLabelProps {
+  onUnitChange?: (newUnit: string) => void;
   unit: string;
+  units: Array<string>;
   x: number;
   y?: number;
 }
 
-const UnitLabel = ({ x, y = 16, unit }: UnitLabelProps): JSX.Element => (
-  <text
-    fontFamily={commonTickLabelProps.fontFamily}
-    fontSize={commonTickLabelProps.fontSize}
-    x={x}
-    y={-y}
-  >
-    {unit}
-  </text>
-);
+const UnitLabel = ({
+  x,
+  y = 16,
+  unit,
+  onUnitChange,
+  units
+}: UnitLabelProps): JSX.Element => {
+  const { classes } = useYAxisStyles();
+
+  return onUnitChange ? (
+    <foreignObject height={36} width={60} x={x - 20} y={-y * 2}>
+      <div className={classes.unitContainer}>
+        <SelectField
+          className={classes.axisInput}
+          dataTestId="unit-selector"
+          options={units.map((unitOption) => ({
+            id: unitOption,
+            name: unitOption
+          }))}
+          selectedOptionId={unit}
+          size="small"
+          onChange={(e) => onUnitChange(e.target.value)}
+        />
+      </div>
+    </foreignObject>
+  ) : (
+    <text
+      fontFamily={commonTickLabelProps.fontFamily}
+      fontSize={commonTickLabelProps.fontSize}
+      x={x}
+      y={-y}
+    >
+      {unit}
+    </text>
+  );
+};
 
 export default UnitLabel;

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

@@ -4,14 +4,16 @@ import { equals, isNil } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
-import { getXAxisTickFormat } from '../../LineChart/helpers';
+import { getXAxisTickFormat } from '../../Chart/helpers';
 import { getUnits } from '../timeSeries';
+import { margin } from '../../Chart/common';
 
 import UnitLabel from './UnitLabel';
 import { Data } from './models';
 import useAxisY from './useAxisY';
 
 interface Props {
+  allUnits: Array<string>;
   data: Data;
   height: number;
   leftScale: ScaleLinear<number, number>;
@@ -28,7 +30,8 @@ const Axes = ({
   rightScale,
   leftScale,
   xScale,
-  orientation
+  orientation,
+  allUnits
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
   const { lines, showBorder, yAxisTickLabelRotation } = data;
@@ -41,7 +44,7 @@ const Axes = ({
     isHorizontal
   });
 
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+  const [, secondUnit] = getUnits(lines);
 
   const xTickCount = Math.min(Math.ceil(width / 82), 12);
 
@@ -53,8 +56,7 @@ const Axes = ({
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });
 
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
+  const displayAxisRight = !isNil(secondUnit);
 
   const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
   const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
@@ -71,14 +73,16 @@ const Axes = ({
           ...axisLeft.tickLabelProps(),
           dx: isHorizontal ? 16 : -4
         })}
-        top={isHorizontal ? height - 5 : 0}
+        top={isHorizontal ? height - margin.bottom : 0}
       />
 
       {axisLeft.displayUnit && (
         <UnitLabel
-          unit={firstUnit}
+          unit={axisLeft.unit}
+          units={allUnits}
           x={isHorizontal ? -8 : width + 8}
           y={isHorizontal ? 16 : -2}
+          onUnitChange={data.axisYLeft?.onUnitChange}
         />
       )}
 
@@ -90,7 +94,7 @@ const Axes = ({
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
           angle: yAxisTickLabelRotation,
-          dx: isHorizontal ? -8 : 16,
+          dx: isHorizontal ? -8 : 4,
           dy: isHorizontal ? 4 : -6
         })}
         tickLength={2}
@@ -106,18 +110,20 @@ const Axes = ({
           tickLabelProps={() => ({
             ...axisRight.tickLabelProps(),
             angle: yAxisTickLabelRotation,
-            dx: isHorizontal ? 4 : -8,
+            dx: isHorizontal ? 4 : -4,
             dy: 4
           })}
           tickLength={2}
-          top={isHorizontal ? 0 : height}
+          top={isHorizontal ? 0 : height - margin.bottom}
         />
       )}
       {axisRight.displayUnit && (
         <UnitLabel
-          unit={secondUnit}
-          x={width + 8}
+          unit={axisRight.unit}
+          units={allUnits}
+          x={width}
           y={isHorizontal ? 16 : -(height + 8)}
+          onUnitChange={data.axisYRight?.onUnitChange}
         />
       )}
     </g>

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

@@ -1,5 +1,5 @@
 import { Line, TimeValue } from '../timeSeries/models';
-import { LineChartAxis } from '../../LineChart/models';
+import { ChartAxis } from '../../Chart/models';
 
 export interface LabelProps {
   [x: string]: unknown;
@@ -8,6 +8,8 @@ export interface LabelProps {
 
 export interface Axis {
   displayUnit?: boolean;
+  onUnitChange?: (newUnit: string) => void;
+  unit?: string;
 }
 
 export interface AxisYRight extends Axis {
@@ -18,7 +20,7 @@ export interface AxisX {
   xAxisTickFormat?: string;
 }
 export interface Data
-  extends Omit<LineChartAxis, 'axisX' | 'axisYLeft' | 'axisYRight'> {
+  extends Omit<ChartAxis, 'axisX' | 'axisYLeft' | 'axisYRight'> {
   axisX?: AxisX;
   axisYLeft?: Axis;
   axisYRight?: AxisYRight;

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

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { isNil } from 'ramda';
 import { Axis } from '@visx/visx';
 
@@ -13,6 +15,7 @@ interface AxisYData {
   numTicks?: number;
   tickFormat: (value: unknown) => string;
   tickLabelProps: Axis.TickLabelProps<unknown>;
+  unit: string;
 }
 
 interface AxisRightData extends AxisYData {
@@ -40,19 +43,24 @@ const useAxisY = ({
   const theme = useTheme();
 
   const { lines } = data;
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+  const [firstUnit, secondUnit] = getUnits(lines);
 
   const numTicks = isHorizontal
     ? graphHeight && Math.ceil(graphHeight / 30)
     : graphWidth && Math.ceil(graphWidth / 60);
 
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const hasTwoUnits = !isNil(secondUnit) && !hasMoreThanTwoUnits;
-
-  const displayAxisRight = data?.axisYRight?.display ?? hasTwoUnits;
-  const displayUnitAxisRight = data?.axisYRight?.displayUnit ?? hasTwoUnits;
-  const displayUnitAxisLeft =
-    data?.axisYLeft?.displayUnit ?? !hasMoreThanTwoUnits;
+  const displayAxisRight = data?.axisYRight?.display || Boolean(secondUnit);
+  const displayUnitAxisRight =
+    data?.axisYRight?.displayUnit || Boolean(secondUnit);
+  const displayUnitAxisLeft = data?.axisYLeft?.displayUnit || true;
+  const leftUnit = useMemo(
+    () => data.axisYLeft?.unit ?? firstUnit,
+    [data.axisYLeft?.unit, firstUnit]
+  );
+  const rightUnit = useMemo(
+    () => data.axisYRight?.unit ?? secondUnit,
+    [data.axisYRight?.unit, secondUnit]
+  );
 
   const formatTick =
     ({ unit }) =>
@@ -92,16 +100,18 @@ const useAxisY = ({
       displayUnit: displayUnitAxisLeft,
       numTicks,
       tickFormat: formatTick({
-        unit: hasMoreThanTwoUnits ? '' : firstUnit
+        unit: leftUnit
       }),
-      tickLabelProps: tickLabelPropsAxisLeft
+      tickLabelProps: tickLabelPropsAxisLeft,
+      unit: leftUnit
     },
     axisRight: {
       display: displayAxisRight,
       displayUnit: displayUnitAxisRight,
       numTicks,
-      tickFormat: formatTick({ unit: secondUnit }),
-      tickLabelProps: tickLabelPropsAxisRight
+      tickFormat: formatTick({ unit: rightUnit }),
+      tickLabelProps: tickLabelPropsAxisRight,
+      unit: rightUnit
     }
   };
 };

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

@@ -10,8 +10,8 @@ import { equals, gt, isNil, lte, reduce } from 'ramda';
 
 import { Stack } from '@mui/material';
 
-import Legend from '../../LineChart/Legend';
-import { legendWidth } from '../../LineChart/Legend/Legend.styles';
+import Legend from '../../Chart/Legend';
+import { legendWidth } from '../../Chart/Legend/Legend.styles';
 import { Line } from '../timeSeries/models';
 
 import { useBaseChartStyles } from './useBaseChartStyles';