From 0d350fb023ad0f71ffc3c5539f48d8f26a8acdf2 Mon Sep 17 00:00:00 2001
From: Patrick Fruh <patrick@kaeltis.de>
Date: Tue, 9 Jun 2020 20:17:41 +0200
Subject: [PATCH] Use Math.round, only use ms in graphs when at least 10 ms
Math.round is about 99% faster https://jsperf.com/math-round-vs-tofixed2/17
Graph change tries to avoid rising/falling graphs while displayed values don't change
---
frontend/src/components/Service/AdvancedChart.vue | 6 +++---
frontend/src/components/Service/ServiceSparkLine.vue | 6 +++---
frontend/src/mixin.js | 2 +-
frontend/src/pages/Service.vue | 6 +++---
4 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/frontend/src/components/Service/AdvancedChart.vue b/frontend/src/components/Service/AdvancedChart.vue
index 903985a6..650ef519 100644
--- a/frontend/src/components/Service/AdvancedChart.vue
+++ b/frontend/src/components/Service/AdvancedChart.vue
@@ -130,10 +130,10 @@
let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
let val = series[seriesIndex][dataPointIndex];
- if (val >= 1000) {
- val = (val / 1000).toFixed(0) + " ms"
+ if (val >= 10000) {
+ val = Math.round(val / 1000) + " ms"
} else {
- val = (val).toFixed(0) + " μs"
+ val = val + " μs"
}
return `<div class="chartmarker"><span>Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
},
diff --git a/frontend/src/components/Service/ServiceSparkLine.vue b/frontend/src/components/Service/ServiceSparkLine.vue
index efa0ff06..5141f578 100644
--- a/frontend/src/components/Service/ServiceSparkLine.vue
+++ b/frontend/src/components/Service/ServiceSparkLine.vue
@@ -55,10 +55,10 @@
let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
let val = series[seriesIndex][dataPointIndex];
- if (val >= 1000) {
- val = (val / 1000).toFixed(0) + " ms"
+ if (val >= 10000) {
+ val = Math.round(val / 1000) + " ms"
} else {
- val = (val).toFixed(0) + " μs"
+ val = val + " μs"
}
return `<div class="chartmarker"><span>Average Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
},
diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js
index 71967794..65b6b4ba 100644
--- a/frontend/src/mixin.js
+++ b/frontend/src/mixin.js
@@ -169,7 +169,7 @@ export default Vue.mixin({
if (val >= 1000) {
return Math.round(val / 1000) + " ms"
}
- return Math.round(val) + " μs"
+ return val + " μs"
},
firstDayOfMonth(date) {
return startOfMonth(date)
diff --git a/frontend/src/pages/Service.vue b/frontend/src/pages/Service.vue
index 3b4ae6d1..8e2d93ff 100644
--- a/frontend/src/pages/Service.vue
+++ b/frontend/src/pages/Service.vue
@@ -269,10 +269,10 @@ export default {
let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
let val = series[seriesIndex][dataPointIndex];
- if (val >= 1000) {
- val = (val / 1000).toFixed(0) + " ms"
+ if (val >= 10000) {
+ val = Math.round(val / 1000) + " ms"
} else {
- val = (val).toFixed(0) + " μs"
+ val = val + " μs"
}
return `<div class="chartmarker"><span>Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
},