selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

✨ Builds system memory monitoring widget

This commit is contained in:
Alicia Sykes 2021-12-16 00:50:21 +00:00
parent 382d43f52c
commit 6e84dacd51
3 changed files with 187 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/widgets.md
View File

@ -18,6 +18,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
- [Flight Data](#flight-data)
- [Self-Hosted Services Widgets](#dynamic-widgets)
- [CPU History](#cpu-history-netdata)
- [Memory History](#memory-history-netdata)
- [System Load History](#load-history-netdata)
- [Dynamic Widgets](#dynamic-widgets)
- [Iframe Widget](#iframe-widget)
@ -164,6 +165,8 @@ Shows recent price history for a given crypto asset, using price data fetched fr
**`asset`** | `string` | Required | Name of a crypto asset, coin or token to fetch price data for, see [list of supported assets](https://api.coingecko.com/api/v3/asset_platforms)
**`currency`** | `string` | _Optional_ | The fiat currency to display results in, expressed as an ISO-4217 alpha code (see [list of currencies](https://www.iban.com/currency-codes)). Defaults to `USD`
**`numDays`** | `number` | _Optional_ | The number of days of price history to render. Defaults to `7`, min: `1`, max: `30` days
**`chartColor`** | `string` | _Optional_ | Color of the chart value. Defaults to `--widget-text-color` which inherits dashboard primary color
**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
##### Example
@ -302,6 +305,8 @@ Shows recent price history for a given publicly-traded stock or share
**`apiKey`** | `string` | Required | API key for [Alpha Vantage](https://www.alphavantage.co/), you can get a free API key [here](https://www.alphavantage.co/support/#api-key)
**`stock`** | `string` | Required | The stock symbol for the asset to fetch data for
**`priceTime`** | `string` | _Optional_ | The time to fetch price for. Can be `high`, `low`, `open` or `close`. Defaults to `high`
**`chartColor`** | `string` | _Optional_ | Color of the chart value. Defaults to `--widget-text-color` which inherits dashboard primary color
**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
##### Example
@ -374,13 +379,15 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht
Pull recent CPU usage history from NetData.
<p align="center"><img width="400" src="https://i.ibb.co/ZdyR5nJ/nd-cpu-history.png" /></p>
<p align="center"><img width="600" src="https://i.ibb.co/ZdyR5nJ/nd-cpu-history.png" /></p>
##### Options
**Field** | **Type** | **Required** | **Description**
--- | --- | --- | ---
**`host`** | `string` | Required | The URL to your NetData instance
**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
**`chartColor`** / **`chartColors`** | `string` / `array`| _Optional_ | Color of the chart value(s) as hex codes. `chartColor` is a single value (defaults to `--widget-text-color`), whereas `chartColors` is an array of colors
##### Example
@ -390,17 +397,43 @@ Pull recent CPU usage history from NetData.
host: http://192.168.1.1:19999
```
### Load History (NetData)
### Memory History (NetData)
Pull recent load usage in 1, 5 and 15 minute intervals, from NetData.
Pull recent system RAM usage from NetData, and show as a breakdown of different categories.
<p align="center"><img width="400" src="https://i.ibb.co/qR9C2tJ/nd-load-history.png" /></p>
<p align="center"><img width="600" src="https://i.ibb.co/2dsSWnk/nd-memory-history.png" /></p>
##### Options
**Field** | **Type** | **Required** | **Description**
--- | --- | --- | ---
**`host`** | `string` | Required | The URL to your NetData instance
**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
**`chartColor`** / **`chartColors`** | `string` / `array`| _Optional_ | Color of the chart value(s) as hex codes. `chartColor` is a single value (defaults to `--widget-text-color`), whereas `chartColors` is an array of colors
##### Example
```yaml
- type: nd-ram-history
options:
host: http://192.168.1.1:19999
```
---
### Load History (NetData)
Pull recent load usage in 1, 5 and 15 minute intervals, from NetData.
<p align="center"><img width="600" src="https://i.ibb.co/qR9C2tJ/nd-load-history.png" /></p>
##### Options
**Field** | **Type** | **Required** | **Description**
--- | --- | --- | ---
**`host`** | `string` | Required | The URL to your NetData instance
**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
**`chartColor`** / **`chartColors`** | `string` / `array`| _Optional_ | Color of the chart value(s) as hex codes. `chartColor` is a single value (defaults to `--widget-text-color`), whereas `chartColors` is an array of colors
##### Example

141
src/components/Widgets/NdRamHistory.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<div class="memory-charts-wrapper">
<div class="chart" :id="`aggregate-${chartId}`"></div>
<div class="chart" :id="chartId"></div>
</div>
</template>
<script>
import axios from 'axios';
import WidgetMixin from '@/mixins/WidgetMixin';
import ChartingMixin from '@/mixins/ChartingMixin';
export default {
mixins: [WidgetMixin, ChartingMixin],
components: {},
mounted() {
this.fetchData();
},
computed: {
/* URL where NetData is hosted */
netDataHost() {
const usersChoice = this.options.host;
if (!usersChoice || typeof usersChoice !== 'string') {
this.error('Host parameter is required');
return '';
}
return usersChoice;
},
apiVersion() {
return this.options.apiVersion || 'v1';
},
endpoint() {
return `${this.netDataHost}/api/${this.apiVersion}/data?chart=system.ram`;
},
/* A sudo-random ID for the chart DOM element */
chartId() {
return `cpu-history-chart-${Math.round(Math.random() * 10000)}`;
},
},
methods: {
/* Make GET request to NetData */
fetchData() {
axios.get(this.endpoint)
.then((response) => {
this.processData(response.data);
})
.catch((dataFetchError) => {
this.error('Unable to fetch data', dataFetchError);
})
.finally(() => {
this.finishLoading();
});
},
/* Assign data variables to the returned data */
processData(inputData) {
const { labels, data } = inputData;
// Convert data to an object for easy working
const timeData = []; // List of timestamps for axis
const resultGroup = {}; // List of datasets, for each label
data.reverse().forEach((reading) => {
labels.forEach((label, indx) => {
if (indx === 0) { // First value is the timestamp, add to axis
timeData.push(this.formatTime(reading[indx] * 1000));
} else { // All other values correspond to a label
if (!resultGroup[label]) resultGroup[label] = [];
resultGroup[label].push(reading[indx]);
}
});
});
// Put data in the format expected by the charts
const averages = [];
const datasets = [];
Object.keys(resultGroup).forEach((label) => {
datasets.push({ name: label, type: 'bar', values: resultGroup[label] });
averages.push(Math.round(this.average(resultGroup[label])));
});
// Set results as component attributes, and call to render
const timeChartData = { labels: timeData, datasets };
const aggregateChartData = { labels: labels.slice(1), datasets: [{ values: averages }] };
this.renderCharts(timeChartData, aggregateChartData);
},
renderCharts(timeChartData, aggregateChartData) {
this.generateHistoryChart(timeChartData);
this.generateAggregateChart(aggregateChartData);
},
/* Create new chart, using the crypto data */
generateHistoryChart(timeChartData) {
return new this.Chart(`#${this.chartId}`, {
title: 'History',
data: timeChartData,
type: 'axis-mixed',
height: this.chartHeight,
colors: this.chartColors,
truncateLegends: true,
lineOptions: {
regionFill: 1,
hideDots: 1,
},
axisOptions: {
xIsSeries: true,
xAxisMode: 'tick',
},
tooltipOptions: {
formatTooltipY: d => `${Math.round(d)}mb`,
},
});
},
generateAggregateChart(aggregateChartData) {
return new this.Chart(`#aggregate-${this.chartId}`, {
title: 'Averages',
data: aggregateChartData,
type: 'percentage',
height: 100,
colors: this.chartColors,
barOptions: {
height: 18,
depth: 5,
},
});
},
},
};
</script>
<style lang="scss">
.memory-charts-wrapper .chart {
text.title, text.legend-dataset-text {
text-transform: capitalize;
color: var(--widget-text-color);
}
.axis, .chart-label {
fill: var(--widget-text-color);
opacity: var(--dimming-factor);
&:hover { opacity: 1; }
}
}
</style>

9
src/components/Widgets/WidgetBase.vue
View File

@ -116,6 +116,13 @@
@error="handleError"
:ref="widgetRef"
/>
<NdRamHistory
v-else-if="widgetType === 'nd-ram-history'"
:options="widgetOptions"
@loading="setLoaderState"
@error="handleError"
:ref="widgetRef"
/>
<IframeWidget
v-else-if="widgetType === 'iframe'"
:options="widgetOptions"
@ -159,6 +166,7 @@ import Jokes from '@/components/Widgets/Jokes.vue';
import Flights from '@/components/Widgets/Flights.vue';
import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
import IframeWidget from '@/components/Widgets/IframeWidget.vue';
import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
@ -183,6 +191,7 @@ export default {
Flights,
NdCpuHistory,
NdLoadHistory,
NdRamHistory,
IframeWidget,
EmbedWidget,
},