@centreon/ui 24.5.8 → 24.5.9

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -1,9 +1,10 @@
 import { Threshold } from '@visx/threshold';
 
 import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
 
 interface Props {
-  curve: 'linear' | 'natural' | 'step';
+  curve: CurveType;
   fillAboveArea: string;
   fillBelowArea: string;
   fillOpacity?: number;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -5,13 +5,14 @@ import { useTheme } from '@mui/material/styles';
 
 import { adjustGraphData } from '../../../helpers/index';
 import { PatternOrientation } from '../../../models';
+import { CurveType } from '../models';
 import { LineChartData } from '../../../../common/models';
 
 import BasicThreshold from './BasicThreshold';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props {
-  curve: 'linear' | 'natural' | 'step';
+  curve: CurveType;
   data: LineChartData;
   graphHeight: number;
   id: string;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx

@@ -4,11 +4,12 @@ import { LinePath } from '@visx/shape';
 import { useTheme } from '@mui/material/styles';
 
 import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 
 interface Props {
-  curve: 'linear' | 'natural' | 'step';
+  curve: CurveType;
   getX: (timeValue: TimeValue) => number;
   getY0Variation: (timeValue: TimeValue) => number;
   getY1Variation: (timeValue: TimeValue) => number;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -7,6 +7,7 @@ import {
   VariationThreshold
 } from '../../../models';
 import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';
@@ -16,7 +17,7 @@ import { WrapperThresholdLinesModel } from './models';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {
-  curve: 'linear' | 'natural' | 'step';
+  curve: CurveType;
   graphHeight: number;
   timeSeries: Array<TimeValue>;
 }

package/src/Graph/LineChart/BasicComponents/Lines/index.tsx

@@ -23,9 +23,10 @@ import {
   canDisplayThreshold,
   requiredNumberLinesThreshold
 } from './Threshold/models';
+import { CurveType } from './models';
 
 interface Props extends GlobalAreaLines {
-  curve: 'linear' | 'step' | 'natural';
+  curve: CurveType;
   displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;

package/src/Graph/LineChart/BasicComponents/Lines/models.ts

@@ -1,4 +1,5 @@
 import { ScaleLinear } from 'd3-scale';
+import { curveBasis } from '@visx/curve';
 
 import { Line, TimeValue } from '../../../common/timeSeries/models';
 import { LineChartData } from '../../../common/models';
@@ -40,3 +41,5 @@ export interface Shape {
   areaStackedLines: AreaStackedLines;
   areaThreshold: AreaThreshold;
 }
+
+export type CurveType = typeof curveBasis;

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -63,10 +63,7 @@ const LegendHeader = ({
         placement="top"
       >
         <div className={classes.markerAndLegendName}>
-          <div
-            data-icon
-            className={cx(classes.icon, { [classes.disabled]: disabled })}
-          />
+          <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
           <EllipsisTypography
             className={cx(classes.text, classes.legendName)}
             data-mode={

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

@@ -3,7 +3,6 @@ import { LineChartData } from '../common/models';
 import dataLastDay from './mockedData/lastDay.json';
 import dataLastDayWithNullValues from './mockedData/lastDayWithNullValues.json';
 import dataLastDayWithIncompleteValues from './mockedData/lastDayWithIncompleteValues.json';
-import dataCurvesWithSameColor from './mockedData/curvesWithSameColor.json';
 import { args as argumentsData } from './helpers/doc';
 
 import WrapperLineChart from '.';
@@ -89,56 +88,4 @@ describe('Line chart', () => {
       cy.makeSnapshot();
     });
   });
-
-  it('displays the curves with different shades when curves have same color', () => {
-    initialize(dataCurvesWithSameColor);
-
-    cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
-      .find('[data-icon="true"]')
-      .should('have.css', 'background-color', 'rgb(41, 175, 238)');
-    cy.findByLabelText('Centreon-Server_5: Round-Trip Average Time')
-      .find('[data-icon="true"]')
-      .should('have.css', 'background-color', 'rgb(83, 191, 241)');
-    cy.findByLabelText('Centreon-Server_4: Round-Trip Average Time')
-      .find('[data-icon="true"]')
-      .should('have.css', 'background-color', 'rgb(8, 34, 47)');
-    cy.findByLabelText('Centreon-Server_3: Round-Trip Average Time')
-      .find('[data-icon="true"]')
-      .should('have.css', 'background-color', 'rgb(16, 70, 95)');
-    cy.findByLabelText('Centreon-Server_2: Round-Trip Average Time')
-      .find('[data-icon="true"]')
-      .should('have.css', 'background-color', 'rgb(24, 105, 142)');
-    cy.findByLabelText('Centreon-Server_1: Round-Trip Average Time')
-      .find('[data-icon="true"]')
-      .should('have.css', 'background-color', 'rgb(32, 140, 190)');
-
-    cy.get('[data-metric="1"]').should(
-      'have.attr',
-      'stroke',
-      'rgb(41, 175, 238)'
-    );
-    cy.get('[data-metric="21"]').should(
-      'have.attr',
-      'stroke',
-      'rgb(32, 140, 190)'
-    );
-    cy.get('[data-metric="17"]').should(
-      'have.attr',
-      'stroke',
-      'rgb(24, 105, 142)'
-    );
-    cy.get('[data-metric="13"]').should(
-      'have.attr',
-      'stroke',
-      'rgb(16, 70, 95)'
-    );
-    cy.get('[data-metric="9"]').should('have.attr', 'stroke', 'rgb(8, 34, 47)');
-    cy.get('[data-metric="5"]').should(
-      'have.attr',
-      'stroke',
-      'rgb(83, 191, 241)'
-    );
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/LineChart/LineChart.tsx

@@ -30,6 +30,7 @@ import {
   LegendModel
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
+import { CurveType } from './BasicComponents/Lines/models';
 import Thresholds from './BasicComponents/Thresholds';
 import { legendWidth } from './Legend/Legend.styles';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
@@ -37,7 +38,7 @@ import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphVa
 const extraMargin = 10;
 
 interface Props extends LineChartProps {
-  curve: 'linear' | 'step' | 'natural';
+  curve: CurveType;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;

package/src/Graph/LineChart/common/index.ts

@@ -1,6 +1,3 @@
-import * as Curve from '@visx/curve';
-import { always, cond, equals } from 'ramda';
-
 import { alpha } from '@mui/material';
 
 const commonTickLabelProps = {
@@ -27,16 +24,6 @@ const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const maxLinesDisplayedLegend = 11;
 
-const getCurveFactory = (
-  curve: 'linear' | 'step' | 'natural'
-): typeof Curve.curveLinear => {
-  return cond([
-    [equals('linear'), always(Curve.curveLinear)],
-    [equals('step'), always(Curve.curveStep)],
-    [equals('natural'), always(Curve.curveCatmullRom)]
-  ])(curve);
-};
-
 export {
   commonTickLabelProps,
   margin,
@@ -44,6 +31,5 @@ export {
   dateFormat,
   timeFormat,
   dateTimeFormat,
-  maxLinesDisplayedLegend,
-  getCurveFactory
+  maxLinesDisplayedLegend
 };

package/src/Graph/LineChart/index.stories.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
+import { Curve } from '@visx/visx';
 
 import { Button } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -33,7 +34,6 @@ import dataLastMonth from './mockedData/lastMonth.json';
 import dataLastWeek from './mockedData/lastWeek.json';
 import dataZoomPreview from './mockedData/zoomPreview.json';
 import dataLastDay from './mockedData/lastDay.json';
-import dataCurvesSameColor from './mockedData/curvesWithSameColor.json';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
@@ -342,7 +342,7 @@ export const LineChartWithStepCurve: Story = {
   argTypes,
   args: {
     ...argumentsData,
-    curve: 'step'
+    curve: Curve.curveStep
   }
 };
 
@@ -354,7 +354,7 @@ export const LineChartWithTimePeriod: Story = {
     start: defaultStart
   },
   parameters: {
-    chromatic: { disableSnapshot: true }
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 
@@ -478,15 +478,3 @@ export const thresholdsRange: Story = {
     />
   )
 };
-
-export const LineChartWithSameColorCurves: Story = {
-  ...Template,
-  argTypes,
-  args: argumentsData,
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataCurvesSameColor as unknown as LineChartData}
-    />
-  )
-};

package/src/Graph/LineChart/index.tsx

@@ -1,5 +1,6 @@
 import { MutableRefObject, useRef } from 'react';
 
+import { Curve } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -16,13 +17,14 @@ import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
 import { GlobalAreaLines, LineChartProps, LegendModel } from './models';
 import useLineChartData from './useLineChartData';
+import { CurveType } from './BasicComponents/Lines/models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
 interface Props extends Partial<LineChartProps> {
-  curve?: 'linear' | 'step' | 'natural';
+  curve?: CurveType;
   data?: LineChartData;
   end: string;
   legend: LegendModel;
@@ -50,7 +52,7 @@ const WrapperLineChart = ({
   annotationEvent,
   legend,
   header,
-  curve = 'linear',
+  curve = Curve.curveLinear,
   thresholds,
   thresholdUnit,
   limitLegend

package/src/Graph/LineChart/useLineChartData.ts

@@ -1,20 +1,8 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useEffect, useState } from 'react';
 
-import {
-  compose,
-  flatten,
-  groupBy,
-  isNil,
-  lensPath,
-  pipe,
-  prop,
-  set,
-  sortBy,
-  toLower
-} from 'ramda';
+import { compose, prop, sortBy, toLower } from 'ramda';
 
 import { LineChartData } from '../common/models';
-import { emphasizeCurveColor } from '../common/utils';
 
 import { adjustGraphData } from './helpers';
 import { Data } from './models';
@@ -30,59 +18,32 @@ interface Props {
 }
 
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
-  const adjustedDataRef = useRef<Data>();
+  const [adjustedData, setAdjustedData] = useState<Data>();
 
-  const dataWithAdjustedMetricsColor = useMemo(() => {
-    if (isNil(data)) {
-      return data;
-    }
-    const metricsGroupedByColor = groupBy(
-      (metric) => metric.ds_data.ds_color_line
-    )(data?.metrics || []);
-
-    const newMetrics = Object.entries(metricsGroupedByColor).map(
-      ([color, value]) => {
-        return value?.map((metric, index) =>
-          set(
-            lensPath(['ds_data', 'ds_color_line']),
-            emphasizeCurveColor({ color, index }),
-            metric
-          )
-        );
-      }
-    );
-
-    const sortedMetrics = pipe(flatten, sortBy(prop('metric')))(newMetrics);
-
-    return {
-      ...data,
-      metrics: sortedMetrics
-    };
-  }, [data]);
-
-  const prepareData = useCallback((): void => {
-    if (isNil(dataWithAdjustedMetricsColor)) {
-      return;
-    }
-
-    const { timeSeries } = adjustGraphData(dataWithAdjustedMetricsColor);
-    const baseAxis = dataWithAdjustedMetricsColor.global.base;
-    const { title } = dataWithAdjustedMetricsColor.global;
+  const prepareData = (dataToAdjust: LineChartData): void => {
+    const { timeSeries } = adjustGraphData(dataToAdjust);
+    const baseAxis = dataToAdjust.global.base;
+    const { title } = dataToAdjust.global;
 
-    const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
+    const newLineData = adjustGraphData(dataToAdjust).lines;
     const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
 
-    adjustedDataRef.current = {
+    setAdjustedData({
       baseAxis,
       lines: sortedLines,
       timeSeries,
       title
-    };
-  }, [dataWithAdjustedMetricsColor, end, start]);
+    });
+  };
 
-  prepareData();
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    prepareData(data);
+  }, [end, start, data]);
 
-  return { adjustedData: adjustedDataRef.current };
+  return { adjustedData };
 };
 
 export default useGraphData;

package/src/Graph/PieChart/PieChart.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { ArcType } from './models';
-import ResponsivePie from './ResponsivePie';
+
+import { PieChart } from '.';
 
 const data = [
   { color: '#88B922', label: 'Ok', value: 148 },
@@ -17,20 +18,19 @@ const dataWithBigNumbers = [
   { color: '#FF6666', label: 'Down', value: 122222 }
 ];
 
-const meta: Meta<typeof ResponsivePie> = {
-  component: ResponsivePie,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  }
+const meta: Meta<typeof PieChart> = {
+  component: PieChart
 };
 
 export default meta;
-type Story = StoryObj<typeof ResponsivePie>;
+type Story = StoryObj<typeof PieChart>;
 
 const Template = (args): JSX.Element => {
-  return <ResponsivePie height={350} width={350} {...args} />;
+  return (
+    <div style={{ height: '350px', width: '350px' }}>
+      <PieChart {...args} />
+    </div>
+  );
 };
 
 export const Pie: Story = {
@@ -141,7 +141,11 @@ export const DonutWithTooltip: Story = {
 };
 
 const TemplateForSmallDimensions = (args): JSX.Element => {
-  return <ResponsivePie height={130} width={130} {...args} />;
+  return (
+    <div style={{ height: '130px', width: '130px' }}>
+      <PieChart {...args} />
+    </div>
+  );
 };
 
 export const PieWithSmallDimensions: Story = {

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -93,7 +93,7 @@ const ResponsivePie = ({
       <div
         className={classes.svgWrapper}
         style={{
-          minHeight: height,
+          height,
           width: svgWrapperWidth
         }}
       >

package/src/Graph/Tree/DescendantNodes.tsx

@@ -65,7 +65,6 @@ const DescendantNodes = <TData extends BaseProp>({
       <Group key={key} left={left} top={top}>
         <foreignObject
           height={nodeSize.height}
-          style={{ userSelect: 'none' }}
           width={nodeSize.width}
           x={-nodeSize.width / 2}
           y={-nodeSize.height / 2}

package/src/Graph/Tree/Links.tsx

@@ -1,10 +1,5 @@
-import {
-  LinkHorizontal,
-  LinkHorizontalStep,
-  LinkHorizontalLine
-} from '@visx/shape';
+import { LinkHorizontal } from '@visx/shape';
 import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
-import { always, cond, equals, T } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
@@ -14,12 +9,6 @@ interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;
 }
 
-const getLinkComponent = cond([
-  [equals('line'), always(LinkHorizontalLine)],
-  [equals('step'), always(LinkHorizontalStep)],
-  [T, always(LinkHorizontal)]
-]);
-
 const Links = <TData extends BaseProp>({
   links,
   treeLink
@@ -35,12 +24,10 @@ const Links = <TData extends BaseProp>({
       .descendants()
       .map((ancestor) => ancestor.data.data.id);
 
-    const LinkComponent = getLinkComponent(treeLink?.type);
-
     const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
 
     return (
-      <LinkComponent
+      <LinkHorizontal
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

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

@@ -168,28 +168,4 @@ describe('Complex data tree', () => {
 
     cy.makeSnapshot();
   });
-
-  it('displays the tree with step links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'step'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the tree with line links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'line'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/Tree/Tree.stories.tsx

@@ -82,21 +82,6 @@ export const WithDefaultExpandFilter: Story = {
   render: StandaloneTreeTemplate
 };
 
-export const WithStepLink: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData,
-    treeLink: {
-      type: 'step'
-    }
-  },
-  render: StandaloneTreeTemplate
-};
-
 export const WithCustomLinks: Story = {
   args: {
     children: SimpleContent,
@@ -110,8 +95,7 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
-      type: 'line'
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,8 +14,6 @@ export interface BaseProp {
   name: string;
 }
 
-export type Link = 'curve' | 'line' | 'step';
-
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -50,6 +48,5 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
-    type?: Link;
   };
 }

package/src/Graph/common/utils.ts

@@ -13,7 +13,7 @@ import {
 } from 'ramda';
 import numeral from 'numeral';
 
-import { darken, getLuminance, lighten, Theme } from '@mui/material';
+import { Theme } from '@mui/material';
 
 import { Thresholds } from './models';
 
@@ -92,51 +92,3 @@ export const getValueByUnit = ({
 
   return `${((value * 100) / total).toFixed(1)}%`;
 };
-
-interface NormalizeLevelProps {
-  factor: number;
-  level: number;
-}
-
-const normalizeLevel = ({ level, factor }: NormalizeLevelProps): number =>
-  (level * factor) / 10;
-
-interface EmphasizeCurveColorProps {
-  color: string;
-  index: number;
-}
-
-export const emphasizeCurveColor = ({
-  color,
-  index
-}: EmphasizeCurveColorProps): string => {
-  const totalLevels = 5;
-  const levels = [...Array(totalLevels).keys()];
-  const factor = 10 / totalLevels;
-
-  if (gte(getLuminance(color), 0.5)) {
-    if (gte(index, totalLevels * 2)) {
-      return darken(color, normalizeLevel({ factor, level: last(levels) }));
-    }
-    if (gte(index, totalLevels)) {
-      return darken(
-        color,
-        normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
-      );
-    }
-
-    return lighten(color, normalizeLevel({ factor, level: levels[index] }));
-  }
-
-  if (gte(index, totalLevels * 2)) {
-    return lighten(color, normalizeLevel({ factor, level: last(levels) }));
-  }
-  if (gte(index, totalLevels)) {
-    return lighten(
-      color,
-      normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
-    );
-  }
-
-  return darken(color, normalizeLevel({ factor, level: levels[index] }));
-};