✨ Optionally allow the widget to filter on StatPing Group and to display in a more compact view.

* Add widget option: `groupId`. StatPing services are filtered for the given group.
* Add widget options: `showChart` and `showInfo`. Initially hide the chart and info summary.
* Add buttons to show/hide chart and info sections.
* Update widget documentation.

Author: marekful

docs/widgets.md

@@ -1350,6 +1350,9 @@ Displays the current and recent uptime of your running services, via a self-host
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`hostname`** | `string` |  Required | The URL to your StatPing instance, without a trailing slash
+**`groupId`** | `number` | Optional | If provided, only Services in the given group are displayed. Defaults to `0` in which case all services are displayed.
+**`showChart`** | `boolean`| Optional | If provided and `false` then charts are not displayed. Defaults to `true`.
+**`showInfo`** | `boolean`| Optional | If provided and `false` then information summaries are not displayed. Defaults to `true`.
 
 ##### Example 
 
@@ -1358,6 +1361,18 @@ Displays the current and recent uptime of your running services, via a self-host
   options:
     hostname: http://192.168.130.1:8080
 ```
+or
+```yaml
+- type: stat-ping
+  options:
+    hostname: http://192.168.130.1:8080
+    groupId: 3
+    showChart: false
+    showInfo: false
+```
+You can use multiple StatPing widgets with different `groupId`s.
+
+Note, the Group Id is not directly visible in SttatPing UI, you can inspect the group select HTML element or the API response to find out.
 
 ##### Info
 - **CORS**: 🟠 Proxied

src/components/Widgets/StatPing.vue

@@ -15,17 +15,21 @@
       <span v-else class="status-offline">
         {{ $t('widgets.stat-ping.down') }}
       </span>
+      <Button v-on:click="service.infoHidden = !service.infoHidden"
+              class="far fa-info"></Button>
+      <Button v-on:click="service.chartHidden = !service.chartHidden"
+              class="far fa-chart-line"></button>
     </p>
     <!-- Charts -->
-    <div class="charts">
+    <div v-if="!service.chartHidden" class="charts">
       <img
         class="uptime-pie-chart" alt="24 Hour Uptime Chart"
         :src="makeChartUrl(service.uptime24, '24 Hours')" />
       <img class="uptime-pie-chart" alt="7 Day Uptime Chart"
         :src="makeChartUrl(service.uptime7, '7 Days')" />
     </div>
     <!-- Info -->
-    <div class="info">
+    <div v-if="!service.infoHidden" class="info">
       <div class="info-row">
         <span class="lbl">Failed Pings</span>
         <span class="val">{{ service.totalFailure }}/{{ service.totalSuccess }}</span>
@@ -73,6 +77,15 @@ export default {
     endpoint() {
       return `${this.hostname}/api/services`;
     },
+    groupId() {
+      return this.options.groupId || 0;
+    },
+    showChart() {
+      return typeof this.options.showChart !== 'boolean' ? true : this.options.showChart;
+    },
+    showInfo() {
+      return typeof this.options.showInfo !== 'boolean' ? true : this.options.showInfo;
+    },
   },
   methods: {
     fetchData() {
@@ -99,6 +112,7 @@ export default {
     processData(data) {
       let services = [];
       data.forEach((service) => {
+        if (this.groupId && this.groupId !== service.group_id) return;
         services.push({
           name: service.name,
           online: service.online,
@@ -109,6 +123,8 @@ export default {
           totalFailure: showNumAsThousand(service.stats.failures),
           lastSuccess: getTimeAgo(service.last_success),
           lastFailure: getTimeAgo(service.last_error),
+          chartHidden: this.showChart ? 0 : 1,
+          infoHidden: this.showInfo ? 0 : 1,
         });
       });
       if (this.limit) services = services.slice(0, this.limit);
@@ -135,6 +151,18 @@ export default {
         &.status-offline { color: var(--danger); }
       }
     }
+    button {
+      float: right;
+      color: var(--widget-text-color);
+      top: 4px;
+      background: none;
+      border: none;
+      position: relative;
+      opacity: .4;
+    }
+    button:hover {
+      opacity: .75;
+    }
     .charts {
       display: flex;
       flex-direction: row;