synapse-react-client/dist/components/SustainabilityScorecard/SustainabilityScorecard.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as e, jsxs as t, Fragment as y } from "react/jsx-runtime";
import { Skeleton as I, Stack as c, Typography as p, Box as n, Link as b, Tooltip as S } from "@mui/material";
import w from "@mui/icons-material/Close";
import T from "../../synapse-queries/entity/useGetQueryResultBundle.js";
import { getFieldIndex as k } from "../../utils/functions/queryUtils.js";
import { getMetricValues as C, SUSTAINABILITY_ICON_COLORS as x } from "./SustainabilityScorecardUtils.js";
import { InfoTwoTone as L } from "@mui/icons-material";
import { CheckIcon as R } from "../../assets/icons/terms/CheckIcon.js";
import v from "../SynapseTable/NoContentAvailable.js";
import B from "./Dial.js";
import { useLocation as D, Link as j } from "react-router";
const q = ({
  metricValues: o,
  metricsConfig: s
}) => /* @__PURE__ */ e(y, { children: s.map((r, i) => /* @__PURE__ */ t(n, { sx: { display: "flex", padding: "4px 20px" }, children: [
  /* @__PURE__ */ t(
    p,
    {
      variant: "smallText1",
      sx: { alignItems: "center", display: "flex", gap: "8px" },
      children: [
        r.label,
        /* @__PURE__ */ e(S, { title: r.text, placement: "top", children: /* @__PURE__ */ e(
          L,
          {
            sx: {
              width: "18px",
              height: "18px",
              color: "primary.contrastText"
            }
          }
        ) })
      ]
    }
  ),
  o[i] === "true" ? /* @__PURE__ */ e(
    n,
    {
      sx: {
        backgroundColor: x.check,
        borderRadius: "50%",
        width: 18,
        height: 18,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: "auto"
      },
      children: /* @__PURE__ */ e(
        R,
        {
          sx: { color: "primary.contrastText", fontSize: "11px" }
        }
      )
    }
  ) : /* @__PURE__ */ e(
    n,
    {
      sx: {
        backgroundColor: x.close,
        borderRadius: "50%",
        width: 18,
        height: 18,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: "auto"
      },
      children: /* @__PURE__ */ e(
        w,
        {
          sx: { color: "primary.contrastText", fontSize: "14px" }
        }
      )
    }
  )
] }, r.key)) }), Y = ({
  metricsConfig: o,
  scoreDescriptorColumnName: s,
  queryRequest: r,
  sx: i,
  sustainabilityReportLink: d
}) => {
  const { data: a, isLoading: m } = T(r), u = D().search;
  if (m)
    return /* @__PURE__ */ e(I, { width: "100%", height: "100%" });
  const l = a?.queryResult.queryResults;
  if (l?.rows?.length === 0)
    return /* @__PURE__ */ t(c, { sx: { display: "flex", padding: "20px", ...i }, children: [
      /* @__PURE__ */ e(p, { sx: { paddingBottom: "20px" }, variant: "subsectionHeader", children: "Sustainability Index" }),
      /* @__PURE__ */ e(v, {})
    ] });
  const h = k(
    s,
    a
  ), f = l?.rows[0].values[h], g = C(
    l?.rows[0],
    a,
    o
  );
  return /* @__PURE__ */ t(
    n,
    {
      sx: {
        display: "flex",
        flexDirection: { xs: "column", sm: "row" },
        padding: "20px",
        gap: "20px",
        ...i
      },
      children: [
        /* @__PURE__ */ t(c, { sx: { display: "flex", gap: "20px", alignItems: "center" }, children: [
          /* @__PURE__ */ e(p, { variant: "subsectionHeader", children: "Sustainability Index" }),
          /* @__PURE__ */ e(B, { scoreDescriptor: f ?? "" })
        ] }),
        /* @__PURE__ */ t(c, { sx: { flex: 1, gap: "2px" }, children: [
          /* @__PURE__ */ e(q, { metricValues: g, metricsConfig: o }),
          d && /* @__PURE__ */ e(
            b,
            {
              component: j,
              to: { pathname: d, search: u },
              sx: { padding: "4px 20px", fontSize: "14px" },
              children: "View this tool’s sustainability and reusability report"
            }
          )
        ] })
      ]
    }
  );
};
export {
  Y as default
};
//# sourceMappingURL=SustainabilityScorecard.js.map