@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -0,0 +1,194 @@
+import { useMemo, useRef } from 'react';
+
+import { animated, useSpring } from '@react-spring/web';
+import { scaleLinear } from '@visx/scale';
+import { Bar } from '@visx/shape';
+import { Group, Tooltip } from '@visx/visx';
+import { equals, flatten, head, lt, pluck } from 'ramda';
+
+import { Box, alpha, useTheme } from '@mui/material';
+
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
+import { margins } from '../common/margins';
+import {
+  formatMetricValueWithUnit,
+  getMetricWithLatestData
+} from '../common/timeSeries';
+import { Metric } from '../common/timeSeries/models';
+import { useTooltipStyles } from '../common/useTooltipStyles';
+import { getColorFromDataAndTresholds } from '../common/utils';
+
+import { barHeights } from './ThresholdLine';
+import Thresholds, { groupMargin } from './Thresholds';
+import { SingleBarProps } from './models';
+
+interface Props extends SingleBarProps {
+  height: number;
+  width: number;
+}
+
+const ResponsiveSingleBar = ({
+  data,
+  thresholds,
+  width,
+  height,
+  displayAsRaw,
+  baseColor,
+  size = 'medium',
+  showLabels = true
+}: Props): JSX.Element => {
+  const { classes } = useTooltipStyles();
+  const theme = useTheme();
+
+  const isSmallHeight = lt(height, 150);
+
+  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, 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') || isSmallHeight;
+
+  const textStyle = isSmall ? theme.typography.h6 : theme.typography.h4;
+
+  const textHeight = isSmall ? 46 : 27;
+
+  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 });
+
+  const barHeight = isSmallHeight ? barHeights.small : barHeights[size];
+
+  const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
+
+  const realBarHeight =
+    !isSmall && textHeight + barHeight > height
+      ? height - textHeight - 2 * margins.top
+      : barHeight;
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        position: 'relative'
+      }}
+    >
+      <Box
+        sx={{
+          height: '100%',
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%'
+        }}
+      >
+        <MuiTooltip
+          classes={{
+            tooltip: classes.tooltip
+          }}
+          label={tooltipData}
+          open={tooltipOpen}
+          placement="top"
+        >
+          <svg height={height} ref={svgRef} width={width}>
+            <Group.Group>
+              {text}
+              <animated.rect
+                data-testid={`${latestMetricData}-bar-${barColor}`}
+                fill={barColor}
+                height={realBarHeight}
+                rx={4}
+                style={springStyle}
+                x={5}
+                y={barY}
+              />
+              <Bar
+                fill="transparent"
+                height={realBarHeight}
+                rx={4}
+                ry={4}
+                stroke={alpha(theme.palette.text.primary, 0.3)}
+                width={maxBarWidth}
+                x={5}
+                y={barY}
+              />
+              {thresholds.enabled && (
+                <Thresholds
+                  barHeight={realBarHeight}
+                  hideTooltip={hideTooltip}
+                  isSmall={isSmall}
+                  showTooltip={showTooltip}
+                  size={size}
+                  thresholds={thresholds}
+                  xScale={xScale}
+                />
+              )}
+            </Group.Group>
+          </svg>
+        </MuiTooltip>
+      </Box>
+    </div>
+  );
+};
+
+export default ResponsiveSingleBar;

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

@@ -0,0 +1,121 @@
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+import dataLastWeek from '../mockedData/lastWeek.json';
+
+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/SingleBar/SingleBar.stories.tsx

@@ -0,0 +1,232 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../mockedData/lastWeek.json';
+
+import { SingleBar } from '.';
+
+const meta: Meta<typeof SingleBar> = {
+  component: SingleBar
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleBar>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ height: '500px', width: '500px' }}>
+    <SingleBar {...props} />
+  </div>
+);
+
+const SmallTemplate = (props): JSX.Element => (
+  <div style={{ height: '130px', width: '130px' }}>
+    <SingleBar {...props} />
+  </div>
+);
+
+export const success: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.35
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const disabled: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.35
+        }
+      ],
+      enabled: false,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const criticalLowerThanWarning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.13
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const rangeThresholds: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical 1',
+          value: 0.5
+        },
+        {
+          label: 'Critical 2',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning 1',
+          value: 0.13
+        },
+        {
+          label: 'Warning 2',
+          value: 0.3
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: false,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const Small: Story = {
+  args: {
+    data: dataLastWeek,
+    size: 'small',
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const smallDisplay: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: SmallTemplate
+};

package/src/Graph/SingleBar/SingleBar.tsx

@@ -0,0 +1,25 @@
+import { ParentSize } from '../..';
+
+import ResponsiveSingleBar from './ResponsiveSingleBar';
+import { SingleBarProps } from './models';
+
+const SingleBar = ({ data, ...props }: SingleBarProps): JSX.Element | null => {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <ResponsiveSingleBar
+          {...props}
+          data={data}
+          height={height}
+          width={width}
+        />
+      )}
+    </ParentSize>
+  );
+};
+
+export default SingleBar;

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -0,0 +1,99 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { margins } from '../common/margins';
+
+import { groupMargin } from './Thresholds';
+
+export const barHeights = {
+  medium: 72,
+  small: 22
+};
+export const margin = 40;
+
+const lineMargins = {
+  medium: 10,
+  small: 5
+};
+
+interface Props {
+  barHeight: number;
+  hideTooltip: () => void;
+  isSmall: boolean;
+  label: string;
+  showTooltip: (args) => void;
+  size: 'small' | 'medium';
+  thresholdType: string;
+  value: number;
+  xScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  xScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip,
+  size,
+  barHeight,
+  isSmall
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = xScale(value) || 0;
+
+  const lineMargin = lineMargins[size];
+
+  const onMouseEnter = (): void =>
+    showTooltip({
+      tooltipData: label
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray="6, 6"
+        strokeWidth={2}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin + 6
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? barHeight + groupMargin - lineMargin + margins.top - 2
+            : barHeight + groupMargin + lineMargin + 2 * margins.top
+        }
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin + 5
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? barHeight + groupMargin - lineMargin + margins.top + 5
+            : barHeight + groupMargin + lineMargin + 2 * margins.top
+        }
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};