@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.
- package/package.json +1 -2
- package/src/Graph/Axes/UnitLabel.tsx +0 -20
- package/src/Graph/Axes/index.tsx +0 -99
- package/src/Graph/Axes/models.ts +0 -26
- package/src/Graph/Axes/useAxisY.ts +0 -100
- package/src/Graph/Graph.tsx +0 -231
- package/src/Graph/Grids/index.tsx +0 -20
- package/src/Graph/Header/index.tsx +0 -34
- package/src/Graph/InteractionWithGraph/AnchorPoint/RegularAnchorPoint.tsx +0 -88
- package/src/Graph/InteractionWithGraph/AnchorPoint/StackedAnchorPoint.tsx +0 -97
- package/src/Graph/InteractionWithGraph/AnchorPoint/index.tsx +0 -56
- package/src/Graph/InteractionWithGraph/AnchorPoint/models.ts +0 -25
- package/src/Graph/InteractionWithGraph/AnchorPoint/useAnchorPoint.ts +0 -109
- package/src/Graph/InteractionWithGraph/Bar.tsx +0 -21
- package/src/Graph/InteractionWithGraph/ZoomPreview/index.tsx +0 -38
- package/src/Graph/InteractionWithGraph/ZoomPreview/models.ts +0 -17
- package/src/Graph/InteractionWithGraph/ZoomPreview/useZoomPreview.ts +0 -101
- package/src/Graph/InteractionWithGraph/ZoomPreview/zoomPreviewAtoms.ts +0 -5
- package/src/Graph/InteractionWithGraph/index.tsx +0 -93
- package/src/Graph/InteractionWithGraph/interactionWithGraphAtoms.ts +0 -7
- package/src/Graph/InteractionWithGraph/mouseTimeValueAtoms.ts +0 -49
- package/src/Graph/Lines/RegularLines/index.tsx +0 -99
- package/src/Graph/Lines/RegularLines/useRegularLines.ts +0 -15
- package/src/Graph/Lines/StackedLines/index.tsx +0 -74
- package/src/Graph/Lines/StackedLines/useStackedLines.ts +0 -39
- package/src/Graph/Lines/index.tsx +0 -153
- package/src/Graph/Lines/models.ts +0 -32
- package/src/Graph/LoadingProgress.tsx +0 -46
- package/src/Graph/common/index.ts +0 -33
- package/src/Graph/data.json +0 -1338
- package/src/Graph/helpers/doc.ts +0 -323
- package/src/Graph/helpers/index.ts +0 -15
- package/src/Graph/index.stories.tsx +0 -30
- package/src/Graph/index.tsx +0 -66
- package/src/Graph/models.ts +0 -68
- package/src/Graph/timeSeries/index.test.ts +0 -484
- package/src/Graph/timeSeries/index.ts +0 -512
- package/src/Graph/timeSeries/models.ts +0 -119
- package/src/Graph/useGraphData.ts +0 -117
- package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts +0 -57
- package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx +0 -78
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/ErrorText.tsx +0 -14
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +0 -169
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx +0 -76
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +0 -61
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts +0 -91
- package/src/TimePeriods/CustomTimePeriod/index.tsx +0 -63
- package/src/TimePeriods/DateTimePickerInput.tsx +0 -99
- package/src/TimePeriods/SelectedTimePeriod.tsx +0 -99
- package/src/TimePeriods/TimePeriods.cypress.spec.tsx +0 -497
- package/src/TimePeriods/helpers/index.ts +0 -25
- package/src/TimePeriods/index.stories.tsx +0 -74
- package/src/TimePeriods/index.tsx +0 -77
- package/src/TimePeriods/models.ts +0 -103
- package/src/TimePeriods/timePeriods.styles.ts +0 -20
- package/src/TimePeriods/timePeriodsAtoms.ts +0 -113
- package/src/TimePeriods/useDateTimePickerAdapter.ts +0 -329
- 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
|
-
}
|