@centreon/ui 24.4.71 → 24.4.73

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,131 +0,0 @@
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { equals, pluck } from 'ramda';
-
-import { getValueByUnit } from '../common/utils';
-import { LegendScale } from '../Legend/models';
-
-import { BarType } from './models';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface useBarStackProps {
-  data: Array<BarType>;
-  height: number;
-  legendRef;
-  size: number;
-  titleRef;
-  unit?: 'percentage' | 'number';
-  variant?: 'vertical' | 'horizontal';
-  width: number;
-}
-interface useBarStackState {
-  barSize: Size;
-  colorScale;
-  input;
-  isVerticalBar: boolean;
-  keys: Array<string>;
-  legendScale: LegendScale;
-  svgContainerSize: Size;
-  svgWrapperWidth: number;
-  total: number;
-  xScale;
-  yScale;
-}
-
-const useResponsiveBarStack = ({
-  data,
-  variant,
-  height,
-  width,
-  unit = 'number',
-  titleRef,
-  legendRef,
-  size
-}: useBarStackProps): useBarStackState => {
-  const isVerticalBar = equals(variant, 'vertical');
-
-  const heightOfTitle = titleRef.current?.offsetHeight || 0;
-  const widthOfLegend = legendRef.current?.offsetWidth || 0;
-
-  const horizontalGap = widthOfLegend > 0 ? 12 : 0;
-  const verticalGap = heightOfTitle > 0 ? 8 : 0;
-
-  const svgWrapperWidth = isVerticalBar
-    ? size + 36
-    : width - widthOfLegend - horizontalGap;
-
-  const svgContainerSize = {
-    height: isVerticalBar ? height - heightOfTitle - verticalGap : size,
-    width: isVerticalBar ? size : width - widthOfLegend - horizontalGap
-  };
-
-  const barSize = {
-    height: svgContainerSize.height - 16,
-    width: svgContainerSize.width - 16
-  };
-
-  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
-
-  const yScale = isVerticalBar
-    ? scaleLinear({
-        domain: [0, total]
-      })
-    : scaleBand({
-        domain: [0, 0],
-        padding: 0
-      });
-
-  const xScale = isVerticalBar
-    ? scaleBand({
-        domain: [0, 0],
-        padding: 0
-      })
-    : scaleLinear({
-        domain: [0, total]
-      });
-
-  const keys = pluck('label', data);
-
-  const colorsRange = pluck('color', data);
-
-  const colorScale = scaleOrdinal({
-    domain: keys,
-    range: colorsRange
-  });
-
-  const legendScale = {
-    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
-    range: colorsRange
-  };
-
-  const xMax = barSize.width;
-  const yMax = barSize.height;
-
-  xScale.rangeRound([0, xMax]);
-  yScale.range([yMax, 0]);
-
-  const input = data.reduce((acc, { label, value }) => {
-    acc[label] = value;
-
-    return acc;
-  }, {});
-
-  return {
-    barSize,
-    colorScale,
-    input,
-    isVerticalBar,
-    keys,
-    legendScale,
-    svgContainerSize,
-    svgWrapperWidth,
-    total,
-    xScale,
-    yScale
-  };
-};
-
-export default useResponsiveBarStack;

package/src/Graph/Gauge/AnimatedPie.tsx

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

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

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

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

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