@centreon/ui 24.4.46 → 24.4.48

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

@@ -1,145 +0,0 @@
-import { pluck } from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import EllipsisTypography from '../../Typography/EllipsisTypography';
-
-import HeatMap from './HeatMap';
-import heatMapData from './HeatMapData.json';
-import { HeatMapProps } from './model';
-
-const dataIds = pluck('id', heatMapData);
-
-interface Data {
-  counter: number;
-  host: string;
-  service: string;
-}
-
-const TileContent = ({
-  isSmallestSize,
-  data
-}: {
-  data: Data;
-  isSmallestSize: boolean;
-}): JSX.Element | false =>
-  !isSmallestSize && (
-    <Box
-      sx={{
-        alignItems: 'center',
-        color: 'common.black',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%'
-      }}
-    >
-      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
-    </Box>
-  );
-
-const initialize = ({
-  width = '100vw',
-  height = '100vh',
-  ...args
-}: Omit<HeatMapProps<Data>, 'tiles' | 'children'> & {
-  height?: string;
-  width?: string;
-}): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height, width }}>
-        <HeatMap tiles={heatMapData} {...args}>
-          {TileContent}
-        </HeatMap>
-      </div>
-    )
-  });
-};
-
-describe('HeatMap', () => {
-  it('displays tiles', () => {
-    initialize({});
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('be.visible');
-    });
-  });
-
-  it('does not display the tooltip when the prop is not set and the tile is hovered', () => {
-    initialize({});
-
-    cy.findByTestId(dataIds[0]).trigger('mouseover');
-
-    cy.findByTestId(`tooltip-${dataIds[0]}`).should('not.exist');
-  });
-
-  it('displays the tooltip when the prop is set and the tile is hovered', () => {
-    initialize({
-      tooltipContent: ({ data }) => (
-        <Typography>
-          This is the tooltip for {data.host}-{data.service}-{data.counter}
-        </Typography>
-      )
-    });
-
-    cy.findByTestId(dataIds[0]).trigger('mouseover');
-
-    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
-      'be.visible'
-    );
-  });
-
-  it('displays the tooltip conditionally when the prop is set and the tile is hovered', () => {
-    initialize({
-      displayTooltipCondition: ({ counter }) => counter > 100,
-      tooltipContent: ({ data }) => (
-        <Typography>
-          This is the tooltip for {data.host}-{data.service}-{data.counter}
-        </Typography>
-      )
-    });
-
-    cy.findByTestId(dataIds[0]).trigger('mouseover');
-
-    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
-      'not.exist'
-    );
-
-    cy.findByTestId(dataIds[1]).trigger('mouseover');
-
-    cy.contains(`This is the tooltip for Server-Service Counter-779`).should(
-      'be.visible'
-    );
-  });
-
-  it('displays tiles with fixed size', () => {
-    initialize({ height: '200px', tileSizeFixed: true, width: '590px' });
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('be.visible');
-    });
-  });
-
-  it('displays tiles as small when the container width is under the breakpoint', () => {
-    initialize({ height: '200px', width: '590px' });
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('be.visible');
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display tiles as small when the contains width is 0', () => {
-    initialize({ height: '200px', width: '0px' });
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('not.exist');
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a single tile', () => {
-    initialize({ tiles: [heatMapData[0]] });
-    cy.findByTestId(dataIds[0]).should('be.visible');
-  });
-});

package/src/Graph/Legend/Legend.tsx

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

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

package/src/Graph/Legend/models.ts

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

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

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

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

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