@centreon/ui 24.8.2 → 24.8.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 (111) hide show
  1. package/package.json +14 -17
  2. package/src/Graph/BarChart/BarChart.cypress.spec.tsx +38 -79
  3. package/src/Graph/BarChart/BarChart.tsx +4 -4
  4. package/src/Graph/BarChart/BarGroup.tsx +81 -92
  5. package/src/Graph/BarChart/BarStack.tsx +21 -13
  6. package/src/Graph/BarChart/ResponsiveBarChart.tsx +26 -50
  7. package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx +1 -1
  8. package/src/Graph/BarChart/useBarStack.ts +1 -1
  9. package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Point.tsx +1 -1
  10. package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts +67 -0
  11. package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx +4 -7
  12. package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/index.tsx +6 -9
  13. package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/models.ts +1 -2
  14. package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/useScaleThreshold.ts +8 -20
  15. package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/index.tsx +64 -43
  16. package/src/Graph/{LineChart/LineChart.cypress.spec.tsx → Chart/Chart.cypress.spec.tsx} +272 -23
  17. package/src/Graph/{LineChart/index.stories.tsx → Chart/Chart.stories.tsx} +217 -24
  18. package/src/Graph/{LineChart/LineChart.styles.ts → Chart/Chart.styles.ts} +1 -1
  19. package/src/Graph/{LineChart/LineChart.tsx → Chart/Chart.tsx} +84 -100
  20. package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx +5 -1
  21. package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx +6 -1
  22. package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx +61 -0
  23. package/src/Graph/{LineChart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx → Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx} +2 -2
  24. package/src/Graph/{LineChart → Chart}/InteractiveComponents/index.tsx +11 -15
  25. package/src/Graph/{LineChart → Chart}/Legend/Legend.styles.ts +1 -7
  26. package/src/Graph/{LineChart → Chart}/Legend/LegendHeader.tsx +9 -5
  27. package/src/Graph/{LineChart → Chart}/Legend/index.tsx +2 -1
  28. package/src/Graph/Chart/graphAtoms.ts +6 -0
  29. package/src/Graph/{LineChart → Chart}/index.tsx +10 -7
  30. package/src/Graph/{LineChart → Chart}/models.ts +8 -3
  31. package/src/Graph/common/Axes/AxisStyles.ts +11 -0
  32. package/src/Graph/common/Axes/UnitLabel.tsx +41 -10
  33. package/src/Graph/common/Axes/index.tsx +18 -12
  34. package/src/Graph/common/Axes/models.ts +4 -2
  35. package/src/Graph/common/Axes/useAxisY.ts +22 -12
  36. package/src/Graph/common/BaseChart/BaseChart.tsx +2 -2
  37. package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx +8 -5
  38. package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts +1 -1
  39. package/src/Graph/common/Grids/index.tsx +2 -2
  40. package/src/Graph/common/Thresholds/ThresholdLine.tsx +1 -1
  41. package/src/Graph/common/Thresholds/Thresholds.tsx +10 -15
  42. package/src/Graph/common/timeSeries/index.ts +109 -131
  43. package/src/Graph/common/timeSeries/models.ts +4 -5
  44. package/src/Graph/index.ts +4 -4
  45. package/src/Graph/mockedData/lastDayWithLotOfUnits.json +1668 -0
  46. package/src/Graph/mockedData/pingService.json +46 -1
  47. package/src/Graph/mockedData/pingServiceLinesBars.json +253 -0
  48. package/src/Graph/mockedData/pingServiceLinesBarsMixed.json +253 -0
  49. package/src/Graph/mockedData/pingServiceLinesBarsStacked.json +253 -0
  50. package/src/Graph/mockedData/pingServiceMixedStacked.json +46 -1
  51. package/src/Graph/mockedData/pingServiceStacked.json +46 -1
  52. package/src/Typography/EllipsisTypography.tsx +5 -2
  53. package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx +16 -24
  54. package/src/components/Form/AccessRights/AccessRights.stories.tsx +5 -5
  55. package/src/components/Form/AccessRights/AccessRights.tsx +3 -3
  56. package/src/components/Form/index.ts +2 -2
  57. package/src/utils/index.ts +2 -2
  58. package/src/Graph/BarChart/SingleBar.tsx +0 -62
  59. package/src/Graph/BarChart/useSingleBar.ts +0 -199
  60. package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/useStackedLines.ts +0 -39
  61. package/src/Graph/LineChart/graphAtoms.ts +0 -3
  62. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/RegularLines/index.tsx +0 -0
  63. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/RegularLines/useRegularLines.ts +0 -0
  64. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/StackedLines/index.tsx +0 -0
  65. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/BasicThreshold.tsx +0 -0
  66. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/Circle.tsx +0 -0
  67. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx +0 -0
  68. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/helpers/index.ts +0 -0
  69. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/useCoordinateCircle.ts +0 -0
  70. /package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/models.ts +0 -0
  71. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/GuidingLines.tsx +0 -0
  72. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/index.tsx +0 -0
  73. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/models.ts +0 -0
  74. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/AnchorPoint/useTickGraph.ts +0 -0
  75. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/Annotation/Area.tsx +0 -0
  76. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/Annotation/Line.tsx +0 -0
  77. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/Annotation/index.tsx +0 -0
  78. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/Area/Downtime.tsx +0 -0
  79. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/EventAnnotations.tsx +0 -0
  80. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/Line/Acknowledgement.tsx +0 -0
  81. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/Line/Comments.tsx +0 -0
  82. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/annotationsAtoms.ts +0 -0
  83. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/index.tsx +0 -0
  84. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/models.ts +0 -0
  85. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Annotations/useAnnotation.ts +0 -0
  86. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Bar.tsx +0 -0
  87. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts +0 -0
  88. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/GraphValueTooltip/useGraphValueTooltipStyles.ts +0 -0
  89. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/TimeShiftZones/TimeShiftIcon.tsx +0 -0
  90. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx +0 -0
  91. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/TimeShiftZones/index.tsx +0 -0
  92. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/TimeShiftZones/models.ts +0 -0
  93. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/TimeShiftZones/useTimeShiftZones.ts +0 -0
  94. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Tooltip/index.tsx +0 -0
  95. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Tooltip/models.ts +0 -0
  96. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/Tooltip/useGraphTooltip.ts +0 -0
  97. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/ZoomPreview/index.tsx +0 -0
  98. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/ZoomPreview/models.ts +0 -0
  99. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/ZoomPreview/useZoomPreview.ts +0 -0
  100. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/ZoomPreview/zoomPreviewAtoms.ts +0 -0
  101. /package/src/Graph/{LineChart → Chart}/InteractiveComponents/interactionWithGraphAtoms.ts +0 -0
  102. /package/src/Graph/{LineChart → Chart}/Legend/LegendContent.tsx +0 -0
  103. /package/src/Graph/{LineChart → Chart}/Legend/models.ts +0 -0
  104. /package/src/Graph/{LineChart → Chart}/Legend/useLegend.ts +0 -0
  105. /package/src/Graph/{LineChart → Chart}/LoadingSkeleton.tsx +0 -0
  106. /package/src/Graph/{LineChart → Chart}/common/index.ts +0 -0
  107. /package/src/Graph/{LineChart → Chart}/helpers/doc.ts +0 -0
  108. /package/src/Graph/{LineChart → Chart}/helpers/index.ts +0 -0
  109. /package/src/Graph/{LineChart → Chart}/translatedLabels.ts +0 -0
  110. /package/src/Graph/{LineChart/useLineChartData.ts → Chart/useChartData.ts} +0 -0
  111. /package/src/Graph/{LineChart/useLineChartIntersection.ts → Chart/useChartIntersection.ts} +0 -0
@@ -1,199 +0,0 @@
1
- import { useMemo } from 'react';
2
-
3
- import { equals, gt } from 'ramda';
4
- import { useSetAtom } from 'jotai';
5
-
6
- import { Line } from '../common/timeSeries/models';
7
- import { useDeepMemo } from '../..';
8
-
9
- import { tooltipDataAtom } from './atoms';
10
-
11
- const getInvertedBarLength = ({
12
- useRightScale,
13
- rightScale,
14
- leftScale,
15
- value
16
- }): number | null => {
17
- const scale = useRightScale ? rightScale : leftScale;
18
-
19
- return scale(value);
20
- };
21
-
22
- const getBarLength = ({
23
- size,
24
- value,
25
- invertedBarLength,
26
- lengthToMatchZero,
27
- isCenteredZero,
28
- isHorizontal
29
- }): number => {
30
- if (!value) {
31
- return 0;
32
- }
33
-
34
- if (!isHorizontal && gt(0, value) && isCenteredZero) {
35
- return size - lengthToMatchZero - invertedBarLength;
36
- }
37
-
38
- if (!isHorizontal && gt(0, value) && gt(invertedBarLength, 0)) {
39
- return invertedBarLength;
40
- }
41
-
42
- if (!isHorizontal && gt(0, value)) {
43
- return invertedBarLength + (size - lengthToMatchZero);
44
- }
45
-
46
- if (!isHorizontal) {
47
- return invertedBarLength - (size - lengthToMatchZero);
48
- }
49
-
50
- if (value < 0) {
51
- return Math.abs(invertedBarLength) - (size - lengthToMatchZero);
52
- }
53
-
54
- if (isCenteredZero) {
55
- const barLength = size - invertedBarLength;
56
-
57
- return size - invertedBarLength - barLength / 2;
58
- }
59
-
60
- return size - invertedBarLength - lengthToMatchZero;
61
- };
62
-
63
- export interface UseSingleBarProps {
64
- bar: {
65
- color: string;
66
- height: number;
67
- index: number;
68
- key: number;
69
- value: number | null;
70
- width: number;
71
- x: number;
72
- y: number;
73
- };
74
- isCenteredZero?: boolean;
75
- isHorizontal: boolean;
76
- isTooltipHidden: boolean;
77
- leftScale;
78
- lines: Array<Line>;
79
- rightScale;
80
- secondUnit?: string;
81
- size: number;
82
- }
83
-
84
- interface UseSingleBarState {
85
- barLength: number;
86
- barPadding: number;
87
- listeners: {
88
- onMouseEnter: () => void;
89
- onMouseLeave: () => void;
90
- };
91
- }
92
-
93
- export const useSingleBar = ({
94
- lines,
95
- secondUnit,
96
- bar,
97
- leftScale,
98
- rightScale,
99
- size,
100
- isCenteredZero,
101
- isHorizontal,
102
- isTooltipHidden
103
- }: UseSingleBarProps): UseSingleBarState => {
104
- const setTooltipData = useSetAtom(tooltipDataAtom);
105
-
106
- const metric = useDeepMemo({
107
- deps: [lines, bar.key],
108
- variable: lines.find(({ metric_id }) => equals(metric_id, Number(bar.key)))
109
- }) as Line;
110
-
111
- const useRightScale = useMemo(
112
- () => equals(secondUnit, metric?.unit),
113
- [secondUnit, metric?.unit]
114
- );
115
-
116
- const left0Height = useMemo(() => leftScale(0), [leftScale(0)]);
117
- const right0Height = useMemo(() => rightScale(0), [rightScale(0)]);
118
-
119
- const invertedBarLength = useMemo(
120
- () =>
121
- getInvertedBarLength({
122
- leftScale,
123
- rightScale,
124
- useRightScale,
125
- value: bar.value
126
- }),
127
- [bar.value, useRightScale, leftScale, rightScale]
128
- );
129
-
130
- const lengthToMatchZero = useMemo(
131
- () => size - (useRightScale ? right0Height : left0Height),
132
- [useRightScale, rightScale, leftScale]
133
- );
134
-
135
- const barLength = useMemo(
136
- () =>
137
- getBarLength({
138
- invertedBarLength,
139
- isCenteredZero,
140
- isHorizontal,
141
- lengthToMatchZero,
142
- size,
143
- value: bar.value
144
- }),
145
- [
146
- size,
147
- invertedBarLength,
148
- isCenteredZero,
149
- isHorizontal,
150
- lengthToMatchZero,
151
- bar.value
152
- ]
153
- );
154
-
155
- const barPadding = useMemo(
156
- () =>
157
- isHorizontal
158
- ? size -
159
- barLength -
160
- lengthToMatchZero +
161
- ((bar.value ?? 0) < 0 ? barLength : 0)
162
- : size - lengthToMatchZero - ((bar.value ?? 0) < 0 ? barLength : 0),
163
- [isHorizontal, barLength, bar.value, barLength]
164
- );
165
-
166
- const hoverBar = (): void => {
167
- setTooltipData({
168
- data: [
169
- {
170
- metric,
171
- value: bar.value
172
- }
173
- ],
174
- highlightedMetric: metric?.metric_id,
175
- index: bar.index
176
- });
177
- };
178
-
179
- const exitBar = (): void => {
180
- setTooltipData(null);
181
- };
182
-
183
- const listeners = useMemo(
184
- () =>
185
- isTooltipHidden
186
- ? {}
187
- : {
188
- onMouseEnter: hoverBar,
189
- onMouseLeave: exitBar
190
- },
191
- [isTooltipHidden]
192
- );
193
-
194
- return {
195
- barLength,
196
- barPadding,
197
- listeners
198
- };
199
- };
@@ -1,39 +0,0 @@
1
- import {
2
- getInvertedStackedLines,
3
- getNotInvertedStackedLines,
4
- getTimeSeriesForLines
5
- } from '../../../../common/timeSeries';
6
- import { LinesData } from '../models';
7
-
8
- interface StackedLines {
9
- invertedStackedLinesData: LinesData;
10
- stackedLinesData: LinesData;
11
- }
12
-
13
- const useStackedLines = ({ lines, timeSeries }): StackedLines => {
14
- const regularStackedLines = getNotInvertedStackedLines(lines);
15
-
16
- const regularStackedTimeSeries = getTimeSeriesForLines({
17
- lines: regularStackedLines,
18
- timeSeries
19
- });
20
-
21
- const invertedStackedLines = getInvertedStackedLines(lines);
22
- const invertedStackedTimeSeries = getTimeSeriesForLines({
23
- lines: invertedStackedLines,
24
- timeSeries
25
- });
26
-
27
- return {
28
- invertedStackedLinesData: {
29
- lines: invertedStackedLines,
30
- timeSeries: invertedStackedTimeSeries
31
- },
32
- stackedLinesData: {
33
- lines: regularStackedLines,
34
- timeSeries: regularStackedTimeSeries
35
- }
36
- };
37
- };
38
-
39
- export default useStackedLines;
@@ -1,3 +0,0 @@
1
- import { atom } from 'jotai';
2
-
3
- export const timeTickGraphAtom = atom<Date | null>(null);
File without changes
File without changes
File without changes
File without changes