@centreon/ui 24.11.13 → 24.11.14

package/src/Graph/Chart/Chart.tsx

@@ -1,363 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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>;
-}