@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.30-MON-19324-dashboard-section-navigation.3",
+  "version": "23.10.30",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -8,12 +8,10 @@
     "storybook": "storybook dev -p 9001 -c .storybook",
     "build:storybook": "storybook build -c .storybook -o .out",
     "test": "jest",
-    "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
     "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
-    "cypress:cli": "cypress run --component --browser=chrome",
-    "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
+    "cypress:cli": "cypress run --component --browser=chrome"
   },
   "sideEffects": false,
   "repository": {
@@ -56,23 +54,18 @@
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
     "@storybook/builder-vite": "^7.0.9",
-    "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/preview-api": "^7.0.9",
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.9",
     "@testing-library/cypress": "^8.0.7",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.5.0",
     "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",
-    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "axios-mock-adapter": "^1.21.4",
@@ -90,9 +83,6 @@
     "storybook": "^7.0.9",
     "storybook-addon-mock": "^4.0.0",
     "storybook-dark-mode": "^3.0.0",
-    "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.1",
-    "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-svgr": "^3.2.0",
     "vite-plugin-turbosnap": "^1.0.2"
@@ -102,7 +92,14 @@
     "@lexical/react": "0.8.0",
     "@lexical/selection": "0.8.0",
     "@lexical/utils": "0.8.0",
+    "@visx/curve": "^2.1.0",
+    "@visx/pattern": "^3.0.0",
+    "@visx/scale": "^3.0.0",
+    "@visx/shape": "^2.12.2",
+    "@visx/threshold": "^2.12.2",
+    "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
+    "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
     "lexical": "0.8.0",
     "notistack": "^2.0.8",

package/src/@assets/icons/downtime.icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{opacity:1;}</style></defs><g transform="translate(-94.852 -137.365)"><rect class="a" width="24" height="24" transform="translate(94.852 137.365)"/><g class="b" transform="translate(97.108 140.129)"><path d="M103.476,143.64a1.692,1.692,0,1,0-1.692-1.692A1.692,1.692,0,0,0,103.476,143.64Z" transform="translate(-97.132 -140.255)"/><path d="M114.266,150.2a1.05,1.05,0,0,0-.968-.647s-2.067-.275-2.68.125a2.464,2.464,0,0,0-.644.8l-3.454-.547c-.265-.874-1.4-4.183-1.4-4.183l-.846-1.353a1.743,1.743,0,0,0-1.438-.846,4.571,4.571,0,0,0-.677.084l-4.4,1.867v3.976H98l2.222.352-1.61,8.107h1.777l1.522-6.768,1.777,1.692v5.076h1.692v-6.345l-1.19-1.135,5.428.859-3.084,6.815,10.976-.11Zm-10.206-2.611s.577,1.356.88,2.089l-1.259-.2Zm-4.606,1.22v-2.212l1.522-.592-.586,2.952Z" transform="translate(-97.762 -139.74)"/></g></g></svg>

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import { ComponentMeta } from '@storybook/react';
 import { Layout } from 'react-grid-layout';
 
@@ -60,18 +62,18 @@ const generateLayout = (maxElements: number): Array<CustomLayout> => {
 };
 
 interface DashboardTemplateProps {
-  header?: JSX.Element;
+  header?: ReactElement;
   layout?: Array<CustomLayout>;
 }
 
-const Header = (): JSX.Element => (
+const Header = (): ReactElement => (
   <Typography variant="body2">The title</Typography>
 );
 
 const DashboardTemplate = ({
   header,
   layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
+}: DashboardTemplateProps): ReactElement => (
   <DashboardLayout.Layout<CustomLayout> layout={layout}>
     {layout.map(({ i, content, shouldUseFluidTypography }) => (
       <DashboardLayout.Item header={header} key={i}>

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 
 import { Responsive } from '@visx/visx';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -14,7 +14,7 @@ const ReactGridLayout = WidthProvider(GridLayout);
 
 interface DashboardLayoutProps<T> {
   changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
+  children: Array<ReactElement>;
   displayGrid?: boolean;
   layout: Array<T>;
 }
@@ -24,7 +24,7 @@ const Layout = <T extends Layout>({
   changeLayout,
   displayGrid,
   layout
-}: DashboardLayoutProps<T>): JSX.Element => {
+}: DashboardLayoutProps<T>): ReactElement => {
   const { classes } = useDashboardLayoutStyles();
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
     Component: (
       <ResponsiveHeight>
         <Responsive.ParentSize>
-          {({ width, height }): JSX.Element => (
+          {({ width, height }): ReactElement => (
             <div className={classes.container}>
               {displayGrid && (
                 <Grid columns={columns} height={height} width={width} />

package/src/Dashboard/utils.ts

@@ -1,28 +1,28 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+export const maxColumns = 12;
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+
+export const getIsSmallScreenSize = (): boolean =>
+  lt(window.innerWidth, breakpoint);
+
+export const getColumnsFromScreenSize = (): number =>
+  getIsSmallScreenSize() ? minColumns : maxColumns;
+
+export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+  const isSmallScreenSize = getIsSmallScreenSize();
+  if (!isSmallScreenSize) {
+    return layout;
+  }
+
+  return layout
+    .sort((a, b) => a.x + a.y - (b.x + b.y))
+    .map((widget) => ({
+      ...widget,
+      w: 1
+    }));
+};

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

@@ -0,0 +1,20 @@
+import { commonTickLabelProps } from '../../common';
+
+interface UnitLabelProps {
+  unit: 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>
+);
+
+export default UnitLabel;

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

@@ -0,0 +1,88 @@
+import { Axis } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { getXAxisTickFormat } from '../../helpers';
+import { GraphInterval } from '../../models';
+import { getUnits } from '../../timeSeries';
+
+import UnitLabel from './UnitLabel';
+import { Data } from './models';
+import useAxisY from './useAxisY';
+
+interface Props {
+  data: Data;
+  graphInterval: GraphInterval;
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Axes = ({
+  height,
+  width,
+  data,
+  rightScale,
+  leftScale,
+  xScale,
+  graphInterval
+}: Props): JSX.Element => {
+  const { format } = useLocaleDateTimeFormat();
+  const { lines } = data;
+
+  const { axisLeft, axisRight } = useAxisY({ data, graphHeight: height });
+
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+
+  const xTickCount = Math.ceil(width / 82);
+
+  const tickFormat =
+    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);
+
+  const formatAxisTick = (tick): string =>
+    format({ date: new Date(tick), formatString: tickFormat });
+
+  const hasMoreThanTwoUnits = !isNil(thirdUnit);
+  const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
+
+  return (
+    <g>
+      <Axis.AxisBottom
+        numTicks={xTickCount}
+        scale={xScale}
+        tickFormat={formatAxisTick}
+        top={height}
+      />
+
+      {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
+
+      <Axis.AxisLeft
+        numTicks={axisLeft?.numTicks}
+        orientation="left"
+        scale={leftScale}
+        tickFormat={axisLeft.tickFormat}
+        tickLabelProps={axisLeft.tickLabelProps}
+        tickLength={2}
+      />
+
+      {displayAxisRight && (
+        <Axis.AxisRight
+          left={width}
+          numTicks={axisRight?.numTicks}
+          orientation="right"
+          scale={rightScale}
+          tickFormat={axisRight.tickFormat}
+          tickLabelProps={axisRight.tickLabelProps}
+          tickLength={2}
+        />
+      )}
+      {axisRight.displayUnit && <UnitLabel unit={secondUnit} x={width} />}
+    </g>
+  );
+};
+
+export default Axes;

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

@@ -0,0 +1,26 @@
+import { Line, TimeValue } from '../../timeSeries/models';
+
+export interface LabelProps {
+  [x: string]: unknown;
+  textAnchor?: string;
+}
+
+export interface Axis {
+  displayUnit?: boolean;
+}
+
+export interface AxisYRight extends Axis {
+  display?: boolean;
+}
+
+export interface AxisX {
+  xAxisTickFormat?: string;
+}
+export interface Data {
+  axisX?: AxisX;
+  axisYLeft?: Axis;
+  axisYRight?: AxisYRight;
+  baseAxis: number;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}

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

@@ -0,0 +1,100 @@
+import { isNil } from 'ramda';
+import { Axis } from '@visx/visx';
+
+import { useTheme } from '@mui/material';
+
+import { formatMetricValue, getUnits } from '../../timeSeries';
+import { commonTickLabelProps } from '../../common';
+
+import { Data, LabelProps } from './models';
+
+interface AxisYData {
+  displayUnit: boolean;
+  numTicks?: number;
+  tickFormat: (value: unknown) => string;
+  tickLabelProps: Axis.TickLabelProps<unknown>;
+}
+
+interface AxisRightData extends AxisYData {
+  display: boolean;
+}
+
+interface AxisY {
+  axisLeft: AxisYData;
+  axisRight: AxisRightData;
+}
+
+interface Props {
+  data: Omit<Data, 'timeSeries'>;
+  graphHeight?: number;
+}
+
+const useAxisY = ({ data, graphHeight }: Props): AxisY => {
+  const theme = useTheme();
+
+  const { lines } = data;
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+
+  const numTicks = graphHeight && Math.ceil(graphHeight / 30);
+
+  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 formatTick =
+    ({ unit }) =>
+    (value): string => {
+      if (isNil(value)) {
+        return '';
+      }
+
+      return formatMetricValue({ base: data.baseAxis, unit, value }) as string;
+    };
+
+  const labelProps = ({
+    textAnchor,
+    ...rest
+  }: LabelProps): Record<string, unknown> => ({
+    ...commonTickLabelProps,
+    textAnchor,
+    ...rest
+  });
+
+  const tickLabelPropsAxisLeft = (): Record<string, unknown> =>
+    labelProps({
+      dx: theme.spacing(-1),
+      dy: theme.spacing(0.5),
+      textAnchor: 'end'
+    });
+
+  const tickLabelPropsAxisRight = (): Record<string, unknown> =>
+    labelProps({
+      dx: theme.spacing(0.5),
+      dy: theme.spacing(0.5),
+      textAnchor: 'start'
+    });
+
+  return {
+    axisLeft: {
+      displayUnit: displayUnitAxisLeft,
+      numTicks,
+      tickFormat: formatTick({
+        unit: hasMoreThanTwoUnits ? '' : firstUnit
+      }),
+      tickLabelProps: tickLabelPropsAxisLeft
+    },
+    axisRight: {
+      display: displayAxisRight,
+      displayUnit: displayUnitAxisRight,
+      numTicks,
+      tickFormat: formatTick({ unit: secondUnit }),
+      tickLabelProps: tickLabelPropsAxisRight
+    }
+  };
+};
+
+export default useAxisY;

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

@@ -0,0 +1,20 @@
+import { Grid } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+
+interface Props {
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Grids = ({ height, width, leftScale, xScale }: Props): JSX.Element => {
+  return (
+    <g>
+      <Grid.GridRows height={height} scale={leftScale} width={width} />
+      <Grid.GridColumns height={height} scale={xScale} width={width} />
+    </g>
+  );
+};
+
+export default Grids;

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

@@ -0,0 +1,91 @@
+import { memo } from 'react';
+
+import { Curve, Shape } from '@visx/visx';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { equals, isNil, prop } from 'ramda';
+
+import { getTime } from '../../../timeSeries';
+import { TimeValue } from '../../../timeSeries/models';
+import { getFillColor } from '../../../common';
+
+interface Props {
+  areaColor: string;
+  filled: boolean;
+  graphHeight: number;
+  highlight?: boolean;
+  lineColor: string;
+  metric: string;
+  shapeAreaClosed?: Record<string, unknown>;
+  shapeLinePath?: Record<string, unknown>;
+  timeSeries: Array<TimeValue>;
+  transparency: number;
+  unit: string;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const RegularLine = ({
+  filled,
+  timeSeries,
+  highlight,
+  metric,
+  lineColor,
+  unit,
+  yScale,
+  xScale,
+  areaColor,
+  transparency,
+  graphHeight
+}: Props): JSX.Element => {
+  const props = {
+    curve: Curve.curveLinear,
+    data: timeSeries,
+    defined: (value): boolean => !isNil(value[metric]),
+    opacity: 1,
+    stroke: lineColor,
+    strokeWidth: !highlight ? 1 : 2,
+    unit,
+    x: (timeValue): number => xScale(getTime(timeValue)) as number,
+    y: (timeValue): number => yScale(prop(metric, timeValue)) ?? null
+  };
+
+  if (filled) {
+    return (
+      <Shape.AreaClosed<TimeValue>
+        fill={getFillColor({ areaColor, transparency })}
+        fillRule="nonzero"
+        key={metric}
+        y0={Math.min(yScale(0), graphHeight)}
+        yScale={yScale}
+        {...props}
+      />
+    );
+  }
+
+  return <Shape.LinePath<TimeValue> {...props} />;
+};
+
+export default memo(RegularLine, (prevProps, nextProps) => {
+  const {
+    timeSeries: prevTimeSeries,
+    graphHeight: prevGraphHeight,
+    highlight: prevHighlight,
+    xScale: prevXScale
+  } = prevProps;
+  const {
+    timeSeries: nextTimeSeries,
+    graphHeight: nextGraphHeight,
+    highlight: nextHighlight,
+    xScale: nextXScale
+  } = nextProps;
+
+  const prevXScaleRange = prevXScale.range();
+  const nextXScaleRange = nextXScale.range();
+
+  return (
+    equals(prevTimeSeries, nextTimeSeries) &&
+    equals(prevGraphHeight, nextGraphHeight) &&
+    equals(prevHighlight, nextHighlight) &&
+    equals(prevXScaleRange, nextXScaleRange)
+  );
+});

package/src/Graph/BasicComponents/Lines/RegularLines/useRegularLines.ts

@@ -0,0 +1,15 @@
+import { difference } from 'ramda';
+
+import { Line } from '../../../timeSeries/models';
+import { getSortedStackedLines } from '../../../timeSeries';
+
+interface RegularLines {
+  regularLines: Array<Line>;
+}
+const useRegularLines = ({ lines }): RegularLines => {
+  const stackedLines = getSortedStackedLines(lines);
+
+  return { regularLines: difference(lines, stackedLines) };
+};
+
+export default useRegularLines;

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

@@ -0,0 +1,76 @@
+import { Curve, Shape } from '@visx/visx';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
+
+import StackedAnchorPoint from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
+import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
+import { getFillColor } from '../../../common';
+import { getTime } from '../../../timeSeries';
+import { Line, TimeValue } from '../../../timeSeries/models';
+
+interface Props {
+  displayAnchor: boolean;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const StackLines = ({
+  timeSeries,
+  lines,
+  yScale,
+  xScale,
+  displayAnchor
+}: Props): JSX.Element => {
+  return (
+    <Shape.AreaStack
+      curve={Curve.curveLinear}
+      data={timeSeries}
+      defined={(d): boolean => {
+        return pipe(
+          map(prop('metric')) as unknown as (displayedLines) => Array<string>,
+          all((metric) => pipe(path(['data', metric]), isNil, not)(d))
+        )(lines);
+      }}
+      keys={map(prop('metric'), lines)}
+      x={(d): number => xScale(getTime(d.data)) ?? 0}
+      y0={(d): number => yScale(d[0]) ?? 0}
+      y1={(d): number => yScale(d[1]) ?? 0}
+    >
+      {({ stacks, path: linePath }): Array<JSX.Element> => {
+        return stacks.map((stack, index) => {
+          const { areaColor, transparency, lineColor, highlight } = nth(
+            index,
+            lines
+          ) as Line;
+
+          return (
+            <g key={`stack-${prop('key', stack)}`}>
+              {displayAnchor && (
+                <StackedAnchorPoint
+                  areaColor={areaColor}
+                  lineColor={lineColor}
+                  stackValues={stack as unknown as Array<StackValue>}
+                  timeSeries={timeSeries}
+                  transparency={transparency}
+                  xScale={xScale}
+                  yScale={yScale}
+                />
+              )}
+              <path
+                d={linePath(stack) || ''}
+                fill={getFillColor({ areaColor, transparency })}
+                opacity={highlight === false ? 0.3 : 1}
+                stroke={lineColor}
+                strokeWidth={highlight ? 2 : 1}
+              />
+            </g>
+          );
+        });
+      }}
+    </Shape.AreaStack>
+  );
+};
+
+export default StackLines;

package/src/Graph/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -0,0 +1,39 @@
+import {
+  getInvertedStackedLines,
+  getNotInvertedStackedLines,
+  getTimeSeriesForLines
+} from '../../../timeSeries';
+import { LinesData } from '../models';
+
+interface StackedLines {
+  invertedStackedLinesData: LinesData;
+  stackedLinesData: LinesData;
+}
+
+const useStackedLines = ({ lines, timeSeries }): StackedLines => {
+  const regularStackedLines = getNotInvertedStackedLines(lines);
+
+  const regularStackedTimeSeries = getTimeSeriesForLines({
+    lines: regularStackedLines,
+    timeSeries
+  });
+
+  const invertedStackedLines = getInvertedStackedLines(lines);
+  const invertedStackedTimeSeries = getTimeSeriesForLines({
+    lines: invertedStackedLines,
+    timeSeries
+  });
+
+  return {
+    invertedStackedLinesData: {
+      lines: invertedStackedLines,
+      timeSeries: invertedStackedTimeSeries
+    },
+    stackedLinesData: {
+      lines: regularStackedLines,
+      timeSeries: regularStackedTimeSeries
+    }
+  };
+};
+
+export default useStackedLines;