@inb/oeb_visualizations 0.1.1 → 0.1.2

package/dist/oeb-visualizations.cjs.js

@@ -285,9 +285,11 @@ var script$1 = {
         // 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
+          // keep adding to subarray. Snap the x to the day centre so
+          // the online marker sits in the middle of its day, on the
+          // same grid as the offline/NA bars.
           subarrayTime.push(data[i].access_time);
-          subarrayDate.push(data[i].date);
+          subarrayDate.push(this.dayCenter(data[i].date));
           sum += data[i].access_time;
           nonNullValues += 1;
         } else {
@@ -420,29 +422,62 @@ var script$1 = {
       const errorCodes = [400, 403, 404, 408, 500, 502, 503, 504];
       return errorCodes.includes(code);
     },
+    dayCenter(date) {
+      /*
+      Snaps a date to the centre (12:00) of its UTC calendar day, returned
+      as ms since epoch. The whole chart is a daily grid: null placeholders
+      arrive at 00:00Z and real probes mid-afternoon, so aligning every
+      point and every bar to the day centre keeps them on one grid. That is
+      what makes blocks sit centred on their day and prevents bars from
+      bleeding into a neighbouring day's measurement.
+      */
+      const d = new Date(date);
+      d.setUTCHours(0, 0, 0, 0);
+      return d.getTime() + 1000 * 3600 * 24 / 2;
+    },
+    computeDaySlots(data) {
+      /*
+      Returns, for every data point, the bar slot it should occupy: a full
+      calendar day centred on that day (see dayCenter). Consecutive
+      offline/NA days therefore tile into a single block, and because every
+      online point is snapped to the same daily grid a bar never overlaps a
+      measurement.
+       Arguments:
+          - data: array of objects with a "date" key
+       Returns an array (parallel to data) of objects with keys:
+          - center: slot centre (day centre), in ms since epoch
+          - width: slot width, in ms (one full day)
+      */
+      const DAY = 1000 * 3600 * 24;
+      return data.map(item => ({
+        center: this.dayCenter(item.date),
+        width: DAY
+      }));
+    },
     extractOfflineNADates(data) {
       /*
-      This function extracts dates with access_time null. 
-      Depending on the code, the server is offline or NA on those dates.
+      This function extracts the bar slots of points with no successful
+      measurement. 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)
+       Returns an object with keys:
+          - NA: array of slots (see computeDaySlots) for code null (no information available)
+          - down: array of slots for 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 slots = this.computeDaySlots(data);
       const resultNA = [];
       const resultOffline = [];
       for (let i = 0; i < data.length; i++) {
         // no code at all -> grey "No information available"
         if (data[i].code === null) {
-          resultNA.push(data[i].date);
+          resultNA.push(slots[i]);
           // an error code -> red "Offline"
         } else if (this.isErrorCode(data[i].code)) {
-          resultOffline.push(data[i].date);
+          resultOffline.push(slots[i]);
         }
       }
       return {
@@ -454,10 +489,12 @@ var script$1 = {
       /*
       This function builds a bar trace.
       Arguments:
-          - data: object with keys "dates" and "access_times"
-              - dates: array of dates
+          - data: object with keys "dates", "access_times", "colors" and "widths"
+              - dates: array of dates (slot centres, in ms)
               - access_times: array of access_times
               - colors: array of colors in rgba format (eg:"rgba(255, 153, 145,0.8)")
+              - widths: array of per-bar widths in ms, so each bar fills its
+                own time slot (see computeDaySlots) instead of a fixed day
           - name: name of the trace
       */
       const trace = {
@@ -472,35 +509,43 @@ var script$1 = {
         showlegend: showlegend,
         hoverinfo: hoverinfo,
         hovertemplate: hovertemplate,
-        width: 1000 * 3600 * 24 * 1 // 100% of the space between two dates
+        width: data.widths
       };
-
-      console.log(trace);
       return trace;
     },
-    buildBarTraces(dates, color, label, group) {
+    buildBarTraces(slots, color, label, group) {
       /*
       This function builds the series used to display the offline/NA bars.
-      For each date, two columns are created: one very short and one tall. 
-      These columns cover the whole plot height. 
-      The tall column is colored with colorStrong and the short one with colorLight.
+      For each slot two stacked columns are created that together span the
+      whole plot height: a thin strong-coloured band sitting on the axis,
+      and a light-coloured column filling the rest of the height above it.
        Arguments:
-          - dates: array of dates
+          - slots: array of slots ({ center, width }), see computeDaySlots
           - color: color of the bars
        Returns array with offline and NA traces
        */
 
       const colorStrong = `rgba(${color},.8)`;
       const colorLight = `rgba(${color},.2)`;
+      const centers = slots.map(s => s.center);
+      const widths = slots.map(s => s.width);
+
+      // Total background height (keeps the previous y-axis extent). The
+      // strong colour is a thin band on the axis; the light colour fills
+      // the remaining height stacked on top of it.
+      const totalHeight = 2 + this.max_access_time * 1.1;
+      const baseHeight = totalHeight * 0.03;
       const dataShort = {
-        dates: dates,
-        access_times: Array(dates.length).fill(2),
-        colors: Array(dates.length).fill(colorStrong)
+        dates: centers,
+        access_times: Array(slots.length).fill(baseHeight),
+        colors: Array(slots.length).fill(colorStrong),
+        widths: widths
       };
       const dataTall = {
-        dates: dates,
-        access_times: Array(dates.length).fill(this.max_access_time * 1.1),
-        colors: Array(dates.length).fill(colorLight)
+        dates: centers,
+        access_times: Array(slots.length).fill(totalHeight - baseHeight),
+        colors: Array(slots.length).fill(colorLight),
+        widths: widths
       };
       const hovertemplate = `<b>${label}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;
       const traceShort = this.barTrace(dataShort, label, false, 'skip', '', group);
@@ -522,12 +567,10 @@ var script$1 = {
       // Down arrays
       if (arrays.down.length > 0) {
         traces = traces.concat(this.buildBarTraces(arrays.down, this.colorOffline, 'Offline', 'down'));
-        console.log(arrays.down);
       }
       // NA arrays
       if (arrays.NA.length > 0) {
         traces = traces.concat(this.buildBarTraces(arrays.NA, this.colorNA, 'No information available', 'na'));
-        console.log(arrays.NA);
       }
       return traces;
     },
@@ -578,7 +621,10 @@ var script$1 = {
         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];
+        // Anchor day ticks at the day centre (noon) so each label sits
+        // under the middle of its day block, aligned with the online dot
+        // (which is snapped to the same day centre).
+        return this.dayCenter(this.dataItems[0].date);
       }
     },
     xaxisMode() {
@@ -589,11 +635,17 @@ var script$1 = {
       }
     },
     xaxisRange() {
-      if (!this.xrange) {
-        return [this.dataItems[0], this.dataItems[this.dataItems.length - 1]];
-      } else {
+      if (this.xrange) {
         return this.xrange;
       }
+      // Span whole calendar days so the first and last day blocks (which
+      // are centred on their day, one full day wide) are fully visible.
+      const DAY = 1000 * 3600 * 24;
+      const firstDay = new Date(this.dataItems[0].date);
+      firstDay.setUTCHours(0, 0, 0, 0);
+      const lastDay = new Date(this.dataItems[this.dataItems.length - 1].date);
+      lastDay.setUTCHours(0, 0, 0, 0);
+      return [firstDay.getTime(), lastDay.getTime() + DAY];
     },
     monthTickVales() {
       // First day of month of last date and previous five months
@@ -711,7 +763,7 @@ const __vue_inject_styles__$1 = undefined;
 /* scoped */
 const __vue_scope_id__$1 = undefined;
 /* module identifier */
-const __vue_module_identifier__$1 = "data-v-6f184d3f";
+const __vue_module_identifier__$1 = "data-v-bab9d544";
 /* functional template */
 const __vue_is_functional_template__$1 = false;
 /* style inject */

package/dist/oeb-visualizations.esm.js

@@ -289,9 +289,11 @@ var script$1 = {
         // 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
+          // keep adding to subarray. Snap the x to the day centre so
+          // the online marker sits in the middle of its day, on the
+          // same grid as the offline/NA bars.
           subarrayTime.push(data[i].access_time);
-          subarrayDate.push(data[i].date);
+          subarrayDate.push(this.dayCenter(data[i].date));
           sum += data[i].access_time;
           nonNullValues += 1;
         } else {
@@ -424,29 +426,62 @@ var script$1 = {
       const errorCodes = [400, 403, 404, 408, 500, 502, 503, 504];
       return errorCodes.includes(code);
     },
+    dayCenter(date) {
+      /*
+      Snaps a date to the centre (12:00) of its UTC calendar day, returned
+      as ms since epoch. The whole chart is a daily grid: null placeholders
+      arrive at 00:00Z and real probes mid-afternoon, so aligning every
+      point and every bar to the day centre keeps them on one grid. That is
+      what makes blocks sit centred on their day and prevents bars from
+      bleeding into a neighbouring day's measurement.
+      */
+      const d = new Date(date);
+      d.setUTCHours(0, 0, 0, 0);
+      return d.getTime() + 1000 * 3600 * 24 / 2;
+    },
+    computeDaySlots(data) {
+      /*
+      Returns, for every data point, the bar slot it should occupy: a full
+      calendar day centred on that day (see dayCenter). Consecutive
+      offline/NA days therefore tile into a single block, and because every
+      online point is snapped to the same daily grid a bar never overlaps a
+      measurement.
+       Arguments:
+          - data: array of objects with a "date" key
+       Returns an array (parallel to data) of objects with keys:
+          - center: slot centre (day centre), in ms since epoch
+          - width: slot width, in ms (one full day)
+      */
+      const DAY = 1000 * 3600 * 24;
+      return data.map(item => ({
+        center: this.dayCenter(item.date),
+        width: DAY
+      }));
+    },
     extractOfflineNADates(data) {
       /*
-      This function extracts dates with access_time null. 
-      Depending on the code, the server is offline or NA on those dates.
+      This function extracts the bar slots of points with no successful
+      measurement. 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)
+       Returns an object with keys:
+          - NA: array of slots (see computeDaySlots) for code null (no information available)
+          - down: array of slots for 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 slots = this.computeDaySlots(data);
       const resultNA = [];
       const resultOffline = [];
       for (let i = 0; i < data.length; i++) {
         // no code at all -> grey "No information available"
         if (data[i].code === null) {
-          resultNA.push(data[i].date);
+          resultNA.push(slots[i]);
           // an error code -> red "Offline"
         } else if (this.isErrorCode(data[i].code)) {
-          resultOffline.push(data[i].date);
+          resultOffline.push(slots[i]);
         }
       }
       return {
@@ -458,10 +493,12 @@ var script$1 = {
       /*
       This function builds a bar trace.
       Arguments:
-          - data: object with keys "dates" and "access_times"
-              - dates: array of dates
+          - data: object with keys "dates", "access_times", "colors" and "widths"
+              - dates: array of dates (slot centres, in ms)
               - access_times: array of access_times
               - colors: array of colors in rgba format (eg:"rgba(255, 153, 145,0.8)")
+              - widths: array of per-bar widths in ms, so each bar fills its
+                own time slot (see computeDaySlots) instead of a fixed day
           - name: name of the trace
       */
       const trace = {
@@ -476,35 +513,43 @@ var script$1 = {
         showlegend: showlegend,
         hoverinfo: hoverinfo,
         hovertemplate: hovertemplate,
-        width: 1000 * 3600 * 24 * 1 // 100% of the space between two dates
+        width: data.widths
       };
-
-      console.log(trace);
       return trace;
     },
-    buildBarTraces(dates, color, label, group) {
+    buildBarTraces(slots, color, label, group) {
       /*
       This function builds the series used to display the offline/NA bars.
-      For each date, two columns are created: one very short and one tall. 
-      These columns cover the whole plot height. 
-      The tall column is colored with colorStrong and the short one with colorLight.
+      For each slot two stacked columns are created that together span the
+      whole plot height: a thin strong-coloured band sitting on the axis,
+      and a light-coloured column filling the rest of the height above it.
        Arguments:
-          - dates: array of dates
+          - slots: array of slots ({ center, width }), see computeDaySlots
           - color: color of the bars
        Returns array with offline and NA traces
        */
 
       const colorStrong = `rgba(${color},.8)`;
       const colorLight = `rgba(${color},.2)`;
+      const centers = slots.map(s => s.center);
+      const widths = slots.map(s => s.width);
+
+      // Total background height (keeps the previous y-axis extent). The
+      // strong colour is a thin band on the axis; the light colour fills
+      // the remaining height stacked on top of it.
+      const totalHeight = 2 + this.max_access_time * 1.1;
+      const baseHeight = totalHeight * 0.03;
       const dataShort = {
-        dates: dates,
-        access_times: Array(dates.length).fill(2),
-        colors: Array(dates.length).fill(colorStrong)
+        dates: centers,
+        access_times: Array(slots.length).fill(baseHeight),
+        colors: Array(slots.length).fill(colorStrong),
+        widths: widths
       };
       const dataTall = {
-        dates: dates,
-        access_times: Array(dates.length).fill(this.max_access_time * 1.1),
-        colors: Array(dates.length).fill(colorLight)
+        dates: centers,
+        access_times: Array(slots.length).fill(totalHeight - baseHeight),
+        colors: Array(slots.length).fill(colorLight),
+        widths: widths
       };
       const hovertemplate = `<b>${label}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;
       const traceShort = this.barTrace(dataShort, label, false, 'skip', '', group);
@@ -526,12 +571,10 @@ var script$1 = {
       // Down arrays
       if (arrays.down.length > 0) {
         traces = traces.concat(this.buildBarTraces(arrays.down, this.colorOffline, 'Offline', 'down'));
-        console.log(arrays.down);
       }
       // NA arrays
       if (arrays.NA.length > 0) {
         traces = traces.concat(this.buildBarTraces(arrays.NA, this.colorNA, 'No information available', 'na'));
-        console.log(arrays.NA);
       }
       return traces;
     },
@@ -582,7 +625,10 @@ var script$1 = {
         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];
+        // Anchor day ticks at the day centre (noon) so each label sits
+        // under the middle of its day block, aligned with the online dot
+        // (which is snapped to the same day centre).
+        return this.dayCenter(this.dataItems[0].date);
       }
     },
     xaxisMode() {
@@ -593,11 +639,17 @@ var script$1 = {
       }
     },
     xaxisRange() {
-      if (!this.xrange) {
-        return [this.dataItems[0], this.dataItems[this.dataItems.length - 1]];
-      } else {
+      if (this.xrange) {
         return this.xrange;
       }
+      // Span whole calendar days so the first and last day blocks (which
+      // are centred on their day, one full day wide) are fully visible.
+      const DAY = 1000 * 3600 * 24;
+      const firstDay = new Date(this.dataItems[0].date);
+      firstDay.setUTCHours(0, 0, 0, 0);
+      const lastDay = new Date(this.dataItems[this.dataItems.length - 1].date);
+      lastDay.setUTCHours(0, 0, 0, 0);
+      return [firstDay.getTime(), lastDay.getTime() + DAY];
     },
     monthTickVales() {
       // First day of month of last date and previous five months

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,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);
+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(this.dayCenter(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),dayCenter(e){const t=new Date(e);return t.setUTCHours(0,0,0,0),t.getTime()+432e5},computeDaySlots(e){return e.map((e=>({center:this.dayCenter(e.date),width:864e5})))},extractOfflineNADates(e){const t=this.computeDaySlots(e),i=[],s=[];for(let a=0;a<e.length;a++)null===e[a].code?i.push(t[a]):this.isErrorCode(e[a].code)&&s.push(t[a]);return{NA:i,down:s}},barTrace:(e,t,i,s,a,r)=>({x:e.dates,y:e.access_times,marker:{color:e.colors},name:t,type:"bar",legendgroup:r,showlegend:i,hoverinfo:s,hovertemplate:a,width:e.widths}),buildBarTraces(e,t,i,s){const a=`rgba(${t},.8)`,r=`rgba(${t},.2)`,o=e.map((e=>e.center)),n=e.map((e=>e.width)),l=2+1.1*this.max_access_time,d=.03*l,c={dates:o,access_times:Array(e.length).fill(d),colors:Array(e.length).fill(a),widths:n},h={dates:o,access_times:Array(e.length).fill(l-d),colors:Array(e.length).fill(r),widths:n},u=`<b>${i}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;return[this.barTrace(c,i,!1,"skip","",s),this.barTrace(h,i,!0,"all",u,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"))),i.NA.length>0&&(t=t.concat(this.buildBarTraces(i.NA,this.colorNA,"No information available","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.dayCenter(this.dataItems[0].date)},xaxisMode(){return!0===this.sixMonths?"period":"instant"},xaxisRange(){if(this.xrange)return this.xrange;const e=new Date(this.dataItems[0].date);e.setUTCHours(0,0,0,0);const t=new Date(this.dataItems[this.dataItems.length-1].date);return t.setUTCHours(0,0,0,0),[e.getTime(),t.getTime()+864e5]},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

@@ -285,9 +285,11 @@ var script$1 = {
         // 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
+          // keep adding to subarray. Snap the x to the day centre so
+          // the online marker sits in the middle of its day, on the
+          // same grid as the offline/NA bars.
           subarrayTime.push(data[i].access_time);
-          subarrayDate.push(data[i].date);
+          subarrayDate.push(this.dayCenter(data[i].date));
           sum += data[i].access_time;
           nonNullValues += 1;
         } else {
@@ -420,29 +422,62 @@ var script$1 = {
       const errorCodes = [400, 403, 404, 408, 500, 502, 503, 504];
       return errorCodes.includes(code);
     },
+    dayCenter(date) {
+      /*
+      Snaps a date to the centre (12:00) of its UTC calendar day, returned
+      as ms since epoch. The whole chart is a daily grid: null placeholders
+      arrive at 00:00Z and real probes mid-afternoon, so aligning every
+      point and every bar to the day centre keeps them on one grid. That is
+      what makes blocks sit centred on their day and prevents bars from
+      bleeding into a neighbouring day's measurement.
+      */
+      const d = new Date(date);
+      d.setUTCHours(0, 0, 0, 0);
+      return d.getTime() + 1000 * 3600 * 24 / 2;
+    },
+    computeDaySlots(data) {
+      /*
+      Returns, for every data point, the bar slot it should occupy: a full
+      calendar day centred on that day (see dayCenter). Consecutive
+      offline/NA days therefore tile into a single block, and because every
+      online point is snapped to the same daily grid a bar never overlaps a
+      measurement.
+       Arguments:
+          - data: array of objects with a "date" key
+       Returns an array (parallel to data) of objects with keys:
+          - center: slot centre (day centre), in ms since epoch
+          - width: slot width, in ms (one full day)
+      */
+      const DAY = 1000 * 3600 * 24;
+      return data.map(item => ({
+        center: this.dayCenter(item.date),
+        width: DAY
+      }));
+    },
     extractOfflineNADates(data) {
       /*
-      This function extracts dates with access_time null. 
-      Depending on the code, the server is offline or NA on those dates.
+      This function extracts the bar slots of points with no successful
+      measurement. 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)
+       Returns an object with keys:
+          - NA: array of slots (see computeDaySlots) for code null (no information available)
+          - down: array of slots for 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 slots = this.computeDaySlots(data);
       const resultNA = [];
       const resultOffline = [];
       for (let i = 0; i < data.length; i++) {
         // no code at all -> grey "No information available"
         if (data[i].code === null) {
-          resultNA.push(data[i].date);
+          resultNA.push(slots[i]);
           // an error code -> red "Offline"
         } else if (this.isErrorCode(data[i].code)) {
-          resultOffline.push(data[i].date);
+          resultOffline.push(slots[i]);
         }
       }
       return {
@@ -454,10 +489,12 @@ var script$1 = {
       /*
       This function builds a bar trace.
       Arguments:
-          - data: object with keys "dates" and "access_times"
-              - dates: array of dates
+          - data: object with keys "dates", "access_times", "colors" and "widths"
+              - dates: array of dates (slot centres, in ms)
               - access_times: array of access_times
               - colors: array of colors in rgba format (eg:"rgba(255, 153, 145,0.8)")
+              - widths: array of per-bar widths in ms, so each bar fills its
+                own time slot (see computeDaySlots) instead of a fixed day
           - name: name of the trace
       */
       const trace = {
@@ -472,35 +509,43 @@ var script$1 = {
         showlegend: showlegend,
         hoverinfo: hoverinfo,
         hovertemplate: hovertemplate,
-        width: 1000 * 3600 * 24 * 1 // 100% of the space between two dates
+        width: data.widths
       };
-
-      console.log(trace);
       return trace;
     },
-    buildBarTraces(dates, color, label, group) {
+    buildBarTraces(slots, color, label, group) {
       /*
       This function builds the series used to display the offline/NA bars.
-      For each date, two columns are created: one very short and one tall. 
-      These columns cover the whole plot height. 
-      The tall column is colored with colorStrong and the short one with colorLight.
+      For each slot two stacked columns are created that together span the
+      whole plot height: a thin strong-coloured band sitting on the axis,
+      and a light-coloured column filling the rest of the height above it.
        Arguments:
-          - dates: array of dates
+          - slots: array of slots ({ center, width }), see computeDaySlots
           - color: color of the bars
        Returns array with offline and NA traces
        */
 
       const colorStrong = `rgba(${color},.8)`;
       const colorLight = `rgba(${color},.2)`;
+      const centers = slots.map(s => s.center);
+      const widths = slots.map(s => s.width);
+
+      // Total background height (keeps the previous y-axis extent). The
+      // strong colour is a thin band on the axis; the light colour fills
+      // the remaining height stacked on top of it.
+      const totalHeight = 2 + this.max_access_time * 1.1;
+      const baseHeight = totalHeight * 0.03;
       const dataShort = {
-        dates: dates,
-        access_times: Array(dates.length).fill(2),
-        colors: Array(dates.length).fill(colorStrong)
+        dates: centers,
+        access_times: Array(slots.length).fill(baseHeight),
+        colors: Array(slots.length).fill(colorStrong),
+        widths: widths
       };
       const dataTall = {
-        dates: dates,
-        access_times: Array(dates.length).fill(this.max_access_time * 1.1),
-        colors: Array(dates.length).fill(colorLight)
+        dates: centers,
+        access_times: Array(slots.length).fill(totalHeight - baseHeight),
+        colors: Array(slots.length).fill(colorLight),
+        widths: widths
       };
       const hovertemplate = `<b>${label}</b><br>%{x|%d %b %Y}<br>%{y} ms <extra></extra>`;
       const traceShort = this.barTrace(dataShort, label, false, 'skip', '', group);
@@ -522,12 +567,10 @@ var script$1 = {
       // Down arrays
       if (arrays.down.length > 0) {
         traces = traces.concat(this.buildBarTraces(arrays.down, this.colorOffline, 'Offline', 'down'));
-        console.log(arrays.down);
       }
       // NA arrays
       if (arrays.NA.length > 0) {
         traces = traces.concat(this.buildBarTraces(arrays.NA, this.colorNA, 'No information available', 'na'));
-        console.log(arrays.NA);
       }
       return traces;
     },
@@ -578,7 +621,10 @@ var script$1 = {
         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];
+        // Anchor day ticks at the day centre (noon) so each label sits
+        // under the middle of its day block, aligned with the online dot
+        // (which is snapped to the same day centre).
+        return this.dayCenter(this.dataItems[0].date);
       }
     },
     xaxisMode() {
@@ -589,11 +635,17 @@ var script$1 = {
       }
     },
     xaxisRange() {
-      if (!this.xrange) {
-        return [this.dataItems[0], this.dataItems[this.dataItems.length - 1]];
-      } else {
+      if (this.xrange) {
         return this.xrange;
       }
+      // Span whole calendar days so the first and last day blocks (which
+      // are centred on their day, one full day wide) are fully visible.
+      const DAY = 1000 * 3600 * 24;
+      const firstDay = new Date(this.dataItems[0].date);
+      firstDay.setUTCHours(0, 0, 0, 0);
+      const lastDay = new Date(this.dataItems[this.dataItems.length - 1].date);
+      lastDay.setUTCHours(0, 0, 0, 0);
+      return [firstDay.getTime(), lastDay.getTime() + DAY];
     },
     monthTickVales() {
       // First day of month of last date and previous five months
@@ -711,7 +763,7 @@ const __vue_inject_styles__$1 = undefined;
 /* scoped */
 const __vue_scope_id__$1 = undefined;
 /* module identifier */
-const __vue_module_identifier__$1 = "data-v-6f184d3f";
+const __vue_module_identifier__$1 = "data-v-bab9d544";
 /* functional template */
 const __vue_is_functional_template__$1 = false;
 /* style inject */

package/package.json

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