@backstage-community/plugin-apiiro 0.1.0

package/dist/components/charts/PieChart.esm.js

@@ -0,0 +1,233 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PieChart as PieChart$1 } from '@mui/x-charts/PieChart';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import { languageIconMap } from '../common/languageIcons.esm.js';
+import { getBlueColorVariants } from '../../theme/themeUtils.esm.js';
+
+const PIE_CHART_MAX_ITEMS_LIMIT = 5;
+const ChartContainer = styled("div")(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%"
+}));
+const CenterLabelContainer = styled("div")(() => ({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  textAlign: "center",
+  pointerEvents: "none",
+  zIndex: 10,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+const PrimaryLabel = styled("div")(({ theme }) => ({
+  fontSize: "24px",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  lineHeight: "1.2"
+}));
+const SecondaryLabel = styled("div")(({ theme }) => ({
+  fontSize: "12px",
+  color: theme.palette.text.secondary,
+  marginTop: "4px"
+}));
+const TertiaryLabel = styled("div")(({ theme }) => ({
+  fontSize: "14px",
+  fontWeight: 400,
+  color: theme.palette.text.primary,
+  marginTop: "2px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "4px"
+}));
+const PieChart = ({
+  data,
+  width = 300,
+  height = 300,
+  innerRadius: innerRadiusProp,
+  outerRadius: outerRadiusProp,
+  centerLabel,
+  generateColor,
+  onDataProcessed
+}) => {
+  const theme = useTheme();
+  const blueColorVariants = getBlueColorVariants(theme);
+  const defaultColor = blueColorVariants[0];
+  const dataWithColors = useMemo(() => {
+    const totalPercentage = data.reduce((sum, item) => sum + item.value, 0);
+    const sortedData = [...data].sort((a, b) => b.value - a.value);
+    let processedData;
+    let otherValue = 0;
+    if (sortedData.length > PIE_CHART_MAX_ITEMS_LIMIT) {
+      processedData = sortedData.slice(0, PIE_CHART_MAX_ITEMS_LIMIT);
+      const remainingItems = sortedData.slice(PIE_CHART_MAX_ITEMS_LIMIT);
+      otherValue = remainingItems.reduce((sum, item) => sum + item.value, 0);
+    } else {
+      processedData = sortedData;
+    }
+    if (otherValue > 0 || totalPercentage < 100) {
+      const finalOtherValue = totalPercentage > 0 ? otherValue + (100 - totalPercentage) : 0;
+      const otherItem = {
+        id: "other",
+        label: "Other",
+        value: finalOtherValue
+      };
+      processedData.push(otherItem);
+    }
+    const finalSortedData = processedData.sort((a, b) => {
+      if (a.id === "other" && b.id !== "other") return 1;
+      if (b.id === "other" && a.id !== "other") return -1;
+      return b.value - a.value;
+    });
+    return finalSortedData.map((item, index) => ({
+      ...item,
+      color: item.color || (generateColor ? generateColor(index, item.id) : defaultColor),
+      isMaxItem: index === 0
+      // First item after sorting is the max item
+    }));
+  }, [data, generateColor, defaultColor]);
+  const margin = { top: 5, right: 5, bottom: 5, left: 5 };
+  const innerWidth = (typeof width === "number" ? width : 300) - margin.left - margin.right;
+  const innerHeight = (typeof height === "number" ? height : 300) - margin.top - margin.bottom;
+  const radius = Math.min(innerWidth, innerHeight) / 2.2;
+  const donutThickness = 24;
+  const calculatedOuterRadius = radius * 0.8;
+  const calculatedInnerRadius = calculatedOuterRadius - donutThickness;
+  const outerRadius = outerRadiusProp || calculatedOuterRadius;
+  const innerRadius = innerRadiusProp || calculatedInnerRadius;
+  const maxItem = dataWithColors[0];
+  const [hoveredItem, setHoveredItem] = useState(maxItem);
+  const chartRef = useRef(null);
+  const maxItemIndex = 0;
+  useEffect(() => {
+    if (chartRef.current && maxItemIndex >= 0) {
+      const timer = setTimeout(() => {
+        setHoveredItem(maxItem);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [maxItem, maxItemIndex]);
+  useEffect(() => {
+    if (onDataProcessed) {
+      onDataProcessed(dataWithColors);
+    }
+  }, [dataWithColors, onDataProcessed]);
+  const displayItem = hoveredItem || maxItem;
+  const displayLabel = centerLabel || {
+    primary: `${Math.round(displayItem.value)}%`,
+    secondary: "Repository usage"
+  };
+  const chartData = dataWithColors;
+  const handleItemClick = (_event, itemIdentifier) => {
+    if (itemIdentifier?.dataIndex !== void 0) {
+      const clickedItem = dataWithColors[itemIdentifier.dataIndex];
+      setHoveredItem(clickedItem);
+    }
+  };
+  const LanguageIcon = languageIconMap[displayItem.label] || languageIconMap["Unknown"];
+  return /* @__PURE__ */ jsx(ChartContainer, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PieChart$1,
+          {
+            ref: chartRef,
+            series: [
+              {
+                data: chartData,
+                innerRadius,
+                outerRadius,
+                paddingAngle: 2,
+                cornerRadius: 0,
+                highlightScope: { highlighted: "item" },
+                highlighted: {
+                  additionalRadius: 10,
+                  innerRadius: innerRadius + 10
+                },
+                arcLabel: () => "",
+                arcLabelMinAngle: 360
+              }
+            ],
+            width,
+            height: outerRadius * 2 + 50,
+            onItemClick: handleItemClick,
+            onHighlightChange: (highlightedItem) => {
+              if (highlightedItem?.dataIndex !== void 0) {
+                const hoveredData = dataWithColors[highlightedItem.dataIndex];
+                setHoveredItem(hoveredData);
+              } else {
+                setHoveredItem(null);
+              }
+            },
+            tooltip: { trigger: "none" },
+            margin,
+            sx: {
+              "& .MuiPieArc-root": {
+                cursor: "pointer",
+                transition: "all 0.2s ease-in-out"
+              },
+              // Apply expansion to the max item by default
+              [`& .MuiPieArc-root:nth-of-type(${maxItemIndex + 1})`]: {
+                transform: hoveredItem && hoveredItem.id !== maxItem.id ? "scale(1)" : "scale(1.1)"
+              },
+              // Apply expansion to the currently hovered item (if it's not the max item)
+              ...hoveredItem && hoveredItem.id !== maxItem.id ? {
+                [`& .MuiPieArc-root:nth-of-type(${dataWithColors.findIndex(
+                  (item) => item.id === hoveredItem.id
+                ) + 1})`]: {
+                  transform: "scale(1.1)"
+                }
+              } : {},
+              // Disable CSS hover effects to prevent conflicts
+              "& .MuiPieArc-root:hover": {
+                transform: "none",
+                filter: "none",
+                cursor: "default"
+              },
+              "& .MuiPieArcLabel-root": {
+                display: "none"
+              },
+              "& .MuiPieChart-root text": {
+                display: "none"
+              },
+              "& .MuiChartsLegend-root": {
+                display: "none"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(CenterLabelContainer, { children: [
+          /* @__PURE__ */ jsx(PrimaryLabel, { children: displayLabel.primary }),
+          /* @__PURE__ */ jsx(SecondaryLabel, { children: displayLabel.secondary }),
+          /* @__PURE__ */ jsxs(TertiaryLabel, { children: [
+            /* @__PURE__ */ jsx(LanguageIcon, {}),
+            displayItem.label
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+
+export { PieChart, PieChart as default };
+//# sourceMappingURL=PieChart.esm.js.map

package/dist/components/charts/PieChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.esm.js","sources":["../../../src/components/charts/PieChart.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 { PieChart as MuiPieChart } from '@mui/x-charts/PieChart';\nimport { useState, useMemo, useEffect, useRef } from 'react';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { languageIconMap, LanguageKey } from '../common/languageIcons';\nimport { getBlueColorVariants } from '../../theme/themeUtils';\n\nconst PIE_CHART_MAX_ITEMS_LIMIT = 5;\nexport interface PieChartData {\n  id: string;\n  label: string;\n  value: number;\n  color?: string;\n}\n\nexport interface PieChartProps {\n  data: PieChartData[];\n  width?: number;\n  height?: number;\n  innerRadius?: number;\n  outerRadius?: number;\n  centerLabel?: {\n    primary: string;\n    secondary: string;\n  };\n  generateColor?: (index: number, itemId: string) => string;\n  onDataProcessed?: (processedData: PieChartData[]) => void;\n}\n\nconst ChartContainer = styled('div')(() => ({\n  position: 'relative',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n}));\n\nconst CenterLabelContainer = styled('div')(() => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  textAlign: 'center',\n  pointerEvents: 'none',\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n}));\n\nconst PrimaryLabel = styled('div')(({ theme }) => ({\n  fontSize: '24px',\n  fontWeight: 600,\n  color: theme.palette.text.primary,\n  lineHeight: '1.2',\n}));\n\nconst SecondaryLabel = styled('div')(({ theme }) => ({\n  fontSize: '12px',\n  color: theme.palette.text.secondary,\n  marginTop: '4px',\n}));\n\nconst TertiaryLabel = styled('div')(({ theme }) => ({\n  fontSize: '14px',\n  fontWeight: 400,\n  color: theme.palette.text.primary,\n  marginTop: '2px',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '4px',\n}));\n\nexport const PieChart = ({\n  data,\n  width = 300,\n  height = 300,\n  innerRadius: innerRadiusProp,\n  outerRadius: outerRadiusProp,\n  centerLabel,\n  generateColor,\n  onDataProcessed,\n}: PieChartProps) => {\n  const theme = useTheme();\n  const blueColorVariants = getBlueColorVariants(theme);\n  const defaultColor = blueColorVariants[0];\n\n  // Sort data by value in descending order and generate colors\n  const dataWithColors = useMemo(() => {\n    // Calculate the sum of all percentage values\n    const totalPercentage = data.reduce((sum, item) => sum + item.value, 0);\n\n    // Sort data by value in descending order first\n    const sortedData = [...data].sort((a, b) => b.value - a.value);\n\n    // Limit to MAX_ITEMS_LIMIT items and combine the rest into \"Other\"\n    let processedData: PieChartData[];\n    let otherValue = 0;\n\n    if (sortedData.length > PIE_CHART_MAX_ITEMS_LIMIT) {\n      // Take the first PIE_CHART_MAX_ITEMS_LIMIT items\n      processedData = sortedData.slice(0, PIE_CHART_MAX_ITEMS_LIMIT);\n\n      // Calculate the sum of remaining items for \"Other\"\n      const remainingItems = sortedData.slice(PIE_CHART_MAX_ITEMS_LIMIT);\n      otherValue = remainingItems.reduce((sum, item) => sum + item.value, 0);\n    } else {\n      processedData = sortedData;\n    }\n\n    // Add \"Other\" item if we have remaining items or if total is less than 100\n    if (otherValue > 0 || totalPercentage < 100) {\n      const finalOtherValue =\n        totalPercentage > 0 ? otherValue + (100 - totalPercentage) : 0;\n      const otherItem: PieChartData = {\n        id: 'other',\n        label: 'Other',\n        value: finalOtherValue,\n      };\n\n      // Add the \"Other\" item to the end of the array\n      processedData.push(otherItem);\n    }\n\n    // Sort data by value in descending order, but keep \"Other\" always at the end\n    const finalSortedData = processedData.sort((a, b) => {\n      // If one item is \"Other\", it should always come last\n      if (a.id === 'other' && b.id !== 'other') return 1;\n      if (b.id === 'other' && a.id !== 'other') return -1;\n      // For all other items, sort by value in descending order\n      return b.value - a.value;\n    });\n\n    return finalSortedData.map((item, index) => ({\n      ...item,\n      color:\n        item.color ||\n        (generateColor ? generateColor(index, item.id) : defaultColor),\n      isMaxItem: index === 0, // First item after sorting is the max item\n    }));\n  }, [data, generateColor, defaultColor]);\n\n  // Calculate dimensions using the same formula\n  const margin = { top: 5, right: 5, bottom: 5, left: 5 };\n  const innerWidth =\n    (typeof width === 'number' ? width : 300) - margin.left - margin.right;\n  const innerHeight =\n    (typeof height === 'number' ? height : 300) - margin.top - margin.bottom;\n  const radius = Math.min(innerWidth, innerHeight) / 2.2;\n\n  // Calculate responsive radii with fixed donut thickness\n  const donutThickness = 24;\n  const calculatedOuterRadius = radius * 0.8; // 80% of available radius\n  const calculatedInnerRadius = calculatedOuterRadius - donutThickness; // Fixed thickness of 24px\n\n  // Use calculated values or fallback to props\n  const outerRadius = outerRadiusProp || calculatedOuterRadius;\n  const innerRadius = innerRadiusProp || calculatedInnerRadius;\n\n  // The max item is now the first item after sorting\n  const maxItem = dataWithColors[0];\n\n  // Initialize with the max item highlighted by default\n  const [hoveredItem, setHoveredItem] = useState<PieChartData | null>(maxItem);\n  const chartRef = useRef<any>(null);\n\n  // The max item is always at index 0 after sorting\n  const maxItemIndex = 0;\n\n  // Use effect to highlight the max item on mount\n  useEffect(() => {\n    if (chartRef.current && maxItemIndex >= 0) {\n      // Small delay to ensure chart is fully rendered\n      const timer = setTimeout(() => {\n        setHoveredItem(maxItem);\n      }, 100);\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [maxItem, maxItemIndex]);\n\n  // Notify parent component of processed data\n  useEffect(() => {\n    if (onDataProcessed) {\n      onDataProcessed(dataWithColors);\n    }\n  }, [dataWithColors, onDataProcessed]);\n\n  const displayItem = hoveredItem || maxItem;\n  const displayLabel = centerLabel || {\n    primary: `${Math.round(displayItem.value)}%`,\n    secondary: 'Repository usage',\n  };\n\n  // Use data with generated colors\n  const chartData = dataWithColors;\n\n  const handleItemClick = (_event: any, itemIdentifier: any) => {\n    if (itemIdentifier?.dataIndex !== undefined) {\n      const clickedItem = dataWithColors[itemIdentifier.dataIndex];\n      setHoveredItem(clickedItem);\n    }\n  };\n\n  // Get the correct icon URL for the language, no icon for 'Other'\n  const LanguageIcon =\n    languageIconMap[displayItem.label as LanguageKey] ||\n    languageIconMap['Unknown' as LanguageKey];\n\n  return (\n    <ChartContainer>\n      <div\n        style={{\n          position: 'relative',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          width: '100%',\n          height: '100%',\n          boxSizing: 'border-box',\n        }}\n      >\n        <MuiPieChart\n          ref={chartRef}\n          series={[\n            {\n              data: chartData,\n              innerRadius,\n              outerRadius,\n              paddingAngle: 2,\n              cornerRadius: 0,\n              highlightScope: { highlighted: 'item' },\n              highlighted: {\n                additionalRadius: 10,\n                innerRadius: innerRadius + 10,\n              },\n              arcLabel: () => '',\n              arcLabelMinAngle: 360,\n            },\n          ]}\n          width={width}\n          height={outerRadius * 2 + 50}\n          onItemClick={handleItemClick}\n          onHighlightChange={highlightedItem => {\n            if (highlightedItem?.dataIndex !== undefined) {\n              const hoveredData = dataWithColors[highlightedItem.dataIndex];\n              setHoveredItem(hoveredData);\n            } else {\n              setHoveredItem(null);\n            }\n          }}\n          tooltip={{ trigger: 'none' }}\n          margin={margin}\n          sx={{\n            '& .MuiPieArc-root': {\n              cursor: 'pointer',\n              transition: 'all 0.2s ease-in-out',\n            },\n            // Apply expansion to the max item by default\n            [`& .MuiPieArc-root:nth-of-type(${maxItemIndex + 1})`]: {\n              transform:\n                hoveredItem && hoveredItem.id !== maxItem.id\n                  ? 'scale(1)'\n                  : 'scale(1.1)',\n            },\n            // Apply expansion to the currently hovered item (if it's not the max item)\n            ...(hoveredItem && hoveredItem.id !== maxItem.id\n              ? {\n                  [`& .MuiPieArc-root:nth-of-type(${\n                    dataWithColors.findIndex(\n                      item => item.id === hoveredItem.id,\n                    ) + 1\n                  })`]: {\n                    transform: 'scale(1.1)',\n                  },\n                }\n              : {}),\n            // Disable CSS hover effects to prevent conflicts\n            '& .MuiPieArc-root:hover': {\n              transform: 'none',\n              filter: 'none',\n              cursor: 'default',\n            },\n            '& .MuiPieArcLabel-root': {\n              display: 'none',\n            },\n            '& .MuiPieChart-root text': {\n              display: 'none',\n            },\n            '& .MuiChartsLegend-root': {\n              display: 'none',\n            },\n          }}\n        />\n\n        <CenterLabelContainer>\n          <PrimaryLabel>{displayLabel.primary}</PrimaryLabel>\n          <SecondaryLabel>{displayLabel.secondary}</SecondaryLabel>\n          <TertiaryLabel>\n            <LanguageIcon />\n            {displayItem.label}\n          </TertiaryLabel>\n        </CenterLabelContainer>\n      </div>\n    </ChartContainer>\n  );\n};\n\nexport default PieChart;\n"],"names":["MuiPieChart"],"mappings":"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"}

package/dist/components/common/ChartBox.esm.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { styled, useTheme } from '@mui/material/styles';
+import { CustomTooltip } from './CustomTooltip.esm.js';
+
+const StyledChartBox = styled(Box)(({ theme, width, height }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: "12px",
+  padding: "16px",
+  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 HeaderContainer = 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 ContentContainer = styled(Box)(
+  ({ alignContent }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: alignContent || "center",
+    width: "100%",
+    flex: 1
+  })
+);
+const ChartBox = ({
+  title,
+  tooltip,
+  children,
+  width,
+  height = "366px",
+  footer,
+  customHeader,
+  alignContent
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(StyledChartBox, { width, height, children: [
+    customHeader || /* @__PURE__ */ jsxs(HeaderContainer, { children: [
+      /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsx(StyledTitle, { children: title }) }),
+      tooltip && /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: "15px",
+            height: "15px",
+            borderRadius: "50%",
+            border: `1px solid ${theme.palette.text.disabled}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "12px",
+            color: theme.palette.text.disabled,
+            fontWeight: "bold",
+            cursor: "pointer",
+            backgroundColor: "transparent"
+          },
+          children: "i"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(ContentContainer, { alignContent, children }),
+    footer && /* @__PURE__ */ jsx(Box, { children: footer })
+  ] });
+};
+
+export { ChartBox, ChartBox as default };
+//# sourceMappingURL=ChartBox.esm.js.map

package/dist/components/common/ChartBox.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBox.esm.js","sources":["../../../src/components/common/ChartBox.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, useTheme } from '@mui/material/styles';\nimport CustomTooltip from './CustomTooltip';\n\nexport interface ChartBoxProps {\n  title: string;\n  tooltip?: string;\n  children: React.ReactNode;\n  width?: string | number;\n  height?: string | number;\n  footer?: React.ReactNode;\n  customHeader?: React.ReactNode;\n  alignContent?: 'center' | 'flex-start' | 'flex-end';\n}\n\nconst StyledChartBox = 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  padding: '16px',\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 HeaderContainer = 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}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: '16px',\n  lineHeight: '24px',\n  color: theme.palette.text.primary,\n}));\n\nconst ContentContainer = styled(Box)<{ alignContent?: string }>(\n  ({ alignContent }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: alignContent || 'center',\n    width: '100%',\n    flex: 1,\n  }),\n);\n\nexport const ChartBox = ({\n  title,\n  tooltip,\n  children,\n  width,\n  height = '366px',\n  footer,\n  customHeader,\n  alignContent,\n}: ChartBoxProps) => {\n  const theme = useTheme();\n  return (\n    <StyledChartBox width={width} height={height}>\n      {customHeader || (\n        <HeaderContainer>\n          <TitleContainer>\n            <StyledTitle>{title}</StyledTitle>\n          </TitleContainer>\n          {tooltip && (\n            <CustomTooltip title={tooltip} placement=\"top\">\n              <div\n                style={{\n                  width: '15px',\n                  height: '15px',\n                  borderRadius: '50%',\n                  border: `1px solid ${theme.palette.text.disabled}`,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  fontSize: '12px',\n                  color: theme.palette.text.disabled,\n                  fontWeight: 'bold',\n                  cursor: 'pointer',\n                  backgroundColor: 'transparent',\n                }}\n              >\n                i\n              </div>\n            </CustomTooltip>\n          )}\n        </HeaderContainer>\n      )}\n\n      <ContentContainer alignContent={alignContent}>\n        {children}\n      </ContentContainer>\n\n      {footer && <Box>{footer}</Box>}\n    </StyledChartBox>\n  );\n};\n\nexport default ChartBox;\n"],"names":[],"mappings":"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"}

package/dist/components/common/CustomTooltip.esm.js

@@ -0,0 +1,255 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '@mui/material/styles';
+
+const CustomTooltip = ({
+  title,
+  children,
+  placement = "top",
+  enterDelay = 0,
+  leaveDelay = 0,
+  disableInteractive = true,
+  centered = false
+}) => {
+  const theme = useTheme();
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const [arrowOffset, setArrowOffset] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const enterTimeoutRef = useRef(null);
+  const leaveTimeoutRef = useRef(null);
+  const calculateTooltipPosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    let idealTop = 0;
+    let idealLeft = 0;
+    switch (placement) {
+      case "top":
+        idealTop = triggerRect.top + scrollTop - tooltipRect.height - 8;
+        idealLeft = triggerRect.left + scrollLeft + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        idealTop = triggerRect.bottom + scrollTop + 8;
+        idealLeft = triggerRect.left + scrollLeft + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        idealTop = triggerRect.top + scrollTop + triggerRect.height / 2 - tooltipRect.height / 2;
+        idealLeft = triggerRect.left + scrollLeft - tooltipRect.width - 8;
+        break;
+      case "right":
+        idealTop = triggerRect.top + scrollTop + triggerRect.height / 2 - tooltipRect.height / 2;
+        idealLeft = triggerRect.right + scrollLeft + 8;
+        break;
+      default:
+        idealTop = triggerRect.top + scrollTop - tooltipRect.height - 8;
+        idealLeft = triggerRect.left + scrollLeft + triggerRect.width / 2 - tooltipRect.width / 2;
+    }
+    let finalLeft = idealLeft;
+    let finalTop = idealTop;
+    const margin = 8;
+    if (finalLeft < scrollLeft + margin) {
+      finalLeft = scrollLeft + margin;
+    }
+    if (finalLeft + tooltipRect.width > scrollLeft + window.innerWidth - margin) {
+      finalLeft = scrollLeft + window.innerWidth - tooltipRect.width - margin;
+    }
+    if (finalTop < scrollTop + margin) {
+      finalTop = scrollTop + margin;
+    }
+    if (finalTop + tooltipRect.height > scrollTop + window.innerHeight - margin) {
+      finalTop = scrollTop + window.innerHeight - tooltipRect.height - margin;
+    }
+    setArrowOffset({ top: idealTop - finalTop, left: idealLeft - finalLeft });
+    setTooltipPosition({ top: finalTop, left: finalLeft });
+    setIsTooltipVisible(true);
+  }, [placement]);
+  const handleMouseEnter = () => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    if (enterDelay > 0) {
+      enterTimeoutRef.current = setTimeout(() => {
+        setShowTooltip(true);
+      }, enterDelay);
+    } else {
+      setShowTooltip(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (enterTimeoutRef.current) {
+      clearTimeout(enterTimeoutRef.current);
+      enterTimeoutRef.current = null;
+    }
+    if (leaveDelay > 0) {
+      leaveTimeoutRef.current = setTimeout(() => {
+        setShowTooltip(false);
+        setIsTooltipVisible(false);
+        setArrowOffset({ top: 0, left: 0 });
+      }, leaveDelay);
+    } else {
+      setShowTooltip(false);
+      setIsTooltipVisible(false);
+      setArrowOffset({ top: 0, left: 0 });
+    }
+  };
+  const handleTooltipMouseEnter = () => {
+    if (!disableInteractive && leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+  };
+  const handleTooltipMouseLeave = () => {
+    if (!disableInteractive) {
+      handleMouseLeave();
+    }
+  };
+  useEffect(() => {
+    if (showTooltip) {
+      calculateTooltipPosition();
+    }
+  }, [showTooltip, calculateTooltipPosition]);
+  useEffect(() => {
+    return () => {
+      if (enterTimeoutRef.current) {
+        clearTimeout(enterTimeoutRef.current);
+      }
+      if (leaveTimeoutRef.current) {
+        clearTimeout(leaveTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getArrowStyle = () => {
+    const arrowColor = theme.palette.mode === "dark" ? theme.palette.grey[700] : theme.palette.common.white;
+    const baseArrow = {
+      position: "absolute",
+      width: 0,
+      height: 0
+    };
+    switch (placement) {
+      case "top":
+        return {
+          ...baseArrow,
+          top: "100%",
+          left: `calc(50% + ${arrowOffset.left}px)`,
+          transform: "translateX(-50%)",
+          borderLeft: "6px solid transparent",
+          borderRight: "6px solid transparent",
+          borderTop: `6px solid ${arrowColor}`,
+          filter: theme.palette.mode === "dark" ? "drop-shadow(0 2px 4px rgba(0,0,0,0.3))" : "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
+        };
+      case "bottom":
+        return {
+          ...baseArrow,
+          bottom: "100%",
+          left: `calc(50% + ${arrowOffset.left}px)`,
+          transform: "translateX(-50%)",
+          borderLeft: "6px solid transparent",
+          borderRight: "6px solid transparent",
+          borderBottom: `6px solid ${arrowColor}`,
+          filter: theme.palette.mode === "dark" ? "drop-shadow(0 -2px 4px rgba(0,0,0,0.3))" : "drop-shadow(0 -2px 4px rgba(0,0,0,0.1))"
+        };
+      case "left":
+        return {
+          ...baseArrow,
+          left: "100%",
+          top: `calc(50% - ${arrowOffset.top}px)`,
+          transform: "translateY(-50%)",
+          borderTop: "6px solid transparent",
+          borderBottom: "6px solid transparent",
+          borderLeft: `6px solid ${arrowColor}`,
+          filter: theme.palette.mode === "dark" ? "drop-shadow(2px 0 4px rgba(0,0,0,0.3))" : "drop-shadow(2px 0 4px rgba(0,0,0,0.1))"
+        };
+      case "right":
+        return {
+          ...baseArrow,
+          right: "100%",
+          top: `calc(50% - ${arrowOffset.top}px)`,
+          transform: "translateY(-50%)",
+          borderTop: "6px solid transparent",
+          borderBottom: "6px solid transparent",
+          borderRight: `6px solid ${arrowColor}`,
+          filter: theme.palette.mode === "dark" ? "drop-shadow(-2px 0 4px rgba(0,0,0,0.3))" : "drop-shadow(-2px 0 4px rgba(0,0,0,0.1))"
+        };
+      default:
+        return {
+          ...baseArrow,
+          top: "100%",
+          left: `calc(50% - ${arrowOffset.left}px)`,
+          transform: "translateX(-50%)",
+          borderLeft: "6px solid transparent",
+          borderRight: "6px solid transparent",
+          borderTop: `6px solid ${arrowColor}`,
+          filter: theme.palette.mode === "dark" ? "drop-shadow(0 2px 4px rgba(0,0,0,0.3))" : "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
+        };
+    }
+  };
+  const renderTooltip = () => {
+    if (!showTooltip) return null;
+    return createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          style: {
+            position: "absolute",
+            top: `${tooltipPosition.top}px`,
+            left: `${tooltipPosition.left}px`,
+            visibility: isTooltipVisible ? "visible" : "hidden",
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[700] : theme.palette.common.white,
+            color: theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.text.primary,
+            padding: "12px 16px",
+            borderRadius: "8px",
+            fontSize: "14px",
+            fontWeight: "400",
+            lineHeight: "1.4",
+            maxWidth: "300px",
+            minWidth: "max-content",
+            zIndex: 9999,
+            boxShadow: theme.palette.mode === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)",
+            border: theme.palette.mode === "dark" ? `1px solid ${theme.palette.grey[800]}` : "1px solid rgba(0, 0, 0, 0.08)",
+            whiteSpace: "normal",
+            wordWrap: "break-word",
+            pointerEvents: disableInteractive ? "none" : "auto"
+          },
+          onMouseEnter: handleTooltipMouseEnter,
+          onMouseLeave: handleTooltipMouseLeave,
+          children: [
+            title,
+            /* @__PURE__ */ jsx("div", { style: getArrowStyle() })
+          ]
+        }
+      ),
+      document.body
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        style: {
+          position: "relative",
+          display: centered ? "flex" : "inline-block",
+          alignItems: centered ? "center" : void 0,
+          justifyContent: centered ? "center" : void 0,
+          height: centered ? "100%" : void 0,
+          width: centered ? "100%" : void 0
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ),
+    renderTooltip()
+  ] });
+};
+
+export { CustomTooltip, CustomTooltip as default };
+//# sourceMappingURL=CustomTooltip.esm.js.map