@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18

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 (58) hide show
  1. package/package.json +1 -2
  2. package/src/Graph/Axes/UnitLabel.tsx +0 -20
  3. package/src/Graph/Axes/index.tsx +0 -99
  4. package/src/Graph/Axes/models.ts +0 -26
  5. package/src/Graph/Axes/useAxisY.ts +0 -100
  6. package/src/Graph/Graph.tsx +0 -231
  7. package/src/Graph/Grids/index.tsx +0 -20
  8. package/src/Graph/Header/index.tsx +0 -34
  9. package/src/Graph/InteractionWithGraph/AnchorPoint/RegularAnchorPoint.tsx +0 -88
  10. package/src/Graph/InteractionWithGraph/AnchorPoint/StackedAnchorPoint.tsx +0 -97
  11. package/src/Graph/InteractionWithGraph/AnchorPoint/index.tsx +0 -56
  12. package/src/Graph/InteractionWithGraph/AnchorPoint/models.ts +0 -25
  13. package/src/Graph/InteractionWithGraph/AnchorPoint/useAnchorPoint.ts +0 -109
  14. package/src/Graph/InteractionWithGraph/Bar.tsx +0 -21
  15. package/src/Graph/InteractionWithGraph/ZoomPreview/index.tsx +0 -38
  16. package/src/Graph/InteractionWithGraph/ZoomPreview/models.ts +0 -17
  17. package/src/Graph/InteractionWithGraph/ZoomPreview/useZoomPreview.ts +0 -101
  18. package/src/Graph/InteractionWithGraph/ZoomPreview/zoomPreviewAtoms.ts +0 -5
  19. package/src/Graph/InteractionWithGraph/index.tsx +0 -93
  20. package/src/Graph/InteractionWithGraph/interactionWithGraphAtoms.ts +0 -7
  21. package/src/Graph/InteractionWithGraph/mouseTimeValueAtoms.ts +0 -49
  22. package/src/Graph/Lines/RegularLines/index.tsx +0 -99
  23. package/src/Graph/Lines/RegularLines/useRegularLines.ts +0 -15
  24. package/src/Graph/Lines/StackedLines/index.tsx +0 -74
  25. package/src/Graph/Lines/StackedLines/useStackedLines.ts +0 -39
  26. package/src/Graph/Lines/index.tsx +0 -153
  27. package/src/Graph/Lines/models.ts +0 -32
  28. package/src/Graph/LoadingProgress.tsx +0 -46
  29. package/src/Graph/common/index.ts +0 -33
  30. package/src/Graph/data.json +0 -1338
  31. package/src/Graph/helpers/doc.ts +0 -323
  32. package/src/Graph/helpers/index.ts +0 -15
  33. package/src/Graph/index.stories.tsx +0 -30
  34. package/src/Graph/index.tsx +0 -66
  35. package/src/Graph/models.ts +0 -68
  36. package/src/Graph/timeSeries/index.test.ts +0 -484
  37. package/src/Graph/timeSeries/index.ts +0 -512
  38. package/src/Graph/timeSeries/models.ts +0 -119
  39. package/src/Graph/useGraphData.ts +0 -117
  40. package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts +0 -57
  41. package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx +0 -78
  42. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/ErrorText.tsx +0 -14
  43. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +0 -169
  44. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx +0 -76
  45. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +0 -61
  46. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts +0 -91
  47. package/src/TimePeriods/CustomTimePeriod/index.tsx +0 -63
  48. package/src/TimePeriods/DateTimePickerInput.tsx +0 -99
  49. package/src/TimePeriods/SelectedTimePeriod.tsx +0 -99
  50. package/src/TimePeriods/TimePeriods.cypress.spec.tsx +0 -497
  51. package/src/TimePeriods/helpers/index.ts +0 -25
  52. package/src/TimePeriods/index.stories.tsx +0 -74
  53. package/src/TimePeriods/index.tsx +0 -77
  54. package/src/TimePeriods/models.ts +0 -103
  55. package/src/TimePeriods/timePeriods.styles.ts +0 -20
  56. package/src/TimePeriods/timePeriodsAtoms.ts +0 -113
  57. package/src/TimePeriods/useDateTimePickerAdapter.ts +0 -329
  58. package/src/TimePeriods/useSortTimePeriods.ts +0 -24
@@ -1,512 +0,0 @@
1
- import numeral from 'numeral';
2
- import { Scale } from '@visx/visx';
3
- import { bisector } from 'd3-array';
4
- import { ScaleLinear, ScaleTime } from 'd3-scale';
5
- import {
6
- map,
7
- pipe,
8
- reduce,
9
- filter,
10
- addIndex,
11
- isNil,
12
- path,
13
- reject,
14
- equals,
15
- keys,
16
- prop,
17
- flatten,
18
- propEq,
19
- uniq,
20
- find,
21
- sortBy,
22
- add,
23
- isEmpty,
24
- any,
25
- not,
26
- min,
27
- max,
28
- lt,
29
- identity
30
- } from 'ramda';
31
-
32
- import { margin } from '../common';
33
- import { GraphData } from '../models';
34
-
35
- import {
36
- Metric,
37
- TimeValue,
38
- Line,
39
- AxeScale,
40
- Xscale,
41
- FormatMetricValueProps,
42
- YScales,
43
- TimeValueProps
44
- } from './models';
45
-
46
- interface TimeTickWithMetrics {
47
- metrics: Array<Metric>;
48
- timeTick: string;
49
- }
50
-
51
- const toTimeTickWithMetrics = ({
52
- metrics,
53
- times
54
- }): Array<TimeTickWithMetrics> =>
55
- map(
56
- (timeTick) => ({
57
- metrics,
58
- timeTick
59
- }),
60
- times
61
- );
62
-
63
- const toTimeTickValue = (
64
- { timeTick, metrics }: TimeTickWithMetrics,
65
- timeIndex: number
66
- ): TimeValue => {
67
- const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
68
- const addMetricForTimeIndex = (acc, { metric, data }): TimeValue => ({
69
- ...acc,
70
- [metric]: data[timeIndex]
71
- });
72
-
73
- return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
74
- };
75
-
76
- return { timeTick, ...getMetricsForIndex() };
77
- };
78
-
79
- const getTimeSeries = (graphData: GraphData): Array<TimeValue> => {
80
- const isGreaterThanLowerLimit = (value): boolean => {
81
- const lowerLimit = path<number>(['global', 'lower-limit'], graphData);
82
-
83
- if (isNil(lowerLimit)) {
84
- return true;
85
- }
86
-
87
- return value >= lowerLimit;
88
- };
89
-
90
- const rejectLowerThanLimit = ({
91
- timeTick,
92
- ...metrics
93
- }: TimeValue): TimeValue => ({
94
- ...filter(isGreaterThanLowerLimit, metrics),
95
- timeTick
96
- });
97
-
98
- const indexedMap = addIndex<TimeTickWithMetrics, TimeValue>(map);
99
-
100
- return pipe(
101
- toTimeTickWithMetrics,
102
- indexedMap(toTimeTickValue),
103
- map(rejectLowerThanLimit)
104
- )(graphData);
105
- };
106
-
107
- const toLine = ({
108
- ds_data,
109
- legend,
110
- metric,
111
- unit,
112
- average_value,
113
- minimum_value,
114
- maximum_value
115
- }: Metric): Line => ({
116
- areaColor: ds_data.ds_color_area,
117
- average_value,
118
- color: ds_data.ds_color_line,
119
- display: true,
120
- filled: ds_data.ds_filled,
121
- highlight: undefined,
122
- invert: ds_data.ds_invert,
123
- legend: ds_data.ds_legend,
124
- lineColor: ds_data.ds_color_line,
125
- maximum_value,
126
- metric,
127
- minimum_value,
128
- name: legend,
129
- stackOrder: equals(ds_data.ds_stack, '1')
130
- ? parseInt(ds_data.ds_order || '0', 10)
131
- : null,
132
- transparency: ds_data.ds_transparency,
133
- unit
134
- });
135
-
136
- const getLineData = (graphData: GraphData): Array<Line> =>
137
- map(toLine, graphData.metrics);
138
-
139
- const getMin = (values: Array<number>): number => Math.min(...values);
140
-
141
- const getMax = (values: Array<number>): number => Math.max(...values);
142
-
143
- const getTime = (timeValue: TimeValue): number =>
144
- new Date(timeValue.timeTick).valueOf();
145
-
146
- const getMetrics = (timeValue: TimeValue): Array<string> =>
147
- pipe(keys, reject(equals('timeTick')))(timeValue);
148
-
149
- const getValueForMetric =
150
- (timeValue: TimeValue) =>
151
- (metric: string): number =>
152
- prop(metric, timeValue) as number;
153
-
154
- const getUnits = (lines: Array<Line>): Array<string> =>
155
- pipe(map(prop('unit')), uniq)(lines);
156
-
157
- interface ValuesForUnitProps {
158
- lines: Array<Line>;
159
- timeSeries: Array<TimeValue>;
160
- unit: string;
161
- }
162
-
163
- const getMetricValuesForUnit = ({
164
- lines,
165
- timeSeries,
166
- unit
167
- }: ValuesForUnitProps): Array<number> => {
168
- const getTimeSeriesValuesForMetric = (metric): Array<number> =>
169
- map(
170
- (timeValue) => getValueForMetric(timeValue)(metric),
171
- timeSeries
172
- ) as Array<number>;
173
-
174
- return pipe(
175
- filter(propEq('unit', unit)) as (line) => Array<Line>,
176
- map(prop('metric')),
177
- map(getTimeSeriesValuesForMetric),
178
- flatten,
179
- reject(isNil)
180
- )(lines) as Array<number>;
181
- };
182
-
183
- const getDates = (timeSeries: Array<TimeValue>): Array<Date> => {
184
- const toTimeTick = ({ timeTick }: TimeValue): string => timeTick;
185
- const toDate = (tick: string): Date => new Date(tick);
186
-
187
- return pipe(map(toTimeTick), map(toDate))(timeSeries);
188
- };
189
-
190
- interface LineForMetricProps {
191
- lines: Array<Line>;
192
- metric: string;
193
- }
194
-
195
- const getLineForMetric = ({
196
- lines,
197
- metric
198
- }: LineForMetricProps): Line | undefined =>
199
- find(propEq('metric', metric), lines);
200
-
201
- interface LinesTimeSeries {
202
- lines: Array<Line>;
203
- timeSeries: Array<TimeValue>;
204
- }
205
-
206
- const getMetricValuesForLines = ({
207
- lines,
208
- timeSeries
209
- }: LinesTimeSeries): Array<number> =>
210
- pipe(
211
- getUnits,
212
- map((unit) => getMetricValuesForUnit({ lines, timeSeries, unit })),
213
- flatten
214
- )(lines);
215
-
216
- const getStackedMetricValues = ({
217
- lines,
218
- timeSeries
219
- }: LinesTimeSeries): Array<number> => {
220
- const getTimeSeriesValuesForMetric = (metric): Array<number> =>
221
- map((timeValue) => getValueForMetric(timeValue)(metric), timeSeries);
222
-
223
- const metricsValues = pipe(
224
- map(prop('metric')) as (metric) => Array<string>,
225
- map(getTimeSeriesValuesForMetric) as () => Array<Array<number>>
226
- )(lines as Array<Line>);
227
-
228
- if (isEmpty(metricsValues) || isNil(metricsValues)) {
229
- return [];
230
- }
231
-
232
- return metricsValues[0].map((_, index): number =>
233
- reduce(
234
- (acc: number, metricValue: Array<number>) => add(metricValue[index], acc),
235
- 0,
236
- metricsValues
237
- )
238
- );
239
- };
240
-
241
- const getSortedStackedLines = (lines: Array<Line>): Array<Line> =>
242
- pipe(
243
- reject(({ stackOrder }: Line): boolean => isNil(stackOrder)) as (
244
- lines
245
- ) => Array<Line>,
246
- sortBy(prop('stackOrder'))
247
- )(lines);
248
-
249
- const getInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
250
- pipe(
251
- reject(({ invert }: Line): boolean => isNil(invert)) as (
252
- lines
253
- ) => Array<Line>,
254
- getSortedStackedLines
255
- )(lines);
256
-
257
- const getNotInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
258
- pipe(
259
- filter(({ invert }: Line): boolean => isNil(invert)) as (
260
- lines
261
- ) => Array<Line>,
262
- getSortedStackedLines
263
- )(lines);
264
-
265
- interface HasStackedLines {
266
- lines: Array<Line>;
267
- unit: string;
268
- }
269
-
270
- const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
271
- pipe(getSortedStackedLines, any(propEq('unit', unit)))(lines);
272
-
273
- const getTimeSeriesForLines = ({
274
- lines,
275
- timeSeries
276
- }: LinesTimeSeries): Array<TimeValue> => {
277
- const metrics = map(prop('metric'), lines);
278
-
279
- return map(
280
- ({ timeTick, ...metricsValue }): TimeValue => ({
281
- ...reduce(
282
- (acc, metric): Omit<TimeValue, 'timePick'> => ({
283
- ...acc,
284
- [metric]: metricsValue[metric]
285
- }),
286
- {},
287
- metrics
288
- ),
289
- timeTick
290
- }),
291
- timeSeries
292
- );
293
- };
294
-
295
- interface GetYScaleProps {
296
- hasMoreThanTwoUnits: boolean;
297
- invert: string | null;
298
- leftScale: ScaleLinear<number, number>;
299
- rightScale: ScaleLinear<number, number>;
300
- secondUnit: string;
301
- unit: string;
302
- }
303
-
304
- const getYScale = ({
305
- hasMoreThanTwoUnits,
306
- unit,
307
- secondUnit,
308
- leftScale,
309
- rightScale,
310
- invert
311
- }: GetYScaleProps): ScaleLinear<number, number> => {
312
- const isLeftScale = hasMoreThanTwoUnits || unit !== secondUnit;
313
- const scale = isLeftScale ? leftScale : rightScale;
314
-
315
- return invert
316
- ? Scale.scaleLinear<number>({
317
- domain: scale.domain().reverse(),
318
- nice: true,
319
- range: scale.range().reverse()
320
- })
321
- : scale;
322
- };
323
-
324
- const getScale = ({
325
- graphValues,
326
- height,
327
- stackedValues
328
- }): ScaleLinear<number, number> => {
329
- const minValue = min(getMin(graphValues), getMin(stackedValues));
330
- const maxValue = max(getMax(graphValues), getMax(stackedValues));
331
-
332
- const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
333
-
334
- return Scale.scaleLinear<number>({
335
- domain: [minValue, maxValue],
336
- nice: true,
337
- range: [height, upperRangeValue]
338
- });
339
- };
340
-
341
- const getLeftScale = ({
342
- dataLines,
343
- dataTimeSeries,
344
- valueGraphHeight
345
- }: AxeScale): ScaleLinear<number, number> => {
346
- const [firstUnit, , thirdUnit] = getUnits(dataLines);
347
-
348
- const graphValues = isNil(thirdUnit)
349
- ? getMetricValuesForUnit({
350
- lines: dataLines,
351
- timeSeries: dataTimeSeries,
352
- unit: firstUnit
353
- })
354
- : getMetricValuesForLines({
355
- lines: dataLines,
356
- timeSeries: dataTimeSeries
357
- });
358
-
359
- const firstUnitHasStackedLines =
360
- isNil(thirdUnit) && not(isNil(firstUnit))
361
- ? hasUnitStackedLines({ lines: dataLines, unit: firstUnit })
362
- : false;
363
-
364
- const stackedValues = firstUnitHasStackedLines
365
- ? getStackedMetricValues({
366
- lines: getSortedStackedLines(dataLines),
367
- timeSeries: dataTimeSeries
368
- })
369
- : [0];
370
-
371
- return getScale({ graphValues, height: valueGraphHeight, stackedValues });
372
- };
373
-
374
- const getXScale = ({
375
- dataTime,
376
- valueWidth
377
- }: Xscale): ScaleTime<number, number, never> => {
378
- return Scale.scaleTime<number>({
379
- domain: [getMin(dataTime.map(getTime)), getMax(dataTime.map(getTime))],
380
- range: [0, valueWidth]
381
- });
382
- };
383
-
384
- const getRightScale = ({
385
- dataLines,
386
- dataTimeSeries,
387
- valueGraphHeight
388
- }: AxeScale): ScaleLinear<number, number> => {
389
- const [, secondUnit] = getUnits(dataLines);
390
-
391
- const graphValues = getMetricValuesForUnit({
392
- lines: dataLines,
393
- timeSeries: dataTimeSeries,
394
- unit: secondUnit
395
- });
396
-
397
- const secondUnitHasStackedLines = isNil(secondUnit)
398
- ? false
399
- : hasUnitStackedLines({ lines: dataLines, unit: secondUnit });
400
-
401
- const stackedValues = secondUnitHasStackedLines
402
- ? getStackedMetricValues({
403
- lines: getSortedStackedLines(dataLines),
404
- timeSeries: dataTimeSeries
405
- })
406
- : [0];
407
-
408
- return getScale({ graphValues, height: valueGraphHeight, stackedValues });
409
- };
410
-
411
- const formatMetricValue = ({
412
- value,
413
- unit,
414
- base = 1000
415
- }: FormatMetricValueProps): string | null => {
416
- if (isNil(value)) {
417
- return null;
418
- }
419
-
420
- const base2Units = [
421
- 'B',
422
- 'bytes',
423
- 'bytespersecond',
424
- 'B/s',
425
- 'B/sec',
426
- 'o',
427
- 'octets',
428
- 'b/s',
429
- 'b'
430
- ];
431
-
432
- const base1024 = base2Units.includes(unit) || Number(base) === 1024;
433
-
434
- const formatSuffix = base1024 ? ' ib' : 'a';
435
-
436
- const formattedMetricValue = numeral(Math.abs(value))
437
- .format(`0.[00]${formatSuffix}`)
438
- .replace(/\s|i|B/g, '');
439
-
440
- if (lt(value, 0)) {
441
- return `-${formattedMetricValue}`;
442
- }
443
-
444
- return formattedMetricValue;
445
- };
446
-
447
- const getStackedYScale = ({
448
- leftScale,
449
- rightScale
450
- }: YScales): ScaleLinear<number, number> => {
451
- const minDomain = min(
452
- getMin(leftScale.domain()),
453
- getMin(rightScale.domain())
454
- );
455
- const maxDomain = max(
456
- getMax(leftScale.domain()),
457
- getMax(rightScale.domain())
458
- );
459
-
460
- const minRange = min(getMin(leftScale.range()), getMin(rightScale.range()));
461
- const maxRange = max(getMax(leftScale.range()), getMax(rightScale.range()));
462
-
463
- return Scale.scaleLinear<number>({
464
- domain: [minDomain, maxDomain],
465
- nice: true,
466
- range: [maxRange, minRange]
467
- });
468
- };
469
-
470
- const bisectDate = bisector(identity).center;
471
-
472
- const getTimeValue = ({
473
- x,
474
- xScale,
475
- timeSeries,
476
- marginLeft = margin.left
477
- }: TimeValueProps): TimeValue => {
478
- const date = xScale.invert(x - marginLeft);
479
- const index = bisectDate(getDates(timeSeries), date);
480
-
481
- return timeSeries[index];
482
- };
483
-
484
- export {
485
- getTimeSeries,
486
- getLineData,
487
- getMin,
488
- getMax,
489
- getTime,
490
- getMetrics,
491
- getValueForMetric,
492
- getMetricValuesForUnit,
493
- getUnits,
494
- getDates,
495
- getLineForMetric,
496
- getMetricValuesForLines,
497
- getSortedStackedLines,
498
- getTimeSeriesForLines,
499
- getStackedMetricValues,
500
- getInvertedStackedLines,
501
- getNotInvertedStackedLines,
502
- hasUnitStackedLines,
503
- getYScale,
504
- getScale,
505
- getLeftScale,
506
- getXScale,
507
- getRightScale,
508
- formatMetricValue,
509
- getStackedYScale,
510
- getTimeValue,
511
- bisectDate
512
- };
@@ -1,119 +0,0 @@
1
- import { ScaleLinear, ScaleTime } from 'd3-scale';
2
-
3
- interface DsData {
4
- ds_color_area: string;
5
- ds_color_line: string;
6
- ds_filled: boolean;
7
- ds_invert: string | null;
8
- ds_legend: string | null;
9
- ds_order: string | null;
10
- ds_stack: string | null;
11
- ds_transparency: number;
12
- }
13
-
14
- export interface Metric {
15
- average_value: number | null;
16
- data: Array<number>;
17
- ds_data: DsData;
18
- legend: string;
19
- maximum_value: number | null;
20
- metric: string;
21
- minimum_value: number | null;
22
- unit: string;
23
- }
24
-
25
- export interface TimeValue {
26
- [field: string]: string | number;
27
- timeTick: string;
28
- }
29
-
30
- export interface Line {
31
- areaColor: string;
32
- average_value: number | null;
33
- color: string;
34
- display: boolean;
35
- filled: boolean;
36
- highlight?: boolean;
37
- invert: string | null;
38
- legend: string | null;
39
- lineColor: string;
40
- maximum_value: number | null;
41
- metric: string;
42
- minimum_value: number | null;
43
- name: string;
44
- stackOrder: number | null;
45
- transparency: number;
46
- unit: string;
47
- }
48
-
49
- export enum GraphOptionId {
50
- displayEvents = 'displayEvents',
51
- displayTooltips = 'displayTooltips'
52
- }
53
-
54
- export interface AdditionalDataProps<T> {
55
- additionalData?: T | null;
56
- }
57
-
58
- export interface Xscale {
59
- dataTime: Array<TimeValue>;
60
- valueWidth: number;
61
- }
62
- export interface AxeScale {
63
- dataLines: Array<Line>;
64
- dataTimeSeries: Array<TimeValue>;
65
- valueGraphHeight: number;
66
- }
67
-
68
- export interface GetYScaleProps {
69
- hasMoreThanTwoUnits: boolean;
70
- invert: string | null;
71
- leftScale: ScaleLinear<number, number>;
72
- rightScale: ScaleLinear<number, number>;
73
- secondUnit: string;
74
- unit: string;
75
- }
76
-
77
- export interface LinesProps {
78
- getSortedStackedLines: (lines: Array<Line>) => Array<Line>;
79
- getTime: (timeValue: TimeValue) => number;
80
- getUnits: (lines: Array<Line>) => Array<string>;
81
- getYScale: ({
82
- hasMoreThanTwoUnits,
83
- unit,
84
- secondUnit,
85
- leftScale,
86
- rightScale,
87
- invert
88
- }: GetYScaleProps) => ScaleLinear<number, number>;
89
- graphHeight: number;
90
- graphWidth: number;
91
- leftScale: ScaleLinear<number, number, never>;
92
- lines: Array<Line>;
93
- rightScale: ScaleLinear<number, number, never>;
94
- timeSeries: Array<TimeValue>;
95
- xScale: ScaleTime<number, number, never>;
96
- }
97
-
98
- export interface NewLines {
99
- newLines: Array<Line>;
100
- newSortedLines: Array<Line>;
101
- }
102
-
103
- export interface FormatMetricValueProps {
104
- base?: number;
105
- unit: string;
106
- value: number | null;
107
- }
108
-
109
- export interface YScales {
110
- leftScale: ScaleLinear<number, number>;
111
- rightScale: ScaleLinear<number, number>;
112
- }
113
-
114
- export interface TimeValueProps {
115
- marginLeft?: number;
116
- timeSeries: Array<TimeValue>;
117
- x: number;
118
- xScale: ScaleLinear<number, number>;
119
- }