@centreon/ui 23.10.17 → 23.10.18-MON-17793-create-graph-component-centreon-ui.0

package/src/Graph/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/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/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 '../../InteractionWithGraph/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/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;

package/src/Graph/Lines/index.tsx

@@ -0,0 +1,153 @@
+import { ReactNode } from 'react';
+
+import { isEmpty, isNil } from 'ramda';
+
+import { getStackedYScale, getUnits, getYScale } from '../timeSeries';
+import { Line } from '../timeSeries/models';
+import {
+  RegularLinesAnchorPoint,
+  StackedAnchorPoint
+} from '../InteractionWithGraph/AnchorPoint/models';
+
+import RegularLine from './RegularLines';
+import StackedLines from './StackedLines';
+import { Shape } from './models';
+
+interface AnchorPoint {
+  renderRegularLinesAnchorPoint: (args: RegularLinesAnchorPoint) => ReactNode;
+  renderStackedAnchorPoint: (args: StackedAnchorPoint) => ReactNode;
+}
+
+interface Props {
+  anchorPoint: AnchorPoint;
+  height: number;
+  shape: Shape;
+}
+
+const Lines = ({ height, shape, anchorPoint }: Props): JSX.Element => {
+  const { areaRegularLines, areaStackedLines } = shape;
+
+  const { renderRegularLinesAnchorPoint, renderStackedAnchorPoint } =
+    anchorPoint;
+
+  const {
+    lines: regularLines,
+    timeSeries: regularLinesTimeSeries,
+    display: displayAreaRegular
+  } = areaRegularLines;
+
+  const { stackedLinesData, invertedStackedLinesData } = areaStackedLines;
+
+  const {
+    lines: regularStackedLines,
+    timeSeries: regularStackedLinesTimeSeries
+  } = stackedLinesData;
+
+  const {
+    lines: invertedStackedLines,
+    timeSeries: invertedStackedLinesTimeSeries
+  } = invertedStackedLinesData;
+
+  const displayArea = (data: unknown): boolean =>
+    !isEmpty(data) && !isNil(data);
+
+  const displayAreaStackedLines =
+    areaStackedLines.display && displayArea(regularStackedLines);
+
+  const displayAreaInvertedStackedLines =
+    areaStackedLines.display && displayArea(invertedStackedLines);
+
+  const displayAreaRegularLines =
+    displayAreaRegular && displayArea(regularLines);
+
+  const stackedYScale = getStackedYScale({
+    leftScale: areaStackedLines?.leftScale,
+    rightScale: areaStackedLines?.rightScale
+  });
+
+  const leftScaleRegularLines = areaRegularLines?.leftScale;
+  const rightScaleRegularLines = areaRegularLines?.rightScale;
+  const xScaleRegularLines = areaRegularLines?.xScale;
+
+  const commonStackedLinesProps = {
+    xScale: areaStackedLines?.xScale,
+    yScale: stackedYScale
+  };
+
+  return (
+    <g>
+      {displayAreaStackedLines && (
+        <StackedLines
+          lines={regularStackedLines}
+          renderStackedAnchorPoint={renderStackedAnchorPoint}
+          timeSeries={regularStackedLinesTimeSeries}
+          {...commonStackedLinesProps}
+        />
+      )}
+      {displayAreaInvertedStackedLines && (
+        <StackedLines
+          lines={invertedStackedLines}
+          renderStackedAnchorPoint={renderStackedAnchorPoint}
+          timeSeries={invertedStackedLinesTimeSeries}
+          {...commonStackedLinesProps}
+        />
+      )}
+
+      {displayAreaRegularLines
+        ? regularLines.map(
+            ({
+              metric,
+              areaColor,
+              transparency,
+              lineColor,
+              filled,
+              unit,
+              highlight,
+              invert
+            }) => {
+              const [, secondUnit, thirdUnit] = getUnits(
+                regularLines as Array<Line>
+              );
+              const yScale = getYScale({
+                hasMoreThanTwoUnits: !isNil(thirdUnit),
+                invert,
+                leftScale: leftScaleRegularLines,
+                rightScale: rightScaleRegularLines,
+                secondUnit,
+                unit
+              });
+
+              return (
+                <g key={metric}>
+                  {renderRegularLinesAnchorPoint?.({
+                    areaColor,
+                    lineColor,
+                    metric,
+                    timeSeries: regularLinesTimeSeries,
+                    transparency,
+                    xScale: xScaleRegularLines,
+                    yScale
+                  })}
+                  <RegularLine
+                    areaColor={areaColor}
+                    filled={filled}
+                    graphHeight={height}
+                    highlight={highlight}
+                    lineColor={lineColor}
+                    metric={metric}
+                    timeSeries={regularLinesTimeSeries}
+                    transparency={transparency}
+                    unit={unit}
+                    xScale={xScaleRegularLines}
+                    yScale={yScale}
+                  />
+                </g>
+              );
+            }
+          )
+        : null}
+    </g>
+  );
+};
+
+export default Lines;

package/src/Graph/Lines/models.ts

@@ -0,0 +1,32 @@
+import { ScaleLinear } from 'd3-scale';
+
+import { Line, TimeValue } from '../timeSeries/models';
+
+export interface ShapeGraphData {
+  [x: string]: unknown;
+  display: boolean;
+  leftScale?: ScaleLinear<number, number>;
+  rightScale?: ScaleLinear<number, number>;
+  xScale?: ScaleLinear<number, number>;
+  yScale?: ScaleLinear<number, number>;
+}
+
+export interface LinesData {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface AreaStackedLines extends ShapeGraphData {
+  invertedStackedLinesData: LinesData;
+  stackedLinesData: LinesData;
+}
+
+export interface AreaRegularLines extends ShapeGraphData {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface Shape {
+  areaRegularLines: AreaRegularLines;
+  areaStackedLines: AreaStackedLines;
+}

package/src/Graph/LoadingProgress.tsx

@@ -0,0 +1,46 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { CircularProgress, alpha } from '@mui/material';
+
+interface StyleProps {
+  height: number;
+  width: number;
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
+  graphLoader: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.common.white, 0.5),
+    display: 'flex',
+    height,
+    justifyContent: 'center',
+    position: 'absolute',
+    width
+  }
+}));
+
+interface LoadingProgress {
+  display: boolean;
+  height: number;
+  width: number;
+}
+
+const LoadingProgress = ({
+  display,
+  height,
+  width
+}: LoadingProgress): JSX.Element | null => {
+  const { classes } = useStyles({ height, width });
+
+  if (!display) {
+    return null;
+  }
+
+  return (
+    <div className={classes.graphLoader}>
+      <CircularProgress />
+    </div>
+  );
+};
+
+export default LoadingProgress;

package/src/Graph/common/index.ts

@@ -0,0 +1,33 @@
+import { alpha } from '@mui/material';
+
+const commonTickLabelProps = {
+  fontFamily: 'Roboto, sans-serif',
+  fontSize: 10,
+  textAnchor: 'middle'
+};
+
+const margin = { bottom: 30, left: 45, right: 45, top: 30 };
+
+interface FillColor {
+  areaColor: string;
+  transparency: number;
+}
+
+const getFillColor = ({
+  transparency,
+  areaColor
+}: FillColor): string | undefined =>
+  transparency ? alpha(areaColor, 1 - transparency * 0.01) : undefined;
+
+const dateFormat = 'L';
+const timeFormat = 'LT';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
+
+export {
+  commonTickLabelProps,
+  margin,
+  getFillColor,
+  dateFormat,
+  timeFormat,
+  dateTimeFormat
+};