@centreon/ui 24.11.14 → 24.11.21

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

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

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

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

@@ -0,0 +1,137 @@
+[
+  {
+    "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

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

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

package/src/Graph/HeatMap/model.ts

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

@@ -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,150 @@
+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();
+  });
+});