From 4fbe366b4239f99ab1c24e3ebc2fff04f782cea0 Mon Sep 17 00:00:00 2001 From: sgrtye Date: Thu, 8 Feb 2024 16:02:42 +0000 Subject: [PATCH 1/3] add vertical config for custom API widget --- src/utils/config/service-helpers.js | 2 ++ src/widgets/customapi/component.jsx | 56 ++++++++++++++++++++++++----- 2 files changed, 50 insertions(+), 8 deletions(-) diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js index fb6757b6..e28c8d50 100644 --- a/src/utils/config/service-helpers.js +++ b/src/utils/config/service-helpers.js @@ -378,6 +378,7 @@ export function cleanServiceGroups(groups) { // customapi mappings, + vertical, // diskstation volume, @@ -539,6 +540,7 @@ export function cleanServiceGroups(groups) { } if (type === "customapi") { if (mappings) cleanedService.widget.mappings = mappings; + if (vertical) cleanedService.widget.vertical = vertical; if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval; } if (type === "calendar") { diff --git a/src/widgets/customapi/component.jsx b/src/widgets/customapi/component.jsx index 7e6ad4d7..6639bf7d 100644 --- a/src/widgets/customapi/component.jsx +++ b/src/widgets/customapi/component.jsx @@ -104,7 +104,7 @@ export default function Component({ service }) { const { widget } = service; - const { mappings = [], refreshInterval = 10000 } = widget; + const { mappings = [], refreshInterval = 10000, vertical = false } = widget; const { data: customData, error: customError } = useWidgetAPI(widget, null, { refreshInterval: Math.max(1000, refreshInterval), }); @@ -123,15 +123,55 @@ export default function Component({ service }) { ); } + if (!vertical) { + return ( + + {mappings.slice(0, 4).map((mapping) => ( + + ))} + + ); + } + return ( - {mappings.slice(0, 4).map((mapping) => ( - - ))} +
+ {mappings.map((mapping) => ( +
+
{mapping.label}
+
+
+ {mapping.currency ? + t("common.number", { + value: formatValue(t, mapping, getValue(mapping.field, customData)), + style: "currency", + currency: mapping.currency, + }) : + formatValue(t, mapping, getValue(mapping.field, customData)) + } +
+ {mapping.trend && ( +
0 ? "text-emerald-300" : "text-rose-300" + }`} + > + {!Number.isNaN(parseFloat(getValue(mapping.trend, customData))) ? + Number(parseFloat(getValue(mapping.trend, customData)).toFixed(2)) : + getValue(mapping.trend, customData) + }% +
+ )} +
+
+ ))} +
); } From 3680de953f29cc33346f6f4bf2cc98b5f02fc843 Mon Sep 17 00:00:00 2001 From: sgrtye Date: Thu, 8 Feb 2024 16:27:48 +0000 Subject: [PATCH 2/3] add doc for vertical view of custom api --- docs/widgets/services/customapi.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/widgets/services/customapi.md b/docs/widgets/services/customapi.md index d392f0a9..1912ed0d 100644 --- a/docs/widgets/services/customapi.md +++ b/docs/widgets/services/customapi.md @@ -16,6 +16,7 @@ widget: password: password # auth - optional method: GET # optional, e.g. POST headers: # optional, must be object, see below + vertical: # optional, default to false, see below mappings: - field: key # needs to be YAML string or object label: Field 1 @@ -113,6 +114,32 @@ You can manipulate data with the following tools `remap`, `scale` and `suffix`, suffix: kW ``` +## Vertical View + +You can change the default block view to a list view (similar to the Coin Market Cap widget) by setting the `vertical` option to `true`. The list view extends vertically to the proper height. + +For those who set the `vertical` option to `true`, there are two optional parameters to add to the `mappings` section: `currency` and `trend`. + +- `currency`: Specifies a currency symbol to be added in front of the field value. +- `trend`: Adds a colored trend indicator with a percentage sign. The value for the `trend` field needs to be a key similar to `field`. + +**Note:** Data transformation is still compatible with the list view, but the transformation only applies to the value of the `field`. + +```yaml +- field: key + label: Field + format: text + trend: trend_key # optional + currency: USD # optional + remap: + - value: 0 + to: None + - value: 1 + to: Connected + - any: true # will map all other values + to: Unknown +``` + ## Custom Headers Pass custom headers using the `headers` option, for example: From e5e7c70756ee369401aa64e4923f36159c805415 Mon Sep 17 00:00:00 2001 From: sgrtye Date: Thu, 8 Feb 2024 16:42:01 +0000 Subject: [PATCH 3/3] add note regarding compatibilities --- docs/widgets/services/customapi.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/widgets/services/customapi.md b/docs/widgets/services/customapi.md index 1912ed0d..05015aaa 100644 --- a/docs/widgets/services/customapi.md +++ b/docs/widgets/services/customapi.md @@ -123,7 +123,7 @@ For those who set the `vertical` option to `true`, there are two optional parame - `currency`: Specifies a currency symbol to be added in front of the field value. - `trend`: Adds a colored trend indicator with a percentage sign. The value for the `trend` field needs to be a key similar to `field`. -**Note:** Data transformation is still compatible with the list view, but the transformation only applies to the value of the `field`. +**Note:** Data transformation is still compatible with the list view, but the transformation only applies to the value of the `field`. However, if a currency is specified, the value after transformation must be a number in order to be properly processed. ```yaml - field: key