@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/BarChart/BarChart.tsx

@@ -1,104 +0,0 @@
-import { useRef } from 'react';
-
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { Provider } from 'jotai';
-
-import { Box } from '@mui/material';
-
-import { LineChartProps } from '../LineChart/models';
-import { LineChartData, Thresholds } from '../common/models';
-import { ParentSize } from '../../ParentSize';
-import useLineChartData from '../LineChart/useLineChartData';
-import LoadingSkeleton from '../LineChart/LoadingSkeleton';
-
-import ResponsiveBarChart from './ResponsiveBarChart';
-import { BarStyle } from './models';
-
-dayjs.extend(localizedFormat);
-dayjs.extend(utcPlugin);
-dayjs.extend(timezonePlugin);
-
-export interface BarChartProps
-  extends Partial<
-    Pick<LineChartProps, 'tooltip' | 'legend' | 'height' | 'axis' | 'header'>
-  > {
-  barStyle?: BarStyle;
-  data?: LineChartData;
-  end: string;
-  limitLegend?: false | number;
-  loading: boolean;
-  orientation: 'vertical' | 'horizontal' | 'auto';
-  start: string;
-  thresholdUnit?: string;
-  thresholds?: Thresholds;
-}
-
-const BarChart = ({
-  data,
-  end,
-  start,
-  height = 500,
-  tooltip,
-  axis,
-  legend,
-  loading,
-  limitLegend,
-  thresholdUnit,
-  thresholds,
-  orientation = 'horizontal',
-  header,
-  barStyle = {
-    opacity: 1,
-    radius: 0.2
-  }
-}: BarChartProps): JSX.Element => {
-  const { adjustedData } = useLineChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
-
-  if (loading && !adjustedData) {
-    return (
-      <LoadingSkeleton
-        displayTitleSkeleton={header?.displayTitle ?? false}
-        graphHeight={height || 200}
-      />
-    );
-  }
-
-  return (
-    <Provider>
-      <Box
-        ref={lineChartRef}
-        sx={{ height: '100%', overflow: 'hidden', width: '100%' }}
-      >
-        <ParentSize>
-          {({ height: responsiveHeight, width }) => (
-            <ResponsiveBarChart
-              axis={axis}
-              barStyle={barStyle}
-              graphData={adjustedData}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              orientation={orientation}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              tooltip={tooltip}
-              width={width}
-            />
-          )}
-        </ParentSize>
-      </Box>
-    </Provider>
-  );
-};
-
-export default BarChart;

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,248 +0,0 @@
-import { memo, useMemo } from 'react';
-
-import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
-import { difference, equals, isEmpty, keys, omit, pick } from 'ramda';
-import { scaleBand, scaleOrdinal } from '@visx/scale';
-import { Group } from '@visx/group';
-
-import { useDeepMemo } from '../../utils';
-import { Line, TimeValue } from '../common/timeSeries/models';
-import {
-  getSortedStackedLines,
-  getTime,
-  getTimeSeriesForLines
-} from '../common/timeSeries';
-
-import SingleBar from './SingleBar';
-import BarStack from './BarStack';
-import { BarStyle } from './models';
-
-interface Props {
-  barStyle: BarStyle;
-  isCenteredZero?: boolean;
-  isTooltipHidden: boolean;
-  leftScale;
-  lines: Array<Line>;
-  orientation: 'horizontal' | 'vertical';
-  rightScale;
-  secondUnit?: string;
-  size: number;
-  timeSeries: Array<TimeValue>;
-  xScale;
-}
-
-const BarGroup = ({
-  orientation,
-  timeSeries,
-  size,
-  lines,
-  xScale,
-  leftScale,
-  rightScale,
-  secondUnit,
-  isCenteredZero,
-  isTooltipHidden,
-  barStyle
-}: Props): JSX.Element => {
-  const isHorizontal = equals(orientation, 'horizontal');
-
-  const BarComponent = useMemo(
-    () => (isHorizontal ? VisxBarGroup : BarGroupHorizontal),
-    [isHorizontal]
-  );
-
-  const stackedLines = getSortedStackedLines(lines);
-  const notStackedLines = difference(lines, stackedLines);
-
-  const stackLinesRight = stackedLines.filter(({ unit }) =>
-    equals(unit, secondUnit)
-  );
-  const stackLinesLeft = stackedLines.filter(
-    ({ unit }) => !equals(unit, secondUnit)
-  );
-  const hasStackedLinesRight = !isEmpty(stackLinesRight)
-    ? { stackedRight: null }
-    : {};
-  const hasStackedLinesLeft = !isEmpty(stackLinesLeft)
-    ? { stackedLeft: null }
-    : {};
-
-  const stackedTimeSeriesRight = getTimeSeriesForLines({
-    lines: stackLinesRight,
-    timeSeries
-  });
-  const stackedTimeSeriesLeft = getTimeSeriesForLines({
-    lines: stackLinesLeft,
-    timeSeries
-  });
-  const notStackedTimeSeries = getTimeSeriesForLines({
-    lines: notStackedLines,
-    timeSeries
-  });
-
-  const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
-    ...timeSerie,
-    ...hasStackedLinesRight,
-    ...hasStackedLinesLeft
-  }));
-
-  const lineKeys = useDeepMemo({
-    deps: [normalizedTimeSeries],
-    variable: keys(omit(['timeTick'], normalizedTimeSeries[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 metricScale = useMemo(
-    () =>
-      scaleBand({
-        domain: lineKeys,
-        padding: 0.1,
-        range: [0, xScale.bandwidth()]
-      }),
-    [...lineKeys, xScale.bandwidth()]
-  );
-
-  const barComponentBaseProps = useMemo(
-    () =>
-      isHorizontal
-        ? {
-            x0: getTime,
-            x0Scale: xScale,
-            x1Scale: metricScale,
-            yScale: leftScale
-          }
-        : {
-            xScale: leftScale,
-            y0: getTime,
-            y0Scale: xScale,
-            y1Scale: metricScale
-          },
-    [isHorizontal, leftScale, rightScale, xScale, metricScale]
-  );
-
-  return (
-    <BarComponent<TimeValue>
-      color={colorScale}
-      data={normalizedTimeSeries}
-      height={size}
-      keys={lineKeys}
-      {...barComponentBaseProps}
-    >
-      {(barGroups) =>
-        barGroups.map((barGroup) => (
-          <Group
-            key={`bar-group-${barGroup.index}-${barGroup.x0}`}
-            left={barGroup.x0}
-            top={barGroup.y0}
-          >
-            {barGroup.bars.map((bar) => (
-              <>
-                <SingleBar
-                  bar={bar}
-                  barStyle={barStyle}
-                  isCenteredZero={isCenteredZero}
-                  isHorizontal={isHorizontal}
-                  isTooltipHidden={isTooltipHidden}
-                  key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                  leftScale={leftScale}
-                  lines={lines}
-                  rightScale={rightScale}
-                  secondUnit={secondUnit}
-                  size={size}
-                />
-                {equals(bar.key, 'stackedRight') && (
-                  <BarStack
-                    barIndex={barGroup.index}
-                    barPadding={isHorizontal ? bar.x : bar.y}
-                    barStyle={barStyle}
-                    barWidth={isHorizontal ? bar.width : bar.height}
-                    isHorizontal={isHorizontal}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={stackLinesRight}
-                    timeSeries={stackedTimeSeriesRight}
-                    yScale={rightScale}
-                  />
-                )}
-                {equals(bar.key, 'stackedLeft') && (
-                  <BarStack
-                    barIndex={barGroup.index}
-                    barPadding={isHorizontal ? bar.x : bar.y}
-                    barStyle={barStyle}
-                    barWidth={isHorizontal ? bar.width : bar.height}
-                    isHorizontal={isHorizontal}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={stackLinesLeft}
-                    timeSeries={stackedTimeSeriesLeft}
-                    yScale={leftScale}
-                  />
-                )}
-              </>
-            ))}
-          </Group>
-        ))
-      }
-    </BarComponent>
-  );
-};
-
-const propsToMemoize = [
-  'orientation',
-  'timeSeries',
-  'size',
-  'lines',
-  'secondUnit',
-  'isCenteredZero',
-  'barStyle'
-];
-
-export default memo(BarGroup, (prevProps, nextProps) => {
-  const prevLeftScale = [
-    ...prevProps.leftScale.domain(),
-    ...prevProps.leftScale.range()
-  ];
-  const prevRightScale = [
-    ...prevProps.rightScale.domain(),
-    ...prevProps.rightScale.range()
-  ];
-  const prevXScale = [
-    ...prevProps.xScale.domain(),
-    ...prevProps.xScale.range()
-  ];
-
-  const nextLeftScale = [
-    ...nextProps.leftScale.domain(),
-    ...nextProps.leftScale.range()
-  ];
-  const nextRightScale = [
-    ...nextProps.rightScale.domain(),
-    ...nextProps.rightScale.range()
-  ];
-  const nextXScale = [
-    ...nextProps.xScale.domain(),
-    ...nextProps.xScale.range()
-  ];
-
-  return (
-    equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps)) &&
-    equals(prevLeftScale, nextLeftScale) &&
-    equals(prevRightScale, nextRightScale) &&
-    equals(prevXScale, nextXScale)
-  );
-});

package/src/Graph/BarChart/BarStack.tsx

@@ -1,133 +0,0 @@
-import { memo } from 'react';
-
-import { scaleBand } from '@visx/scale';
-import { equals, gt, pick } from 'ramda';
-
-import { useBarStack, UseBarStackProps } from './useBarStack';
-import { BarStyle } from './models';
-
-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;
-}
-
-const getPadding = ({ padding, size, isNegativeValue }): number => {
-  if (!isNegativeValue) {
-    return padding;
-  }
-
-  return padding + size;
-};
-
-const BarStack = ({
-  timeSeries,
-  isHorizontal,
-  yScale,
-  lines,
-  barWidth,
-  barPadding,
-  barIndex,
-  isTooltipHidden,
-  barStyle
-}: 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) =>
-          barStack.bars.map((bar) => {
-            const isNegativeValue = gt(0, bar.bar[1]);
-
-            return (
-              <rect
-                data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
-                fill={bar.color}
-                height={Math.ceil(
-                  isHorizontal ? Math.abs(bar.height) : barWidth
-                )}
-                key={`bar-stack-${barStack.index}-${bar.index}`}
-                opacity={barStyle.opacity}
-                width={Math.ceil(isHorizontal ? barWidth : Math.abs(bar.width))}
-                x={Math.ceil(
-                  isHorizontal
-                    ? barPadding
-                    : getPadding({
-                        isNegativeValue,
-                        padding: bar.x,
-                        size: bar.width
-                      })
-                )}
-                y={Math.ceil(
-                  isHorizontal
-                    ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
-                    : 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'
-];
-
-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))
-  );
-});