@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -1,212 +0,0 @@
-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 { equals, lt } from 'ramda';
-
-import { Tooltip } from '../../components';
-import { LegendProps } from '../Legend/models';
-import { Legend as LegendComponent } from '../Legend';
-import { getValueByUnit } from '../common/utils';
-
-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 ResponsiveBarStack = ({
-  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, cx } = useBarStackStyles();
-
-  const titleRef = useRef(null);
-  const legendRef = useRef(null);
-
-  const {
-    barSize,
-    colorScale,
-    input,
-    keys,
-    legendScale,
-    total,
-    xScale,
-    yScale,
-    svgContainerSize,
-    isVerticalBar
-  } = useResponsiveBarStack({
-    data,
-    height,
-    legendRef,
-    size,
-    titleRef,
-    unit,
-    variant,
-    width
-  });
-
-  const BarStackComponent = isVerticalBar
-    ? BarStackVertical
-    : BarStackHorizontal;
-
-  const isSmallHeight = isVerticalBar ? lt(height, 190) : lt(height, 100);
-  const isSmallWidth = isVerticalBar ? lt(width, 80) : lt(width, 350);
-  const mustDisplayLegend = isSmallWidth ? false : displayLegend;
-
-  return (
-    <div className={classes.container} style={{ width }}>
-      <div className={classes.svgWrapper}>
-        {title && (
-          <div
-            className={cx(classes.title, isSmallHeight && classes.smallTitle)}
-            data-testid="Title"
-            ref={titleRef}
-          >
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
-          </div>
-        )}
-        <div
-          className={classes.svgContainer}
-          data-testid="barStack"
-          style={{
-            width: svgContainerSize.width
-          }}
-        >
-          <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 shouldDisplayValues = (): boolean => {
-                        if (bar.height < 10) {
-                          return false;
-                        }
-
-                        return (
-                          (equals(unit, 'number') && bar.width > 10) ||
-                          (equals(unit, 'percentage') && bar.width > 25)
-                        );
-                      };
-
-                      const TextX = bar.x + bar.width / 2;
-                      const TextY = bar.y + bar.height / 2;
-
-                      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} onClick={onClick}>
-                            <rect
-                              cursor="pointer"
-                              fill={bar.color}
-                              height={
-                                isVerticalBar ? bar.height - 1 : bar.height
-                              }
-                              key={`bar-stack-${barStack.index}-${bar.index}`}
-                              ry={4}
-                              width={isVerticalBar ? bar.width : bar.width - 1}
-                              x={bar.x}
-                              y={bar.y}
-                            />
-                            {displayValues && shouldDisplayValues() && (
-                              <Text
-                                cursor="pointer"
-                                data-testid="value"
-                                fill="#000"
-                                fontSize={12}
-                                fontWeight={600}
-                                textAnchor="middle"
-                                verticalAnchor="middle"
-                                x={TextX}
-                                y={TextY}
-                              >
-                                {getValueByUnit({
-                                  total,
-                                  unit,
-                                  value: barStack.bars[0].bar.data[barStack.key]
-                                })}
-                              </Text>
-                            )}
-                          </g>
-                        </Tooltip>
-                      );
-                    })
-                  )
-                }
-              </BarStackComponent>
-            </Group>
-          </svg>
-        </div>
-      </div>
-      {mustDisplayLegend && (
-        <div data-testid="Legend" ref={legendRef}>
-          <Legend
-            data={data}
-            direction={legendDirection}
-            scale={legendScale}
-            title={title}
-            total={total}
-            unit={unit}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ResponsiveBarStack;

package/src/Graph/BarStack/index.ts

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

package/src/Graph/BarStack/models.ts

@@ -1,19 +0,0 @@
-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';
-};

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,127 +0,0 @@
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { equals, gt, pluck } from 'ramda';
-
-import { getValueByUnit } from '../common/utils';
-import { LegendScale } from '../Legend/models';
-
-import { BarType } from './models';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface useBarStackProps {
-  data: Array<BarType>;
-  height: number;
-  legendRef;
-  size: number;
-  titleRef;
-  unit?: 'percentage' | 'number';
-  variant?: 'vertical' | 'horizontal';
-  width: number;
-}
-interface useBarStackState {
-  barSize: Size;
-  colorScale;
-  input;
-  isVerticalBar: boolean;
-  keys: Array<string>;
-  legendScale: LegendScale;
-  svgContainerSize: Size;
-  total: number;
-  xScale;
-  yScale;
-}
-
-const useResponsiveBarStack = ({
-  data,
-  variant,
-  height,
-  width,
-  unit = 'number',
-  titleRef,
-  legendRef,
-  size
-}: useBarStackProps): useBarStackState => {
-  const isVerticalBar = equals(variant, 'vertical');
-
-  const heightOfTitle = titleRef.current?.offsetHeight || 0;
-  const widthOfLegend = legendRef.current?.offsetWidth || 0;
-
-  const horizontalGap = widthOfLegend > 0 ? 12 : 0;
-  const verticalGap = heightOfTitle > 0 ? 8 : 0;
-
-  const svgContainerSize = {
-    height: isVerticalBar ? height - heightOfTitle - verticalGap : size,
-    width: isVerticalBar ? size : width - widthOfLegend - horizontalGap
-  };
-
-  const barSize = {
-    height: gt(height / 2, svgContainerSize.height - 16)
-      ? svgContainerSize.height - 16
-      : svgContainerSize.height - 46,
-    width: svgContainerSize.width - 16
-  };
-
-  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
-
-  const yScale = isVerticalBar
-    ? scaleLinear({
-        domain: [0, total]
-      })
-    : scaleBand({
-        domain: [0, 0],
-        padding: 0
-      });
-
-  const xScale = isVerticalBar
-    ? scaleBand({
-        domain: [0, 0],
-        padding: 0
-      })
-    : scaleLinear({
-        domain: [0, total]
-      });
-
-  const keys = pluck('label', data);
-
-  const colorsRange = pluck('color', data);
-
-  const colorScale = scaleOrdinal({
-    domain: keys,
-    range: colorsRange
-  });
-
-  const legendScale = {
-    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
-    range: colorsRange
-  };
-
-  const xMax = barSize.width;
-  const yMax = barSize.height;
-
-  xScale.rangeRound([0, xMax]);
-  yScale.range([yMax, 0]);
-
-  const input = data.reduce((acc, { label, value }) => {
-    acc[label] = value;
-
-    return acc;
-  }, {});
-
-  return {
-    barSize,
-    colorScale,
-    input,
-    isVerticalBar,
-    keys,
-    legendScale,
-    svgContainerSize,
-    total,
-    xScale,
-    yScale
-  };
-};
-
-export default useResponsiveBarStack;

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -1,104 +0,0 @@
-import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
-import { useTransition, to, animated } from '@react-spring/web';
-import { equals, includes, isNil, pluck } from 'ramda';
-
-import { Typography } from '@mui/material';
-
-import { Thresholds } from '../common/models';
-
-type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
-
-const fromLeaveTransition = ({ endAngle }): AnimatedStyles => ({
-  endAngle,
-  opacity: 0,
-  startAngle: -(Math.PI / 2)
-});
-const enterUpdateTransition = <T,>({
-  startAngle,
-  endAngle
-}: PieArcDatum<T>): AnimatedStyles => ({
-  endAngle,
-  opacity: 1,
-  startAngle
-});
-
-type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
-  animate?: boolean;
-  getColor: (d: PieArcDatum<Datum>) => string;
-  getKey: (d: PieArcDatum<Datum>) => string;
-  hideTooltip?: () => void;
-  showTooltip?: (args) => void;
-  thresholds: Thresholds;
-};
-
-const AnimatedPie = <Datum,>({
-  animate,
-  arcs,
-  path,
-  getKey,
-  getColor,
-  showTooltip,
-  hideTooltip,
-  thresholds
-}: AnimatedPieProps<Datum>): JSX.Element | null => {
-  const transitions = useTransition?.<PieArcDatum<Datum>, AnimatedStyles>(
-    arcs,
-    {
-      enter: enterUpdateTransition,
-      from: animate ? fromLeaveTransition : enterUpdateTransition,
-      keys: getKey,
-      leave: animate ? fromLeaveTransition : enterUpdateTransition,
-      update: enterUpdateTransition
-    }
-  );
-
-  if (isNil(useTransition)) {
-    return null;
-  }
-
-  return transitions((props, arc, { key }) => (
-    <g key={key}>
-      <animated.path
-        d={to([props.startAngle, props.endAngle], (startAngle, endAngle) =>
-          path({
-            ...arc,
-            endAngle,
-            startAngle
-          })
-        )}
-        data-testid={`${arc.data?.value || arc.data}-arc`}
-        display={
-          includes('transparent', arc.data?.name || '') ? 'none' : 'inline'
-        }
-        fill={getColor(arc)}
-        onMouseEnter={(event) => {
-          const thresholdType = arc.data?.name as string;
-
-          if (equals(thresholdType, 'success')) {
-            return;
-          }
-
-          showTooltip?.({
-            tooltipData: (
-              <div>
-                {pluck(
-                  'label',
-                  thresholds[thresholdType as 'warning' | 'critical']
-                ).map((label) => (
-                  <Typography key={label} variant="body2">
-                    {label}
-                  </Typography>
-                ))}
-              </div>
-            ),
-            tooltipLeft: event.clientX,
-            tooltipTop: event.clientY
-          });
-        }}
-        onMouseLeave={() => hideTooltip?.()}
-      />
-    </g>
-  ));
-};
-
-export default AnimatedPie;

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

@@ -1,102 +0,0 @@
-import dataLastWeek from '../mockedData/lastWeek.json';
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-
-import { Props, Gauge } from './Gauge';
-
-const initialize = (
-  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <Gauge
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Gauge', () => {
-  it('does not display the gauge when there is no data', () => {
-    initialize({ data: undefined, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-  });
-
-  it('displays the gauge 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('1.1500000000000001-arc').should('be.visible');
-    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the gauge 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('1.25-arc').should('be.visible');
-    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the gauge 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('0.6399999999999999-arc').should('be.visible');
-    cy.findByTestId('0.54-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.findByTestId('0.37-arc').should('be.visible');
-    cy.findByTestId('0.09999999999999998-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the threshold tooltip when a threshold is hovered', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.findByTestId('1.1500000000000001-arc').trigger('mouseover', {
-      force: true
-    });
-
-    cy.contains('Warning').should('be.visible');
-
-    cy.findByTestId('0.15000000000000013-arc').trigger('mouseover', {
-      force: true
-    });
-
-    cy.contains('Critical').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();
-  });
-});