@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/LineChart/LineChart.tsx

@@ -1,353 +0,0 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
-
-import { Tooltip } from '@visx/visx';
-import { equals, flatten, isNil, pluck, reject } from 'ramda';
-
-import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
-
-import {
-  getLeftScale,
-  getRightScale,
-  getUnits,
-  getXScale
-} from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import { Tooltip as MuiTooltip } from '../../components/Tooltip';
-import { useTooltipStyles } from '../common/useTooltipStyles';
-import BaseChart from '../common/BaseChart/BaseChart';
-import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
-import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
-import Thresholds from '../common/Thresholds/Thresholds';
-import { useDeepCompare } from '../../utils';
-
-import Lines from './BasicComponents/Lines';
-import {
-  canDisplayThreshold,
-  findLineOfOriginMetricThreshold,
-  lowerLineName,
-  upperLineName
-} from './BasicComponents/Lines/Threshold/models';
-import InteractionWithGraph from './InteractiveComponents';
-import GraphTooltip from './InteractiveComponents/Tooltip';
-import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
-import { margin } from './common';
-import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
-import { useIntersection } from './useLineChartIntersection';
-import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
-import { useLineChartStyles } from './LineChart.styles';
-
-interface Props extends LineChartProps {
-  graphData: Data;
-  graphInterval: GraphInterval;
-  graphRef: MutableRefObject<HTMLDivElement | null>;
-  limitLegend?: false | number;
-  shapeLines?: GlobalAreaLines;
-  thresholdUnit?: string;
-  thresholds?: ThresholdsModel;
-}
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
-  if (!displayThreshold) {
-    return lines;
-  }
-  const lineOriginMetric = findLineOfOriginMetricThreshold(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 LineChart = ({
-  graphData,
-  height = 500,
-  width,
-  shapeLines,
-  axis,
-  displayAnchor,
-  zoomPreview,
-  graphInterval,
-  timeShiftZones,
-  annotationEvent,
-  tooltip,
-  legend,
-  graphRef,
-  header,
-  lineStyle,
-  thresholds,
-  thresholdUnit,
-  limitLegend
-}: Props): JSX.Element => {
-  const { classes } = useLineChartStyles();
-  const { classes: tooltipClasses, cx } = useTooltipStyles();
-
-  const theme = useTheme();
-
-  const { title, timeSeries, baseAxis, lines } = graphData;
-
-  const [linesGraph, setLinesGraph] = useState<Array<Line>>(
-    filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
-  );
-  const graphSvgRef = useRef<SVGSVGElement | null>(null);
-
-  const { isInViewport } = useIntersection({ element: graphRef?.current });
-
-  const {
-    tooltipOpen: thresholdTooltipOpen,
-    tooltipLeft: thresholdTooltipLeft,
-    tooltipTop: thresholdTooltipTop,
-    tooltipData: thresholdTooltipData,
-    hideTooltip: hideThresholdTooltip,
-    showTooltip: showThresholdTooltip
-  } = Tooltip.useTooltip();
-
-  const thresholdValues = flatten([
-    pluck('value', thresholds?.warning || []),
-    pluck('value', thresholds?.critical || [])
-  ]);
-
-  const [, secondUnit] = getUnits(linesGraph);
-
-  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 displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
-    [linesGraph]
-  );
-
-  const leftScale = useMemo(
-    () =>
-      getLeftScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        isCenteredZero: axis?.isCenteredZero,
-        scale: axis?.scale,
-        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - 35
-      }),
-    [
-      displayedLines,
-      timeSeries,
-      graphHeight,
-      thresholdValues,
-      axis?.isCenteredZero,
-      axis?.scale,
-      axis?.scaleLogarithmicBase
-    ]
-  );
-
-  const rightScale = useMemo(
-    () =>
-      getRightScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        isCenteredZero: axis?.isCenteredZero,
-        scale: axis?.scale,
-        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - 35
-      }),
-    [
-      timeSeries,
-      displayedLines,
-      graphHeight,
-      axis?.isCenteredZero,
-      axis?.scale,
-      axis?.scaleLogarithmicBase
-    ]
-  );
-
-  useEffect(
-    () => {
-      setLinesGraph(
-        filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
-      );
-    },
-    useDeepCompare([lines])
-  );
-
-  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) {
-    return (
-      <Skeleton
-        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
-        variant="rectangular"
-        width="100%"
-      />
-    );
-  }
-
-  return (
-    <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-      <>
-        <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}
-        >
-          <MuiTooltip
-            classes={{
-              tooltip: cx(
-                tooltipClasses.tooltip,
-                tooltipClasses.tooltipDisablePadding
-              )
-            }}
-            placement="top-start"
-            title={
-              equals('hidden', tooltip?.mode) ? null : (
-                <GraphValueTooltip
-                  base={baseAxis}
-                  isSingleMode={equals('single', tooltip?.mode)}
-                  sortOrder={tooltip?.sortOrder}
-                />
-              )
-            }
-          >
-            <div className={classes.tooltipChildren}>
-              <ChartSvgWrapper
-                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}
-              >
-                <>
-                  <Lines
-                    areaTransparency={lineStyle?.areaTransparency}
-                    curve={lineStyle?.curve || 'linear'}
-                    dashLength={lineStyle?.dashLength}
-                    dashOffset={lineStyle?.dashOffset}
-                    displayAnchor={displayAnchor}
-                    displayedLines={displayedLines}
-                    dotOffset={lineStyle?.dotOffset}
-                    graphSvgRef={graphSvgRef}
-                    height={graphHeight - margin.top}
-                    leftScale={leftScale}
-                    lineWidth={lineStyle?.lineWidth}
-                    rightScale={rightScale}
-                    showArea={lineStyle?.showArea}
-                    showPoints={lineStyle?.showPoints}
-                    timeSeries={timeSeries}
-                    width={graphWidth}
-                    xScale={xScale}
-                    {...shapeLines}
-                  />
-                  <InteractionWithGraph
-                    annotationData={{ ...annotationEvent }}
-                    commonData={{
-                      graphHeight,
-                      graphSvgRef,
-                      graphWidth,
-                      leftScale,
-                      lines: linesGraph,
-                      rightScale,
-                      timeSeries,
-                      xScale
-                    }}
-                    timeShiftZonesData={{
-                      ...timeShiftZones,
-                      graphInterval
-                    }}
-                    zoomData={{ ...zoomPreview }}
-                  />
-                  {thresholds?.enabled && (
-                    <Thresholds
-                      displayedLines={displayedLines}
-                      hideTooltip={hideThresholdTooltip}
-                      leftScale={leftScale}
-                      rightScale={rightScale}
-                      showTooltip={showThresholdTooltip}
-                      thresholdUnit={thresholdUnit}
-                      thresholds={thresholds as ThresholdsModel}
-                      width={graphWidth}
-                    />
-                  )}
-                </>
-              </ChartSvgWrapper>
-            </div>
-          </MuiTooltip>
-        </BaseChart>
-        {displayTooltip && <GraphTooltip {...tooltip} {...graphTooltipData} />}
-        <Fade in={thresholdTooltipOpen}>
-          <Tooltip.Tooltip
-            left={thresholdTooltipLeft}
-            style={{
-              ...baseStyles,
-              backgroundColor: theme.palette.background.paper,
-              color: theme.palette.text.primary,
-              transform: `translate(${graphWidth / 2}px, -10px)`
-            }}
-            top={thresholdTooltipTop}
-          >
-            {thresholdTooltipData}
-          </Tooltip.Tooltip>
-        </Fade>
-      </>
-    </ClickAwayListener>
-  );
-};
-
-export default LineChart;

package/src/Graph/LineChart/LoadingSkeleton.tsx

@@ -1,44 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { Skeleton } from '@mui/material';
-
-interface Props {
-  displayTitleSkeleton: boolean;
-  graphHeight: number;
-}
-
-const useSkeletonStyles = makeStyles<Props>()(
-  (theme, { graphHeight, displayTitleSkeleton }) => ({
-    loadingSkeleton: {
-      display: 'grid',
-      gridGap: theme.spacing(1),
-      gridTemplateRows: `${
-        displayTitleSkeleton ? '0.8fr' : ''
-      } ${graphHeight}px ${theme.spacing(2)}`,
-      height: '100%'
-    },
-    loadingSkeletonLine: {
-      paddingBottom: theme.spacing(1),
-      transform: 'none'
-    }
-  })
-);
-
-const LoadingSkeleton = ({
-  graphHeight,
-  displayTitleSkeleton
-}: Props): JSX.Element => {
-  const { classes } = useSkeletonStyles({ displayTitleSkeleton, graphHeight });
-
-  const skeletonLine = <Skeleton className={classes.loadingSkeletonLine} />;
-
-  return (
-    <div className={classes.loadingSkeleton}>
-      {displayTitleSkeleton && skeletonLine}
-      {skeletonLine}
-      {skeletonLine}
-    </div>
-  );
-};
-
-export default LoadingSkeleton;

package/src/Graph/LineChart/common/index.ts

@@ -1,52 +0,0 @@
-import * as Curve from '@visx/curve';
-import { always, cond, equals, isNil } from 'ramda';
-
-import { alpha } from '@mui/material';
-
-const commonTickLabelProps = {
-  fontFamily: 'Roboto, sans-serif',
-  fontSize: 10,
-  textAnchor: 'middle'
-};
-
-const margin = { bottom: 30, left: 50, right: 50, top: 30 };
-
-interface FillColor {
-  areaColor: string;
-  transparency: number;
-}
-
-const getFillColor = ({
-  transparency,
-  areaColor
-}: FillColor): string | undefined => {
-  return !isNil(transparency)
-    ? alpha(areaColor, 1 - transparency * 0.01)
-    : undefined;
-};
-
-const dateFormat = 'L';
-const timeFormat = 'LT';
-const dateTimeFormat = `${dateFormat} ${timeFormat}`;
-const maxLinesDisplayedLegend = 11;
-
-const getCurveFactory = (
-  curve: 'linear' | 'step' | 'natural'
-): typeof Curve.curveLinear => {
-  return cond([
-    [equals('linear'), always(Curve.curveLinear)],
-    [equals('step'), always(Curve.curveStep)],
-    [equals('natural'), always(Curve.curveCatmullRom)]
-  ])(curve);
-};
-
-export {
-  commonTickLabelProps,
-  margin,
-  getFillColor,
-  dateFormat,
-  timeFormat,
-  dateTimeFormat,
-  maxLinesDisplayedLegend,
-  getCurveFactory
-};

package/src/Graph/LineChart/graphAtoms.ts

@@ -1,3 +0,0 @@
-import { atom } from 'jotai';
-
-export const timeTickGraphAtom = atom<Date | null>(null);