@inb/oeb_visualizations 0.0.8-beta → 0.1.1

package/README.md

@@ -14,7 +14,88 @@ To install the package run:
 ```bash
 npm install @inb/oeb_visualizations
 ``` 
+## How to contribute 
+
+If you want to contribute to this project, please read the [contributing guidelines](/CONTRIBUTING.md) first.
 
 ## Development 
 
-🚧 Work in progress 🚧
+This project is built using [Vue.js](https://vuejs.org/). The components are written in [Vue](https://vuejs.org/) and the bundling is done using [Rollup](https://rollupjs.org/). The rollup configuration is in the `rollup.config.js` file and the main entry point is the `src/index.js` file, all the components are exported from this file. 
+The components are written in the `src/components` folder. Each component should be in a separate folder and should contain the `.vue` file and, optionally, a `.scss` file. In order to be used in other applications, the package should be built, which creates a `dist` folder with the compiled files.
+
+The documentation is built using [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). The content of the documentation is written in markdown and should be added to the `docs` folder. 
+The configuration of the documentation is in the `mkdocs.yml` file. This file contains the structure of the documentation, including navigation, the theme used, etc. More information about how to configure the documentation can be found in the [documentation](https://squidfunk.github.io/mkdocs-material/reference/).
+
+### How to add a new visualization.
+
+If you want to add a new visualization, you should create a new component for it. Follow the steps below:
+
+- Create the new component in the `src/components` folder. A component can be written in only one file or, if it is complex, it can be divided into smaller components in a folder.  
+- Add the new component to the `index.js`, as following: 
+
+    ```js
+    import newComponent from './components/newComponent.vue'
+
+    export {
+        newComponent,
+        ...
+    }
+    ```
+
+> If the new component is a complex component, it should be divided into smaller components. In this case, the `index.js` file should export the smaller components and the main component. 
+
+> The documentation should be updated to include the new component.
+
+### How to document a new component.
+
+To document a new component, add the new component to the documentation as a single file in the `docs/components` folder. Documentation is written in markdown and should contain at least the following sections: 
+
+- Description of how the data being represented. 
+- How to use it. 
+- Example of usage. 
+- Props and events. 
+
+### How to build the package locally. 
+
+To build the package locally, run: 
+```bash
+npm run build
+```
+This will create a `dist` folder with the compiled files.
+The component will be available for other applications running locally to use. 
+To use the component in another application, you should link the package locally. To do so, run: 
+```bash
+npm link
+```
+Then, in the application where you want to use the component, run: 
+```bash
+npm link @inb/oeb_visualizations
+```
+This will link the local package to the application.
+
+### How to serve the documentation locally.
+
+The documentation is built using [mkdocs](https://www.mkdocs.org/). To serve the documentation locally, run:
+```bash
+mkdocs serve
+```
+This will start a local server and the documentation will be available at `http://localhost:8000/`.
+
+
+## Publishing 
+
+### Publishing a new version of the package to npm
+
+To publish a new version of the package to [npm](https://www.npmjs.com), follow the steps below:
+
+- Update the version in the `package.json` file. If all commit messages follow the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard, you can use the `cz bump --version-scheme semver` command to update the version and the `CHANGELOG.md` file. 
+- Run the `npm run build` command to build the package. 
+- Run the `npm publish` command to publish the package to npmjs.
+
+This package is published under the `@inb` scope as `@inb/oeb_visualizations`. 
+The package is available at [https://www.npmjs.com/package/@inb/oeb_visualizations](https://www.npmjs.com/package/@inb/oeb_visualizations).
+
+### Publishing the documentation
+
+The documentation is built and deployed to the `gh-pages` branch using GitHub Actions. Each time a new commit is pushed to the `main` branch, the documentation is built and deployed to the `gh-pages` branch.  
+The documentation is available at [https://inab.github.io/oeb-visualizations/](https://inab.github.io/oeb-visualizations/).

package/dist/oeb-visualizations.cjs.js

@@ -13,6 +13,13 @@ var script$1 = {
     }
   }),
   props: {
+    xrange: {
+      /*
+      xrange is the range of the x axis in ms.
+      */
+      type: Array,
+      required: false
+    },
     dtick: {
       /*
       dtick is the interval between ticks on the x axis in ms.
@@ -72,6 +79,14 @@ var script$1 = {
       required: false,
       default: 350
     },
+    width: {
+      /*
+      width is the width of the plot in px.
+      */
+      type: Number,
+      required: false,
+      default: 700
+    },
     week: {
       /*
       whether the plot is used to show data of one week
@@ -123,9 +138,12 @@ var script$1 = {
           if (value[i].code !== null && typeof value[i].code !== 'number') {
             console.error(`[oeb-visualizations warn] code must be null or a number in dataItems prop item (at position ${i})`);
           }
-          // Date must be a string containing a date
-          if (typeof value[i].date !== 'string' || isNaN(Date.parse(value[i].date))) {
-            console.error(`[oeb-visualizations warn] date must be a string containing a date in dataItems prop item (at position ${i})`);
+          // Date must be a string containing a parseable date, or a number (timestamp)
+          const validDateString = typeof value[i].date === 'string' && !isNaN(Date.parse(value[i].date));
+          const validDateNumber = typeof value[i].date === 'number';
+          if (!validDateString && !validDateNumber) {
+            console.error(`[oeb-visualizations warn] date must be a string containing a date or a number in dataItems prop item (at position ${i})`);
+            console.error(`[oeb-visualizations warn] date type is ${typeof value[i].date} and the value is ${value[i].date}`);
           }
 
           // And date cannot be null
@@ -138,7 +156,13 @@ var script$1 = {
     }
   },
   mounted() {
-    this.max_access_time = Math.max(...this.dataItems.map(item => item.access_time));
+    // Compute the tallest online bar from real measurements only.
+    // Math.max over an array containing null coerces null -> 0, so a site
+    // that was down the whole window would yield 0 and render the
+    // offline/NA bars with zero height (invisible). Ignore nulls/NaN and
+    // apply a floor so down-only sites still draw full-height bars.
+    const times = this.dataItems.map(item => item.access_time).filter(t => typeof t === 'number' && !isNaN(t));
+    this.max_access_time = times.length ? Math.max(...times) : 100;
     var traces = this.buildOnlineTraces(this.dataItems); // generate line traces
 
     traces = traces.concat(this.buildOfflineNATraces(this.dataItems)); //  generate bar traces
@@ -149,6 +173,7 @@ var script$1 = {
       showlegend: true,
       autosize: true,
       height: this.height,
+      width: this.width,
       margin: {
         l: 50,
         r: 50,
@@ -176,7 +201,9 @@ var script$1 = {
         tick0: this.xaxisTickZero(),
         dtick: this.xaxisTickD(),
         tickangle: this.xaxisTickAngle(),
-        tickformat: this.xaxisTickFormat()
+        tickformat: this.xaxisTickFormat(),
+        tickvals: this.sixMonths ? this.monthTickVales() : null,
+        range: this.xaxisRange()
       },
       yaxis: {
         title: this.yaxisTitle,
@@ -253,7 +280,11 @@ var script$1 = {
       var sum = 0;
       var nonNullValues = 0;
       for (let i = 0; i < data.length; i++) {
-        if (data[i].access_time !== null) {
+        // Only genuine successful measurements belong on the online
+        // line. An error code with a recorded access_time must not
+        // sneak in (it would draw green and skew the average); treat it
+        // as a break, just like a null access_time.
+        if (data[i].access_time !== null && !this.isErrorCode(data[i].code)) {
           // keep adding to subarray
           subarrayTime.push(data[i].access_time);
           subarrayDate.push(data[i].date);
@@ -380,15 +411,37 @@ var script$1 = {
       traces.push(this.buildAvgAccessTimeTrace(subarrays.average_access_time));
       return traces;
     },
+    isErrorCode(code) {
+      /*
+      Returns true if the HTTP code denotes the server being offline.
+      Single source of truth shared by the online-line and offline-bar
+      logic so redness is decided consistently by the response code.
+      */
+      const errorCodes = [400, 403, 404, 408, 500, 502, 503, 504];
+      return errorCodes.includes(code);
+    },
     extractOfflineNADates(data) {
+      /*
+      This function extracts dates with access_time null. 
+      Depending on the code, the server is offline or NA on those dates.
+       Arguments:
+          - data: array of objects with keys "access_time", "date" and "code". access_time and code can be null
+      
+      Returns an object with keys:
+          - NA: array of dates with code null (no information available)
+          - down: array of dates with code in errorCodes (server offline)
+       Classification is driven by the HTTP code, not by access_time
+      null-ness: an error response that happened to record an access_time
+      is still "offline", and a missing code is "no information available".
+      */
       const resultNA = [];
       const resultOffline = [];
       for (let i = 0; i < data.length; i++) {
-        // if the access_time is null and the code is null, it means that the monitoring was down
-        if (data[i].access_time === null && data[i].code === null) {
+        // no code at all -> grey "No information available"
+        if (data[i].code === null) {
           resultNA.push(data[i].date);
-          // if the access_time is null and the code is in errorCodes, it means that the server is offline
-        } else if (data[i].access_time === null) {
+          // an error code -> red "Offline"
+        } else if (this.isErrorCode(data[i].code)) {
           resultOffline.push(data[i].date);
         }
       }
@@ -489,7 +542,7 @@ var script$1 = {
         return "%A<br>%d %b";
       }
       if (this.sixMonths) {
-        return "%b";
+        return "%d %b";
       } else {
         return "%d %b";
       }
@@ -504,7 +557,7 @@ var script$1 = {
         return 0;
       }
       if (this.sixMonths) {
-        return 0;
+        return 45;
       } else {
         return 45;
       }
@@ -534,6 +587,24 @@ var script$1 = {
       } else {
         return "instant";
       }
+    },
+    xaxisRange() {
+      if (!this.xrange) {
+        return [this.dataItems[0], this.dataItems[this.dataItems.length - 1]];
+      } else {
+        return this.xrange;
+      }
+    },
+    monthTickVales() {
+      // First day of month of last date and previous five months
+      const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
+      const lastMonth = lastDate.getMonth();
+      const lastYear = lastDate.getFullYear();
+      const tickValues = [];
+      for (let i = 0; i < 6; i++) {
+        tickValues.push(new Date(lastYear, lastMonth - i, 1));
+      }
+      return tickValues;
     }
   }
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
@@ -640,7 +711,7 @@ const __vue_inject_styles__$1 = undefined;
 /* scoped */
 const __vue_scope_id__$1 = undefined;
 /* module identifier */
-const __vue_module_identifier__$1 = "data-v-77c84891";
+const __vue_module_identifier__$1 = "data-v-6f184d3f";
 /* functional template */
 const __vue_is_functional_template__$1 = false;
 /* style inject */

package/dist/oeb-visualizations.esm.js

@@ -17,6 +17,13 @@ var script$1 = {
     }
   }),
   props: {
+    xrange: {
+      /*
+      xrange is the range of the x axis in ms.
+      */
+      type: Array,
+      required: false
+    },
     dtick: {
       /*
       dtick is the interval between ticks on the x axis in ms.
@@ -76,6 +83,14 @@ var script$1 = {
       required: false,
       default: 350
     },
+    width: {
+      /*
+      width is the width of the plot in px.
+      */
+      type: Number,
+      required: false,
+      default: 700
+    },
     week: {
       /*
       whether the plot is used to show data of one week
@@ -127,9 +142,12 @@ var script$1 = {
           if (value[i].code !== null && typeof value[i].code !== 'number') {
             console.error(`[oeb-visualizations warn] code must be null or a number in dataItems prop item (at position ${i})`);
           }
-          // Date must be a string containing a date
-          if (typeof value[i].date !== 'string' || isNaN(Date.parse(value[i].date))) {
-            console.error(`[oeb-visualizations warn] date must be a string containing a date in dataItems prop item (at position ${i})`);
+          // Date must be a string containing a parseable date, or a number (timestamp)
+          const validDateString = typeof value[i].date === 'string' && !isNaN(Date.parse(value[i].date));
+          const validDateNumber = typeof value[i].date === 'number';
+          if (!validDateString && !validDateNumber) {
+            console.error(`[oeb-visualizations warn] date must be a string containing a date or a number in dataItems prop item (at position ${i})`);
+            console.error(`[oeb-visualizations warn] date type is ${typeof value[i].date} and the value is ${value[i].date}`);
           }
 
           // And date cannot be null
@@ -142,7 +160,13 @@ var script$1 = {
     }
   },
   mounted() {
-    this.max_access_time = Math.max(...this.dataItems.map(item => item.access_time));
+    // Compute the tallest online bar from real measurements only.
+    // Math.max over an array containing null coerces null -> 0, so a site
+    // that was down the whole window would yield 0 and render the
+    // offline/NA bars with zero height (invisible). Ignore nulls/NaN and
+    // apply a floor so down-only sites still draw full-height bars.
+    const times = this.dataItems.map(item => item.access_time).filter(t => typeof t === 'number' && !isNaN(t));
+    this.max_access_time = times.length ? Math.max(...times) : 100;
     var traces = this.buildOnlineTraces(this.dataItems); // generate line traces
 
     traces = traces.concat(this.buildOfflineNATraces(this.dataItems)); //  generate bar traces
@@ -153,6 +177,7 @@ var script$1 = {
       showlegend: true,
       autosize: true,
       height: this.height,
+      width: this.width,
       margin: {
         l: 50,
         r: 50,
@@ -180,7 +205,9 @@ var script$1 = {
         tick0: this.xaxisTickZero(),
         dtick: this.xaxisTickD(),
         tickangle: this.xaxisTickAngle(),
-        tickformat: this.xaxisTickFormat()
+        tickformat: this.xaxisTickFormat(),
+        tickvals: this.sixMonths ? this.monthTickVales() : null,
+        range: this.xaxisRange()
       },
       yaxis: {
         title: this.yaxisTitle,
@@ -257,7 +284,11 @@ var script$1 = {
       var sum = 0;
       var nonNullValues = 0;
       for (let i = 0; i < data.length; i++) {
-        if (data[i].access_time !== null) {
+        // Only genuine successful measurements belong on the online
+        // line. An error code with a recorded access_time must not
+        // sneak in (it would draw green and skew the average); treat it
+        // as a break, just like a null access_time.
+        if (data[i].access_time !== null && !this.isErrorCode(data[i].code)) {
           // keep adding to subarray
           subarrayTime.push(data[i].access_time);
           subarrayDate.push(data[i].date);
@@ -384,15 +415,37 @@ var script$1 = {
       traces.push(this.buildAvgAccessTimeTrace(subarrays.average_access_time));
       return traces;
     },
+    isErrorCode(code) {
+      /*
+      Returns true if the HTTP code denotes the server being offline.
+      Single source of truth shared by the online-line and offline-bar
+      logic so redness is decided consistently by the response code.
+      */
+      const errorCodes = [400, 403, 404, 408, 500, 502, 503, 504];
+      return errorCodes.includes(code);
+    },
     extractOfflineNADates(data) {
+      /*
+      This function extracts dates with access_time null. 
+      Depending on the code, the server is offline or NA on those dates.
+       Arguments:
+          - data: array of objects with keys "access_time", "date" and "code". access_time and code can be null
+      
+      Returns an object with keys:
+          - NA: array of dates with code null (no information available)
+          - down: array of dates with code in errorCodes (server offline)
+       Classification is driven by the HTTP code, not by access_time
+      null-ness: an error response that happened to record an access_time
+      is still "offline", and a missing code is "no information available".
+      */
       const resultNA = [];
       const resultOffline = [];
       for (let i = 0; i < data.length; i++) {
-        // if the access_time is null and the code is null, it means that the monitoring was down
-        if (data[i].access_time === null && data[i].code === null) {
+        // no code at all -> grey "No information available"
+        if (data[i].code === null) {
           resultNA.push(data[i].date);
-          // if the access_time is null and the code is in errorCodes, it means that the server is offline
-        } else if (data[i].access_time === null) {
+          // an error code -> red "Offline"
+        } else if (this.isErrorCode(data[i].code)) {
           resultOffline.push(data[i].date);
         }
       }
@@ -493,7 +546,7 @@ var script$1 = {
         return "%A<br>%d %b";
       }
       if (this.sixMonths) {
-        return "%b";
+        return "%d %b";
       } else {
         return "%d %b";
       }
@@ -508,7 +561,7 @@ var script$1 = {
         return 0;
       }
       if (this.sixMonths) {
-        return 0;
+        return 45;
       } else {
         return 45;
       }
@@ -538,6 +591,24 @@ var script$1 = {
       } else {
         return "instant";
       }
+    },
+    xaxisRange() {
+      if (!this.xrange) {
+        return [this.dataItems[0], this.dataItems[this.dataItems.length - 1]];
+      } else {
+        return this.xrange;
+      }
+    },
+    monthTickVales() {
+      // First day of month of last date and previous five months
+      const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
+      const lastMonth = lastDate.getMonth();
+      const lastYear = lastDate.getFullYear();
+      const tickValues = [];
+      for (let i = 0; i < 6; i++) {
+        tickValues.push(new Date(lastYear, lastMonth - i, 1));
+      }
+      return tickValues;
     }
   }
 };

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 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);
+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,d){"boolean"!=typeof o&&(l=n,n=o,o=!1);var c,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?(c=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=c):t&&(c=o?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,n(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}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:{xrange:{type:Array,required:!1},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},width:{type:Number,required:!1,default:700},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})`);const i="string"==typeof e[t].date&&!isNaN(Date.parse(e[t].date)),s="number"==typeof e[t].date;i||s||(console.error(`[oeb-visualizations warn] date must be a string containing a date or a number in dataItems prop item (at position ${t})`),console.error(`[oeb-visualizations warn] date type is ${typeof e[t].date} and the value is ${e[t].date}`)),null===e[t].date&&console.error(`[oeb-visualizations warn] date cannot be null in dataItems prop item (at position ${t})`)}return!0}}},mounted(){const e=this.dataItems.map((e=>e.access_time)).filter((e=>"number"==typeof e&&!isNaN(e)));this.max_access_time=e.length?Math.max(...e):100;var t=this.buildOnlineTraces(this.dataItems);t=t.concat(this.buildOfflineNATraces(this.dataItems));const i={bargap:0,barmode:"stack",showlegend:!0,autosize:!0,height:this.height,width:this.width,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(),tickvals:this.sixMonths?this.monthTickVales():null,range:this.xaxisRange()},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,t,i,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||this.isErrorCode(e[o].code)?i.length>0&&(t.access_time.push(i),t.date.push(s),i=[],s=[]):(i.push(e[o].access_time),s.push(e[o].date),a+=e[o].access_time,r+=1);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},isErrorCode:e=>[400,403,404,408,500,502,503,504].includes(e),extractOfflineNADates(e){const t=[],i=[];for(let s=0;s<e.length;s++)null===e[s].code?t.push(e[s].date):this.isErrorCode(e[s].code)&&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,"%d %b")},xaxisTickAngle(){return this.week?0:(this.sixMonths,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"},xaxisRange(){return this.xrange?this.xrange:[this.dataItems[0],this.dataItems[this.dataItems.length-1]]},monthTickVales(){const e=new Date(this.dataItems[this.dataItems.length-1].date),t=e.getMonth(),i=e.getFullYear(),s=[];for(let e=0;e<6;e++)s.push(new Date(i,t-e,1));return s}}},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 d=function(e){d.installed||(d.installed=!0,Object.entries(l).forEach((([t,i])=>{e.component(t,i)})))},c={install:d};{let e=null;"undefined"!=typeof window?e=window.Vue:"undefined"!=typeof global&&(e=global.Vue),e&&e.use(c)}return e.accessibilityPlot=o,e.citationsPlot=n,e.default=c,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Plotly);

package/dist/oeb-visualizations.umd.js

@@ -13,6 +13,13 @@ var script$1 = {
     }
   }),
   props: {
+    xrange: {
+      /*
+      xrange is the range of the x axis in ms.
+      */
+      type: Array,
+      required: false
+    },
     dtick: {
       /*
       dtick is the interval between ticks on the x axis in ms.
@@ -72,6 +79,14 @@ var script$1 = {
       required: false,
       default: 350
     },
+    width: {
+      /*
+      width is the width of the plot in px.
+      */
+      type: Number,
+      required: false,
+      default: 700
+    },
     week: {
       /*
       whether the plot is used to show data of one week
@@ -123,9 +138,12 @@ var script$1 = {
           if (value[i].code !== null && typeof value[i].code !== 'number') {
             console.error(`[oeb-visualizations warn] code must be null or a number in dataItems prop item (at position ${i})`);
           }
-          // Date must be a string containing a date
-          if (typeof value[i].date !== 'string' || isNaN(Date.parse(value[i].date))) {
-            console.error(`[oeb-visualizations warn] date must be a string containing a date in dataItems prop item (at position ${i})`);
+          // Date must be a string containing a parseable date, or a number (timestamp)
+          const validDateString = typeof value[i].date === 'string' && !isNaN(Date.parse(value[i].date));
+          const validDateNumber = typeof value[i].date === 'number';
+          if (!validDateString && !validDateNumber) {
+            console.error(`[oeb-visualizations warn] date must be a string containing a date or a number in dataItems prop item (at position ${i})`);
+            console.error(`[oeb-visualizations warn] date type is ${typeof value[i].date} and the value is ${value[i].date}`);
           }
 
           // And date cannot be null
@@ -138,7 +156,13 @@ var script$1 = {
     }
   },
   mounted() {
-    this.max_access_time = Math.max(...this.dataItems.map(item => item.access_time));
+    // Compute the tallest online bar from real measurements only.
+    // Math.max over an array containing null coerces null -> 0, so a site
+    // that was down the whole window would yield 0 and render the
+    // offline/NA bars with zero height (invisible). Ignore nulls/NaN and
+    // apply a floor so down-only sites still draw full-height bars.
+    const times = this.dataItems.map(item => item.access_time).filter(t => typeof t === 'number' && !isNaN(t));
+    this.max_access_time = times.length ? Math.max(...times) : 100;
     var traces = this.buildOnlineTraces(this.dataItems); // generate line traces
 
     traces = traces.concat(this.buildOfflineNATraces(this.dataItems)); //  generate bar traces
@@ -149,6 +173,7 @@ var script$1 = {
       showlegend: true,
       autosize: true,
       height: this.height,
+      width: this.width,
       margin: {
         l: 50,
         r: 50,
@@ -176,7 +201,9 @@ var script$1 = {
         tick0: this.xaxisTickZero(),
         dtick: this.xaxisTickD(),
         tickangle: this.xaxisTickAngle(),
-        tickformat: this.xaxisTickFormat()
+        tickformat: this.xaxisTickFormat(),
+        tickvals: this.sixMonths ? this.monthTickVales() : null,
+        range: this.xaxisRange()
       },
       yaxis: {
         title: this.yaxisTitle,
@@ -253,7 +280,11 @@ var script$1 = {
       var sum = 0;
       var nonNullValues = 0;
       for (let i = 0; i < data.length; i++) {
-        if (data[i].access_time !== null) {
+        // Only genuine successful measurements belong on the online
+        // line. An error code with a recorded access_time must not
+        // sneak in (it would draw green and skew the average); treat it
+        // as a break, just like a null access_time.
+        if (data[i].access_time !== null && !this.isErrorCode(data[i].code)) {
           // keep adding to subarray
           subarrayTime.push(data[i].access_time);
           subarrayDate.push(data[i].date);
@@ -380,15 +411,37 @@ var script$1 = {
       traces.push(this.buildAvgAccessTimeTrace(subarrays.average_access_time));
       return traces;
     },
+    isErrorCode(code) {
+      /*
+      Returns true if the HTTP code denotes the server being offline.
+      Single source of truth shared by the online-line and offline-bar
+      logic so redness is decided consistently by the response code.
+      */
+      const errorCodes = [400, 403, 404, 408, 500, 502, 503, 504];
+      return errorCodes.includes(code);
+    },
     extractOfflineNADates(data) {
+      /*
+      This function extracts dates with access_time null. 
+      Depending on the code, the server is offline or NA on those dates.
+       Arguments:
+          - data: array of objects with keys "access_time", "date" and "code". access_time and code can be null
+      
+      Returns an object with keys:
+          - NA: array of dates with code null (no information available)
+          - down: array of dates with code in errorCodes (server offline)
+       Classification is driven by the HTTP code, not by access_time
+      null-ness: an error response that happened to record an access_time
+      is still "offline", and a missing code is "no information available".
+      */
       const resultNA = [];
       const resultOffline = [];
       for (let i = 0; i < data.length; i++) {
-        // if the access_time is null and the code is null, it means that the monitoring was down
-        if (data[i].access_time === null && data[i].code === null) {
+        // no code at all -> grey "No information available"
+        if (data[i].code === null) {
           resultNA.push(data[i].date);
-          // if the access_time is null and the code is in errorCodes, it means that the server is offline
-        } else if (data[i].access_time === null) {
+          // an error code -> red "Offline"
+        } else if (this.isErrorCode(data[i].code)) {
           resultOffline.push(data[i].date);
         }
       }
@@ -489,7 +542,7 @@ var script$1 = {
         return "%A<br>%d %b";
       }
       if (this.sixMonths) {
-        return "%b";
+        return "%d %b";
       } else {
         return "%d %b";
       }
@@ -504,7 +557,7 @@ var script$1 = {
         return 0;
       }
       if (this.sixMonths) {
-        return 0;
+        return 45;
       } else {
         return 45;
       }
@@ -534,6 +587,24 @@ var script$1 = {
       } else {
         return "instant";
       }
+    },
+    xaxisRange() {
+      if (!this.xrange) {
+        return [this.dataItems[0], this.dataItems[this.dataItems.length - 1]];
+      } else {
+        return this.xrange;
+      }
+    },
+    monthTickVales() {
+      // First day of month of last date and previous five months
+      const lastDate = new Date(this.dataItems[this.dataItems.length - 1].date);
+      const lastMonth = lastDate.getMonth();
+      const lastYear = lastDate.getFullYear();
+      const tickValues = [];
+      for (let i = 0; i < 6; i++) {
+        tickValues.push(new Date(lastYear, lastMonth - i, 1));
+      }
+      return tickValues;
     }
   }
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
@@ -640,7 +711,7 @@ const __vue_inject_styles__$1 = undefined;
 /* scoped */
 const __vue_scope_id__$1 = undefined;
 /* module identifier */
-const __vue_module_identifier__$1 = "data-v-77c84891";
+const __vue_module_identifier__$1 = "data-v-6f184d3f";
 /* functional template */
 const __vue_is_functional_template__$1 = false;
 /* style inject */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inb/oeb_visualizations",
-  "version": "0.0.8-beta",
+  "version": "0.1.1",
   "description": "Collection of Vue components for data visualization in OpenEBench.",
   "author": "evamart",
   "license": "MIT",
@@ -23,7 +23,6 @@
   "files": [
     "dist/*"
   ],
-
   "vetur": {
     "tags": "tags.json",
     "attributes": "attributes.json"