@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -1,277 +0,0 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
-
-import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
-import { useAtom } from 'jotai';
-
-import { Skeleton } from '@mui/material';
-
-import { Data, LineChartProps } from '../LineChart/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import { useIntersection } from '../LineChart/useLineChartIntersection';
-import { Line } from '../common/timeSeries/models';
-import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
-import {
-  getLeftScale,
-  getRightScale,
-  getUnits,
-  getXScaleBand
-} from '../common/timeSeries';
-import BaseChart from '../common/BaseChart/BaseChart';
-import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
-import { useTooltipStyles } from '../common/useTooltipStyles';
-import { margin } from '../LineChart/common';
-import { Tooltip } from '../../components';
-import Thresholds from '../common/Thresholds/Thresholds';
-import { useDeepCompare } from '../../utils';
-
-import BarGroup from './BarGroup';
-import { tooltipDataAtom } from './atoms';
-import BarChartTooltip from './Tooltip/BarChartTooltip';
-import { BarStyle } from './models';
-
-interface Props
-  extends Pick<LineChartProps, 'tooltip' | 'legend' | 'axis' | 'header'> {
-  barStyle: BarStyle;
-  graphData: Data;
-  graphRef: MutableRefObject<HTMLDivElement | null>;
-  height: number;
-  limitLegend?: false | number;
-  orientation: 'vertical' | 'horizontal' | 'auto';
-  thresholdUnit?: string;
-  thresholds?: ThresholdsModel;
-  width: number;
-}
-
-const ResponsiveBarChart = ({
-  graphRef,
-  graphData,
-  legend,
-  height,
-  width,
-  axis,
-  thresholdUnit,
-  thresholds,
-  header,
-  limitLegend,
-  orientation,
-  tooltip,
-  barStyle
-}: Props): JSX.Element => {
-  const { title, timeSeries, baseAxis, lines } = graphData;
-
-  const { classes, cx } = useTooltipStyles();
-
-  const [linesGraph, setLinesGraph] = useState<Array<Line>>(lines);
-  const graphSvgRef = useRef<SVGSVGElement | null>(null);
-
-  const [tooltipData, setTooltipData] = useAtom(tooltipDataAtom);
-
-  const { isInViewport } = useIntersection({ element: graphRef?.current });
-
-  const [, secondUnit] = getUnits(linesGraph);
-
-  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
-    hasSecondUnit: Boolean(secondUnit),
-    height,
-    legendDisplay: legend?.display,
-    legendPlacement: legend?.placement,
-    width
-  });
-
-  const thresholdValues = flatten([
-    pluck('value', thresholds?.warning || []),
-    pluck('value', thresholds?.critical || [])
-  ]);
-
-  const isHorizontal = useMemo(() => {
-    if (!equals(orientation, 'auto')) {
-      return equals(orientation, 'horizontal');
-    }
-
-    return gte(graphWidth, graphHeight + 60);
-  }, [orientation, graphWidth, graphHeight]);
-
-  const xScale = useMemo(
-    () =>
-      getXScaleBand({
-        dataTime: timeSeries,
-        valueWidth: isHorizontal ? graphWidth : graphHeight - 30
-      }),
-    [timeSeries, graphWidth, isHorizontal, graphHeight]
-  );
-
-  const leftScale = useMemo(
-    () =>
-      getLeftScale({
-        dataLines: linesGraph,
-        dataTimeSeries: timeSeries,
-        isCenteredZero: axis?.isCenteredZero,
-        isHorizontal,
-        scale: axis?.scale,
-        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: (isHorizontal ? graphHeight : graphWidth) - 35
-      }),
-    [
-      linesGraph,
-      timeSeries,
-      graphHeight,
-      thresholdValues,
-      axis?.isCenteredZero,
-      axis?.scale,
-      axis?.scaleLogarithmicBase,
-      graphWidth,
-      isHorizontal
-    ]
-  );
-
-  const rightScale = useMemo(
-    () =>
-      getRightScale({
-        dataLines: linesGraph,
-        dataTimeSeries: timeSeries,
-        isCenteredZero: axis?.isCenteredZero,
-        isHorizontal,
-        scale: axis?.scale,
-        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: (isHorizontal ? graphHeight : graphWidth) - 35
-      }),
-    [
-      timeSeries,
-      linesGraph,
-      graphHeight,
-      axis?.isCenteredZero,
-      axis?.scale,
-      axis?.scaleLogarithmicBase,
-      graphWidth,
-      isHorizontal
-    ]
-  );
-
-  useEffect(
-    () => {
-      setLinesGraph(lines);
-    },
-    useDeepCompare([lines])
-  );
-
-  const displayLegend = legend?.display ?? true;
-
-  const displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
-    [linesGraph]
-  );
-
-  const showGridLines = useMemo(
-    () => isNil(axis?.showGridLines) || axis?.showGridLines,
-    [axis?.showGridLines]
-  );
-
-  if (!isInViewport) {
-    return (
-      <Skeleton
-        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
-        variant="rectangular"
-        width="100%"
-      />
-    );
-  }
-
-  const isTooltipHidden = equals(tooltip?.mode, 'hidden');
-
-  return (
-    <BaseChart
-      base={baseAxis}
-      graphWidth={graphWidth}
-      header={header}
-      height={height}
-      isHorizontal={isHorizontal}
-      legend={{
-        displayLegend,
-        mode: legend?.mode,
-        placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent
-      }}
-      legendRef={legendRef}
-      limitLegend={limitLegend}
-      lines={linesGraph}
-      setLines={setLinesGraph}
-      title={title}
-    >
-      <Tooltip
-        classes={{
-          tooltip: cx(
-            classes.tooltip,
-            has('data', tooltipData) && classes.tooltipDisablePadding
-          )
-        }}
-        label={
-          <BarChartTooltip
-            base={baseAxis}
-            mode={tooltip?.mode}
-            sortOrder={tooltip?.sortOrder}
-            timeSeries={timeSeries}
-          />
-        }
-        open={!equals(tooltip?.mode, 'hidden') && Boolean(tooltipData)}
-        placement="top"
-      >
-        <div className={classes.tooltipChildren}>
-          <ChartSvgWrapper
-            axis={axis}
-            base={baseAxis}
-            displayedLines={displayedLines}
-            graphHeight={graphHeight}
-            graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
-            gridLinesType={axis?.gridLinesType}
-            leftScale={leftScale}
-            orientation={isHorizontal ? 'horizontal' : 'vertical'}
-            rightScale={rightScale}
-            showGridLines={showGridLines}
-            svgRef={graphSvgRef}
-            timeSeries={timeSeries}
-            xScale={xScale}
-          >
-            <>
-              <BarGroup
-                barStyle={barStyle}
-                isCenteredZero={axis?.isCenteredZero}
-                isTooltipHidden={isTooltipHidden}
-                leftScale={leftScale}
-                lines={displayedLines}
-                orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                rightScale={rightScale}
-                secondUnit={secondUnit}
-                size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
-                timeSeries={timeSeries}
-                xScale={xScale}
-              />
-              {thresholds?.enabled && (
-                <Thresholds
-                  displayedLines={displayedLines}
-                  hideTooltip={() => setTooltipData(null)}
-                  isHorizontal={isHorizontal}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  showTooltip={({ tooltipData: thresholdLabel }) =>
-                    setTooltipData({
-                      thresholdLabel
-                    })
-                  }
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds as ThresholdsModel}
-                  width={isHorizontal ? graphWidth : graphHeight - margin.top}
-                />
-              )}
-            </>
-          </ChartSvgWrapper>
-        </div>
-      </Tooltip>
-    </BaseChart>
-  );
-};
-
-export default ResponsiveBarChart;

package/src/Graph/BarChart/SingleBar.tsx

@@ -1,62 +0,0 @@
-import { memo } from 'react';
-
-import { equals, pick } from 'ramda';
-
-import { useSingleBar, UseSingleBarProps } from './useSingleBar';
-import { BarStyle } from './models';
-
-const SingleBar = ({
-  lines,
-  secondUnit,
-  bar,
-  leftScale,
-  rightScale,
-  size,
-  isCenteredZero,
-  isHorizontal,
-  isTooltipHidden,
-  barStyle
-}: UseSingleBarProps & {
-  barStyle: BarStyle;
-}): JSX.Element => {
-  const { barLength, barPadding, listeners } = useSingleBar({
-    bar,
-    isCenteredZero,
-    isHorizontal,
-    isTooltipHidden,
-    leftScale,
-    lines,
-    rightScale,
-    secondUnit,
-    size
-  });
-
-  return (
-    <rect
-      data-testid={`single-bar-${bar.key}-${bar.index}-${bar.value}`}
-      fill={bar.color}
-      height={Math.ceil(isHorizontal ? barLength : bar.height)}
-      opacity={barStyle.opacity}
-      rx={(isHorizontal ? bar.width : bar.height) * barStyle.radius}
-      width={Math.ceil(isHorizontal ? bar.width : barLength)}
-      x={isHorizontal ? bar.x : barPadding}
-      y={isHorizontal ? barPadding : bar.y}
-      {...listeners}
-    />
-  );
-};
-
-const propsToMemoize = [
-  'bar',
-  'lines',
-  'secondUnit',
-  'size',
-  'isCenteredZero',
-  'isHorizontal',
-  'isTooltipHidden',
-  'barStyle'
-];
-
-export default memo(SingleBar, (prevProps, nextProps) =>
-  equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps))
-);

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -1,122 +0,0 @@
-import { useAtomValue } from 'jotai';
-import {
-  always,
-  cond,
-  equals,
-  filter,
-  gt,
-  has,
-  isNil,
-  path,
-  prop,
-  reverse,
-  sortBy,
-  T
-} from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import { TimeValue } from '../../common/timeSeries/models';
-import { useLocaleDateTimeFormat } from '../../../utils';
-import { formatMetricValueWithUnit } from '../../common/timeSeries';
-import { tooltipDataAtom } from '../atoms';
-import { Tooltip } from '../../LineChart/models';
-
-import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
-
-interface Props extends Partial<Pick<Tooltip, 'mode' | 'sortOrder'>> {
-  base: number;
-  timeSeries: Array<TimeValue>;
-}
-
-const BarChartTooltip = ({
-  timeSeries,
-  base,
-  mode,
-  sortOrder
-}: Props): JSX.Element | null => {
-  const { classes } = useBarChartTooltipStyles();
-  const { toDate, toTime } = useLocaleDateTimeFormat();
-  const tooltipData = useAtomValue(tooltipDataAtom);
-
-  if (isNil(tooltipData)) {
-    return null;
-  }
-
-  if (has('thresholdLabel', tooltipData)) {
-    return <Typography>{tooltipData.thresholdLabel}</Typography>;
-  }
-
-  const date = timeSeries[tooltipData.index].timeTick;
-  const formattedDateTime = `${toDate(date)} / ${toTime(date)}`;
-
-  const isSingleMode = equals(mode, 'single');
-
-  const filteredMetrics = isSingleMode
-    ? filter(
-        ({ metric }) => equals(metric.metric_id, tooltipData.highlightedMetric),
-        tooltipData.data
-      )
-    : tooltipData.data;
-
-  const displayHighLightedMetric = gt(filteredMetrics.length, 1);
-
-  const sortedMetrics = cond([
-    [equals('name'), always(sortBy(path(['metric', 'name']), filteredMetrics))],
-    [equals('ascending'), always(sortBy(prop('value'), filteredMetrics))],
-    [
-      equals('descending'),
-      always(reverse(sortBy(prop('value'), filteredMetrics)))
-    ],
-    [T, always(filteredMetrics)]
-  ])(sortOrder);
-
-  return (
-    <div className={classes.tooltipContainer}>
-      <Typography fontWeight="bold" textAlign="center">
-        {formattedDateTime}
-      </Typography>
-      <div className={classes.metrics}>
-        {sortedMetrics.map(({ metric, value }) => (
-          <div
-            className={classes.metric}
-            data-metric={metric.name}
-            key={metric.metric_id}
-          >
-            <Box
-              className={classes.metricColorBox}
-              sx={{ backgroundColor: metric.color }}
-            />
-            <Typography
-              className={classes.metricName}
-              fontWeight={
-                displayHighLightedMetric &&
-                equals(tooltipData.highlightedMetric, metric.metric_id)
-                  ? 'bold'
-                  : 'regular'
-              }
-            >
-              {metric.name}
-            </Typography>
-            <Typography
-              fontWeight={
-                displayHighLightedMetric &&
-                equals(tooltipData.highlightedMetric, metric.metric_id)
-                  ? 'bold'
-                  : 'regular'
-              }
-            >
-              {formatMetricValueWithUnit({
-                base,
-                unit: metric.unit,
-                value
-              })}
-            </Typography>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default BarChartTooltip;

package/src/Graph/BarChart/Tooltip/useBarChartTooltipStyles.ts

@@ -1,28 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useBarChartTooltipStyles = makeStyles()((theme) => ({
-  metric: {
-    alignItems: 'center',
-    display: 'flex',
-    gap: theme.spacing(1),
-    weidth: '100%'
-  },
-  metricColorBox: {
-    borderRadius: theme.shape.borderRadius,
-    flexShrink: 0,
-    height: theme.spacing(1.5),
-    width: theme.spacing(1.5)
-  },
-  metricName: {
-    flexGrow: 1
-  },
-  metrics: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginTop: theme.spacing(0.5),
-    width: '100%'
-  },
-  tooltipContainer: {
-    padding: theme.spacing(1)
-  }
-}));

package/src/Graph/BarChart/atoms.ts

@@ -1,5 +0,0 @@
-import { atom } from 'jotai';
-
-import { TooltipData } from './models';
-
-export const tooltipDataAtom = atom<TooltipData | null>(null);

package/src/Graph/BarChart/models.ts

@@ -1,21 +0,0 @@
-import { Line } from '../common/timeSeries/models';
-
-export type TooltipData =
-  | {
-      data: Array<{
-        metric: Line;
-        value: number | null;
-      }>;
-      highlightedMetric: number;
-      index: number;
-    }
-  | {
-      thresholdLabel: string;
-    };
-
-export interface BarStyle {
-  /** The opacity of the bar between 0 and 1. */
-  opacity: number;
-  /** The radius of a bar between 0 and 0.5. Does not work for stacked bars */
-  radius: number;
-}

package/src/Graph/BarChart/useBarChartStyles.tsx

@@ -1,5 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useBarChartStyles = makeStyles()({
-  tooltipChildren: { height: '100%', width: '100%' }
-});

package/src/Graph/BarChart/useBarStack.ts

@@ -1,114 +0,0 @@
-import { useCallback, useMemo } from 'react';
-
-import { BarStack, BarStackHorizontal } from '@visx/shape';
-import { equals, keys, omit } from 'ramda';
-import { scaleOrdinal } from '@visx/scale';
-import { useSetAtom } from 'jotai';
-
-import { useDeepMemo } from '../../utils';
-import { Line, TimeValue } from '../common/timeSeries/models';
-
-import { tooltipDataAtom } from './atoms';
-
-interface HoverBarProps {
-  barIndex: number;
-  highlightedMetric: number;
-}
-
-export interface UseBarStackProps {
-  isHorizontal: boolean;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale;
-  yScale;
-}
-
-interface UseBarStackState {
-  BarStackComponent: typeof BarStack | typeof BarStackHorizontal;
-  colorScale;
-  commonBarStackProps;
-  exitBar: () => void;
-  hoverBar: (props: HoverBarProps) => () => void;
-  lineKeys: Array<number>;
-}
-
-export const useBarStack = ({
-  timeSeries,
-  isHorizontal,
-  yScale,
-  lines,
-  xScale
-}: UseBarStackProps): UseBarStackState => {
-  const setTooltipData = useSetAtom(tooltipDataAtom);
-
-  const BarStackComponent = useMemo(
-    () => (isHorizontal ? BarStack : BarStackHorizontal),
-    [isHorizontal]
-  );
-
-  const lineKeys = useDeepMemo({
-    deps: [timeSeries],
-    variable: keys(omit(['timeTick'], timeSeries[0]))
-  });
-  const colors = useDeepMemo({
-    deps: [lineKeys, lines],
-    variable: lineKeys.map((key) => {
-      const metric = lines.find(({ metric_id }) =>
-        equals(metric_id, Number(key))
-      );
-
-      return metric?.lineColor || '';
-    })
-  });
-
-  const colorScale = useMemo(
-    () =>
-      scaleOrdinal<number, string>({
-        domain: lineKeys,
-        range: colors
-      }),
-    [...lineKeys, ...colors]
-  );
-
-  const commonBarStackProps = isHorizontal
-    ? {
-        x: (d) => d.timeTick,
-        xScale,
-        yScale
-      }
-    : {
-        xScale: yScale,
-        y: (d) => d.timeTick,
-        yScale: xScale
-      };
-
-  const hoverBar = useCallback(
-    ({ highlightedMetric, barIndex }: HoverBarProps) =>
-      (): void => {
-        setTooltipData({
-          data: lines.map((metric) => {
-            return {
-              metric,
-              value: timeSeries[barIndex][metric.metric_id]
-            };
-          }),
-          highlightedMetric,
-          index: barIndex
-        });
-      },
-    []
-  );
-
-  const exitBar = useCallback((): void => {
-    setTooltipData(null);
-  }, []);
-
-  return {
-    BarStackComponent,
-    colorScale,
-    commonBarStackProps,
-    exitBar,
-    hoverBar,
-    lineKeys
-  };
-};