@centreon/ui 24.4.73 → 24.4.74

package/src/Graph/BarStack/useGraphAndLegend.ts

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { pluck } from 'ramda';
+
+import { BarType } from './models';
+
+interface UseGraphandLegendProps {
+  data: Array<BarType>;
+  height: number;
+  isVerticalBar: boolean;
+  total: number;
+  width: number;
+}
+
+interface UseGraphAndLegendState {
+  barStackData: Record<string, number>;
+  keys: Array<string>;
+  xScale;
+  yScale;
+}
+
+export const useGraphAndLegend = ({
+  data,
+  isVerticalBar,
+  total,
+  width,
+  height
+}: UseGraphandLegendProps): UseGraphAndLegendState => {
+  const dataWithNonEmptyValue = useMemo(
+    () => data.filter(({ value }) => value),
+    [data]
+  );
+
+  const keys = useMemo(
+    () => pluck('label', dataWithNonEmptyValue),
+    [dataWithNonEmptyValue]
+  );
+
+  const barStackData = useMemo(
+    () =>
+      dataWithNonEmptyValue.reduce((acc, { label, value }) => {
+        acc[label] = value;
+
+        return acc;
+      }, {}),
+    [dataWithNonEmptyValue]
+  );
+
+  const yScale = useMemo(
+    () =>
+      isVerticalBar
+        ? scaleLinear({
+            domain: [0, total],
+            range: [height, 0]
+          })
+        : scaleBand({
+            domain: [0, 0],
+            padding: 0,
+            range: [height, 0]
+          }),
+    [isVerticalBar, total, height]
+  );
+
+  const xScale = useMemo(
+    () =>
+      isVerticalBar
+        ? scaleBand({
+            domain: [0, 0],
+            padding: 0,
+            range: [0, width]
+          })
+        : scaleLinear({
+            domain: [0, total],
+            range: [0, width]
+          }),
+    [total, width, isVerticalBar]
+  );
+
+  return {
+    barStackData,
+    keys,
+    xScale,
+    yScale
+  };
+};

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+
+import { scaleOrdinal } from '@visx/scale';
+import { equals, isNil, pluck } from 'ramda';
+
+import { LegendScale } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
+
+import { BarType } from './models';
+
+interface UseBarStackProps {
+  data: Array<BarType>;
+  height: number;
+  legendDirection?: 'column' | 'row';
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+  width: number;
+}
+
+interface UseBarStackState {
+  colorScale;
+  formattedLegendDirection: 'column' | 'row';
+  isSmall: boolean;
+  isVerticalBar: boolean;
+  legendScale: LegendScale;
+  titleVariant: 'xs' | 'sm' | 'md';
+  total: number;
+}
+
+const useResponsiveBarStack = ({
+  data,
+  variant,
+  height,
+  width,
+  unit = 'number',
+  legendDirection
+}: UseBarStackProps): UseBarStackState => {
+  const total = useMemo(
+    () => Math.floor(data.reduce((acc, { value }) => acc + value, 0)),
+    [data]
+  );
+
+  const isVerticalBar = useMemo(() => equals(variant, 'vertical'), [variant]);
+
+  const isSmall = useMemo(
+    () => Math.floor(height) < 90,
+    [isVerticalBar, height]
+  );
+
+  const titleVariant = useMemo(() => {
+    if (width <= 105) {
+      return 'xs';
+    }
+
+    if (width <= 150 || isSmall) {
+      return 'sm';
+    }
+
+    return 'md';
+  }, [isSmall, width]);
+
+  const keys = useMemo(() => pluck('label', data), [data]);
+
+  const colorsRange = useMemo(() => pluck('color', data), [data]);
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        domain: keys,
+        range: colorsRange
+      }),
+    [keys, colorsRange]
+  );
+
+  const legendScale = useMemo(
+    () => ({
+      domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
+      range: colorsRange
+    }),
+    [data, colorsRange]
+  );
+
+  const formattedLegendDirection = useMemo(() => {
+    if (!isNil(legendDirection)) {
+      return legendDirection;
+    }
+
+    if (equals(variant, 'horizontal')) {
+      return 'row';
+    }
+
+    return 'column';
+  }, [legendDirection, variant]);
+
+  return {
+    colorScale,
+    formattedLegendDirection,
+    isSmall,
+    isVerticalBar,
+    legendScale,
+    titleVariant,
+    total
+  };
+};
+
+export default useResponsiveBarStack;

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -0,0 +1,102 @@
+import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
+import { useTransition, to, animated } from '@react-spring/web';
+import { equals, includes, isNil, pluck } from 'ramda';
+
+import { Typography } from '@mui/material';
+
+import { Thresholds } from '../common/models';
+
+type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
+
+const fromLeaveTransition = ({ endAngle }): AnimatedStyles => ({
+  endAngle,
+  opacity: 0,
+  startAngle: -(Math.PI / 2)
+});
+const enterUpdateTransition = <T,>({
+  startAngle,
+  endAngle
+}: PieArcDatum<T>): AnimatedStyles => ({
+  endAngle,
+  opacity: 1,
+  startAngle
+});
+
+type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
+  animate?: boolean;
+  getColor: (d: PieArcDatum<Datum>) => string;
+  getKey: (d: PieArcDatum<Datum>) => string;
+  hideTooltip?: () => void;
+  showTooltip?: (args) => void;
+  thresholds: Thresholds;
+};
+
+const AnimatedPie = <Datum,>({
+  animate,
+  arcs,
+  path,
+  getKey,
+  getColor,
+  showTooltip,
+  hideTooltip,
+  thresholds
+}: AnimatedPieProps<Datum>): JSX.Element | null => {
+  const transitions = useTransition?.<PieArcDatum<Datum>, AnimatedStyles>(
+    arcs,
+    {
+      enter: enterUpdateTransition,
+      from: animate ? fromLeaveTransition : enterUpdateTransition,
+      keys: getKey,
+      leave: animate ? fromLeaveTransition : enterUpdateTransition,
+      update: enterUpdateTransition
+    }
+  );
+
+  if (isNil(useTransition)) {
+    return null;
+  }
+
+  return transitions((props, arc, { key }) => (
+    <g key={key}>
+      <animated.path
+        d={to([props.startAngle, props.endAngle], (startAngle, endAngle) =>
+          path({
+            ...arc,
+            endAngle,
+            startAngle
+          })
+        )}
+        data-testid={`${arc.data?.value || arc.data}-arc`}
+        display={
+          includes('transparent', arc.data?.name || '') ? 'none' : 'inline'
+        }
+        fill={getColor(arc)}
+        onMouseEnter={(event) => {
+          const thresholdType = arc.data?.name as string;
+
+          if (equals(thresholdType, 'success')) {
+            return;
+          }
+
+          showTooltip?.({
+            tooltipData: (
+              <div>
+                {pluck(
+                  'label',
+                  thresholds[thresholdType as 'warning' | 'critical']
+                ).map((label) => (
+                  <Typography key={label}>{label}</Typography>
+                ))}
+              </div>
+            ),
+            tooltipLeft: event.clientX,
+            tooltipTop: event.clientY
+          });
+        }}
+        onMouseLeave={() => hideTooltip?.()}
+      />
+    </g>
+  ));
+};
+
+export default AnimatedPie;

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

@@ -0,0 +1,102 @@
+import dataLastWeek from '../LineChart/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,159 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../LineChart/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={{ height: '500px', width: '500px' }}>
+    <Gauge {...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.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,63 @@
+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';
+
+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']
+  });
+
+  return (
+    <Pie
+      data={pieData}
+      endAngle={-Math.PI / 2}
+      innerRadius={radius - dataThickness}
+      outerRadius={radius - thresholdThickness * 1.3}
+      pieSortValues={() => -1}
+      pieValue={identity}
+      startAngle={Math.PI / 2}
+    >
+      {(pie) => (
+        <AnimatedPie<number>
+          {...pie}
+          animate
+          getColor={(arc) => getDataColor(arc.data)}
+          getKey={(arc) => `${arc.data}`}
+          thresholds={thresholds}
+        />
+      )}
+    </Pie>
+  );
+};
+
+export default PieData;