@roadiehq/backstage-plugin-github-insights/dist/components/Widgets/LanguagesCard/LanguagesCard.esm.js

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { makeStyles, Tooltip, Chip } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import { MissingAnnotationEmptyState, Progress, InfoCard } from '@backstage/core-components';
import { useRequest } from '../../../hooks/useRequest.esm.js';
import { colors } from './colors.esm.js';
import { useProjectEntity } from '../../../hooks/useProjectEntity.esm.js';
import { isGithubInsightsAvailable, GITHUB_INSIGHTS_ANNOTATION } from '../../utils/isGithubInsightsAvailable.esm.js';
import { useEntity } from '@backstage/plugin-catalog-react';
import { getHostname } from '../../utils/githubUtils.esm.js';
import { GitHubAuthorizationWrapper } from '@roadiehq/github-auth-utils-react';

const useStyles = makeStyles((theme) => ({
  infoCard: {
    marginBottom: "10px",
    "& + .MuiAlert-root": {
      marginTop: theme.spacing(3)
    }
  },
  barContainer: {
    height: theme.spacing(2),
    marginBottom: theme.spacing(3),
    borderRadius: "4px",
    backgroundColor: "transparent",
    overflow: "hidden"
  },
  bar: {
    height: "100%",
    position: "relative"
  },
  languageDot: {
    width: "10px",
    height: "10px",
    borderRadius: "50%",
    marginRight: theme.spacing(1),
    display: "inline-block"
  },
  label: {
    color: "inherit"
  }
}));
const LanguagesCardContent = () => {
  const { entity } = useEntity();
  let barWidth = 0;
  const classes = useStyles();
  const { owner, repo } = useProjectEntity(entity);
  const { value, loading, error } = useRequest(entity, "languages", 0, 0);
  const projectAlert = isGithubInsightsAvailable(entity);
  if (!projectAlert) {
    return /* @__PURE__ */ jsx(MissingAnnotationEmptyState, { annotation: GITHUB_INSIGHTS_ANNOTATION });
  }
  if (loading) {
    return /* @__PURE__ */ jsx(Progress, {});
  } else if (error) {
    return /* @__PURE__ */ jsx(Alert, { severity: "error", className: classes.infoCard, children: error.message });
  }
  return value && Object.keys(value).length && owner && repo ? /* @__PURE__ */ jsxs(InfoCard, { title: "Languages", className: classes.infoCard, children: [
    /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: Object.entries(value).map((language, index) => {
      barWidth = barWidth + language[1] / Object.values(value).reduce(
        (a, b) => a + b
      ) * 100;
      return /* @__PURE__ */ jsx(
        Tooltip,
        {
          title: language[0],
          placement: "bottom-end",
          children: /* @__PURE__ */ jsx(
            "div",
            {
              className: classes.bar,
              style: {
                marginTop: index === 0 ? "0" : `-16px`,
                zIndex: Object.keys(value).length - index,
                backgroundColor: colors[language[0]]?.color || "#333",
                width: `${barWidth}%`
              }
            },
            language[0]
          )
        },
        language[0]
      );
    }) }),
    Object.entries(value).map((language) => /* @__PURE__ */ jsx(
      Chip,
      {
        classes: {
          label: classes.label
        },
        label: /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              className: classes.languageDot,
              style: {
                backgroundColor: colors[language[0]]?.color || "#333"
              }
            }
          ),
          language[0],
          " -",
          " ",
          (language[1] / Object.values(value).reduce(
            (a, b) => a + b
          ) * 100).toFixed(2),
          "%"
        ] }),
        variant: "outlined"
      },
      language[0]
    ))
  ] }) : /* @__PURE__ */ jsx(Fragment, {});
};
const LanguagesCard = () => {
  const { entity } = useEntity();
  const hostname = getHostname(entity);
  return /* @__PURE__ */ jsx(GitHubAuthorizationWrapper, { title: "Languages", hostname, children: /* @__PURE__ */ jsx(LanguagesCardContent, {}) });
};

export { LanguagesCard as default };
//# sourceMappingURL=LanguagesCard.esm.js.map