feat(insights): add issues to issue-based charts on session health #88499
Conversation
github-actions
bot
added
the
Scope: Frontend
michellewzhang
force-pushed
the
mz/add-issues-chart
branch
from
6aa8410 to
c51c21b
Compare
| @@ -15,6 +16,7 @@ export default function UserHealthCountChart() { | |||
|
|
|||
| return ( | |||
| <InsightsLineChartWidget | |||
| height={SESSION_HEALTH_CHART_HEIGHT} | |||
There was a problem hiding this comment.
looks like every chart has the same height 👍
this'll make it easy to put any chart in any position per #88502
also, we'll get a merge conflict from editing similar lines, but it'll be easy to resolve.
the resolution will be about the same in all cases:
height={SESSION_HEALTH_CHART_HEIGHT}
title={CHART_TITLES.zzzzz}
interactiveTitle={() => (
<ChartSelectionTitle title={CHART_TITLES.zzzzz} />
)}
| @@ -107,7 +115,7 @@ function ViewSpecificCharts({ | |||
| <UserHealthCountChart /> | |||
| </ModuleLayout.Third> | |||
| <ModuleLayout.Third> | |||
| <NewAndResolvedIssueChart type="issue" /> | |||
| <NewAndResolvedIssueChart type="issue" project={projects[0]!} /> | |||
There was a problem hiding this comment.
this'll cause conflicts with #88502
we'll probably want to pass something like chartProps into ChartPlacementSlot and then along into <Chart {...chartProps} />. Idk what the type would be tho right now.
There was a problem hiding this comment.
ok, np! feel free to do whatever you need to do -- i just need the project passed into the chart to load up the top 3 issues for that project. i can also call the useProjectHasSessions() hook inside the chart component if needed, to eliminate the prop completely
…88499) - closes #88153 - add 3 issue examples to issue-based charts on session health (issues chart on frontend, issues by release chart on mobile). - each chart shows the 3 most recently seen issues that are unresolved. - adjusted all chart heights to be the same height as the issues charts (`400px`). - the chart will dynamically resize within its `400px` box depending on how many issues are available. on mobile: <img width="805" alt="SCR-20250401-moyn" src="https://github.com/user-attachments/assets/0eb951d6-2bb5-4c85-83fb-2b26cb28b21d" /> on frontend: <img width="1232" alt="SCR-20250401-mjrc" src="https://github.com/user-attachments/assets/3c4ae354-2cdd-4dc2-86df-fbcb45776464" /> loading state: https://github.com/user-attachments/assets/d812d790-f18d-4117-a3f7-5f8b2bd261bd
400px).400pxbox depending on how many issues are available.on mobile:
on frontend:
loading state:
Screen.Recording.2025-04-01.at.2.14.37.PM.mov