@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/Chart/Chart.tsx

@@ -0,0 +1,363 @@
+import {
+  type MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+
+import { useAtom } from 'jotai';
+import { equals, flatten, isEmpty, isNil, pluck, reject } from 'ramda';
+
+import { ClickAwayListener, Skeleton } from '@mui/material';
+
+import { useDeepCompare } from '../../utils';
+import BarGroup from '../BarChart/BarGroup';
+import BaseChart from '../common/BaseChart/BaseChart';
+import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
+import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import Thresholds from '../common/Thresholds/Thresholds';
+import type { Thresholds as ThresholdsModel } from '../common/models';
+import {
+  getUnits,
+  getXScale,
+  getXScaleBand,
+  getYScalePerUnit
+} from '../common/timeSeries';
+import type { Line } from '../common/timeSeries/models';
+
+import Lines from './BasicComponents/Lines';
+import {
+  canDisplayThreshold,
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './BasicComponents/Lines/Threshold/models';
+import { useChartStyles } from './Chart.styles';
+import InteractionWithGraph from './InteractiveComponents';
+import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
+import GraphTooltip from './InteractiveComponents/Tooltip';
+import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
+import { margin } from './common';
+import { thresholdTooltipAtom } from './graphAtoms';
+import type {
+  Data,
+  GlobalAreaLines,
+  GraphInterval,
+  LineChartProps
+} from './models';
+import { useIntersection } from './useChartIntersection';
+
+interface Props extends LineChartProps {
+  graphData: Data;
+  graphInterval: GraphInterval;
+  graphRef: MutableRefObject<HTMLDivElement | null>;
+  limitLegend?: false | number;
+  shapeLines?: GlobalAreaLines;
+  thresholdUnit?: string;
+  thresholds?: ThresholdsModel;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  };
+}
+
+const filterLines = (
+  lines: Array<Line>,
+  displayThreshold: boolean
+): Array<Line> => {
+  if (!displayThreshold) {
+    return lines;
+  }
+  const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
+
+  if (isEmpty(lineOriginMetric)) {
+    return lines;
+  }
+
+  const findLinesUpperLower = lines.map((line) =>
+    equals(line.name, lowerLineName) || equals(line.name, upperLineName)
+      ? line
+      : null
+  );
+
+  const linesUpperLower = reject((element) => !element, findLinesUpperLower);
+
+  return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
+};
+
+const Chart = ({
+  graphData,
+  height = 500,
+  width,
+  shapeLines,
+  axis,
+  displayAnchor,
+  zoomPreview,
+  graphInterval,
+  timeShiftZones,
+  annotationEvent,
+  tooltip,
+  legend,
+  graphRef,
+  header,
+  lineStyle,
+  barStyle = {
+    opacity: 1,
+    radius: 0.2
+  },
+  thresholds,
+  thresholdUnit,
+  limitLegend,
+  skipIntersectionObserver,
+  transformMatrix
+}: Props): JSX.Element => {
+  const { classes } = useChartStyles();
+
+  const { title, timeSeries, baseAxis, lines } = graphData;
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line>>(
+    filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+  );
+
+  const graphSvgRef = useRef<SVGSVGElement | null>(null);
+
+  const [thresholdTooltip, setThresholdTooltip] = useAtom(thresholdTooltipAtom);
+
+  const { isInViewport } = useIntersection({ element: graphRef?.current });
+
+  const thresholdValues = flatten([
+    pluck('value', thresholds?.warning || []),
+    pluck('value', thresholds?.critical || [])
+  ]);
+
+  const displayedLines = useMemo(
+    () => linesGraph.filter(({ display }) => display),
+    [linesGraph]
+  );
+  const [firstUnit, secondUnit] = useMemo(
+    () => getUnits(displayedLines),
+    [displayedLines]
+  );
+
+  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
+    hasSecondUnit: Boolean(secondUnit),
+    height,
+    legendDisplay: legend?.display,
+    legendHeight: legend?.height,
+    legendPlacement: legend?.placement,
+    width
+  });
+
+  const xScale = useMemo(
+    () =>
+      getXScale({
+        dataTime: timeSeries,
+        valueWidth: graphWidth
+      }),
+    [timeSeries, graphWidth]
+  );
+
+  const xScaleBand = useMemo(
+    () =>
+      getXScaleBand({
+        dataTime: timeSeries,
+        valueWidth: graphWidth
+      }),
+    [timeSeries, graphWidth, graphHeight]
+  );
+
+  const yScalesPerUnit = useMemo(
+    () =>
+      getYScalePerUnit({
+        dataLines: linesGraph,
+        dataTimeSeries: timeSeries,
+        isCenteredZero: axis?.isCenteredZero,
+        scale: axis?.scale,
+        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
+        thresholdUnit,
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
+        valueGraphHeight: graphHeight - margin.bottom
+      }),
+    [
+      linesGraph,
+      timeSeries,
+      graphHeight,
+      thresholdValues,
+      thresholds?.enabled,
+      axis?.isCenteredZero,
+      axis?.scale,
+      axis?.scaleLogarithmicBase
+    ]
+  );
+
+  const leftScale = yScalesPerUnit[axis?.axisYLeft?.unit ?? firstUnit];
+  const rightScale = yScalesPerUnit[axis?.axisYRight?.unit ?? secondUnit];
+
+  const linesDisplayedAsLine = useMemo(
+    () =>
+      displayedLines.filter(
+        ({ displayAs }) => isNil(displayAs) || equals(displayAs, 'line')
+      ),
+    [displayedLines]
+  );
+
+  const linesDisplayedAsBar = useMemo(
+    () => displayedLines.filter(({ displayAs }) => equals(displayAs, 'bar')),
+    [displayedLines]
+  );
+
+  const allUnits = getUnits(linesGraph);
+
+  useEffect(
+    () => {
+      setLinesGraph(
+        filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+      );
+    },
+    useDeepCompare([lines, shapeLines?.areaThresholdLines])
+  );
+
+  const graphTooltipData = useGraphTooltip({
+    graphWidth,
+    timeSeries,
+    xScale
+  });
+
+  const displayLegend = legend?.display ?? true;
+  const displayTooltip = !isNil(tooltip?.renderComponent);
+
+  const showGridLines = useMemo(
+    () => isNil(axis?.showGridLines) || axis?.showGridLines,
+    [axis?.showGridLines]
+  );
+
+  if (!isInViewport && !skipIntersectionObserver) {
+    return (
+      <Skeleton
+        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
+        variant="rectangular"
+        width="100%"
+      />
+    );
+  }
+
+  return (
+    <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
+      <div className={classes.baseWrapper}>
+        <BaseChart
+          base={baseAxis}
+          graphWidth={graphWidth}
+          header={header}
+          height={height}
+          legend={{
+            displayLegend,
+            legendHeight: legend?.height,
+            mode: legend?.mode,
+            placement: legend?.placement,
+            renderExtraComponent: legend?.renderExtraComponent
+          }}
+          legendRef={legendRef}
+          limitLegend={limitLegend}
+          lines={linesGraph}
+          setLines={setLinesGraph}
+          title={title}
+        >
+          <GraphValueTooltip
+            baseAxis={baseAxis}
+            thresholdTooltip={thresholdTooltip}
+            tooltip={tooltip}
+          >
+            <div className={classes.tooltipChildren}>
+              <ChartSvgWrapper
+                allUnits={allUnits}
+                axis={axis}
+                base={baseAxis}
+                displayedLines={displayedLines}
+                graphHeight={graphHeight}
+                graphWidth={graphWidth}
+                gridLinesType={axis?.gridLinesType}
+                leftScale={leftScale}
+                rightScale={rightScale}
+                showGridLines={showGridLines}
+                svgRef={graphSvgRef}
+                timeSeries={timeSeries}
+                xScale={xScale}
+              >
+                <>
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={false}
+                    lines={linesDisplayedAsBar}
+                    orientation="horizontal"
+                    size={graphHeight - margin.top - 5}
+                    timeSeries={timeSeries}
+                    xScale={xScaleBand}
+                    yScalesPerUnit={yScalesPerUnit}
+                  />
+                  <Lines
+                    areaTransparency={lineStyle?.areaTransparency}
+                    curve={lineStyle?.curve || 'linear'}
+                    dashLength={lineStyle?.dashLength}
+                    dashOffset={lineStyle?.dashOffset}
+                    displayAnchor={displayAnchor}
+                    displayedLines={linesDisplayedAsLine}
+                    dotOffset={lineStyle?.dotOffset}
+                    graphSvgRef={graphSvgRef}
+                    height={graphHeight - margin.top}
+                    lineWidth={lineStyle?.lineWidth}
+                    scale={axis?.scale}
+                    scaleLogarithmicBase={axis?.scaleLogarithmicBase}
+                    showArea={lineStyle?.showArea}
+                    showPoints={lineStyle?.showPoints}
+                    timeSeries={timeSeries}
+                    width={graphWidth}
+                    xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
+                    {...shapeLines}
+                  />
+                  <InteractionWithGraph
+                    annotationData={{ ...annotationEvent }}
+                    commonData={{
+                      graphHeight,
+                      graphSvgRef,
+                      graphWidth,
+                      lines: displayedLines,
+                      timeSeries,
+                      xScale,
+                      yScalesPerUnit
+                    }}
+                    timeShiftZonesData={{
+                      ...timeShiftZones,
+                      graphInterval
+                    }}
+                    zoomData={{ ...zoomPreview }}
+                    transformMatrix={transformMatrix}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
+                      displayedLines={displayedLines}
+                      hideTooltip={() => setThresholdTooltip(null)}
+                      showTooltip={({ tooltipData: thresholdLabel }) =>
+                        setThresholdTooltip({
+                          thresholdLabel
+                        })
+                      }
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
+                      width={graphWidth}
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                </>
+              </ChartSvgWrapper>
+            </div>
+          </GraphValueTooltip>
+        </BaseChart>
+        {displayTooltip && <GraphTooltip {...tooltip} {...graphTooltipData} />}
+      </div>
+    </ClickAwayListener>
+  );
+};
+
+export default Chart;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -0,0 +1,45 @@
+import { Shape } from '@visx/visx';
+
+import { grey } from '@mui/material/colors';
+
+import { GuidingLines as GuidingLinesModel } from './models';
+import useTickGraph from './useTickGraph';
+
+const GuidingLines = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  graphWidth
+}: GuidingLinesModel): JSX.Element | null => {
+  const { positionX, positionY } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+  if (!positionX || !positionY) {
+    return null;
+  }
+
+  return (
+    <>
+      <Shape.Line
+        fill="dotted"
+        from={{ x: positionX, y: 0 }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="2 4"
+        strokeWidth={1}
+        to={{ x: positionX, y: graphHeight }}
+      />
+      <Shape.Line
+        from={{ x: 0, y: positionY }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="2 4"
+        strokeWidth={1}
+        to={{ x: graphWidth, y: positionY }}
+      />
+    </>
+  );
+};
+
+export default GuidingLines;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -0,0 +1,70 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { isNil, prop } from 'ramda';
+
+import { bisectDate, getDates } from '../../../common/timeSeries';
+import { TimeValue } from '../../../common/timeSeries/models';
+
+import { GetYAnchorPoint } from './models';
+import useTickGraph from './useTickGraph';
+
+import AnchorPoint from '.';
+
+interface Props {
+  lineColor: string;
+  metric_id: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+export const getYAnchorPoint = ({
+  timeTick,
+  timeSeries,
+  yScale,
+  metric_id
+}: GetYAnchorPoint): number | null => {
+  const index = bisectDate(getDates(timeSeries), timeTick);
+  const timeValue = timeSeries[index];
+
+  if (isNil(timeValue)) {
+    return null;
+  }
+
+  return yScale(prop(metric_id, timeValue) as number);
+};
+
+const RegularAnchorPoint = ({
+  xScale,
+  yScale,
+  metric_id,
+  timeSeries,
+  lineColor
+}: Props): JSX.Element | null => {
+  const { tickAxisBottom: timeTick } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
+  if (isNil(timeTick)) {
+    return null;
+  }
+
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    metric_id,
+    timeSeries,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
+  );
+};
+
+export default RegularAnchorPoint;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx

@@ -0,0 +1,81 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { isNil, map, pipe } from 'ramda';
+
+import { bisectDate } from '../../../common/timeSeries';
+import { TimeValue } from '../../../common/timeSeries/models';
+
+import { StackValue } from './models';
+import useTickGraph from './useTickGraph';
+
+import AnchorPoint from '.';
+
+interface Props {
+  lineColor: string;
+  stackValues: Array<StackValue>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+interface GetYAnchorPoint {
+  stackValues: Array<StackValue>;
+  timeTick: Date | null;
+  yScale: ScaleTime<number, number>;
+}
+
+const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
+  const toTimeTick = (stackValue): string => stackValue?.data?.timeTick;
+
+  const toDate = (tick: string): Date => new Date(tick);
+
+  return pipe(map(toTimeTick), map(toDate))(stackValues);
+};
+
+export const getYAnchorPoint = ({
+  timeTick,
+  stackValues,
+  yScale
+}: GetYAnchorPoint): number | null => {
+  const index = bisectDate(getStackedDates(stackValues), timeTick);
+  const timeValue = stackValues[index];
+  const { key } = stackValues;
+
+  if (isNil(timeValue.data[key])) {
+    return null;
+  }
+
+  return yScale(timeValue[1] as number);
+};
+
+const StackedAnchorPoint = ({
+  xScale,
+  yScale,
+  stackValues,
+  timeSeries,
+  lineColor
+}: Props): JSX.Element | null => {
+  const { tickAxisBottom: timeTick } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
+  if (isNil(timeTick)) {
+    return null;
+  }
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    stackValues,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
+  );
+};
+
+export default StackedAnchorPoint;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/index.tsx

@@ -0,0 +1,20 @@
+import { alpha } from '@mui/system';
+
+interface Props {
+  lineColor: string;
+  x: number;
+  y: number;
+}
+
+const Point = ({ lineColor, x, y }: Props): JSX.Element => (
+  <circle
+    cx={x}
+    cy={y}
+    fill={alpha(lineColor, 0.5)}
+    r={4}
+    stroke={lineColor}
+    strokeWidth={2}
+  />
+);
+
+export default Point;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/models.ts

@@ -0,0 +1,62 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { Line, TimeValue } from '../../../common/timeSeries/models';
+
+interface AnchorPoint {
+  areaColor: string;
+  lineColor: string;
+  transparency: number;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+export interface RegularLinesAnchorPoint extends AnchorPoint {
+  metric: string;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface StackedAnchorPoint extends AnchorPoint {
+  stack;
+}
+
+export interface StackData {
+  data: TimeValue;
+}
+export type StackValue = [number, number, StackData];
+
+export interface GuidingLines {
+  graphHeight: number;
+  graphWidth: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+export interface GetYAnchorPoint {
+  metric_id: number;
+  timeSeries: Array<TimeValue>;
+  timeTick: Date;
+  yScale: ScaleLinear<number, number>;
+}
+
+export interface UseTooltipAnchorPointResult {
+  tooltipDataAxisX?: string | null;
+  tooltipDataAxisYLeft?: number | null;
+  tooltipDataAxisYRight?: number | null;
+  tooltipLeftAxisX?: number;
+  tooltipLeftAxisYLeft?: number;
+  tooltipLeftAxisYRight?: number;
+  tooltipTopAxisX?: number;
+  tooltipTopAxisYLeft?: number;
+  tooltipTopAxisYRight?: number;
+}
+
+export interface TooltipAnchorModel {
+  baseAxis: number;
+  graphHeight: number;
+  graphWidth?: number;
+  leftScale?: ScaleLinear<number, number>;
+  lines: Array<Line>;
+  rightScale?: ScaleLinear<number, number>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}