feat(site): display tooltip in bars for app usage chart (coder#13854)

BrunoQuaresma · web-flow · commit 879c61ce23c8 · 2024-07-09T14:02:45.000-03:00
diff --git 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
@@ -455,6 +455,9 @@ export const components = {
         background: theme.palette.divider,
         padding: "8px 16px",
       }),
+      arrow: ({ theme }) => ({
+        color: theme.palette.divider,
+      }),
     },
   },
   MuiAlert: {
