@centreon/ui 24.10.21 → 24.10.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.21",
+  "version": "24.10.23",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -24,8 +24,8 @@
     "url": "git+https://github.com/centreon/centreon.git"
   },
   "keywords": [
-    "centreon",
-    "react"
+    "react",
+    "centreon"
   ],
   "author": {
     "name": "centreon@centreon.com"

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -61,7 +61,7 @@ const ResponsiveBarChart = ({
 
   const { classes, cx } = useTooltipStyles();
 
-  const [linesGraph, setLinesGraph] = useState<Array<Line>>(lines);
+  const [linesGraph, setLinesGraph] = useState<Array<Line>>(lines || []);
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const [tooltipData, setTooltipData] = useAtom(tooltipDataAtom);
@@ -74,7 +74,7 @@ const ResponsiveBarChart = ({
   );
 
   const [firstUnit, secondUnit] = getUnits(displayedLines);
-  const allUnits = getUnits(lines);
+  const allUnits = getUnits(lines || []);
 
   const { maxLeftAxisCharacters, maxRightAxisCharacters } =
     useComputeYAxisMaxCharacters({
@@ -147,12 +147,12 @@ const ResponsiveBarChart = ({
     ]
   );
 
-  const leftScale = yScalesPerUnit[firstUnit];
-  const rightScale = yScalesPerUnit[secondUnit];
+  const leftScale = yScalesPerUnit[firstUnit ?? allUnits[0]];
+  const rightScale = yScalesPerUnit[secondUnit ?? allUnits[1]];
 
   useEffect(
     () => {
-      setLinesGraph(lines);
+      setLinesGraph(lines || []);
     },
     useDeepCompare([lines])
   );

package/src/Graph/Chart/Chart.tsx

@@ -194,8 +194,11 @@ const Chart = ({
     ]
   );
 
-  const leftScale = yScalesPerUnit[axis?.axisYLeft?.unit ?? firstUnit];
-  const rightScale = yScalesPerUnit[axis?.axisYRight?.unit ?? secondUnit];
+  const fallbackLeftUnit = axis?.axisYLeft?.unit ?? firstUnit ?? allUnits[0];
+  const fallbackRightUnit = axis?.axisYRight?.unit ?? secondUnit ?? allUnits[1];
+
+  const leftScale = yScalesPerUnit[fallbackLeftUnit];
+  const rightScale = yScalesPerUnit[fallbackRightUnit];
 
   const linesDisplayedAsLine = useMemo(
     () =>

package/src/Graph/Chart/index.tsx

@@ -1,9 +1,12 @@
 import dayjs from "dayjs";
-import { memo, useRef } from "react";
 import "dayjs/locale/en";
 import "dayjs/locale/es";
 import "dayjs/locale/fr";
 import "dayjs/locale/pt";
+import { memo, useRef } from "react";
+
+import { NoData } from "@centreon/ui";
+
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import timezonePlugin from "dayjs/plugin/timezone";
 import utcPlugin from "dayjs/plugin/utc";
@@ -31,6 +34,10 @@ interface Props extends Partial<LineChartProps> {
   thresholds?: Thresholds;
   getRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
   containerStyle?: string;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  };
 }
 
 const WrapperChart = ({
@@ -52,8 +59,8 @@ const WrapperChart = ({
   annotationEvent,
   legend = {
     display: true,
-    mode: 'grid',
-    placement: 'bottom'
+    mode: "grid",
+    placement: "bottom",
   },
   header,
   lineStyle,
@@ -62,11 +69,14 @@ const WrapperChart = ({
   thresholdUnit,
   limitLegend,
   getRef,
+  transformMatrix,
+  additionalLines,
+  min,
+  max,
+  boundariesUnit,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
-  const ref = useRef<HTMLDivElement | null>(null);
-
   const { adjustedData } = useChartData({ data, end, start });
 
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -97,13 +107,17 @@ const WrapperChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return <NoData />;
+  }
+
   return (
     <div
       ref={combinedRef}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
       {!responsiveHeight || !data ? (
-        <Loading height={height || '100%'} width={width} />
+        <Loading height={height || "100%"} width={width} />
       ) : (
         <Chart
           annotationEvent={annotationEvent}
@@ -125,6 +139,12 @@ const WrapperChart = ({
           tooltip={tooltip}
           width={width || responsiveWidth || 0}
           zoomPreview={zoomPreview}
+          skipIntersectionObserver={rest.skipIntersectionObserver}
+          additionalLines={additionalLines}
+          transformMatrix={transformMatrix}
+          min={min}
+          max={max}
+          boundariesUnit={boundariesUnit}
         />
       )}
     </div>

package/src/Graph/Chart/translatedLabels.ts

@@ -7,3 +7,4 @@ export const labelDowntime = 'Downtime';
 export const labelMin = 'Min';
 export const labelMax = 'Max';
 export const labelAvg = 'Avg';
+export const labelNoDataForThisPeriod = 'No data available for this period';

package/src/Graph/Chart/useChartData.ts

@@ -31,6 +31,15 @@ interface Props {
 }
 
 const getBoolean = (value) => Boolean(Number(value));
+const defaultDsData = {
+  ds_color_line: '#000000',
+  ds_filled: false,
+  ds_invert: false,
+  ds_legend: '',
+  ds_order: '0',
+  ds_stack: '0',
+  ds_transparency: 80
+};
 
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
   const adjustedDataRef = useRef<Data>();
@@ -44,9 +53,21 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       return undefined;
     }
 
+    const metricsWithValidDsData = (data?.metrics || []).map((metric) => ({
+      ...metric,
+      ds_data: {
+        ...defaultDsData,
+        ...(metric?.ds_data || {}),
+        ds_color_area:
+          metric?.ds_data?.ds_color_area ??
+          metric?.ds_data?.ds_color_line ??
+          defaultDsData.ds_color_line
+      }
+    }));
+
     const metricsGroupedByColor = groupBy(
-      (metric) => metric.ds_data.ds_color_line
-    )(data?.metrics || []);
+      (metric) => metric.ds_data?.ds_color_line || '#000000'
+    )(metricsWithValidDsData);
 
     const newMetrics = Object.entries(metricsGroupedByColor).map(
       ([color, value]) => {

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

@@ -59,7 +59,7 @@ const Axes = ({
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });
 
-  const displayAxisRight = !isNil(secondUnit);
+  const displayAxisRight = !isNil(secondUnit) && !isNil(rightScale);
 
   const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
   const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;

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

@@ -49,6 +49,11 @@ const ChartSvgWrapper = ({
   hasSecondUnit
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
+  const hasValidLeftScale = Boolean(leftScale);
+  const hasValidXScale = Boolean(xScale);
+  const canRenderAxes = hasValidLeftScale && hasValidXScale;
+  const canRenderGridRows = Boolean(isHorizontal ? leftScale : xScale);
+  const canRenderGridColumns = Boolean(isHorizontal ? xScale : leftScale);
 
   return (
     <svg
@@ -64,7 +69,7 @@ const ChartSvgWrapper = ({
         }
         top={margin.top}
       >
-        {showGridLines && (
+        {showGridLines && (canRenderGridRows || canRenderGridColumns) && (
           <Grids
             gridLinesType={gridLinesType}
             height={graphHeight - margin.top}
@@ -73,21 +78,23 @@ const ChartSvgWrapper = ({
             xScale={isHorizontal ? xScale : leftScale}
           />
         )}
-        <Axes
-          allUnits={allUnits}
-          data={{
-            baseAxis: base,
-            lines: displayedLines,
-            timeSeries,
-            ...axis
-          }}
-          height={graphHeight}
-          leftScale={leftScale}
-          orientation={orientation}
-          rightScale={rightScale}
-          width={graphWidth}
-          xScale={xScale}
-        />
+        {canRenderAxes && (
+          <Axes
+            allUnits={allUnits}
+            data={{
+              baseAxis: base,
+              lines: displayedLines,
+              timeSeries,
+              ...axis
+            }}
+            height={graphHeight}
+            leftScale={leftScale}
+            orientation={orientation}
+            rightScale={rightScale}
+            width={graphWidth}
+            xScale={xScale}
+          />
+        )}
         {children}
       </Group.Group>
     </svg>

package/src/Graph/common/Error/NoData.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material';
+
+import { useTranslation } from 'react-i18next';
+
+import { labelNoDataForThisPeriod } from '../../Chart/translatedLabels';
+
+const NoData = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={'flex items-center justify-center h-full'}>
+      <Typography align="center" variant="body1">
+        {t(labelNoDataForThisPeriod)}
+      </Typography>
+    </div>
+  );
+};
+
+export default NoData;

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

@@ -8,9 +8,9 @@ import { ChartAxis } from '../../Chart/models';
 
 interface Props extends Pick<ChartAxis, 'gridLinesType'> {
   height: number;
-  leftScale: ScaleLinear<number, number>;
+  leftScale?: ScaleLinear<number, number>;
   width: number;
-  xScale: ScaleLinear<number, number>;
+  xScale?: ScaleLinear<number, number>;
 }
 
 const Grids = ({
@@ -31,10 +31,10 @@ const Grids = ({
 
   return (
     <g>
-      {displayRows && (
+      {displayRows && leftScale && (
         <Grid.GridRows height={height} scale={leftScale} width={width} />
       )}
-      {displayColumns && (
+      {displayColumns && xScale && (
         <Grid.GridColumns height={height} scale={xScale} width={width} />
       )}
     </g>

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

@@ -53,6 +53,17 @@ interface TimeTickWithMetrics {
   timeTick: string;
 }
 
+const defaultDsData = {
+  ds_color_line: '#000000',
+  ds_filled: false,
+  ds_invert: false,
+  ds_legend: '',
+  ds_order: '0',
+  ds_stack: '0',
+  ds_stack_key: null,
+  ds_transparency: 80
+};
+
 const toTimeTickWithMetrics = ({
   metrics,
   times
@@ -119,29 +130,39 @@ const toLine = ({
   maximum_value,
   metric_id,
   displayAs
-}: Metric): Line => ({
-  areaColor: ds_data.ds_color_area,
-  average_value,
-  color: ds_data.ds_color_line,
-  display: true,
-  displayAs,
-  filled: ds_data.ds_filled,
-  highlight: undefined,
-  invert: ds_data.ds_invert,
-  legend: ds_data.ds_legend,
-  lineColor: ds_data.ds_color_line,
-  maximum_value,
-  metric,
-  metric_id,
-  minimum_value,
-  name: legend,
-  stackOrder:
-    equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
-      ? Number.parseInt(ds_data.ds_order || '0', 10)
-      : null,
-  transparency: ds_data.ds_transparency,
-  unit
-});
+}: Metric): Line => {
+  const safeDsData = {
+    ...defaultDsData,
+    ...(ds_data || {}),
+    ds_color_area:
+      ds_data?.ds_color_area ?? ds_data?.ds_color_line ?? defaultDsData.ds_color_line
+  };
+
+  return {
+    areaColor: safeDsData.ds_color_area,
+    average_value,
+    color: safeDsData.ds_color_line,
+    display: true,
+    displayAs,
+    filled: safeDsData.ds_filled,
+    highlight: undefined,
+    invert: safeDsData.ds_invert,
+    legend: safeDsData.ds_legend,
+    lineColor: safeDsData.ds_color_line,
+    maximum_value,
+    metric,
+    metric_id,
+    minimum_value,
+    name: legend,
+    stackKey: safeDsData.ds_stack_key || null,
+    stackOrder:
+      equals(safeDsData.ds_stack, '1') || equals(safeDsData.ds_stack, true)
+        ? Number.parseInt(safeDsData.ds_order || '0', 10)
+        : null,
+    transparency: safeDsData.ds_transparency,
+    unit
+  };
+};
 
 const getLineData = (graphData: LineChartData): Array<Line> =>
   map(toLine, graphData.metrics);

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

@@ -9,7 +9,8 @@ interface DsData {
   ds_invert: string | null;
   ds_legend: string | null;
   ds_order: string | null;
-  ds_stack: string | null;
+  ds_stack: string | boolean | null;
+  ds_stack_key?: string | null;
   ds_transparency: number;
 }
 
@@ -56,6 +57,7 @@ export interface Line {
   minimum_value: number | null;
   name: string;
   stackOrder: number | null;
+  stackKey: string | null;
   transparency: number;
   unit: string;
 }

package/src/Graph/index.ts

@@ -1,20 +1,20 @@
-export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
-export { default as LineChart } from './Chart';
-export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
-export { default as useLineChartData } from './Chart/useChartData';
-export { default as BarChart } from './BarChart/BarChart';
-export { Gauge } from './Gauge';
-export { SingleBar } from './SingleBar';
-export { Text as GraphText } from './Text';
-export { default as Header } from './common/BaseChart/Header';
-
-export { HeatMap } from './HeatMap';
-export { BarStack } from './BarStack';
-export { PieChart } from './PieChart';
-export { Timeline } from './Timeline';
-export * from './Tree';
-export type { LineChartData, Threshold, Thresholds } from './common/models';
-export * from './common/timeSeries';
-export type { Metric } from './common/timeSeries/models';
-export * from './Chart/models';
-export * from './PieChart/models';
+export type { ParentSizeProps } from "@visx/responsive/lib/components/ParentSize";
+export { default as BarChart } from "./BarChart/BarChart";
+export { BarStack } from "./BarStack";
+export { default as LineChart } from "./Chart";
+export { default as ThresholdLines } from "./Chart/BasicComponents/Lines/Threshold";
+export * from "./Chart/models";
+export { default as useLineChartData } from "./Chart/useChartData";
+export { default as Header } from "./common/BaseChart/Header";
+export { default as NoData } from "./common/Error/NoData";
+export type { LineChartData, Threshold, Thresholds } from "./common/models";
+export * from "./common/timeSeries";
+export type { Metric } from "./common/timeSeries/models";
+export { Gauge } from "./Gauge";
+export { HeatMap } from "./HeatMap";
+export { PieChart } from "./PieChart";
+export * from "./PieChart/models";
+export { SingleBar } from "./SingleBar";
+export { Text as GraphText } from "./Text";
+export { Timeline } from "./Timeline";
+export * from "./Tree";