@centreon/ui 24.4.73 → 24.4.75

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

@@ -0,0 +1,170 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+
+import { prop, slice, sortBy } from 'ramda';
+
+import { Box, alpha, useTheme } from '@mui/material';
+
+import { useMemoComponent } from '@centreon/ui';
+
+import { formatMetricValue } from '../../common/timeSeries';
+import { Line } from '../../common/timeSeries/models';
+import { labelAvg, labelMax, labelMin } from '../translatedLabels';
+
+import { useStyles } from './Legend.styles';
+import LegendContent from './LegendContent';
+import LegendHeader from './LegendHeader';
+import { GetMetricValueProps, LegendDisplayMode } from './models';
+import useLegend from './useLegend';
+
+interface Props {
+  base: number;
+  height?: number | null;
+  limitLegend?: false | number;
+  lines: Array<Line>;
+  renderExtraComponent?: ReactNode;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
+  shouldDisplayLegendInCompactMode: boolean;
+  toggable?: boolean;
+}
+
+const MainLegend = ({
+  lines,
+  base,
+  toggable = true,
+  limitLegend = false,
+  renderExtraComponent,
+  setLinesGraph,
+  shouldDisplayLegendInCompactMode,
+  height
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({
+    height,
+    limitLegendRows: Boolean(limitLegend)
+  });
+  const theme = useTheme();
+
+  const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
+    useLegend({ lines, setLinesGraph });
+
+  const sortedData = sortBy(prop('metric_id'), lines);
+
+  const displayedLines = limitLegend
+    ? slice(0, limitLegend, sortedData)
+    : sortedData;
+
+  const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
+    formatMetricValue({
+      base,
+      unit,
+      value
+    }) || 'N/A';
+
+  const selectMetric = ({ event, metric_id }): void => {
+    if (!toggable) {
+      return;
+    }
+
+    if (event.ctrlKey || event.metaKey) {
+      toggleMetricLine(metric_id);
+
+      return;
+    }
+
+    selectMetricLine(metric_id);
+  };
+
+  const mode = shouldDisplayLegendInCompactMode
+    ? LegendDisplayMode.Compact
+    : LegendDisplayMode.Normal;
+
+  return (
+    <div className={classes.legend}>
+      <div className={classes.items} data-mode={mode}>
+        {displayedLines.map((line) => {
+          const { color, display, highlight, metric_id } = line;
+
+          const markerColor = display
+            ? color
+            : alpha(theme.palette.text.disabled, 0.2);
+
+          const minMaxAvg = [
+            {
+              label: labelMin,
+              value: line.minimum_value
+            },
+            {
+              label: labelMax,
+              value: line.maximum_value
+            },
+            {
+              label: labelAvg,
+              value: line.average_value
+            }
+          ];
+
+          return (
+            <Box
+              className={cx(
+                classes.item,
+                highlight ? classes.highlight : classes.normal,
+                toggable && classes.toggable
+              )}
+              key={metric_id}
+              onClick={(event): void => selectMetric({ event, metric_id })}
+              onMouseEnter={(): void => highlightLine(metric_id)}
+              onMouseLeave={(): void => clearHighlight()}
+            >
+              <LegendHeader
+                color={markerColor}
+                disabled={!display}
+                line={line}
+                minMaxAvg={
+                  shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
+                }
+              />
+              {!shouldDisplayLegendInCompactMode && (
+                <div>
+                  <div className={classes.minMaxAvgContainer}>
+                    {minMaxAvg.map(({ label, value }) => (
+                      <LegendContent
+                        data={getMetricValue({ unit: line.unit, value })}
+                        key={label}
+                        label={label}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </Box>
+          );
+        })}
+      </div>
+      {renderExtraComponent}
+    </div>
+  );
+};
+
+const Legend = (props: Props): JSX.Element => {
+  const {
+    toggable,
+    limitLegend,
+    lines,
+    base,
+    shouldDisplayLegendInCompactMode,
+    height
+  } = props;
+
+  return useMemoComponent({
+    Component: <MainLegend {...props} />,
+    memoProps: [
+      lines,
+      base,
+      toggable,
+      limitLegend,
+      shouldDisplayLegendInCompactMode,
+      height
+    ]
+  });
+};
+
+export default Legend;

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

@@ -0,0 +1,16 @@
+export interface FormattedMetricData {
+  color: string;
+  formattedValue: string | null;
+  name: string;
+  unit: string;
+}
+
+export interface GetMetricValueProps {
+  unit: string;
+  value: number | null;
+}
+
+export enum LegendDisplayMode {
+  Compact = 'compact',
+  Normal = 'normal'
+}

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

@@ -0,0 +1,104 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+import {
+  equals,
+  find,
+  head,
+  isEmpty,
+  isNil,
+  map,
+  pipe,
+  propEq,
+  reject
+} from 'ramda';
+
+import { Line } from '../../common/timeSeries/models';
+
+interface LegendActions {
+  clearHighlight: () => void;
+  highlightLine: (metric_id: number) => void;
+  selectMetricLine: (metric_id: number) => void;
+  toggleMetricLine: (metric_id: number) => void;
+}
+
+interface Props {
+  lines: Array<Line>;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
+}
+
+const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
+  const displayedLines = reject(propEq(false, 'display'), lines);
+  const getLineByMetric = (metric_id: number): Line =>
+    find(propEq(metric_id, 'metric_id'), lines) as Line;
+
+  const toggleMetricLine = (metric_id): void => {
+    const data = lines.map((line) => ({
+      ...line,
+      display: equals(line.metric_id, metric_id) ? !line.display : line.display
+    }));
+
+    setLinesGraph(data);
+  };
+
+  const highlightLine = (metric_id): void => {
+    const data = lines.map((line) => ({
+      ...line,
+      highlight: equals(line.metric_id, metric_id)
+    }));
+
+    setLinesGraph(data);
+  };
+
+  const clearHighlight = (): void => {
+    setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
+  };
+
+  const selectMetricLine = (metric_id: number): void => {
+    const metricLine = getLineByMetric(metric_id);
+
+    const isLineDisplayed = pipe(head, equals(metricLine))(displayedLines);
+    const isOnlyLineDisplayed =
+      equals(displayedLines.length, 1) && isLineDisplayed;
+
+    if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
+      setLinesGraph(
+        map(
+          (line) => ({
+            ...line,
+            display: true
+          }),
+          lines
+        )
+      );
+
+      return;
+    }
+
+    setLinesGraph(
+      map(
+        (line) => ({
+          ...line,
+          display: equals(line, metricLine)
+        }),
+        lines
+      )
+    );
+  };
+
+  useEffect(() => {
+    if (isNil(lines) || isEmpty(lines)) {
+      return;
+    }
+
+    const newLines = lines.map((line) => ({
+      ...line,
+      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
+    }));
+
+    setLinesGraph(newLines);
+  }, [lines]);
+
+  return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
+};
+
+export default useLegend;

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

@@ -0,0 +1,144 @@
+import { LineChartData } from '../common/models';
+
+import dataLastDay from './mockedData/lastDay.json';
+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 WrapperLineChart from '.';
+
+const initialize = (data = dataLastDay): void => {
+  cy.mount({
+    Component: (
+      <WrapperLineChart
+        {...argumentsData}
+        data={data as unknown as LineChartData}
+      />
+    )
+  });
+};
+
+describe('Line chart', () => {
+  describe('Tooltip', () => {
+    it('displays a tooltip when the graph is hovered', () => {
+      initialize();
+
+      cy.contains('oracle-buffer-hit-ratio graph on srv-oracle-users').should(
+        'be.visible'
+      );
+      cy.contains('hitratio').should('be.visible');
+      cy.contains('querytime').should('be.visible');
+      cy.contains('connTime').should('be.visible');
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(250, 70);
+
+      cy.contains('06/18/2023').should('be.visible');
+
+      cy.contains('0.45 s').should('be.visible');
+      cy.contains('75.93%').should('be.visible');
+      cy.contains('0.43 s').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays a metric highlighted when the graph is hovered and the metric is the nearest point', () => {
+      initialize();
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should(
+        'have.attr',
+        'data-highlight',
+        'true'
+      );
+      cy.get('[data-metric="connTime"]').should(
+        'have.attr',
+        'data-highlight',
+        'false'
+      );
+
+      cy.makeSnapshot();
+    });
+
+    it('does not display the tooltip when null values are hovered', () => {
+      initialize(dataLastDayWithNullValues);
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1160, 100);
+
+      cy.get('[data-metric="querytime"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays the tooltip with defined values whent the graph is hovered', () => {
+      initialize(dataLastDayWithIncompleteValues);
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1150, 100);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="hitratio"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+  });
+
+  it('displays the curves with different shades when curves have same color', () => {
+    initialize(dataCurvesWithSameColor);
+
+    cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(41, 175, 238)');
+    cy.findByLabelText('Centreon-Server_5: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(83, 191, 241)');
+    cy.findByLabelText('Centreon-Server_4: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(8, 34, 47)');
+    cy.findByLabelText('Centreon-Server_3: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(16, 70, 95)');
+    cy.findByLabelText('Centreon-Server_2: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(24, 105, 142)');
+    cy.findByLabelText('Centreon-Server_1: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(32, 140, 190)');
+
+    cy.get('[data-metric="1"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(41, 175, 238)'
+    );
+    cy.get('[data-metric="21"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(32, 140, 190)'
+    );
+    cy.get('[data-metric="17"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(24, 105, 142)'
+    );
+    cy.get('[data-metric="13"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(16, 70, 95)'
+    );
+    cy.get('[data-metric="9"]').should('have.attr', 'stroke', 'rgb(8, 34, 47)');
+    cy.get('[data-metric="5"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(83, 191, 241)'
+    );
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -0,0 +1,53 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  container: {
+    '& .visx-axis-bottom': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        },
+        text: {
+          fill: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-axis-line': {
+      stroke: theme.palette.text.primary
+    },
+    '& .visx-axis-right': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-columns': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    '& .visx-rows': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    fill: theme.palette.text.primary,
+    position: 'relative'
+  },
+  graphValueTooltip: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    color: theme.palette.text.primary,
+    maxWidth: 'none',
+    padding: 0
+  },
+  header: {
+    display: 'grid',
+    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    width: '100%'
+  }
+}));
+
+export { useStyles };