@centreon/ui 24.9.4 → 24.9.6

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

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

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

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

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

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