@centreon/ui 24.4.21 → 24.4.23

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+
+import { scaleLinear } from '@visx/scale';
+import { T, equals, gt, lt } from 'ramda';
+
+import { Box } from '@mui/material';
+
+import { Tooltip } from '../../components';
+
+import { HeatMapProps } from './model';
+import { useHeatMapStyles } from './HeatMap.styles';
+
+const gap = 8;
+const maxTileSize = 120;
+const smallestTileSize = 44;
+
+const ResponsiveHeatMap = <TData,>({
+  width,
+  children,
+  tiles,
+  arrowClassName,
+  tooltipContent,
+  tileSizeFixed,
+  displayTooltipCondition = T
+}: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
+  const { classes, cx } = useHeatMapStyles();
+
+  const tileSize = useMemo(() => {
+    const scaleWidth = scaleLinear({
+      clamp: true,
+      domain: [680, 1056],
+      range: [76, maxTileSize]
+    });
+    const tileWidth = scaleWidth(width);
+
+    const tilesLength = tiles.length;
+
+    const maxTotalTilesWidth =
+      tilesLength * maxTileSize + (tilesLength - 1) * gap;
+    const theoricalTotalTilesWidth =
+      tilesLength * tileWidth + (tilesLength - 1) * gap;
+
+    if (lt(width, 680) && gt(maxTotalTilesWidth, width)) {
+      return smallestTileSize;
+    }
+
+    if (lt(theoricalTotalTilesWidth, width)) {
+      return maxTileSize;
+    }
+
+    return tileSizeFixed ? maxTileSize : tileWidth;
+  }, [width, tiles]);
+
+  const isSmallestSize = equals(tileSize, smallestTileSize);
+
+  if (equals(width, 0)) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gap: 1,
+        gridTemplateColumns: `repeat(auto-fit, ${tileSize}px)`
+      }}
+    >
+      {tiles.map(({ backgroundColor, id, data }) => (
+        <Box className={classes.heatMapTile} key={id} sx={{ backgroundColor }}>
+          <Tooltip
+            hasCaret
+            classes={{
+              arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
+              tooltip: classes.heatMapTooltip
+            }}
+            followCursor={false}
+            label={
+              displayTooltipCondition?.(data) &&
+              tooltipContent?.({
+                backgroundColor,
+                data,
+                id,
+                isSmallestSize
+              })
+            }
+            position="right-start"
+          >
+            <div className={classes.heatMapTileContent}>
+              {children({ backgroundColor, data, id, isSmallestSize })}
+            </div>
+          </Tooltip>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default ResponsiveHeatMap;

package/src/Graph/HeatMap/index.ts

@@ -0,0 +1 @@
+export { default as HeatMap } from './HeatMap';

package/src/Graph/HeatMap/model.ts

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react';
+
+interface Tile<TData> {
+  backgroundColor: string;
+  data: TData;
+  id: string;
+}
+
+interface ChildrenProps<TData> {
+  backgroundColor: string;
+  data: TData;
+  id: string;
+  isSmallestSize: boolean;
+}
+
+export interface HeatMapProps<TData> {
+  arrowClassName?: string;
+  children: ({
+    backgroundColor,
+    id,
+    data,
+    isSmallestSize
+  }: ChildrenProps<TData>) => ReactElement | boolean | null;
+  displayTooltipCondition?: (data: TData) => boolean;
+  tileSizeFixed?: boolean;
+  tiles: Array<Tile<TData>>;
+  tooltipContent?: ({
+    backgroundColor,
+    id,
+    data,
+    isSmallestSize
+  }: ChildrenProps<TData>) => ReactElement | boolean | null;
+}

package/src/Graph/LineChart/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/LineChart/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 '../../../common/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.min(Math.ceil(width / 82), 12);
+
+  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 - 5}
+      />
+
+      {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/LineChart/BasicComponents/Axes/models.ts

@@ -0,0 +1,26 @@
+import { Line, TimeValue } from '../../../common/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/LineChart/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 '../../../common/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/LineChart/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/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -0,0 +1,99 @@
+import { memo } from 'react';
+
+import { Shape } from '@visx/visx';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { equals, isNil, prop } from 'ramda';
+
+import { getTime } from '../../../../common/timeSeries';
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { getFillColor } from '../../../common';
+import { CurveType } from '../models';
+
+interface Props {
+  areaColor: string;
+  curve: CurveType;
+  filled: boolean;
+  graphHeight: number;
+  highlight?: boolean;
+  lineColor: string;
+  metric_id: number;
+  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_id,
+  lineColor,
+  unit,
+  yScale,
+  xScale,
+  areaColor,
+  transparency,
+  graphHeight,
+  curve
+}: Props): JSX.Element => {
+  const props = {
+    curve,
+    data: timeSeries,
+    defined: (value): boolean => !isNil(value[metric_id]),
+    opacity: 1,
+    stroke: lineColor,
+    strokeWidth: !highlight ? 2 : 3,
+    unit,
+    x: (timeValue): number => xScale(getTime(timeValue)) as number,
+    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
+  };
+
+  if (filled) {
+    return (
+      <Shape.AreaClosed<TimeValue>
+        fill={getFillColor({ areaColor, transparency })}
+        fillRule="nonzero"
+        key={metric_id}
+        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,
+    yScale: prevYScale
+  } = prevProps;
+  const {
+    timeSeries: nextTimeSeries,
+    graphHeight: nextGraphHeight,
+    highlight: nextHighlight,
+    xScale: nextXScale,
+    yScale: nextYScale
+  } = nextProps;
+
+  const prevXScaleRange = prevXScale.range();
+  const nextXScaleRange = nextXScale.range();
+  const prevYScaleDomain = prevYScale.domain();
+  const nextYScaleDomain = nextYScale.domain();
+
+  return (
+    equals(prevTimeSeries, nextTimeSeries) &&
+    equals(prevGraphHeight, nextGraphHeight) &&
+    equals(prevHighlight, nextHighlight) &&
+    equals(prevXScaleRange, nextXScaleRange) &&
+    equals(prevYScaleDomain, nextYScaleDomain)
+  );
+});

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

@@ -0,0 +1,15 @@
+import { difference } from 'ramda';
+
+import { Line } from '../../../../common/timeSeries/models';
+import { getSortedStackedLines } from '../../../../common/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/LineChart/BasicComponents/Lines/StackedLines/index.tsx

@@ -0,0 +1,81 @@
+import { 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 '../../../../common/timeSeries';
+import { Line, TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
+
+interface Props {
+  curve: CurveType;
+  displayAnchor: boolean;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const StackLines = ({
+  timeSeries,
+  lines,
+  yScale,
+  xScale,
+  displayAnchor,
+  curve
+}: Props): JSX.Element => {
+  return (
+    <Shape.AreaStack
+      curve={curve}
+      data={timeSeries}
+      defined={(d): boolean => {
+        return pipe(
+          map(prop('metric_id')) as unknown as (
+            displayedLines
+          ) => Array<string>,
+          all((metric_id) => pipe(path(['data', metric_id]), isNil, not)(d))
+        )(lines);
+      }}
+      keys={map(prop('metric_id'), 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/LineChart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -0,0 +1,39 @@
+import {
+  getInvertedStackedLines,
+  getNotInvertedStackedLines,
+  getTimeSeriesForLines
+} from '../../../../common/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/LineChart/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -0,0 +1,53 @@
+import { Threshold } from '@visx/threshold';
+
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
+
+interface Props {
+  curve: CurveType;
+  fillAboveArea: string;
+  fillBelowArea: string;
+  fillOpacity?: number;
+  getX: (timeValue: TimeValue) => number;
+  getY0: (timeValue: TimeValue) => number;
+  getY1: (timeValue: TimeValue) => number;
+  graphHeight: number;
+  id: string;
+  timeSeries: Array<TimeValue>;
+}
+
+const BasicThreshold = ({
+  getX,
+  getY0,
+  getY1,
+  graphHeight,
+  timeSeries,
+  fillOpacity = 0.1,
+  id,
+  fillAboveArea,
+  fillBelowArea,
+  curve
+}: Props): JSX.Element => {
+  return (
+    <Threshold
+      aboveAreaProps={{
+        fill: fillAboveArea,
+        fillOpacity
+      }}
+      belowAreaProps={{
+        fill: fillBelowArea,
+        fillOpacity
+      }}
+      clipAboveTo={0}
+      clipBelowTo={graphHeight}
+      curve={curve}
+      data={timeSeries}
+      id={id}
+      x={getX}
+      y0={getY0}
+      y1={getY1}
+    />
+  );
+};
+
+export default BasicThreshold;