@centreon/ui 24.9.4 → 24.9.6

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -1,93 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
-
-import { Box, Typography } from '@mui/material';
-
-import heatMapData from './HeatMapData.json';
-
-import { HeatMap } from '.';
-
-interface Data {
-  counter: number;
-  host: string;
-  service: string;
-}
-
-const meta: Meta<typeof HeatMap<Data>> = {
-  component: HeatMap
-};
-
-export default meta;
-type Story = StoryObj<typeof HeatMap<Data>>;
-
-const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
-  return (
-    <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>
-      <Box
-        sx={{
-          backgroundColor: 'common.black',
-          color: 'common.white',
-          display: 'flex',
-          justifyContent: 'center',
-          py: 1,
-          width: '100%'
-        }}
-      >
-        <Typography>{data.host}</Typography>
-      </Box>
-      <Box sx={{ px: 1, textAlign: 'center' }}>
-        <Typography>{data.service}</Typography>
-        <Typography>{data.counter}</Typography>
-      </Box>
-    </Box>
-  );
-};
-
-const useStyles = makeStyles()((theme) => ({
-  arrow: {
-    color: theme.palette.common.black
-  }
-}));
-
-const Template = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return <HeatMap {...args} arrowClassName={classes.arrow} />;
-};
-
-const TileContent = ({ data }: { data: Data }): JSX.Element => (
-  <div
-    style={{
-      alignItems: 'center',
-      display: 'flex',
-      height: '100%',
-      justifyContent: 'center'
-    }}
-  >
-    {data.counter}
-  </div>
-);
-
-export const normal: Story = {
-  args: {
-    children: TileContent,
-    tiles: heatMapData
-  }
-};
-
-export const withTooltip: Story = {
-  args: {
-    children: TileContent,
-    tiles: heatMapData,
-    tooltipContent: TooltipContent
-  },
-  render: Template
-};
-
-export const tilesWithFixedSize: Story = {
-  args: {
-    children: TileContent,
-    tileSizeFixed: true,
-    tiles: heatMapData
-  }
-};

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -1,30 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useHeatMapStyles = makeStyles()((theme) => ({
-  arrow: {
-    transform: 'transled3d(0px, 8px, 0px)'
-  },
-  heatMapTile: {
-    alignItems: 'center',
-    aspectRatio: '1 / 1',
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    justifyContent: 'center',
-    width: '100%'
-  },
-  heatMapTileContent: {
-    height: '100%',
-    position: 'relative',
-    width: '100%'
-  },
-  heatMapTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    marginLeft: `${theme.spacing(1.25)} !important`,
-    padding: 0,
-    position: 'relative'
-  },
-  heatMapTooltipArrow: {
-    transform: `translate3d(0px, ${theme.spacing(1)}, 0px) !important`
-  }
-}));

package/src/Graph/HeatMap/HeatMap.tsx

@@ -1,14 +0,0 @@
-import { ParentSize } from '../..';
-
-import ResponsiveHeatMap from './ResponsiveHeatMap';
-import { HeatMapProps } from './model';
-
-const HeatMap = <TData,>(props: HeatMapProps<TData>): JSX.Element => (
-  <ParentSize>
-    {({ width, height }) => (
-      <ResponsiveHeatMap<TData> {...props} height={height} width={width} />
-    )}
-  </ParentSize>
-);
-
-export default HeatMap;

package/src/Graph/HeatMap/HeatMapData.json

@@ -1,137 +0,0 @@
-[
-  {
-    "id": "Orbaxter",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 53
-    }
-  },
-  {
-    "id": "Interfind",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 779
-    }
-  },
-  {
-    "id": "Ecratic",
-    "backgroundColor": "#E3E3E3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 504
-    }
-  },
-  {
-    "id": "Earthwax",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 374
-    }
-  },
-  {
-    "id": "Cytrak",
-    "backgroundColor": "#FF6666",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 957
-    }
-  },
-  {
-    "id": "Exiand",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 281
-    }
-  },
-  {
-    "id": "Ginkogene",
-    "backgroundColor": "#FF6666",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 472
-    }
-  },
-  {
-    "id": "Quailcom",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 770
-    }
-  },
-  {
-    "id": "Cormoran",
-    "backgroundColor": "#FF6666",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 908
-    }
-  },
-  {
-    "id": "Emergent",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 969
-    }
-  },
-  {
-    "id": "Limozen",
-    "backgroundColor": "#E3E3E3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 33
-    }
-  },
-  {
-    "id": "Gogol",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 870
-    }
-  },
-  {
-    "id": "Luxuria",
-    "backgroundColor": "#FD9B27",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 270
-    }
-  },
-  {
-    "id": "Fossiel",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 955
-    }
-  },
-  {
-    "id": "Hawkster",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 28
-    }
-  }
-]

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-
-import { scaleLinear } from '@visx/scale';
-import { T, equals, gt, lt } from 'ramda';
-
-import { Box } from '@mui/material';
-
-import { Tooltip } from '../../components';
-
-import { useHeatMapStyles } from './HeatMap.styles';
-import { HeatMapProps } from './model';
-
-const gap = 8;
-const maxTileSize = 120;
-const smallestTileSize = 44;
-
-const ResponsiveHeatMap = <TData,>({
-  width,
-  children,
-  tiles,
-  arrowClassName,
-  tooltipContent,
-  tileSizeFixed,
-  displayTooltipCondition = T,
-  height
-}: HeatMapProps<TData> & {
-  height: number;
-  width: number;
-}): JSX.Element | null => {
-  const { classes, cx } = useHeatMapStyles();
-
-  const tileSize = useMemo(() => {
-    const scaleWidth = scaleLinear({
-      clamp: true,
-      domain: [680, 1056],
-      range: [76, maxTileSize]
-    });
-    const tileWidth = scaleWidth(width);
-
-    const tilesLength = tiles.length;
-
-    const maxTotalTilesWidth =
-      tilesLength * maxTileSize + (tilesLength - 1) * gap;
-    const theoricalTotalTilesWidth =
-      tilesLength * tileWidth + (tilesLength - 1) * gap;
-
-    if (
-      (lt(height, maxTileSize) ||
-        (lt(width, 680) && gt(maxTotalTilesWidth, width))) &&
-      !tileSizeFixed
-    ) {
-      return smallestTileSize;
-    }
-
-    if (lt(theoricalTotalTilesWidth, width)) {
-      return maxTileSize;
-    }
-
-    return tileSizeFixed ? maxTileSize : tileWidth;
-  }, [width, tiles, height]);
-
-  const isSmallestSize = equals(tileSize, smallestTileSize);
-
-  if (equals(width, 0)) {
-    return null;
-  }
-
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gap: 1,
-        gridTemplateColumns: `repeat(auto-fit, ${tileSize}px)`
-      }}
-    >
-      {tiles.map(({ backgroundColor, id, data }) => (
-        <Box
-          className={classes.heatMapTile}
-          data-testid={id}
-          key={id}
-          sx={{ backgroundColor }}
-        >
-          <Tooltip
-            hasCaret
-            classes={{
-              arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
-              tooltip: classes.heatMapTooltip
-            }}
-            data-testid={`tooltip-${data?.id}`}
-            followCursor={false}
-            label={
-              displayTooltipCondition?.(data) &&
-              tooltipContent?.({
-                backgroundColor,
-                data,
-                id,
-                isSmallestSize
-              })
-            }
-            position="right-start"
-          >
-            <div className={classes.heatMapTileContent}>
-              {children({ backgroundColor, data, id, isSmallestSize })}
-            </div>
-          </Tooltip>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export default ResponsiveHeatMap;

package/src/Graph/HeatMap/index.ts

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

package/src/Graph/HeatMap/model.ts

@@ -1,33 +0,0 @@
-import { ReactElement } from 'react';
-
-interface Tile<TData> {
-  backgroundColor: string;
-  data: TData;
-  id: string;
-}
-
-interface ChildrenProps<TData> {
-  backgroundColor: string;
-  data: TData;
-  id: string;
-  isSmallestSize: boolean;
-}
-
-export interface HeatMapProps<TData> {
-  arrowClassName?: string;
-  children: ({
-    backgroundColor,
-    id,
-    data,
-    isSmallestSize
-  }: ChildrenProps<TData>) => ReactElement | boolean | null;
-  displayTooltipCondition?: (data: TData) => boolean;
-  tileSizeFixed?: boolean;
-  tiles: Array<Tile<TData>>;
-  tooltipContent?: ({
-    backgroundColor,
-    id,
-    data,
-    isSmallestSize
-  }: ChildrenProps<TData>) => ReactElement | boolean | null;
-}

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,150 +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 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');
-  });
-
-  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');
-  });
-
-  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', '76px');
-
-    cy.makeSnapshot();
-  });
-});