OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated implementation following PR#2891

Browse Source
This commit is contained in:
sgrtye 2024-02-13 00:02:17 +00:00
parent e264f8d36f
commit 01cc3dfb5a
2 changed files with 113 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/config/service-helpers.js
View File

@ -378,7 +378,7 @@ export function cleanServiceGroups(groups) {
// customapi
mappings,
vertical,
display,
// diskstation
volume,
@ -540,7 +540,7 @@ export function cleanServiceGroups(groups) {
}
if (type === "customapi") {
if (mappings) cleanedService.widget.mappings = mappings;
if (vertical) cleanedService.widget.vertical = vertical;
if (display) cleanedService.widget.display = display;
if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval;
}
if (type === "calendar") {

161
src/widgets/customapi/component.jsx
View File

@ -99,12 +99,84 @@ function formatValue(t, mapping, rawValue) {
return value;
}
function getColor(mapping, customData) {
const value = getValue(mapping.additionalField, customData);
const style = mapping.additionalFieldColor;
const tailwindColors = [
"slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber",
"yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue",
"indigo", "violet", "purple", "fuchsia", "pink", "rose"
];
const tailwindShades = [
"100", "200", "300", "400", "500", "600", "700", "800", "900"
];
const styleRegex = /^([a-zA-Z]+)-(\d+)$/;
const colorMap = {
'slate': 'theme-slate',
'gray': 'theme-gray',
'zinc': 'theme-zinc',
'neutral': 'theme-neutral',
'stone': 'theme-stone',
'red': 'theme-red',
'orange': 'theme-orange',
'amber': 'theme-amber',
'yellow': 'theme-yellow',
'lime': 'theme-lime',
'green': 'theme-green',
'emerald': 'theme-emerald',
'teal': 'theme-teal',
'cyan': 'theme-cyan',
'sky': 'theme-sky',
'blue': 'theme-blue',
'indigo': 'theme-indigo',
'violet': 'theme-violet',
'purple': 'theme-purple',
'fuchsia': 'theme-fuchsia',
'pink': 'theme-pink',
'rose': 'theme-rose',
}
const shadeMap = {
'100': 'text-theme-100',
'200': 'text-theme-200',
'300': 'text-theme-300',
'400': 'text-theme-400',
'500': 'text-theme-500',
'600': 'text-theme-600',
'700': 'text-theme-700',
'800': 'text-theme-800',
'900': 'text-theme-900',
}
if (style) {
if (style === "auto") {
const numberRegex = /-?\d*\.?\d+/g;
const matches = value.match(numberRegex);
if (matches && matches.length > 0) {
return matches[0] > 0 ? "text-emerald-300" : "text-rose-300";
}
} else if (style === "black" || style === "white") {
return `text-${style}`;
} else if (style.match(styleRegex)) {
const match = style.match(styleRegex);
if (tailwindColors.includes(match[1]) && tailwindShades.includes(match[2])) {
return `${colorMap[match[1]]} ${shadeMap[match[2]]}`;
}
}
}
return "";
}
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { mappings = [], refreshInterval = 10000, vertical = false } = widget;
const { mappings = [], refreshInterval = 10000, display = "block" } = widget;
const { data: customData, error: customError } = useWidgetAPI(widget, null, {
refreshInterval: Math.max(1000, refreshInterval),
});
@ -123,55 +195,44 @@ export default function Component({ service }) {
);
}
if (!vertical) {
return (
<Container service={service}>
{mappings.slice(0, 4).map((mapping) => (
<Block
label={mapping.label}
key={mapping.label}
value={formatValue(t, mapping, getValue(mapping.field, customData))}
/>
))}
</Container>
);
}
return (
<Container service={service}>
<div className="flex flex-col w-full">
{mappings.map((mapping) => (
<div
key={mapping.label}
className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs"
>
<div className="font-thin pl-2">{mapping.label}</div>
<div className="flex flex-row text-right">
<div className="font-bold mr-2">
{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))
}
</div>
{mapping.trend && (
<div
className={`font-bold w-10 mr-2 ${getValue(mapping.trend, customData) > 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)
}%
switch (display) {
case "list":
return (
<Container service={service}>
<div className="flex flex-col w-full">
{mappings.map((mapping) => (
<div
key={mapping.label}
className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs"
>
<div className="font-thin pl-2">{mapping.label}</div>
<div className="flex flex-row text-right">
<div className="font-bold mr-2">
{formatValue(t, mapping, getValue(mapping.field, customData))}
</div>
{mapping.additionalField && (
<div className={`font-bold w-10 mr-2 ${getColor(mapping, customData)}`} >
{getValue(mapping.additionalField, customData)}
</div>
)}
</div>
)}
</div>
</div>
))}
</div>
))}
</div>
</Container>
);
</Container>
);
default:
return (
<Container service={service}>
{mappings.slice(0, 4).map((mapping) => (
<Block
label={mapping.label}
key={mapping.label}
value={formatValue(t, mapping, getValue(mapping.field, customData))}
/>
))}
</Container>
);
}
}