@centreon/ui 26.3.2 → 26.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/Graph/Chart/index.tsx +42 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@centreon/ui",
3
- "version": "26.3.2",
3
+ "version": "26.3.3",
4
4
  "description": "Centreon UI Components",
5
5
  "scripts": {
6
6
  "update:deps": "pnpx npm-check-updates -i --format group",
package/src/Graph/Chart/index.tsx CHANGED
@@ -1,22 +1,20 @@
1
- import { RefCallback, memo, useEffect } from 'react';
2
-
3
- import dayjs from 'dayjs';
4
- import 'dayjs/locale/en';
5
- import 'dayjs/locale/es';
6
- import 'dayjs/locale/fr';
7
- import 'dayjs/locale/pt';
8
- import localizedFormat from 'dayjs/plugin/localizedFormat';
9
- import timezonePlugin from 'dayjs/plugin/timezone';
10
- import utcPlugin from 'dayjs/plugin/utc';
11
- import Loading from '../../LoadingSkeleton';
12
- import type { LineChartData, Thresholds } from '../common/models';
13
-
14
- import useResizeObserver from 'use-resize-observer';
15
- import Chart from './Chart';
16
- import { useChartStyles } from './Chart.styles';
17
- import LoadingSkeleton from './LoadingSkeleton';
18
- import type { GlobalAreaLines, LineChartProps } from './models';
19
- import useChartData from './useChartData';
1
+ import dayjs from "dayjs";
2
+ import { memo, useRef } from "react";
3
+ import "dayjs/locale/en";
4
+ import "dayjs/locale/es";
5
+ import "dayjs/locale/fr";
6
+ import "dayjs/locale/pt";
7
+ import localizedFormat from "dayjs/plugin/localizedFormat";
8
+ import timezonePlugin from "dayjs/plugin/timezone";
9
+ import utcPlugin from "dayjs/plugin/utc";
10
+ import useResizeObserver from "use-resize-observer";
11
+ import Loading from "../../LoadingSkeleton";
12
+ import type { LineChartData, Thresholds } from "../common/models";
13
+ import Chart from "./Chart";
14
+ import { useChartStyles } from "./Chart.styles";
15
+ import LoadingSkeleton from "./LoadingSkeleton";
16
+ import type { GlobalAreaLines, LineChartProps } from "./models";
17
+ import useChartData from "./useChartData";
20
18
 
21
19
  dayjs.extend(localizedFormat);
22
20
  dayjs.extend(utcPlugin);
@@ -31,7 +29,7 @@ interface Props extends Partial<LineChartProps> {
31
29
  start: string;
32
30
  thresholdUnit?: string;
33
31
  thresholds?: Thresholds;
34
- getRef?: (ref: RefCallback<Element>) => void;
32
+ getRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
35
33
  containerStyle?: string;
36
34
  transformMatrix?: {
37
35
  fx?: (pointX: number) => number;
@@ -52,19 +50,19 @@ const WrapperChart = ({
52
50
  loading,
53
51
  timeShiftZones,
54
52
  tooltip = {
55
- mode: 'all',
56
- sortOrder: 'name'
53
+ mode: "all",
54
+ sortOrder: "name",
57
55
  },
58
56
  annotationEvent,
59
57
  legend = {
60
58
  display: true,
61
- mode: 'grid',
62
- placement: 'bottom',
59
+ mode: "grid",
60
+ placement: "bottom",
63
61
  showCalculations: {
64
62
  min: true,
65
63
  max: true,
66
- avg: true
67
- }
64
+ avg: true,
65
+ },
68
66
  },
69
67
  header,
70
68
  lineStyle,
@@ -83,15 +81,25 @@ const WrapperChart = ({
83
81
  const { classes, cx } = useChartStyles();
84
82
 
85
83
  const { adjustedData } = useChartData({ data, end, start });
84
+
85
+ const containerRef = useRef<HTMLDivElement | null>(null);
86
+
86
87
  const {
87
- ref,
88
+ ref: resizeObserverRef,
88
89
  width: responsiveWidth,
89
- height: responsiveHeight
90
+ height: responsiveHeight,
90
91
  } = useResizeObserver();
91
92
 
92
- useEffect(() => {
93
- getRef?.(ref);
94
- }, [ref?.current]);
93
+ const combinedRef = (element: HTMLDivElement | null) => {
94
+ if (containerRef.current !== element) {
95
+ containerRef.current = element;
96
+ if (element) {
97
+ getRef?.(containerRef);
98
+ }
99
+ }
100
+ resizeObserverRef(element);
101
+ };
102
+
95
103
 
96
104
  if (loading && !adjustedData) {
97
105
  return (
@@ -108,11 +116,11 @@ const WrapperChart = ({
108
116
 
109
117
  return (
110
118
  <div
111
- ref={ref}
119
+ ref={combinedRef}
112
120
  className={cx(classes.wrapperContainer, rest?.containerStyle)}
113
121
  >
114
122
  {!responsiveHeight ? (
115
- <Loading height={height || '100%'} width={width} />
123
+ <Loading height={height || "100%"} width={width} />
116
124
  ) : (
117
125
  <Chart
118
126
  annotationEvent={annotationEvent}
@@ -121,7 +129,7 @@ const WrapperChart = ({
121
129
  displayAnchor={displayAnchor}
122
130
  graphData={adjustedData}
123
131
  graphInterval={{ end, start }}
124
- graphRef={ref}
132
+ graphRef={containerRef}
125
133
  header={header}
126
134
  height={height || responsiveHeight || 0}
127
135
  legend={legend}