@centreon/ui 24.8.2 → 24.8.3

package/src/Graph/{LineChart/index.stories.tsx → Chart/Chart.stories.tsx}

@@ -22,6 +22,10 @@ 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 dataLastDayWithLotOfUnits from '../mockedData/lastDayWithLotOfUnits.json';
+import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
+import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
+import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
 
 import {
   argTypes,
@@ -36,14 +40,14 @@ import {
 import { dateTimeFormat } from './common';
 import { Interval, ThresholdType, TooltipData } from './models';
 
-import WrapperLineChart from './index';
+import WrapperChart from '.';
 
-const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart
+const meta: Meta<typeof WrapperChart> = {
+  component: WrapperChart
 };
 export default meta;
 
-type Story = StoryObj<typeof WrapperLineChart>;
+type Story = StoryObj<typeof WrapperChart>;
 
 interface Random {
   max: number;
@@ -73,7 +77,7 @@ const Threshold = (args): JSX.Element => {
         <Button onClick={handleClick}>change envelope size randomly</Button>
       </Tooltip>
 
-      <WrapperLineChart
+      <WrapperChart
         {...args}
         data={dataLastDayThreshold}
         shapeLines={{
@@ -128,7 +132,7 @@ const LineChartAndCLS = (args): JSX.Element => {
   }, []);
 
   return (
-    <WrapperLineChart
+    <WrapperChart
       {...args}
       data={data}
       loading={loading}
@@ -227,7 +231,7 @@ const LineChartAndTimePeriod = (args): JSX.Element => {
           <TimePeriodSwitch getDataSwitch={getDataSwitch} />
         }
       />
-      <WrapperLineChart
+      <WrapperChart
         data={currentData}
         {...args}
         annotationEvent={annotationEventData}
@@ -279,7 +283,7 @@ const LineChartAndExclusionPeriod = (args): JSX.Element => {
           second
         </Button>
       </ButtonGroup>
-      <WrapperLineChart
+      <WrapperChart
         {...args}
         data={dataLastDayThreshold as unknown as LineChartData}
         shapeLines={{
@@ -301,7 +305,7 @@ const LineChartAndExclusionPeriod = (args): JSX.Element => {
 
 const Template: Story = {
   render: (args) => (
-    <WrapperLineChart
+    <WrapperChart
       {...args}
       data={dataLastDayThreshold as unknown as LineChartData}
       shapeLines={{
@@ -408,10 +412,7 @@ export const withThresholds: Story = {
     }
   },
   render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
+    <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
@@ -437,10 +438,7 @@ export const withThresholdsAndUnit: Story = {
     }
   },
   render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
+    <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
@@ -474,15 +472,36 @@ export const thresholdsRange: Story = {
     }
   },
   render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
+    <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
   )
 };
 
 export const LineChartWithSameColorCurves: Story = {
   ...Template,
+  argTypes,
+  args: argumentsData,
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataCurvesSameColor as unknown as LineChartData}
+    />
+  )
+};
+
+export const zeroCentered: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    axis: {
+      isCenteredZero: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
+  )
+};
+
+export const customLines: Story = {
   argTypes,
   args: {
     ...argumentsData,
@@ -490,15 +509,189 @@ export const LineChartWithSameColorCurves: Story = {
       areaTransparency: 10,
       dashLength: 10,
       dashOffset: 10,
-      lineWidth: 9,
+      lineWidth: 3,
       showArea: true,
       showPoints: true
     }
   },
   render: (args) => (
-    <WrapperLineChart
+    <WrapperChart {...args} data={dataLastDay as unknown as LineChartData} />
+  )
+};
+
+export const customLinesAndBars: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    barStyle: {
+      opacity: 0.5,
+      radius: 0.5
+    },
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
       {...args}
-      data={dataCurvesSameColor as unknown as LineChartData}
+      data={dataPingServiceLinesBars as unknown as LineChartData}
+    />
+  )
+};
+
+export const multipleUnits: Story = {
+  argTypes,
+  args: argumentsData,
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataLastDayWithLotOfUnits as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBars: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBars as unknown as LineChartData}
     />
   )
 };
+
+export const linesAndBarsStacked: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: false
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsStacked as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBarsMixed: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: false
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBarsCenteredZero: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    axis: {
+      isCenteredZero: true
+    },
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBars as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBarsStackedCenteredZero: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    axis: {
+      isCenteredZero: true
+    },
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: false
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsStacked as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBarsMixedCenteredZero: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    axis: {
+      isCenteredZero: true
+    },
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: false
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
+    />
+  )
+};
+const CustomYUnits = (props): JSX.Element => {
+  const [leftUnit, setLeftUnit] = useState('b');
+  const [rightUnit, setRightUnit] = useState('ms');
+
+  return (
+    <WrapperChart
+      {...props}
+      axis={{
+        axisYLeft: {
+          onUnitChange: setLeftUnit,
+          unit: leftUnit
+        },
+        axisYRight: {
+          onUnitChange: setRightUnit,
+          unit: rightUnit
+        }
+      }}
+      data={dataPingServiceLinesBars}
+    />
+  );
+};
+
+export const customYUnits: Story = {
+  argTypes,
+  args: argumentsData,
+  render: (args) => <CustomYUnits {...args} />
+};

package/src/Graph/{LineChart/LineChart.styles.ts → Chart/Chart.styles.ts}

@@ -1,5 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-export const useLineChartStyles = makeStyles()({
+export const useChartStyles = makeStyles()({
   tooltipChildren: { height: '100%', width: '100%' }
 });

package/src/Graph/{LineChart/LineChart.tsx → Chart/Chart.tsx}

@@ -1,25 +1,24 @@
 import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Tooltip } from '@visx/visx';
 import { equals, flatten, isNil, pluck, reject } from 'ramda';
+import { useAtom } from 'jotai';
 
-import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
+import { ClickAwayListener, Skeleton } from '@mui/material';
 
 import {
-  getLeftScale,
-  getRightScale,
   getUnits,
-  getXScale
+  getXScale,
+  getXScaleBand,
+  getYScalePerUnit
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { Thresholds as ThresholdsModel } from '../common/models';
-import { Tooltip as MuiTooltip } from '../../components/Tooltip';
-import { useTooltipStyles } from '../common/useTooltipStyles';
 import BaseChart from '../common/BaseChart/BaseChart';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import Thresholds from '../common/Thresholds/Thresholds';
 import { useDeepCompare } from '../../utils';
+import BarGroup from '../BarChart/BarGroup';
 
 import Lines from './BasicComponents/Lines';
 import {
@@ -33,9 +32,10 @@ import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import { margin } from './common';
 import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
-import { useIntersection } from './useLineChartIntersection';
+import { useIntersection } from './useChartIntersection';
+import { useChartStyles } from './Chart.styles';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
-import { useLineChartStyles } from './LineChart.styles';
+import { thresholdTooltipAtom } from './graphAtoms';
 
 interface Props extends LineChartProps {
   graphData: Data;
@@ -47,11 +47,6 @@ interface Props extends LineChartProps {
   thresholds?: ThresholdsModel;
 }
 
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
 const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
   if (!displayThreshold) {
     return lines;
@@ -69,7 +64,7 @@ const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
   return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
 };
 
-const LineChart = ({
+const Chart = ({
   graphData,
   height = 500,
   width,
@@ -85,14 +80,15 @@ const LineChart = ({
   graphRef,
   header,
   lineStyle,
+  barStyle = {
+    opacity: 1,
+    radius: 0.2
+  },
   thresholds,
   thresholdUnit,
   limitLegend
 }: Props): JSX.Element => {
-  const { classes } = useLineChartStyles();
-  const { classes: tooltipClasses, cx } = useTooltipStyles();
-
-  const theme = useTheme();
+  const { classes } = useChartStyles();
 
   const { title, timeSeries, baseAxis, lines } = graphData;
 
@@ -101,23 +97,23 @@ const LineChart = ({
   );
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
-  const { isInViewport } = useIntersection({ element: graphRef?.current });
+  const [thresholdTooltip, setThresholdTooltip] = useAtom(thresholdTooltipAtom);
 
-  const {
-    tooltipOpen: thresholdTooltipOpen,
-    tooltipLeft: thresholdTooltipLeft,
-    tooltipTop: thresholdTooltipTop,
-    tooltipData: thresholdTooltipData,
-    hideTooltip: hideThresholdTooltip,
-    showTooltip: showThresholdTooltip
-  } = Tooltip.useTooltip();
+  const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const thresholdValues = flatten([
     pluck('value', thresholds?.warning || []),
     pluck('value', thresholds?.critical || [])
   ]);
 
-  const [, secondUnit] = getUnits(linesGraph);
+  const displayedLines = useMemo(
+    () => linesGraph.filter(({ display }) => display),
+    [linesGraph]
+  );
+  const [firstUnit, secondUnit] = useMemo(
+    () => getUnits(displayedLines),
+    [displayedLines]
+  );
 
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
@@ -137,56 +133,57 @@ const LineChart = ({
     [timeSeries, graphWidth]
   );
 
-  const displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
-    [linesGraph]
+  const xScaleBand = useMemo(
+    () =>
+      getXScaleBand({
+        dataTime: timeSeries,
+        valueWidth: graphWidth
+      }),
+    [timeSeries, graphWidth, graphHeight]
   );
 
-  const leftScale = useMemo(
+  const yScalesPerUnit = useMemo(
     () =>
-      getLeftScale({
-        dataLines: displayedLines,
+      getYScalePerUnit({
+        dataLines: linesGraph,
         dataTimeSeries: timeSeries,
         isCenteredZero: axis?.isCenteredZero,
         scale: axis?.scale,
         scaleLogarithmicBase: axis?.scaleLogarithmicBase,
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - 35
+        valueGraphHeight: graphHeight - margin.bottom
       }),
     [
-      displayedLines,
+      linesGraph,
       timeSeries,
       graphHeight,
       thresholdValues,
+      thresholds?.enabled,
       axis?.isCenteredZero,
       axis?.scale,
       axis?.scaleLogarithmicBase
     ]
   );
 
-  const rightScale = useMemo(
+  const leftScale = yScalesPerUnit[axis?.axisYLeft?.unit ?? firstUnit];
+  const rightScale = yScalesPerUnit[axis?.axisYRight?.unit ?? secondUnit];
+
+  const linesDisplayedAsLine = useMemo(
     () =>
-      getRightScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        isCenteredZero: axis?.isCenteredZero,
-        scale: axis?.scale,
-        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - 35
-      }),
-    [
-      timeSeries,
-      displayedLines,
-      graphHeight,
-      axis?.isCenteredZero,
-      axis?.scale,
-      axis?.scaleLogarithmicBase
-    ]
+      displayedLines.filter(
+        ({ displayAs }) => isNil(displayAs) || equals(displayAs, 'line')
+      ),
+    [displayedLines]
+  );
+
+  const linesDisplayedAsBar = useMemo(
+    () => displayedLines.filter(({ displayAs }) => equals(displayAs, 'bar')),
+    [displayedLines]
   );
 
+  const allUnits = getUnits(linesGraph);
+
   useEffect(
     () => {
       setLinesGraph(
@@ -241,26 +238,14 @@ const LineChart = ({
           setLines={setLinesGraph}
           title={title}
         >
-          <MuiTooltip
-            classes={{
-              tooltip: cx(
-                tooltipClasses.tooltip,
-                tooltipClasses.tooltipDisablePadding
-              )
-            }}
-            placement="top-start"
-            title={
-              equals('hidden', tooltip?.mode) ? null : (
-                <GraphValueTooltip
-                  base={baseAxis}
-                  isSingleMode={equals('single', tooltip?.mode)}
-                  sortOrder={tooltip?.sortOrder}
-                />
-              )
-            }
+          <GraphValueTooltip
+            baseAxis={baseAxis}
+            thresholdTooltip={thresholdTooltip}
+            tooltip={tooltip}
           >
             <div className={classes.tooltipChildren}>
               <ChartSvgWrapper
+                allUnits={allUnits}
                 axis={axis}
                 base={baseAxis}
                 displayedLines={displayedLines}
@@ -275,24 +260,35 @@ const LineChart = ({
                 xScale={xScale}
               >
                 <>
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={false}
+                    lines={linesDisplayedAsBar}
+                    orientation="horizontal"
+                    size={graphHeight - margin.top - 5}
+                    timeSeries={timeSeries}
+                    xScale={xScaleBand}
+                    yScalesPerUnit={yScalesPerUnit}
+                  />
                   <Lines
                     areaTransparency={lineStyle?.areaTransparency}
                     curve={lineStyle?.curve || 'linear'}
                     dashLength={lineStyle?.dashLength}
                     dashOffset={lineStyle?.dashOffset}
                     displayAnchor={displayAnchor}
-                    displayedLines={displayedLines}
+                    displayedLines={linesDisplayedAsLine}
                     dotOffset={lineStyle?.dotOffset}
                     graphSvgRef={graphSvgRef}
                     height={graphHeight - margin.top}
-                    leftScale={leftScale}
                     lineWidth={lineStyle?.lineWidth}
-                    rightScale={rightScale}
+                    scale={axis?.scale}
+                    scaleLogarithmicBase={axis?.scaleLogarithmicBase}
                     showArea={lineStyle?.showArea}
                     showPoints={lineStyle?.showPoints}
                     timeSeries={timeSeries}
                     width={graphWidth}
                     xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
                     {...shapeLines}
                   />
                   <InteractionWithGraph
@@ -301,11 +297,10 @@ const LineChart = ({
                       graphHeight,
                       graphSvgRef,
                       graphWidth,
-                      leftScale,
-                      lines: linesGraph,
-                      rightScale,
+                      lines: displayedLines,
                       timeSeries,
-                      xScale
+                      xScale,
+                      yScalesPerUnit
                     }}
                     timeShiftZonesData={{
                       ...timeShiftZones,
@@ -316,38 +311,27 @@ const LineChart = ({
                   {thresholds?.enabled && (
                     <Thresholds
                       displayedLines={displayedLines}
-                      hideTooltip={hideThresholdTooltip}
-                      leftScale={leftScale}
-                      rightScale={rightScale}
-                      showTooltip={showThresholdTooltip}
+                      hideTooltip={() => setThresholdTooltip(null)}
+                      showTooltip={({ tooltipData: thresholdLabel }) =>
+                        setThresholdTooltip({
+                          thresholdLabel
+                        })
+                      }
                       thresholdUnit={thresholdUnit}
                       thresholds={thresholds as ThresholdsModel}
                       width={graphWidth}
+                      yScalesPerUnit={yScalesPerUnit}
                     />
                   )}
                 </>
               </ChartSvgWrapper>
             </div>
-          </MuiTooltip>
+          </GraphValueTooltip>
         </BaseChart>
         {displayTooltip && <GraphTooltip {...tooltip} {...graphTooltipData} />}
-        <Fade in={thresholdTooltipOpen}>
-          <Tooltip.Tooltip
-            left={thresholdTooltipLeft}
-            style={{
-              ...baseStyles,
-              backgroundColor: theme.palette.background.paper,
-              color: theme.palette.text.primary,
-              transform: `translate(${graphWidth / 2}px, -10px)`
-            }}
-            top={thresholdTooltipTop}
-          >
-            {thresholdTooltipData}
-          </Tooltip.Tooltip>
-        </Fade>
       </>
     </ClickAwayListener>
   );
 };
 
-export default LineChart;
+export default Chart;

package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -22,10 +22,14 @@ export const getYAnchorPoint = ({
   timeSeries,
   yScale,
   metric_id
-}: GetYAnchorPoint): number => {
+}: GetYAnchorPoint): number | null => {
   const index = bisectDate(getDates(timeSeries), timeTick);
   const timeValue = timeSeries[index];
 
+  if (isNil(timeValue)) {
+    return null;
+  }
+
   return yScale(prop(metric_id, timeValue) as number);
 };
 

package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx

@@ -34,9 +34,14 @@ export const getYAnchorPoint = ({
   timeTick,
   stackValues,
   yScale
-}: GetYAnchorPoint): number => {
+}: GetYAnchorPoint): number | null => {
   const index = bisectDate(getStackedDates(stackValues), timeTick);
   const timeValue = stackValues[index];
+  const { key } = stackValues;
+
+  if (isNil(timeValue.data[key])) {
+    return null;
+  }
 
   return yScale(timeValue[1] as number);
 };