@inb/oeb_visualizations 0.0.4 → 0.0.5
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/LICENSE +17 -7
- package/README.md +205 -0
- package/dist/oeb-visualizations.esm.js +1 -1
- package/dist/oeb-visualizations.min.js +1 -1
- package/dist/oeb-visualizations.umd.js +1 -1
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2020 Andre601
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
8
14
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@ Collection of Vue components for data visualization in OpenEBench.
|
|
|
5
5
|
- Go to the [demo](https://inab.github.io/oeb-visualizations-demo/) to see the components in action.
|
|
6
6
|
- This package is available through [npmjs](https://www.npmjs.com/package/@inb/oeb-visualizations).
|
|
7
7
|
|
|
8
|
+
|
|
8
9
|
## Installation
|
|
9
10
|
|
|
10
11
|
To install the package run:
|
|
@@ -12,3 +13,207 @@ To install the package run:
|
|
|
12
13
|
```bash
|
|
13
14
|
npm install @inb/oeb-visualizations
|
|
14
15
|
```
|
|
16
|
+
|
|
17
|
+
## Components
|
|
18
|
+
|
|
19
|
+
### accessibilityPlot
|
|
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
|
+
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function normalizeComponent(e,t,i,r,a,s,n,o,l,c){"boolean"!=typeof n&&(l=o,o=n,n=!1);var d="function"==typeof i?i.options:i;e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),r&&(d._scopeId=r);var
|
|
1
|
+
function normalizeComponent(e,t,i,r,a,s,n,o,l,c){"boolean"!=typeof n&&(l=o,o=n,n=!1);var d="function"==typeof i?i.options:i;e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),r&&(d._scopeId=r);var _;if(s?(_=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(s)},d._ssrRegister=_):t&&(_=n?function(){t.call(this,c(this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),_)if(d.functional){var u=d.render;d.render=function(e,t){return _.call(t),u(e,t)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,_):[_]}return i}function randstr(e){return Math.random().toString(36).replace("0.",e||"")}import Plotly from"plotly.js-dist";var script={name:"accessibilityPlot",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},dataItems:{type:Array,required:!0,validator:function(e){for(var 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:function(){var e=this.buildOnlineTraces(this.dataItems);e=e.concat(this.buildOfflineNATraces(this.dataItems));var 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},tickmode:"linear",tick0:this.dataItems[0].date,dtick:this.dtick,tickangle:45,tickformat:"%d %b"},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",hoverdistance:70};Plotly.newPlot("plotAccessibility",e,t)},methods:{generateColor:function(e,t){for(var i=[],r=0;r<30;r++)switch(e[r]){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:function(e){for(var t={access_time:[],date:[],average_access_time:0},i=[],r=[],a=0,s=0,n=0;n<e.length;n++)null!==e[n].access_time?(i.push(e[n].access_time),r.push(e[n].date),a+=e[n].access_time,s+=1):i.length>0&&(t.access_time.push(i),t.date.push(r),i=[],r=[]);return t.access_time.push(i),t.date.push(r),t.average_access_time=a/s,t},buildAccessTimeTraces:function(e){for(var t=[],i=0;i<e.access_time.length;i++){var r=e.access_time[i],a={x:e.date[i],y:r,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(a)}return t},buildAvgAccessTimeTrace:function(e){var t=new Date(this.dataItems[0].date);t.setDate(t.getDate()-1);var i=new Date(this.dataItems[this.dataItems.length-1].date);return i.setDate(i.getDate()+1),{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}}},buildOnlineTraces:function(e){var t=this.extractSubarraysBetweenNullValues(e),i=this.buildAccessTimeTraces(t);return i.push(this.buildAvgAccessTimeTrace(t.average_access_time)),i},extractOfflineNADates:function(e){for(var t=[404,500,502,503,504],i=[],r=[],a=0;a<e.length;a++)null===e[a].access_time&&null===e[a].code?i.push(e[a].date):null===e[a].access_time&&t.includes(e[a].code)&&r.push(e[a].date);return{NA:i,down:r}},barTrace:function(e,t,i,r,a){return{x:e.dates,y:e.access_times,marker:{color:e.colors},name:t,type:"bar",legendgroup:t,showlegend:i,hoverinfo:r,hovertemplate:a}},buildBarTraces:function(e,t,i){var r="rgba("+t+",.8)",a="rgba("+t+",.2)",s={dates:e,access_times:Array(e.length).fill(2),colors:Array(e.length).fill(r)},n={dates:e,access_times:Array(e.length).fill(120),colors:Array(e.length).fill(a)},o="<b>"+i+"</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>";return[this.barTrace(s,i,!1,"skip",""),this.barTrace(n,i,!0,"all",o)]},buildOfflineNATraces:function(e){var t=[],i=this.extractOfflineNADates(e);return t=t.concat(this.buildBarTraces(i.down,this.colorOffline,"Offline")),t=t.concat(this.buildBarTraces(i.NA,this.colorNA,"No information available"))}}},normalizeComponent_1=normalizeComponent,__vue_script__=script,__vue_render__=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:"plotAccessibility"}})},__vue_staticRenderFns__=[],__vue_inject_styles__=void 0,__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,accessibilityPlot=normalizeComponent_1({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,void 0,void 0),script$1={name:"citationsPlot",data:function(){return{divId:randstr("cit_plot")}},props:{dataTraces:{type:Array,required:!0},stack:{type:Boolean,required:!1,default:!1},colors:{type:Array,required:!1,default:function(){return["#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:function(){var 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"};Plotly.newPlot(this.divId,e,t)},methods:{buildTraces:function(){for(var e=[],t=0;t<this.dataTraces.length;t++){var i={x:this.dataTraces[t].data.map(function(e){return e.year}),y:this.dataTraces[t].data.map(function(e){return 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:function(){return this.stack?"%{y} citations <extra></extra>":"%{y} citations in %{x} <extra></extra>"}}},__vue_script__$1=script$1,__vue_render__$1=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:e.divId}})},__vue_staticRenderFns__$1=[],__vue_inject_styles__$1=void 0,__vue_scope_id__$1=void 0,__vue_module_identifier__$1=void 0,__vue_is_functional_template__$1=!1,citationsPlot=normalizeComponent_1({render:__vue_render__$1,staticRenderFns:__vue_staticRenderFns__$1},__vue_inject_styles__$1,__vue_script__$1,__vue_scope_id__$1,__vue_is_functional_template__$1,__vue_module_identifier__$1,void 0,void 0);export{accessibilityPlot,citationsPlot};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var oeb_visualizations=function(e,t){"use strict";function i(e,t,i,a,
|
|
1
|
+
var oeb_visualizations=function(e,t){"use strict";function i(e,t,i,r,a,s,o,n,l,c){"boolean"!=typeof o&&(l=n,n=o,o=!1);var d="function"==typeof i?i.options:i;e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),r&&(d._scopeId=r);var u;if(s?(u=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(s)},d._ssrRegister=u):t&&(u=o?function(){t.call(this,c(this.$root.$options.shadowRoot))}:function(e){t.call(this,n(e))}),u)if(d.functional){var h=d.render;d.render=function(e,t){return u.call(t),h(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return i}function r(e){return Math.random().toString(36).replace("0.",e||"")}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var a=i,s=a({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:"plotAccessibility"}})},staticRenderFns:[]},void 0,{name:"accessibilityPlot",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},dataItems:{type:Array,required:!0,validator:function(e){for(var 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:function(){var e=this.buildOnlineTraces(this.dataItems);e=e.concat(this.buildOfflineNATraces(this.dataItems));var i={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},tickmode:"linear",tick0:this.dataItems[0].date,dtick:this.dtick,tickangle:45,tickformat:"%d %b"},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",hoverdistance:70};t.newPlot("plotAccessibility",e,i)},methods:{generateColor:function(e,t){for(var i=[],r=0;r<30;r++)switch(e[r]){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:function(e){for(var t={access_time:[],date:[],average_access_time:0},i=[],r=[],a=0,s=0,o=0;o<e.length;o++)null!==e[o].access_time?(i.push(e[o].access_time),r.push(e[o].date),a+=e[o].access_time,s+=1):i.length>0&&(t.access_time.push(i),t.date.push(r),i=[],r=[]);return t.access_time.push(i),t.date.push(r),t.average_access_time=a/s,t},buildAccessTimeTraces:function(e){for(var t=[],i=0;i<e.access_time.length;i++){var r=e.access_time[i],a={x:e.date[i],y:r,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(a)}return t},buildAvgAccessTimeTrace:function(e){var t=new Date(this.dataItems[0].date);t.setDate(t.getDate()-1);var i=new Date(this.dataItems[this.dataItems.length-1].date);return i.setDate(i.getDate()+1),{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}}},buildOnlineTraces:function(e){var t=this.extractSubarraysBetweenNullValues(e),i=this.buildAccessTimeTraces(t);return i.push(this.buildAvgAccessTimeTrace(t.average_access_time)),i},extractOfflineNADates:function(e){for(var t=[404,500,502,503,504],i=[],r=[],a=0;a<e.length;a++)null===e[a].access_time&&null===e[a].code?i.push(e[a].date):null===e[a].access_time&&t.includes(e[a].code)&&r.push(e[a].date);return{NA:i,down:r}},barTrace:function(e,t,i,r,a){return{x:e.dates,y:e.access_times,marker:{color:e.colors},name:t,type:"bar",legendgroup:t,showlegend:i,hoverinfo:r,hovertemplate:a}},buildBarTraces:function(e,t,i){var r="rgba("+t+",.8)",a="rgba("+t+",.2)",s={dates:e,access_times:Array(e.length).fill(2),colors:Array(e.length).fill(r)},o={dates:e,access_times:Array(e.length).fill(120),colors:Array(e.length).fill(a)},n="<b>"+i+"</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>";return[this.barTrace(s,i,!1,"skip",""),this.barTrace(o,i,!0,"all",n)]},buildOfflineNATraces:function(e){var t=[],i=this.extractOfflineNADates(e);return t=t.concat(this.buildBarTraces(i.down,this.colorOffline,"Offline")),t=t.concat(this.buildBarTraces(i.NA,this.colorNA,"No information available"))}}},void 0,!1,void 0,void 0,void 0),o=a({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:e.divId}})},staticRenderFns:[]},void 0,{name:"citationsPlot",data:function(){return{divId:r("cit_plot")}},props:{dataTraces:{type:Array,required:!0},stack:{type:Boolean,required:!1,default:!1},colors:{type:Array,required:!1,default:function(){return["#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:function(){var e=this.buildTraces(),i={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"};t.newPlot(this.divId,e,i)},methods:{buildTraces:function(){for(var e=[],t=0;t<this.dataTraces.length;t++){var i={x:this.dataTraces[t].data.map(function(e){return e.year}),y:this.dataTraces[t].data.map(function(e){return 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:function(){return this.stack?"%{y} citations <extra></extra>":"%{y} citations in %{x} <extra></extra>"}}},void 0,!1,void 0,void 0,void 0);return e.accessibilityPlot=s,e.citationsPlot=o,e}({},Plotly);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("plotly.js-dist")):"function"==typeof define&&define.amd?define(["exports","plotly.js-dist"],t):(e=e||self,t(e.oeb_visualizations={},e.Plotly))}(this,function(e,t){"use strict";function i(e,t,i,a,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("plotly.js-dist")):"function"==typeof define&&define.amd?define(["exports","plotly.js-dist"],t):(e=e||self,t(e.oeb_visualizations={},e.Plotly))}(this,function(e,t){"use strict";function i(e,t,i,r,a,s,o,n,l,c){"boolean"!=typeof o&&(l=n,n=o,o=!1);var d="function"==typeof i?i.options:i;e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),r&&(d._scopeId=r);var u;if(s?(u=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(s)},d._ssrRegister=u):t&&(u=o?function(){t.call(this,c(this.$root.$options.shadowRoot))}:function(e){t.call(this,n(e))}),u)if(d.functional){var h=d.render;d.render=function(e,t){return u.call(t),h(e,t)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,u):[u]}return i}function r(e){return Math.random().toString(36).replace("0.",e||"")}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var a=i,s=a({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:"plotAccessibility"}})},staticRenderFns:[]},void 0,{name:"accessibilityPlot",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},dataItems:{type:Array,required:!0,validator:function(e){for(var 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:function(){var e=this.buildOnlineTraces(this.dataItems);e=e.concat(this.buildOfflineNATraces(this.dataItems));var i={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},tickmode:"linear",tick0:this.dataItems[0].date,dtick:this.dtick,tickangle:45,tickformat:"%d %b"},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",hoverdistance:70};t.newPlot("plotAccessibility",e,i)},methods:{generateColor:function(e,t){for(var i=[],r=0;r<30;r++)switch(e[r]){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:function(e){for(var t={access_time:[],date:[],average_access_time:0},i=[],r=[],a=0,s=0,o=0;o<e.length;o++)null!==e[o].access_time?(i.push(e[o].access_time),r.push(e[o].date),a+=e[o].access_time,s+=1):i.length>0&&(t.access_time.push(i),t.date.push(r),i=[],r=[]);return t.access_time.push(i),t.date.push(r),t.average_access_time=a/s,t},buildAccessTimeTraces:function(e){for(var t=[],i=0;i<e.access_time.length;i++){var r=e.access_time[i],a={x:e.date[i],y:r,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(a)}return t},buildAvgAccessTimeTrace:function(e){var t=new Date(this.dataItems[0].date);t.setDate(t.getDate()-1);var i=new Date(this.dataItems[this.dataItems.length-1].date);return i.setDate(i.getDate()+1),{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}}},buildOnlineTraces:function(e){var t=this.extractSubarraysBetweenNullValues(e),i=this.buildAccessTimeTraces(t);return i.push(this.buildAvgAccessTimeTrace(t.average_access_time)),i},extractOfflineNADates:function(e){for(var t=[404,500,502,503,504],i=[],r=[],a=0;a<e.length;a++)null===e[a].access_time&&null===e[a].code?i.push(e[a].date):null===e[a].access_time&&t.includes(e[a].code)&&r.push(e[a].date);return{NA:i,down:r}},barTrace:function(e,t,i,r,a){return{x:e.dates,y:e.access_times,marker:{color:e.colors},name:t,type:"bar",legendgroup:t,showlegend:i,hoverinfo:r,hovertemplate:a}},buildBarTraces:function(e,t,i){var r="rgba("+t+",.8)",a="rgba("+t+",.2)",s={dates:e,access_times:Array(e.length).fill(2),colors:Array(e.length).fill(r)},o={dates:e,access_times:Array(e.length).fill(120),colors:Array(e.length).fill(a)},n="<b>"+i+"</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>";return[this.barTrace(s,i,!1,"skip",""),this.barTrace(o,i,!0,"all",n)]},buildOfflineNATraces:function(e){var t=[],i=this.extractOfflineNADates(e);return t=t.concat(this.buildBarTraces(i.down,this.colorOffline,"Offline")),t=t.concat(this.buildBarTraces(i.NA,this.colorNA,"No information available"))}}},void 0,!1,void 0,void 0,void 0),o=a({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:e.divId}})},staticRenderFns:[]},void 0,{name:"citationsPlot",data:function(){return{divId:r("cit_plot")}},props:{dataTraces:{type:Array,required:!0},stack:{type:Boolean,required:!1,default:!1},colors:{type:Array,required:!1,default:function(){return["#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:function(){var e=this.buildTraces(),i={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"};t.newPlot(this.divId,e,i)},methods:{buildTraces:function(){for(var e=[],t=0;t<this.dataTraces.length;t++){var i={x:this.dataTraces[t].data.map(function(e){return e.year}),y:this.dataTraces[t].data.map(function(e){return 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:function(){return this.stack?"%{y} citations <extra></extra>":"%{y} citations in %{x} <extra></extra>"}}},void 0,!1,void 0,void 0,void 0);e.accessibilityPlot=s,e.citationsPlot=o,Object.defineProperty(e,"__esModule",{value:!0})});
|