@inb/oeb_visualizations 0.0.7 → 0.0.8-beta

package/dist/oeb-visualizations.cjs.js

@@ -4,8 +4,13 @@
 var script$1 = {
   name: 'accessibilityPlot',
   data: () => ({
-    divId: randstr('acc_plot'),
-    max_access_time: 0
+    divId: randstr('acc_plot_'),
+    max_access_time: 0,
+    config: {
+      displaylogo: false,
+      responsive: true,
+      modeBarButtonsToRemove: ['lasso']
+    }
   }),
   props: {
     dtick: {
@@ -76,6 +81,15 @@ var script$1 = {
       required: false,
       default: false
     },
+    sixMonths: {
+      /*
+      whether the plot is used to show data of six months
+      If true, months are shown on the x axis
+      */
+      type: Boolean,
+      required: false,
+      default: false
+    },
     dataItems: {
       /*
       dataItems is an array of objects with keys "access_time", "date" and "code".
@@ -138,12 +152,13 @@ var script$1 = {
       margin: {
         l: 50,
         r: 50,
-        b: 70,
-        t: 70,
+        b: 50,
+        t: 20,
         pad: 4
       },
       xaxis: {
         type: 'date',
+        ticklabelmode: this.xaxisMode(),
         title: this.xaxisTitle,
         font: {
           size: 10
@@ -151,16 +166,17 @@ var script$1 = {
         tickfont: {
           size: 10
         },
-        showgrid: this.week ? true : false,
+        showgrid: this.sixMonths ? true : false,
         griddash: "dot",
         gridwidth: 1,
+        gridcolor: "#d9d7d7",
         showspikes: true,
         spikedash: "4px",
         spikethickness: 1,
-        tick0: this.dataItems[0].date,
-        dtick: this.dtick,
-        tickangle: this.xaxesTickAngle(),
-        tickformat: this.xaxesTickFormat()
+        tick0: this.xaxisTickZero(),
+        dtick: this.xaxisTickD(),
+        tickangle: this.xaxisTickAngle(),
+        tickformat: this.xaxisTickFormat()
       },
       yaxis: {
         title: this.yaxisTitle,
@@ -175,9 +191,9 @@ var script$1 = {
       legend: {
         orientation: 'h',
         yanchor: 'bottom',
-        y: 1.02,
-        xanchor: 'right',
-        x: 1,
+        y: -0.5,
+        xanchor: 'left',
+        x: 0.05,
         font: {
           size: 8
         }
@@ -187,7 +203,8 @@ var script$1 = {
       },
       hovermode: 'closest'
     };
-    Plotly__default["default"].newPlot(this.divId, traces, layout);
+    console.log(this.divId);
+    Plotly__default["default"].newPlot(this.divId, traces, layout, this.config);
   },
   methods: {
     generateColor(values, transparency) {
@@ -315,7 +332,7 @@ var script$1 = {
       // set start and end dates so that the line spands the whole plot
       const firstDate = new Date(this.dataItems[0].date);
       if (this.week) {
-        firstDate.setDate(firstDate.getDate() - 0.1); // one day before the first date in data
+        firstDate.setDate(firstDate.getDate() - 0.3); // one day before the first date in data
       } else {
         firstDate.setDate(firstDate.getDate() - 1); // one month before the first date in data
       }
@@ -461,7 +478,7 @@ var script$1 = {
       }
       return traces;
     },
-    xaxesTickFormat() {
+    xaxisTickFormat() {
       /*
       This function returns the tickformat of the x axis.
       If the plot is used to show data of one week, it returns the day of the week and  the day.
@@ -470,11 +487,14 @@ var script$1 = {
 
       if (this.week) {
         return "%A<br>%d %b";
+      }
+      if (this.sixMonths) {
+        return "%b";
       } else {
         return "%d %b";
       }
     },
-    xaxesTickAngle() {
+    xaxisTickAngle() {
       /*
       This function returns the tickangle of the x axis.
       If the plot is used to show data of one week, it returns 0.
@@ -482,9 +502,38 @@ var script$1 = {
       */
       if (this.week) {
         return 0;
+      }
+      if (this.sixMonths) {
+        return 0;
       } else {
         return 45;
       }
+    },
+    xaxisTickD() {
+      if (this.sixMonths === true) {
+        return "M1";
+      } else {
+        return this.dtick;
+      }
+    },
+    xaxisTickZero() {
+      if (this.sixMonths === true) {
+        console.log('zero six months ago');
+        const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
+        //return lastDate minus six months
+        console.log(lastDate);
+        console.log('six months ago: ' + new Date(lastDate.setMonth(lastDate.getMonth() - 6)));
+        return new Date(lastDate.setMonth(lastDate.getMonth() - 6));
+      } else {
+        return this.dataItems[0];
+      }
+    },
+    xaxisMode() {
+      if (this.sixMonths === true) {
+        return "period";
+      } else {
+        return "instant";
+      }
     }
   }
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
@@ -591,7 +640,7 @@ const __vue_inject_styles__$1 = undefined;
 /* scoped */
 const __vue_scope_id__$1 = undefined;
 /* module identifier */
-const __vue_module_identifier__$1 = "data-v-5ead469f";
+const __vue_module_identifier__$1 = "data-v-77c84891";
 /* functional template */
 const __vue_is_functional_template__$1 = false;
 /* style inject */
@@ -605,7 +654,7 @@ var accessibilityPlot = normalizeComponent_1({
 var script = {
   name: 'citationsPlot',
   data: () => ({
-    divId: randstr('cit_plot')
+    divId: randstr('cit_plot_')
   }),
   props: {
     dataTraces: {
@@ -777,7 +826,7 @@ const __vue_inject_styles__ = undefined;
 /* scoped */
 const __vue_scope_id__ = undefined;
 /* module identifier */
-const __vue_module_identifier__ = "data-v-64c53c55";
+const __vue_module_identifier__ = "data-v-4ac5e814";
 /* functional template */
 const __vue_is_functional_template__ = false;
 /* style inject */

package/dist/oeb-visualizations.esm.js

@@ -8,8 +8,13 @@ function randstr(prefix) {
 var script$1 = {
   name: 'accessibilityPlot',
   data: () => ({
-    divId: randstr('acc_plot'),
-    max_access_time: 0
+    divId: randstr('acc_plot_'),
+    max_access_time: 0,
+    config: {
+      displaylogo: false,
+      responsive: true,
+      modeBarButtonsToRemove: ['lasso']
+    }
   }),
   props: {
     dtick: {
@@ -80,6 +85,15 @@ var script$1 = {
       required: false,
       default: false
     },
+    sixMonths: {
+      /*
+      whether the plot is used to show data of six months
+      If true, months are shown on the x axis
+      */
+      type: Boolean,
+      required: false,
+      default: false
+    },
     dataItems: {
       /*
       dataItems is an array of objects with keys "access_time", "date" and "code".
@@ -142,12 +156,13 @@ var script$1 = {
       margin: {
         l: 50,
         r: 50,
-        b: 70,
-        t: 70,
+        b: 50,
+        t: 20,
         pad: 4
       },
       xaxis: {
         type: 'date',
+        ticklabelmode: this.xaxisMode(),
         title: this.xaxisTitle,
         font: {
           size: 10
@@ -155,16 +170,17 @@ var script$1 = {
         tickfont: {
           size: 10
         },
-        showgrid: this.week ? true : false,
+        showgrid: this.sixMonths ? true : false,
         griddash: "dot",
         gridwidth: 1,
+        gridcolor: "#d9d7d7",
         showspikes: true,
         spikedash: "4px",
         spikethickness: 1,
-        tick0: this.dataItems[0].date,
-        dtick: this.dtick,
-        tickangle: this.xaxesTickAngle(),
-        tickformat: this.xaxesTickFormat()
+        tick0: this.xaxisTickZero(),
+        dtick: this.xaxisTickD(),
+        tickangle: this.xaxisTickAngle(),
+        tickformat: this.xaxisTickFormat()
       },
       yaxis: {
         title: this.yaxisTitle,
@@ -179,9 +195,9 @@ var script$1 = {
       legend: {
         orientation: 'h',
         yanchor: 'bottom',
-        y: 1.02,
-        xanchor: 'right',
-        x: 1,
+        y: -0.5,
+        xanchor: 'left',
+        x: 0.05,
         font: {
           size: 8
         }
@@ -191,7 +207,8 @@ var script$1 = {
       },
       hovermode: 'closest'
     };
-    Plotly.newPlot(this.divId, traces, layout);
+    console.log(this.divId);
+    Plotly.newPlot(this.divId, traces, layout, this.config);
   },
   methods: {
     generateColor(values, transparency) {
@@ -319,7 +336,7 @@ var script$1 = {
       // set start and end dates so that the line spands the whole plot
       const firstDate = new Date(this.dataItems[0].date);
       if (this.week) {
-        firstDate.setDate(firstDate.getDate() - 0.1); // one day before the first date in data
+        firstDate.setDate(firstDate.getDate() - 0.3); // one day before the first date in data
       } else {
         firstDate.setDate(firstDate.getDate() - 1); // one month before the first date in data
       }
@@ -465,7 +482,7 @@ var script$1 = {
       }
       return traces;
     },
-    xaxesTickFormat() {
+    xaxisTickFormat() {
       /*
       This function returns the tickformat of the x axis.
       If the plot is used to show data of one week, it returns the day of the week and  the day.
@@ -474,11 +491,14 @@ var script$1 = {
 
       if (this.week) {
         return "%A<br>%d %b";
+      }
+      if (this.sixMonths) {
+        return "%b";
       } else {
         return "%d %b";
       }
     },
-    xaxesTickAngle() {
+    xaxisTickAngle() {
       /*
       This function returns the tickangle of the x axis.
       If the plot is used to show data of one week, it returns 0.
@@ -486,9 +506,38 @@ var script$1 = {
       */
       if (this.week) {
         return 0;
+      }
+      if (this.sixMonths) {
+        return 0;
       } else {
         return 45;
       }
+    },
+    xaxisTickD() {
+      if (this.sixMonths === true) {
+        return "M1";
+      } else {
+        return this.dtick;
+      }
+    },
+    xaxisTickZero() {
+      if (this.sixMonths === true) {
+        console.log('zero six months ago');
+        const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
+        //return lastDate minus six months
+        console.log(lastDate);
+        console.log('six months ago: ' + new Date(lastDate.setMonth(lastDate.getMonth() - 6)));
+        return new Date(lastDate.setMonth(lastDate.getMonth() - 6));
+      } else {
+        return this.dataItems[0];
+      }
+    },
+    xaxisMode() {
+      if (this.sixMonths === true) {
+        return "period";
+      } else {
+        return "instant";
+      }
     }
   }
 };
@@ -615,7 +664,7 @@ var accessibilityPlot = normalizeComponent_1({
 var script = {
   name: 'citationsPlot',
   data: () => ({
-    divId: randstr('cit_plot')
+    divId: randstr('cit_plot_')
   }),
   props: {
     dataTraces: {

package/dist/oeb-visualizations.min.js

@@ -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 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);
+var oeb_visualizations=function(e,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t);function a(e){return Math.random().toString(36).replace("0.",e||"")}var r=function(e,t,i,s,a,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,a&&(h.functional=!0)),s&&(h._scopeId=s),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:a("acc_plot_"),max_access_time:0,config:{displaylogo:!1,responsive:!0,modeBarButtonsToRemove:["lasso"]}}),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},sixMonths:{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:50,t:20,pad:4},xaxis:{type:"date",ticklabelmode:this.xaxisMode(),title:this.xaxisTitle,font:{size:10},tickfont:{size:10},showgrid:!!this.sixMonths,griddash:"dot",gridwidth:1,gridcolor:"#d9d7d7",showspikes:!0,spikedash:"4px",spikethickness:1,tick0:this.xaxisTickZero(),dtick:this.xaxisTickD(),tickangle:this.xaxisTickAngle(),tickformat:this.xaxisTickFormat()},yaxis:{title:this.yaxisTitle,titlefont:{size:10},tickfont:{size:10}},template:"plotly_white",legend:{orientation:"h",yanchor:"bottom",y:-.5,xanchor:"left",x:.05,font:{size:8}},hoverlabel:{bgcolor:"#FFF"},hovermode:"closest"};console.log(this.divId),s.default.newPlot(this.divId,e,t,this.config)},methods:{generateColor(e,t){let i=[];for(let s=0;s<30;s++)switch(e[s]){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=[],s=[],a=0,r=0;for(let o=0;o<e.length;o++)null!==e[o].access_time?(i.push(e[o].access_time),s.push(e[o].date),a+=e[o].access_time,r+=1):i.length>0&&(t.access_time.push(i),t.date.push(s),i=[],s=[]);return t.access_time.push(i),t.date.push(s),t.average_access_time=a/r,t},buildAccessTimeTraces(e){var t=[];for(let i=0;i<e.access_time.length;i++){const s=e.access_time[i],a={x:e.date[i],y:s,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(e){const t=new Date(this.dataItems[0].date);this.week?t.setDate(t.getDate()-.3):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 s=0;s<e.length;s++)null===e[s].access_time&&null===e[s].code?t.push(e[s].date):null===e[s].access_time&&i.push(e[s].date);return{NA:t,down:i}},barTrace(e,t,i,s,a,r){const o={x:e.dates,y:e.access_times,marker:{color:e.colors},name:t,type:"bar",legendgroup:r,showlegend:i,hoverinfo:s,hovertemplate:a,width:864e5};return console.log(o),o},buildBarTraces(e,t,i,s){const a=`rgba(${t},.8)`,r=`rgba(${t},.2)`,o={dates:e,access_times:Array(e.length).fill(2),colors:Array(e.length).fill(a)},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","",s),this.barTrace(n,i,!0,"all",l,s)]},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},xaxisTickFormat(){return this.week?"%A<br>%d %b":this.sixMonths?"%b":"%d %b"},xaxisTickAngle(){return this.week||this.sixMonths?0:45},xaxisTickD(){return!0===this.sixMonths?"M1":this.dtick},xaxisTickZero(){if(!0===this.sixMonths){console.log("zero six months ago");const e=new Date(this.dataItems[this.dataItems.length-1].date);return console.log(e),console.log("six months ago: "+new Date(e.setMonth(e.getMonth()-6))),new Date(e.setMonth(e.getMonth()-6))}return this.dataItems[0]},xaxisMode(){return!0===this.sixMonths?"period":"instant"}}},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:a("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"};s.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);

package/dist/oeb-visualizations.umd.js

@@ -4,8 +4,13 @@
 var script$1 = {
   name: 'accessibilityPlot',
   data: () => ({
-    divId: randstr('acc_plot'),
-    max_access_time: 0
+    divId: randstr('acc_plot_'),
+    max_access_time: 0,
+    config: {
+      displaylogo: false,
+      responsive: true,
+      modeBarButtonsToRemove: ['lasso']
+    }
   }),
   props: {
     dtick: {
@@ -76,6 +81,15 @@ var script$1 = {
       required: false,
       default: false
     },
+    sixMonths: {
+      /*
+      whether the plot is used to show data of six months
+      If true, months are shown on the x axis
+      */
+      type: Boolean,
+      required: false,
+      default: false
+    },
     dataItems: {
       /*
       dataItems is an array of objects with keys "access_time", "date" and "code".
@@ -138,12 +152,13 @@ var script$1 = {
       margin: {
         l: 50,
         r: 50,
-        b: 70,
-        t: 70,
+        b: 50,
+        t: 20,
         pad: 4
       },
       xaxis: {
         type: 'date',
+        ticklabelmode: this.xaxisMode(),
         title: this.xaxisTitle,
         font: {
           size: 10
@@ -151,16 +166,17 @@ var script$1 = {
         tickfont: {
           size: 10
         },
-        showgrid: this.week ? true : false,
+        showgrid: this.sixMonths ? true : false,
         griddash: "dot",
         gridwidth: 1,
+        gridcolor: "#d9d7d7",
         showspikes: true,
         spikedash: "4px",
         spikethickness: 1,
-        tick0: this.dataItems[0].date,
-        dtick: this.dtick,
-        tickangle: this.xaxesTickAngle(),
-        tickformat: this.xaxesTickFormat()
+        tick0: this.xaxisTickZero(),
+        dtick: this.xaxisTickD(),
+        tickangle: this.xaxisTickAngle(),
+        tickformat: this.xaxisTickFormat()
       },
       yaxis: {
         title: this.yaxisTitle,
@@ -175,9 +191,9 @@ var script$1 = {
       legend: {
         orientation: 'h',
         yanchor: 'bottom',
-        y: 1.02,
-        xanchor: 'right',
-        x: 1,
+        y: -0.5,
+        xanchor: 'left',
+        x: 0.05,
         font: {
           size: 8
         }
@@ -187,7 +203,8 @@ var script$1 = {
       },
       hovermode: 'closest'
     };
-    Plotly__default["default"].newPlot(this.divId, traces, layout);
+    console.log(this.divId);
+    Plotly__default["default"].newPlot(this.divId, traces, layout, this.config);
   },
   methods: {
     generateColor(values, transparency) {
@@ -315,7 +332,7 @@ var script$1 = {
       // set start and end dates so that the line spands the whole plot
       const firstDate = new Date(this.dataItems[0].date);
       if (this.week) {
-        firstDate.setDate(firstDate.getDate() - 0.1); // one day before the first date in data
+        firstDate.setDate(firstDate.getDate() - 0.3); // one day before the first date in data
       } else {
         firstDate.setDate(firstDate.getDate() - 1); // one month before the first date in data
       }
@@ -461,7 +478,7 @@ var script$1 = {
       }
       return traces;
     },
-    xaxesTickFormat() {
+    xaxisTickFormat() {
       /*
       This function returns the tickformat of the x axis.
       If the plot is used to show data of one week, it returns the day of the week and  the day.
@@ -470,11 +487,14 @@ var script$1 = {
 
       if (this.week) {
         return "%A<br>%d %b";
+      }
+      if (this.sixMonths) {
+        return "%b";
       } else {
         return "%d %b";
       }
     },
-    xaxesTickAngle() {
+    xaxisTickAngle() {
       /*
       This function returns the tickangle of the x axis.
       If the plot is used to show data of one week, it returns 0.
@@ -482,9 +502,38 @@ var script$1 = {
       */
       if (this.week) {
         return 0;
+      }
+      if (this.sixMonths) {
+        return 0;
       } else {
         return 45;
       }
+    },
+    xaxisTickD() {
+      if (this.sixMonths === true) {
+        return "M1";
+      } else {
+        return this.dtick;
+      }
+    },
+    xaxisTickZero() {
+      if (this.sixMonths === true) {
+        console.log('zero six months ago');
+        const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
+        //return lastDate minus six months
+        console.log(lastDate);
+        console.log('six months ago: ' + new Date(lastDate.setMonth(lastDate.getMonth() - 6)));
+        return new Date(lastDate.setMonth(lastDate.getMonth() - 6));
+      } else {
+        return this.dataItems[0];
+      }
+    },
+    xaxisMode() {
+      if (this.sixMonths === true) {
+        return "period";
+      } else {
+        return "instant";
+      }
     }
   }
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
@@ -591,7 +640,7 @@ const __vue_inject_styles__$1 = undefined;
 /* scoped */
 const __vue_scope_id__$1 = undefined;
 /* module identifier */
-const __vue_module_identifier__$1 = "data-v-5ead469f";
+const __vue_module_identifier__$1 = "data-v-77c84891";
 /* functional template */
 const __vue_is_functional_template__$1 = false;
 /* style inject */
@@ -605,7 +654,7 @@ var accessibilityPlot = normalizeComponent_1({
 var script = {
   name: 'citationsPlot',
   data: () => ({
-    divId: randstr('cit_plot')
+    divId: randstr('cit_plot_')
   }),
   props: {
     dataTraces: {
@@ -777,7 +826,7 @@ const __vue_inject_styles__ = undefined;
 /* scoped */
 const __vue_scope_id__ = undefined;
 /* module identifier */
-const __vue_module_identifier__ = "data-v-64c53c55";
+const __vue_module_identifier__ = "data-v-4ac5e814";
 /* functional template */
 const __vue_is_functional_template__ = false;
 /* style inject */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inb/oeb_visualizations",
-  "version": "0.0.7",
+  "version": "0.0.8-beta",
   "description": "Collection of Vue components for data visualization in OpenEBench.",
   "author": "evamart",
   "license": "MIT",