@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/Chart/Chart.stories.tsx

@@ -1,6 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
 import '../../ThemeProvider/tailwindcss.css';
 
 import { Button, Menu } from '@mui/material';
@@ -11,7 +10,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
 import TimePeriod from '../../TimePeriods';
-import { LineChartData } from '../common/models';
+import type { LineChartData } from '../common/models';
 import annotationData from '../mockedData/annotationData.json';
 import dataCurvesSameColor from '../mockedData/curvesWithSameColor.json';
 import exclusionPeriodFirstPeriod from '../mockedData/exclusionPeriodFirstPeriod.json';
@@ -29,7 +28,7 @@ import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMix
 import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
 import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 import dataZoomPreview from '../mockedData/zoomPreview.json';
-
+import WrapperChart from '.';
 import { dateTimeFormat } from './common';
 import {
   argTypes,
@@ -41,9 +40,7 @@ import {
   lastDayForwardDate,
   zoomPreviewDate
 } from './helpers/doc';
-import { Interval, ThresholdType, TooltipData } from './models';
-
-import WrapperChart from '.';
+import { type Interval, ThresholdType, type TooltipData } from './models';
 
 const meta: Meta<typeof WrapperChart> = {
   component: WrapperChart
@@ -116,7 +113,7 @@ const ExternalComponent = (tooltipData): JSX.Element => {
       })}
       <br />
       <br />
-      <button type="button" onClick={(): void => hideTooltip()}>
+      <button onClick={(): void => hideTooltip()} type="button">
         hide tooltip
       </button>
     </>
@@ -159,7 +156,7 @@ const TimePeriodSwitch = ({
 
   useEffect(() => {
     getDataSwitch?.(checked);
-  }, [checked]);
+  }, [checked, getDataSwitch]);
 
   return (
     <Switch
@@ -211,7 +208,7 @@ const LineChartAndTimePeriod = (args): JSX.Element => {
     if (start.includes(zoomPreviewDate)) {
       setCurrentData(dataZoomPreview as unknown as LineChartData);
     }
-  }, [start, end, adjustedTimePeriodInterval]);
+  }, [start, end]);
 
   const getInterval = (interval: Interval): void => {
     setAdjustedTimePeriodInterval(interval);
@@ -340,19 +337,19 @@ const LineChartWithCLS: Story = {
 
 export const LineChart: Story = {
   ...Template,
-  argTypes,
-  args: argumentsData
+  args: argumentsData,
+  argTypes
 };
 
 export const LineChartWithStepCurve: Story = {
   ...Template,
-  argTypes,
   args: {
     ...argumentsData,
     lineStyle: {
       curve: 'step'
     }
-  }
+  },
+  argTypes
 };
 
 export const LineChartWithTimePeriod: Story = {
@@ -395,7 +392,6 @@ export const withCLS: Story = {
 };
 
 export const withThresholds: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     thresholds: {
@@ -414,16 +410,15 @@ export const withThresholds: Story = {
       ]
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
 export const withThresholdsAndUnit: Story = {
-  argTypes,
   args: {
     ...argumentsData,
-    thresholdUnit: '%',
     thresholds: {
       critical: [
         {
@@ -438,18 +433,18 @@ export const withThresholdsAndUnit: Story = {
           value: 65
         }
       ]
-    }
+    },
+    thresholdUnit: '%'
   },
+  argTypes,
   render: (args) => (
     <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
 export const thresholdsRange: Story = {
-  argTypes,
   args: {
     ...argumentsData,
-    thresholdUnit: '%',
     thresholds: {
       critical: [
         {
@@ -472,8 +467,10 @@ export const thresholdsRange: Story = {
           value: 30
         }
       ]
-    }
+    },
+    thresholdUnit: '%'
   },
+  argTypes,
   render: (args) => (
     <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
@@ -481,8 +478,8 @@ export const thresholdsRange: Story = {
 
 export const LineChartWithSameColorCurves: Story = {
   ...Template,
-  argTypes,
   args: argumentsData,
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -492,20 +489,19 @@ export const LineChartWithSameColorCurves: Story = {
 };
 
 export const zeroCentered: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     axis: {
       isCenteredZero: true
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
 export const customLines: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     lineStyle: {
@@ -517,13 +513,13 @@ export const customLines: Story = {
       showPoints: true
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
 export const customLinesAndBars: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     barStyle: {
@@ -536,6 +532,7 @@ export const customLinesAndBars: Story = {
       showPoints: true
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -545,8 +542,8 @@ export const customLinesAndBars: Story = {
 };
 
 export const multipleUnits: Story = {
-  argTypes,
   args: argumentsData,
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -556,7 +553,6 @@ export const multipleUnits: Story = {
 };
 
 export const linesAndBars: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     lineStyle: {
@@ -565,6 +561,7 @@ export const linesAndBars: Story = {
       showPoints: true
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -574,7 +571,6 @@ export const linesAndBars: Story = {
 };
 
 export const linesAndBarsStacked: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     lineStyle: {
@@ -583,6 +579,7 @@ export const linesAndBarsStacked: Story = {
       showPoints: false
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -592,7 +589,6 @@ export const linesAndBarsStacked: Story = {
 };
 
 export const linesAndBarsMixed: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     lineStyle: {
@@ -601,6 +597,7 @@ export const linesAndBarsMixed: Story = {
       showPoints: false
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -610,7 +607,6 @@ export const linesAndBarsMixed: Story = {
 };
 
 export const linesAndBarsCenteredZero: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     axis: {
@@ -622,6 +618,7 @@ export const linesAndBarsCenteredZero: Story = {
       showPoints: true
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -631,7 +628,6 @@ export const linesAndBarsCenteredZero: Story = {
 };
 
 export const linesAndBarsStackedCenteredZero: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     axis: {
@@ -643,6 +639,7 @@ export const linesAndBarsStackedCenteredZero: Story = {
       showPoints: false
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -652,7 +649,6 @@ export const linesAndBarsStackedCenteredZero: Story = {
 };
 
 export const linesAndBarsMixedCenteredZero: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     axis: {
@@ -664,6 +660,7 @@ export const linesAndBarsMixedCenteredZero: Story = {
       showPoints: false
     }
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -694,24 +691,24 @@ const CustomYUnits = (props): JSX.Element => {
 };
 
 export const customYUnits: Story = {
-  argTypes,
   args: argumentsData,
+  argTypes,
   render: (args) => <CustomYUnits {...args} />
 };
 
 export const WithAdditionalLines: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     additionalLines: [
       {
-        yValue: 3,
-        text: 'my text',
         color: 'grey',
-        unit: '%'
+        text: 'my text',
+        unit: '%',
+        yValue: 3
       }
     ]
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -721,17 +718,17 @@ export const WithAdditionalLines: Story = {
 };
 
 export const linesAndBarsMinMax: Story = {
-  argTypes,
   args: {
     ...argumentsData,
-    min: 10,
-    max: 30,
     lineStyle: {
       curve: 'natural',
       lineWidth: 2,
       showPoints: true
-    }
+    },
+    max: 30,
+    min: 10
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -741,18 +738,18 @@ export const linesAndBarsMinMax: Story = {
 };
 
 export const linesAndBarsMinMaxForUnit: Story = {
-  argTypes,
   args: {
     ...argumentsData,
-    min: 10,
-    max: 30,
     boundariesUnit: '%',
     lineStyle: {
       curve: 'natural',
       lineWidth: 2,
       showPoints: true
-    }
+    },
+    max: 30,
+    min: 10
   },
+  argTypes,
   render: (args) => (
     <WrapperChart
       {...args}
@@ -774,8 +771,8 @@ const LegendSecondaryClick = (args) => {
       />
       <Menu
         anchorEl={anchor}
-        open={Boolean(anchor)}
         onClose={() => setAnchor(null)}
+        open={Boolean(anchor)}
       >
         menu
       </Menu>
@@ -784,8 +781,8 @@ const LegendSecondaryClick = (args) => {
 };
 
 export const withLegendSecondaryClick: Story = {
-  argTypes,
   args: argumentsData,
+  argTypes,
   render: (args) => (
     <LegendSecondaryClick
       {...args}
@@ -795,21 +792,17 @@ export const withLegendSecondaryClick: Story = {
 };
 
 export const stackedKey: Story = {
-  argTypes,
   args: {
     ...argumentsData,
     data: dataPingServiceLinesStackKeys
-  }
+  },
+  argTypes
 };
 
 export const WithControlledCalculations: Story = {
   ...Template,
-  argTypes,
   args: {
     ...argumentsData,
-    lineStyle: {
-      curve: 'step'
-    },
     legend: {
       mode: 'grid',
       placement: 'bottom',
@@ -818,6 +811,10 @@ export const WithControlledCalculations: Story = {
         max: true,
         min: false
       }
+    },
+    lineStyle: {
+      curve: 'step'
     }
-  }
+  },
+  argTypes
 };

package/src/Graph/Chart/Chart.styles.ts

@@ -7,7 +7,7 @@ export const useChartStyles = makeStyles()({
   tooltipChildren: { height: '100%', width: '100%' },
   wrapperContainer: {
     height: '100%',
-    width: '100%',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    width: '100%'
   }
 });