@centreon/ui 24.7.3 → 24.7.4

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

@@ -1,20 +0,0 @@
-import { commonTickLabelProps } from '../utils';
-
-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/common/Axes/index.tsx

@@ -1,127 +0,0 @@
-import { Axis } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
-import { equals, isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { getXAxisTickFormat } from '../../LineChart/helpers';
-import { getUnits } from '../timeSeries';
-
-import UnitLabel from './UnitLabel';
-import { Data } from './models';
-import useAxisY from './useAxisY';
-
-interface Props {
-  data: Data;
-  height: number;
-  leftScale: ScaleLinear<number, number>;
-  orientation: 'horizontal' | 'vertical';
-  rightScale: ScaleLinear<number, number>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Axes = ({
-  height,
-  width,
-  data,
-  rightScale,
-  leftScale,
-  xScale,
-  orientation
-}: Props): JSX.Element => {
-  const { format } = useLocaleDateTimeFormat();
-  const { lines, showBorder, yAxisTickLabelRotation } = data;
-  const isHorizontal = equals(orientation, 'horizontal');
-
-  const { axisLeft, axisRight } = useAxisY({
-    data,
-    graphHeight: height,
-    graphWidth: width,
-    isHorizontal
-  });
-
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
-
-  const xTickCount = Math.min(Math.ceil(width / 82), 12);
-
-  const [start, end] = xScale.domain();
-
-  const tickFormat =
-    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat({ end, start });
-
-  const formatAxisTick = (tick): string =>
-    format({ date: new Date(tick), formatString: tickFormat });
-
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
-
-  const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
-  const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
-  const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;
-
-  return (
-    <g>
-      <AxisBottom
-        numTicks={xTickCount}
-        scale={xScale}
-        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
-        tickFormat={formatAxisTick}
-        tickLabelProps={() => ({
-          ...axisLeft.tickLabelProps(),
-          dx: isHorizontal ? 16 : -4
-        })}
-        top={isHorizontal ? height - 5 : 0}
-      />
-
-      {axisLeft.displayUnit && (
-        <UnitLabel
-          unit={firstUnit}
-          x={isHorizontal ? -8 : width + 8}
-          y={isHorizontal ? 16 : -2}
-        />
-      )}
-
-      <AxisLeft
-        numTicks={axisLeft?.numTicks}
-        scale={leftScale}
-        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
-        tickFormat={axisLeft.tickFormat}
-        tickLabelProps={() => ({
-          ...axisLeft.tickLabelProps(),
-          angle: yAxisTickLabelRotation,
-          dx: isHorizontal ? -8 : 16,
-          dy: isHorizontal ? 4 : -6
-        })}
-        tickLength={2}
-      />
-
-      {displayAxisRight && (
-        <AxisRight
-          left={isHorizontal ? width : 0}
-          numTicks={axisRight?.numTicks}
-          scale={rightScale}
-          strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
-          tickFormat={axisRight.tickFormat}
-          tickLabelProps={() => ({
-            ...axisRight.tickLabelProps(),
-            angle: yAxisTickLabelRotation,
-            dx: isHorizontal ? 4 : -8,
-            dy: 4
-          })}
-          tickLength={2}
-          top={isHorizontal ? 0 : height}
-        />
-      )}
-      {axisRight.displayUnit && (
-        <UnitLabel
-          unit={secondUnit}
-          x={width + 8}
-          y={isHorizontal ? 16 : -(height + 8)}
-        />
-      )}
-    </g>
-  );
-};
-
-export default Axes;

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

@@ -1,28 +0,0 @@
-import { Line, TimeValue } from '../timeSeries/models';
-import { LineChartAxis } from '../../LineChart/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
-  extends Omit<LineChartAxis, 'axisX' | 'axisYLeft' | 'axisYRight'> {
-  axisX?: AxisX;
-  axisYLeft?: Axis;
-  axisYRight?: AxisYRight;
-  baseAxis: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-}

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

@@ -1,109 +0,0 @@
-import { isNil } from 'ramda';
-import { Axis } from '@visx/visx';
-
-import { useTheme } from '@mui/material';
-
-import { formatMetricValue, getUnits } from '../timeSeries';
-import { commonTickLabelProps } from '../utils';
-
-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;
-  graphWidth?: number;
-  isHorizontal: boolean;
-}
-
-const useAxisY = ({
-  data,
-  graphHeight,
-  graphWidth,
-  isHorizontal
-}: Props): AxisY => {
-  const theme = useTheme();
-
-  const { lines } = data;
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
-
-  const numTicks = isHorizontal
-    ? graphHeight && Math.ceil(graphHeight / 30)
-    : graphWidth && Math.ceil(graphWidth / 60);
-
-  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/common/BaseChart/BaseChart.tsx

@@ -1,137 +0,0 @@
-import {
-  Dispatch,
-  MutableRefObject,
-  ReactNode,
-  SetStateAction,
-  useMemo
-} from 'react';
-
-import { equals, gt, isNil, lte, reduce } from 'ramda';
-
-import { Stack } from '@mui/material';
-
-import Legend from '../../LineChart/Legend';
-import { legendWidth } from '../../LineChart/Legend/Legend.styles';
-import { Line } from '../timeSeries/models';
-
-import { useBaseChartStyles } from './useBaseChartStyles';
-import Header from './Header';
-import { LineChartHeader } from './Header/models';
-
-interface Props {
-  base?: number;
-  children: JSX.Element;
-  graphWidth: number;
-  header?: LineChartHeader;
-  height: number | null;
-  isHorizontal?: boolean;
-  legend: {
-    displayLegend: boolean;
-    legendHeight?: number;
-    mode?: 'grid' | 'list';
-    placement?: 'left' | 'right' | 'bottom';
-    renderExtraComponent?: ReactNode;
-  };
-  legendRef: MutableRefObject<HTMLDivElement | null>;
-  limitLegend?: number | false;
-  lines: Array<Line>;
-  setLines:
-    | Dispatch<SetStateAction<Array<Line> | null>>
-    | Dispatch<SetStateAction<Array<Line>>>;
-  title: string;
-}
-
-const BaseChart = ({
-  legend,
-  base = 1000,
-  height,
-  graphWidth,
-  lines,
-  limitLegend = false,
-  setLines,
-  children,
-  legendRef,
-  title,
-  header,
-  isHorizontal = true
-}: Props): JSX.Element => {
-  const { classes, cx } = useBaseChartStyles();
-
-  const legendItemsWidth = useMemo(
-    () => reduce((acc) => acc + legendWidth * 8 + 24, 0, lines),
-    [lines]
-  );
-
-  const displayLegendInBottom = useMemo(
-    () => isNil(legend.placement) || equals(legend.placement, 'bottom'),
-    [legend.placement]
-  );
-
-  const shouldDisplayLegendInCompactMode = useMemo(
-    () =>
-      lte(graphWidth, 808) &&
-      gt(legendItemsWidth, graphWidth) &&
-      displayLegendInBottom,
-    [graphWidth, displayLegendInBottom, legendItemsWidth]
-  );
-
-  return (
-    <>
-      <Header header={header} title={title} />
-      <div className={classes.container}>
-        <Stack
-          direction={equals(legend?.placement, 'left') ? 'row' : 'row-reverse'}
-        >
-          {legend.displayLegend &&
-            (equals(legend?.placement, 'left') ||
-              equals(legend?.placement, 'right')) && (
-              <div
-                className={cx(
-                  classes.legendContainer,
-                  equals(legend?.placement, 'right') &&
-                    !isHorizontal &&
-                    classes.legendContainerVerticalSide
-                )}
-                ref={legendRef}
-              >
-                <Legend
-                  base={base}
-                  height={height}
-                  limitLegend={limitLegend}
-                  lines={lines}
-                  mode={legend?.mode}
-                  placement="left"
-                  renderExtraComponent={legend?.renderExtraComponent}
-                  setLinesGraph={setLines}
-                  shouldDisplayLegendInCompactMode={
-                    shouldDisplayLegendInCompactMode
-                  }
-                />
-              </div>
-            )}
-          {children}
-        </Stack>
-      </div>
-      {legend.displayLegend && displayLegendInBottom && (
-        <div
-          ref={legendRef}
-          style={{ height: legend?.legendHeight ?? 'undefined' }}
-        >
-          <Legend
-            base={base}
-            height={height}
-            limitLegend={limitLegend}
-            lines={lines}
-            mode={legend.mode}
-            placement="bottom"
-            renderExtraComponent={legend.renderExtraComponent}
-            setLinesGraph={setLines}
-            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-          />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default BaseChart;

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -1,86 +0,0 @@
-import { MutableRefObject } from 'react';
-
-import { Group } from '@visx/visx';
-import { equals } from 'ramda';
-
-import { margin } from '../../LineChart/common';
-import { LineChartAxis } from '../../LineChart/models';
-import Axes from '../Axes';
-import Grids from '../Grids';
-import { Line, TimeValue } from '../timeSeries/models';
-
-import { extraMargin } from './useComputeBaseChartDimensions';
-
-interface Props {
-  axis?: LineChartAxis;
-  base?: number;
-  children: JSX.Element;
-  displayedLines: Array<Line>;
-  graphHeight: number;
-  graphWidth: number;
-  gridLinesType?: string;
-  leftScale;
-  orientation?: 'horizontal' | 'vertical';
-  rightScale;
-  showGridLines: boolean;
-  svgRef: MutableRefObject<SVGSVGElement | null>;
-  timeSeries: Array<TimeValue>;
-  xScale;
-}
-
-const ChartSvgWrapper = ({
-  svgRef,
-  graphHeight,
-  leftScale,
-  rightScale,
-  xScale,
-  graphWidth,
-  showGridLines,
-  gridLinesType,
-  base = 1000,
-  displayedLines,
-  timeSeries,
-  axis,
-  children,
-  orientation = 'horizontal'
-}: Props): JSX.Element => {
-  const isHorizontal = equals(orientation, 'horizontal');
-
-  return (
-    <svg
-      aria-label="graph"
-      height={graphHeight + margin.top}
-      ref={svgRef}
-      width="100%"
-    >
-      <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
-        {showGridLines && (
-          <Grids
-            gridLinesType={gridLinesType}
-            height={graphHeight - margin.top}
-            leftScale={isHorizontal ? leftScale : xScale}
-            width={graphWidth}
-            xScale={isHorizontal ? xScale : leftScale}
-          />
-        )}
-        <Axes
-          data={{
-            baseAxis: base,
-            lines: displayedLines,
-            timeSeries,
-            ...axis
-          }}
-          height={graphHeight - margin.top}
-          leftScale={leftScale}
-          orientation={orientation}
-          rightScale={rightScale}
-          width={graphWidth}
-          xScale={xScale}
-        />
-        {children}
-      </Group.Group>
-    </svg>
-  );
-};
-
-export default ChartSvgWrapper;

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -1,37 +0,0 @@
-import Typography from '@mui/material/Typography';
-
-import { useMemoComponent } from '@centreon/ui';
-
-import { ussHeaderChartStyles } from './useHeaderStyles';
-import { LineChartHeader } from './models';
-
-interface Props {
-  header?: LineChartHeader;
-  title: string;
-}
-
-const Header = ({ title, header }: Props): JSX.Element => {
-  const { classes } = ussHeaderChartStyles();
-
-  const displayTitle = header?.displayTitle ?? true;
-
-  return useMemoComponent({
-    Component: (
-      <div className={classes.header}>
-        <div />
-        <div>
-          {displayTitle && (
-            <Typography align="center" variant="body1">
-              {title}
-            </Typography>
-          )}
-        </div>
-        {header?.extraComponent}
-      </div>
-    ),
-
-    memoProps: [title, header]
-  });
-};
-
-export default Header;

package/src/Graph/common/BaseChart/Header/models.ts

@@ -1,4 +0,0 @@
-export interface LineChartHeader {
-  displayTitle?: boolean;
-  extraComponent?: ReactNode;
-}

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -1,9 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const ussHeaderChartStyles = makeStyles()({
-  header: {
-    display: 'grid',
-    gridTemplateColumns: '0.4fr 1fr 0.4fr',
-    width: '100%'
-  }
-});

package/src/Graph/common/BaseChart/useBaseChartStyles.ts

@@ -1,44 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useBaseChartStyles = makeStyles()((theme) => ({
-  container: {
-    '& .visx-axis-bottom': {
-      '& .visx-axis-tick': {
-        '& .visx-line': {
-          stroke: theme.palette.text.primary
-        },
-        text: {
-          fill: theme.palette.text.primary
-        }
-      }
-    },
-    '& .visx-axis-line': {
-      stroke: theme.palette.text.primary
-    },
-    '& .visx-axis-right': {
-      '& .visx-axis-tick': {
-        '& .visx-line': {
-          stroke: theme.palette.text.primary
-        }
-      }
-    },
-    '& .visx-columns': {
-      '& .visx-line': {
-        stroke: theme.palette.divider
-      }
-    },
-    '& .visx-rows': {
-      '& .visx-line': {
-        stroke: theme.palette.divider
-      }
-    },
-    fill: theme.palette.text.primary,
-    position: 'relative'
-  },
-  legendContainer: {
-    maxWidth: '60%'
-  },
-  legendContainerVerticalSide: {
-    marginRight: theme.spacing(6)
-  }
-}));

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -1,66 +0,0 @@
-import { MutableRefObject, useRef } from 'react';
-
-import { equals, isNil } from 'ramda';
-
-import { margin } from '../../LineChart/common';
-
-export const extraMargin = 10;
-
-interface UseComputeBaseChartDimensionsProps {
-  hasSecondUnit?: boolean;
-  height: number | null;
-  legendDisplay?: boolean;
-  legendHeight?: number;
-  legendPlacement?: string;
-  width: number;
-}
-
-interface UseComputeBaseChartDimensionsState {
-  graphHeight: number;
-  graphWidth: number;
-  legendRef: MutableRefObject<HTMLDivElement | null>;
-}
-
-export const useComputeBaseChartDimensions = ({
-  width,
-  height,
-  legendDisplay,
-  legendPlacement,
-  hasSecondUnit,
-  legendHeight
-}: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
-  const legendRef = useRef<HTMLDivElement | null>(null);
-
-  const currentLegendHeight =
-    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
-
-  const legendBoundingHeight =
-    !equals(legendDisplay, false) &&
-    (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
-      ? currentLegendHeight
-      : 0;
-  const legendBoundingWidth =
-    !equals(legendDisplay, false) &&
-    (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
-      ? legendRef.current?.getBoundingClientRect().width || 0
-      : 0;
-
-  const graphWidth =
-    width > 0
-      ? width -
-        margin.left -
-        (hasSecondUnit ? margin.right : 8) -
-        extraMargin -
-        legendBoundingWidth
-      : 0;
-  const graphHeight =
-    (height || 0) > 0
-      ? (height || 0) - margin.top - 5 - legendBoundingHeight
-      : 0;
-
-  return {
-    graphHeight,
-    graphWidth,
-    legendRef
-  };
-};