@centreon/ui 24.6.0 → 24.6.2

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

@@ -0,0 +1,114 @@
+import {
+  Dispatch,
+  MutableRefObject,
+  ReactNode,
+  SetStateAction,
+  useMemo
+} from 'react';
+
+import { equals, gt, isNil, lte, reduce } from 'ramda';
+
+import { Stack } from '@mui/material';
+
+import Legend from '../../LineChart/Legend';
+import { legendWidth } from '../../LineChart/Legend/Legend.styles';
+import { Line } from '../timeSeries/models';
+
+import { useBaseChartStyles } from './useBaseChartStyles';
+
+interface Props {
+  base?: number;
+  children: JSX.Element;
+  graphWidth: number;
+  height: number | null;
+  legend: {
+    displayLegend: boolean;
+    mode: 'grid' | 'list';
+    placement: string;
+    renderExtraComponent?: ReactNode;
+  };
+  legendRef: MutableRefObject<HTMLDivElement | null>;
+  limitLegend?: number | false;
+  lines: Array<Line>;
+  setLines: Dispatch<SetStateAction<Array<Line> | null>>;
+}
+
+const BaseChart = ({
+  legend,
+  base = 1000,
+  height,
+  graphWidth,
+  lines,
+  limitLegend = false,
+  setLines,
+  children,
+  legendRef
+}: Props): JSX.Element => {
+  const { classes } = useBaseChartStyles();
+
+  const legendItemsWidth = useMemo(
+    () => reduce((acc) => acc + legendWidth * 8 + 24, 0, lines),
+    [lines]
+  );
+
+  const displayLegendInBottom = useMemo(
+    () => isNil(legend.placement) || equals(legend.placement, 'bottom'),
+    [legend.placement]
+  );
+
+  const shouldDisplayLegendInCompactMode = useMemo(
+    () =>
+      lte(graphWidth, 808) &&
+      gt(legendItemsWidth, graphWidth) &&
+      displayLegendInBottom,
+    [graphWidth, displayLegendInBottom, legendItemsWidth]
+  );
+
+  return (
+    <>
+      <div className={classes.container}>
+        <Stack
+          direction={equals(legend?.placement, 'left') ? 'row' : 'row-reverse'}
+        >
+          {legend.displayLegend &&
+            (equals(legend?.placement, 'left') ||
+              equals(legend?.placement, 'right')) && (
+              <div ref={legendRef} style={{ maxWidth: '60%' }}>
+                <Legend
+                  base={base}
+                  height={height}
+                  limitLegend={limitLegend}
+                  lines={lines}
+                  mode={legend?.mode}
+                  placement="left"
+                  renderExtraComponent={legend?.renderExtraComponent}
+                  setLinesGraph={setLines}
+                  shouldDisplayLegendInCompactMode={
+                    shouldDisplayLegendInCompactMode
+                  }
+                />
+              </div>
+            )}
+          {children}
+        </Stack>
+      </div>
+      {legend.displayLegend && displayLegendInBottom && (
+        <div ref={legendRef}>
+          <Legend
+            base={base}
+            height={height}
+            limitLegend={limitLegend}
+            lines={lines}
+            mode={legend.mode}
+            placement="bottom"
+            renderExtraComponent={legend.renderExtraComponent}
+            setLinesGraph={setLines}
+            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BaseChart;

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

@@ -0,0 +1,75 @@
+import { MutableRefObject } from 'react';
+
+import { Group } from '@visx/visx';
+
+import { margin } from '../../LineChart/common';
+import Grids from '../Grids';
+import Axes from '../Axes';
+import { Line, TimeValue } from '../timeSeries/models';
+import { LineChartAxis } from '../../LineChart/models';
+
+import { extraMargin } from './useComputeBaseChartDimensions';
+
+interface Props {
+  axis?: LineChartAxis;
+  base?: number;
+  children: JSX.Element;
+  displayedLines: Array<Line>;
+  graphHeight: number;
+  graphWidth: number;
+  gridLinesType?: string;
+  leftScale;
+  rightScale;
+  showGridLines: boolean;
+  svgRef: MutableRefObject<SVGSVGElement | null>;
+  timeSeries: Array<TimeValue>;
+  xScale;
+}
+
+const ChartSvgWrapper = ({
+  svgRef,
+  graphHeight,
+  leftScale,
+  rightScale,
+  xScale,
+  graphWidth,
+  showGridLines,
+  gridLinesType,
+  base = 1000,
+  displayedLines,
+  timeSeries,
+  axis,
+  children
+}: Props): JSX.Element => {
+  return (
+    <svg 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}
+            width={graphWidth}
+            xScale={xScale}
+          />
+        )}
+        <Axes
+          data={{
+            baseAxis: base,
+            lines: displayedLines,
+            timeSeries,
+            ...axis
+          }}
+          height={graphHeight - margin.top}
+          leftScale={leftScale}
+          rightScale={rightScale}
+          width={graphWidth}
+          xScale={xScale}
+        />
+        {children}
+      </Group.Group>
+    </svg>
+  );
+};
+
+export default ChartSvgWrapper;

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

@@ -0,0 +1,38 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBaseChartStyles = 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'
+  }
+}));

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

@@ -0,0 +1,61 @@
+import { MutableRefObject, useRef } from 'react';
+
+import { equals, isNil } from 'ramda';
+
+import { margin } from '../../LineChart/common';
+
+export const extraMargin = 10;
+
+interface UseComputeBaseChartDimensionsProps {
+  hasSecondUnit?: boolean;
+  height: number | null;
+  legendDisplay?: boolean;
+  legendPlacement?: string;
+  width: number;
+}
+
+interface UseComputeBaseChartDimensionsState {
+  graphHeight: number;
+  graphWidth: number;
+  legendRef: MutableRefObject<HTMLDivElement | null>;
+}
+
+export const useComputeBaseChartDimensions = ({
+  width,
+  height,
+  legendDisplay,
+  legendPlacement,
+  hasSecondUnit
+}: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
+  const legendRef = useRef<HTMLDivElement | null>(null);
+
+  const legendBoundingHeight =
+    !equals(legendDisplay, false) &&
+    (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
+      ? legendRef.current?.getBoundingClientRect().height || 0
+      : 0;
+  const legendBoundingWidth =
+    !equals(legendDisplay, false) &&
+    (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
+      ? legendRef.current?.getBoundingClientRect().width || 0
+      : 0;
+
+  const graphWidth =
+    width > 0
+      ? width -
+        margin.left -
+        (hasSecondUnit ? margin.right : 8) -
+        extraMargin -
+        legendBoundingWidth
+      : 0;
+  const graphHeight =
+    (height || 0) > 0
+      ? (height || 0) - margin.top - 5 - legendBoundingHeight
+      : 0;
+
+  return {
+    graphHeight,
+    graphWidth,
+    legendRef
+  };
+};

package/src/Graph/{LineChart/BasicComponents → common}/Grids/index.tsx

@@ -4,7 +4,7 @@ import { Grid } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
 import { includes } from 'ramda';
 
-import { LineChartAxis } from '../../models';
+import { LineChartAxis } from '../../LineChart/models';
 
 interface Props extends Pick<LineChartAxis, 'gridLinesType'> {
   height: number;

package/src/Graph/common/useTooltipStyles.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTooltipStyles = makeStyles()((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.caption.fontWeight,
+    maxWidth: 'none',
+    padding: theme.spacing(0.5, 1)
+  },
+  tooltipDisablePadding: {
+    padding: theme.spacing(0)
+  }
+}));

package/src/Graph/common/utils.ts

@@ -172,3 +172,9 @@ export const getStrokeDashArray = ({
 
 export const getPointRadius = (lineWidth?: number): number =>
   Math.max(Math.ceil((lineWidth ?? 2) * 1.2), 2);
+
+export const commonTickLabelProps = {
+  fontFamily: 'Roboto, sans-serif',
+  fontSize: 10,
+  textAnchor: 'middle'
+};

package/src/Typography/FluidTypography/index.tsx

@@ -1,6 +1,6 @@
 import { Typography, TypographyProps } from '@mui/material';
 
-type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
+type CustomTypographyProps = Pick<TypographyProps, 'variant' | 'sx'>;
 export interface FluidTypographyProps extends CustomTypographyProps {
   className?: string;
   containerClassName?: string;
@@ -17,7 +17,8 @@ const FluidTypography = ({
   containerClassName,
   min = '10px',
   max = '1000px',
-  pref = 19
+  pref = 19,
+  sx
 }: FluidTypographyProps): JSX.Element => {
   return (
     <div
@@ -31,7 +32,8 @@ const FluidTypography = ({
       <Typography
         className={className}
         sx={{
-          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`,
+          ...sx
         }}
         variant={variant}
       >