@backstage-community/plugin-apiiro 0.1.0

package/dist/components/tiles/SLAAdherenceTile.esm.js

@@ -0,0 +1,115 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { useApi, fetchApiRef } from '@backstage/core-plugin-api';
+import { getSlaColors } from '../../theme/themeUtils.esm.js';
+import { ChartBox } from '../common/ChartBox.esm.js';
+import { ColumnChart } from '../charts/ColumnChart.esm.js';
+import { useSlaBreachData } from '../../queries/sla-breach.queries.esm.js';
+import { apiiroApiRef } from '../../api/index.esm.js';
+import 'react';
+import 'react-dom';
+import { NotFound } from '../common/NotFound.esm.js';
+import { SomethingWentWrong } from '../common/SomethingWentWrong.esm.js';
+import { LogoSpinner } from '../common/logoSpinner.esm.js';
+
+const SLAAdherenceTile = ({
+  title = "SLA adherence",
+  data = [],
+  width = "100%",
+  height = "366px",
+  repoId,
+  entityRef
+}) => {
+  const theme = useTheme();
+  const slaColors = getSlaColors(theme);
+  const connectBackendApi = useApi(apiiroApiRef);
+  const { fetch } = useApi(fetchApiRef);
+  const { slaBreachData, slaBreachDataError, slaBreachDataLoading } = useSlaBreachData({
+    connectApi: connectBackendApi,
+    fetchApi: fetch,
+    repositoryKey: repoId,
+    entityRef
+  });
+  if (slaBreachDataLoading) {
+    return /* @__PURE__ */ jsx(ChartBox, { title, width, height, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: "250px",
+        children: /* @__PURE__ */ jsx(LogoSpinner, {})
+      }
+    ) });
+  }
+  if (slaBreachDataError) {
+    return /* @__PURE__ */ jsx(ChartBox, { title, width, children: /* @__PURE__ */ jsx(SomethingWentWrong, {}) });
+  }
+  if (!repoId) {
+    return /* @__PURE__ */ jsx(ChartBox, { title, width, height, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: "300px",
+        children: /* @__PURE__ */ jsx(NotFound, { message: "Please provide the repository details to access the data." })
+      }
+    ) });
+  }
+  const finalData = slaBreachData ? slaBreachData.map((point) => ({
+    category: point.riskLevel,
+    slaBreaches: point.slaBreach,
+    slaAdherence: point.slaAdherence,
+    dueDateNotSet: point.unsetDueDate
+  })) : data;
+  if (finalData.length === 0) {
+    return /* @__PURE__ */ jsx(ChartBox, { title, width, height, children: /* @__PURE__ */ jsx(NotFound, {}) });
+  }
+  const hasAllZeroValues = slaBreachData.every(
+    (point) => point.slaBreach === 0 && point.slaAdherence === 0 && point.unsetDueDate === 0
+  );
+  if (hasAllZeroValues) {
+    return /* @__PURE__ */ jsx(ChartBox, { title, width, height, children: /* @__PURE__ */ jsx(NotFound, {}) });
+  }
+  const getChartWidth = () => {
+    if (typeof width === "string" && width.includes("%")) {
+      return 400;
+    }
+    return typeof width === "number" ? width - 40 : 400;
+  };
+  const columnData = finalData.map((item) => ({
+    category: item.category,
+    values: [
+      {
+        label: "SLA breaches",
+        value: item.slaBreaches,
+        color: slaColors.breach
+      },
+      {
+        label: "SLA adherence",
+        value: item.slaAdherence,
+        color: slaColors.adherence
+      },
+      {
+        label: "Due date not set",
+        value: item.dueDateNotSet,
+        color: slaColors.notSet
+      }
+    ]
+  }));
+  return /* @__PURE__ */ jsx(ChartBox, { title, width, height, children: /* @__PURE__ */ jsx(
+    ColumnChart,
+    {
+      data: columnData,
+      width: getChartWidth(),
+      height: 300,
+      showLegend: true,
+      legendPosition: "bottom"
+    }
+  ) });
+};
+
+export { SLAAdherenceTile, SLAAdherenceTile as default };
+//# sourceMappingURL=SLAAdherenceTile.esm.js.map

package/dist/components/tiles/SLAAdherenceTile.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SLAAdherenceTile.esm.js","sources":["../../../src/components/tiles/SLAAdherenceTile.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { fetchApiRef, useApi } from '@backstage/core-plugin-api';\nimport { getSlaColors } from '../../theme/themeUtils';\nimport { ChartBox } from '../common/ChartBox';\nimport ColumnChart, { ColumnData } from '../charts/ColumnChart';\nimport { useSlaBreachData } from '../../queries/sla-breach.queries';\nimport { apiiroApiRef } from '../../api';\nimport { SlaBreachDataPoint } from '../../queries/queries.type';\nimport { NotFound, SomethingWentWrong } from '../common';\nimport { LogoSpinner } from '../common/logoSpinner';\n\nexport interface SLAAdherenceData {\n  category: string;\n  slaBreaches: number;\n  slaAdherence: number;\n  dueDateNotSet: number;\n}\n\nexport interface SLAAdherenceTileProps {\n  title?: string;\n  tooltip?: string;\n  data?: SLAAdherenceData[];\n  width?: string | number;\n  height?: string | number;\n  repoId?: string;\n  entityRef?: string;\n}\n\nexport const SLAAdherenceTile = ({\n  title = 'SLA adherence',\n  data = [],\n  width = '100%',\n  height = '366px',\n  repoId,\n  entityRef,\n}: SLAAdherenceTileProps) => {\n  // Use API hooks internally\n  const theme = useTheme();\n  const slaColors = getSlaColors(theme);\n  const connectBackendApi = useApi(apiiroApiRef);\n  const { fetch } = useApi(fetchApiRef);\n\n  // Always call the hook, but conditionally use the result\n  const { slaBreachData, slaBreachDataError, slaBreachDataLoading } =\n    useSlaBreachData({\n      connectApi: connectBackendApi,\n      fetchApi: fetch,\n      repositoryKey: repoId,\n      entityRef: entityRef,\n    });\n\n  // Show loading state while data is loading (Query check - loading)\n  if (slaBreachDataLoading) {\n    return (\n      <ChartBox title={title} width={width} height={height}>\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight=\"250px\"\n        >\n          <LogoSpinner />\n        </Box>\n      </ChartBox>\n    );\n  }\n\n  // Show error state if there's an error (Query check - error)\n  if (slaBreachDataError) {\n    return (\n      <ChartBox title={title} width={width}>\n        <SomethingWentWrong />\n      </ChartBox>\n    );\n  }\n\n  // Show message when no repository key is provided\n  if (!repoId) {\n    return (\n      <ChartBox title={title} width={width} height={height}>\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          minHeight=\"300px\"\n        >\n          <NotFound message=\"Please provide the repository details to access the data.\" />\n        </Box>\n      </ChartBox>\n    );\n  }\n\n  // Transform API data to component data format\n  const finalData: SLAAdherenceData[] = slaBreachData\n    ? slaBreachData.map((point: SlaBreachDataPoint) => ({\n        category: point.riskLevel,\n        slaBreaches: point.slaBreach,\n        slaAdherence: point.slaAdherence,\n        dueDateNotSet: point.unsetDueDate,\n      }))\n    : data;\n\n  // Total data length check\n  if (finalData.length === 0) {\n    return (\n      <ChartBox title={title} width={width} height={height}>\n        <NotFound />\n      </ChartBox>\n    );\n  }\n\n  // Check if all values are zero (slaBreach, slaAdherence, and unsetDueDate)\n  const hasAllZeroValues = slaBreachData!.every(\n    (point: SlaBreachDataPoint) =>\n      point.slaBreach === 0 &&\n      point.slaAdherence === 0 &&\n      point.unsetDueDate === 0,\n  );\n\n  // If all zero, send NotFound\n  if (hasAllZeroValues) {\n    return (\n      <ChartBox title={title} width={width} height={height}>\n        <NotFound />\n      </ChartBox>\n    );\n  }\n\n  // Calculate chart width based on container\n  const getChartWidth = () => {\n    if (typeof width === 'string' && width.includes('%')) {\n      // For percentage widths, assume a reasonable container width\n      return 400; // This will be responsive within the container\n    }\n    return typeof width === 'number' ? width - 40 : 400; // Leave some padding\n  };\n\n  // Transform data for ColumnChart\n  const columnData: ColumnData[] = finalData.map(item => ({\n    category: item.category,\n    values: [\n      {\n        label: 'SLA breaches',\n        value: item.slaBreaches,\n        color: slaColors.breach,\n      },\n      {\n        label: 'SLA adherence',\n        value: item.slaAdherence,\n        color: slaColors.adherence,\n      },\n      {\n        label: 'Due date not set',\n        value: item.dueDateNotSet,\n        color: slaColors.notSet,\n      },\n    ],\n  }));\n\n  return (\n    <ChartBox title={title} width={width} height={height}>\n      <ColumnChart\n        data={columnData}\n        width={getChartWidth()}\n        height={300}\n        showLegend\n        legendPosition=\"bottom\"\n      />\n    </ChartBox>\n  );\n};\n\nexport default SLAAdherenceTile;\n"],"names":[],"mappings":"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"}

package/dist/components/tiles/StatusTile.esm.js

@@ -0,0 +1,235 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { getActivityStatusColors, getLogoContainerColors } from '../../theme/themeUtils.esm.js';
+import { Link } from 'react-router-dom';
+import { ApiiroLogo } from '../../assets/apiiroLogo/apiiroLogo.esm.js';
+import '@mui/material/SvgIcon';
+import { formatNumberWithSuffix } from '../../utils/numberFormatter.esm.js';
+import { formatActivityTooltip, getDevelopmentDuration } from '../../utils/dateFormatter.esm.js';
+import '@mui/icons-material';
+import 'react-icons/vsc';
+import 'react-icons/si';
+import { APIIRO_DEFAULT_BASE_URL } from '@backstage-community/plugin-apiiro-common';
+import '../common/ChartBox.esm.js';
+import { CustomTooltip } from '../common/CustomTooltip.esm.js';
+import { NotFound } from '../common/NotFound.esm.js';
+import { scmProviderIcons, generateRepoURL } from '../common/scmProviders.esm.js';
+import { SettingIcon } from '../../assets/SettingIcon.esm.js';
+
+const ThemedIcon = styled("span")(({ theme }) => ({
+  display: "inline-flex",
+  "& svg": {
+    color: theme.palette.text.primary,
+    flexShrink: 0
+  },
+  "&:hover svg": {
+    color: theme.palette.primary.main
+  }
+}));
+const StatusIndicator = styled("span")(
+  ({ theme, isActive }) => {
+    const activityColors = getActivityStatusColors(theme);
+    return {
+      display: "inline-block",
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      backgroundColor: isActive ? activityColors.active : activityColors.inactive,
+      marginRight: 8
+    };
+  }
+);
+const StatusBox = styled(Box)(({ theme, width, height }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: "12px",
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  width: width || "fit-content",
+  height: height || "auto",
+  margin: width === "100%" ? "0" : "0 auto",
+  maxWidth: "100%",
+  display: "flex",
+  flexDirection: "column",
+  boxSizing: "border-box"
+}));
+const StatusContent = styled(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: "12px",
+  padding: "16px"
+}));
+const StatusRow = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+}));
+const StatusLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "16px",
+  fontWeight: 400,
+  color: theme.palette.text.secondary
+}));
+const StatusValue = styled(Typography)(({ theme }) => ({
+  fontSize: "16px",
+  fontWeight: 400,
+  color: theme.palette.text.primary
+}));
+const BranchLink = styled(Link)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  fontSize: "16px",
+  fontWeight: 400,
+  color: theme.palette.info.main,
+  textDecoration: "underline",
+  cursor: "pointer"
+}));
+const ActionLinks = styled(Box)(() => ({
+  display: "flex",
+  gap: "16px",
+  marginTop: "8px"
+}));
+const ActionLink = styled(Link)(({ theme }) => ({
+  fontSize: "16px",
+  fontWeight: 400,
+  color: theme.palette.info.main,
+  textDecoration: "none",
+  cursor: "pointer"
+}));
+const CustomHeader = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "12px"
+}));
+const TitleContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  paddingLeft: "16px",
+  paddingTop: "16px"
+}));
+const StyledTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 400,
+  fontSize: "16px",
+  lineHeight: "24px",
+  color: theme.palette.text.primary
+}));
+const LogoContainer = styled(Box)(({ theme }) => {
+  const logoColors = getLogoContainerColors(theme);
+  return {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "12px 15px",
+    gap: "10px",
+    width: "109px",
+    height: "40px",
+    background: logoColors.background,
+    borderRadius: "10px",
+    "& svg": {
+      width: "79px",
+      height: "22px",
+      "& path": {
+        fill: logoColors.logoFill
+      }
+    }
+  };
+});
+const CustomHeaderData = ({ title }) => /* @__PURE__ */ jsxs(CustomHeader, { children: [
+  /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsx(StyledTitle, { children: title }) }),
+  /* @__PURE__ */ jsx(LogoContainer, { children: /* @__PURE__ */ jsx(ApiiroLogo, {}) })
+] });
+const StatusTile = ({
+  title = "Status",
+  width = "100%",
+  height = "auto",
+  repository,
+  detailViewLink = null,
+  allowViewChart = true
+}) => {
+  if (Object.keys(repository).length === 0) {
+    return /* @__PURE__ */ jsxs(StatusBox, { width, height, alignContent: "flex-start", children: [
+      /* @__PURE__ */ jsx(CustomHeaderData, { title: "" }),
+      /* @__PURE__ */ jsx(NotFound, { message: "Results for this repository are either unavailable on Apiiro or cannot be accessed." })
+    ] });
+  }
+  const ProviderIconComponent = scmProviderIcons[repository.provider];
+  const apiiroRepoUrl = `${APIIRO_DEFAULT_BASE_URL}/profiles/repositories/${repository.key}`;
+  const settingsUrl = `${apiiroRepoUrl}/profile/${repository.scmRepositoryKey}/multi-branch`;
+  return /* @__PURE__ */ jsxs(StatusBox, { width, height, alignContent: "flex-start", children: [
+    /* @__PURE__ */ jsx(CustomHeaderData, { title }),
+    /* @__PURE__ */ jsxs(StatusContent, { children: [
+      repository?.lastActivity && repository?.activeSince && /* @__PURE__ */ jsx(
+        CustomTooltip,
+        {
+          title: formatActivityTooltip(
+            repository.lastActivity,
+            repository.activeSince
+          ),
+          placement: "bottom",
+          children: /* @__PURE__ */ jsxs(StatusRow, { children: [
+            /* @__PURE__ */ jsx(StatusLabel, { children: "Activity:" }),
+            /* @__PURE__ */ jsx(StatusValue, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx(StatusIndicator, { isActive: repository.isActive }),
+              repository.isActive ? `In development for ${getDevelopmentDuration(
+                repository.activeSince
+              )}` : "Inactive"
+            ] }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CustomTooltip,
+        {
+          title: "A weighted value based on the number of risks at each severity level.",
+          placement: "top",
+          children: /* @__PURE__ */ jsxs(StatusRow, { children: [
+            /* @__PURE__ */ jsx(StatusLabel, { children: "Risk score:" }),
+            /* @__PURE__ */ jsx(StatusValue, { children: formatNumberWithSuffix(repository.riskScore) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(StatusRow, { children: [
+        ProviderIconComponent && /* @__PURE__ */ jsx(ThemedIcon, { children: /* @__PURE__ */ jsx(ProviderIconComponent, {}) }),
+        /* @__PURE__ */ jsx(
+          BranchLink,
+          {
+            to: generateRepoURL(repository) || "",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: `Analyzing ${repository.branchName} branch`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: settingsUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: { display: "inline-flex", marginLeft: "4px" },
+            children: /* @__PURE__ */ jsx(SettingIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(ActionLinks, { children: [
+        allowViewChart && /* @__PURE__ */ jsx(
+          ActionLink,
+          {
+            to: apiiroRepoUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Go to Apiiro \u2192"
+          }
+        ),
+        detailViewLink && /* @__PURE__ */ jsx(ActionLink, { to: detailViewLink, children: "Detail View \u2192" })
+      ] })
+    ] })
+  ] });
+};
+
+export { StatusBox, StatusTile, StatusTile as default };
+//# sourceMappingURL=StatusTile.esm.js.map

package/dist/components/tiles/StatusTile.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusTile.esm.js","sources":["../../../src/components/tiles/StatusTile.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { styled } from '@mui/material/styles';\nimport {\n  getActivityStatusColors,\n  getLogoContainerColors,\n} from '../../theme/themeUtils';\nimport { Link } from 'react-router-dom';\nimport { ApiiroLogo } from '../../assets/apiiroLogo';\nimport { formatNumberWithSuffix } from '../../utils';\nimport {\n  formatActivityTooltip,\n  getDevelopmentDuration,\n} from '../../utils/dateFormatter';\nimport { RepositoryType } from '../../queries/queries.type';\nimport { CustomTooltip, NotFound } from '../common';\nimport { generateRepoURL, scmProviderIcons } from '../common/scmProviders';\nimport { APIIRO_DEFAULT_BASE_URL } from '@backstage-community/plugin-apiiro-common';\nimport SettingIcon from '../../assets/SettingIcon';\n\nconst ThemedIcon = styled('span')(({ theme }) => ({\n  display: 'inline-flex',\n  '& svg': {\n    color: theme.palette.text.primary,\n    flexShrink: 0,\n  },\n  '&:hover svg': {\n    color: theme.palette.primary.main,\n  },\n}));\n\nconst StatusIndicator = styled('span')<{ isActive: boolean }>(\n  ({ theme, isActive }) => {\n    const activityColors = getActivityStatusColors(theme);\n    return {\n      display: 'inline-block',\n      width: 8,\n      height: 8,\n      borderRadius: '50%',\n      backgroundColor: isActive\n        ? activityColors.active\n        : activityColors.inactive,\n      marginRight: 8,\n    };\n  },\n);\n\nexport interface StatusTileProps {\n  title?: string;\n  width?: string | number;\n  height?: string | number;\n  repository: RepositoryType;\n  detailViewLink?: string | null;\n  allowViewChart?: boolean;\n}\n\nexport const StatusBox = styled(Box)<{\n  width?: string | number;\n  height?: string | number;\n}>(({ theme, width, height }) => ({\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: '12px',\n  backgroundColor: theme.palette.background.paper,\n  boxShadow: theme.shadows[1],\n  width: width || 'fit-content',\n  height: height || 'auto',\n  margin: width === '100%' ? '0' : '0 auto',\n  maxWidth: '100%',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n}));\n\nconst StatusContent = styled(Box)(() => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: '12px',\n  padding: '16px',\n}));\n\nconst StatusRow = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n}));\n\nconst StatusLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '16px',\n  fontWeight: 400,\n  color: theme.palette.text.secondary,\n}));\n\nconst StatusValue = styled(Typography)(({ theme }) => ({\n  fontSize: '16px',\n  fontWeight: 400,\n  color: theme.palette.text.primary,\n}));\n\nconst BranchLink = styled(Link)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  fontSize: '16px',\n  fontWeight: 400,\n  color: theme.palette.info.main,\n  textDecoration: 'underline',\n  cursor: 'pointer',\n}));\n\nconst ActionLinks = styled(Box)(() => ({\n  display: 'flex',\n  gap: '16px',\n  marginTop: '8px',\n}));\n\nconst ActionLink = styled(Link)(({ theme }) => ({\n  fontSize: '16px',\n  fontWeight: 400,\n  color: theme.palette.info.main,\n  textDecoration: 'none',\n  cursor: 'pointer',\n}));\n\nconst CustomHeader = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  marginBottom: '12px',\n}));\n\nconst TitleContainer = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  paddingLeft: '16px',\n  paddingTop: '16px',\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: '16px',\n  lineHeight: '24px',\n  color: theme.palette.text.primary,\n}));\n\nconst LogoContainer = styled(Box)(({ theme }) => {\n  const logoColors = getLogoContainerColors(theme);\n  return {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '12px 15px',\n    gap: '10px',\n    width: '109px',\n    height: '40px',\n    background: logoColors.background,\n    borderRadius: '10px',\n    '& svg': {\n      width: '79px',\n      height: '22px',\n      '& path': {\n        fill: logoColors.logoFill,\n      },\n    },\n  };\n});\n\nconst CustomHeaderData = ({ title }: { title: string }) => (\n  <CustomHeader>\n    <TitleContainer>\n      <StyledTitle>{title}</StyledTitle>\n    </TitleContainer>\n    <LogoContainer>\n      <ApiiroLogo />\n    </LogoContainer>\n  </CustomHeader>\n);\n\nexport const StatusTile = ({\n  title = 'Status',\n  width = '100%',\n  height = 'auto',\n  repository,\n  detailViewLink = null,\n  allowViewChart = true,\n}: StatusTileProps) => {\n  // Show message when no data is available\n  if (Object.keys(repository).length === 0) {\n    return (\n      <StatusBox width={width} height={height} alignContent=\"flex-start\">\n        <CustomHeaderData title=\"\" />\n        <NotFound message=\"Results for this repository are either unavailable on Apiiro or cannot be accessed.\" />\n      </StatusBox>\n    );\n  }\n\n  const ProviderIconComponent = scmProviderIcons[repository.provider as string];\n  const apiiroRepoUrl = `${APIIRO_DEFAULT_BASE_URL}/profiles/repositories/${repository.key}`;\n  const settingsUrl = `${apiiroRepoUrl}/profile/${repository.scmRepositoryKey}/multi-branch`;\n\n  return (\n    <StatusBox width={width} height={height} alignContent=\"flex-start\">\n      <CustomHeaderData title={title} />\n      <StatusContent>\n        {repository?.lastActivity && repository?.activeSince && (\n          <CustomTooltip\n            title={formatActivityTooltip(\n              repository.lastActivity,\n              repository.activeSince,\n            )}\n            placement=\"bottom\"\n          >\n            <StatusRow>\n              <StatusLabel>Activity:</StatusLabel>\n              <StatusValue>\n                <Box sx={{ display: 'flex', alignItems: 'center' }}>\n                  <StatusIndicator isActive={repository.isActive} />\n                  {repository.isActive\n                    ? `In development for ${getDevelopmentDuration(\n                        repository.activeSince,\n                      )}`\n                    : 'Inactive'}\n                </Box>\n              </StatusValue>\n            </StatusRow>\n          </CustomTooltip>\n        )}\n        <CustomTooltip\n          title=\"A weighted value based on the number of risks at each severity level.\"\n          placement=\"top\"\n        >\n          <StatusRow>\n            <StatusLabel>Risk score:</StatusLabel>\n            <StatusValue>\n              {formatNumberWithSuffix(repository.riskScore)}\n            </StatusValue>\n          </StatusRow>\n        </CustomTooltip>\n        <StatusRow>\n          {ProviderIconComponent && (\n            <ThemedIcon>\n              <ProviderIconComponent />\n            </ThemedIcon>\n          )}\n          <BranchLink\n            to={generateRepoURL(repository) || ''}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            {`Analyzing ${repository.branchName} branch`}\n          </BranchLink>\n          <Link\n            to={settingsUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            style={{ display: 'inline-flex', marginLeft: '4px' }}\n          >\n            <SettingIcon />\n          </Link>\n        </StatusRow>\n        <ActionLinks>\n          {allowViewChart && (\n            <ActionLink\n              to={apiiroRepoUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Go to Apiiro →\n            </ActionLink>\n          )}\n          {detailViewLink && (\n            <ActionLink to={detailViewLink}>Detail View →</ActionLink>\n          )}\n        </ActionLinks>\n      </StatusContent>\n    </StatusBox>\n  );\n};\n\nexport default StatusTile;\n"],"names":[],"mappings":"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"}

package/dist/components/tiles/TopLanguagesTile.esm.js

@@ -0,0 +1,234 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled, useTheme } from '@mui/material/styles';
+import { getBlueColorVariants, getOtherColor } from '../../theme/themeUtils.esm.js';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import { languageIconMap } from '../common/languageIcons.esm.js';
+import { ChartBox } from '../common/ChartBox.esm.js';
+import { CustomTooltip } from '../common/CustomTooltip.esm.js';
+import { NotFound } from '../common/NotFound.esm.js';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { PieChart } from '../charts/PieChart.esm.js';
+import '@mui/material/SvgIcon';
+import { ApiiroSmall } from '../../assets/apiiroLogo/apiiroSmall.esm.js';
+import Divider from '@mui/material/Divider';
+
+const LegendContainer = styled(Box)(() => ({
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  gap: "6px"
+}));
+const LegendItem = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  fontSize: "12px",
+  color: theme.palette.text.secondary
+}));
+const LegendColor = styled("div")(({ color }) => ({
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: color,
+  flexShrink: 0
+}));
+const CustomHeader = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "12px"
+}));
+const TitleContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+}));
+const StyledTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 400,
+  fontSize: "16px",
+  lineHeight: "24px",
+  color: theme.palette.text.primary
+}));
+const mapLanguagePercentagesToPieData = (languagePercentages) => Object.entries(languagePercentages).map(([language, value], index) => {
+  const numericValue = typeof value === "number" && !isNaN(value) ? value : 0;
+  return {
+    id: `${language.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${index}`,
+    label: language,
+    value: numericValue
+  };
+}).filter((item) => item.value > 0);
+const TopLanguagesTile = ({
+  title = "Top languages",
+  data = {},
+  width = "100%"
+}) => {
+  const theme = useTheme();
+  const blueColorVariants = getBlueColorVariants(theme);
+  const otherColor = getOtherColor(theme);
+  const chartData = useMemo(() => {
+    if (data && Object.keys(data).length > 0) {
+      const mappedData = mapLanguagePercentagesToPieData(data);
+      if (mappedData.length > 0) {
+        return mappedData;
+      }
+    }
+    return [];
+  }, [data]);
+  const [processedData, setProcessedData] = useState(chartData);
+  useEffect(() => {
+    setProcessedData(chartData);
+  }, [chartData]);
+  const customHeader = /* @__PURE__ */ jsx(CustomHeader, { children: /* @__PURE__ */ jsxs(TitleContainer, { children: [
+    /* @__PURE__ */ jsx(StyledTitle, { children: title }),
+    /* @__PURE__ */ jsx(ApiiroSmall, { sx: { width: 20, height: 20, color: "text.primary" } })
+  ] }) });
+  const generateColor = useCallback(
+    (index, itemId) => {
+      if (itemId === "other") {
+        return otherColor;
+      }
+      if (index < blueColorVariants.length) {
+        return blueColorVariants[index];
+      }
+      return otherColor;
+    },
+    [blueColorVariants, otherColor]
+  );
+  const legend = /* @__PURE__ */ jsxs(LegendContainer, { children: [
+    processedData.slice(0, 5).map((item, index) => /* @__PURE__ */ jsxs(LegendItem, { children: [
+      /* @__PURE__ */ jsx(LegendColor, { color: item.color || generateColor(index, item.id) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", children: item.label })
+    ] }, item.id)),
+    processedData.length > 5 && /* @__PURE__ */ jsx(
+      CustomTooltip,
+      {
+        title: /* @__PURE__ */ jsxs(List, { dense: true, disablePadding: true, children: [
+          processedData.slice(5).map((item) => {
+            const LanguageIcon = languageIconMap[item.label] || languageIconMap["Unknown"];
+            return /* @__PURE__ */ jsx(
+              ListItem,
+              {
+                disableGutters: true,
+                disablePadding: true,
+                sx: { py: 0.5, px: 1, minWidth: 200 },
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      width: "100%",
+                      justifyContent: "space-between"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          sx: { display: "flex", alignItems: "center", gap: 1 },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                sx: {
+                                  width: 24,
+                                  height: 24,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center"
+                                },
+                                children: /* @__PURE__ */ jsx(LanguageIcon, {})
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Typography,
+                              {
+                                variant: "body2",
+                                sx: { fontSize: "12px", color: "text.primary" },
+                                children: item.label
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Typography,
+                        {
+                          variant: "body2",
+                          sx: {
+                            fontSize: "12px",
+                            color: "text.primary",
+                            fontWeight: 400
+                          },
+                          children: [
+                            Math.round(item.value),
+                            "%"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              item.id
+            );
+          }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: { py: 1, fontSize: "12px", color: "text.primary" },
+              children: "Less then 0.1%"
+            }
+          )
+        ] }),
+        placement: "top",
+        children: /* @__PURE__ */ jsxs(LegendItem, { children: [
+          /* @__PURE__ */ jsx(LegendColor, { color: generateColor(-1, "other") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "Other" })
+        ] })
+      }
+    )
+  ] });
+  if (Object.keys(data).length === 0 || processedData.length === 0) {
+    return /* @__PURE__ */ jsx(ChartBox, { title, width, customHeader, children: /* @__PURE__ */ jsx(NotFound, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    ChartBox,
+    {
+      title,
+      width,
+      footer: legend,
+      customHeader,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            flex: 1,
+            minHeight: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            PieChart,
+            {
+              data: chartData,
+              width: 310,
+              height: 310,
+              generateColor,
+              onDataProcessed: setProcessedData
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+export { TopLanguagesTile, TopLanguagesTile as default };
+//# sourceMappingURL=TopLanguagesTile.esm.js.map