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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.17",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.0",
   "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/Graph/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/Axes/index.tsx

@@ -0,0 +1,99 @@
+import { Axis } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import dayjs from 'dayjs';
+import { gte } from 'ramda';
+
+import useLocaleDateTimeFormat, {
+  dateFormat,
+  timeFormat
+} from '../../utils/useLocaleDateTimeFormat';
+import { GraphParameters } from '../models';
+import { getUnits } from '../timeSeries';
+
+import UnitLabel from './UnitLabel';
+import { Data } from './models';
+import useAxisY from './useAxisY';
+
+interface Props {
+  data: Data;
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  queryParameters?: GraphParameters;
+  rightScale: ScaleLinear<number, number>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Axes = ({
+  height,
+  width,
+  data,
+  rightScale,
+  leftScale,
+  xScale,
+  queryParameters
+}: 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 getXAxisTickFormat = (): string => {
+    const parameters = queryParameters;
+    if (!parameters) {
+      return timeFormat;
+    }
+
+    const numberDays = dayjs
+      .duration(dayjs(parameters.end).diff(dayjs(parameters.start)))
+      .asDays();
+
+    return gte(numberDays, 2) ? dateFormat : timeFormat;
+  };
+
+  const tickFormat = data?.axisX?.xAxisTickFormat || getXAxisTickFormat();
+
+  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/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/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/Graph.tsx

@@ -0,0 +1,231 @@
+import { useMemo, useRef } from 'react';
+
+import { Group } from '@visx/visx';
+
+import Axes from './Axes';
+import Grids from './Grids';
+import Header from './Header';
+import InteractionWithGraph from './InteractionWithGraph';
+import RegularAnchorPoint from './InteractionWithGraph/AnchorPoint/RegularAnchorPoint';
+import StackedAnchorPoint from './InteractionWithGraph/AnchorPoint/StackedAnchorPoint';
+import {
+  RegularLinesAnchorPoint,
+  StackValue,
+  StackedAnchorPoint as StackedAnchorPointModel
+} from './InteractionWithGraph/AnchorPoint/models';
+import useAnchorPoint from './InteractionWithGraph/AnchorPoint/useAnchorPoint';
+import Lines from './Lines';
+import useRegularLines from './Lines/RegularLines/useRegularLines';
+import useStackedLines from './Lines/StackedLines/useStackedLines';
+import LoadingProgress from './LoadingProgress';
+import { margin } from './common';
+import { Data, GlobalAreaLines, GraphProps } from './models';
+import { getLeftScale, getRightScale, getXScale } from './timeSeries';
+
+interface Props extends GraphProps {
+  graphData: Data;
+  loading: boolean;
+  shapeLines: GlobalAreaLines;
+}
+
+const Graph = ({
+  graphData,
+  height,
+  width,
+  shapeLines,
+  axis,
+  anchorPoint,
+  loading,
+  zoomPreview
+}: Props): JSX.Element => {
+  const graphSvgRef = useRef<SVGSVGElement | null>(null);
+
+  const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
+  const graphHeight = height > 0 ? height - margin.top - margin.bottom : 0;
+
+  const { title, timeSeries, lines, baseAxis, queryParameters } = graphData;
+
+  const xScale = useMemo(
+    () =>
+      getXScale({
+        dataTime: timeSeries,
+        valueWidth: graphWidth
+      }),
+    [timeSeries, graphWidth]
+  );
+
+  const leftScale = useMemo(
+    () =>
+      getLeftScale({
+        dataLines: lines,
+        dataTimeSeries: timeSeries,
+        valueGraphHeight: graphHeight
+      }),
+    [lines, timeSeries, graphHeight]
+  );
+
+  const rightScale = useMemo(
+    () =>
+      getRightScale({
+        dataLines: lines,
+        dataTimeSeries: timeSeries,
+        valueGraphHeight: graphHeight
+      }),
+    [timeSeries, lines, graphHeight]
+  );
+
+  const { timeTick, positionX, positionY } = useAnchorPoint({
+    graphSvgRef,
+    timeSeries,
+    xScale
+  });
+
+  const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
+    lines,
+    timeSeries
+  });
+
+  const { regularLines } = useRegularLines({ lines });
+
+  const commonLinesProps = {
+    display: true,
+    leftScale,
+    rightScale,
+    xScale
+  };
+
+  const areaRegularLines = {
+    lines: regularLines,
+    timeSeries,
+    ...commonLinesProps,
+    ...shapeLines?.areaRegularLines
+  };
+
+  const areaStackedLines = {
+    invertedStackedLinesData,
+    stackedLinesData,
+    ...commonLinesProps,
+    ...shapeLines?.areaStackedLines
+  };
+
+  const displayRegularLinesAnchorPoint =
+    anchorPoint?.areaRegularLinesAnchorPoint?.display ?? true;
+
+  const displayStackedAnchorPoint =
+    anchorPoint?.areaStackedLinesAnchorPoint?.display ?? true;
+
+  const displayTimeTick =
+    displayRegularLinesAnchorPoint ?? displayStackedAnchorPoint;
+
+  const commonAnchorPoint = {
+    displayTimeValues: true,
+    graphHeight,
+    graphWidth,
+    positionX,
+    positionY,
+    timeTick
+  };
+
+  const renderRegularLinesAnchorPoint = ({
+    areaColor,
+    lineColor,
+    metric,
+    timeSeries: regularLinesTimeSeries,
+    transparency,
+    xScale: xScaleRegularLines,
+    yScale
+  }: RegularLinesAnchorPoint): JSX.Element => (
+    <g>
+      {displayRegularLinesAnchorPoint && (
+        <RegularAnchorPoint
+          areaColor={areaColor}
+          lineColor={lineColor}
+          metric={metric}
+          timeSeries={regularLinesTimeSeries}
+          transparency={transparency}
+          xScale={xScaleRegularLines}
+          yScale={yScale}
+          {...commonAnchorPoint}
+        />
+      )}
+    </g>
+  );
+
+  const renderStackedAnchorPoint = ({
+    areaColor,
+    transparency,
+    lineColor,
+    stack,
+    xScale: x,
+    yScale: y
+  }: StackedAnchorPointModel): JSX.Element => (
+    <g>
+      {displayStackedAnchorPoint && (
+        <StackedAnchorPoint
+          areaColor={areaColor}
+          lineColor={lineColor}
+          stackValues={stack as unknown as Array<StackValue>}
+          transparency={transparency}
+          xScale={x}
+          yScale={y}
+          {...commonAnchorPoint}
+        />
+      )}
+    </g>
+  );
+
+  return (
+    <>
+      <Header
+        displayTimeTick={displayTimeTick}
+        timeTick={timeTick}
+        title={title}
+      />
+      <LoadingProgress display={loading} height={height} width={width} />
+      <svg height={height} ref={graphSvgRef} width="100%">
+        <Group.Group left={margin.left} top={margin.top}>
+          <Grids
+            height={graphHeight}
+            leftScale={leftScale}
+            width={graphWidth}
+            xScale={xScale}
+          />
+
+          <Axes
+            data={{
+              baseAxis,
+              lines,
+              timeSeries,
+              ...axis
+            }}
+            height={graphHeight}
+            leftScale={leftScale}
+            queryParameters={queryParameters}
+            rightScale={rightScale}
+            width={graphWidth}
+            xScale={xScale}
+          />
+
+          <Lines
+            anchorPoint={{
+              renderRegularLinesAnchorPoint,
+              renderStackedAnchorPoint
+            }}
+            height={graphHeight}
+            shape={{ areaRegularLines, areaStackedLines }}
+          />
+
+          <InteractionWithGraph
+            commonData={{ graphHeight, graphSvgRef, graphWidth }}
+            zoomData={{
+              xScale,
+              ...zoomPreview
+            }}
+          />
+        </Group.Group>
+      </svg>
+    </>
+  );
+};
+
+export default Graph;

package/src/Graph/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/Header/index.tsx

@@ -0,0 +1,34 @@
+import { isNil } from 'ramda';
+
+import Typography from '@mui/material/Typography';
+
+import useLocaleDateTimeFormat from '../../utils/useLocaleDateTimeFormat';
+
+interface Props {
+  displayTimeTick?: boolean;
+  timeTick?: Date;
+  title: string;
+}
+
+const Header = ({
+  title,
+  timeTick,
+  displayTimeTick = true
+}: Props): JSX.Element => {
+  const { toDateTime } = useLocaleDateTimeFormat();
+  const time =
+    displayTimeTick && !isNil(timeTick) ? toDateTime(timeTick) : null;
+
+  return (
+    <>
+      <Typography align="center" variant="body1">
+        {title}
+      </Typography>
+
+      <Typography align="center" style={{ height: 20 }} variant="body1">
+        {time}
+      </Typography>
+    </>
+  );
+};
+export default Header;

package/src/Graph/InteractionWithGraph/AnchorPoint/RegularAnchorPoint.tsx

@@ -0,0 +1,88 @@
+import { memo } from 'react';
+
+import { equals, isNil, not, prop } from 'ramda';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { getDates, bisectDate } from '../../timeSeries';
+import { TimeValue } from '../../timeSeries/models';
+
+import AnchorPoint from '.';
+
+interface Props {
+  areaColor: string;
+  displayTimeValues: boolean;
+  graphHeight: number;
+  graphWidth: number;
+  lineColor: string;
+  metric: string;
+  positionX?: number;
+  positionY?: number;
+  timeSeries: Array<TimeValue>;
+  timeTick?: Date;
+  transparency: number;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const getYAnchorPoint = ({
+  timeTick,
+  timeSeries,
+  yScale,
+  metric
+}: Pick<Props, 'timeTick' | 'timeSeries' | 'yScale' | 'metric'>): number => {
+  const index = bisectDate(getDates(timeSeries), timeTick);
+  const timeValue = timeSeries[index];
+
+  return yScale(prop(metric, timeValue) as number);
+};
+
+const RegularAnchorPoint = ({
+  xScale,
+  yScale,
+  metric,
+  timeSeries,
+  timeTick,
+  areaColor,
+  transparency,
+  lineColor,
+  displayTimeValues,
+  ...rest
+}: Props): JSX.Element | null => {
+  if (isNil(timeTick) || not(displayTimeValues)) {
+    return null;
+  }
+
+  if (isNil(timeTick) || not(displayTimeValues)) {
+    return null;
+  }
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    metric,
+    timeSeries,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint
+      areaColor={areaColor}
+      lineColor={lineColor}
+      transparency={transparency}
+      x={xAnchorPoint}
+      y={yAnchorPoint}
+      {...rest}
+    />
+  );
+};
+
+export default memo(
+  RegularAnchorPoint,
+  (prevProps, nextProps) =>
+    equals(prevProps.timeTick, nextProps.timeTick) &&
+    equals(prevProps.timeSeries, nextProps.timeSeries)
+);