Commit879c61c

authored

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

1 parent6bf7e5a commit879c61cCopy full SHA for 879c61c

File tree

+22

-13

lines changed

site/src
- pages/TemplatePage/TemplateInsightsPage
  - TemplateInsightsPage.tsx
- theme
  - mui.ts

+22

-13

lines changed

Lines changed: 19 additions & 13 deletions

Original file line number	Diff line number	Diff line change
`@@ -480,19 +480,25 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({`
`480`	`480`	`{usage.display_name}`
`481`	`481`	`</div>`
`482`	`482`	`</div>`
`483`		`-<LinearProgress`
`484`		`-value={percentage}`
`485`		`-variant="determinate"`
`486`		`-css={{`
`487`		`-width:"100%",`
`488`		`-height:8,`
`489`		`-backgroundColor:theme.palette.divider,`
`490`		`-"& .MuiLinearProgress-bar":{`
`491`		`-backgroundColor:usageColors[i],`
`492`		`-borderRadius:999,`
`493`		`-},`
`494`		`-}}`
`495`		`-/>`
	`483`	`+<Tooltip`
	`484`	+title={`${Math.floor(percentage)}%`}
	`485`	`+placement="top"`
	`486`	`+arrow`
	`487`	`+>`
	`488`	`+<LinearProgress`
	`489`	`+value={percentage}`
	`490`	`+variant="determinate"`
	`491`	`+css={{`
	`492`	`+width:"100%",`
	`493`	`+height:8,`
	`494`	`+backgroundColor:theme.palette.divider,`
	`495`	`+"& .MuiLinearProgress-bar":{`
	`496`	`+backgroundColor:usageColors[i],`
	`497`	`+borderRadius:999,`
	`498`	`+},`
	`499`	`+}}`
	`500`	`+/>`
	`501`	`+</Tooltip>`
`496`	`502`	`<Stack`
`497`	`503`	`spacing={0}`
`498`	`504`	`css={{`

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -455,6 +455,9 @@ export const components = {`
`455`	`455`	`background:theme.palette.divider,`
`456`	`456`	`padding:"8px 16px",`
`457`	`457`	`}),`
	`458`	`+arrow:({ theme})=>({`
	`459`	`+color:theme.palette.divider,`
	`460`	`+}),`
`458`	`461`	`},`
`459`	`462`	`},`
`460`	`463`	`MuiAlert:{`

Comments

(0)