@centreon/ui 23.10.43 → 23.10.44

package/src/Dashboard/utils.ts

@@ -1,28 +0,0 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};

package/src/Form/Form.styles.ts

@@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2)
-  }
-}));
-
-export { useStyles };

package/src/Form/Inputs/Checkbox.tsx

@@ -1,57 +0,0 @@
-import { ChangeEvent } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { path, split } from 'ramda';
-
-import { Box } from '@mui/material';
-
-import { Checkbox as CheckboxComponent } from '../../Checkbox';
-import { useMemoComponent } from '../..';
-
-import { InputPropsWithoutGroup } from './models';
-
-const Checkbox = ({
-  checkbox,
-  fieldName,
-  getDisabled,
-  hideInput,
-  dataTestId
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const value = path(fieldNamePath, values);
-
-  const disabled = getDisabled?.(values) || false;
-  const hideCheckbox = hideInput?.(values) || false;
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const newValue = {
-      ...value,
-      checked: event.target.checked,
-      label: event.target.id
-    };
-
-    setFieldValue(fieldName, newValue);
-  };
-
-  return useMemoComponent({
-    Component: hideCheckbox ? (
-      <Box />
-    ) : (
-      <CheckboxComponent
-        Icon={value?.Icon}
-        checked={value?.checked}
-        dataTestId={dataTestId || ''}
-        disabled={disabled}
-        label={value?.label}
-        labelPlacement={checkbox?.labelPlacement || 'end'}
-        onChange={handleChange}
-      />
-    ),
-    memoProps: [value, disabled, hideCheckbox]
-  });
-};
-
-export default Checkbox;

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -1,76 +0,0 @@
-import { ChangeEvent, useEffect } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
-import { useMemoComponent } from '../..';
-
-import { InputPropsWithoutGroup } from './models';
-
-const CheckboxGroup = ({
-  checkbox,
-  fieldName,
-  additionalLabel,
-  getDisabled,
-  hideInput,
-  dataTestId
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const value = path(fieldNamePath, values);
-
-  const disabled = getDisabled?.(values) || false;
-  const hideCheckbox = hideInput?.(values) || false;
-
-  useEffect(() => {
-    if (!disabled && !hideCheckbox) {
-      return;
-    }
-    const resetedValue = value?.map((element) => ({
-      ...element,
-      checked: false
-    }));
-    setFieldValue(fieldName, resetedValue);
-  }, [disabled, hideCheckbox]);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const label = event.target.id;
-    if (!includes(label, value)) {
-      setFieldValue(fieldName, [...value, label]);
-
-      return;
-    }
-
-    setFieldValue(
-      fieldName,
-      value?.filter((elm) => !equals(elm, label))
-    );
-  };
-
-  return useMemoComponent({
-    Component: hideCheckbox ? (
-      <Box />
-    ) : (
-      <Box>
-        {additionalLabel && <Typography>{additionalLabel}</Typography>}
-        <CheckboxGroupComponent
-          dataTestId={dataTestId || ''}
-          direction={checkbox?.direction}
-          disabled={disabled}
-          labelPlacement={checkbox?.labelPlacement || 'end'}
-          options={checkbox?.options as Array<string>}
-          values={value}
-          onChange={handleChange}
-        />
-      </Box>
-    ),
-    memoProps: [value, disabled, hideCheckbox]
-  });
-};
-
-export default CheckboxGroup;

package/src/Form/index.ts

@@ -1 +0,0 @@
-export * from './Form';

package/src/Graph/BasicComponents/Axes/UnitLabel.tsx

@@ -1,20 +0,0 @@
-import { commonTickLabelProps } from '../../common';
-
-interface UnitLabelProps {
-  unit: string;
-  x: number;
-  y?: number;
-}
-
-const UnitLabel = ({ x, y = 16, unit }: UnitLabelProps): JSX.Element => (
-  <text
-    fontFamily={commonTickLabelProps.fontFamily}
-    fontSize={commonTickLabelProps.fontSize}
-    x={x}
-    y={-y}
-  >
-    {unit}
-  </text>
-);
-
-export default UnitLabel;

package/src/Graph/BasicComponents/Axes/index.tsx

@@ -1,88 +0,0 @@
-import { Axis } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { getXAxisTickFormat } from '../../helpers';
-import { GraphInterval } from '../../models';
-import { getUnits } from '../../timeSeries';
-
-import UnitLabel from './UnitLabel';
-import { Data } from './models';
-import useAxisY from './useAxisY';
-
-interface Props {
-  data: Data;
-  graphInterval: GraphInterval;
-  height: number;
-  leftScale: ScaleLinear<number, number>;
-  rightScale: ScaleLinear<number, number>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Axes = ({
-  height,
-  width,
-  data,
-  rightScale,
-  leftScale,
-  xScale,
-  graphInterval
-}: Props): JSX.Element => {
-  const { format } = useLocaleDateTimeFormat();
-  const { lines } = data;
-
-  const { axisLeft, axisRight } = useAxisY({ data, graphHeight: height });
-
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
-
-  const xTickCount = Math.ceil(width / 82);
-
-  const tickFormat =
-    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);
-
-  const formatAxisTick = (tick): string =>
-    format({ date: new Date(tick), formatString: tickFormat });
-
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
-
-  return (
-    <g>
-      <Axis.AxisBottom
-        numTicks={xTickCount}
-        scale={xScale}
-        tickFormat={formatAxisTick}
-        top={height}
-      />
-
-      {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
-
-      <Axis.AxisLeft
-        numTicks={axisLeft?.numTicks}
-        orientation="left"
-        scale={leftScale}
-        tickFormat={axisLeft.tickFormat}
-        tickLabelProps={axisLeft.tickLabelProps}
-        tickLength={2}
-      />
-
-      {displayAxisRight && (
-        <Axis.AxisRight
-          left={width}
-          numTicks={axisRight?.numTicks}
-          orientation="right"
-          scale={rightScale}
-          tickFormat={axisRight.tickFormat}
-          tickLabelProps={axisRight.tickLabelProps}
-          tickLength={2}
-        />
-      )}
-      {axisRight.displayUnit && <UnitLabel unit={secondUnit} x={width} />}
-    </g>
-  );
-};
-
-export default Axes;

package/src/Graph/BasicComponents/Axes/models.ts

@@ -1,26 +0,0 @@
-import { Line, TimeValue } from '../../timeSeries/models';
-
-export interface LabelProps {
-  [x: string]: unknown;
-  textAnchor?: string;
-}
-
-export interface Axis {
-  displayUnit?: boolean;
-}
-
-export interface AxisYRight extends Axis {
-  display?: boolean;
-}
-
-export interface AxisX {
-  xAxisTickFormat?: string;
-}
-export interface Data {
-  axisX?: AxisX;
-  axisYLeft?: Axis;
-  axisYRight?: AxisYRight;
-  baseAxis: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-}

package/src/Graph/BasicComponents/Axes/useAxisY.ts

@@ -1,100 +0,0 @@
-import { isNil } from 'ramda';
-import { Axis } from '@visx/visx';
-
-import { useTheme } from '@mui/material';
-
-import { formatMetricValue, getUnits } from '../../timeSeries';
-import { commonTickLabelProps } from '../../common';
-
-import { Data, LabelProps } from './models';
-
-interface AxisYData {
-  displayUnit: boolean;
-  numTicks?: number;
-  tickFormat: (value: unknown) => string;
-  tickLabelProps: Axis.TickLabelProps<unknown>;
-}
-
-interface AxisRightData extends AxisYData {
-  display: boolean;
-}
-
-interface AxisY {
-  axisLeft: AxisYData;
-  axisRight: AxisRightData;
-}
-
-interface Props {
-  data: Omit<Data, 'timeSeries'>;
-  graphHeight?: number;
-}
-
-const useAxisY = ({ data, graphHeight }: Props): AxisY => {
-  const theme = useTheme();
-
-  const { lines } = data;
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
-
-  const numTicks = graphHeight && Math.ceil(graphHeight / 30);
-
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const hasTwoUnits = !isNil(secondUnit) && !hasMoreThanTwoUnits;
-
-  const displayAxisRight = data?.axisYRight?.display ?? hasTwoUnits;
-  const displayUnitAxisRight = data?.axisYRight?.displayUnit ?? hasTwoUnits;
-  const displayUnitAxisLeft =
-    data?.axisYLeft?.displayUnit ?? !hasMoreThanTwoUnits;
-
-  const formatTick =
-    ({ unit }) =>
-    (value): string => {
-      if (isNil(value)) {
-        return '';
-      }
-
-      return formatMetricValue({ base: data.baseAxis, unit, value }) as string;
-    };
-
-  const labelProps = ({
-    textAnchor,
-    ...rest
-  }: LabelProps): Record<string, unknown> => ({
-    ...commonTickLabelProps,
-    textAnchor,
-    ...rest
-  });
-
-  const tickLabelPropsAxisLeft = (): Record<string, unknown> =>
-    labelProps({
-      dx: theme.spacing(-1),
-      dy: theme.spacing(0.5),
-      textAnchor: 'end'
-    });
-
-  const tickLabelPropsAxisRight = (): Record<string, unknown> =>
-    labelProps({
-      dx: theme.spacing(0.5),
-      dy: theme.spacing(0.5),
-      textAnchor: 'start'
-    });
-
-  return {
-    axisLeft: {
-      displayUnit: displayUnitAxisLeft,
-      numTicks,
-      tickFormat: formatTick({
-        unit: hasMoreThanTwoUnits ? '' : firstUnit
-      }),
-      tickLabelProps: tickLabelPropsAxisLeft
-    },
-    axisRight: {
-      display: displayAxisRight,
-      displayUnit: displayUnitAxisRight,
-      numTicks,
-      tickFormat: formatTick({ unit: secondUnit }),
-      tickLabelProps: tickLabelPropsAxisRight
-    }
-  };
-};
-
-export default useAxisY;

package/src/Graph/BasicComponents/Grids/index.tsx

@@ -1,20 +0,0 @@
-import { Grid } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
-
-interface Props {
-  height: number;
-  leftScale: ScaleLinear<number, number>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Grids = ({ height, width, leftScale, xScale }: Props): JSX.Element => {
-  return (
-    <g>
-      <Grid.GridRows height={height} scale={leftScale} width={width} />
-      <Grid.GridColumns height={height} scale={xScale} width={width} />
-    </g>
-  );
-};
-
-export default Grids;

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

@@ -1,91 +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 props = {
-    curve: Curve.curveLinear,
-    data: timeSeries,
-    defined: (value): boolean => !isNil(value[metric]),
-    opacity: 1,
-    stroke: lineColor,
-    strokeWidth: !highlight ? 1 : 2,
-    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
-  } = prevProps;
-  const {
-    timeSeries: nextTimeSeries,
-    graphHeight: nextGraphHeight,
-    highlight: nextHighlight,
-    xScale: nextXScale
-  } = nextProps;
-
-  const prevXScaleRange = prevXScale.range();
-  const nextXScaleRange = nextXScale.range();
-
-  return (
-    equals(prevTimeSeries, nextTimeSeries) &&
-    equals(prevGraphHeight, nextGraphHeight) &&
-    equals(prevHighlight, nextHighlight) &&
-    equals(prevXScaleRange, nextXScaleRange)
-  );
-});

package/src/Graph/BasicComponents/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/BasicComponents/Lines/StackedLines/index.tsx

@@ -1,76 +0,0 @@
-import { Curve, Shape } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
-
-import StackedAnchorPoint from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
-import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
-import { getFillColor } from '../../../common';
-import { getTime } from '../../../timeSeries';
-import { Line, TimeValue } from '../../../timeSeries/models';
-
-interface Props {
-  displayAnchor: boolean;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number>;
-  yScale: ScaleLinear<number, number>;
-}
-
-const StackLines = ({
-  timeSeries,
-  lines,
-  yScale,
-  xScale,
-  displayAnchor
-}: Props): JSX.Element => {
-  return (
-    <Shape.AreaStack
-      curve={Curve.curveLinear}
-      data={timeSeries}
-      defined={(d): boolean => {
-        return pipe(
-          map(prop('metric')) as unknown as (displayedLines) => 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)}`}>
-              {displayAnchor && (
-                <StackedAnchorPoint
-                  areaColor={areaColor}
-                  lineColor={lineColor}
-                  stackValues={stack as unknown as Array<StackValue>}
-                  timeSeries={timeSeries}
-                  transparency={transparency}
-                  xScale={xScale}
-                  yScale={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/BasicComponents/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;