@centreon/ui 24.7.6 → 24.7.7

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -0,0 +1,318 @@
+import dayjs from 'dayjs';
+import { equals } from 'ramda';
+
+import dataPingService from '../mockedData/pingService.json';
+import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
+
+import BarChart, { BarChartProps } from './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 initialize = ({
+  data = dataPingService,
+  legend,
+  tooltip,
+  axis,
+  orientation,
+  barStyle
+}: Pick<
+  BarChartProps,
+  'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip'
+>): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100%', width: '100%' }}>
+        <BarChart
+          axis={axis}
+          barStyle={barStyle}
+          data={data}
+          legend={legend}
+          orientation={orientation ?? 'horizontal'}
+          tooltip={tooltip}
+          {...defaultArgs}
+        />
+      </div>
+    )
+  });
+
+  cy.viewport('macbook-13');
+};
+
+describe('Bar chart', () => {
+  ['horizontal', 'vertical'].forEach((orientation) => {
+    it(`displays the bar chart ${orientation}ly`, () => {
+      initialize({ orientation });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '295');
+      } else {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '863');
+      }
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays the bar chart ${orientation}ly centered in zero`, () => {
+      initialize({ axis: { isCenteredZero: true }, orientation });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '171');
+      } else {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '432');
+      }
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays the stacked bar chart ${orientation}ly`, () => {
+      initialize({ data: dataPingServiceStacked, orientation });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'height')
+          .should('equals', '187');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'width')
+          .should('equals', '546');
+      }
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data`, () => {
+      initialize({ data: dataPingServiceMixedStacked, orientation });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '265');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '773');
+      }
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays the stacked bar chart ${orientation}ly centered in zero`, () => {
+      initialize({
+        axis: { isCenteredZero: true },
+        data: dataPingServiceStacked,
+        orientation
+      });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'height')
+          .should('equals', '94');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'width')
+          .should('equals', '273');
+      }
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data centered in zero`, () => {
+      initialize({
+        axis: { isCenteredZero: true },
+        data: dataPingServiceMixedStacked,
+        orientation
+      });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '133');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '387');
+      }
+    });
+
+    it(`displays bar chart ${orientation}ly with a custom style`, () => {
+      initialize({
+        barStyle: { opacity: 0.5, radius: 0.5 },
+        data: dataPingServiceMixedStacked,
+        orientation
+      });
+
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '265');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '773');
+      }
+    });
+  });
+
+  it('displays a tooltip when a single bar is hovered', () => {
+    initialize({
+      orientation: 'horizontal'
+    });
+
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('single-bar-3-2-0.11372').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('0.11 ms').should('be.visible');
+
+    cy.findByTestId('single-bar-3-2-0.08644')
+      .should('have.attr', 'height')
+      .should('equals', '295');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display a tooltip when a bar is hovered and a props is set', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'hidden',
+        sortOrder: 'descending'
+      }
+    });
+
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('not.exist');
+
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+      .should('have.attr', 'height')
+      .should('equals', '187');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip when a stacked bar is hovered', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'ascending'
+      }
+    });
+
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+    cy.contains('0.02 ms').should('be.visible');
+    cy.contains('0.11 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+      .should('have.attr', 'height')
+      .should('equals', '187');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'single',
+        sortOrder: 'descending'
+      }
+    });
+
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+      .should('have.attr', 'height')
+      .should('equals', '187');
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -0,0 +1,213 @@
+import { Meta, StoryObj } from '@storybook/react';
+import dayjs from 'dayjs';
+
+import { LineChartData } from '../common/models';
+import dataPingService from '../mockedData/pingService.json';
+import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.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

@@ -0,0 +1,104 @@
+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;