@centreon/ui 24.5.13 → 24.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.5.13",
+  "version": "24.6.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/LineChart/BasicComponents/Axes/index.tsx

@@ -32,7 +32,7 @@ const Axes = ({
   graphInterval
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
-  const { lines } = data;
+  const { lines, showBorder, yAxisTickLabelRotation } = data;
 
   const { axisLeft, axisRight } = useAxisY({ data, graphHeight: height });
 
@@ -54,6 +54,7 @@ const Axes = ({
       <Axis.AxisBottom
         numTicks={xTickCount}
         scale={xScale}
+        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
         tickFormat={formatAxisTick}
         top={height - 5}
       />
@@ -64,8 +65,12 @@ const Axes = ({
         numTicks={axisLeft?.numTicks}
         orientation="left"
         scale={leftScale}
+        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
         tickFormat={axisLeft.tickFormat}
-        tickLabelProps={axisLeft.tickLabelProps}
+        tickLabelProps={() => ({
+          ...axisLeft.tickLabelProps(),
+          angle: yAxisTickLabelRotation
+        })}
         tickLength={2}
       />
 
@@ -75,8 +80,12 @@ const Axes = ({
           numTicks={axisRight?.numTicks}
           orientation="right"
           scale={rightScale}
+          strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
           tickFormat={axisRight.tickFormat}
-          tickLabelProps={axisRight.tickLabelProps}
+          tickLabelProps={() => ({
+            ...axisRight.tickLabelProps(),
+            angle: yAxisTickLabelRotation
+          })}
           tickLength={2}
         />
       )}

package/src/Graph/LineChart/BasicComponents/Axes/models.ts

@@ -1,4 +1,5 @@
 import { Line, TimeValue } from '../../../common/timeSeries/models';
+import { LineChartAxis } from '../../models';
 
 export interface LabelProps {
   [x: string]: unknown;
@@ -16,7 +17,8 @@ export interface AxisYRight extends Axis {
 export interface AxisX {
   xAxisTickFormat?: string;
 }
-export interface Data {
+export interface Data
+  extends Omit<LineChartAxis, 'axisX' | 'axisYLeft' | 'axisYRight'> {
   axisX?: AxisX;
   axisYLeft?: Axis;
   axisYRight?: AxisYRight;

package/src/Graph/LineChart/BasicComponents/Grids/index.tsx

@@ -1,18 +1,42 @@
+import { useMemo } from 'react';
+
 import { Grid } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
+import { includes } from 'ramda';
+
+import { LineChartAxis } from '../../models';
 
-interface Props {
+interface Props extends Pick<LineChartAxis, 'gridLinesType'> {
   height: number;
   leftScale: ScaleLinear<number, number>;
   width: number;
   xScale: ScaleLinear<number, number>;
 }
 
-const Grids = ({ height, width, leftScale, xScale }: Props): JSX.Element => {
+const Grids = ({
+  height,
+  width,
+  leftScale,
+  xScale,
+  gridLinesType
+}: Props): JSX.Element => {
+  const displayRows = useMemo(
+    () => includes(gridLinesType, ['all', 'horizontal', undefined]),
+    [gridLinesType]
+  );
+  const displayColumns = useMemo(
+    () => includes(gridLinesType, ['all', 'vertical', undefined]),
+    [gridLinesType]
+  );
+
   return (
     <g>
-      <Grid.GridRows height={height} scale={leftScale} width={width} />
-      <Grid.GridColumns height={height} scale={xScale} width={width} />
+      {displayRows && (
+        <Grid.GridRows height={height} scale={leftScale} width={width} />
+      )}
+      {displayColumns && (
+        <Grid.GridColumns height={height} scale={xScale} width={width} />
+      )}
     </g>
   );
 };

package/src/Graph/LineChart/BasicComponents/Lines/Point.tsx

@@ -0,0 +1,36 @@
+import { isNil } from 'ramda';
+
+interface Props {
+  lineColor: string;
+  radius: number;
+  timeTick: Date;
+  xScale;
+  yPoint: number;
+}
+
+const Point = ({
+  timeTick,
+  yPoint,
+  lineColor,
+  xScale,
+  radius
+}: Props): JSX.Element | null => {
+  const x = xScale(timeTick);
+
+  if (isNil(x) || isNil(yPoint)) {
+    return null;
+  }
+
+  return (
+    <circle
+      cx={x}
+      cy={yPoint}
+      fill={lineColor}
+      r={radius}
+      stroke={lineColor}
+      strokeWidth={2}
+    />
+  );
+};
+
+export default Point;

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -2,19 +2,24 @@ import { memo } from 'react';
 
 import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { equals, isNil, prop } from 'ramda';
+import { equals, isNil, pick, prop } from 'ramda';
 
 import { getTime } from '../../../../common/timeSeries';
 import { TimeValue } from '../../../../common/timeSeries/models';
 import { getCurveFactory, getFillColor } from '../../../common';
+import { getStrokeDashArray } from '../../../../common/utils';
 
 interface Props {
   areaColor: string;
   curve: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
+  dotOffset?: number;
   filled: boolean;
   graphHeight: number;
   highlight?: boolean;
   lineColor: string;
+  lineWidth?: number;
   metric_id: number;
   shapeAreaClosed?: Record<string, unknown>;
   shapeLinePath?: Record<string, unknown>;
@@ -37,16 +42,30 @@ const RegularLine = ({
   areaColor,
   transparency,
   graphHeight,
-  curve
+  curve,
+  lineWidth,
+  dotOffset,
+  dashLength,
+  dashOffset
 }: Props): JSX.Element => {
   const curveType = getCurveFactory(curve);
+  const formattedLineWidth = lineWidth ?? 2;
+
   const props = {
     curve: curveType,
     data: timeSeries,
     defined: (value): boolean => !isNil(value[metric_id]),
     opacity: 1,
     stroke: lineColor,
-    strokeWidth: !highlight ? 2 : 3,
+    strokeDasharray: getStrokeDashArray({
+      dashLength,
+      dashOffset,
+      dotOffset,
+      lineWidth: formattedLineWidth
+    }),
+    strokeWidth: highlight
+      ? Math.ceil((formattedLineWidth || 1) * 1.3)
+      : formattedLineWidth,
     unit,
     x: (timeValue): number => xScale(getTime(timeValue)) as number,
     y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
@@ -69,22 +88,32 @@ const RegularLine = ({
   return <Shape.LinePath<TimeValue> data-metric={metric_id} {...props} />;
 };
 
+const memoizedProps = [
+  'curve',
+  'lineColor',
+  'areaColor',
+  'filled',
+  'transparency',
+  'lineWidth',
+  'dotOffset',
+  'dashLength',
+  'dashOffset'
+];
+
 export default memo(RegularLine, (prevProps, nextProps) => {
   const {
     timeSeries: prevTimeSeries,
     graphHeight: prevGraphHeight,
     highlight: prevHighlight,
     xScale: prevXScale,
-    yScale: prevYScale,
-    curve: prevCurve
+    yScale: prevYScale
   } = prevProps;
   const {
     timeSeries: nextTimeSeries,
     graphHeight: nextGraphHeight,
     highlight: nextHighlight,
     xScale: nextXScale,
-    yScale: nextYScale,
-    curve: nextCurve
+    yScale: nextYScale
   } = nextProps;
 
   const prevXScaleRange = prevXScale.range();
@@ -98,6 +127,6 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     equals(prevHighlight, nextHighlight) &&
     equals(prevXScaleRange, nextXScaleRange) &&
     equals(prevYScaleDomain, nextYScaleDomain) &&
-    equals(prevCurve, nextCurve)
+    equals(pick(memoizedProps, prevProps), pick(memoizedProps, nextProps))
   );
 });

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

@@ -1,17 +1,28 @@
 import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
+import { all, equals, isNil, map, not, nth, path, pipe, prop } from 'ramda';
 
-import StackedAnchorPoint from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
+import StackedAnchorPoint, {
+  getYAnchorPoint
+} from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
-import { getTime } from '../../../../common/timeSeries';
+import { getDates, getTime } from '../../../../common/timeSeries';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
+import Point from '../Point';
+import { getPointRadius, getStrokeDashArray } from '../../../../common/utils';
 
 interface Props {
+  areaTransparency?: number;
   curve: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
   displayAnchor: boolean;
+  dotOffset?: number;
+  lineWidth?: number;
   lines: Array<Line>;
+  showArea?: boolean;
+  showPoints?: boolean;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
@@ -23,10 +34,19 @@ const StackLines = ({
   yScale,
   xScale,
   displayAnchor,
-  curve
+  curve,
+  showPoints,
+  showArea,
+  areaTransparency,
+  lineWidth,
+  dashLength,
+  dashOffset,
+  dotOffset
 }: Props): JSX.Element => {
   const curveType = getCurveFactory(curve);
 
+  const formattedLineWidth = lineWidth ?? 2;
+
   return (
     <Shape.AreaStack
       curve={curveType}
@@ -49,6 +69,10 @@ const StackLines = ({
           const { areaColor, transparency, lineColor, highlight, metric_id } =
             nth(index, lines) as Line;
 
+          const formattedTransparency = isNil(areaTransparency)
+            ? transparency || 80
+            : areaTransparency;
+
           return (
             <g key={`stack-${prop('key', stack)}`}>
               {displayAnchor && (
@@ -62,13 +86,48 @@ const StackLines = ({
                   yScale={yScale}
                 />
               )}
+              {showPoints &&
+                getDates(timeSeries).map((timeTick) => (
+                  <Point
+                    key={timeTick.toString()}
+                    lineColor={lineColor}
+                    metric_id={metric_id}
+                    radius={getPointRadius(lineWidth)}
+                    timeSeries={timeSeries}
+                    timeTick={timeTick}
+                    xScale={xScale}
+                    yPoint={getYAnchorPoint({
+                      stackValues: stack as unknown as Array<StackValue>,
+                      timeTick,
+                      yScale
+                    })}
+                    yScale={yScale}
+                  />
+                ))}
               <path
                 d={linePath(stack) || ''}
                 data-metric={metric_id}
-                fill={getFillColor({ areaColor, transparency })}
+                fill={
+                  equals(showArea, false)
+                    ? 'transparent'
+                    : getFillColor({
+                        areaColor: areaColor || lineColor,
+                        transparency: formattedTransparency
+                      })
+                }
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}
-                strokeWidth={highlight ? 2 : 1}
+                strokeDasharray={getStrokeDashArray({
+                  dashLength,
+                  dashOffset,
+                  dotOffset,
+                  lineWidth: formattedLineWidth
+                })}
+                strokeWidth={
+                  highlight
+                    ? Math.ceil(formattedLineWidth * 1.3)
+                    : formattedLineWidth
+                }
               />
             </g>
           );

package/src/Graph/LineChart/BasicComponents/Lines/index.tsx

@@ -3,11 +3,15 @@ import { MutableRefObject } from 'react';
 import { ScaleLinear } from 'd3-scale';
 import { isNil } from 'ramda';
 
+import { getPointRadius } from '../../../common/utils';
 import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
-import RegularAnchorPoint from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
+import RegularAnchorPoint, {
+  getYAnchorPoint
+} from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
 import { DisplayAnchor, GlobalAreaLines } from '../../models';
 import {
+  getDates,
   getStackedYScale,
   getUnits,
   getYScale
@@ -23,34 +27,49 @@ import {
   canDisplayThreshold,
   requiredNumberLinesThreshold
 } from './Threshold/models';
+import Point from './Point';
 
 interface Props extends GlobalAreaLines {
+  areaTransparency?: number;
   curve: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
   displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
+  dotOffset?: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   height: number;
   leftScale: ScaleLinear<number, number>;
+  lineWidth?: number;
   rightScale: ScaleLinear<number, number>;
+  showArea?: boolean;
+  showPoints?: boolean;
   timeSeries: Array<TimeValue>;
   width: number;
   xScale: ScaleLinear<number, number>;
 }
 
 const Lines = ({
+  areaTransparency,
   height,
   graphSvgRef,
   width,
   displayAnchor,
   leftScale,
   rightScale,
+  curve,
   xScale,
   timeSeries,
   displayedLines,
   areaThresholdLines,
   areaStackedLines,
   areaRegularLines,
-  curve
+  showArea,
+  showPoints,
+  lineWidth,
+  dotOffset,
+  dashLength,
+  dashOffset
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -73,11 +92,18 @@ const Lines = ({
 
   const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
   const commonStackedLinesProps = {
+    areaTransparency,
     curve,
+    dashLength,
+    dashOffset,
     displayAnchor: displayGuidingLines,
+    dotOffset,
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
+    lineWidth,
+    showArea,
+    showPoints,
     xScale,
     yScale: stackedYScale
   };
@@ -153,7 +179,7 @@ const Lines = ({
                 <g key={metric_id}>
                   {displayGuidingLines && (
                     <RegularAnchorPoint
-                      areaColor={areaColor}
+                      areaColor={areaColor || lineColor}
                       lineColor={lineColor}
                       metric_id={metric_id}
                       timeSeries={timeSeries}
@@ -162,16 +188,43 @@ const Lines = ({
                       yScale={yScale}
                     />
                   )}
+                  {showPoints &&
+                    getDates(timeSeries).map((timeTick) => (
+                      <Point
+                        key={timeTick.toString()}
+                        lineColor={lineColor}
+                        metric_id={metric_id}
+                        radius={getPointRadius(lineWidth)}
+                        timeSeries={timeSeries}
+                        timeTick={timeTick}
+                        xScale={xScale}
+                        yPoint={getYAnchorPoint({
+                          metric_id,
+                          timeSeries,
+                          timeTick,
+                          yScale
+                        })}
+                        yScale={yScale}
+                      />
+                    ))}
                   <RegularLine
-                    areaColor={areaColor}
+                    areaColor={areaColor || lineColor}
                     curve={curve}
-                    filled={filled}
+                    dashLength={dashLength}
+                    dashOffset={dashOffset}
+                    dotOffset={dotOffset}
+                    filled={isNil(showArea) ? filled : showArea}
                     graphHeight={height}
                     highlight={highlight}
                     lineColor={lineColor}
+                    lineWidth={lineWidth}
                     metric_id={metric_id}
                     timeSeries={timeSeries}
-                    transparency={transparency}
+                    transparency={
+                      isNil(areaTransparency)
+                        ? transparency || 80
+                        : areaTransparency
+                    }
                     unit={unit}
                     xScale={xScale}
                     yScale={yScale}

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -17,7 +17,7 @@ interface Props {
   yScale: ScaleLinear<number, number>;
 }
 
-const getYAnchorPoint = ({
+export const getYAnchorPoint = ({
   timeTick,
   timeSeries,
   yScale,

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx

@@ -30,7 +30,7 @@ const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
   return pipe(map(toTimeTick), map(toDate))(stackValues);
 };
 
-const getYAnchorPoint = ({
+export const getYAnchorPoint = ({
   timeTick,
   stackValues,
   yScale

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

@@ -5,19 +5,25 @@ import { Box, Typography } from '@mui/material';
 
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
 import { formatMetricValueWithUnit } from '../../../common/timeSeries';
+import { Tooltip } from '../../models';
 
 import { useGraphValueTooltip } from './useGraphValueTooltip';
 import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
 
-interface Props {
+interface Props extends Pick<Tooltip, 'sortOrder'> {
   base: number;
+  isSingleMode: boolean;
 }
 
-const GraphValueTooltip = ({ base }: Props): JSX.Element | null => {
+const GraphValueTooltip = ({
+  base,
+  isSingleMode,
+  sortOrder
+}: Props): JSX.Element | null => {
   const { classes } = useGraphValueTooltipStyles();
   const mousePosition = useAtomValue(mousePositionAtom);
 
-  const graphValue = useGraphValueTooltip();
+  const graphValue = useGraphValueTooltip({ isSingleMode, sortOrder });
 
   if (isNil(graphValue) || isNil(mousePosition)) {
     return null;

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -1,15 +1,31 @@
 import { useAtomValue } from 'jotai';
-import { isNil } from 'ramda';
+import {
+  always,
+  cond,
+  equals,
+  filter,
+  isNil,
+  prop,
+  reverse,
+  sortBy
+} from 'ramda';
 
 import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
 import { useLocaleDateTimeFormat } from '../../../../utils';
-import { GraphTooltipData } from '../../models';
+import { GraphTooltipData, Tooltip } from '../../models';
 
 interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {
   dateTime: string;
 }
 
-export const useGraphValueTooltip = (): UseGraphValueTooltipState | null => {
+interface UseGraphValueTooltipProps extends Pick<Tooltip, 'sortOrder'> {
+  isSingleMode: boolean;
+}
+
+export const useGraphValueTooltip = ({
+  isSingleMode,
+  sortOrder
+}: UseGraphValueTooltipProps): UseGraphValueTooltipState | null => {
   const { toDate, toTime } = useLocaleDateTimeFormat();
   const graphTooltipData = useAtomValue(graphTooltipDataAtom);
 
@@ -19,9 +35,25 @@ export const useGraphValueTooltip = (): UseGraphValueTooltipState | null => {
 
   const formattedDateTime = `${toDate(graphTooltipData.date)} / ${toTime(graphTooltipData.date)}`;
 
+  const filteredMetrics = isSingleMode
+    ? filter(
+        ({ id }) => equals(id, graphTooltipData.highlightedMetricId),
+        graphTooltipData.metrics
+      )
+    : graphTooltipData.metrics;
+
+  const sortedMetrics = cond([
+    [equals('name'), always(sortBy(prop('name'), filteredMetrics))],
+    [equals('ascending'), always(sortBy(prop('value'), filteredMetrics))],
+    [
+      equals('descending'),
+      always(reverse(sortBy(prop('value'), filteredMetrics)))
+    ]
+  ])(sortOrder);
+
   return {
     dateTime: formattedDateTime,
     highlightedMetricId: graphTooltipData.highlightedMetricId,
-    metrics: graphTooltipData.metrics
+    metrics: sortedMetrics
   };
 };

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx

@@ -11,7 +11,7 @@ import { GraphInterval, Interval } from '../../models';
 import { TimeShiftDirection } from './models';
 import { useTimeShiftZones } from './useTimeShiftZones';
 
-export const timeShiftZoneWidth = 50;
+export const timeShiftZoneWidth = 30;
 
 const useStyles = makeStyles()({
   translationZone: {
@@ -53,7 +53,7 @@ const TimeShiftZone = ({
       className={classes.translationZone}
       fill={
         equals(directionHovered, direction)
-          ? alpha(theme.palette.background.paper, 0.2)
+          ? alpha(theme.palette.background.paper, 0.5)
           : 'transparent'
       }
       height={graphHeight}

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/index.tsx

@@ -36,7 +36,7 @@ const TimeShiftZones = ({
 
   const xIcon = isBackward
     ? negate(marginLeft)
-    : graphWidth + timeShiftIconSize;
+    : graphWidth + timeShiftIconSize / 2;
 
   const yIcon = graphHeight / 2 - timeShiftIconSize / 2;
 
@@ -56,16 +56,6 @@ const TimeShiftZones = ({
 
   return (
     <>
-      {displayIcon && (
-        <TimeShiftIcon
-          Icon={Icon}
-          ariaLabel={ariaLabelIcon}
-          directionHovered={directionHovered}
-          xIcon={xIcon}
-          yIcon={yIcon}
-        />
-      )}
-
       <TimeShiftZone
         direction={TimeShiftDirection.backward}
         directionHovered={directionHovered}
@@ -78,6 +68,15 @@ const TimeShiftZones = ({
         onDirectionHover={setDirectionHovered}
         {...commonData}
       />
+      {displayIcon && (
+        <TimeShiftIcon
+          Icon={Icon}
+          ariaLabel={ariaLabelIcon}
+          directionHovered={directionHovered}
+          xIcon={xIcon}
+          yIcon={yIcon}
+        />
+      )}
     </>
   );
 };