@centreon/ui 24.7.6 → 24.7.7

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

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

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -0,0 +1,167 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../mockedData/lastWeek.json';
+
+import { Gauge } from './Gauge';
+
+const meta: Meta<typeof Gauge> = {
+  component: Gauge
+};
+
+export default meta;
+type Story = StoryObj<typeof Gauge>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ display: 'flex', flexDirection: 'row' }}>
+    <div style={{ height: '500px', width: '500px' }}>
+      <Gauge {...props} />
+    </div>
+    <div style={{ height: '100px', width: '120px' }}>
+      <Gauge {...props} />
+    </div>
+    <div style={{ height: '300px', width: '200px' }}>
+      <Gauge {...props} />
+    </div>
+  </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.6
+        }
+      ],
+      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 withCriticalLowerThanWarning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.13
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const withRangeThresholds: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.55
+        },
+        {
+          label: 'Critical',
+          value: 0.65
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        },
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

package/src/Graph/Gauge/Gauge.tsx

@@ -0,0 +1,41 @@
+import { ParentSize } from '../..';
+import { LineChartData, Thresholds } from '../common/models';
+import { getMetricWithLatestData } from '../common/timeSeries';
+import { Metric } from '../common/timeSeries/models';
+
+import ResponsiveGauge from './ResponsiveGauge';
+
+export interface Props {
+  baseColor?: string;
+  data?: LineChartData;
+  displayAsRaw?: boolean;
+  thresholds: Thresholds;
+}
+
+export const Gauge = ({
+  thresholds,
+  data,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element | null => {
+  if (!data) {
+    return null;
+  }
+
+  const metric = getMetricWithLatestData(data) as Metric;
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <ResponsiveGauge
+          baseColor={baseColor}
+          displayAsRaw={displayAsRaw}
+          height={height}
+          metric={metric}
+          thresholds={thresholds}
+          width={width}
+        />
+      )}
+    </ParentSize>
+  );
+};

package/src/Graph/Gauge/PieData.tsx

@@ -0,0 +1,68 @@
+import { scaleOrdinal } from '@visx/scale';
+import { Pie } from '@visx/shape';
+import { identity } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { getColorFromDataAndTresholds } from '../common/utils';
+
+import { thresholdThickness } from './Thresholds';
+import AnimatedPie from './AnimatedPie';
+import { GaugeProps } from './models';
+import { angles } from './utils';
+
+const dataThickness = 45;
+
+const PieData = ({
+  metric,
+  adaptedMaxValue,
+  thresholds,
+  radius,
+  baseColor
+}: Omit<
+  GaugeProps,
+  'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
+>): JSX.Element => {
+  const theme = useTheme();
+
+  const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
+  const pieColor = getColorFromDataAndTresholds({
+    baseColor,
+    data: metric.data[0],
+    theme,
+    thresholds
+  });
+
+  const getDataColor = scaleOrdinal({
+    domain: pieData,
+    range: [pieColor, 'transparent']
+  });
+
+  const dataThicknessFactor = radius / dataThickness / 3;
+  const thresholdThicknessFactor = radius / thresholdThickness / 15;
+
+  return (
+    <Pie
+      {...angles}
+      data={pieData}
+      innerRadius={radius - dataThickness * dataThicknessFactor}
+      outerRadius={
+        radius - thresholdThickness * thresholdThicknessFactor * 1.25
+      }
+      pieSortValues={() => -1}
+      pieValue={identity}
+    >
+      {(pie) => (
+        <AnimatedPie<number>
+          {...pie}
+          animate
+          getColor={(arc) => getDataColor(arc.data)}
+          getKey={(arc) => `${arc.data}`}
+          thresholds={thresholds}
+        />
+      )}
+    </Pie>
+  );
+};
+
+export default PieData;

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -0,0 +1,134 @@
+import { useRef } from 'react';
+
+import { Group } from '@visx/group';
+import { Tooltip } from '@visx/visx';
+import { flatten, head, pluck } from 'ramda';
+
+import { Box, useTheme } from '@mui/material';
+
+import { Metric } from '../common/timeSeries/models';
+import { formatMetricValueWithUnit } from '../common/timeSeries';
+import { getColorFromDataAndTresholds } from '../common/utils';
+import { margins } from '../common/margins';
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
+import { useTooltipStyles } from '../common/useTooltipStyles';
+
+import Thresholds from './Thresholds';
+import PieData from './PieData';
+import { GaugeProps } from './models';
+
+interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
+  displayAsRaw?: boolean;
+  height: number;
+  metric: Metric;
+  width: number;
+}
+
+const ResponsiveGauge = ({
+  width,
+  height,
+  thresholds,
+  metric,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element => {
+  const { classes } = useTooltipStyles();
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const theme = useTheme();
+
+  const { showTooltip, hideTooltip, tooltipOpen, tooltipData } =
+    Tooltip.useTooltip();
+
+  const innerWidth = width - margins.left - margins.right;
+  const innerHeight = height - margins.top - margins.bottom;
+  const centerY = innerHeight / 2;
+  const centerX = innerWidth / 2;
+  const baseSize = Math.min(width, height);
+  const heightOverWidthRatio = height / width;
+  const radius = baseSize / (heightOverWidthRatio > 0.9 ? 2 : 1.8);
+  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 pieColor = getColorFromDataAndTresholds({
+    baseColor,
+    data: metric.data[0],
+    theme,
+    thresholds
+  });
+
+  const gaugeValue = formatMetricValueWithUnit({
+    base: 1000,
+    isRaw: displayAsRaw,
+    unit: metric.unit,
+    value: metric.data[0]
+  });
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%'
+      }}
+    >
+      <MuiTooltip
+        classes={{
+          tooltip: classes.tooltip
+        }}
+        label={tooltipData}
+        open={thresholds.enabled && tooltipOpen}
+        placement="top"
+      >
+        <svg height={height} ref={svgRef} width={width}>
+          <Group
+            left={centerX + margins.left}
+            top={centerY + margins.top + baseSize / 8}
+          >
+            <Thresholds
+              adaptedMaxValue={adaptedMaxValue}
+              hideTooltip={hideTooltip}
+              metric={metric}
+              radius={radius}
+              showTooltip={showTooltip}
+              thresholds={thresholds}
+            />
+            <PieData
+              adaptedMaxValue={adaptedMaxValue}
+              baseColor={baseColor}
+              metric={metric}
+              radius={radius}
+              thresholds={thresholds}
+            />
+            <text
+              dominantBaseline="middle"
+              style={{
+                fill: pieColor,
+                ...theme.typography.h3,
+                fontSize:
+                  Math.min(width, height) / (gaugeValue?.length || 1) + 3
+              }}
+              textAnchor="middle"
+              x="0%"
+              y="0%"
+            >
+              {gaugeValue}
+            </text>
+          </Group>
+        </svg>
+      </MuiTooltip>
+    </Box>
+  );
+};
+
+export default ResponsiveGauge;

package/src/Graph/Gauge/Thresholds.tsx

@@ -0,0 +1,119 @@
+import { scaleOrdinal } from '@visx/scale';
+import { Pie } from '@visx/shape';
+import { equals, pluck } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import AnimatedPie from './AnimatedPie';
+import { GaugeProps } from './models';
+import { angles } from './utils';
+
+export const thresholdThickness = 12;
+
+const Thresholds = ({
+  thresholds,
+  radius,
+  adaptedMaxValue,
+  showTooltip,
+  hideTooltip,
+  metric
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
+  const theme = useTheme();
+
+  const criticalThresholdValues = pluck('value', thresholds.critical);
+  const warningThresholdValues = pluck('value', thresholds.warning);
+
+  const isCriticalLowerThanWarning =
+    criticalThresholdValues[0] < warningThresholdValues[0];
+
+  const criticalThreshold = isCriticalLowerThanWarning
+    ? [0, ...criticalThresholdValues, adaptedMaxValue]
+    : [...criticalThresholdValues, adaptedMaxValue];
+  const criticalThresholdArc = criticalThreshold.map((value, index) => {
+    return {
+      name: equals(1, index) ? 'critical' : `transparent-${index}-critical`,
+      value: value - (criticalThreshold[index - 1] || 0)
+    };
+  });
+  const criticalThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', criticalThresholdArc),
+    range: ['transparent', theme.palette.error.main, 'transparent']
+  });
+
+  const warningThreshold = isCriticalLowerThanWarning
+    ? [0, ...warningThresholdValues, adaptedMaxValue]
+    : [...warningThresholdValues, adaptedMaxValue];
+  const warningThresholdArc = warningThreshold.map((value, index) => {
+    return {
+      name: equals(1, index) ? 'warning' : `transparent-${index}-warning`,
+      value: value - (warningThreshold[index - 1] || 0)
+    };
+  });
+  const warningThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', warningThresholdArc),
+    range: ['transparent', theme.palette.warning.main, 'transparent']
+  });
+
+  const successThresholdArc = [adaptedMaxValue].map((value) => {
+    return {
+      name: 'success',
+      value
+    };
+  });
+  const successThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', successThresholdArc),
+    range: [theme.palette.success.main]
+  });
+
+  if (!thresholds.enabled) {
+    return null;
+  }
+
+  const arcs = [
+    {
+      thresholdArc: successThresholdArc,
+      thresholdScaleOrdinal: successThresholdScaleOrdinal
+    },
+    {
+      thresholdArc: warningThresholdArc,
+      thresholdScaleOrdinal: warningThresholdScaleOrdinal
+    },
+    {
+      thresholdArc: criticalThresholdArc,
+      thresholdScaleOrdinal: criticalThresholdScaleOrdinal
+    }
+  ];
+
+  const thresholdThicknessFactor = radius / thresholdThickness / 15;
+
+  return (
+    <>
+      {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
+        <Pie
+          {...angles}
+          data={thresholdArc}
+          innerRadius={radius - thresholdThickness * thresholdThicknessFactor}
+          key={`arc-${thresholdArc[0].name}`}
+          outerRadius={radius}
+          pieSortValues={() => -1}
+          pieValue={(d) => d.value}
+        >
+          {(pie) => (
+            <AnimatedPie<{ name: string; value: number }>
+              {...pie}
+              animate
+              getColor={(arc) => thresholdScaleOrdinal(arc.data.name)}
+              getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+              hideTooltip={hideTooltip}
+              metric={metric}
+              showTooltip={showTooltip}
+              thresholds={thresholds}
+            />
+          )}
+        </Pie>
+      ))}
+    </>
+  );
+};
+
+export default Thresholds;

package/src/Graph/Gauge/index.ts

@@ -0,0 +1 @@
+export { Gauge } from './Gauge';

package/src/Graph/Gauge/models.ts

@@ -0,0 +1,20 @@
+import { Thresholds } from '../common/models';
+import { Metric } from '../common/timeSeries/models';
+
+export interface GaugeProps {
+  adaptedMaxValue: number;
+  baseColor?: string;
+  height: number;
+  hideTooltip: () => void;
+  metric: Metric;
+  radius: number;
+  showTooltip: (args) => void;
+  thresholds: Thresholds;
+  width: number;
+}
+
+export enum ThresholdType {
+  Warning,
+  Error,
+  Success
+}

package/src/Graph/Gauge/utils.ts

@@ -0,0 +1,4 @@
+export const angles = {
+  endAngle: -(2 * Math.PI) / 3,
+  startAngle: (2 * Math.PI) / 3
+};