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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34459-fullscreen-mode.0",
+  "version": "24.4.1-MON-develop-dashboard.1",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -117,9 +117,11 @@
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
+    "@visx/legend": "^3.5.0",
     "@visx/pattern": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^2.12.2",
+    "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
@@ -127,6 +129,7 @@
     "humanize-duration": "^3.27.3",
     "lexical": "^0.12.2",
     "notistack": "^3.0.1",
+    "numeral": "^2.0.6",
     "ramda": "0.29.1",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",

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

@@ -0,0 +1,154 @@
+import numeral from 'numeral';
+
+import BarStack from './BarStack';
+import { BarType, BarStackProps } 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 }: BarType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '400px',
+  height = '400px',
+  data = defaultData,
+  ...args
+}: Omit<BarStackProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <BarStack {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Bar stack', () => {
+  it('renders Bar stack 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('barStack').should('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
+    initialize({ variant: 'horizontal' });
+    cy.get('[data-variant="horizontal"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a vertical bar when variant is set to "vertical"', () => {
+    initialize({ variant: 'vertical' });
+    cy.get('[data-variant="vertical"]').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 rects 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 rects 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('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/BarStack/BarStack.stories.tsx

@@ -0,0 +1,123 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BarType } from './models';
+
+import { BarStack } from '.';
+
+const data = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 63 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 13 }
+];
+
+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 dataWithSmallNumber = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 42 },
+  { color: '#F7931A', label: 'Warning', value: 7 },
+  { color: '#FF6666', label: 'Down', value: 5 }
+];
+
+const meta: Meta<typeof BarStack> = {
+  component: BarStack
+};
+
+export default meta;
+type Story = StoryObj<typeof BarStack>;
+
+const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
+  return (
+    <div style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const Template = (args): JSX.Element => {
+  return (
+    <div style={{ height: '300px', width: '500px' }}>
+      <BarStack {...args} />
+    </div>
+  );
+};
+
+export const Vertical: Story = {
+  args: { data, title: 'hosts' },
+  render: Template
+};
+
+export const WithoutTitle: Story = {
+  args: { data },
+  render: Template
+};
+
+export const WithPencentage: Story = {
+  args: { data, title: 'hosts', unit: 'percentage' },
+  render: Template
+};
+
+export const WithoutLegend: Story = {
+  args: { data, displayLegend: false, title: 'hosts' },
+
+  render: Template
+};
+
+export const withDisplayedValues: Story = {
+  args: { data, displayValues: true, title: 'hosts' },
+  render: Template
+};
+
+export const WithTooltip: Story = {
+  args: { TooltipContent, data, title: 'hosts' },
+  render: Template
+};
+
+export const WithBigNumbers: Story = {
+  args: {
+    TooltipContent,
+    data: dataWithBigNumbers,
+    displayValues: true,
+    title: 'hosts'
+  },
+  render: Template
+};
+
+export const WithSmallNumbers: Story = {
+  args: {
+    TooltipContent,
+    data: dataWithSmallNumber,
+    displayValues: true,
+    title: 'hosts'
+  },
+  render: Template
+};
+
+export const Horizontal: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    title: 'hosts',
+    variant: 'horizontal'
+  },
+  render: Template
+};
+
+export const HorizontalWithoutLegend: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayLegend: false,
+    displayValues: true,
+    title: 'hosts',
+    variant: 'horizontal'
+  },
+  render: Template
+};

package/src/Graph/BarStack/BarStack.styles.ts

@@ -0,0 +1,36 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBarStackStyles = makeStyles()((theme) => ({
+  barStackTooltip: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    padding: 0,
+    position: 'relative'
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1.5),
+    justifyContent: 'center'
+  },
+  svgContainer: {
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.panelGroups,
+    borderRadius: theme.shape.borderRadius,
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  svgWrapper: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: theme.typography.h6.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    margin: 0,
+    padding: 0
+  }
+}));

package/src/Graph/BarStack/BarStack.tsx

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

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -0,0 +1,208 @@
+import { useRef } from 'react';
+
+import { BarStack as BarStackVertical, BarStackHorizontal } from '@visx/shape';
+import { Group } from '@visx/group';
+import numeral from 'numeral';
+import { Text } from '@visx/text';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+
+import { Tooltip } from '../../components';
+import { LegendProps } from '../Legend/models';
+import { Legend as LegendComponent } from '../Legend';
+import { getValueByUnit } from '../common/utils';
+import { labelNoDataFound } from '../translatedLabels';
+
+import { BarStackProps } from './models';
+import { useBarStackStyles } from './BarStack.styles';
+import useResponsiveBarStack from './useResponsiveBarStack';
+
+const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
+  <LegendComponent direction={direction} scale={scale} />
+);
+
+const BarStack = ({
+  title,
+  data,
+  width,
+  height,
+  size = 72,
+  onSingleBarClick,
+  displayLegend = true,
+  TooltipContent,
+  Legend = DefaultLengd,
+  unit = 'number',
+  displayValues,
+  variant = 'vertical',
+  legendDirection = 'column'
+}: BarStackProps & { height: number; width: number }): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useBarStackStyles();
+
+  const titleRef = useRef(null);
+  const legendRef = useRef(null);
+
+  const {
+    barSize,
+    colorScale,
+    input,
+    keys,
+    legendScale,
+    total,
+    xScale,
+    yScale,
+    svgWrapperWidth,
+    svgContainerSize,
+    isVerticalBar,
+    areAllValuesNull
+  } = useResponsiveBarStack({
+    data,
+    height,
+    legendRef,
+    size,
+    titleRef,
+    unit,
+    variant,
+    width
+  });
+
+  const BarStackComponent = isVerticalBar
+    ? BarStackVertical
+    : BarStackHorizontal;
+
+  if (areAllValuesNull) {
+    return (
+      <div className={classes.container} style={{ height, width }}>
+        <Typography variant="h3">{t(labelNoDataFound)}</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.container} style={{ height, width }}>
+      <div
+        className={classes.svgWrapper}
+        style={{
+          height,
+          width: svgWrapperWidth
+        }}
+      >
+        {title && (
+          <div className={classes.title} data-testid="Title" ref={titleRef}>
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+          </div>
+        )}
+        <div
+          className={classes.svgContainer}
+          data-testid="barStack"
+          style={svgContainerSize}
+        >
+          <svg
+            data-variant={variant}
+            height={barSize.height}
+            width={barSize.width}
+          >
+            <Group>
+              <BarStackComponent
+                color={colorScale}
+                data={[input]}
+                keys={keys}
+                {...(isVerticalBar
+                  ? { x: () => undefined }
+                  : { y: () => undefined })}
+                xScale={xScale}
+                yScale={yScale}
+              >
+                {(barStacks) =>
+                  barStacks.map((barStack) =>
+                    barStack.bars.map((bar) => {
+                      const onClick = (): void => {
+                        onSingleBarClick?.(bar);
+                      };
+
+                      return (
+                        <Tooltip
+                          hasCaret
+                          classes={{
+                            tooltip: classes.barStackTooltip
+                          }}
+                          followCursor={false}
+                          key={`bar-stack-${barStack.index}-${bar.index}`}
+                          label={
+                            TooltipContent && (
+                              <TooltipContent
+                                color={bar.color}
+                                label={bar.key}
+                                title={title}
+                                total={total}
+                                value={barStack.bars[0].bar.data[barStack.key]}
+                              />
+                            )
+                          }
+                          position={
+                            isVerticalBar ? 'right-start' : 'bottom-start'
+                          }
+                        >
+                          <g data-testid={bar.key}>
+                            <rect
+                              fill={bar.color}
+                              height={
+                                isVerticalBar ? bar.height - 1 : bar.height
+                              }
+                              key={`bar-stack-${barStack.index}-${bar.index}`}
+                              ry={5}
+                              width={isVerticalBar ? bar.width : bar.width - 1}
+                              x={bar.x}
+                              y={bar.y}
+                              onClick={onClick}
+                            />
+                            {displayValues &&
+                              bar.height > 10 &&
+                              bar.width > 10 && (
+                                <Text
+                                  cursor="pointer"
+                                  data-testid="value"
+                                  fill="#000"
+                                  fontSize={12}
+                                  textAnchor="middle"
+                                  verticalAnchor="middle"
+                                  x={bar.x + bar.width / 2}
+                                  y={bar.y + bar.height / 2}
+                                >
+                                  {getValueByUnit({
+                                    total,
+                                    unit,
+                                    value:
+                                      barStack.bars[0].bar.data[barStack.key]
+                                  })}
+                                </Text>
+                              )}
+                          </g>
+                        </Tooltip>
+                      );
+                    })
+                  )
+                }
+              </BarStackComponent>
+            </Group>
+          </svg>
+        </div>
+      </div>
+      {displayLegend && (
+        <div data-testid="Legend" ref={legendRef}>
+          <Legend
+            data={data}
+            direction={legendDirection}
+            scale={legendScale}
+            title={title}
+            total={total}
+            unit={unit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BarStack;

package/src/Graph/BarStack/index.ts

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

package/src/Graph/BarStack/models.ts

@@ -0,0 +1,19 @@
+export interface BarType {
+  color: string;
+  label: string;
+  value: number;
+}
+
+export type BarStackProps = {
+  Legend?: ({ scale, data, title, total, unit, direction }) => JSX.Element;
+  TooltipContent?: (barData) => JSX.Element | boolean | null;
+  data: Array<BarType>;
+  displayLegend?: boolean;
+  displayValues?: boolean;
+  legendDirection?: 'row' | 'column';
+  onSingleBarClick?: (barData) => void;
+  size?: number;
+  title?: string;
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+};