@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18

package/src/Graph/Lines/RegularLines/index.tsx

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

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

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

@@ -1,74 +0,0 @@
-import { ReactNode } from 'react';
-
-import { map, nth, pipe, path, all, not, isNil, prop } from 'ramda';
-import { Shape, Curve } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-
-import { Line, TimeValue } from '../../timeSeries/models';
-import { getTime } from '../../timeSeries';
-import { getFillColor } from '../../common';
-import { StackedAnchorPoint } from '../../InteractionWithGraph/AnchorPoint/models';
-
-interface Props {
-  lines: Array<Line>;
-  renderStackedAnchorPoint: (args: StackedAnchorPoint) => ReactNode;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number>;
-  yScale: ScaleLinear<number, number>;
-}
-
-const StackLines = ({
-  timeSeries,
-  lines,
-  yScale,
-  xScale,
-  renderStackedAnchorPoint
-}: Props): JSX.Element => {
-  return (
-    <Shape.AreaStack
-      curve={Curve.curveLinear}
-      data={timeSeries}
-      defined={(d): boolean => {
-        return pipe(
-          map(prop('metric')) as (lines) => Array<string>,
-          all((metric) => pipe(path(['data', metric]), isNil, not)(d))
-        )(lines);
-      }}
-      keys={map(prop('metric'), 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)}`}>
-              {renderStackedAnchorPoint?.({
-                areaColor,
-                lineColor,
-                stack,
-                transparency,
-                xScale,
-                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/Lines/StackedLines/useStackedLines.ts

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

@@ -1,153 +0,0 @@
-import { ReactNode } from 'react';
-
-import { isEmpty, isNil } from 'ramda';
-
-import { getStackedYScale, getUnits, getYScale } from '../timeSeries';
-import { Line } from '../timeSeries/models';
-import {
-  RegularLinesAnchorPoint,
-  StackedAnchorPoint
-} from '../InteractionWithGraph/AnchorPoint/models';
-
-import RegularLine from './RegularLines';
-import StackedLines from './StackedLines';
-import { Shape } from './models';
-
-interface AnchorPoint {
-  renderRegularLinesAnchorPoint: (args: RegularLinesAnchorPoint) => ReactNode;
-  renderStackedAnchorPoint: (args: StackedAnchorPoint) => ReactNode;
-}
-
-interface Props {
-  anchorPoint: AnchorPoint;
-  height: number;
-  shape: Shape;
-}
-
-const Lines = ({ height, shape, anchorPoint }: Props): JSX.Element => {
-  const { areaRegularLines, areaStackedLines } = shape;
-
-  const { renderRegularLinesAnchorPoint, renderStackedAnchorPoint } =
-    anchorPoint;
-
-  const {
-    lines: regularLines,
-    timeSeries: regularLinesTimeSeries,
-    display: displayAreaRegular
-  } = areaRegularLines;
-
-  const { stackedLinesData, invertedStackedLinesData } = areaStackedLines;
-
-  const {
-    lines: regularStackedLines,
-    timeSeries: regularStackedLinesTimeSeries
-  } = stackedLinesData;
-
-  const {
-    lines: invertedStackedLines,
-    timeSeries: invertedStackedLinesTimeSeries
-  } = invertedStackedLinesData;
-
-  const displayArea = (data: unknown): boolean =>
-    !isEmpty(data) && !isNil(data);
-
-  const displayAreaStackedLines =
-    areaStackedLines.display && displayArea(regularStackedLines);
-
-  const displayAreaInvertedStackedLines =
-    areaStackedLines.display && displayArea(invertedStackedLines);
-
-  const displayAreaRegularLines =
-    displayAreaRegular && displayArea(regularLines);
-
-  const stackedYScale = getStackedYScale({
-    leftScale: areaStackedLines?.leftScale,
-    rightScale: areaStackedLines?.rightScale
-  });
-
-  const leftScaleRegularLines = areaRegularLines?.leftScale;
-  const rightScaleRegularLines = areaRegularLines?.rightScale;
-  const xScaleRegularLines = areaRegularLines?.xScale;
-
-  const commonStackedLinesProps = {
-    xScale: areaStackedLines?.xScale,
-    yScale: stackedYScale
-  };
-
-  return (
-    <g>
-      {displayAreaStackedLines && (
-        <StackedLines
-          lines={regularStackedLines}
-          renderStackedAnchorPoint={renderStackedAnchorPoint}
-          timeSeries={regularStackedLinesTimeSeries}
-          {...commonStackedLinesProps}
-        />
-      )}
-      {displayAreaInvertedStackedLines && (
-        <StackedLines
-          lines={invertedStackedLines}
-          renderStackedAnchorPoint={renderStackedAnchorPoint}
-          timeSeries={invertedStackedLinesTimeSeries}
-          {...commonStackedLinesProps}
-        />
-      )}
-
-      {displayAreaRegularLines
-        ? regularLines.map(
-            ({
-              metric,
-              areaColor,
-              transparency,
-              lineColor,
-              filled,
-              unit,
-              highlight,
-              invert
-            }) => {
-              const [, secondUnit, thirdUnit] = getUnits(
-                regularLines as Array<Line>
-              );
-              const yScale = getYScale({
-                hasMoreThanTwoUnits: !isNil(thirdUnit),
-                invert,
-                leftScale: leftScaleRegularLines,
-                rightScale: rightScaleRegularLines,
-                secondUnit,
-                unit
-              });
-
-              return (
-                <g key={metric}>
-                  {renderRegularLinesAnchorPoint?.({
-                    areaColor,
-                    lineColor,
-                    metric,
-                    timeSeries: regularLinesTimeSeries,
-                    transparency,
-                    xScale: xScaleRegularLines,
-                    yScale
-                  })}
-                  <RegularLine
-                    areaColor={areaColor}
-                    filled={filled}
-                    graphHeight={height}
-                    highlight={highlight}
-                    lineColor={lineColor}
-                    metric={metric}
-                    timeSeries={regularLinesTimeSeries}
-                    transparency={transparency}
-                    unit={unit}
-                    xScale={xScaleRegularLines}
-                    yScale={yScale}
-                  />
-                </g>
-              );
-            }
-          )
-        : null}
-    </g>
-  );
-};
-
-export default Lines;

package/src/Graph/Lines/models.ts

@@ -1,32 +0,0 @@
-import { ScaleLinear } from 'd3-scale';
-
-import { Line, TimeValue } from '../timeSeries/models';
-
-export interface ShapeGraphData {
-  [x: string]: unknown;
-  display: boolean;
-  leftScale?: ScaleLinear<number, number>;
-  rightScale?: ScaleLinear<number, number>;
-  xScale?: ScaleLinear<number, number>;
-  yScale?: ScaleLinear<number, number>;
-}
-
-export interface LinesData {
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-}
-
-export interface AreaStackedLines extends ShapeGraphData {
-  invertedStackedLinesData: LinesData;
-  stackedLinesData: LinesData;
-}
-
-export interface AreaRegularLines extends ShapeGraphData {
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-}
-
-export interface Shape {
-  areaRegularLines: AreaRegularLines;
-  areaStackedLines: AreaStackedLines;
-}

package/src/Graph/LoadingProgress.tsx

@@ -1,46 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { CircularProgress, alpha } from '@mui/material';
-
-interface StyleProps {
-  height: number;
-  width: number;
-}
-
-const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
-  graphLoader: {
-    alignItems: 'center',
-    backgroundColor: alpha(theme.palette.common.white, 0.5),
-    display: 'flex',
-    height,
-    justifyContent: 'center',
-    position: 'absolute',
-    width
-  }
-}));
-
-interface LoadingProgress {
-  display: boolean;
-  height: number;
-  width: number;
-}
-
-const LoadingProgress = ({
-  display,
-  height,
-  width
-}: LoadingProgress): JSX.Element | null => {
-  const { classes } = useStyles({ height, width });
-
-  if (!display) {
-    return null;
-  }
-
-  return (
-    <div className={classes.graphLoader}>
-      <CircularProgress />
-    </div>
-  );
-};
-
-export default LoadingProgress;

package/src/Graph/common/index.ts

@@ -1,33 +0,0 @@
-import { alpha } from '@mui/material';
-
-const commonTickLabelProps = {
-  fontFamily: 'Roboto, sans-serif',
-  fontSize: 10,
-  textAnchor: 'middle'
-};
-
-const margin = { bottom: 30, left: 45, right: 45, top: 30 };
-
-interface FillColor {
-  areaColor: string;
-  transparency: number;
-}
-
-const getFillColor = ({
-  transparency,
-  areaColor
-}: FillColor): string | undefined =>
-  transparency ? alpha(areaColor, 1 - transparency * 0.01) : undefined;
-
-const dateFormat = 'L';
-const timeFormat = 'LT';
-const dateTimeFormat = `${dateFormat} ${timeFormat}`;
-
-export {
-  commonTickLabelProps,
-  margin,
-  getFillColor,
-  dateFormat,
-  timeFormat,
-  dateTimeFormat
-};