@centreon/ui 24.5.2 → 24.5.4

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -1,243 +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 { 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 { 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'
-}: 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
-  } = useResponsivePie({
-    data,
-    defaultInnerRadius,
-    height,
-    legendRef,
-    titleRef,
-    unit,
-    width
-  });
-
-  const { classes } = usePieStyles({ svgSize });
-
-  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,19 +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;
-  legendDirection?: 'row' | 'column';
-  onArcClick?: (ardata) => void;
-  title?: string;
-  unit?: 'percentage' | 'number';
-  variant?: 'pie' | 'donut';
-}

package/src/Graph/PieChart/useResponsivePie.ts

@@ -1,81 +0,0 @@
-import { equals, 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 {
-  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
-  );
-
-  return {
-    half,
-    innerRadius,
-    isContainsExactlyOneNonZeroValue,
-    legendScale,
-    svgContainerSize,
-    svgSize,
-    svgWrapperWidth,
-    total
-  };
-};

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -1,197 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-import { Group, Tooltip } from '@visx/visx';
-import { scaleLinear } from '@visx/scale';
-import { equals, flatten, head, pluck } from 'ramda';
-import { Bar } from '@visx/shape';
-import { useSpring, animated } from '@react-spring/web';
-
-import { alpha, Box, Fade, useTheme } from '@mui/material';
-
-import {
-  formatMetricValueWithUnit,
-  getMetricWithLatestData
-} from '../common/timeSeries';
-import { Metric } from '../common/timeSeries/models';
-import { getColorFromDataAndTresholds } from '../common/utils';
-import { margins } from '../common/margins';
-
-import { SingleBarProps } from './models';
-import Thresholds, { groupMargin } from './Thresholds';
-import { barHeights } from './ThresholdLine';
-
-interface Props extends SingleBarProps {
-  height: number;
-  width: number;
-}
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const ResponsiveSingleBar = ({
-  data,
-  thresholds,
-  width,
-  height,
-  displayAsRaw,
-  baseColor,
-  size = 'medium',
-  showLabels = true
-}: Props): JSX.Element => {
-  const theme = useTheme();
-
-  const metric = getMetricWithLatestData(data) as Metric;
-  const latestMetricData = head(metric.data) as number;
-  const thresholdValues = thresholds.enabled
-    ? flatten([
-        pluck('value', thresholds.warning),
-        pluck('value', thresholds.critical)
-      ])
-    : [0];
-
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
-
-  const {
-    showTooltip,
-    hideTooltip,
-    tooltipOpen,
-    tooltipLeft,
-    tooltipTop,
-    tooltipData
-  } = Tooltip.useTooltip();
-  const svgRef = useRef<SVGSVGElement | null>(null);
-
-  const barColor = useMemo(
-    () =>
-      getColorFromDataAndTresholds({
-        baseColor,
-        data: latestMetricData,
-        theme,
-        thresholds
-      }),
-    [latestMetricData, thresholds, theme]
-  );
-
-  const isSmall = equals(size, 'small');
-
-  const textStyle = isSmall
-    ? {
-        ...theme.typography.h6
-      }
-    : theme.typography.h3;
-
-  const text = showLabels && (
-    <text
-      dominantBaseline="middle"
-      style={{
-        fill: barColor,
-        ...textStyle
-      }}
-      textAnchor="middle"
-      x="50%"
-      y={isSmall ? 10 : 25}
-    >
-      {formatMetricValueWithUnit({
-        base: 1000,
-        isRaw: displayAsRaw,
-        unit: metric.unit,
-        value: metric.data[0]
-      })}
-    </text>
-  );
-
-  const xScale = useMemo(
-    () =>
-      scaleLinear<number>({
-        domain: [0, adaptedMaxValue],
-        range: [0, width - 10 || 0]
-      }),
-    [width, adaptedMaxValue]
-  );
-
-  const metricBarWidth = useMemo(
-    () => xScale(latestMetricData),
-    [xScale, latestMetricData]
-  );
-  const maxBarWidth = useMemo(
-    () => xScale(adaptedMaxValue),
-    [xScale, adaptedMaxValue]
-  );
-
-  const springStyle = useSpring({ width: metricBarWidth });
-
-  return (
-    <div
-      style={{
-        height: '100%',
-        position: 'relative'
-      }}
-    >
-      <Box
-        sx={{
-          height: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          width: '100%'
-        }}
-      >
-        <svg height={height} ref={svgRef} width={width}>
-          <Group.Group>
-            {text}
-            <animated.rect
-              data-testid={`${latestMetricData}-bar-${barColor}`}
-              fill={barColor}
-              height={barHeights[size]}
-              rx={4}
-              style={springStyle}
-              x={5}
-              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-            />
-            <Bar
-              fill="transparent"
-              height={barHeights[size]}
-              rx={4}
-              ry={4}
-              stroke={alpha(theme.palette.text.primary, 0.3)}
-              width={maxBarWidth}
-              x={5}
-              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-            />
-            {thresholds.enabled && (
-              <Thresholds
-                hideTooltip={hideTooltip}
-                showTooltip={showTooltip}
-                size={size}
-                thresholds={thresholds}
-                xScale={xScale}
-              />
-            )}
-          </Group.Group>
-        </svg>
-      </Box>
-      <Fade in={tooltipOpen}>
-        <Tooltip.Tooltip
-          left={tooltipLeft}
-          style={{
-            ...baseStyles,
-            backgroundColor: theme.palette.background.paper,
-            color: theme.palette.text.primary,
-            transform: `translate(-50%, ${isSmall ? -100 : -120}px)`,
-            zIndex: theme.zIndex.tooltip
-          }}
-          top={tooltipTop}
-        >
-          {tooltipData}
-        </Tooltip.Tooltip>
-      </Fade>
-    </div>
-  );
-};
-
-export default ResponsiveSingleBar;

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();
-  });
-});