@inb/oeb_visualizations 0.1.0 → 0.1.2

package/README.md

@@ -20,19 +20,82 @@ If you want to contribute to this project, please read the [contributing guideli
 
 ## Development 
 
-:construction: This section is under construction. :construction:
+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.
 
-### How to add a new component. 
+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/).
 
-- Files are relative to the package. 
-- How the built is configured.
-- How to push to npm.
-- How to install package locally for development.
+### 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:
 
-### Documentation: 
-- How documentation is organised. 
-- How to serve documentation locally. 
-- GitHub Actions in place. When do they run? 
+- 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: 
 
-## Publishing
+    ```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,10 +280,16 @@ var script$1 = {
       var sum = 0;
       var nonNullValues = 0;
       for (let i = 0; i < data.length; i++) {
-        if (data[i].access_time !== null) {
-          // keep adding to subarray
+        // 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. 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 {
@@ -380,16 +413,71 @@ 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);
+    },
+    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 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 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++) {
-        // 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) {
-          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) {
-          resultOffline.push(data[i].date);
+        // no code at all -> grey "No information available"
+        if (data[i].code === null) {
+          resultNA.push(slots[i]);
+          // an error code -> red "Offline"
+        } else if (this.isErrorCode(data[i].code)) {
+          resultOffline.push(slots[i]);
         }
       }
       return {
@@ -401,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 = {
@@ -419,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);
@@ -469,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;
     },
@@ -489,7 +585,7 @@ var script$1 = {
         return "%A<br>%d %b";
       }
       if (this.sixMonths) {
-        return "%b";
+        return "%d %b";
       } else {
         return "%d %b";
       }
@@ -504,7 +600,7 @@ var script$1 = {
         return 0;
       }
       if (this.sixMonths) {
-        return 0;
+        return 45;
       } else {
         return 45;
       }
@@ -525,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() {
@@ -534,6 +633,30 @@ var script$1 = {
       } else {
         return "instant";
       }
+    },
+    xaxisRange() {
+      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
+      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 +763,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-bab9d544";
 /* 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,10 +284,16 @@ var script$1 = {
       var sum = 0;
       var nonNullValues = 0;
       for (let i = 0; i < data.length; i++) {
-        if (data[i].access_time !== null) {
-          // keep adding to subarray
+        // 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. 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 {
@@ -384,16 +417,71 @@ 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);
+    },
+    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 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 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++) {
-        // 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) {
-          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) {
-          resultOffline.push(data[i].date);
+        // no code at all -> grey "No information available"
+        if (data[i].code === null) {
+          resultNA.push(slots[i]);
+          // an error code -> red "Offline"
+        } else if (this.isErrorCode(data[i].code)) {
+          resultOffline.push(slots[i]);
         }
       }
       return {
@@ -405,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 = {
@@ -423,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);
@@ -473,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;
     },
@@ -493,7 +589,7 @@ var script$1 = {
         return "%A<br>%d %b";
       }
       if (this.sixMonths) {
-        return "%b";
+        return "%d %b";
       } else {
         return "%d %b";
       }
@@ -508,7 +604,7 @@ var script$1 = {
         return 0;
       }
       if (this.sixMonths) {
-        return 0;
+        return 45;
       } else {
         return 45;
       }
@@ -529,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() {
@@ -538,6 +637,30 @@ var script$1 = {
       } else {
         return "instant";
       }
+    },
+    xaxisRange() {
+      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
+      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(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

@@ -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,10 +280,16 @@ var script$1 = {
       var sum = 0;
       var nonNullValues = 0;
       for (let i = 0; i < data.length; i++) {
-        if (data[i].access_time !== null) {
-          // keep adding to subarray
+        // 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. 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 {
@@ -380,16 +413,71 @@ 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);
+    },
+    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 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 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++) {
-        // 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) {
-          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) {
-          resultOffline.push(data[i].date);
+        // no code at all -> grey "No information available"
+        if (data[i].code === null) {
+          resultNA.push(slots[i]);
+          // an error code -> red "Offline"
+        } else if (this.isErrorCode(data[i].code)) {
+          resultOffline.push(slots[i]);
         }
       }
       return {
@@ -401,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 = {
@@ -419,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);
@@ -469,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;
     },
@@ -489,7 +585,7 @@ var script$1 = {
         return "%A<br>%d %b";
       }
       if (this.sixMonths) {
-        return "%b";
+        return "%d %b";
       } else {
         return "%d %b";
       }
@@ -504,7 +600,7 @@ var script$1 = {
         return 0;
       }
       if (this.sixMonths) {
-        return 0;
+        return 45;
       } else {
         return 45;
       }
@@ -525,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() {
@@ -534,6 +633,30 @@ var script$1 = {
       } else {
         return "instant";
       }
+    },
+    xaxisRange() {
+      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
+      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 +763,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-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.0",
+  "version": "0.1.2",
   "description": "Collection of Vue components for data visualization in OpenEBench.",
   "author": "evamart",
   "license": "MIT",