@centreon/ui 24.4.1-MON-34459-fullscreen-mode.0 → 24.4.1-MON-develop-dashboard.1

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -0,0 +1,139 @@
+import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
+import { equals, isEmpty, pluck, reject } from 'ramda';
+
+import { getValueByUnit } from '../common/utils';
+import { LegendScale } from '../Legend/models';
+
+import { BarType } from './models';
+
+interface Size {
+  height: number;
+  width: number;
+}
+
+interface useBarStackProps {
+  data: Array<BarType>;
+  height: number;
+  legendRef;
+  size: number;
+  titleRef;
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+  width: number;
+}
+interface useBarStackState {
+  areAllValuesNull: boolean;
+  barSize: Size;
+  colorScale;
+  input;
+  isVerticalBar: boolean;
+  keys: Array<string>;
+  legendScale: LegendScale;
+  svgContainerSize: Size;
+  svgWrapperWidth: number;
+  total: number;
+  xScale;
+  yScale;
+}
+
+const useResponsiveBarStack = ({
+  data,
+  variant,
+  height,
+  width,
+  unit = 'number',
+  titleRef,
+  legendRef,
+  size
+}: useBarStackProps): useBarStackState => {
+  const isVerticalBar = equals(variant, 'vertical');
+
+  const heightOfTitle = titleRef.current?.offsetHeight || 0;
+  const widthOfLegend = legendRef.current?.offsetWidth || 0;
+
+  const horizontalGap = widthOfLegend > 0 ? 12 : 0;
+  const verticalGap = heightOfTitle > 0 ? 8 : 0;
+
+  const svgWrapperWidth = isVerticalBar
+    ? size + 24
+    : width - widthOfLegend - horizontalGap;
+
+  const svgContainerSize = {
+    height: isVerticalBar ? height - heightOfTitle - verticalGap : size,
+    width: isVerticalBar ? size : width - widthOfLegend - horizontalGap
+  };
+
+  const barSize = {
+    height: svgContainerSize.height - 16,
+    width: svgContainerSize.width - 16
+  };
+
+  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
+
+  const yScale = isVerticalBar
+    ? scaleLinear({
+        domain: [0, total],
+        nice: true
+      })
+    : scaleBand({
+        domain: [0, 0],
+        padding: 0
+      });
+
+  const xScale = isVerticalBar
+    ? scaleBand({
+        domain: [0, 0],
+        padding: 0
+      })
+    : scaleLinear({
+        domain: [0, total],
+        nice: true
+      });
+
+  const keys = pluck('label', data);
+
+  const colorsRange = pluck('color', data);
+
+  const colorScale = scaleOrdinal({
+    domain: keys,
+    range: colorsRange
+  });
+
+  const legendScale = {
+    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
+    range: colorsRange
+  };
+
+  const xMax = barSize.width;
+  const yMax = barSize.height;
+
+  xScale.rangeRound([0, xMax]);
+  yScale.range([yMax, 0]);
+
+  const input = data.reduce((acc, { label, value }) => {
+    acc[label] = value;
+
+    return acc;
+  }, {});
+
+  const values = pluck('value', data);
+
+  const areAllValuesNull = isEmpty(reject((value) => equals(value, 0), values));
+
+  return {
+    areAllValuesNull,
+    barSize,
+    colorScale,
+    input,
+    isVerticalBar,
+    keys,
+    legendScale,
+    svgContainerSize,
+    svgWrapperWidth,
+    total,
+    xScale,
+    yScale
+  };
+};
+
+export default useResponsiveBarStack;

package/src/Graph/Legend/Legend.tsx

@@ -0,0 +1,21 @@
+import { LegendOrdinal } from '@visx/legend';
+import { scaleOrdinal } from '@visx/scale';
+
+import { LegendProps } from './models';
+
+const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
+  const legendScale = scaleOrdinal({
+    domain: scale.domain,
+    range: scale.range
+  });
+
+  return (
+    <LegendOrdinal
+      direction={direction}
+      labelMargin="0 16px 0 0"
+      scale={legendScale}
+    />
+  );
+};
+
+export default Legend;

package/src/Graph/Legend/index.ts

@@ -0,0 +1 @@
+export { default as Legend } from './Legend';

package/src/Graph/Legend/models.ts

@@ -0,0 +1,11 @@
+export type LegendDirection = 'row' | 'column';
+
+export interface LegendScale {
+  domain: Array<number | string>;
+  range: Array<string>;
+}
+
+export interface LegendProps {
+  direction?: LegendDirection;
+  scale: LegendScale;
+}

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

@@ -0,0 +1,169 @@
+import numeral from 'numeral';
+
+import PieChart from './PieChart';
+import { ArcType, PieProps } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const dataWithNullValues = [
+  { color: '#88B922', label: 'Ok', value: 0 },
+  { color: '#999999', label: 'Unknown', value: 0 },
+  { color: '#F7931A', label: 'Warning', value: 0 },
+  { color: '#FF6666', label: 'Down', value: 0 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: ArcType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '500px',
+  height = '500px',
+  data = defaultData,
+  ...args
+}: Omit<PieProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <PieChart {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Pie chart', () => {
+  it('renders pie chart correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('pieChart')
+      .should('have.css', 'width', '300px')
+      .and('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a donut when variant is set to "donut"', () => {
+    initialize({ variant: 'donut' });
+    cy.get('[data-variant="donut"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a pie when variant is set to "pie"', () => {
+    initialize({ variant: 'pie' });
+    cy.get('[data-variant="pie"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+  it('conditionally displays values on arcs based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on arcs in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts outer radius when chart dimensions are too small', () => {
+    initialize({
+      displayLegend: false,
+      height: '120px',
+      title: 'hosts',
+      variant: 'donut',
+      width: '120px'
+    });
+
+    cy.get('[data-variant="donut"]').should('have.css', 'width', '100px');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a message "No Data Available" when all values are null', () => {
+    initialize({ data: dataWithNullValues, title: 'host' });
+
+    cy.contains('No Data Available');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/PieChart/PieChart.stories.tsx

@@ -0,0 +1,194 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArcType } from './models';
+
+import { PieChart } from '.';
+
+const data = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const dataWithBigNumbers = [
+  { color: '#88B922', label: 'Ok', value: 260000 },
+  { color: '#999999', label: 'Unknown', value: 1010900 },
+  { color: '#F7931A', label: 'Warning', value: 63114 },
+  { color: '#FF6666', label: 'Down', value: 122222 }
+];
+
+const meta: Meta<typeof PieChart> = {
+  component: PieChart
+};
+
+export default meta;
+type Story = StoryObj<typeof PieChart>;
+
+const Template = (args): JSX.Element => {
+  return (
+    <div style={{ height: '350px', width: '350px' }}>
+      <PieChart {...args} />
+    </div>
+  );
+};
+
+export const Pie: Story = {
+  args: {
+    data,
+    title: 'hosts'
+  },
+  render: Template
+};
+
+export const Donut: Story = {
+  args: {
+    data,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const WithPencentage: Story = {
+  args: {
+    data,
+    title: 'hosts',
+    unit: 'percentage',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const WithBigNumbers: Story = {
+  args: {
+    data: dataWithBigNumbers,
+    title: 'hosts',
+    unit: 'number',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const WithoutLegend: Story = {
+  args: {
+    data,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const DonutWithoutTitle: Story = {
+  args: {
+    data,
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const PieWithoutTitle: Story = {
+  args: {
+    data
+  },
+  render: Template
+};
+
+export const DonutWithDisplayedValues: Story = {
+  args: {
+    data,
+    displayValues: true,
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const PieWithDisplayedValues: Story = {
+  args: {
+    data,
+    displayValues: true
+  },
+  render: Template
+};
+
+const TooltipContent = ({ label, color, value }: ArcType): JSX.Element => {
+  return (
+    <div style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+export const PieWithTooltip: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    unit: 'percentage'
+  },
+  render: Template
+};
+
+export const DonutWithTooltip: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    variant: 'donut'
+  },
+  render: Template
+};
+
+const TemplateForSmallDimensions = (args): JSX.Element => {
+  return (
+    <div style={{ height: '130px', width: '130px' }}>
+      <PieChart {...args} />
+    </div>
+  );
+};
+
+export const PieWithSmallDimensions: Story = {
+  args: {
+    data,
+    displayLegend: false
+  },
+  render: TemplateForSmallDimensions
+};
+
+export const DonutWithSmallDimensions: Story = {
+  args: {
+    data,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: TemplateForSmallDimensions
+};
+
+const dataWidthOneNoZeroValue = [
+  { color: '#88B922', label: 'Ok', value: 13 },
+  { color: '#999999', label: 'Unknown', value: 0 },
+  { color: '#F7931A', label: 'Warning', value: 0 },
+  { color: '#FF6666', label: 'Down', value: 0 }
+];
+
+export const PieWithOneNoZeroValue: Story = {
+  args: {
+    data: dataWidthOneNoZeroValue,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'pie'
+  },
+  render: Template
+};
+
+export const donutWithOneNoZeroValue: Story = {
+  args: {
+    data: dataWidthOneNoZeroValue,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: Template
+};

package/src/Graph/PieChart/PieChart.styles.ts

@@ -0,0 +1,39 @@
+import { lt } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+export const usePieStyles = makeStyles<{ svgSize: number }>()(
+  (theme, { svgSize }) => ({
+    container: {
+      alignItems: 'center',
+      display: 'flex',
+      gap: theme.spacing(2),
+      justifyContent: 'center'
+    },
+    pieChartTooltip: {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+      padding: 0,
+      position: 'relative'
+    },
+    svgContainer: {
+      alignItems: 'center',
+      backgroundColor: theme.palette.background.panelGroups,
+      borderRadius: '100%',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    svgWrapper: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1),
+      justifyContent: 'center'
+    },
+    title: {
+      fontSize: lt(svgSize, 150)
+        ? theme.typography.body1.fontSize
+        : theme.typography.h6.fontSize,
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  })
+);

package/src/Graph/PieChart/PieChart.tsx

@@ -0,0 +1,14 @@
+import { ParentSize } from '../..';
+
+import ResponsivePie from './ResponsivePie';
+import { PieProps } from './models';
+
+const PieChart = (props: PieProps): JSX.Element => (
+  <ParentSize>
+    {({ width, height }) => (
+      <ResponsivePie {...props} height={height} width={width} />
+    )}
+  </ParentSize>
+);
+
+export default PieChart;