@centreon/ui 24.10.12 → 24.10.13

package/src/Graph/Chart/useChartData.ts

@@ -4,6 +4,7 @@ import {
   compose,
   flatten,
   groupBy,
+  isEmpty,
   isNil,
   lensPath,
   pipe,
@@ -29,6 +30,8 @@ interface Props {
   start?: string;
 }
 
+const getBoolean = (value) => Boolean(Number(value));
+
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
   const adjustedDataRef = useRef<Data>();
 
@@ -36,13 +39,27 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
     if (isNil(data)) {
       return data;
     }
+
+    if (isEmpty(data.metrics) || isEmpty(data.times)) {
+      return undefined;
+    }
+
     const metricsGroupedByColor = groupBy(
       (metric) => metric.ds_data.ds_color_line
     )(data?.metrics || []);
 
     const newMetrics = Object.entries(metricsGroupedByColor).map(
       ([color, value]) => {
-        return value?.map((metric, index) =>
+        const adjustedValue = value?.map((item) => ({
+          ...item,
+          ds_data: {
+            ...item?.ds_data,
+            ds_invert: getBoolean(item?.ds_data?.ds_invert),
+            ds_filled: getBoolean(item?.ds_data?.ds_filled)
+          }
+        }));
+
+        return adjustedValue?.map((metric, index) =>
           set(
             lensPath(['ds_data', 'ds_color_line']),
             emphasizeCurveColor({ color, index }),
@@ -70,6 +87,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
     const { title } = dataWithAdjustedMetricsColor.global;
 
     const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
+
     const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
 
     adjustedDataRef.current = {

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { T, equals, gt, lt } from 'ramda';
@@ -13,6 +13,7 @@ import { HeatMapProps } from './model';
 const gap = 8;
 const maxTileSize = 120;
 const smallestTileSize = 44;
+const toleratedRangeWidth = 10;
 
 const ResponsiveHeatMap = <TData,>({
   width,
@@ -28,6 +29,7 @@ const ResponsiveHeatMap = <TData,>({
   width: number;
 }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
+  const previousTileSize = useRef(0);
 
   const tileSize = useMemo(() => {
     const scaleWidth = scaleLinear({
@@ -44,6 +46,13 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
+    const canUpdateTileSize =
+      Math.abs(tileWidth - previousTileSize.current) > toleratedRangeWidth;
+
+    if (!canUpdateTileSize) {
+      return previousTileSize.current;
+    }
+
     if (
       (lt(height, maxTileSize) ||
         (lt(width, 680) && gt(maxTotalTilesWidth, width))) &&
@@ -60,6 +69,8 @@ const ResponsiveHeatMap = <TData,>({
   }, [width, tiles, height]);
 
   const isSmallestSize = equals(tileSize, smallestTileSize);
+  const isMediumSize = !isSmallestSize && lt(tileSize, 90);
+  previousTileSize.current = tileSize;
 
   if (equals(width, 0)) {
     return null;
@@ -100,7 +111,14 @@ const ResponsiveHeatMap = <TData,>({
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>
-              {children({ backgroundColor, data, id, isSmallestSize })}
+              {children({
+                backgroundColor,
+                data,
+                id,
+                isSmallestSize,
+                tileSize,
+                isMediumSize
+              })}
             </div>
           </Tooltip>
         </Box>

package/src/Graph/HeatMap/model.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 interface Tile<TData> {
   backgroundColor: string;
@@ -11,6 +11,8 @@ interface ChildrenProps<TData> {
   data: TData;
   id: string;
   isSmallestSize: boolean;
+  isMediumSize?: boolean;
+  tileSize?: number;
 }
 
 export interface HeatMapProps<TData> {
@@ -19,7 +21,9 @@ export interface HeatMapProps<TData> {
     backgroundColor,
     id,
     data,
-    isSmallestSize
+    isSmallestSize,
+    tileSize,
+    isMediumSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
   displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;

package/src/Graph/Legend/Legend.styles.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  container: {
+    padding: theme.spacing(1),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    width: 'fit-content'
+  }
+}));

package/src/Graph/Legend/Legend.tsx

@@ -1,9 +1,13 @@
 import { LegendOrdinal } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
 
+import { equals } from 'ramda';
+import { useStyles } from './Legend.styles';
 import { LegendProps } from './models';
 
 const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
+  const { classes } = useStyles();
+
   const legendScale = scaleOrdinal({
     domain: scale.domain,
     range: scale.range
@@ -12,8 +16,9 @@ const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
   return (
     <LegendOrdinal
       direction={direction}
-      labelMargin="0 16px 0 0"
       scale={legendScale}
+      labelMargin={equals(direction, 'row') ? '0 12px 0 0' : '0 0 0 0'}
+      className={classes.container}
     />
   );
 };

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -4,7 +4,7 @@ import { animated, useSpring } from '@react-spring/web';
 import { scaleLinear } from '@visx/scale';
 import { Bar } from '@visx/shape';
 import { Group, Tooltip } from '@visx/visx';
-import { equals, flatten, head, lt, pluck } from 'ramda';
+import { clamp, equals, flatten, head, pluck } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -40,8 +40,6 @@ const ResponsiveSingleBar = ({
   const { classes } = useTooltipStyles();
   const theme = useTheme();
 
-  const isSmallHeight = lt(height, 150);
-
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
   const thresholdValues = thresholds.enabled
@@ -72,7 +70,7 @@ const ResponsiveSingleBar = ({
     [latestMetricData, thresholds, theme]
   );
 
-  const isSmall = equals(size, 'small') || isSmallHeight;
+  const isSmall = equals(size, 'small');
 
   const textStyle = isSmall ? theme.typography.h6 : theme.typography.h4;
 
@@ -118,14 +116,15 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
-  const barHeight = isSmallHeight ? barHeights.small : barHeights[size];
-
   const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
 
-  const realBarHeight =
-    !isSmall && textHeight + barHeight > height
-      ? height - textHeight - 2 * margins.top
-      : barHeight;
+  const realBarHeight = isSmall
+    ? barHeights.small
+    : clamp(
+        barHeights.small,
+        barHeights.medium,
+        height - textHeight - 2 * margins.top
+      );
 
   return (
     <div

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -63,15 +63,15 @@ export const ThresholdLine = ({
         strokeDasharray="6, 6"
         strokeWidth={2}
         x1={scaledValue}
-        x2={scaledValue}
+        x2={scaledValue + 1}
         y1={
           isSmall
-            ? groupMargin - lineMargin + 6
+            ? groupMargin - lineMargin
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 2
+            ? barHeight + groupMargin - lineMargin + margins.top - 6
             : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
       />
@@ -80,15 +80,15 @@ export const ThresholdLine = ({
         stroke="transparent"
         strokeWidth={5}
         x1={scaledValue}
-        x2={scaledValue}
+        x2={scaledValue + 1}
         y1={
           isSmall
-            ? groupMargin - lineMargin + 5
+            ? groupMargin - lineMargin
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top + 5
+            ? barHeight + groupMargin - lineMargin + margins.top - 6
             : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
         onMouseEnter={onMouseEnter}

package/src/Graph/Text/Text.styles.ts

@@ -11,13 +11,13 @@ export const useTextStyles = makeStyles()((theme) => ({
     gap: theme.spacing(1),
     justifyContent: 'center'
   },
-  threshold: {
+  thresholdLabel: {
     textAlign: 'center'
   },
   thresholds: {
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(5),
+    gap: theme.spacing(1),
     whiteSpace: 'nowrap',
     width: '100%'
   },

package/src/Graph/Text/Text.tsx

@@ -10,6 +10,8 @@ import {
 } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 
+import { type ReactElement } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import { useTextStyles } from './Text.styles';
 
 export interface Props {
@@ -21,6 +23,8 @@ export interface Props {
     warning: string;
   };
   thresholds: Thresholds;
+  prefThresholds?: number;
+  minThresholds?: string;
 }
 
 export const Text = ({
@@ -28,10 +32,13 @@ export const Text = ({
   data,
   displayAsRaw,
   labels,
-  baseColor
-}: Props): JSX.Element | null => {
+  baseColor,
+  prefThresholds = 14,
+  minThresholds
+}: Props): ReactElement | null => {
   const theme = useTheme();
   const { classes, cx } = useTextStyles();
+  const { ref, width = 0 } = useResizeObserver();
 
   if (isNil(data)) {
     return null;
@@ -62,11 +69,15 @@ export const Text = ({
     })
   );
 
+  const canDisplayThresholdLabel = width > 150;
+  const warningLabel = canDisplayThresholdLabel ? `${labels.warning}: ` : '';
+  const criticalLabel = canDisplayThresholdLabel ? `${labels.critical}: ` : '';
+
   return (
-    <div className={classes.graphText}>
+    <div className={classes.graphText} ref={ref}>
       <FluidTypography
         max="40px"
-        pref={16}
+        pref={14}
         sx={{ color, fontWeight: 'bold', textAlign: 'center' }}
         text={
           formatMetricValueWithUnit({
@@ -80,18 +91,20 @@ export const Text = ({
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <FluidTypography
-            containerClassName={cx(classes.threshold, classes.warning)}
+            containerClassName={cx(classes.thresholdLabel, classes.warning)}
             max="30px"
-            pref={14}
-            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
+            pref={prefThresholds}
+            text={`${warningLabel}${warningThresholdLabels.join(' - ')}`}
             variant="h5"
+            min={minThresholds}
           />
           <FluidTypography
-            containerClassName={cx(classes.threshold, classes.critical)}
+            containerClassName={cx(classes.thresholdLabel, classes.critical)}
             max="30px"
-            pref={14}
-            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
+            pref={prefThresholds}
+            text={`${criticalLabel}${criticalThresholdLabels.join(' - ')}`}
             variant="h5"
+            min={minThresholds}
           />
         </div>
       )}

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -0,0 +1,152 @@
+import {
+  dateTimeFormat,
+  getXAxisTickFormat,
+  useLocaleDateTimeFormat
+} from '@centreon/ui';
+
+import { Typography, useTheme } from '@mui/material';
+
+import dayjs from 'dayjs';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+import { userAtom } from '@centreon/ui-context';
+import { Axis } from '@visx/visx';
+
+import { scaleTime } from '@visx/scale';
+import { BarRounded } from '@visx/shape';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+import { useCallback } from 'react';
+import { Tooltip } from '../../components';
+import { margins } from '../common/margins';
+import type { TimelineProps } from './models';
+import { useStyles } from './timeline.styles';
+import { useTimeline } from './useTimeline';
+
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+
+interface Props extends TimelineProps {
+  width: number;
+  height: number;
+}
+
+const axisPadding = 4;
+
+const Timeline = ({
+  data,
+  startDate,
+  endDate,
+  width,
+  height,
+  TooltipContent,
+  tooltipClassName
+}: Props) => {
+  const { classes, cx } = useStyles();
+  const { format } = useLocaleDateTimeFormat();
+  const { timezone } = useAtomValue(userAtom);
+
+  const theme = useTheme();
+
+  const xScale = scaleTime({
+    domain: [new Date(startDate), new Date(endDate)],
+    range: [margins.left, width - margins.right],
+    clamp: true
+  });
+
+  const numTicks = Math.min(Math.ceil(width / 82), 12);
+
+  const { getTimeDifference } = useTimeline();
+
+  const getFormattedStart = useCallback(
+    (start) =>
+      format({
+        date: dayjs(start).tz(timezone).toDate(),
+        formatString: dateTimeFormat
+      }),
+    [dateTimeFormat, timezone]
+  );
+
+  const getFormattedEnd = useCallback(
+    (end) =>
+      format({
+        date: dayjs(end).tz(timezone).toDate(),
+        formatString: dateTimeFormat
+      }),
+    [dateTimeFormat, timezone]
+  );
+
+  return (
+    <svg width={width} height={height + axisPadding}>
+      {data.map(({ start, end, color }, idx) => (
+        <Tooltip
+          hasCaret
+          classes={{
+            tooltip: cx(classes.tooltip, tooltipClassName)
+          }}
+          followCursor={false}
+          key={`rect-${start}--${end}`}
+          label={
+            TooltipContent ? (
+              <TooltipContent
+                start={getFormattedStart(start)}
+                end={getFormattedEnd(end)}
+                color={color}
+                duration={getTimeDifference({
+                  start: dayjs(start),
+                  end: dayjs(end)
+                })}
+              />
+            ) : (
+              <div style={{ color }}>
+                <Typography variant="body2">
+                  {getTimeDifference({ start: dayjs(start), end: dayjs(end) })}
+                </Typography>
+                <Typography variant="body2">{`${format({ date: start, formatString: 'L LT' })} - ${format({ date: end, formatString: 'L LT' })}`}</Typography>
+              </div>
+            )
+          }
+          position="top"
+        >
+          <g>
+            <BarRounded
+              x={xScale(dayjs(start).tz(timezone))}
+              y={0}
+              width={
+                xScale(dayjs(end).tz(timezone)) -
+                xScale(dayjs(start).tz(timezone))
+              }
+              height={height - margins.bottom}
+              fill={color}
+              left={equals(idx, 0)}
+              radius={4}
+              right={equals(idx, data.length - 1)}
+            />
+          </g>
+        </Tooltip>
+      ))}
+
+      <Axis.AxisBottom
+        top={height - margins.bottom + axisPadding}
+        scale={xScale}
+        numTicks={numTicks}
+        tickFormat={(value) =>
+          format({
+            date: new Date(value),
+            formatString: getXAxisTickFormat({ end: endDate, start: startDate })
+          })
+        }
+        stroke={theme.palette.text.primary}
+        tickStroke={theme.palette.text.primary}
+        tickLabelProps={() => ({
+          fill: theme.palette.text.primary,
+          fontSize: theme.typography.caption.fontSize,
+          textAnchor: 'middle'
+        })}
+      />
+    </svg>
+  );
+};
+
+export default Timeline;

package/src/Graph/Timeline/Timeline.cypress.spec.tsx

@@ -0,0 +1,148 @@
+import { userAtom } from '@centreon/ui-context';
+import { Provider, createStore } from 'jotai';
+import Timeline from './Timeline';
+import { Tooltip } from './models';
+
+const data = [
+  {
+    start: '2024-09-09T10:57:42+02:00',
+    end: '2024-09-09T11:15:00+02:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-09T11:15:00+02:00',
+    end: '2024-09-09T11:30:00+02:00',
+    color: 'red'
+  },
+  {
+    start: '2024-09-09T11:30:00+02:00',
+    end: '2024-09-09T11:45:00+02:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-09T11:45:00+02:00',
+    end: '2024-09-09T12:00:00+02:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-09T12:00:00+02:00',
+    end: '2024-09-09T12:20:00+02:00',
+    color: 'red'
+  },
+  {
+    start: '2024-09-09T12:20:00+02:00',
+    end: '2024-09-09T12:40:00+02:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-09T12:40:00+02:00',
+    end: '2024-09-09T12:57:42+02:00',
+    color: 'green'
+  }
+];
+
+const startDate = '2024-09-09T10:57:42+02:00';
+const endDate = '2024-09-09T12:57:42+02:00';
+
+const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
+  <div
+    data-testid="tooltip-content"
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '10px',
+      padding: '5px'
+    }}
+  >
+    <span>{start}</span>
+    <span>{end}</span>
+    <span>{color}</span>
+    <span>{duration}</span>
+  </div>
+);
+
+const store = createStore();
+store.set(userAtom, { timezone: 'Europe/Paris', locale: 'en' });
+
+const initialize = (displayDefaultTooltip = true): void => {
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <div
+          style={{
+            height: '100px',
+            width: '70%'
+          }}
+        >
+          <Timeline
+            data={data}
+            startDate={startDate}
+            endDate={endDate}
+            TooltipContent={displayDefaultTooltip ? undefined : TooltipContent}
+          />
+        </div>
+      </Provider>
+    )
+  });
+};
+
+describe('Timeline', () => {
+  it('checks that the correct number of bars are rendered', () => {
+    initialize();
+
+    cy.get('path').should('have.length', data.length);
+
+    cy.makeSnapshot();
+  });
+
+  it('checks that each bar has the correct color', () => {
+    initialize();
+
+    data.forEach(({ color }, index) => {
+      cy.get('path').eq(index).should('have.attr', 'fill', color);
+    });
+  });
+
+  it('displays tooltip with correct information when hovered over a bar', () => {
+    initialize(false);
+
+    cy.get('path').first().trigger('mouseover');
+
+    cy.get('[data-testid="tooltip-content"]').within(() => {
+      cy.contains('09/09/2024 10:57 AM').should('be.visible');
+      cy.contains('09/09/2024 11:15 AM').should('be.visible');
+      cy.contains('green').should('be.visible');
+      cy.contains('17 minutes').should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default tooltip with correct information when hovered over a bar', () => {
+    initialize();
+
+    cy.get('path').first().trigger('mouseover');
+
+    cy.get('[role="tooltip"]').within(() => {
+      cy.contains('09/09/2024 10:57 AM')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+      cy.contains('09/09/2024 11:15 AM')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+      cy.contains('17 minutes')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays correct tick labels on the x-axis', () => {
+    initialize();
+
+    cy.get('.visx-axis-bottom .visx-axis-tick').first().contains('11:00');
+  });
+});