@centreon/ui 24.5.13 → 24.6.1

package/src/Graph/LineChart/LineChart.tsx

@@ -1,11 +1,22 @@
 import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
-import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
+import { equals, flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
 
-import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
+import {
+  ClickAwayListener,
+  Fade,
+  Skeleton,
+  Stack,
+  useTheme
+} from '@mui/material';
 
-import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
+import {
+  getLeftScale,
+  getRightScale,
+  getUnits,
+  getXScale
+} from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { Thresholds as ThresholdsModel } from '../common/models';
 import { Tooltip as MuiTooltip } from '../../components/Tooltip';
@@ -22,13 +33,7 @@ import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import Legend from './Legend';
 import { margin } from './common';
-import {
-  Data,
-  GlobalAreaLines,
-  GraphInterval,
-  LineChartProps,
-  LegendModel
-} from './models';
+import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
 import { useIntersection } from './useLineChartIntersection';
 import Thresholds from './BasicComponents/Thresholds';
 import { legendWidth } from './Legend/Legend.styles';
@@ -37,11 +42,9 @@ import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphVa
 const extraMargin = 10;
 
 interface Props extends LineChartProps {
-  curve: 'linear' | 'step' | 'natural';
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
-  legend?: LegendModel;
   limitLegend?: false | number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
@@ -68,7 +71,7 @@ const LineChart = ({
   legend,
   graphRef,
   header,
-  curve,
+  lineStyle,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -93,16 +96,6 @@ const LineChart = ({
     showTooltip: showThresholdTooltip
   } = Tooltip.useTooltip();
 
-  const graphWidth =
-    width > 0 ? width - margin.left - margin.right - extraMargin : 0;
-  const graphHeight =
-    (height || 0) > 0
-      ? (height || 0) -
-        margin.top -
-        5 -
-        (legendRef.current?.getBoundingClientRect().height || 0)
-      : 0;
-
   const { title, timeSeries, baseAxis, lines } = graphData;
 
   const thresholdValues = flatten([
@@ -117,6 +110,32 @@ const LineChart = ({
     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 xScale = useMemo(
     () =>
       getXScale({
@@ -131,11 +150,22 @@ const LineChart = ({
       getLeftScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
+        isCenteredZero: axis?.isCenteredZero,
+        scale: axis?.scale,
+        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight: graphHeight - 35
       }),
-    [displayedLines, timeSeries, graphHeight, thresholdValues]
+    [
+      displayedLines,
+      timeSeries,
+      graphHeight,
+      thresholdValues,
+      axis?.isCenteredZero,
+      axis?.scale,
+      axis?.scaleLogarithmicBase
+    ]
   );
 
   const rightScale = useMemo(
@@ -143,11 +173,21 @@ const LineChart = ({
       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]
+    [
+      timeSeries,
+      displayedLines,
+      graphHeight,
+      axis?.isCenteredZero,
+      axis?.scale,
+      axis?.scaleLogarithmicBase
+    ]
   );
 
   const graphTooltipData = useGraphTooltip({
@@ -165,8 +205,18 @@ const LineChart = ({
     displayedLines
   );
 
+  const displayLegendInBottom =
+    isNil(legend?.placement) || equals(legend?.placement, 'bottom');
+
   const shouldDisplayLegendInCompactMode =
-    lte(graphWidth, 808) && gt(legendItemsWidth, graphWidth);
+    lte(graphWidth, 808) &&
+    gt(legendItemsWidth, graphWidth) &&
+    displayLegendInBottom;
+
+  const showGridLines = useMemo(
+    () => isNil(axis?.showGridLines) || axis?.showGridLines,
+    [axis?.showGridLines]
+  );
 
   if (!isInViewport) {
     return (
@@ -187,86 +237,130 @@ const LineChart = ({
             tooltip: classes.graphValueTooltip
           }}
           placement="top-start"
-          title={<GraphValueTooltip base={baseAxis} />}
+          title={
+            equals('hidden', tooltip?.mode) ? null : (
+              <GraphValueTooltip
+                base={baseAxis}
+                isSingleMode={equals('single', tooltip?.mode)}
+                sortOrder={tooltip?.sortOrder}
+              />
+            )
+          }
         >
           <div className={classes.container}>
-            <svg
-              height={graphHeight + margin.top}
-              ref={graphSvgRef}
-              width="100%"
+            <Stack
+              direction={
+                equals(legend?.placement, 'left') ? 'row' : 'row-reverse'
+              }
             >
-              <Group.Group
-                left={margin.left + extraMargin / 2}
-                top={margin.top}
+              {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%"
               >
-                <Grids
-                  height={graphHeight - margin.top}
-                  leftScale={leftScale}
-                  width={graphWidth}
-                  xScale={xScale}
-                />
-                <Axes
-                  data={{
-                    baseAxis,
-                    lines: displayedLines,
-                    timeSeries,
-                    ...axis
-                  }}
-                  graphInterval={graphInterval}
-                  height={graphHeight - margin.top}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  width={graphWidth}
-                  xScale={xScale}
-                />
-
-                <Lines
-                  curve={curve}
-                  displayAnchor={displayAnchor}
-                  displayedLines={displayedLines}
-                  graphSvgRef={graphSvgRef}
-                  height={graphHeight - margin.top}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  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
+                <Group.Group
+                  left={margin.left + extraMargin / 2}
+                  top={margin.top}
+                >
+                  {showGridLines && (
+                    <Grids
+                      gridLinesType={axis?.gridLinesType}
+                      height={graphHeight - margin.top}
+                      leftScale={leftScale}
+                      width={graphWidth}
+                      xScale={xScale}
+                    />
+                  )}
+                  <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}
-                    hideTooltip={hideThresholdTooltip}
+                    dotOffset={lineStyle?.dotOffset}
+                    graphSvgRef={graphSvgRef}
+                    height={graphHeight - margin.top}
                     leftScale={leftScale}
+                    lineWidth={lineStyle?.lineWidth}
                     rightScale={rightScale}
-                    showTooltip={showThresholdTooltip}
-                    thresholdUnit={thresholdUnit}
-                    thresholds={thresholds as ThresholdsModel}
+                    showArea={lineStyle?.showArea}
+                    showPoints={lineStyle?.showPoints}
+                    timeSeries={timeSeries}
                     width={graphWidth}
+                    xScale={xScale}
+                    {...shapeLines}
                   />
-                )}
-              </Group.Group>
-            </svg>
+
+                  <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}
+                    />
+                  )}
+                </Group.Group>
+              </svg>
+            </Stack>
             {displayTooltip && (
               <GraphTooltip {...tooltip} {...graphTooltipData} />
             )}
@@ -287,12 +381,15 @@ const LineChart = ({
           </div>
         </MuiTooltip>
       </ClickAwayListener>
-      {displayLegend && (
+      {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}

package/src/Graph/LineChart/common/index.ts

@@ -1,5 +1,5 @@
 import * as Curve from '@visx/curve';
-import { always, cond, equals } from 'ramda';
+import { always, cond, equals, isNil } from 'ramda';
 
 import { alpha } from '@mui/material';
 
@@ -9,7 +9,7 @@ const commonTickLabelProps = {
   textAnchor: 'middle'
 };
 
-const margin = { bottom: 30, left: 55, right: 55, top: 30 };
+const margin = { bottom: 30, left: 50, right: 50, top: 30 };
 
 interface FillColor {
   areaColor: string;
@@ -19,8 +19,11 @@ interface FillColor {
 const getFillColor = ({
   transparency,
   areaColor
-}: FillColor): string | undefined =>
-  transparency ? alpha(areaColor, 1 - transparency * 0.01) : undefined;
+}: FillColor): string | undefined => {
+  return !isNil(transparency)
+    ? alpha(areaColor, 1 - transparency * 0.01)
+    : undefined;
+};
 
 const dateFormat = 'L';
 const timeFormat = 'LT';

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

@@ -482,7 +482,17 @@ export const thresholdsRange: Story = {
 export const LineChartWithSameColorCurves: Story = {
   ...Template,
   argTypes,
-  args: argumentsData,
+  args: {
+    ...argumentsData,
+    lineStyle: {
+      areaTransparency: 10,
+      dashLength: 10,
+      dashOffset: 10,
+      lineWidth: 9,
+      showArea: true,
+      showPoints: true
+    }
+  },
   render: (args) => (
     <WrapperLineChart
       {...args}

package/src/Graph/LineChart/index.tsx

@@ -14,7 +14,7 @@ import { LineChartData, Thresholds } from '../common/models';
 
 import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
-import { GlobalAreaLines, LineChartProps, LegendModel } from './models';
+import { GlobalAreaLines, LineChartProps } from './models';
 import useLineChartData from './useLineChartData';
 
 dayjs.extend(localizedFormat);
@@ -22,10 +22,8 @@ dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
 interface Props extends Partial<LineChartProps> {
-  curve?: 'linear' | 'step' | 'natural';
   data?: LineChartData;
   end: string;
-  legend: LegendModel;
   limitLegend?: false | number;
   loading: boolean;
   shapeLines?: GlobalAreaLines;
@@ -46,11 +44,18 @@ const WrapperLineChart = ({
   data,
   loading,
   timeShiftZones,
-  tooltip,
+  tooltip = {
+    mode: 'all',
+    sortOrder: 'name'
+  },
   annotationEvent,
-  legend,
+  legend = {
+    display: true,
+    mode: 'grid',
+    placement: 'bottom'
+  },
   header,
-  curve = 'linear',
+  lineStyle,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -85,7 +90,6 @@ const WrapperLineChart = ({
             <LineChart
               annotationEvent={annotationEvent}
               axis={axis}
-              curve={curve}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
@@ -94,6 +98,7 @@ const WrapperLineChart = ({
               height={height || responsiveHeight}
               legend={legend}
               limitLegend={limitLegend}
+              lineStyle={lineStyle}
               shapeLines={shapeLines}
               thresholdUnit={thresholdUnit}
               thresholds={thresholds}

package/src/Graph/LineChart/models.ts

@@ -48,10 +48,17 @@ export interface ShapeLines {
   areaStackedLines?: AreaStackedLines;
 }
 
-export interface Axis {
+export interface LineChartAxis {
   axisX?: AxisX;
   axisYLeft?: AxisYLeft;
   axisYRight?: AxisYRight;
+  gridLinesType?: 'horizontal' | 'vertical' | 'all';
+  isCenteredZero?: boolean;
+  scale?: 'linear' | 'logarithimc';
+  scaleLogarithmicBase?: number;
+  showBorder?: boolean;
+  showGridLines?: boolean;
+  yAxisTickLabelRotation?: number;
 }
 
 export interface InteractedZone {
@@ -65,7 +72,9 @@ export interface TooltipData {
   tooltipOpen: boolean;
 }
 export interface Tooltip {
+  mode: 'all' | 'single' | 'hidden';
   renderComponent?: (args: TooltipData) => ReactNode;
+  sortOrder: 'name' | 'ascending' | 'descending';
 }
 
 export interface AnnotationEvent {
@@ -82,12 +91,26 @@ export interface DisplayAnchor {
   displayTooltipsGuidingLines?: boolean;
 }
 
+export interface LineStyle {
+  areaTransparency?: number;
+  curve?: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
+  dotOffset?: number;
+  lineWidth?: number;
+  pathStyle?: 'solid' | 'dash' | 'dotted';
+  showArea?: boolean;
+  showPoints?: boolean;
+}
+
 export interface LineChartProps {
   annotationEvent?: AnnotationEvent;
-  axis?: Axis;
+  axis?: LineChartAxis;
   displayAnchor?: DisplayAnchor;
   header?: LineChartHeader;
   height?: number | null;
+  legend?: LegendModel;
+  lineStyle?: LineStyle;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;
   width: number;
@@ -135,6 +158,8 @@ export interface GlobalAreaLines {
 }
 export interface LegendModel {
   display?: boolean;
+  mode: 'grid' | 'list';
+  placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;
 }
 

package/src/Graph/common/timeSeries/index.ts

@@ -341,12 +341,21 @@ const getYScale = ({
     : scale;
 };
 
+const getScaleType = (
+  scale: 'linear' | 'logarithimc'
+): typeof Scale.scaleLinear | typeof Scale.scaleLog =>
+  equals(scale, 'logarithmic') ? Scale.scaleLog : Scale.scaleLinear;
+
 const getScale = ({
   graphValues,
   height,
   stackedValues,
-  thresholds
+  thresholds,
+  isCenteredZero,
+  scale,
+  scaleLogarithmicBase
 }): ScaleLinear<number, number> => {
+  const isLogScale = equals(scale, 'logarithmic');
   const minValue = Math.min(
     getMin(graphValues),
     getMin(stackedValues),
@@ -358,11 +367,23 @@ const getScale = ({
     Math.max(...thresholds)
   );
 
+  const scaleType = getScaleType(scale);
+
   const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
 
-  return Scale.scaleLinear<number>({
-    domain: [minValue, maxValue],
-    nice: true,
+  if (isCenteredZero) {
+    const greatestValue = Math.max(Math.abs(maxValue), Math.abs(minValue));
+
+    return scaleType<number>({
+      base: scaleLogarithmicBase || 2,
+      domain: [-greatestValue, greatestValue],
+      range: [height, upperRangeValue]
+    });
+  }
+
+  return scaleType<number>({
+    base: scaleLogarithmicBase || 2,
+    domain: [isLogScale ? 0.001 : minValue, maxValue],
     range: [height, upperRangeValue]
   });
 };
@@ -372,7 +393,10 @@ const getLeftScale = ({
   dataTimeSeries,
   valueGraphHeight,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  isCenteredZero,
+  scale,
+  scaleLogarithmicBase
 }: AxeScale): ScaleLinear<number, number> => {
   const [firstUnit, , thirdUnit] = getUnits(dataLines);
 
@@ -407,6 +431,9 @@ const getLeftScale = ({
   return getScale({
     graphValues,
     height: valueGraphHeight,
+    isCenteredZero,
+    scale,
+    scaleLogarithmicBase,
     stackedValues,
     thresholds: shouldApplyThresholds ? thresholds : []
   });
@@ -427,7 +454,10 @@ const getRightScale = ({
   dataTimeSeries,
   valueGraphHeight,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  isCenteredZero,
+  scale,
+  scaleLogarithmicBase
 }: AxeScale): ScaleLinear<number, number> => {
   const [, secondUnit] = getUnits(dataLines);
 
@@ -453,6 +483,9 @@ const getRightScale = ({
   return getScale({
     graphValues,
     height: valueGraphHeight,
+    isCenteredZero,
+    scale,
+    scaleLogarithmicBase,
     stackedValues,
     thresholds: shouldApplyThresholds ? thresholds : []
   });

package/src/Graph/common/timeSeries/models.ts

@@ -1,5 +1,7 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 
+import { LineChartAxis } from '../../LineChart/models';
+
 interface DsData {
   ds_color_area: string;
   ds_color_line: string;
@@ -67,7 +69,11 @@ export interface Xscale {
   dataTime: Array<TimeValue>;
   valueWidth: number;
 }
-export interface AxeScale {
+export interface AxeScale
+  extends Pick<
+    LineChartAxis,
+    'isCenteredZero' | 'scale' | 'scaleLogarithmicBase'
+  > {
   dataLines: Array<Line>;
   dataTimeSeries: Array<TimeValue>;
   thresholdUnit?: string;