@centreon/ui 23.10.18-MON-fix-chromatic-parameters.0 → 23.10.18-MON-17793-create-graph-component-centreon-ui.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-fix-chromatic-parameters.0",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.2",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -85,6 +85,7 @@
     "@lexical/selection": "0.8.0",
     "@lexical/utils": "0.8.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/Button/Icon/index.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 const useStyles = makeStyles()((theme) => ({
   button: {

package/src/Button/Save/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import StartIcon from './StartIcon';
 import Content from './Content';

package/src/FileDropZone/index.tsx

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';

package/src/Form/FormButtons.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import useMemoComponent from '../utils/useMemoComponent';
-import getNormalizedId from '../utils/getNormalizedId';
+import { useMemoComponent, getNormalizedId } from '../utils';
 
 import {
   labelReset,

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

package/src/Form/Inputs/Radio.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/Switch.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
 
 import { InputPropsWithoutGroup } from './models';

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,84 @@
+import { Axis } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { getUnits } from '../../timeSeries';
+import { getXAxisTickFormat } from '../../helpers';
+import { GraphInterval } from '../../models';
+
+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] = 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 });
+
+  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}
+      />
+
+      {axisRight.display && (
+        <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: Axis.TickFormatter<unknown>;
+  tickLabelProps: Axis.TickLabelProps<unknown>;
+}
+
+interface AxisRightData extends AxisYData {
+  display: boolean;
+}
+
+interface AxisY {
+  axisLeft: AxisYData;
+  axisRight: AxisRightData;
+}
+
+interface Props {
+  data: Data;
+  graphHeight: number;
+}
+
+const useAxisY = ({ data, graphHeight }: Props): AxisY => {
+  const theme = useTheme();
+
+  const { lines } = data;
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+
+  const numTicks = 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,99 @@
+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 isHighlighted = highlight ? 2 : 0.8;
+
+  const props = {
+    curve: Curve.curveLinear,
+    data: timeSeries,
+    defined: (value): boolean => !isNil(value[metric]),
+    opacity: highlight === false ? 0.3 : 1,
+    stroke: lineColor,
+    strokeWidth: isHighlighted,
+    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,
+    shapeLinePath: prevShapeLinePath,
+    shapeAreaClosed: prevShapeAreaClosed
+  } = prevProps;
+  const {
+    timeSeries: nextTimeSeries,
+    graphHeight: nextGraphHeight,
+    highlight: nextHighlight,
+    xScale: nextXScale,
+    shapeLinePath: nextShapeLinePath,
+    shapeAreaClosed: nextShapeAreaClosed
+  } = nextProps;
+
+  const prevXScaleRange = prevXScale.range();
+  const nextXScaleRange = nextXScale.range();
+
+  return (
+    equals(prevTimeSeries, nextTimeSeries) &&
+    equals(prevGraphHeight, nextGraphHeight) &&
+    equals(prevHighlight, nextHighlight) &&
+    equals(prevXScaleRange, nextXScaleRange) &&
+    equals(prevShapeAreaClosed, nextShapeAreaClosed) &&
+    equals(prevShapeLinePath, nextShapeLinePath)
+  );
+});

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,74 @@
+import { ReactNode } from 'react';
+
+import { map, nth, pipe, path, all, not, isNil, prop } from 'ramda';
+import { Shape, Curve } from '@visx/visx';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { Line, TimeValue } from '../../../timeSeries/models';
+import { getTime } from '../../../timeSeries';
+import { getFillColor } from '../../../common';
+import { StackedAnchorPoint } from '../../../IntercatifsComponents/AnchorPoint/models';
+
+interface Props {
+  lines: Array<Line>;
+  renderStackedAnchorPoint: (args: StackedAnchorPoint) => ReactNode;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const StackLines = ({
+  timeSeries,
+  lines,
+  yScale,
+  xScale,
+  renderStackedAnchorPoint
+}: Props): JSX.Element => {
+  return (
+    <Shape.AreaStack
+      curve={Curve.curveLinear}
+      data={timeSeries}
+      defined={(d): boolean => {
+        return pipe(
+          map(prop('metric')) as (lines) => 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)}`}>
+              {renderStackedAnchorPoint?.({
+                areaColor,
+                lineColor,
+                stack,
+                transparency,
+                xScale,
+                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;