@centreon/ui 24.6.2 → 24.6.4

package/src/Graph/LineChart/LineChart.tsx

@@ -18,18 +18,17 @@ 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 Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
 import useFilterLines from './BasicComponents/useFilterLines';
-import Header from './Header';
 import InteractionWithGraph from './InteractiveComponents';
 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 Thresholds from './BasicComponents/Thresholds';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 import { useLineChartStyles } from './LineChart.styles';
 
@@ -190,134 +189,131 @@ const LineChart = ({
   }
 
   return (
-    <>
-      <Header header={header} title={title} />
-      <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-        <>
-          <BaseChart
-            base={baseAxis}
-            graphWidth={graphWidth}
-            height={height}
-            legend={{
-              displayLegend,
-              mode: legend?.mode,
-              placement: legend?.placement,
-              renderExtraComponent: legend?.renderExtraComponent
+    <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
+      <>
+        <BaseChart
+          base={baseAxis}
+          graphWidth={graphWidth}
+          header={header}
+          height={height}
+          legend={{
+            displayLegend,
+            mode: legend?.mode,
+            placement: legend?.placement,
+            renderExtraComponent: legend?.renderExtraComponent
+          }}
+          legendRef={legendRef}
+          limitLegend={limitLegend}
+          lines={displayedLines}
+          setLines={setLinesGraph}
+          title={title}
+        >
+          <MuiTooltip
+            classes={{
+              tooltip: cx(
+                tooltipClasses.tooltip,
+                tooltipClasses.tooltipDisablePadding
+              )
             }}
-            legendRef={legendRef}
-            limitLegend={limitLegend}
-            lines={displayedLines}
-            setLines={setLinesGraph}
+            placement="top-start"
+            title={
+              equals('hidden', tooltip?.mode) ? null : (
+                <GraphValueTooltip
+                  base={baseAxis}
+                  isSingleMode={equals('single', tooltip?.mode)}
+                  sortOrder={tooltip?.sortOrder}
+                />
+              )
+            }
           >
-            <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}
+            <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}
+              >
+                <>
+                  <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}
                   />
-                )
-              }
-            >
-              <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}
-                >
-                  <>
-                    <Lines
-                      areaTransparency={lineStyle?.areaTransparency}
-                      curve={lineStyle?.curve || 'linear'}
-                      dashLength={lineStyle?.dashLength}
-                      dashOffset={lineStyle?.dashOffset}
-                      displayAnchor={displayAnchor}
+                  <InteractionWithGraph
+                    annotationData={{ ...annotationEvent }}
+                    commonData={{
+                      graphHeight,
+                      graphSvgRef,
+                      graphWidth,
+                      leftScale,
+                      lines: displayedLines,
+                      rightScale,
+                      timeSeries,
+                      xScale
+                    }}
+                    timeShiftZonesData={{
+                      ...timeShiftZones,
+                      graphInterval
+                    }}
+                    zoomData={{ ...zoomPreview }}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
                       displayedLines={displayedLines}
-                      dotOffset={lineStyle?.dotOffset}
-                      graphSvgRef={graphSvgRef}
-                      height={graphHeight - margin.top}
+                      hideTooltip={hideThresholdTooltip}
                       leftScale={leftScale}
-                      lineWidth={lineStyle?.lineWidth}
                       rightScale={rightScale}
-                      showArea={lineStyle?.showArea}
-                      showPoints={lineStyle?.showPoints}
-                      timeSeries={timeSeries}
+                      showTooltip={showThresholdTooltip}
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
                       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}
-                      />
-                    )}
-                  </>
-                </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>
-    </>
+                  )}
+                </>
+              </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>
   );
 };
 

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

@@ -11,8 +11,18 @@ import { useLocaleDateTimeFormat } from '@centreon/ui';
 
 import TimePeriod from '../../TimePeriods';
 import { LineChartData } from '../common/models';
+import annotationData from '../mockedData/annotationData.json';
+import exclusionPeriodFirstPeriod from '../mockedData/exclusionPeriodFirstPeriod.json';
+import exclusionPeriodSecondPeriod from '../mockedData/exclusionPeriodSecondPeriod.json';
+import exclusionPeriodThirdPeriod from '../mockedData/exclusionPeriodThirdPeriod.json';
+import dataLastDayForword from '../mockedData/lastDayForward.json';
+import dataLastDayThreshold from '../mockedData/lastDayThreshold.json';
+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 { dateTimeFormat } from './common';
 import {
   argTypes,
   args as argumentsData,
@@ -23,17 +33,7 @@ import {
   lastDayForwardDate,
   zoomPreviewDate
 } from './helpers/doc';
-import annotationData from './mockedData/annotationData.json';
-import exclusionPeriodFirstPeriod from './mockedData/exclusionPeriodFirstPeriod.json';
-import exclusionPeriodSecondPeriod from './mockedData/exclusionPeriodSecondPeriod.json';
-import exclusionPeriodThirdPeriod from './mockedData/exclusionPeriodThirdPeriod.json';
-import dataLastDayForword from './mockedData/lastDayForward.json';
-import dataLastDayThreshold from './mockedData/lastDayThreshold.json';
-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 { dateTimeFormat } from './common';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';

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

@@ -1,4 +1,4 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 import {
   criticalThresholds,
   rangedThresholds,

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 
 import { SingleBar } from '.';
 

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

@@ -1,4 +1,4 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 import {
   criticalThresholds,
   rangedThresholds,

package/src/Graph/Text/Text.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 
 import { Text } from '.';
 

package/src/Graph/common/Axes/index.tsx

@@ -1,6 +1,6 @@
 import { Axis } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
+import { equals, isNil } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
@@ -15,6 +15,7 @@ interface Props {
   data: Data;
   height: number;
   leftScale: ScaleLinear<number, number>;
+  orientation: 'horizontal' | 'vertical';
   rightScale: ScaleLinear<number, number>;
   width: number;
   xScale: ScaleLinear<number, number>;
@@ -26,7 +27,8 @@ const Axes = ({
   data,
   rightScale,
   leftScale,
-  xScale
+  xScale,
+  orientation
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
   const { lines, showBorder, yAxisTickLabelRotation } = data;
@@ -50,47 +52,72 @@ const Axes = ({
   const hasMoreThanTwoUnits = !isNil(thirdUnit);
   const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
 
+  const isHorizontal = equals(orientation, 'horizontal');
+
+  const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
+  const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
+  const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;
+
   return (
     <g>
-      <Axis.AxisBottom
+      <AxisBottom
         numTicks={xTickCount}
         scale={xScale}
         strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
         tickFormat={formatAxisTick}
-        top={height - 5}
+        tickLabelProps={() => ({
+          ...axisLeft.tickLabelProps(),
+          dx: isHorizontal ? 16 : -4
+        })}
+        top={isHorizontal ? height - 5 : 0}
       />
 
-      {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
+      {axisLeft.displayUnit && (
+        <UnitLabel
+          unit={firstUnit}
+          x={isHorizontal ? -8 : width + 8}
+          y={isHorizontal ? 16 : 0}
+        />
+      )}
 
-      <Axis.AxisLeft
+      <AxisLeft
         numTicks={axisLeft?.numTicks}
-        orientation="left"
         scale={leftScale}
         strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
         tickFormat={axisLeft.tickFormat}
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
-          angle: yAxisTickLabelRotation
+          angle: yAxisTickLabelRotation,
+          dx: isHorizontal ? -8 : 2,
+          dy: isHorizontal ? 4 : -4
         })}
         tickLength={2}
       />
 
       {displayAxisRight && (
-        <Axis.AxisRight
-          left={width}
+        <AxisRight
+          left={isHorizontal ? width : 0}
           numTicks={axisRight?.numTicks}
-          orientation="right"
           scale={rightScale}
           strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
           tickFormat={axisRight.tickFormat}
           tickLabelProps={() => ({
             ...axisRight.tickLabelProps(),
-            angle: yAxisTickLabelRotation
+            angle: yAxisTickLabelRotation,
+            dx: isHorizontal ? 4 : -8,
+            dy: 4
           })}
           tickLength={2}
+          top={isHorizontal ? 0 : height}
+        />
+      )}
+      {axisRight.displayUnit && (
+        <UnitLabel
+          unit={secondUnit}
+          x={width + 8}
+          y={isHorizontal ? 16 : -(height + 8)}
         />
       )}
-      {axisRight.displayUnit && <UnitLabel unit={secondUnit} x={width} />}
     </g>
   );
 };

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -15,22 +15,29 @@ import { legendWidth } from '../../LineChart/Legend/Legend.styles';
 import { Line } from '../timeSeries/models';
 
 import { useBaseChartStyles } from './useBaseChartStyles';
+import Header from './Header';
+import { LineChartHeader } from './Header/models';
 
 interface Props {
   base?: number;
   children: JSX.Element;
   graphWidth: number;
+  header?: LineChartHeader;
   height: number | null;
+  isHorizontal?: boolean;
   legend: {
     displayLegend: boolean;
-    mode: 'grid' | 'list';
-    placement: string;
+    mode?: 'grid' | 'list';
+    placement?: 'left' | 'right' | 'bottom';
     renderExtraComponent?: ReactNode;
   };
   legendRef: MutableRefObject<HTMLDivElement | null>;
   limitLegend?: number | false;
   lines: Array<Line>;
-  setLines: Dispatch<SetStateAction<Array<Line> | null>>;
+  setLines:
+    | Dispatch<SetStateAction<Array<Line> | null>>
+    | Dispatch<SetStateAction<Array<Line>>>;
+  title: string;
 }
 
 const BaseChart = ({
@@ -42,9 +49,12 @@ const BaseChart = ({
   limitLegend = false,
   setLines,
   children,
-  legendRef
+  legendRef,
+  title,
+  header,
+  isHorizontal = true
 }: Props): JSX.Element => {
-  const { classes } = useBaseChartStyles();
+  const { classes, cx } = useBaseChartStyles();
 
   const legendItemsWidth = useMemo(
     () => reduce((acc) => acc + legendWidth * 8 + 24, 0, lines),
@@ -66,6 +76,7 @@ const BaseChart = ({
 
   return (
     <>
+      <Header header={header} title={title} />
       <div className={classes.container}>
         <Stack
           direction={equals(legend?.placement, 'left') ? 'row' : 'row-reverse'}
@@ -73,7 +84,15 @@ const BaseChart = ({
           {legend.displayLegend &&
             (equals(legend?.placement, 'left') ||
               equals(legend?.placement, 'right')) && (
-              <div ref={legendRef} style={{ maxWidth: '60%' }}>
+              <div
+                className={cx(
+                  classes.legendContainer,
+                  equals(legend?.placement, 'right') &&
+                    !isHorizontal &&
+                    classes.legendContainerVerticalSide
+                )}
+                ref={legendRef}
+              >
                 <Legend
                   base={base}
                   height={height}

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -1,6 +1,7 @@
 import { MutableRefObject } from 'react';
 
 import { Group } from '@visx/visx';
+import { equals } from 'ramda';
 
 import { margin } from '../../LineChart/common';
 import Grids from '../Grids';
@@ -19,6 +20,7 @@ interface Props {
   graphWidth: number;
   gridLinesType?: string;
   leftScale;
+  orientation?: 'horizontal' | 'vertical';
   rightScale;
   showGridLines: boolean;
   svgRef: MutableRefObject<SVGSVGElement | null>;
@@ -39,18 +41,26 @@ const ChartSvgWrapper = ({
   displayedLines,
   timeSeries,
   axis,
-  children
+  children,
+  orientation = 'horizontal'
 }: Props): JSX.Element => {
+  const isHorizontal = equals(orientation, 'horizontal');
+
   return (
-    <svg height={graphHeight + margin.top} ref={svgRef} width="100%">
+    <svg
+      aria-label="graph"
+      height={graphHeight + margin.top}
+      ref={svgRef}
+      width="100%"
+    >
       <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
         {showGridLines && (
           <Grids
             gridLinesType={gridLinesType}
             height={graphHeight - margin.top}
-            leftScale={leftScale}
+            leftScale={isHorizontal ? leftScale : xScale}
             width={graphWidth}
-            xScale={xScale}
+            xScale={isHorizontal ? xScale : leftScale}
           />
         )}
         <Axes
@@ -62,6 +72,7 @@ const ChartSvgWrapper = ({
           }}
           height={graphHeight - margin.top}
           leftScale={leftScale}
+          orientation={orientation}
           rightScale={rightScale}
           width={graphWidth}
           xScale={xScale}

package/src/Graph/{LineChart → common/BaseChart}/Header/index.tsx

@@ -2,8 +2,8 @@ import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { useLineChartStyles } from '../LineChart.styles';
-import { LineChartHeader } from '../models';
+import { ussHeaderChartStyles } from './useHeaderStyles';
+import { LineChartHeader } from './models';
 
 interface Props {
   header?: LineChartHeader;
@@ -11,7 +11,7 @@ interface Props {
 }
 
 const Header = ({ title, header }: Props): JSX.Element => {
-  const { classes } = useLineChartStyles();
+  const { classes } = ussHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;
 

package/src/Graph/common/BaseChart/Header/models.ts

@@ -0,0 +1,4 @@
+export interface LineChartHeader {
+  displayTitle?: boolean;
+  extraComponent?: ReactNode;
+}

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const ussHeaderChartStyles = makeStyles()({
+  header: {
+    display: 'grid',
+    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    width: '100%'
+  }
+});

package/src/Graph/common/BaseChart/useBaseChartStyles.ts

@@ -34,5 +34,11 @@ export const useBaseChartStyles = makeStyles()((theme) => ({
     },
     fill: theme.palette.text.primary,
     position: 'relative'
+  },
+  legendContainer: {
+    maxWidth: '60%'
+  },
+  legendContainerVerticalSide: {
+    marginRight: theme.spacing(6)
   }
 }));