@centreon/ui 24.11.13 → 24.11.14

package/src/Graph/BarChart/BarStack.tsx

@@ -1,192 +0,0 @@
-import { memo } from 'react';
-
-import { ScaleType, scaleBand } from '@visx/scale';
-import { BarRounded } from '@visx/shape';
-import { dec, equals, gt, pick } from 'ramda';
-
-import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
-import { BarStyle } from './models';
-import { UseBarStackProps, useBarStack } from './useBarStack';
-
-const xScale = scaleBand<number>({
-  domain: [0, 0],
-  padding: 0,
-  range: [0, 0]
-});
-
-interface Props extends Omit<UseBarStackProps, 'xScale'> {
-  barIndex: number;
-  barPadding: number;
-  barStyle: BarStyle;
-  barWidth: number;
-  isTooltipHidden: boolean;
-  neutralValue: number;
-}
-
-const getPadding = ({ padding, size, isNegativeValue }): number => {
-  if (!isNegativeValue) {
-    return padding;
-  }
-
-  return padding + size;
-};
-
-interface GetFirstBarHeightProps {
-  bar: Omit<BarGroupBar<StackKey>, 'key' | 'value'> & {
-    bar: SeriesPoint<unknown>;
-    key: StackKey;
-  };
-  isHorizontal: boolean;
-  barWidth: number;
-  y: number;
-  isFirstBar: boolean;
-  yScale: ScaleType;
-  neutralValue: number;
-}
-
-const getFirstBarHeight = ({
-  bar,
-  isHorizontal,
-  barWidth,
-  y,
-  isFirstBar,
-  yScale,
-  neutralValue
-}: GetFirstBarHeightProps): number => {
-  if (!isFirstBar || !isHorizontal) {
-    return isHorizontal ? Math.abs(bar.height) : barWidth;
-  }
-
-  if (equals(bar.height, 0)) {
-    return 0;
-  }
-
-  if (isHorizontal && bar.height < 0) {
-    return bar.height;
-  }
-
-  if (isHorizontal) {
-    return Math.abs(bar.width) - (y - yScale(neutralValue));
-  }
-
-  return barWidth;
-};
-
-const BarStack = ({
-  timeSeries,
-  isHorizontal,
-  yScale,
-  lines,
-  barWidth,
-  barPadding,
-  barIndex,
-  isTooltipHidden,
-  barStyle = { opacity: 1, radius: 0.2 },
-  neutralValue
-}: Props): JSX.Element => {
-  const {
-    BarStackComponent,
-    commonBarStackProps,
-    colorScale,
-    lineKeys,
-    exitBar,
-    hoverBar
-  } = useBarStack({ isHorizontal, lines, timeSeries, xScale, yScale });
-
-  return (
-    <BarStackComponent
-      color={colorScale}
-      data={[timeSeries[barIndex]]}
-      keys={lineKeys}
-      {...commonBarStackProps}
-    >
-      {(barStacks) => {
-        return barStacks.map((barStack, index) =>
-          barStack.bars.map((bar) => {
-            const shouldApplyRadiusOnBottom = equals(index, 0);
-            const shouldApplyRadiusOnTop = equals(index, dec(barStacks.length));
-            const isNegativeValue = gt(0, bar.bar[1]);
-
-            const barRoundedProps = {
-              [isHorizontal ? 'bottom' : 'left']: shouldApplyRadiusOnBottom,
-              [isHorizontal ? 'top' : 'right']: shouldApplyRadiusOnTop
-            };
-
-            return (
-              <BarRounded
-                {...barRoundedProps}
-                data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
-                fill={bar.color}
-                height={getFirstBarHeight({
-                  bar,
-                  barWidth,
-                  y: isHorizontal
-                    ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
-                    : barPadding,
-                  isFirstBar: shouldApplyRadiusOnBottom,
-                  isHorizontal,
-                  yScale,
-                  neutralValue
-                })}
-                key={`bar-stack-${barStack.index}-${bar.index}`}
-                opacity={barStyle.opacity ?? 1}
-                radius={barWidth * barStyle.radius}
-                width={isHorizontal ? barWidth : Math.abs(bar.width)}
-                x={
-                  isHorizontal
-                    ? barPadding
-                    : getPadding({
-                        isNegativeValue,
-                        padding: bar.x,
-                        size: bar.width
-                      })
-                }
-                y={isHorizontal ? bar.y : barPadding}
-                onMouseEnter={
-                  isTooltipHidden
-                    ? undefined
-                    : hoverBar({
-                        barIndex,
-                        highlightedMetric: Number(bar.key)
-                      })
-                }
-                onMouseLeave={isTooltipHidden ? undefined : exitBar}
-              />
-            );
-          })
-        );
-      }}
-    </BarStackComponent>
-  );
-};
-
-const propsToMemoize = [
-  'timeSeries',
-  'isHorizontal',
-  'barWidth',
-  'lines',
-  'barPadding',
-  'barIndex',
-  'isTooltipHidden',
-  'barStyle',
-  'neutralValue'
-];
-
-export default memo(BarStack, (prevProps, nextProps) => {
-  const prevYScaleDomain = prevProps.yScale.domain();
-  const prevYScaleRange = prevProps.yScale.range();
-  const nextYScaleDomain = nextProps.yScale.domain();
-  const nextYScaleRange = nextProps.yScale.range();
-
-  return (
-    equals(
-      [...prevYScaleDomain, ...prevYScaleRange],
-      [...nextYScaleDomain, ...nextYScaleRange]
-    ) &&
-    equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps))
-  );
-});

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -1,256 +0,0 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
-
-import { useAtom } from 'jotai';
-import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
-
-import { Skeleton } from '@mui/material';
-
-import { Tooltip } from '../../components';
-import { useDeepCompare } from '../../utils';
-import { margin } from '../Chart/common';
-import { Data, LineChartProps } from '../Chart/models';
-import { useIntersection } from '../Chart/useChartIntersection';
-import BaseChart from '../common/BaseChart/BaseChart';
-import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
-import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
-import Thresholds from '../common/Thresholds/Thresholds';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import {
-  getUnits,
-  getXScaleBand,
-  getYScalePerUnit
-} from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
-import { useTooltipStyles } from '../common/useTooltipStyles';
-
-import BarGroup from './BarGroup';
-import BarChartTooltip from './Tooltip/BarChartTooltip';
-import { tooltipDataAtom } from './atoms';
-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;
-  skipIntersectionObserver?: boolean;
-}
-
-const ResponsiveBarChart = ({
-  graphRef,
-  graphData,
-  legend,
-  height,
-  width,
-  axis,
-  thresholdUnit,
-  thresholds,
-  header,
-  limitLegend,
-  orientation,
-  tooltip,
-  barStyle,
-  skipIntersectionObserver
-}: 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 displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
-    [linesGraph]
-  );
-
-  const [firstUnit, secondUnit] = getUnits(displayedLines);
-  const allUnits = getUnits(lines);
-
-  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 yScalesPerUnit = useMemo(
-    () =>
-      getYScalePerUnit({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        isCenteredZero: axis?.isCenteredZero,
-        isHorizontal,
-        scale: axis?.scale,
-        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight:
-          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
-      }),
-    [
-      displayedLines,
-      timeSeries,
-      graphHeight,
-      thresholdValues,
-      graphWidth,
-      thresholds?.enabled,
-      axis?.isCenteredZero,
-      axis?.scale,
-      axis?.scaleLogarithmicBase
-    ]
-  );
-
-  const leftScale = yScalesPerUnit[firstUnit];
-  const rightScale = yScalesPerUnit[secondUnit];
-
-  useEffect(
-    () => {
-      setLinesGraph(lines);
-    },
-    useDeepCompare([lines])
-  );
-
-  const displayLegend = legend?.display ?? true;
-
-  const showGridLines = useMemo(
-    () => isNil(axis?.showGridLines) || axis?.showGridLines,
-    [axis?.showGridLines]
-  );
-
-  if (!isInViewport && !skipIntersectionObserver) {
-    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
-            allUnits={allUnits}
-            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}
-                isTooltipHidden={isTooltipHidden}
-                lines={displayedLines}
-                orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
-                timeSeries={timeSeries}
-                xScale={xScale}
-                yScalesPerUnit={yScalesPerUnit}
-                scaleType={axis?.scale}
-              />
-              {thresholds?.enabled && (
-                <Thresholds
-                  displayedLines={displayedLines}
-                  hideTooltip={() => setTooltipData(null)}
-                  isHorizontal={isHorizontal}
-                  showTooltip={({ tooltipData: thresholdLabel }) =>
-                    setTooltipData({
-                      thresholdLabel
-                    })
-                  }
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds as ThresholdsModel}
-                  width={isHorizontal ? graphWidth : graphHeight - margin.top}
-                  yScalesPerUnit={yScalesPerUnit}
-                />
-              )}
-            </>
-          </ChartSvgWrapper>
-        </div>
-      </Tooltip>
-    </BaseChart>
-  );
-};
-
-export default ResponsiveBarChart;

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

@@ -1,122 +0,0 @@
-import { useAtomValue } from 'jotai';
-import {
-  path,
-  T,
-  always,
-  cond,
-  equals,
-  filter,
-  gt,
-  has,
-  isNil,
-  prop,
-  reverse,
-  sortBy
-} from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import { useLocaleDateTimeFormat } from '../../../utils';
-import { Tooltip } from '../../Chart/models';
-import { formatMetricValueWithUnit } from '../../common/timeSeries';
-import { TimeValue } from '../../common/timeSeries/models';
-import { tooltipDataAtom } from '../atoms';
-
-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%' }
-});