From 879c61ce23c84881fc66c24064336a27bde703ac Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 9 Jul 2024 14:02:45 -0300
Subject: [PATCH] feat(site): display tooltip in bars for app usage chart
 (#13854)

---
 .../TemplateInsightsPage.tsx                  | 32 +++++++++++--------
 site/src/theme/mui.ts                         |  3 ++
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 2e9ff245f0..fc050c4543 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -480,19 +480,25 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
                         {usage.display_name}
                       </div>
                     </div>
-                    <LinearProgress
-                      value={percentage}
-                      variant="determinate"
-                      css={{
-                        width: "100%",
-                        height: 8,
-                        backgroundColor: theme.palette.divider,
-                        "& .MuiLinearProgress-bar": {
-                          backgroundColor: usageColors[i],
-                          borderRadius: 999,
-                        },
-                      }}
-                    />
+                    <Tooltip
+                      title={`${Math.floor(percentage)}%`}
+                      placement="top"
+                      arrow
+                    >
+                      <LinearProgress
+                        value={percentage}
+                        variant="determinate"
+                        css={{
+                          width: "100%",
+                          height: 8,
+                          backgroundColor: theme.palette.divider,
+                          "& .MuiLinearProgress-bar": {
+                            backgroundColor: usageColors[i],
+                            borderRadius: 999,
+                          },
+                        }}
+                      />
+                    </Tooltip>
                     <Stack
                       spacing={0}
                       css={{
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
index 3b4a3e8640..637d69e13f 100644
--- a/site/src/theme/mui.ts
+++ b/site/src/theme/mui.ts
@@ -455,6 +455,9 @@ export const components = {
         background: theme.palette.divider,
         padding: "8px 16px",
       }),
+      arrow: ({ theme }) => ({
+        color: theme.palette.divider,
+      }),
     },
   },
   MuiAlert: {