homepage/src/widgets/opendtu/component.jsx

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";

export default function Component({ service }) {
  const { t } = useTranslation();

  const { widget } = service;

  const { data: opendtuData, error: opendtuError } = useWidgetAPI(widget);

  if (opendtuError) {
    return <Container service={service} error={opendtuError} />;
  }

  if (!opendtuData) {
    return (
      <Container service={service}>
        <Block label="opendtu.yieldDay" />
        <Block label="opendtu.relativePower" />
        <Block label="opendtu.absolutePower" />
        <Block label="opendtu.limit" />
      </Container>
    );
  }

  const yieldDay = opendtuData.total.YieldDay.v;
  const yieldDayUnit = opendtuData.total.YieldDay.u;

  const power = opendtuData.total.Power.v;
  const powerUnit = opendtuData.total.Power.u;

  const totalLimit = opendtuData.inverters.map((inverter) => inverter.limit_absolute).reduce((a, b) => a + b);
  const totalLimitUnit = "W";

  const powerPercentage = (power / totalLimit) * 100;

  return (
    <Container service={service}>
      <Block
        label="opendtu.yieldDay"
        value={`${t("common.number", { value: Math.round(yieldDay), style: "unit" })}${yieldDayUnit}`}
      />
      <Block
        label="opendtu.relativePower"
        value={t("common.number", { value: Math.round(powerPercentage), style: "unit", unit: "percent" })}
      />
      <Block
        label="opendtu.absolutePower"
        value={`${t("common.number", { value: Math.round(power), style: "unit" })}${powerUnit}`}
      />
      <Block
        label="opendtu.limit"
        value={`${t("common.number", { value: Math.round(totalLimit), style: "unit" })}${totalLimitUnit}`}
      />
    </Container>
  );
}