From c601fc93d1ca1e0d1a25659f5d7b0c6a9828f416 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Thu, 4 Jun 2020 19:11:14 +0200
Subject: [PATCH] Add ratio & alt attribute to stats images

---
 config.js                  | 24 ++++++++++++++++++------
 lib/utils/helper.js        |  6 +++---
 locale/de.json             |  3 ++-
 locale/en.json             |  3 ++-
 scss/modules/_base.scss    |  1 +
 scss/modules/_sidebar.scss |  5 +++++
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/config.js b/config.js
index 678d2e3..52e7d55 100644
--- a/config.js
+++ b/config.js
@@ -6,32 +6,42 @@ module.exports = function () {
         'name': 'Clientstatistik',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=1&var-node={NODE_ID}&from=now-1d&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Clientstatistik für {NODE_ID} - weiteren Statistiken'
+        'title': 'Clientstatistik für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       },
       {
         'name': 'Trafficstatistik',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=2&from=now-1d&var-node={NODE_ID}&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Trafficstatistik für {NODE_ID} - weiteren Statistiken'
+        'title': 'Trafficstatistik für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       },
       {
         'name': 'Systemlast',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=4&from=now-1d&var-node={NODE_ID}&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Systemlast für {NODE_ID} - weiteren Statistiken'
+        'title': 'Systemlast für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       },
       {
         'name': 'Airtime',
         'href': 'https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000026/node?panelId=5&from=now-1d&var-node={NODE_ID}&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Airtime für {NODE_ID} - weiteren Statistiken'
+        'title': 'Airtime für {NODE_ID} - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       }
     ],
     'linkInfos': [
       {
         'name': 'Statistik für alle Links zwischen diese Knoten',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/nvSNqoHmz/link?panelId=7&var-node={SOURCE_ID}&var-nodetolink={TARGET_ID}&from=now-1d&&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Linkstatistik des letzten Tages, min und max aller Links zwischen diesen Knoten'
+        'title': 'Linkstatistik des letzten Tages, min und max aller Links zwischen diesen Knoten',
+        'width': 650,
+        'height': 350
       }
     ],
     'globalInfos': [
@@ -39,7 +49,9 @@ module.exports = function () {
         'name': 'Globale Statistik',
         'href': 'https://regensburg.freifunk.net/netz/statistik',
         'image': 'https://grafana.regensburg.freifunk.net/render/d-solo/000000028/globals?panelId=2&from=now-7d&&width=650&height=350&theme=light&_t={TIME}',
-        'title': 'Globale Statistik - weiteren Statistiken'
+        'title': 'Globale Statistik - weiteren Statistiken',
+        'width': 650,
+        'height': 350
       }
     ],
     // Array of data provider are supported
diff --git a/lib/utils/helper.js b/lib/utils/helper.js
index 41f7b1c..3092b69 100644
--- a/lib/utils/helper.js
+++ b/lib/utils/helper.js
@@ -117,10 +117,10 @@ define({
     }
   },
   showStat: function showStat(V, o, subst) {
-    var content = V.h('img', { attrs: { src: require('helper').listReplace(o.image, subst) } });
+    var content = V.h('img', { attrs: { src: require('helper').listReplace(o.image, subst), width: o.width, height: o.height, alt: _.t('loading', { name: o.name }) } });
 
     if (o.href) {
-      return V.h('p', V.h('a', {
+      return V.h('div', V.h('a', {
         attrs:
           {
             href: require('helper').listReplace(o.href, subst),
@@ -129,7 +129,7 @@ define({
           }
       }, content));
     }
-    return V.h('p', content);
+    return V.h('div', content);
   },
 
   getTileBBox: function getTileBBox(s, map, tileSize, margin) {
diff --git a/locale/de.json b/locale/de.json
index 6ae07f1..b507cf7 100644
--- a/locale/de.json
+++ b/locale/de.json
@@ -93,5 +93,6 @@
   "others": "andere",
   "none": "keine",
   "remove": "entfernen",
-  "close": "schließen"
+  "close": "schließen",
+  "loading": "%{name} graoh (wird generiert)"
 }
diff --git a/locale/en.json b/locale/en.json
index 81ce1a4..251203d 100644
--- a/locale/en.json
+++ b/locale/en.json
@@ -93,5 +93,6 @@
   "others": "other",
   "none": "none",
   "remove": "remove",
-  "close": "close"
+  "close": "close",
+  "loading": "%{name} graph (is generated)"
 }
diff --git a/scss/modules/_base.scss b/scss/modules/_base.scss
index 925b5f3..f20012c 100644
--- a/scss/modules/_base.scss
+++ b/scss/modules/_base.scss
@@ -55,6 +55,7 @@ h4 {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 a {
diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss
index 0c6b818..e41f83b 100644
--- a/scss/modules/_sidebar.scss
+++ b/scss/modules/_sidebar.scss
@@ -29,6 +29,11 @@
     padding-bottom: 15px;
   }
 
+  img {
+    padding: 0 $button-distance 1em;
+    box-sizing: border-box;
+  }
+
   .node-list,
   .node-links,
   .link-list {