You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.8 KiB
76 lines
1.8 KiB
import { useTranslation } from "next-i18next";
|
|
|
|
import Container from "components/services/widget/container";
|
|
import Block from "components/services/widget/block";
|
|
import useWidgetAPI from "utils/proxy/use-widget-api";
|
|
|
|
function getValue(field, data) {
|
|
let value = data;
|
|
let lastField = field;
|
|
let key = '';
|
|
|
|
while (typeof lastField === "object") {
|
|
key = Object.keys(lastField)[0] ?? null;
|
|
|
|
if (key === null) {
|
|
break;
|
|
}
|
|
|
|
value = value[key];
|
|
lastField = lastField[key];
|
|
}
|
|
|
|
if (typeof value === 'undefined') {
|
|
return null;
|
|
}
|
|
|
|
return value[lastField] ?? null;
|
|
}
|
|
|
|
function formatValue(t, mapping, value) {
|
|
switch (mapping?.format) {
|
|
case 'number':
|
|
return t("common.number", { value: parseInt(value, 10) });
|
|
case 'float':
|
|
return t("common.number", { value });
|
|
case 'percent':
|
|
return t("common.percent", { value });
|
|
case 'text':
|
|
default:
|
|
return value;
|
|
}
|
|
}
|
|
|
|
export default function Component({ service }) {
|
|
const { t } = useTranslation();
|
|
|
|
const { widget } = service;
|
|
|
|
const { mappings = [], refreshInterval = 10000 } = widget;
|
|
const { data: customData, error: customError } = useWidgetAPI(widget, null, {
|
|
refreshInterval: Math.max(1000, refreshInterval),
|
|
});
|
|
|
|
if (customError) {
|
|
return <Container service={service} error={customError} />;
|
|
}
|
|
|
|
if (!customData) {
|
|
return (
|
|
<Container service={service}>
|
|
{ mappings.slice(0,4).map(item => <Block label={item.label} key={item.field} />) }
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Container service={service}>
|
|
{ mappings.slice(0,4).map(mapping => <Block
|
|
label={mapping.label}
|
|
key={mapping.field}
|
|
value={formatValue(t, mapping, getValue(mapping.field, customData))}
|
|
/>) }
|
|
</Container>
|
|
);
|
|
}
|