More graceful display when insufficient data available. Closes #8

Author: sylvainjule

index.js

@@ -128,7 +128,7 @@ export default {
             return config
         }
     },
-    watch: { 
+    watch: {
         currentPeriod: {
             immediate: true,
             handler(newVal, oldVal) {
@@ -212,7 +212,8 @@ export default {
                     if(this.currentPeriod == 'day') {
                         let labels = Object.keys(response)
                         formatedLabels = labels.map(key => {
-                            return parseInt(key) + 1 + 'h'
+                            let label = parseInt(key) + 1 + 'h'
+                            return isFinite(label) ? label : ''
                         })
                         tooltipLabels = formatedLabels
                         dataset = labels.map(key => {
@@ -240,4 +241,4 @@ export default {
         },
     }
 }
-</script>
+</script>

src/components/widgets/chart.vue

@@ -14,7 +14,7 @@
 					</div>
 					<div class="details">{{ $t('matomo.visits').toLowerCase() }} {{ $t('matomo.period.'+currentPeriod) }}.</div>
 				</div>
-				<div :class="['difference', visitsDiff.status, {grey: loading}]">
+				<div v-if="isFinite(visitsDiff.diff)" :class="['difference', visitsDiff.status, {grey: loading}]">
 					<span v-if="loading"><span class="loader"></span></span>
 					<span v-else>{{visitsDiff.string}}%</span>
 					<div v-if="!loading" class="icon"><svg><use href="#icon-matomo-arrow-up" /></svg></div>
@@ -28,7 +28,7 @@
 						<span v-else>{{durationString}}</span></div>
 					<div class="details">{{ $t('matomo.duration.caption') }}.</div>
 				</div>
-				<div :class="['difference', durationDiff.status, {grey: loading}]">
+				<div v-if="isFinite(durationDiff.diff)" :class="['difference', durationDiff.status, {grey: loading}]">
 					<span v-if="loading"><span class="loader"></span></span>
 					<span v-else>{{durationDiff.string}}%</span>
 					<div v-if="!loading" class="icon"><svg><use href="#icon-matomo-arrow-up" /></svg></div>
@@ -39,11 +39,11 @@
 					<h5>{{ $t('matomo.bounce') }}</h5>
 					<div class="big-number">
 						<span v-if="loading"><span class="loader"></span></span>
-						<span v-else>{{current.bounce}}%</span>
+						<span v-else>{{bounceString}}</span>
 					</div>
 					<div class="details">{{ $t('matomo.bounce.caption') }}.</div>
 				</div>
-				<div :class="['difference', bounceDiff.status, {grey: loading}]">
+				<div v-if="isFinite(bounceDiff.diff)" :class="['difference', bounceDiff.status, {grey: loading}]">
 					<span v-if="loading"><span class="loader"></span></span>
 					<span v-else>{{bounceDiff.string}}%</span>
 					<div v-if="!loading" class="icon"><svg><use href="#icon-matomo-arrow-up" /></svg></div>
@@ -54,11 +54,11 @@
 					<h5>{{ $t('matomo.actions') }}</h5>
 					<div class="big-number">
 						<span v-if="loading"><span class="loader"></span></span>
-						<span v-else>{{current.actions}}</span>
+						<span v-else>{{actionsString}}</span>
 					</div>
 					<div class="details">{{ $t('matomo.actions.caption') }}.</div>
 				</div>
-				<div :class="['difference', actionsDiff.status, {grey: loading}]">
+				<div v-if="isFinite(actionsDiff.diff)" :class="['difference', actionsDiff.status, {grey: loading}]">
 					<span v-if="loading"><span class="loader"></span></span>
 					<span v-else>{{actionsDiff.string}}%</span>
 					<div v-if="!loading" class="icon"><svg><use href="#icon-matomo-arrow-up" /></svg></div>
@@ -107,7 +107,8 @@ export default {
 			let string = prefix + Math.abs(diff)
 			return {
 				string: string,
-				status: status
+				status: status,
+                diff: diff
 			}
 		},
 		durationDiff() {
@@ -117,7 +118,8 @@ export default {
 			let string = prefix + Math.abs(diff)
 			return {
 				string: string,
-				status: status
+				status: status,
+                diff: diff
 			}
 		},
 		bounceDiff() {
@@ -127,7 +129,8 @@ export default {
 			let string = prefix + Math.abs(diff)
 			return {
 				string: string,
-				status: status
+				status: status,
+                diff: diff
 			}
 		},
 		actionsDiff() {
@@ -137,12 +140,19 @@ export default {
 			let string = prefix + Math.abs(diff)
 			return {
 				string: string,
-				status: status
+				status: status,
+                diff: diff
 			}
 		},
 		durationString() {
 			return this.formatTime(this.current.duration)
 		},
+        bounceString() {
+            return !isFinite(this.current.bounce) ? '–' : this.current.bounce + '%'
+        },
+        actionsString() {
+            return !isFinite(this.current.actions) ? '–' : this.current.actions + '%'
+        },
 		isPositive() {
 			return !this.loading
 		},
@@ -254,7 +264,7 @@ export default {
 		},
 		formatTime(time) {
             let t = Math.floor(time)
-            return (t - (t%=60)) / 60 + (9 < t ? 'mn ' : 'mn 0') + t + 's'
+            return isFinite(t) ? (t - (t%=60)) / 60 + (9 < t ? 'mn ' : 'mn 0') + t + 's' : '–'
 		},
 		firstN(obj, n) {
   			return Object.keys(obj).slice(0, n).reduce(function(el, index) {
@@ -327,7 +337,7 @@ export default {
   		},
   		diff(current, prev) {
   			let diff = (current - prev) / prev * 100
-  			return diff.toFixed(2)
+            return diff.toFixed(2)
   		}
 	},
 }