@centreon/ui 24.4.58 → 24.4.59

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -1,254 +0,0 @@
-import { useRef } from 'react';
-
-import { Pie } from '@visx/shape';
-import { Group } from '@visx/group';
-import { Text } from '@visx/text';
-import numeral from 'numeral';
-import { always, equals, gt, ifElse, lt } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Typography, useTheme } from '@mui/material';
-
-import { Tooltip } from '../../components';
-import { Legend as LegendComponent } from '../Legend';
-import { LegendProps } from '../Legend/models';
-import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
-
-import { PieProps } from './models';
-import { usePieStyles } from './PieChart.styles';
-import { useResponsivePie } from './useResponsivePie';
-
-const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
-  <LegendComponent direction={direction} scale={scale} />
-);
-
-type Placement = 'left' | 'right' | 'top' | 'bottom';
-
-const getTooltipPlacement = ({ radianX, radianY }): Placement => {
-  if (gt(Math.abs(radianX), Math.abs(radianY))) {
-    return ifElse<[b: number], Placement, Placement>(
-      lt(0),
-      always<Placement>('right'),
-      always<Placement>('left')
-    )(radianX);
-  }
-
-  return ifElse<[b: number], Placement, Placement>(
-    lt(0),
-    always<Placement>('bottom'),
-    always<Placement>('top')
-  )(radianY);
-};
-
-const ResponsivePie = ({
-  title,
-  variant = 'pie',
-  width,
-  height,
-  data,
-  unit = 'number',
-  Legend = DefaultLengd,
-  displayLegend = true,
-  innerRadius: defaultInnerRadius = 40,
-  onArcClick,
-  displayValues,
-  TooltipContent,
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
-}: PieProps & { height: number; width: number }): JSX.Element => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const legendRef = useRef(null);
-  const titleRef = useRef(null);
-
-  const {
-    half,
-    legendScale,
-    svgContainerSize,
-    svgSize,
-    svgWrapperWidth,
-    total,
-    innerRadius,
-    isContainsExactlyOneNonZeroValue,
-    areAllValuesNull
-  } = useResponsivePie({
-    data,
-    defaultInnerRadius,
-    height,
-    legendRef,
-    titleRef,
-    unit,
-    width
-  });
-
-  const { classes } = usePieStyles({ svgSize });
-
-  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
-        }}
-      >
-        {equals(variant, 'pie') && title && (
-          <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
-          </div>
-        )}
-        <div
-          className={classes.svgContainer}
-          data-testid="pieChart"
-          style={{
-            height: svgContainerSize,
-            width: svgContainerSize
-          }}
-        >
-          <svg data-variant={variant} height={svgSize} width={svgSize}>
-            <Group left={half} top={half}>
-              <Pie
-                cornerRadius={4}
-                data={data}
-                innerRadius={() => {
-                  return equals(variant, 'pie') ? 0 : half - innerRadius;
-                }}
-                outerRadius={half}
-                pieValue={(items) => items.value}
-              >
-                {(pie) => {
-                  return pie.arcs.map((arc) => {
-                    const [centroidX, centroidY] = pie.path.centroid(arc);
-                    const midAngle = Math.atan2(centroidY, centroidX);
-
-                    const labelRadius = half * 0.8;
-
-                    const labelX = Math.cos(midAngle) * labelRadius;
-                    const labelY = Math.sin(midAngle) * labelRadius;
-
-                    const angle = arc.endAngle - arc.startAngle;
-                    const minAngle = 0.2;
-
-                    const x = equals(variant, 'donut') ? centroidX : labelX;
-                    const y = equals(variant, 'donut') ? centroidY : labelY;
-
-                    const onClick = (): void => {
-                      onArcClick?.(arc.data);
-                    };
-
-                    return (
-                      <Tooltip
-                        hasCaret
-                        classes={{
-                          tooltip: classes.pieChartTooltip
-                        }}
-                        followCursor={false}
-                        key={arc.data.label}
-                        label={
-                          TooltipContent && (
-                            <TooltipContent
-                              color={arc.data.color}
-                              label={arc.data.label}
-                              title={title}
-                              total={total}
-                              value={arc.data.value}
-                            />
-                          )
-                        }
-                        leaveDelay={200}
-                        placement={getTooltipPlacement({
-                          radianX: Math.cos(midAngle),
-                          radianY: Math.sin(midAngle)
-                        })}
-                      >
-                        <g data-testid={arc.data.label} onClick={onClick}>
-                          <path
-                            cursor="pointer"
-                            d={pie.path(arc) as string}
-                            fill={arc.data.color}
-                          />
-                          {displayValues &&
-                            !isContainsExactlyOneNonZeroValue &&
-                            angle > minAngle && (
-                              <Text
-                                data-testid="value"
-                                dy=".33em"
-                                fill="#000"
-                                fontSize={12}
-                                fontWeight={600}
-                                pointerEvents="none"
-                                textAnchor="middle"
-                                x={x}
-                                y={y}
-                              >
-                                {getValueByUnit({
-                                  total,
-                                  unit,
-                                  value: arc.data.value
-                                })}
-                              </Text>
-                            )}
-                        </g>
-                      </Tooltip>
-                    );
-                  });
-                }}
-              </Pie>
-              {equals(variant, 'donut') && title && (
-                <>
-                  <Text
-                    className={classes.title}
-                    dy={lt(svgSize, 150) ? -10 : -15}
-                    fill={theme.palette.text.primary}
-                    textAnchor="middle"
-                  >
-                    {numeral(total).format('0a').toUpperCase()}
-                  </Text>
-                  <Text
-                    className={classes.title}
-                    data-testid="Title"
-                    dy={lt(svgSize, 150) ? 10 : 15}
-                    fill={theme.palette.text.primary}
-                    textAnchor="middle"
-                  >
-                    {t(title)}
-                  </Text>
-                </>
-              )}
-            </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 ResponsivePie;

package/src/Graph/PieChart/index.ts

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

package/src/Graph/PieChart/models.ts

@@ -1,20 +0,0 @@
-export interface ArcType {
-  color: string;
-  label: string;
-  value: number;
-}
-
-export interface PieProps {
-  Legend?: ({ scale, direction, data, title, total, unit }) => JSX.Element;
-  TooltipContent?: (arcData) => JSX.Element | boolean | null;
-  data: Array<ArcType>;
-  displayLegend?: boolean;
-  displayValues?: boolean;
-  innerRadius?: number;
-  labelNoDataFound?: string;
-  legendDirection?: 'row' | 'column';
-  onArcClick?: (ardata) => void;
-  title?: string;
-  unit?: 'percentage' | 'number';
-  variant?: 'pie' | 'donut';
-}

package/src/Graph/PieChart/useResponsivePie.ts

@@ -1,85 +0,0 @@
-import { equals, isEmpty, pluck, reject } from 'ramda';
-
-import { LegendScale } from '../Legend/models';
-import { getValueByUnit } from '../common/utils';
-
-import { ArcType } from './models';
-
-interface ResponsivePieProps {
-  data: Array<ArcType>;
-  defaultInnerRadius: number;
-  height: number;
-  legendRef;
-  titleRef;
-  unit: 'percentage' | 'number';
-  width: number;
-}
-
-interface ResponsivePieState {
-  areAllValuesNull: boolean;
-  half: number;
-  innerRadius: number;
-  isContainsExactlyOneNonZeroValue: boolean;
-  legendScale: LegendScale;
-  svgContainerSize: number;
-  svgSize: number;
-  svgWrapperWidth: number;
-  total: number;
-}
-export const useResponsivePie = ({
-  titleRef,
-  legendRef,
-  height,
-  width,
-  data,
-  unit,
-  defaultInnerRadius
-}: ResponsivePieProps): ResponsivePieState => {
-  const heightOfTitle = titleRef.current?.offsetHeight || 0;
-  const widthOfLegend = legendRef.current?.offsetWidth || 0;
-
-  const horizontalGap = widthOfLegend > 0 ? 16 : 0;
-  const verticalGap = heightOfTitle > 0 ? 8 : 0;
-
-  const svgContainerSize = Math.min(
-    height - heightOfTitle - verticalGap,
-    width - widthOfLegend - horizontalGap
-  );
-  const svgWrapperWidth = svgContainerSize;
-
-  const outerRadius = Math.min(32, svgContainerSize / 6);
-
-  const svgSize = svgContainerSize - outerRadius;
-
-  const half = svgSize / 2;
-
-  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
-
-  const innerRadius = Math.min(defaultInnerRadius, svgSize / 5);
-
-  const legendScale = {
-    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
-    range: pluck('color', data)
-  };
-
-  const values = pluck('value', data);
-
-  const isContainsExactlyOneNonZeroValue = equals(
-    reject((value) => equals(value, 0), values).length,
-    1
-  );
-
-  const areAllValuesNull = isEmpty(reject((value) => equals(value, 0), values));
-
-  return {
-    areAllValuesNull,
-    half,
-    innerRadius,
-    isContainsExactlyOneNonZeroValue,
-    legendScale,
-    svgContainerSize,
-    svgSize,
-    svgWrapperWidth,
-    total
-  };
-};

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

@@ -1,121 +0,0 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-
-import SingleBar from './SingleBar';
-import { SingleBarProps } from './models';
-
-const initialize = (
-  args: Omit<SingleBarProps, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <SingleBar
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Single bar', () => {
-  it('displays the single bar as success when corresponding thresholds are set', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
-    cy.findByTestId('warning-line-0.5').should('be.visible');
-    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-1.5').should('be.visible');
-    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the single bar as warning when corresponding thresholds are set', () => {
-    initialize({ thresholds: warningThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
-    cy.findByTestId('warning-line-0.4').should('be.visible');
-    cy.findByTestId('warning-line-0.4-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-1.5').should('be.visible');
-    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the single bar as critical when corresponding thresholds are set', () => {
-    initialize({ thresholds: criticalThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
-    cy.findByTestId('warning-line-0.2').should('be.visible');
-    cy.findByTestId('warning-line-0.2-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-0.3').should('be.visible');
-    cy.findByTestId('critical-line-0.3-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.findByTestId('warning-line-0.13').should('be.visible');
-    cy.findByTestId('warning-line-0.13-tooltip').should('be.visible');
-    cy.findByTestId('warning-line-0.5').should('be.visible');
-    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-0.55').should('be.visible');
-    cy.findByTestId('critical-line-0.55-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-0.65').should('be.visible');
-    cy.findByTestId('critical-line-0.65-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the threshold tooltip when a threshold is hovered', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.findByTestId('warning-line-0.5-tooltip').trigger('mouseover');
-
-    cy.contains('Warning').should('be.visible');
-
-    cy.findByTestId('critical-line-1.5-tooltip').trigger('mouseover');
-
-    cy.contains('Critical').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays single bar as small when the props is set', () => {
-    initialize({ size: 'small', thresholds: successThresholds });
-
-    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the value as raw when the prop is set', () => {
-    initialize({ displayAsRaw: true, thresholds: successThresholds });
-
-    cy.contains('0.40663333333 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the value when the prop is set', () => {
-    initialize({ showLabels: false, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

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

@@ -1,101 +0,0 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-
-import { Text, Props } from './Text';
-
-const initialize = (
-  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <Text
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Text', () => {
-  it('displays the text as success when corresponding thresholds are set', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
-    cy.contains('Warning: 0.5 s').should('be.visible');
-    cy.contains('Critical: 1.5 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the text as warning when corresponding thresholds are set', () => {
-    initialize({ thresholds: warningThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
-    cy.contains('Warning: 0.4 s').should('be.visible');
-    cy.contains('Critical: 1.5 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the text as critical when corresponding thresholds are set', () => {
-    initialize({ thresholds: criticalThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
-    cy.contains('Warning: 0.2 s').should('be.visible');
-    cy.contains('Critical: 0.3 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
-    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the value as raw when the prop is set', () => {
-    initialize({ displayAsRaw: true, thresholds: successThresholds });
-
-    cy.contains('0.40663333333 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the text', () => {
-    initialize({ data: undefined, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays text with default values when the data is empty', () => {
-    initialize({
-      data: {
-        global: {},
-        metrics: [],
-        times: []
-      },
-      thresholds: successThresholds
-    });
-
-    cy.contains('0').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/common/testUtils.ts

@@ -1,71 +0,0 @@
-export const successThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 1.5
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.5
-    }
-  ]
-};
-
-export const warningThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 1.5
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.4
-    }
-  ]
-};
-
-export const criticalThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 0.3
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.2
-    }
-  ]
-};
-
-export const rangedThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 0.55
-    },
-    {
-      label: 'Critical',
-      value: 0.65
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.13
-    },
-    {
-      label: 'Warning',
-      value: 0.5
-    }
-  ]
-};

package/src/Graph/translatedLabels.ts

@@ -1 +0,0 @@
-export const labelNoDataFound = 'No Data Available';