@centreon/ui 24.6.0 → 24.6.2

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -7,7 +7,8 @@ import {
   isNil,
   prop,
   reverse,
-  sortBy
+  sortBy,
+  T
 } from 'ramda';
 
 import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
@@ -29,7 +30,7 @@ export const useGraphValueTooltip = ({
   const { toDate, toTime } = useLocaleDateTimeFormat();
   const graphTooltipData = useAtomValue(graphTooltipDataAtom);
 
-  if (isNil(graphTooltipData)) {
+  if (isNil(graphTooltipData) || isNil(graphTooltipData.metrics)) {
     return null;
   }
 
@@ -48,7 +49,8 @@ export const useGraphValueTooltip = ({
     [
       equals('descending'),
       always(reverse(sortBy(prop('value'), filteredMetrics)))
-    ]
+    ],
+    [T, always(filteredMetrics)]
   ])(sortOrder);
 
   return {

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -16,7 +16,7 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       color: theme.typography.body1.color
     },
     item: {
-      width: 'max-content'
+      width: '100%'
     },
     items: {
       '&[data-as-list="true"]': {
@@ -93,7 +93,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       width: theme.spacing(1.5)
     },
     legendName: {
-      maxWidth: '75%'
+      maxWidth: '95%'
     },
     legendNameSide: {
       maxWidth: '95%'
@@ -113,11 +113,18 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
     text: {
       fontSize: '0.75rem',
       fontWeight: theme.typography.fontWeightMedium,
-      lineHeight: 1
+      lineHeight: 1,
+      maxWidth: '250px'
     },
     textList: {
       fontSize: '0.75rem',
       fontWeight: theme.typography.fontWeightMedium
+    },
+    textListBottom: {
+      width: 'auto'
+    },
+    textListSide: {
+      width: '95%'
     }
   })
 );

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

@@ -77,7 +77,9 @@ const LegendHeader = ({
             className={cx(
               classes.text,
               !isListMode && classes.legendName,
-              !isListMode && isDisplayedOnSide && classes.legendNameSide
+              !isListMode && isDisplayedOnSide && classes.legendNameSide,
+              isListMode && !isDisplayedOnSide && classes.textListBottom,
+              isListMode && isDisplayedOnSide && classes.textListSide
             )}
             data-mode={
               value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal

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

@@ -1,6 +1,6 @@
 import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
 
-import { equals, prop, slice, sortBy } from 'ramda';
+import { equals, lt, prop, slice, sortBy } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -81,14 +81,30 @@ const MainLegend = ({
       ? LegendDisplayMode.Compact
       : LegendDisplayMode.Normal;
 
+  const legendMaxHeight = useMemo(() => {
+    if (!isListMode || !equals(placement, 'bottom')) {
+      return 'none';
+    }
+
+    if (lt(height || 0, 220)) {
+      return 40;
+    }
+
+    return 90;
+  }, [height, isListMode, placement]);
+
+  const overflow = equals(legendMaxHeight, 'none') ? 'hidden' : 'auto';
+
   return (
     <div
       className={classes.legend}
       data-display-side={!equals(placement, 'bottom')}
       style={{
         height: !equals(placement, 'bottom')
-          ? height - margin.top / 2
-          : undefined
+          ? (height || 0) - margin.top / 2
+          : undefined,
+        maxHeight: legendMaxHeight,
+        overflow
       }}
     >
       <div

package/src/Graph/LineChart/LineChart.styles.ts

@@ -1,53 +1,10 @@
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles()((theme) => ({
-  container: {
-    '& .visx-axis-bottom': {
-      '& .visx-axis-tick': {
-        '& .visx-line': {
-          stroke: theme.palette.text.primary
-        },
-        text: {
-          fill: theme.palette.text.primary
-        }
-      }
-    },
-    '& .visx-axis-line': {
-      stroke: theme.palette.text.primary
-    },
-    '& .visx-axis-right': {
-      '& .visx-axis-tick': {
-        '& .visx-line': {
-          stroke: theme.palette.text.primary
-        }
-      }
-    },
-    '& .visx-columns': {
-      '& .visx-line': {
-        stroke: theme.palette.divider
-      }
-    },
-    '& .visx-rows': {
-      '& .visx-line': {
-        stroke: theme.palette.divider
-      }
-    },
-    fill: theme.palette.text.primary,
-    position: 'relative'
-  },
-  graphValueTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3],
-    color: theme.palette.text.primary,
-    maxWidth: 'none',
-    padding: 0
-  },
+export const useLineChartStyles = makeStyles()({
   header: {
     display: 'grid',
     gridTemplateColumns: '0.4fr 1fr 0.4fr',
     width: '100%'
-  }
-}));
-
-export { useStyles };
+  },
+  tooltipChildren: { height: '100%', width: '100%' }
+});

package/src/Graph/LineChart/LineChart.tsx

@@ -1,15 +1,9 @@
 import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
-import { Group, Tooltip } from '@visx/visx';
-import { equals, flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
+import { Tooltip } from '@visx/visx';
+import { equals, flatten, isNil, pluck } from 'ramda';
 
-import {
-  ClickAwayListener,
-  Fade,
-  Skeleton,
-  Stack,
-  useTheme
-} from '@mui/material';
+import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
 import {
   getLeftScale,
@@ -20,26 +14,24 @@ import {
 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 Axes from './BasicComponents/Axes';
-import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
 import useFilterLines from './BasicComponents/useFilterLines';
-import { useStyles } from './LineChart.styles';
 import Header from './Header';
 import InteractionWithGraph from './InteractiveComponents';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
-import Legend from './Legend';
 import { margin } from './common';
 import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
 import { useIntersection } from './useLineChartIntersection';
 import Thresholds from './BasicComponents/Thresholds';
-import { legendWidth } from './Legend/Legend.styles';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
-
-const extraMargin = 10;
+import { useLineChartStyles } from './LineChart.styles';
 
 interface Props extends LineChartProps {
   graphData: Data;
@@ -76,7 +68,8 @@ const LineChart = ({
   thresholdUnit,
   limitLegend
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes } = useLineChartStyles();
+  const { classes: tooltipClasses, cx } = useTooltipStyles();
 
   const theme = useTheme();
 
@@ -85,8 +78,6 @@ const LineChart = ({
 
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
-  const legendRef = useRef<HTMLDivElement | null>(null);
-
   const {
     tooltipOpen: thresholdTooltipOpen,
     tooltipLeft: thresholdTooltipLeft,
@@ -103,38 +94,22 @@ const LineChart = ({
     pluck('value', thresholds?.critical || [])
   ]);
 
-  const { displayedLines, newLines } = useFilterLines({
+  const { displayedLines } = useFilterLines({
     displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
     lines,
     linesGraph,
     setLinesGraph
   });
 
-  const legendBoundingHeight =
-    !equals(legend?.display, false) &&
-    (isNil(legend?.placement) || equals(legend?.placement, 'bottom'))
-      ? legendRef.current?.getBoundingClientRect().height || 0
-      : 0;
-  const legendBoundingWidth =
-    !equals(legend?.display, false) &&
-    (equals(legend?.placement, 'left') || equals(legend?.placement, 'right'))
-      ? legendRef.current?.getBoundingClientRect().width || 0
-      : 0;
-
   const [, secondUnit] = getUnits(displayedLines);
 
-  const graphWidth =
-    width > 0
-      ? width -
-        margin.left -
-        (secondUnit ? margin.right : 8) -
-        extraMargin -
-        legendBoundingWidth
-      : 0;
-  const graphHeight =
-    (height || 0) > 0
-      ? (height || 0) - margin.top - 5 - legendBoundingHeight
-      : 0;
+  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
+    hasSecondUnit: Boolean(secondUnit),
+    height,
+    legendDisplay: legend?.display,
+    legendPlacement: legend?.placement,
+    width
+  });
 
   const xScale = useMemo(
     () =>
@@ -199,20 +174,6 @@ const LineChart = ({
   const displayLegend = legend?.display ?? true;
   const displayTooltip = !isNil(tooltip?.renderComponent);
 
-  const legendItemsWidth = reduce(
-    (acc) => acc + legendWidth * 8 + 24,
-    0,
-    displayedLines
-  );
-
-  const displayLegendInBottom =
-    isNil(legend?.placement) || equals(legend?.placement, 'bottom');
-
-  const shouldDisplayLegendInCompactMode =
-    lte(graphWidth, 808) &&
-    gt(legendItemsWidth, graphWidth) &&
-    displayLegendInBottom;
-
   const showGridLines = useMemo(
     () => isNil(axis?.showGridLines) || axis?.showGridLines,
     [axis?.showGridLines]
@@ -232,170 +193,130 @@ const LineChart = ({
     <>
       <Header header={header} title={title} />
       <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-        <MuiTooltip
-          classes={{
-            tooltip: classes.graphValueTooltip
-          }}
-          placement="top-start"
-          title={
-            equals('hidden', tooltip?.mode) ? null : (
-              <GraphValueTooltip
-                base={baseAxis}
-                isSingleMode={equals('single', tooltip?.mode)}
-                sortOrder={tooltip?.sortOrder}
-              />
-            )
-          }
-        >
-          <div className={classes.container}>
-            <Stack
-              direction={
-                equals(legend?.placement, 'left') ? 'row' : 'row-reverse'
+        <>
+          <BaseChart
+            base={baseAxis}
+            graphWidth={graphWidth}
+            height={height}
+            legend={{
+              displayLegend,
+              mode: legend?.mode,
+              placement: legend?.placement,
+              renderExtraComponent: legend?.renderExtraComponent
+            }}
+            legendRef={legendRef}
+            limitLegend={limitLegend}
+            lines={displayedLines}
+            setLines={setLinesGraph}
+          >
+            <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}
+                  />
+                )
               }
             >
-              {displayLegend &&
-                (equals(legend?.placement, 'left') ||
-                  equals(legend?.placement, 'right')) && (
-                  <div ref={legendRef} style={{ maxWidth: '40%' }}>
-                    <Legend
-                      base={baseAxis}
-                      height={height}
-                      limitLegend={limitLegend}
-                      lines={newLines}
-                      mode={legend?.mode}
-                      placement="left"
-                      renderExtraComponent={legend?.renderExtraComponent}
-                      setLinesGraph={setLinesGraph}
-                      shouldDisplayLegendInCompactMode={
-                        shouldDisplayLegendInCompactMode
-                      }
-                      width={width}
-                    />
-                  </div>
-                )}
-              <svg
-                height={graphHeight + margin.top}
-                ref={graphSvgRef}
-                width="100%"
-              >
-                <Group.Group
-                  left={margin.left + extraMargin / 2}
-                  top={margin.top}
+              <div className={classes.tooltipChildren}>
+                <ChartSvgWrapper
+                  axis={axis}
+                  base={baseAxis}
+                  displayedLines={displayedLines}
+                  graphHeight={graphHeight}
+                  graphWidth={graphWidth}
+                  gridLinesType={axis?.gridLinesType}
+                  leftScale={leftScale}
+                  rightScale={rightScale}
+                  showGridLines={showGridLines}
+                  svgRef={graphSvgRef}
+                  timeSeries={timeSeries}
+                  xScale={xScale}
                 >
-                  {showGridLines && (
-                    <Grids
-                      gridLinesType={axis?.gridLinesType}
+                  <>
+                    <Lines
+                      areaTransparency={lineStyle?.areaTransparency}
+                      curve={lineStyle?.curve || 'linear'}
+                      dashLength={lineStyle?.dashLength}
+                      dashOffset={lineStyle?.dashOffset}
+                      displayAnchor={displayAnchor}
+                      displayedLines={displayedLines}
+                      dotOffset={lineStyle?.dotOffset}
+                      graphSvgRef={graphSvgRef}
                       height={graphHeight - margin.top}
                       leftScale={leftScale}
+                      lineWidth={lineStyle?.lineWidth}
+                      rightScale={rightScale}
+                      showArea={lineStyle?.showArea}
+                      showPoints={lineStyle?.showPoints}
+                      timeSeries={timeSeries}
                       width={graphWidth}
                       xScale={xScale}
+                      {...shapeLines}
                     />
-                  )}
-                  <Axes
-                    data={{
-                      baseAxis,
-                      lines: displayedLines,
-                      timeSeries,
-                      ...axis
-                    }}
-                    graphInterval={graphInterval}
-                    height={graphHeight - margin.top}
-                    leftScale={leftScale}
-                    rightScale={rightScale}
-                    width={graphWidth}
-                    xScale={xScale}
-                  />
-
-                  <Lines
-                    areaTransparency={lineStyle?.areaTransparency}
-                    curve={lineStyle?.curve || 'linear'}
-                    dashLength={lineStyle?.dashLength}
-                    dashOffset={lineStyle?.dashOffset}
-                    displayAnchor={displayAnchor}
-                    displayedLines={displayedLines}
-                    dotOffset={lineStyle?.dotOffset}
-                    graphSvgRef={graphSvgRef}
-                    height={graphHeight - margin.top}
-                    leftScale={leftScale}
-                    lineWidth={lineStyle?.lineWidth}
-                    rightScale={rightScale}
-                    showArea={lineStyle?.showArea}
-                    showPoints={lineStyle?.showPoints}
-                    timeSeries={timeSeries}
-                    width={graphWidth}
-                    xScale={xScale}
-                    {...shapeLines}
-                  />
-
-                  <InteractionWithGraph
-                    annotationData={{ ...annotationEvent }}
-                    commonData={{
-                      graphHeight,
-                      graphSvgRef,
-                      graphWidth,
-                      leftScale,
-                      lines: displayedLines,
-                      rightScale,
-                      timeSeries,
-                      xScale
-                    }}
-                    timeShiftZonesData={{
-                      ...timeShiftZones,
-                      graphInterval
-                    }}
-                    zoomData={{ ...zoomPreview }}
-                  />
-
-                  {thresholds?.enabled && (
-                    <Thresholds
-                      displayedLines={displayedLines}
-                      hideTooltip={hideThresholdTooltip}
-                      leftScale={leftScale}
-                      rightScale={rightScale}
-                      showTooltip={showThresholdTooltip}
-                      thresholdUnit={thresholdUnit}
-                      thresholds={thresholds as ThresholdsModel}
-                      width={graphWidth}
+                    <InteractionWithGraph
+                      annotationData={{ ...annotationEvent }}
+                      commonData={{
+                        graphHeight,
+                        graphSvgRef,
+                        graphWidth,
+                        leftScale,
+                        lines: displayedLines,
+                        rightScale,
+                        timeSeries,
+                        xScale
+                      }}
+                      timeShiftZonesData={{
+                        ...timeShiftZones,
+                        graphInterval
+                      }}
+                      zoomData={{ ...zoomPreview }}
                     />
-                  )}
-                </Group.Group>
-              </svg>
-            </Stack>
-            {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>
-          </div>
-        </MuiTooltip>
+                    {thresholds?.enabled && (
+                      <Thresholds
+                        displayedLines={displayedLines}
+                        hideTooltip={hideThresholdTooltip}
+                        leftScale={leftScale}
+                        rightScale={rightScale}
+                        showTooltip={showThresholdTooltip}
+                        thresholdUnit={thresholdUnit}
+                        thresholds={thresholds as ThresholdsModel}
+                        width={graphWidth}
+                      />
+                    )}
+                  </>
+                </ChartSvgWrapper>
+              </div>
+            </MuiTooltip>
+          </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>
-      {displayLegend && displayLegendInBottom && (
-        <div ref={legendRef}>
-          <Legend
-            base={baseAxis}
-            height={height}
-            limitLegend={limitLegend}
-            lines={newLines}
-            mode={legend?.mode}
-            placement="bottom"
-            renderExtraComponent={legend?.renderExtraComponent}
-            setLinesGraph={setLinesGraph}
-            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-          />
-        </div>
-      )}
     </>
   );
 };

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

@@ -342,7 +342,9 @@ export const LineChartWithStepCurve: Story = {
   argTypes,
   args: {
     ...argumentsData,
-    curve: 'step'
+    lineStyle: {
+      curve: 'step'
+    }
   }
 };
 

package/src/Graph/LineChart/models.ts

@@ -4,12 +4,8 @@ import { ScaleLinear } from 'd3-scale';
 
 import { Line, TimeValue } from '../common/timeSeries/models';
 import { LineChartData } from '../common/models';
+import { AxisX, Axis as AxisYLeft, AxisYRight } from '../common/Axes/models';
 
-import {
-  AxisX,
-  Axis as AxisYLeft,
-  AxisYRight
-} from './BasicComponents/Axes/models';
 import {
   AreaRegularLines,
   AreaStackedLines

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

@@ -147,7 +147,7 @@ describe('Pie chart', () => {
       width: '120px'
     });
 
-    cy.get('[data-variant="donut"]').should('have.css', 'width', '100px');
+    cy.get('[data-variant="donut"]').should('have.css', 'width', '76px');
 
     cy.makeSnapshot();
   });

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

@@ -144,6 +144,10 @@ const TemplateForSmallDimensions = (args): JSX.Element => {
   return <ResponsivePie height={130} width={130} {...args} />;
 };
 
+const SmallTemplate = (args): JSX.Element => {
+  return <ResponsivePie height={100} width={100} {...args} />;
+};
+
 export const PieWithSmallDimensions: Story = {
   args: {
     data,
@@ -188,3 +192,13 @@ export const donutWithOneNoZeroValue: Story = {
   },
   render: Template
 };
+
+export const smallDisplay: Story = {
+  args: {
+    data,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: SmallTemplate
+};