@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/BarChart/useSingleBar.ts

@@ -1,199 +0,0 @@
-import { useMemo } from 'react';
-
-import { equals, gt } from 'ramda';
-import { useSetAtom } from 'jotai';
-
-import { Line } from '../common/timeSeries/models';
-import { useDeepMemo } from '../..';
-
-import { tooltipDataAtom } from './atoms';
-
-const getInvertedBarLength = ({
-  useRightScale,
-  rightScale,
-  leftScale,
-  value
-}): number | null => {
-  const scale = useRightScale ? rightScale : leftScale;
-
-  return scale(value);
-};
-
-const getBarLength = ({
-  size,
-  value,
-  invertedBarLength,
-  lengthToMatchZero,
-  isCenteredZero,
-  isHorizontal
-}): number => {
-  if (!value) {
-    return 0;
-  }
-
-  if (!isHorizontal && gt(0, value) && isCenteredZero) {
-    return size - lengthToMatchZero - invertedBarLength;
-  }
-
-  if (!isHorizontal && gt(0, value) && gt(invertedBarLength, 0)) {
-    return invertedBarLength;
-  }
-
-  if (!isHorizontal && gt(0, value)) {
-    return invertedBarLength + (size - lengthToMatchZero);
-  }
-
-  if (!isHorizontal) {
-    return invertedBarLength - (size - lengthToMatchZero);
-  }
-
-  if (value < 0) {
-    return Math.abs(invertedBarLength) - (size - lengthToMatchZero);
-  }
-
-  if (isCenteredZero) {
-    const barLength = size - invertedBarLength;
-
-    return size - invertedBarLength - barLength / 2;
-  }
-
-  return size - invertedBarLength - lengthToMatchZero;
-};
-
-export interface UseSingleBarProps {
-  bar: {
-    color: string;
-    height: number;
-    index: number;
-    key: number;
-    value: number | null;
-    width: number;
-    x: number;
-    y: number;
-  };
-  isCenteredZero?: boolean;
-  isHorizontal: boolean;
-  isTooltipHidden: boolean;
-  leftScale;
-  lines: Array<Line>;
-  rightScale;
-  secondUnit?: string;
-  size: number;
-}
-
-interface UseSingleBarState {
-  barLength: number;
-  barPadding: number;
-  listeners: {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-  };
-}
-
-export const useSingleBar = ({
-  lines,
-  secondUnit,
-  bar,
-  leftScale,
-  rightScale,
-  size,
-  isCenteredZero,
-  isHorizontal,
-  isTooltipHidden
-}: UseSingleBarProps): UseSingleBarState => {
-  const setTooltipData = useSetAtom(tooltipDataAtom);
-
-  const metric = useDeepMemo({
-    deps: [lines, bar.key],
-    variable: lines.find(({ metric_id }) => equals(metric_id, Number(bar.key)))
-  }) as Line;
-
-  const useRightScale = useMemo(
-    () => equals(secondUnit, metric?.unit),
-    [secondUnit, metric?.unit]
-  );
-
-  const left0Height = useMemo(() => leftScale(0), [leftScale(0)]);
-  const right0Height = useMemo(() => rightScale(0), [rightScale(0)]);
-
-  const invertedBarLength = useMemo(
-    () =>
-      getInvertedBarLength({
-        leftScale,
-        rightScale,
-        useRightScale,
-        value: bar.value
-      }),
-    [bar.value, useRightScale, leftScale, rightScale]
-  );
-
-  const lengthToMatchZero = useMemo(
-    () => size - (useRightScale ? right0Height : left0Height),
-    [useRightScale, rightScale, leftScale]
-  );
-
-  const barLength = useMemo(
-    () =>
-      getBarLength({
-        invertedBarLength,
-        isCenteredZero,
-        isHorizontal,
-        lengthToMatchZero,
-        size,
-        value: bar.value
-      }),
-    [
-      size,
-      invertedBarLength,
-      isCenteredZero,
-      isHorizontal,
-      lengthToMatchZero,
-      bar.value
-    ]
-  );
-
-  const barPadding = useMemo(
-    () =>
-      isHorizontal
-        ? size -
-          barLength -
-          lengthToMatchZero +
-          ((bar.value ?? 0) < 0 ? barLength : 0)
-        : size - lengthToMatchZero - ((bar.value ?? 0) < 0 ? barLength : 0),
-    [isHorizontal, barLength, bar.value, barLength]
-  );
-
-  const hoverBar = (): void => {
-    setTooltipData({
-      data: [
-        {
-          metric,
-          value: bar.value
-        }
-      ],
-      highlightedMetric: metric?.metric_id,
-      index: bar.index
-    });
-  };
-
-  const exitBar = (): void => {
-    setTooltipData(null);
-  };
-
-  const listeners = useMemo(
-    () =>
-      isTooltipHidden
-        ? {}
-        : {
-            onMouseEnter: hoverBar,
-            onMouseLeave: exitBar
-          },
-    [isTooltipHidden]
-  );
-
-  return {
-    barLength,
-    barPadding,
-    listeners
-  };
-};

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

@@ -1,139 +0,0 @@
-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.findByTestId('barStack').should('have.css', 'height', '270px');
-
-    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();
-  });
-});

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

@@ -1,140 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { BarType } from './models';
-import ResponsiveBarStack from './ResponsiveBarStack';
-
-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,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  }
-};
-
-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 <ResponsiveBarStack height={300} width={500} {...args} />;
-};
-
-const SmallTemplate = (args): JSX.Element => {
-  return <ResponsiveBarStack height={120} width={120} {...args} />;
-};
-
-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,
-    title: 'hosts',
-    variant: 'horizontal'
-  },
-  render: Template
-};
-
-export const HorizontalWithoutLegend: Story = {
-  args: {
-    TooltipContent,
-    data,
-    displayLegend: false,
-    displayValues: true,
-    title: 'hosts',
-    variant: 'horizontal'
-  },
-  render: Template
-};
-
-export const SmallDisplay: Story = {
-  args: {
-    TooltipContent,
-    data,
-    displayValues: true,
-    title: 'hosts',
-    variant: 'horizontal'
-  },
-  render: SmallTemplate
-};

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

@@ -1,41 +0,0 @@
-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'
-  },
-  smallTitle: {
-    fontSize: theme.typography.body1.fontSize
-  },
-  svgContainer: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.panelGroups,
-    borderRadius: theme.spacing(1.25),
-    display: 'flex',
-    justifyContent: 'center',
-    padding: theme.spacing(1)
-  },
-  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,
-    textAlign: 'center'
-  }
-}));

package/src/Graph/BarStack/BarStack.tsx

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