@centreon/ui 24.11.13 → 24.11.14

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -1,213 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import dayjs from 'dayjs';
-
-import { LineChartData } from '../common/models';
-import dataPingService from '../mockedData/pingService.json';
-import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
-import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-
-import BarChart from './BarChart';
-
-const meta: Meta<typeof BarChart> = {
-  component: BarChart
-};
-export default meta;
-
-type Story = StoryObj<typeof BarChart>;
-
-const defaultStart = new Date(
-  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
-).toISOString();
-
-const defaultEnd = new Date(Date.now()).toISOString();
-
-const defaultArgs = {
-  end: defaultEnd,
-  height: 500,
-  loading: false,
-  start: defaultStart
-};
-
-const Template = (args): JSX.Element => (
-  <BarChart data={dataPingService as unknown as LineChartData} {...args} />
-);
-
-export const Default: Story = {
-  args: defaultArgs,
-  render: Template
-};
-
-export const withCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    }
-  },
-  render: Template
-};
-
-export const vertical: Story = {
-  args: {
-    ...defaultArgs,
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const verticalCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const stacked: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStacked
-  },
-  render: Template
-};
-
-export const stackedVertical: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStacked,
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const stackedCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    data: dataPingServiceStacked
-  },
-  render: Template
-};
-
-export const stackedVerticalCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    data: dataPingServiceStacked,
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const thresholds: Story = {
-  args: {
-    ...defaultArgs,
-    thresholdUnit: 'ms',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 0.1
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 0.05
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const thresholdsVertical: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    orientation: 'vertical',
-    thresholdUnit: 'ms',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 0.1
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 0.05
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const thresholdStacked: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStacked,
-    thresholdUnit: 'ms',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 0.1
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 0.05
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const customBarStyle: Story = {
-  args: {
-    ...defaultArgs,
-    barStyle: {
-      opacity: 0.5,
-      radius: 0.5
-    }
-  },
-  render: Template
-};
-
-export const mixedStacked: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceMixedStacked
-  },
-  render: Template
-};
-
-export const mixedStackedVertical: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceMixedStacked,
-    orientation: 'vertical'
-  },
-  render: Template
-};

package/src/Graph/BarChart/BarChart.tsx

@@ -1,107 +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 { 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

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