@centreon/ui 23.10.43 → 23.10.44

package/src/Graph/Graph.tsx

@@ -1,217 +0,0 @@
-import { MutableRefObject, useMemo, useRef } from 'react';
-
-import { Group } from '@visx/visx';
-import { isNil } from 'ramda';
-
-import { ClickAwayListener, Skeleton } from '@mui/material';
-
-import Axes from './BasicComponents/Axes';
-import Grids from './BasicComponents/Grids';
-import Lines from './BasicComponents/Lines';
-import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import LoadingProgress from './BasicComponents/LoadingProgress';
-import useFilterLines from './BasicComponents/useFilterLines';
-import { useStyles } from './Graph.styles';
-import Header from './Header';
-import InteractionWithGraph from './InteractiveComponents';
-import TooltipAnchorPoint from './InteractiveComponents/AnchorPoint/TooltipAnchorPoint';
-import GraphTooltip from './InteractiveComponents/Tooltip';
-import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
-import Legend from './Legend';
-import { margin } from './common';
-import {
-  Data,
-  GlobalAreaLines,
-  GraphInterval,
-  GraphProps,
-  LegendModel
-} from './models';
-import { getLeftScale, getRightScale, getXScale } from './timeSeries';
-import { useIntersection } from './useGraphIntersection';
-
-interface Props extends GraphProps {
-  graphData: Data;
-  graphInterval: GraphInterval;
-  graphRef: MutableRefObject<HTMLDivElement | null>;
-  legend?: LegendModel;
-  shapeLines?: GlobalAreaLines;
-}
-
-const Graph = ({
-  graphData,
-  height = 500,
-  width,
-  shapeLines,
-  axis,
-  displayAnchor,
-  loading,
-  zoomPreview,
-  graphInterval,
-  timeShiftZones,
-  annotationEvent,
-  tooltip,
-  legend,
-  graphRef,
-  header
-}: Props): JSX.Element => {
-  const graphSvgRef = useRef<SVGSVGElement | null>(null);
-
-  const { classes } = useStyles();
-  const { isInViewport } = useIntersection({ element: graphRef?.current });
-
-  const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
-  const graphHeight = height > 0 ? height - margin.top - margin.bottom : 0;
-
-  const { title, timeSeries, baseAxis, lines } = graphData;
-
-  const { displayedLines, newLines } = useFilterLines({
-    displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines
-  });
-
-  const xScale = useMemo(
-    () =>
-      getXScale({
-        dataTime: timeSeries,
-        valueWidth: graphWidth
-      }),
-    [timeSeries, graphWidth]
-  );
-
-  const leftScale = useMemo(
-    () =>
-      getLeftScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        valueGraphHeight: graphHeight
-      }),
-    [displayedLines, timeSeries, graphHeight]
-  );
-
-  const rightScale = useMemo(
-    () =>
-      getRightScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        valueGraphHeight: graphHeight
-      }),
-    [timeSeries, displayedLines, graphHeight]
-  );
-
-  const graphTooltipData = useGraphTooltip({
-    graphWidth,
-    timeSeries,
-    xScale
-  });
-
-  const displayLegend = legend?.display ?? true;
-  const displayTooltip = !isNil(tooltip?.renderComponent);
-
-  if (!isInViewport) {
-    return (
-      <Skeleton
-        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
-        variant="rectangular"
-        width="100%"
-      />
-    );
-  }
-
-  return (
-    <>
-      <Header
-        displayTimeTick={displayAnchor?.displayGuidingLines ?? true}
-        header={header}
-        timeSeries={timeSeries}
-        title={title}
-        xScale={xScale}
-      />
-      <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-        <div className={classes.container}>
-          <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: displayedLines,
-                  timeSeries,
-                  ...axis
-                }}
-                graphInterval={graphInterval}
-                height={graphHeight}
-                leftScale={leftScale}
-                rightScale={rightScale}
-                width={graphWidth}
-                xScale={xScale}
-              />
-
-              <Lines
-                displayAnchor={displayAnchor}
-                displayedLines={displayedLines}
-                graphSvgRef={graphSvgRef}
-                height={graphHeight}
-                leftScale={leftScale}
-                rightScale={rightScale}
-                timeSeries={timeSeries}
-                width={graphWidth}
-                xScale={xScale}
-                {...shapeLines}
-              />
-
-              <InteractionWithGraph
-                annotationData={{ ...annotationEvent }}
-                commonData={{
-                  graphHeight,
-                  graphSvgRef,
-                  graphWidth,
-                  timeSeries,
-                  xScale
-                }}
-                timeShiftZonesData={{
-                  ...timeShiftZones,
-                  graphInterval,
-                  loading
-                }}
-                zoomData={{ ...zoomPreview }}
-              />
-            </Group.Group>
-          </svg>
-          {displayTooltip && (
-            <GraphTooltip {...tooltip} {...graphTooltipData} />
-          )}
-          {(displayAnchor?.displayTooltipsGuidingLines ?? true) && (
-            <TooltipAnchorPoint
-              baseAxis={baseAxis}
-              graphHeight={graphHeight}
-              graphWidth={graphWidth}
-              leftScale={leftScale}
-              lines={displayedLines}
-              rightScale={rightScale}
-              timeSeries={timeSeries}
-              xScale={xScale}
-            />
-          )}
-
-          {displayLegend && (
-            <Legend
-              base={baseAxis}
-              displayAnchor={displayAnchor?.displayGuidingLines ?? true}
-              lines={newLines}
-              renderExtraComponent={legend?.renderExtraComponent}
-              timeSeries={timeSeries}
-            />
-          )}
-        </div>
-      </ClickAwayListener>
-    </>
-  );
-};
-
-export default Graph;

package/src/Graph/Header/index.tsx

@@ -1,65 +0,0 @@
-import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
-
-import Typography from '@mui/material/Typography';
-
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
-
-import { useStyles } from '../Graph.styles';
-import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
-import { GraphHeader } from '../models';
-import { TimeValue } from '../timeSeries/models';
-
-interface Props {
-  displayTimeTick?: boolean;
-  header?: GraphHeader;
-  timeSeries: Array<TimeValue>;
-  title: string;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Header = ({
-  title,
-  displayTimeTick = true,
-  header,
-  timeSeries,
-  xScale
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { toDateTime } = useLocaleDateTimeFormat();
-
-  const { tickAxisBottom } = useTickGraph({
-    timeSeries,
-    xScale
-  });
-  const time =
-    displayTimeTick && !isNil(tickAxisBottom)
-      ? toDateTime(tickAxisBottom)
-      : null;
-
-  const displayTitle = header?.displayTitle ?? true;
-
-  return useMemoComponent({
-    Component: (
-      <div className={classes.header}>
-        <div />
-        {displayTitle && (
-          <div>
-            <Typography align="center" variant="body1">
-              {title}
-            </Typography>
-
-            <Typography align="center" style={{ height: 20 }} variant="body1">
-              {time}
-            </Typography>
-          </div>
-        )}
-        {header?.extraComponent}
-      </div>
-    ),
-
-    memoProps: [time, timeSeries, xScale, displayTimeTick, title, header]
-  });
-};
-
-export default Header;

package/src/Graph/Icons/Downtime.tsx

@@ -1,9 +0,0 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
-
-import { ReactComponent as IconDowntime } from '../../@assets/icons/downtime.icon.svg';
-
-const Downtime = (props: SvgIconProps): JSX.Element => (
-  <SvgIcon component={IconDowntime} {...props} />
-);
-
-export default Downtime;

package/src/Graph/InteractiveComponents/AnchorPoint/AnchorPoint.styles.ts

@@ -1,58 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-interface StylesProps {
-  tooltipLeftAxisX?: number;
-  tooltipLeftAxisYLeft?: number;
-  tooltipLeftAxisYRight?: number;
-  tooltipTopAxisX?: number;
-  tooltipTopAxisYLeft?: number;
-  tooltipTopAxisYRight?: number;
-}
-
-export const useStyles = makeStyles<StylesProps>()(
-  (
-    theme,
-    {
-      tooltipLeftAxisX,
-      tooltipTopAxisX,
-      tooltipLeftAxisYLeft,
-      tooltipTopAxisYLeft,
-      tooltipLeftAxisYRight,
-      tooltipTopAxisYRight
-    }
-  ) => ({
-    tooltipAxis: {
-      '& > span': {
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        lineHeight: 'inherit'
-      },
-      backgroundColor: theme.palette.background.tooltip,
-      border: 'unset',
-      borderRadius: theme.spacing(0.25),
-      color: theme.palette.primary.contrastText,
-      fontSize: '10px',
-      fontWeight: 500,
-      letterSpacing: '0.15px',
-      lineHeight: '100%',
-      padding: theme.spacing(0.375, 0.5),
-      position: 'absolute',
-      textAlign: 'center',
-      transform: 'translate(-50%, -50%)',
-      transformOrigin: 'center center',
-      transition: 'unset'
-    },
-    tooltipAxisBottom: {
-      left: tooltipLeftAxisX ?? 0,
-      top: tooltipTopAxisX ?? 0
-    },
-    tooltipAxisLeftY: {
-      left: tooltipLeftAxisYLeft ?? 0,
-      top: tooltipTopAxisYLeft ?? 0
-    },
-    tooltipLeftAxisRightY: {
-      left: tooltipLeftAxisYRight ?? 0,
-      top: tooltipTopAxisYRight ?? 0
-    }
-  })
-);

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

@@ -1,45 +0,0 @@
-import { Shape } from '@visx/visx';
-
-import { grey } from '@mui/material/colors';
-
-import { GuidingLines } from './models';
-import useTickGraph from './useTickGraph';
-
-const GuidingLines = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  graphWidth
-}: GuidingLines): 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/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

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

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

@@ -1,76 +0,0 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { isNil, map, pipe } from 'ramda';
-
-import { bisectDate } from '../../timeSeries';
-import { TimeValue } from '../../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);
-};
-
-const getYAnchorPoint = ({
-  timeTick,
-  stackValues,
-  yScale
-}: GetYAnchorPoint): number => {
-  const index = bisectDate(getStackedDates(stackValues), timeTick);
-  const timeValue = stackValues[index];
-
-  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/InteractiveComponents/AnchorPoint/TooltipAnchorPoint.tsx

@@ -1,70 +0,0 @@
-import Paper from '@mui/material/Paper';
-import { Typography } from '@mui/material';
-
-import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { useStyles } from './AnchorPoint.styles';
-import { TooltipAnchorModel } from './models';
-
-const TooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): JSX.Element => {
-  const {
-    tooltipDataAxisX,
-    tooltipDataAxisYLeft,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipDataAxisYRight,
-    tooltipTopAxisYRight,
-    tooltipLeftAxisYRight
-  } = useTooltipAnchorPoint({
-    baseAxis,
-    graphHeight,
-    graphWidth,
-    leftScale,
-    lines,
-    rightScale,
-    timeSeries,
-    xScale
-  });
-  const { classes, cx } = useStyles({
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipLeftAxisYRight,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipTopAxisYRight
-  });
-
-  return (
-    <>
-      {tooltipDataAxisYLeft && (
-        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisLeftY)}>
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Paper>
-      )}
-      {tooltipDataAxisX && (
-        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisBottom)}>
-          <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Paper>
-      )}
-      {tooltipDataAxisYRight && (
-        <Paper
-          className={cx(classes.tooltipAxis, classes.tooltipLeftAxisRightY)}
-        >
-          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Paper>
-      )}
-    </>
-  );
-};
-
-export default TooltipAnchorPoint;

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

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

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

@@ -1,62 +0,0 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-
-import { Line, TimeValue } from '../../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: string;
-  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>;
-}