@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/BarChart/BarChart.tsx

@@ -0,0 +1,107 @@
+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 { ParentSize } from '../../ParentSize';
+import LoadingSkeleton from '../Chart/LoadingSkeleton';
+import { LineChartProps } from '../Chart/models';
+import useChartData from '../Chart/useChartData';
+import { LineChartData, Thresholds } from '../common/models';
+
+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;
+  skipIntersectionObserver?: boolean;
+}
+
+const BarChart = ({
+  data,
+  end,
+  start,
+  height = 500,
+  tooltip,
+  axis,
+  legend,
+  loading,
+  limitLegend,
+  thresholdUnit,
+  thresholds,
+  orientation = 'horizontal',
+  header,
+  barStyle = {
+    opacity: 1,
+    radius: 0.2
+  },
+  skipIntersectionObserver
+}: BarChartProps): JSX.Element => {
+  const { adjustedData } = useChartData({ 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}
+              skipIntersectionObserver={skipIntersectionObserver}
+            />
+          )}
+        </ParentSize>
+      </Box>
+    </Provider>
+  );
+};
+
+export default BarChart;

package/src/Graph/BarChart/BarGroup.tsx

@@ -0,0 +1,252 @@
+import { memo, useMemo } from 'react';
+
+import { Group } from '@visx/group';
+import { scaleBand, scaleOrdinal } from '@visx/scale';
+import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
+import { ScaleLinear } from 'd3-scale';
+import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+
+import { useDeepMemo } from '../../utils';
+import {
+  getSortedStackedLines,
+  getTime,
+  getTimeSeriesForLines,
+  getUnits
+} from '../common/timeSeries';
+import { Line, TimeValue } from '../common/timeSeries/models';
+
+import BarStack from './BarStack';
+import { BarStyle } from './models';
+
+// Minimum value for logarithmic scale to avoid log(0)
+const minLogScaleValue = 0.001;
+
+const getNeutralValue = (scaleType?: 'linear' | 'logarithmic') =>
+  equals(scaleType, 'logarithmic') ? minLogScaleValue : 0;
+
+interface Props {
+  barStyle: BarStyle;
+  isTooltipHidden: boolean;
+  lines: Array<Line>;
+  orientation: 'horizontal' | 'vertical';
+  size: number;
+  timeSeries: Array<TimeValue>;
+  xScale;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  scaleType?: 'linear' | 'logarithmic';
+}
+
+const BarGroup = ({
+  orientation,
+  timeSeries,
+  size,
+  lines,
+  xScale,
+  yScalesPerUnit,
+  isTooltipHidden,
+  barStyle,
+  scaleType
+}: Props): JSX.Element => {
+  const isHorizontal = equals(orientation, 'horizontal');
+
+  const [firstUnit] = getUnits(lines);
+
+  const BarComponent = useMemo(
+    () => (isHorizontal ? VisxBarGroup : BarGroupHorizontal),
+    [isHorizontal]
+  );
+
+  const stackedLines = getSortedStackedLines(lines);
+  const stackedUnits = uniq(pluck('unit', stackedLines));
+  const notStackedLines = difference(lines, stackedLines);
+
+  const stackedKeys = stackedUnits.reduce(
+    (acc, unit) => ({
+      ...acc,
+      [`stacked-${unit}`]: null
+    }),
+    {}
+  );
+  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = stackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
+
+  const notStackedTimeSeries = getTimeSeriesForLines({
+    lines: notStackedLines,
+    timeSeries
+  });
+
+  const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
+    ...timeSerie,
+    ...stackedKeys
+  }));
+
+  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 placeholderScale = yScalesPerUnit[firstUnit];
+
+  const barComponentBaseProps = useMemo(
+    () =>
+      isHorizontal
+        ? {
+            x0: getTime,
+            x0Scale: xScale,
+            x1Scale: metricScale,
+            yScale: placeholderScale
+          }
+        : {
+            xScale: placeholderScale,
+            y0: getTime,
+            y0Scale: xScale,
+            y1Scale: metricScale
+          },
+    [isHorizontal, placeholderScale, xScale, metricScale]
+  );
+
+  const neutralValue = useMemo(() => getNeutralValue(scaleType), [scaleType]);
+
+  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) => {
+              const isStackedBar = bar.key.startsWith('stacked-');
+              const linesBar = isStackedBar
+                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+                    .lines
+                : (notStackedLines.find(({ metric_id }) =>
+                    equals(metric_id, Number(bar.key))
+                  ) as Line);
+              const timeSeriesBar = isStackedBar
+                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+                    .timeSeries
+                : notStackedTimeSeries.map((timeSerie) => ({
+                    timeTick: timeSerie.timeTick,
+                    [bar.key]: timeSerie[Number(bar.key)]
+                  }));
+
+              return isStackedBar ? (
+                <BarStack
+                  key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
+                  barIndex={barGroup.index}
+                  barPadding={isHorizontal ? bar.x : bar.y}
+                  barStyle={barStyle}
+                  barWidth={isHorizontal ? bar.width : bar.height}
+                  isHorizontal={isHorizontal}
+                  isTooltipHidden={isTooltipHidden}
+                  lines={linesBar}
+                  timeSeries={timeSeriesBar}
+                  yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+                  neutralValue={neutralValue}
+                />
+              ) : (
+                <BarStack
+                  key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
+                  barIndex={barGroup.index}
+                  barPadding={isHorizontal ? bar.x : bar.y}
+                  barStyle={barStyle}
+                  barWidth={isHorizontal ? bar.width : bar.height}
+                  isHorizontal={isHorizontal}
+                  isTooltipHidden={isTooltipHidden}
+                  lines={[linesBar]}
+                  timeSeries={timeSeriesBar}
+                  yScale={yScalesPerUnit[linesBar.unit]}
+                  neutralValue={neutralValue}
+                />
+              );
+            })}
+          </Group>
+        ))
+      }
+    </BarComponent>
+  );
+};
+
+const propsToMemoize = [
+  'orientation',
+  'timeSeries',
+  'size',
+  'lines',
+  'secondUnit',
+  'isCenteredZero',
+  'barStyle',
+  'scaleType'
+];
+
+export default memo(BarGroup, (prevProps, nextProps) => {
+  const prevYScale = prevProps.yScalesPerUnit;
+  const prevXScale = [
+    ...prevProps.xScale.domain(),
+    ...prevProps.xScale.range()
+  ];
+
+  const nextYScale = nextProps.yScalesPerUnit;
+  const nextXScale = [
+    ...nextProps.xScale.domain(),
+    ...nextProps.xScale.range()
+  ];
+
+  return (
+    equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps)) &&
+    equals(prevYScale, nextYScale) &&
+    equals(prevXScale, nextXScale)
+  );
+});

package/src/Graph/BarChart/BarStack.tsx

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