@centreon/ui 24.7.6 → 24.7.7

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

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

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

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

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

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

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

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

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

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

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

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

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