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

import React from 'react';
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: theme.spacing(3),
    "& + .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__ */ React.createElement(MissingAnnotationEmptyState, { annotation: GITHUB_INSIGHTS_ANNOTATION });
  }
  if (loading) {
    return /* @__PURE__ */ React.createElement(Progress, null);
  } else if (error) {
    return /* @__PURE__ */ React.createElement(Alert, { severity: "error", className: classes.infoCard }, error.message);
  }
  return value && Object.keys(value).length && owner && repo ? /* @__PURE__ */ React.createElement(InfoCard, { title: "Languages", className: classes.infoCard }, /* @__PURE__ */ React.createElement("div", { className: classes.barContainer }, Object.entries(value).map((language, index) => {
    barWidth = barWidth + language[1] / Object.values(value).reduce(
      (a, b) => a + b
    ) * 100;
    return /* @__PURE__ */ React.createElement(
      Tooltip,
      {
        title: language[0],
        placement: "bottom-end",
        key: language[0]
      },
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: classes.bar,
          key: language[0],
          style: {
            marginTop: index === 0 ? "0" : `-16px`,
            zIndex: Object.keys(value).length - index,
            backgroundColor: colors[language[0]]?.color || "#333",
            width: `${barWidth}%`
          }
        }
      )
    );
  })), Object.entries(value).map((language) => /* @__PURE__ */ React.createElement(
    Chip,
    {
      classes: {
        label: classes.label
      },
      label: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
        "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",
      key: language[0]
    }
  ))) : /* @__PURE__ */ React.createElement(React.Fragment, null);
};
const LanguagesCard = () => {
  const { entity } = useEntity();
  const hostname = getHostname(entity);
  return /* @__PURE__ */ React.createElement(GitHubAuthorizationWrapper, { title: "Languages", hostname }, /* @__PURE__ */ React.createElement(LanguagesCardContent, null));
};

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