@centreon/ui 24.5.12 → 24.5.13

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -0,0 +1,243 @@
+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={{
+          minHeight: 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

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

package/src/Graph/PieChart/models.ts

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

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

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

@@ -0,0 +1,121 @@
+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();
+  });
+});