@centreon/ui 23.10.121 → 24.4.0

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

@@ -0,0 +1,217 @@
+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 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.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,95.18828451882847 h193 h8v8 v138.81171548117152 a8,8 0 0 1 -8,8 h-193 a8,8 0 0 1 -8,-8 v-138.81171548117152 v-8h8z'
+      );
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
+    initialize({ variant: 'horizontal' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,0 h231.69874476987445 h8v8 v295 v8h-8 h-231.69874476987445 a8,8 0 0 1 -8,-8 v-295 a8,8 0 0 1 8,-8z'
+      );
+    cy.get('[data-is-vertical="false"]').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a vertical bar when variant is set to "vertical"', () => {
+    initialize({ variant: 'vertical' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.get('[data-is-vertical="true"]').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+
+    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 });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    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' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    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: false });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is given', () => {
+    initialize({ title: 'host' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
+    cy.findByTestId('Title').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the bars within a small display', () => {
+    initialize({
+      displayLegend: true,
+      height: '89px',
+      title: 'host',
+      width: '120px'
+    });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,20.941422594142264 h94 h8v8 v18.058577405857733 a8,8 0 0 1 -8,8 h-94 a8,8 0 0 1 -8,-8 v-18.058577405857733 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -0,0 +1,125 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import ResponsiveBarStack from './BarStack';
+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: '400px', width: '400px' }}>
+      <ResponsiveBarStack {...args} />
+    </div>
+  );
+};
+
+export const Vertical: Story = {
+  args: { data, title: 'hosts' },
+  render: Template
+};
+
+export const WithoutTitle: Story = {
+  args: { data },
+  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 WithPencentage: Story = {
+  args: { data, displayValues: true, title: 'hosts', unit: 'percentage' },
+  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,
+    legendDirection: 'row',
+    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,66 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { legendMaxHeight, legendMaxWidth } from './constants';
+
+export const useStyles = makeStyles()({
+  clippedTitle: {
+    overflow: 'hidden',
+    textOverflow: 'clip'
+  },
+  container: {
+    '&[data-has-title="false"]': {
+      gridTemplateRows: 'auto'
+    },
+    '&[data-title-variant="md"]': {
+      gridTemplateRows: '36px auto',
+      overflow: 'hidden',
+      textOverflow: 'clip'
+    },
+    '&[data-title-variant="sm"]': {
+      gridTemplateRows: '20px auto'
+    },
+    '&[data-title-variant="xs"]': {
+      gridTemplateRows: '40px auto'
+    },
+    display: 'grid',
+    height: '100%'
+  }
+});
+
+export const useGraphAndLegendStyles = makeStyles()((theme) => ({
+  graphAndLegend: {
+    '&[data-display-legend="false"][data-is-vertical="false"]': {
+      gridTemplateRows: '1fr'
+    },
+    '&[data-display-legend="true"][data-is-vertical="false"]': {
+      gap: theme.spacing(0.5),
+      gridTemplateRows: `1fr ${legendMaxHeight}px`
+    },
+    '&[data-is-vertical="true"][data-display-legend="false"]': {
+      gridTemplateColumns: '1fr'
+    },
+    '&[data-is-vertical="true"][data-display-legend="true"]': {
+      gap: theme.spacing(0.5),
+      gridTemplateColumns: `1fr ${legendMaxWidth}px`
+    },
+    display: 'grid',
+    height: '100%'
+  },
+  legend: {
+    '&[data-is-vertical="false"]': {
+      overflowY: 'auto'
+    },
+    '&[data-is-vertical="true"]': {
+      alignSelf: 'center'
+    }
+  }
+}));
+
+export const useGraphStyles = makeStyles()((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[3],
+    color: theme.palette.text.primary,
+    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/Graph.tsx

@@ -0,0 +1,176 @@
+import { memo, useMemo } from 'react';
+
+import {
+  BarRounded,
+  BarStackHorizontal,
+  BarStack as BarStackVertical
+} from '@visx/shape';
+import { Text } from '@visx/text';
+import { equals, props } from 'ramda';
+
+import { Tooltip } from '../../components';
+import { getValueByUnit } from '../common/utils';
+
+import { useGraphStyles } from './BarStack.styles';
+import { BarStackProps } from './models';
+import { useGraphAndLegend } from './useGraphAndLegend';
+
+interface Props
+  extends Pick<
+    BarStackProps,
+    | 'data'
+    | 'displayValues'
+    | 'onSingleBarClick'
+    | 'unit'
+    | 'TooltipContent'
+    | 'tooltipProps'
+  > {
+  colorScale;
+  height: number;
+  isVerticalBar: boolean;
+  total: number;
+  width: number;
+}
+
+const Graph = ({
+  width,
+  height,
+  isVerticalBar,
+  colorScale,
+  data,
+  total,
+  unit,
+  displayValues,
+  onSingleBarClick,
+  tooltipProps,
+  TooltipContent
+}: Props): JSX.Element => {
+  const { classes } = useGraphStyles();
+
+  const BarStackComponent = useMemo(
+    () => (isVerticalBar ? BarStackVertical : BarStackHorizontal),
+    [isVerticalBar]
+  );
+
+  const normalizedHeight = useMemo(() => height - 10, [height]);
+
+  const { barStackData, xScale, yScale, keys } = useGraphAndLegend({
+    data,
+    height: normalizedHeight,
+    isVerticalBar,
+    total,
+    width
+  });
+
+  return (
+    <svg height={normalizedHeight} width="100%">
+      <BarStackComponent
+        color={colorScale}
+        data={[barStackData]}
+        keys={keys}
+        {...(isVerticalBar ? { x: () => undefined } : { y: () => undefined })}
+        xScale={xScale}
+        yScale={yScale}
+      >
+        {(barStacks) =>
+          barStacks.map((barStack, index) =>
+            barStack.bars.map((bar) => {
+              const isFirstBar = equals(index, 0);
+              const isLastBar = equals(index, barStacks.length - 1);
+              const fitsInBar = isVerticalBar
+                ? bar.height >= 18
+                : (equals(unit, 'number') && bar.width > 15) ||
+                  (equals(unit, 'percentage') && bar.width > 35);
+
+              const textX = bar.x + bar.width / 2;
+              const textY = bar.y + bar.height / 2;
+
+              const click = onSingleBarClick
+                ? (e: MouseEvent): void => {
+                    if (!equals(e.button, 0)) {
+                      return;
+                    }
+                    onSingleBarClick(bar);
+                  }
+                : undefined;
+
+              return (
+                <Tooltip
+                  classes={classes}
+                  followCursor={false}
+                  key={`bar-stack-${barStack.index}-${bar.index}`}
+                  label={
+                    TooltipContent && (
+                      <TooltipContent
+                        color={bar.color}
+                        label={bar.key}
+                        total={total}
+                        value={barStack.bars[0].bar.data[barStack.key]}
+                        {...tooltipProps}
+                      />
+                    )
+                  }
+                  position={isVerticalBar ? 'right' : 'bottom'}
+                >
+                  <g data-testid={bar.key} key={bar.key}>
+                    <BarRounded
+                      bottom={isVerticalBar && isFirstBar}
+                      cursor={onSingleBarClick ? 'pointer' : 'default'}
+                      fill={bar.color}
+                      height={bar.height}
+                      key={`bar-stack-${barStack.index}-${bar.index}`}
+                      left={!isVerticalBar && isFirstBar}
+                      radius={8}
+                      right={!isVerticalBar && isLastBar}
+                      top={isVerticalBar && isLastBar}
+                      width={isVerticalBar ? bar.width - 10 : bar.width}
+                      x={bar.x}
+                      y={bar.y}
+                      onMouseDown={click}
+                    />
+                    {displayValues && fitsInBar && (
+                      <Text
+                        cursor={onSingleBarClick ? 'pointer' : 'default'}
+                        data-testid="value"
+                        fill="#000"
+                        fontSize={12}
+                        fontWeight={600}
+                        textAnchor="middle"
+                        verticalAnchor="middle"
+                        x={textX}
+                        y={textY}
+                        onMouseUp={click}
+                      >
+                        {getValueByUnit({
+                          total,
+                          unit: unit || 'number',
+                          value: barStack.bars[0].bar.data[barStack.key]
+                        })}
+                      </Text>
+                    )}
+                  </g>
+                </Tooltip>
+              );
+            })
+          )
+        }
+      </BarStackComponent>
+    </svg>
+  );
+};
+
+const propsToMemoize = [
+  'width',
+  'height',
+  'isVerticalBar',
+  'colorScale',
+  'data',
+  'total',
+  'unit',
+  'displayValues',
+  'tooltipProps'
+];
+
+export default memo(Graph, (prevProps, nextProps) =>
+  equals(props(propsToMemoize, prevProps), props(propsToMemoize, nextProps))
+);