@centreon/ui 24.5.13 → 24.6.0

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

@@ -16,9 +16,15 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       color: theme.typography.body1.color
     },
     item: {
-      minWidth: theme.spacing(legendWidth)
+      width: 'max-content'
     },
     items: {
+      '&[data-as-list="true"]': {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: 'fit-content'
+      },
       '&[data-mode="compact"]': {
         gridAutoRows: theme.spacing(legendItemHeightCompact),
         height: limitLegendRows
@@ -38,9 +44,16 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       width: '100%'
     },
     legend: {
-      marginLeft: margin.left,
-      marginRight: margin.right,
-      overflow: 'hidden'
+      '&[data-display-side="false"]': {
+        marginLeft: margin.left,
+        marginRight: margin.right,
+        overflow: 'hidden'
+      },
+      '&[data-display-side="true"]': {
+        height: '100%',
+        marginTop: `${margin.top / 2}px`,
+        overflowY: 'auto'
+      }
     },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),
@@ -66,6 +79,9 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
     container: {
       width: '100%'
     },
+    containerList: {
+      width: 'fit-content'
+    },
     disabled: {
       color: theme.palette.text.disabled
     },
@@ -77,6 +93,9 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       width: theme.spacing(1.5)
     },
     legendName: {
+      maxWidth: '75%'
+    },
+    legendNameSide: {
       maxWidth: '95%'
     },
     markerAndLegendName: {
@@ -95,6 +114,10 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       fontSize: '0.75rem',
       fontWeight: theme.typography.fontWeightMedium,
       lineHeight: 1
+    },
+    textList: {
+      fontSize: '0.75rem',
+      fontWeight: theme.typography.fontWeightMedium
     }
   })
 );

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -15,6 +15,8 @@ import LegendContent from './LegendContent';
 interface Props {
   color: string;
   disabled?: boolean;
+  isDisplayedOnSide: boolean;
+  isListMode: boolean;
   line: Line;
   minMaxAvg?;
   value?: string | null;
@@ -25,7 +27,9 @@ const LegendHeader = ({
   color,
   disabled,
   value,
-  minMaxAvg
+  minMaxAvg,
+  isListMode,
+  isDisplayedOnSide
 }: Props): JSX.Element => {
   const { classes, cx } = useLegendHeaderStyles({ color });
 
@@ -36,7 +40,9 @@ const LegendHeader = ({
   const legendName = legend || name;
 
   return (
-    <div className={classes.container}>
+    <div
+      className={cx(!isListMode ? classes.container : classes.containerList)}
+    >
       <Tooltip
         followCursor={false}
         label={
@@ -60,7 +66,7 @@ const LegendHeader = ({
             legendName
           )
         }
-        placement="top"
+        placement={isListMode ? 'right' : 'top'}
       >
         <div className={classes.markerAndLegendName}>
           <div
@@ -68,7 +74,11 @@ const LegendHeader = ({
             className={cx(classes.icon, { [classes.disabled]: disabled })}
           />
           <EllipsisTypography
-            className={cx(classes.text, classes.legendName)}
+            className={cx(
+              classes.text,
+              !isListMode && classes.legendName,
+              !isListMode && isDisplayedOnSide && classes.legendNameSide
+            )}
             data-mode={
               value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
             }

package/src/Graph/LineChart/Legend/index.tsx

@@ -1,6 +1,6 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
 
-import { prop, slice, sortBy } from 'ramda';
+import { equals, prop, slice, sortBy } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -9,6 +9,8 @@ import { useMemoComponent } from '@centreon/ui';
 import { formatMetricValue } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
+import { LegendModel } from '../models';
+import { margin } from '../common';
 
 import { useStyles } from './Legend.styles';
 import LegendHeader from './LegendHeader';
@@ -16,8 +18,9 @@ import { GetMetricValueProps, LegendDisplayMode } from './models';
 import useLegend from './useLegend';
 import LegendContent from './LegendContent';
 
-interface Props {
+interface Props extends Pick<LegendModel, 'placement' | 'mode'> {
   base: number;
+  height: number | null;
   limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
@@ -33,7 +36,10 @@ const MainLegend = ({
   limitLegend = false,
   renderExtraComponent,
   setLinesGraph,
-  shouldDisplayLegendInCompactMode
+  shouldDisplayLegendInCompactMode,
+  placement,
+  height,
+  mode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
   const theme = useTheme();
@@ -43,6 +49,8 @@ const MainLegend = ({
 
   const sortedData = sortBy(prop('metric_id'), lines);
 
+  const isListMode = useMemo(() => equals(mode, 'list'), [mode]);
+
   const displayedLines = limitLegend
     ? slice(0, limitLegend, sortedData)
     : sortedData;
@@ -68,13 +76,26 @@ const MainLegend = ({
     selectMetricLine(metric_id);
   };
 
-  const mode = shouldDisplayLegendInCompactMode
-    ? LegendDisplayMode.Compact
-    : LegendDisplayMode.Normal;
+  const itemMode =
+    !isListMode && shouldDisplayLegendInCompactMode
+      ? LegendDisplayMode.Compact
+      : LegendDisplayMode.Normal;
 
   return (
-    <div className={classes.legend}>
-      <div className={classes.items} data-mode={mode}>
+    <div
+      className={classes.legend}
+      data-display-side={!equals(placement, 'bottom')}
+      style={{
+        height: !equals(placement, 'bottom')
+          ? height - margin.top / 2
+          : undefined
+      }}
+    >
+      <div
+        className={classes.items}
+        data-as-list={isListMode || !equals(placement, 'bottom')}
+        data-mode={itemMode}
+      >
         {displayedLines.map((line) => {
           const { color, display, highlight, metric_id } = line;
 
@@ -112,12 +133,14 @@ const MainLegend = ({
               <LegendHeader
                 color={markerColor}
                 disabled={!display}
+                isDisplayedOnSide={!equals(placement, 'bottom')}
+                isListMode={isListMode}
                 line={line}
                 minMaxAvg={
                   shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
                 }
               />
-              {!shouldDisplayLegendInCompactMode && (
+              {!shouldDisplayLegendInCompactMode && !isListMode && (
                 <div>
                   <div className={classes.minMaxAvgContainer}>
                     {minMaxAvg.map(({ label, value }) => (
@@ -145,7 +168,10 @@ const Legend = (props: Props): JSX.Element => {
     limitLegend,
     lines,
     base,
-    shouldDisplayLegendInCompactMode
+    shouldDisplayLegendInCompactMode,
+    placement,
+    height,
+    mode
   } = props;
 
   return useMemoComponent({
@@ -155,7 +181,10 @@ const Legend = (props: Props): JSX.Element => {
       base,
       toggable,
       limitLegend,
-      shouldDisplayLegendInCompactMode
+      shouldDisplayLegendInCompactMode,
+      placement,
+      height,
+      mode
     ]
   });
 };

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

@@ -5,15 +5,31 @@ import dataLastDayWithNullValues from './mockedData/lastDayWithNullValues.json';
 import dataLastDayWithIncompleteValues from './mockedData/lastDayWithIncompleteValues.json';
 import dataCurvesWithSameColor from './mockedData/curvesWithSameColor.json';
 import { args as argumentsData } from './helpers/doc';
+import { LineChartProps } from './models';
 
 import WrapperLineChart from '.';
 
-const initialize = (data = dataLastDay): void => {
+interface Props
+  extends Pick<LineChartProps, 'legend' | 'tooltip' | 'axis' | 'lineStyle'> {
+  data?: LineChartData;
+}
+
+const initialize = ({
+  data = dataLastDay,
+  tooltip,
+  legend,
+  axis,
+  lineStyle
+}: Props): void => {
   cy.mount({
     Component: (
       <WrapperLineChart
         {...argumentsData}
+        axis={axis}
         data={data as unknown as LineChartData}
+        legend={legend}
+        lineStyle={lineStyle}
+        tooltip={tooltip}
       />
     )
   });
@@ -22,7 +38,7 @@ const initialize = (data = dataLastDay): void => {
 describe('Line chart', () => {
   describe('Tooltip', () => {
     it('displays a tooltip when the graph is hovered', () => {
-      initialize();
+      initialize({});
 
       cy.contains('oracle-buffer-hit-ratio graph on srv-oracle-users').should(
         'be.visible'
@@ -44,7 +60,7 @@ describe('Line chart', () => {
     });
 
     it('displays a metric highlighted when the graph is hovered and the metric is the nearest point', () => {
-      initialize();
+      initialize({});
 
       cy.contains('Min: 70.31').should('be.visible');
 
@@ -53,23 +69,23 @@ describe('Line chart', () => {
       cy.get('[data-metric="querytime"]').should(
         'have.attr',
         'data-highlight',
-        'true'
+        'false'
       );
       cy.get('[data-metric="connTime"]').should(
         'have.attr',
         'data-highlight',
-        'false'
+        'true'
       );
 
       cy.makeSnapshot();
     });
 
     it('does not display the tooltip when null values are hovered', () => {
-      initialize(dataLastDayWithNullValues);
+      initialize({ data: dataLastDayWithNullValues });
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1160, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1185, 100);
 
       cy.get('[data-metric="querytime"]').should('not.exist');
 
@@ -77,21 +93,77 @@ describe('Line chart', () => {
     });
 
     it('displays the tooltip with defined values whent the graph is hovered', () => {
-      initialize(dataLastDayWithIncompleteValues);
+      initialize({ data: dataLastDayWithIncompleteValues });
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1150, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1162, 100);
 
       cy.get('[data-metric="querytime"]').should('be.visible');
       cy.get('[data-metric="hitratio"]').should('not.exist');
 
       cy.makeSnapshot();
     });
+
+    it('displays the tooltip a single metric when the corresponding prop is set', () => {
+      initialize({ tooltip: { mode: 'single', sortOrder: 'name' } });
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="connTime"]').should(
+        'have.attr',
+        'data-highlight',
+        'true'
+      );
+      cy.get('[data-metric="hitratio"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('does not display the tooltip when the corresponding prop is set', () => {
+      initialize({ tooltip: { mode: 'hidden', sortOrder: 'name' } });
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('not.exist');
+      cy.get('[data-metric="connTime"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('sorts metrics by their value is ascending when the corresponding prop is set', () => {
+      initialize({ tooltip: { mode: 'all', sortOrder: 'ascending' } });
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="connTime"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('sorts metrics by their value is descending when the corresponding prop is set', () => {
+      initialize({ tooltip: { mode: 'all', sortOrder: 'descending' } });
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="connTime"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
   });
 
   it('displays the curves with different shades when curves have same color', () => {
-    initialize(dataCurvesWithSameColor);
+    initialize({ data: dataCurvesWithSameColor });
 
     cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
       .find('[data-icon="true"]')
@@ -141,4 +213,195 @@ describe('Line chart', () => {
 
     cy.makeSnapshot();
   });
+
+  describe('Legend', () => {
+    it('displays the legend in list mode when the corresponding props is set', () => {
+      initialize({ legend: { mode: 'list', placement: 'bottom' } });
+
+      cy.contains('Min:').should('not.exist');
+      cy.contains('Max:').should('not.exist');
+      cy.contains('Avg:').should('not.exist');
+
+      cy.get('[data-display-side="false"]').should('exist');
+      cy.get('[data-as-list="true"]').should('exist');
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays the legend on the left side of the graph when the corresponding prop is set', () => {
+      initialize({ legend: { mode: 'grid', placement: 'left' } });
+
+      cy.get('[data-display-side="true"]').should('exist');
+      cy.get('[data-as-list="true"]').should('exist');
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays the legend on the right side of the graph as list when the corresponding props are set', () => {
+      initialize({ legend: { mode: 'list', placement: 'right' } });
+
+      cy.get('[data-display-side="true"]').should('exist');
+      cy.get('[data-as-list="true"]').should('exist');
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+  });
+
+  describe('Axis', () => {
+    it('does not display axis borders when the prop is set', () => {
+      initialize({ axis: { showBorder: false } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.get('line[class*="visx-axis-line"]')
+        .eq(0)
+        .should('have.attr', 'stroke-width')
+        .and('equal', '0');
+      cy.get('line[class*="visx-axis-line"]')
+        .eq(1)
+        .should('have.attr', 'stroke-width')
+        .and('equal', '0');
+      cy.get('line[class*="visx-axis-line"]')
+        .eq(2)
+        .should('have.attr', 'stroke-width')
+        .and('equal', '0');
+
+      cy.makeSnapshot();
+    });
+
+    it('does not display grids when the prop is set', () => {
+      initialize({ axis: { showGridLines: false } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.get('g[class="visx-group visx-rows"]').should('not.exist');
+      cy.get('g[class="visx-group visx-columns"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays only horizontal lines when the prop is set', () => {
+      initialize({ axis: { gridLinesType: 'horizontal' } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.get('g[class="visx-group visx-rows"]').should('be.visible');
+      cy.get('g[class="visx-group visx-columns"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays only vertical lines when the prop is set', () => {
+      initialize({ axis: { gridLinesType: 'vertical' } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.get('g[class="visx-group visx-rows"]').should('not.exist');
+      cy.get('g[class="visx-group visx-columns"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('rotates the tick label when the props is set', () => {
+      initialize({ axis: { yAxisTickLabelRotation: -35 } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.get('text[transform="rotate(-35, -2, 388)"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays as centered to zero when the prop is set', () => {
+      initialize({ axis: { isCenteredZero: true } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.contains('0.9').should('be.visible');
+      cy.contains('-0.9').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+  });
+
+  describe('Line style', () => {
+    it('displays the curve in a natural style when the prop is set', () => {
+      initialize({ lineStyle: { curve: 'natural' } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays the curve in a step style when the prop is set', () => {
+      initialize({ lineStyle: { curve: 'step' } });
+
+      cy.contains('9:00 AM').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('shows the area when the prop is set', () => {
+      initialize({ lineStyle: { showArea: true } });
+
+      cy.contains('9:00 AM').should('be.visible');
+      cy.get('path[fill="rgba(102, 153, 204, 0.19999999999999996)"]').should(
+        'be.visible'
+      );
+
+      cy.makeSnapshot();
+    });
+
+    it('shows the area with a custom transparency when props are set', () => {
+      initialize({ lineStyle: { areaTransparency: 20, showArea: true } });
+
+      cy.contains('9:00 AM').should('be.visible');
+      cy.get('path[fill="rgba(102, 153, 204, 0.8)"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('shows points when the prop is set', () => {
+      initialize({ lineStyle: { showPoints: true } });
+
+      cy.contains('9:00 AM').should('be.visible');
+      cy.get('circle[cx="4.0625"]').should('be.visible');
+      cy.get('circle[cy="163.69430856642046"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays lines with a custom line width when the prop is set', () => {
+      initialize({ lineStyle: { lineWidth: 6 } });
+
+      cy.contains('9:00 AM').should('be.visible');
+      cy.get('path[stroke-width="6"]').should('have.length', 3);
+
+      cy.makeSnapshot();
+    });
+
+    it('displays lines with dots width when the prop is set', () => {
+      initialize({ lineStyle: { dotOffset: 10, lineWidth: 4 } });
+
+      cy.contains('9:00 AM').should('be.visible');
+      cy.get('path[stroke-width="4"]')
+        .should('have.attr', 'stroke-dasharray')
+        .and('equals', '4 10');
+    });
+
+    it('displays lines with dots width when the prop is set', () => {
+      initialize({ lineStyle: { dashLength: 5, dashOffset: 8 } });
+
+      cy.contains('9:00 AM').should('be.visible');
+      cy.get('path[stroke-width="2"]')
+        .should('have.attr', 'stroke-dasharray')
+        .and('equals', '5 8');
+    });
+  });
 });