@inb/oeb_visualizations 0.0.6 → 0.0.7
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/README.md +7 -206
- package/dist/oeb-visualizations.cjs.js +75 -29
- package/dist/oeb-visualizations.esm.js +74 -28
- package/dist/oeb-visualizations.min.js +1 -1
- package/dist/oeb-visualizations.umd.js +75 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
# OpenEBench Visualizations
|
|
2
2
|
|
|
3
|
-
Collection of Vue components for data visualization in OpenEBench.
|
|
3
|
+
Collection of Vue components for data visualization in [OpenEBench](https://openebench.bsc.es/).
|
|
4
4
|
|
|
5
|
-
- Go to the [demo](https://inab.github.io/oeb-visualizations-demo/) to see the components in action.
|
|
6
|
-
-
|
|
5
|
+
- :magic_wand: Go to the [live demo](https://inab.github.io/oeb-visualizations-demo/) to see the components in action.
|
|
6
|
+
- :open_book: Check the [documentation](https://inab.github.io/oeb-visualizations/) for details on how to use the components.
|
|
7
|
+
- :package: This package is available through [npmjs](https://www.npmjs.com/package/@inb/oeb_visualizations).
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
## Installation
|
|
@@ -11,209 +12,9 @@ Collection of Vue components for data visualization in OpenEBench.
|
|
|
11
12
|
To install the package run:
|
|
12
13
|
|
|
13
14
|
```bash
|
|
14
|
-
npm install @inb/
|
|
15
|
+
npm install @inb/oeb_visualizations
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
##
|
|
18
|
+
## Development
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
#### Data
|
|
23
|
-
|
|
24
|
-
Data is provided to the component as an array of objects through the `dataItems` prop. Each object represents an access to the server. The object must have the following keys: `access_time`, `date` and `code`.
|
|
25
|
-
- `access_time`: time it took to access the server in ms.
|
|
26
|
-
- `date`: date of the access. Should not be null.
|
|
27
|
-
- `code`: HTTP code returned by the server. If `null` the bar will be colored with the color specified in the `colorNA` prop. If the code is an error code the bar will be colored with the color specified in the `colorOffline` prop. If the code is 200 the bar will be colored with the color specified in the `colorOnline` prop.
|
|
28
|
-
|
|
29
|
-
Example:
|
|
30
|
-
|
|
31
|
-
```json
|
|
32
|
-
[
|
|
33
|
-
{
|
|
34
|
-
"date": "2022-10-23T07:54:06.716122Z",
|
|
35
|
-
"code": 200,
|
|
36
|
-
"access_time": 51
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"date": "2022-10-24T07:58:50.609475Z",
|
|
40
|
-
"code": 200,
|
|
41
|
-
"access_time": 67
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"date": "2022-10-25T07:51:53.841140Z",
|
|
45
|
-
"code": 200,
|
|
46
|
-
"access_time": 55
|
|
47
|
-
}
|
|
48
|
-
]
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
#### Props
|
|
52
|
-
|
|
53
|
-
| Name | Type | Description | Default | Required |
|
|
54
|
-
| --- | --- | --- | --- | --- |
|
|
55
|
-
|dataItems | Array | Array of objects with keys `access_time`, `date` and `code`. <br> More details in "Data" section | | true |
|
|
56
|
-
| height | Number | Height of the plot in pixels. | 400 | false |
|
|
57
|
-
| colorNA | String | Color of bars for which there is no monitoring information (`code`=`null`). RGB format: `"<R>, <G>, <B>"` | 204, 204, 204 | false |
|
|
58
|
-
| colorOffline | String | Color of bars for which the server was offline (`code` is an error code). RGB format: `"<R>, <G>, <B>"` | 255, 153, 145 | false |
|
|
59
|
-
| colorOnline | String | Color of bars for which the server was online (`code` is 200). RGB format: `"<R>, <G>, <B>"` | 111, 176, 129 | false |
|
|
60
|
-
| yaxisTitle | String | Title of the y axis. | Access time (ms) | false |
|
|
61
|
-
| xaxisTitle | String | Title of the x axis. | Date | false |
|
|
62
|
-
| dtick | String | Tick interval for the x axis in unix epoch. | 86400000 | false |
|
|
63
|
-
|
|
64
|
-
#### Usage
|
|
65
|
-
|
|
66
|
-
Import the `accessibilityPlot` in your Vue component and add it to the `components` section. Then use the component in the template.
|
|
67
|
-
|
|
68
|
-
```html
|
|
69
|
-
<template>
|
|
70
|
-
<div>
|
|
71
|
-
<accessibilityPlot :dataItems="data" />
|
|
72
|
-
</div>
|
|
73
|
-
</template>
|
|
74
|
-
|
|
75
|
-
<script>
|
|
76
|
-
import { accessibilityPlot } from '@inb/oeb_visualizations'
|
|
77
|
-
|
|
78
|
-
export default {
|
|
79
|
-
components: {
|
|
80
|
-
accessibilityPlot
|
|
81
|
-
},
|
|
82
|
-
data(){
|
|
83
|
-
return {
|
|
84
|
-
data: [
|
|
85
|
-
{
|
|
86
|
-
"date": "2022-10-23T07:54:06.716122Z",
|
|
87
|
-
"code": 200,
|
|
88
|
-
"access_time": 51
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
"date": "2022-10-24T07:58:50.609475Z",
|
|
92
|
-
"code": 200,
|
|
93
|
-
"access_time": 67
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
"date": "2022-10-25T07:51:53.841140Z",
|
|
97
|
-
"code": 200,
|
|
98
|
-
"access_time": 55
|
|
99
|
-
}
|
|
100
|
-
]
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
</script>
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### citationsPlot
|
|
108
|
-
|
|
109
|
-
#### Data
|
|
110
|
-
|
|
111
|
-
Data is provided to the component as an array of objects through the `dataTraces` prop. Each object corresponds to a publication and will be represented as a trace in the resulting plot. They have the following keys: `data`, `id`, `label`, `title`, `year` and `url`.
|
|
112
|
-
- `data`: array of objects. Each object has the following keys: `count` and `year`. `count` is the number of citations of the publication in the year `year`. Exmple
|
|
113
|
-
```
|
|
114
|
-
[
|
|
115
|
-
{
|
|
116
|
-
"count": 1,
|
|
117
|
-
"year": 2019
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
"count": 1,
|
|
121
|
-
"year": 2020
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
"count": 1,
|
|
125
|
-
"year": 2021
|
|
126
|
-
}
|
|
127
|
-
]
|
|
128
|
-
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
- `id`: string. Identifier of the publication.
|
|
132
|
-
- `label`: string. Label of the publication.
|
|
133
|
-
- `title`: string. Title of the publication.
|
|
134
|
-
- `year`: number. Year of the publication.
|
|
135
|
-
- `url`: string. URL of the publication.
|
|
136
|
-
|
|
137
|
-
#### Props
|
|
138
|
-
|
|
139
|
-
| Name | Type | Description | Default | Required |
|
|
140
|
-
| --- | --- | --- | --- | --- |
|
|
141
|
-
|dataTraces | Array | Array of objects with keys `data`, `id`, `label`, `title`, `year` and `url`. <br> More details in "Data" section | | true |
|
|
142
|
-
| stack | Boolean | If true, the traces will be stacked. | false | false |
|
|
143
|
-
| colors | Array | Array of colors for the traces. HEX format | | false |
|
|
144
|
-
| height | Number | Height of the plot in pixels. | 400 | false |
|
|
145
|
-
| showlegend | Boolean | If true, the legend will be shown. | true | false |
|
|
146
|
-
| title | String | Title of the plot. | | false |
|
|
147
|
-
| xaxisTitle | String | Title of the x axis. | Year | false |
|
|
148
|
-
| yaxisTitle | String | Title of the y axis. | Number of citations | false |
|
|
149
|
-
| dark | Boolean | If true, the plot will be displayed in dark mode. | false | false |
|
|
150
|
-
|
|
151
|
-
#### Usage
|
|
152
|
-
|
|
153
|
-
Import the `citationsPlot` in your Vue component and add it to the `components` section. Then use the component in the template.
|
|
154
|
-
|
|
155
|
-
```html
|
|
156
|
-
<template>
|
|
157
|
-
<div>
|
|
158
|
-
<citationsPlot :dataTraces="data" />
|
|
159
|
-
</div>
|
|
160
|
-
</template>
|
|
161
|
-
<script>
|
|
162
|
-
import citationsPlotPage from '../components/citationsPlotPage.vue'
|
|
163
|
-
|
|
164
|
-
export default {
|
|
165
|
-
name: 'IndexPage',
|
|
166
|
-
components: {
|
|
167
|
-
citationsPlotPage
|
|
168
|
-
},
|
|
169
|
-
data(){
|
|
170
|
-
return {
|
|
171
|
-
data: [
|
|
172
|
-
{
|
|
173
|
-
"data": [
|
|
174
|
-
{
|
|
175
|
-
"count": 1,
|
|
176
|
-
"year": 2019
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"count": 1,
|
|
180
|
-
"year": 2020
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
"count": 1,
|
|
184
|
-
"year": 2021
|
|
185
|
-
}
|
|
186
|
-
],
|
|
187
|
-
"id": "paper1",
|
|
188
|
-
"label": "OEB paper",
|
|
189
|
-
"title": "OpenEBench: a web platform for transparent and reproducible biomedical benchmarking",
|
|
190
|
-
"year": 2020,
|
|
191
|
-
"url": ""
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"data": [
|
|
195
|
-
{
|
|
196
|
-
"count": 1,
|
|
197
|
-
"year": 2019
|
|
198
|
-
},
|
|
199
|
-
{
|
|
200
|
-
"count": 1,
|
|
201
|
-
"year": 2020
|
|
202
|
-
},
|
|
203
|
-
{
|
|
204
|
-
"count": 1,
|
|
205
|
-
"year": 2021
|
|
206
|
-
}
|
|
207
|
-
],
|
|
208
|
-
"id": "paper2",
|
|
209
|
-
"label": "OEB paper 2",
|
|
210
|
-
"title": "OpenEBench 2: an update of the web platform for transparent and reproducible biomedical benchmarking",
|
|
211
|
-
"year": 2020,
|
|
212
|
-
"url": ""
|
|
213
|
-
}
|
|
214
|
-
]
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
</script>
|
|
219
|
-
```
|
|
20
|
+
🚧 Work in progress 🚧
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
var script$1 = {
|
|
5
5
|
name: 'accessibilityPlot',
|
|
6
6
|
data: () => ({
|
|
7
|
-
divId: randstr('acc_plot')
|
|
7
|
+
divId: randstr('acc_plot'),
|
|
8
|
+
max_access_time: 0
|
|
8
9
|
}),
|
|
9
10
|
props: {
|
|
10
11
|
dtick: {
|
|
@@ -66,6 +67,15 @@ var script$1 = {
|
|
|
66
67
|
required: false,
|
|
67
68
|
default: 350
|
|
68
69
|
},
|
|
70
|
+
week: {
|
|
71
|
+
/*
|
|
72
|
+
whether the plot is used to show data of one week
|
|
73
|
+
If true, days of the week are shown on the x axis
|
|
74
|
+
*/
|
|
75
|
+
type: Boolean,
|
|
76
|
+
required: false,
|
|
77
|
+
default: false
|
|
78
|
+
},
|
|
69
79
|
dataItems: {
|
|
70
80
|
/*
|
|
71
81
|
dataItems is an array of objects with keys "access_time", "date" and "code".
|
|
@@ -114,6 +124,7 @@ var script$1 = {
|
|
|
114
124
|
}
|
|
115
125
|
},
|
|
116
126
|
mounted() {
|
|
127
|
+
this.max_access_time = Math.max(...this.dataItems.map(item => item.access_time));
|
|
117
128
|
var traces = this.buildOnlineTraces(this.dataItems); // generate line traces
|
|
118
129
|
|
|
119
130
|
traces = traces.concat(this.buildOfflineNATraces(this.dataItems)); // generate bar traces
|
|
@@ -140,11 +151,16 @@ var script$1 = {
|
|
|
140
151
|
tickfont: {
|
|
141
152
|
size: 10
|
|
142
153
|
},
|
|
143
|
-
|
|
154
|
+
showgrid: this.week ? true : false,
|
|
155
|
+
griddash: "dot",
|
|
156
|
+
gridwidth: 1,
|
|
157
|
+
showspikes: true,
|
|
158
|
+
spikedash: "4px",
|
|
159
|
+
spikethickness: 1,
|
|
144
160
|
tick0: this.dataItems[0].date,
|
|
145
161
|
dtick: this.dtick,
|
|
146
|
-
tickangle:
|
|
147
|
-
tickformat:
|
|
162
|
+
tickangle: this.xaxesTickAngle(),
|
|
163
|
+
tickformat: this.xaxesTickFormat()
|
|
148
164
|
},
|
|
149
165
|
yaxis: {
|
|
150
166
|
title: this.yaxisTitle,
|
|
@@ -298,10 +314,18 @@ var script$1 = {
|
|
|
298
314
|
|
|
299
315
|
// set start and end dates so that the line spands the whole plot
|
|
300
316
|
const firstDate = new Date(this.dataItems[0].date);
|
|
301
|
-
|
|
317
|
+
if (this.week) {
|
|
318
|
+
firstDate.setDate(firstDate.getDate() - 0.1); // one day before the first date in data
|
|
319
|
+
} else {
|
|
320
|
+
firstDate.setDate(firstDate.getDate() - 1); // one month before the first date in data
|
|
321
|
+
}
|
|
302
322
|
|
|
303
323
|
const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
|
|
304
|
-
|
|
324
|
+
if (this.week) {
|
|
325
|
+
lastDate.setDate(lastDate.getDate() + 0.3);
|
|
326
|
+
} else {
|
|
327
|
+
lastDate.setDate(lastDate.getDate() + 1); // one month after the last date in data
|
|
328
|
+
}
|
|
305
329
|
|
|
306
330
|
const trace = {
|
|
307
331
|
x: [firstDate, lastDate],
|
|
@@ -340,17 +364,6 @@ var script$1 = {
|
|
|
340
364
|
return traces;
|
|
341
365
|
},
|
|
342
366
|
extractOfflineNADates(data) {
|
|
343
|
-
/*
|
|
344
|
-
This function extracts dates with access_time null.
|
|
345
|
-
Depending on the code, the server is offline or NA on those dates.
|
|
346
|
-
Arguments:
|
|
347
|
-
- data: array of objects with keys "access_time", "date" and "code". access_time and code can be null
|
|
348
|
-
|
|
349
|
-
Returns an object with keys:
|
|
350
|
-
- NA: array of dates with access_time null and code null
|
|
351
|
-
- down: array of dates with access_time null and code in errorCodes
|
|
352
|
-
*/
|
|
353
|
-
const errorCodes = [404, 500, 502, 503, 504];
|
|
354
367
|
const resultNA = [];
|
|
355
368
|
const resultOffline = [];
|
|
356
369
|
for (let i = 0; i < data.length; i++) {
|
|
@@ -358,7 +371,7 @@ var script$1 = {
|
|
|
358
371
|
if (data[i].access_time === null && data[i].code === null) {
|
|
359
372
|
resultNA.push(data[i].date);
|
|
360
373
|
// if the access_time is null and the code is in errorCodes, it means that the server is offline
|
|
361
|
-
} else if (data[i].access_time === null
|
|
374
|
+
} else if (data[i].access_time === null) {
|
|
362
375
|
resultOffline.push(data[i].date);
|
|
363
376
|
}
|
|
364
377
|
}
|
|
@@ -367,7 +380,7 @@ var script$1 = {
|
|
|
367
380
|
down: resultOffline
|
|
368
381
|
};
|
|
369
382
|
},
|
|
370
|
-
barTrace(data, name, showlegend, hoverinfo, hovertemplate) {
|
|
383
|
+
barTrace(data, name, showlegend, hoverinfo, hovertemplate, group) {
|
|
371
384
|
/*
|
|
372
385
|
This function builds a bar trace.
|
|
373
386
|
Arguments:
|
|
@@ -385,14 +398,17 @@ var script$1 = {
|
|
|
385
398
|
},
|
|
386
399
|
name: name,
|
|
387
400
|
type: "bar",
|
|
388
|
-
legendgroup:
|
|
401
|
+
legendgroup: group,
|
|
389
402
|
showlegend: showlegend,
|
|
390
403
|
hoverinfo: hoverinfo,
|
|
391
|
-
hovertemplate: hovertemplate
|
|
404
|
+
hovertemplate: hovertemplate,
|
|
405
|
+
width: 1000 * 3600 * 24 * 1 // 100% of the space between two dates
|
|
392
406
|
};
|
|
407
|
+
|
|
408
|
+
console.log(trace);
|
|
393
409
|
return trace;
|
|
394
410
|
},
|
|
395
|
-
buildBarTraces(dates, color, label) {
|
|
411
|
+
buildBarTraces(dates, color, label, group) {
|
|
396
412
|
/*
|
|
397
413
|
This function builds the series used to display the offline/NA bars.
|
|
398
414
|
For each date, two columns are created: one very short and one tall.
|
|
@@ -413,12 +429,12 @@ var script$1 = {
|
|
|
413
429
|
};
|
|
414
430
|
const dataTall = {
|
|
415
431
|
dates: dates,
|
|
416
|
-
access_times: Array(dates.length).fill(
|
|
432
|
+
access_times: Array(dates.length).fill(this.max_access_time * 1.1),
|
|
417
433
|
colors: Array(dates.length).fill(colorLight)
|
|
418
434
|
};
|
|
419
435
|
const hovertemplate = `<b>${label}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;
|
|
420
|
-
const traceShort = this.barTrace(dataShort, label, false, 'skip', '');
|
|
421
|
-
const traceTall = this.barTrace(dataTall, label, true, 'all', hovertemplate);
|
|
436
|
+
const traceShort = this.barTrace(dataShort, label, false, 'skip', '', group);
|
|
437
|
+
const traceTall = this.barTrace(dataTall, label, true, 'all', hovertemplate, group);
|
|
422
438
|
return [traceShort, traceTall];
|
|
423
439
|
},
|
|
424
440
|
buildOfflineNATraces(data) {
|
|
@@ -434,11 +450,41 @@ var script$1 = {
|
|
|
434
450
|
const arrays = this.extractOfflineNADates(data);
|
|
435
451
|
|
|
436
452
|
// Down arrays
|
|
437
|
-
|
|
438
|
-
|
|
453
|
+
if (arrays.down.length > 0) {
|
|
454
|
+
traces = traces.concat(this.buildBarTraces(arrays.down, this.colorOffline, 'Offline', 'down'));
|
|
455
|
+
console.log(arrays.down);
|
|
456
|
+
}
|
|
439
457
|
// NA arrays
|
|
440
|
-
|
|
458
|
+
if (arrays.NA.length > 0) {
|
|
459
|
+
traces = traces.concat(this.buildBarTraces(arrays.NA, this.colorNA, 'No information available', 'na'));
|
|
460
|
+
console.log(arrays.NA);
|
|
461
|
+
}
|
|
441
462
|
return traces;
|
|
463
|
+
},
|
|
464
|
+
xaxesTickFormat() {
|
|
465
|
+
/*
|
|
466
|
+
This function returns the tickformat of the x axis.
|
|
467
|
+
If the plot is used to show data of one week, it returns the day of the week and the day.
|
|
468
|
+
Otherwise, it returns the day and the month.
|
|
469
|
+
*/
|
|
470
|
+
|
|
471
|
+
if (this.week) {
|
|
472
|
+
return "%A<br>%d %b";
|
|
473
|
+
} else {
|
|
474
|
+
return "%d %b";
|
|
475
|
+
}
|
|
476
|
+
},
|
|
477
|
+
xaxesTickAngle() {
|
|
478
|
+
/*
|
|
479
|
+
This function returns the tickangle of the x axis.
|
|
480
|
+
If the plot is used to show data of one week, it returns 0.
|
|
481
|
+
Otherwise, it returns 45.
|
|
482
|
+
*/
|
|
483
|
+
if (this.week) {
|
|
484
|
+
return 0;
|
|
485
|
+
} else {
|
|
486
|
+
return 45;
|
|
487
|
+
}
|
|
442
488
|
}
|
|
443
489
|
}
|
|
444
490
|
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
|
|
@@ -545,7 +591,7 @@ const __vue_inject_styles__$1 = undefined;
|
|
|
545
591
|
/* scoped */
|
|
546
592
|
const __vue_scope_id__$1 = undefined;
|
|
547
593
|
/* module identifier */
|
|
548
|
-
const __vue_module_identifier__$1 = "data-v-
|
|
594
|
+
const __vue_module_identifier__$1 = "data-v-5ead469f";
|
|
549
595
|
/* functional template */
|
|
550
596
|
const __vue_is_functional_template__$1 = false;
|
|
551
597
|
/* style inject */
|
|
@@ -8,7 +8,8 @@ function randstr(prefix) {
|
|
|
8
8
|
var script$1 = {
|
|
9
9
|
name: 'accessibilityPlot',
|
|
10
10
|
data: () => ({
|
|
11
|
-
divId: randstr('acc_plot')
|
|
11
|
+
divId: randstr('acc_plot'),
|
|
12
|
+
max_access_time: 0
|
|
12
13
|
}),
|
|
13
14
|
props: {
|
|
14
15
|
dtick: {
|
|
@@ -70,6 +71,15 @@ var script$1 = {
|
|
|
70
71
|
required: false,
|
|
71
72
|
default: 350
|
|
72
73
|
},
|
|
74
|
+
week: {
|
|
75
|
+
/*
|
|
76
|
+
whether the plot is used to show data of one week
|
|
77
|
+
If true, days of the week are shown on the x axis
|
|
78
|
+
*/
|
|
79
|
+
type: Boolean,
|
|
80
|
+
required: false,
|
|
81
|
+
default: false
|
|
82
|
+
},
|
|
73
83
|
dataItems: {
|
|
74
84
|
/*
|
|
75
85
|
dataItems is an array of objects with keys "access_time", "date" and "code".
|
|
@@ -118,6 +128,7 @@ var script$1 = {
|
|
|
118
128
|
}
|
|
119
129
|
},
|
|
120
130
|
mounted() {
|
|
131
|
+
this.max_access_time = Math.max(...this.dataItems.map(item => item.access_time));
|
|
121
132
|
var traces = this.buildOnlineTraces(this.dataItems); // generate line traces
|
|
122
133
|
|
|
123
134
|
traces = traces.concat(this.buildOfflineNATraces(this.dataItems)); // generate bar traces
|
|
@@ -144,11 +155,16 @@ var script$1 = {
|
|
|
144
155
|
tickfont: {
|
|
145
156
|
size: 10
|
|
146
157
|
},
|
|
147
|
-
|
|
158
|
+
showgrid: this.week ? true : false,
|
|
159
|
+
griddash: "dot",
|
|
160
|
+
gridwidth: 1,
|
|
161
|
+
showspikes: true,
|
|
162
|
+
spikedash: "4px",
|
|
163
|
+
spikethickness: 1,
|
|
148
164
|
tick0: this.dataItems[0].date,
|
|
149
165
|
dtick: this.dtick,
|
|
150
|
-
tickangle:
|
|
151
|
-
tickformat:
|
|
166
|
+
tickangle: this.xaxesTickAngle(),
|
|
167
|
+
tickformat: this.xaxesTickFormat()
|
|
152
168
|
},
|
|
153
169
|
yaxis: {
|
|
154
170
|
title: this.yaxisTitle,
|
|
@@ -302,10 +318,18 @@ var script$1 = {
|
|
|
302
318
|
|
|
303
319
|
// set start and end dates so that the line spands the whole plot
|
|
304
320
|
const firstDate = new Date(this.dataItems[0].date);
|
|
305
|
-
|
|
321
|
+
if (this.week) {
|
|
322
|
+
firstDate.setDate(firstDate.getDate() - 0.1); // one day before the first date in data
|
|
323
|
+
} else {
|
|
324
|
+
firstDate.setDate(firstDate.getDate() - 1); // one month before the first date in data
|
|
325
|
+
}
|
|
306
326
|
|
|
307
327
|
const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
|
|
308
|
-
|
|
328
|
+
if (this.week) {
|
|
329
|
+
lastDate.setDate(lastDate.getDate() + 0.3);
|
|
330
|
+
} else {
|
|
331
|
+
lastDate.setDate(lastDate.getDate() + 1); // one month after the last date in data
|
|
332
|
+
}
|
|
309
333
|
|
|
310
334
|
const trace = {
|
|
311
335
|
x: [firstDate, lastDate],
|
|
@@ -344,17 +368,6 @@ var script$1 = {
|
|
|
344
368
|
return traces;
|
|
345
369
|
},
|
|
346
370
|
extractOfflineNADates(data) {
|
|
347
|
-
/*
|
|
348
|
-
This function extracts dates with access_time null.
|
|
349
|
-
Depending on the code, the server is offline or NA on those dates.
|
|
350
|
-
Arguments:
|
|
351
|
-
- data: array of objects with keys "access_time", "date" and "code". access_time and code can be null
|
|
352
|
-
|
|
353
|
-
Returns an object with keys:
|
|
354
|
-
- NA: array of dates with access_time null and code null
|
|
355
|
-
- down: array of dates with access_time null and code in errorCodes
|
|
356
|
-
*/
|
|
357
|
-
const errorCodes = [404, 500, 502, 503, 504];
|
|
358
371
|
const resultNA = [];
|
|
359
372
|
const resultOffline = [];
|
|
360
373
|
for (let i = 0; i < data.length; i++) {
|
|
@@ -362,7 +375,7 @@ var script$1 = {
|
|
|
362
375
|
if (data[i].access_time === null && data[i].code === null) {
|
|
363
376
|
resultNA.push(data[i].date);
|
|
364
377
|
// if the access_time is null and the code is in errorCodes, it means that the server is offline
|
|
365
|
-
} else if (data[i].access_time === null
|
|
378
|
+
} else if (data[i].access_time === null) {
|
|
366
379
|
resultOffline.push(data[i].date);
|
|
367
380
|
}
|
|
368
381
|
}
|
|
@@ -371,7 +384,7 @@ var script$1 = {
|
|
|
371
384
|
down: resultOffline
|
|
372
385
|
};
|
|
373
386
|
},
|
|
374
|
-
barTrace(data, name, showlegend, hoverinfo, hovertemplate) {
|
|
387
|
+
barTrace(data, name, showlegend, hoverinfo, hovertemplate, group) {
|
|
375
388
|
/*
|
|
376
389
|
This function builds a bar trace.
|
|
377
390
|
Arguments:
|
|
@@ -389,14 +402,17 @@ var script$1 = {
|
|
|
389
402
|
},
|
|
390
403
|
name: name,
|
|
391
404
|
type: "bar",
|
|
392
|
-
legendgroup:
|
|
405
|
+
legendgroup: group,
|
|
393
406
|
showlegend: showlegend,
|
|
394
407
|
hoverinfo: hoverinfo,
|
|
395
|
-
hovertemplate: hovertemplate
|
|
408
|
+
hovertemplate: hovertemplate,
|
|
409
|
+
width: 1000 * 3600 * 24 * 1 // 100% of the space between two dates
|
|
396
410
|
};
|
|
411
|
+
|
|
412
|
+
console.log(trace);
|
|
397
413
|
return trace;
|
|
398
414
|
},
|
|
399
|
-
buildBarTraces(dates, color, label) {
|
|
415
|
+
buildBarTraces(dates, color, label, group) {
|
|
400
416
|
/*
|
|
401
417
|
This function builds the series used to display the offline/NA bars.
|
|
402
418
|
For each date, two columns are created: one very short and one tall.
|
|
@@ -417,12 +433,12 @@ var script$1 = {
|
|
|
417
433
|
};
|
|
418
434
|
const dataTall = {
|
|
419
435
|
dates: dates,
|
|
420
|
-
access_times: Array(dates.length).fill(
|
|
436
|
+
access_times: Array(dates.length).fill(this.max_access_time * 1.1),
|
|
421
437
|
colors: Array(dates.length).fill(colorLight)
|
|
422
438
|
};
|
|
423
439
|
const hovertemplate = `<b>${label}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;
|
|
424
|
-
const traceShort = this.barTrace(dataShort, label, false, 'skip', '');
|
|
425
|
-
const traceTall = this.barTrace(dataTall, label, true, 'all', hovertemplate);
|
|
440
|
+
const traceShort = this.barTrace(dataShort, label, false, 'skip', '', group);
|
|
441
|
+
const traceTall = this.barTrace(dataTall, label, true, 'all', hovertemplate, group);
|
|
426
442
|
return [traceShort, traceTall];
|
|
427
443
|
},
|
|
428
444
|
buildOfflineNATraces(data) {
|
|
@@ -438,11 +454,41 @@ var script$1 = {
|
|
|
438
454
|
const arrays = this.extractOfflineNADates(data);
|
|
439
455
|
|
|
440
456
|
// Down arrays
|
|
441
|
-
|
|
442
|
-
|
|
457
|
+
if (arrays.down.length > 0) {
|
|
458
|
+
traces = traces.concat(this.buildBarTraces(arrays.down, this.colorOffline, 'Offline', 'down'));
|
|
459
|
+
console.log(arrays.down);
|
|
460
|
+
}
|
|
443
461
|
// NA arrays
|
|
444
|
-
|
|
462
|
+
if (arrays.NA.length > 0) {
|
|
463
|
+
traces = traces.concat(this.buildBarTraces(arrays.NA, this.colorNA, 'No information available', 'na'));
|
|
464
|
+
console.log(arrays.NA);
|
|
465
|
+
}
|
|
445
466
|
return traces;
|
|
467
|
+
},
|
|
468
|
+
xaxesTickFormat() {
|
|
469
|
+
/*
|
|
470
|
+
This function returns the tickformat of the x axis.
|
|
471
|
+
If the plot is used to show data of one week, it returns the day of the week and the day.
|
|
472
|
+
Otherwise, it returns the day and the month.
|
|
473
|
+
*/
|
|
474
|
+
|
|
475
|
+
if (this.week) {
|
|
476
|
+
return "%A<br>%d %b";
|
|
477
|
+
} else {
|
|
478
|
+
return "%d %b";
|
|
479
|
+
}
|
|
480
|
+
},
|
|
481
|
+
xaxesTickAngle() {
|
|
482
|
+
/*
|
|
483
|
+
This function returns the tickangle of the x axis.
|
|
484
|
+
If the plot is used to show data of one week, it returns 0.
|
|
485
|
+
Otherwise, it returns 45.
|
|
486
|
+
*/
|
|
487
|
+
if (this.week) {
|
|
488
|
+
return 0;
|
|
489
|
+
} else {
|
|
490
|
+
return 45;
|
|
491
|
+
}
|
|
446
492
|
}
|
|
447
493
|
}
|
|
448
494
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var oeb_visualizations=function(e,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(t);function
|
|
1
|
+
var oeb_visualizations=function(e,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(t);function s(e){return Math.random().toString(36).replace("0.",e||"")}var r=function(e,t,i,a,s,r,o,n,l,c){"boolean"!=typeof o&&(l=n,n=o,o=!1);var d,h="function"==typeof i?i.options:i;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,s&&(h.functional=!0)),a&&(h._scopeId=a),r?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},h._ssrRegister=d):t&&(d=o?function(){t.call(this,c(this.$root.$options.shadowRoot))}:function(e){t.call(this,n(e))}),d)if(h.functional){var u=h.render;h.render=function(e,t){return d.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,d):[d]}return i};var o=r({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:e.divId}})},staticRenderFns:[]},undefined,{name:"accessibilityPlot",data:()=>({divId:s("acc_plot"),max_access_time:0}),props:{dtick:{type:Number,required:!1,default:864e5},xaxisTitle:{type:String,required:!1,default:"Date"},yaxisTitle:{type:String,required:!1,default:"Access time (ms)"},colorOnline:{type:String,required:!1,default:"111, 176, 129"},colorOffline:{type:String,required:!1,default:"255, 153, 145"},colorNA:{type:String,required:!1,default:"204,204,204"},height:{type:Number,required:!1,default:350},week:{type:Boolean,required:!1,default:!1},dataItems:{type:Array,required:!0,validator:function(e){for(let t=0;t<e.length;t++)e[t].hasOwnProperty("access_time")?e[t].hasOwnProperty("date")?e[t].hasOwnProperty("code")||console.error(`[oeb-visualizations warn] code key is missing in dataItems prop item (at position ${t})`):console.error(`[oeb-visualizations warn] date key is missing in dataItems prop item (at position ${t})`):console.error(`[oeb-visualizations warn] access_time key is missing in dataItems prop item (at position ${t})`),null!==e[t].access_time&&"number"!=typeof e[t].access_time&&console.error(`[oeb-visualizations warn] access_time must be null or a number in dataItems prop item (at position ${t})`),null!==e[t].code&&"number"!=typeof e[t].code&&console.error(`[oeb-visualizations warn] code must be null or a number in dataItems prop item (at position ${t})`),("string"!=typeof e[t].date||isNaN(Date.parse(e[t].date)))&&console.error(`[oeb-visualizations warn] date must be a string containing a date in dataItems prop item (at position ${t})`),null===e[t].date&&console.error(`[oeb-visualizations warn] date cannot be null in dataItems prop item (at position ${t})`);return!0}}},mounted(){this.max_access_time=Math.max(...this.dataItems.map((e=>e.access_time)));var e=this.buildOnlineTraces(this.dataItems);e=e.concat(this.buildOfflineNATraces(this.dataItems));const t={bargap:0,barmode:"stack",showlegend:!0,autosize:!0,height:this.height,margin:{l:50,r:50,b:70,t:70,pad:4},xaxis:{type:"date",title:this.xaxisTitle,font:{size:10},tickfont:{size:10},showgrid:!!this.week,griddash:"dot",gridwidth:1,showspikes:!0,spikedash:"4px",spikethickness:1,tick0:this.dataItems[0].date,dtick:this.dtick,tickangle:this.xaxesTickAngle(),tickformat:this.xaxesTickFormat()},yaxis:{title:this.yaxisTitle,titlefont:{size:10},tickfont:{size:10}},template:"plotly_white",legend:{orientation:"h",yanchor:"bottom",y:1.02,xanchor:"right",x:1,font:{size:8}},hoverlabel:{bgcolor:"#FFF"},hovermode:"closest"};a.default.newPlot(this.divId,e,t)},methods:{generateColor(e,t){let i=[];for(let a=0;a<30;a++)switch(e[a]){case"up":i.push(`rgba(${this.colorOnline},0)`);break;case"down":i.push(`rgba(${this.colorOffline},${t})`);break;case"NA":i.push(`rgba(${this.colorNA},${t})`)}return i},extractSubarraysBetweenNullValues(e){var t={access_time:[],date:[],average_access_time:0},i=[],a=[],s=0,r=0;for(let o=0;o<e.length;o++)null!==e[o].access_time?(i.push(e[o].access_time),a.push(e[o].date),s+=e[o].access_time,r+=1):i.length>0&&(t.access_time.push(i),t.date.push(a),i=[],a=[]);return t.access_time.push(i),t.date.push(a),t.average_access_time=s/r,t},buildAccessTimeTraces(e){var t=[];for(let i=0;i<e.access_time.length;i++){const a=e.access_time[i],s={x:e.date[i],y:a,name:"Online",legendgroup:"up",showlegend:0===i,mode:"markers+lines",type:"scatter",fill:"tozeroy",fillcolor:`rgba(${this.colorOnline},.2)`,connectgaps:!1,line:{color:`rgba(${this.colorOnline},.8)`,width:1.5},marker:{size:5},hovertemplate:"<b>Online</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>",hoveron:"points+fills"};t.push(s)}return t},buildAvgAccessTimeTrace(e){const t=new Date(this.dataItems[0].date);this.week?t.setDate(t.getDate()-.1):t.setDate(t.getDate()-1);const i=new Date(this.dataItems[this.dataItems.length-1].date);this.week?i.setDate(i.getDate()+.3):i.setDate(i.getDate()+1);return{x:[t,i],y:[e,e],name:"Average access time",showlegend:!0,mode:"lines",type:"scatter",line:{color:`rgba(${this.colorOnline},.6)`,width:1.5,dash:"4px"},marker:{size:5},hovertemplate:"<b>Average access time</b><br>%{y:.2f} ms <extra></extra>"}},buildOnlineTraces(e){const t=this.extractSubarraysBetweenNullValues(e);var i=this.buildAccessTimeTraces(t);return i.push(this.buildAvgAccessTimeTrace(t.average_access_time)),i},extractOfflineNADates(e){const t=[],i=[];for(let a=0;a<e.length;a++)null===e[a].access_time&&null===e[a].code?t.push(e[a].date):null===e[a].access_time&&i.push(e[a].date);return{NA:t,down:i}},barTrace(e,t,i,a,s,r){const o={x:e.dates,y:e.access_times,marker:{color:e.colors},name:t,type:"bar",legendgroup:r,showlegend:i,hoverinfo:a,hovertemplate:s,width:864e5};return console.log(o),o},buildBarTraces(e,t,i,a){const s=`rgba(${t},.8)`,r=`rgba(${t},.2)`,o={dates:e,access_times:Array(e.length).fill(2),colors:Array(e.length).fill(s)},n={dates:e,access_times:Array(e.length).fill(1.1*this.max_access_time),colors:Array(e.length).fill(r)},l=`<b>${i}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;return[this.barTrace(o,i,!1,"skip","",a),this.barTrace(n,i,!0,"all",l,a)]},buildOfflineNATraces(e){var t=[];const i=this.extractOfflineNADates(e);return i.down.length>0&&(t=t.concat(this.buildBarTraces(i.down,this.colorOffline,"Offline","down")),console.log(i.down)),i.NA.length>0&&(t=t.concat(this.buildBarTraces(i.NA,this.colorNA,"No information available","na")),console.log(i.NA)),t},xaxesTickFormat(){return this.week?"%A<br>%d %b":"%d %b"},xaxesTickAngle(){return this.week?0:45}}},undefined,!1,undefined,void 0,void 0);var n=r({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:e.divId}})},staticRenderFns:[]},undefined,{name:"citationsPlot",data:()=>({divId:s("cit_plot")}),props:{dataTraces:{type:Array,required:!0},stack:{type:Boolean,required:!1,default:!1},colors:{type:Array,required:!1,default:()=>["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd"]},height:{type:Number,required:!1,default:400},showlegend:{type:Boolean,required:!1,default:!0},title:{type:String,required:!1,default:""},xaxisTitle:{type:String,required:!1,default:"Year"},yaxisTitle:{type:String,required:!1,default:"Number of citations"},darkMode:{type:Boolean,required:!1,default:!1}},mounted(){const e=this.buildTraces(),t={showlegend:this.showlegend,autosize:!0,height:this.height,margin:{l:50,r:50,b:70,t:50,pad:4},xaxis:{title:this.xaxisTitle,font:{size:10},tickfont:{size:10},tickmode:"linear",color:this.darkMode?"white":"black"},yaxis:{title:this.yaxisTitle,titlefont:{size:10},tickfont:{size:10},font:{size:10},color:this.darkMode?"white":"black"},legend:{orientation:"h",yanchor:"bottom",y:1.02,xanchor:"right",x:1,font:{size:8,color:this.darkMode?"white":"black"}},hoverlabel:{color:this.darkMode?"white":"black"},hovermode:this.stack?"x unified":"closest",hoverdistance:70,plot_bgcolor:this.darkMode?"rgb(38, 50, 56)":"white",paper_bgcolor:this.darkMode?"rgb(38, 50, 56)":"white"};a.default.newPlot(this.divId,e,t)},methods:{buildTraces(){const e=[];for(let t=0;t<this.dataTraces.length;t++){const i={x:this.dataTraces[t].data.map((e=>e.year)),y:this.dataTraces[t].data.map((e=>e.citations)),mode:"lines+markers",name:this.dataTraces[t].label,hovertemplate:this.hoverTemplate(),marker:{size:5},line:{color:this.colors[t],width:1.8},stackgroup:this.stack?"one":null};e.push(i)}return e},hoverTemplate(){return this.stack?"%{y} citations <extra></extra>":"%{y} citations in %{x} <extra></extra>"}}},undefined,!1,undefined,void 0,void 0),l=Object.freeze({__proto__:null,accessibilityPlot:o,citationsPlot:n});const c=function(e){c.installed||(c.installed=!0,Object.entries(l).forEach((([t,i])=>{e.component(t,i)})))},d={install:c};{let e=null;"undefined"!=typeof window?e=window.Vue:"undefined"!=typeof global&&(e=global.Vue),e&&e.use(d)}return e.accessibilityPlot=o,e.citationsPlot=n,e.default=d,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Plotly);
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
var script$1 = {
|
|
5
5
|
name: 'accessibilityPlot',
|
|
6
6
|
data: () => ({
|
|
7
|
-
divId: randstr('acc_plot')
|
|
7
|
+
divId: randstr('acc_plot'),
|
|
8
|
+
max_access_time: 0
|
|
8
9
|
}),
|
|
9
10
|
props: {
|
|
10
11
|
dtick: {
|
|
@@ -66,6 +67,15 @@ var script$1 = {
|
|
|
66
67
|
required: false,
|
|
67
68
|
default: 350
|
|
68
69
|
},
|
|
70
|
+
week: {
|
|
71
|
+
/*
|
|
72
|
+
whether the plot is used to show data of one week
|
|
73
|
+
If true, days of the week are shown on the x axis
|
|
74
|
+
*/
|
|
75
|
+
type: Boolean,
|
|
76
|
+
required: false,
|
|
77
|
+
default: false
|
|
78
|
+
},
|
|
69
79
|
dataItems: {
|
|
70
80
|
/*
|
|
71
81
|
dataItems is an array of objects with keys "access_time", "date" and "code".
|
|
@@ -114,6 +124,7 @@ var script$1 = {
|
|
|
114
124
|
}
|
|
115
125
|
},
|
|
116
126
|
mounted() {
|
|
127
|
+
this.max_access_time = Math.max(...this.dataItems.map(item => item.access_time));
|
|
117
128
|
var traces = this.buildOnlineTraces(this.dataItems); // generate line traces
|
|
118
129
|
|
|
119
130
|
traces = traces.concat(this.buildOfflineNATraces(this.dataItems)); // generate bar traces
|
|
@@ -140,11 +151,16 @@ var script$1 = {
|
|
|
140
151
|
tickfont: {
|
|
141
152
|
size: 10
|
|
142
153
|
},
|
|
143
|
-
|
|
154
|
+
showgrid: this.week ? true : false,
|
|
155
|
+
griddash: "dot",
|
|
156
|
+
gridwidth: 1,
|
|
157
|
+
showspikes: true,
|
|
158
|
+
spikedash: "4px",
|
|
159
|
+
spikethickness: 1,
|
|
144
160
|
tick0: this.dataItems[0].date,
|
|
145
161
|
dtick: this.dtick,
|
|
146
|
-
tickangle:
|
|
147
|
-
tickformat:
|
|
162
|
+
tickangle: this.xaxesTickAngle(),
|
|
163
|
+
tickformat: this.xaxesTickFormat()
|
|
148
164
|
},
|
|
149
165
|
yaxis: {
|
|
150
166
|
title: this.yaxisTitle,
|
|
@@ -298,10 +314,18 @@ var script$1 = {
|
|
|
298
314
|
|
|
299
315
|
// set start and end dates so that the line spands the whole plot
|
|
300
316
|
const firstDate = new Date(this.dataItems[0].date);
|
|
301
|
-
|
|
317
|
+
if (this.week) {
|
|
318
|
+
firstDate.setDate(firstDate.getDate() - 0.1); // one day before the first date in data
|
|
319
|
+
} else {
|
|
320
|
+
firstDate.setDate(firstDate.getDate() - 1); // one month before the first date in data
|
|
321
|
+
}
|
|
302
322
|
|
|
303
323
|
const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
|
|
304
|
-
|
|
324
|
+
if (this.week) {
|
|
325
|
+
lastDate.setDate(lastDate.getDate() + 0.3);
|
|
326
|
+
} else {
|
|
327
|
+
lastDate.setDate(lastDate.getDate() + 1); // one month after the last date in data
|
|
328
|
+
}
|
|
305
329
|
|
|
306
330
|
const trace = {
|
|
307
331
|
x: [firstDate, lastDate],
|
|
@@ -340,17 +364,6 @@ var script$1 = {
|
|
|
340
364
|
return traces;
|
|
341
365
|
},
|
|
342
366
|
extractOfflineNADates(data) {
|
|
343
|
-
/*
|
|
344
|
-
This function extracts dates with access_time null.
|
|
345
|
-
Depending on the code, the server is offline or NA on those dates.
|
|
346
|
-
Arguments:
|
|
347
|
-
- data: array of objects with keys "access_time", "date" and "code". access_time and code can be null
|
|
348
|
-
|
|
349
|
-
Returns an object with keys:
|
|
350
|
-
- NA: array of dates with access_time null and code null
|
|
351
|
-
- down: array of dates with access_time null and code in errorCodes
|
|
352
|
-
*/
|
|
353
|
-
const errorCodes = [404, 500, 502, 503, 504];
|
|
354
367
|
const resultNA = [];
|
|
355
368
|
const resultOffline = [];
|
|
356
369
|
for (let i = 0; i < data.length; i++) {
|
|
@@ -358,7 +371,7 @@ var script$1 = {
|
|
|
358
371
|
if (data[i].access_time === null && data[i].code === null) {
|
|
359
372
|
resultNA.push(data[i].date);
|
|
360
373
|
// if the access_time is null and the code is in errorCodes, it means that the server is offline
|
|
361
|
-
} else if (data[i].access_time === null
|
|
374
|
+
} else if (data[i].access_time === null) {
|
|
362
375
|
resultOffline.push(data[i].date);
|
|
363
376
|
}
|
|
364
377
|
}
|
|
@@ -367,7 +380,7 @@ var script$1 = {
|
|
|
367
380
|
down: resultOffline
|
|
368
381
|
};
|
|
369
382
|
},
|
|
370
|
-
barTrace(data, name, showlegend, hoverinfo, hovertemplate) {
|
|
383
|
+
barTrace(data, name, showlegend, hoverinfo, hovertemplate, group) {
|
|
371
384
|
/*
|
|
372
385
|
This function builds a bar trace.
|
|
373
386
|
Arguments:
|
|
@@ -385,14 +398,17 @@ var script$1 = {
|
|
|
385
398
|
},
|
|
386
399
|
name: name,
|
|
387
400
|
type: "bar",
|
|
388
|
-
legendgroup:
|
|
401
|
+
legendgroup: group,
|
|
389
402
|
showlegend: showlegend,
|
|
390
403
|
hoverinfo: hoverinfo,
|
|
391
|
-
hovertemplate: hovertemplate
|
|
404
|
+
hovertemplate: hovertemplate,
|
|
405
|
+
width: 1000 * 3600 * 24 * 1 // 100% of the space between two dates
|
|
392
406
|
};
|
|
407
|
+
|
|
408
|
+
console.log(trace);
|
|
393
409
|
return trace;
|
|
394
410
|
},
|
|
395
|
-
buildBarTraces(dates, color, label) {
|
|
411
|
+
buildBarTraces(dates, color, label, group) {
|
|
396
412
|
/*
|
|
397
413
|
This function builds the series used to display the offline/NA bars.
|
|
398
414
|
For each date, two columns are created: one very short and one tall.
|
|
@@ -413,12 +429,12 @@ var script$1 = {
|
|
|
413
429
|
};
|
|
414
430
|
const dataTall = {
|
|
415
431
|
dates: dates,
|
|
416
|
-
access_times: Array(dates.length).fill(
|
|
432
|
+
access_times: Array(dates.length).fill(this.max_access_time * 1.1),
|
|
417
433
|
colors: Array(dates.length).fill(colorLight)
|
|
418
434
|
};
|
|
419
435
|
const hovertemplate = `<b>${label}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;
|
|
420
|
-
const traceShort = this.barTrace(dataShort, label, false, 'skip', '');
|
|
421
|
-
const traceTall = this.barTrace(dataTall, label, true, 'all', hovertemplate);
|
|
436
|
+
const traceShort = this.barTrace(dataShort, label, false, 'skip', '', group);
|
|
437
|
+
const traceTall = this.barTrace(dataTall, label, true, 'all', hovertemplate, group);
|
|
422
438
|
return [traceShort, traceTall];
|
|
423
439
|
},
|
|
424
440
|
buildOfflineNATraces(data) {
|
|
@@ -434,11 +450,41 @@ var script$1 = {
|
|
|
434
450
|
const arrays = this.extractOfflineNADates(data);
|
|
435
451
|
|
|
436
452
|
// Down arrays
|
|
437
|
-
|
|
438
|
-
|
|
453
|
+
if (arrays.down.length > 0) {
|
|
454
|
+
traces = traces.concat(this.buildBarTraces(arrays.down, this.colorOffline, 'Offline', 'down'));
|
|
455
|
+
console.log(arrays.down);
|
|
456
|
+
}
|
|
439
457
|
// NA arrays
|
|
440
|
-
|
|
458
|
+
if (arrays.NA.length > 0) {
|
|
459
|
+
traces = traces.concat(this.buildBarTraces(arrays.NA, this.colorNA, 'No information available', 'na'));
|
|
460
|
+
console.log(arrays.NA);
|
|
461
|
+
}
|
|
441
462
|
return traces;
|
|
463
|
+
},
|
|
464
|
+
xaxesTickFormat() {
|
|
465
|
+
/*
|
|
466
|
+
This function returns the tickformat of the x axis.
|
|
467
|
+
If the plot is used to show data of one week, it returns the day of the week and the day.
|
|
468
|
+
Otherwise, it returns the day and the month.
|
|
469
|
+
*/
|
|
470
|
+
|
|
471
|
+
if (this.week) {
|
|
472
|
+
return "%A<br>%d %b";
|
|
473
|
+
} else {
|
|
474
|
+
return "%d %b";
|
|
475
|
+
}
|
|
476
|
+
},
|
|
477
|
+
xaxesTickAngle() {
|
|
478
|
+
/*
|
|
479
|
+
This function returns the tickangle of the x axis.
|
|
480
|
+
If the plot is used to show data of one week, it returns 0.
|
|
481
|
+
Otherwise, it returns 45.
|
|
482
|
+
*/
|
|
483
|
+
if (this.week) {
|
|
484
|
+
return 0;
|
|
485
|
+
} else {
|
|
486
|
+
return 45;
|
|
487
|
+
}
|
|
442
488
|
}
|
|
443
489
|
}
|
|
444
490
|
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
|
|
@@ -545,7 +591,7 @@ const __vue_inject_styles__$1 = undefined;
|
|
|
545
591
|
/* scoped */
|
|
546
592
|
const __vue_scope_id__$1 = undefined;
|
|
547
593
|
/* module identifier */
|
|
548
|
-
const __vue_module_identifier__$1 = "data-v-
|
|
594
|
+
const __vue_module_identifier__$1 = "data-v-5ead469f";
|
|
549
595
|
/* functional template */
|
|
550
596
|
const __vue_is_functional_template__$1 = false;
|
|
551
597
|
/* style inject */
|