Skip to content

feat(dashboard): [#305] added axis labels, hover tooltips, and load-in animation to metric graphs - #308

Merged
ApusBerliozi merged 1 commit into
pyfenn:mainfrom
AaronProbha18:feat/301-chart-tooltips-axis-animation
Aug 7, 2026
Merged

feat(dashboard): [#305] added axis labels, hover tooltips, and load-in animation to metric graphs#308
ApusBerliozi merged 1 commit into
pyfenn:mainfrom
AaronProbha18:feat/301-chart-tooltips-axis-animation

Conversation

@AaronProbha18

Copy link
Copy Markdown
Contributor

Fixes: #305

Changes

  • Extended renderLineChart() in fenn/dashboard/static/app.js to draw min/max axis tick labels (step on the x-axis, value on the y-axis) as SVG <text> elements, and added a left (value) axis line alongside the existing baseline (step) axis. Runs for every .chart-card uniformly, so both inline session-page cards and the new metric detail page get labeled axes with no per-caller changes.
  • Added attachChartHover() to app.js, binding pointermove/pointerleave once per <svg> (guarded by a dataset.hoverBound flag so repeated re-renders from auto-refresh or tab switching don't stack duplicate listeners). On move, it finds the nearest point by step and shows a tooltip with the exact step/value at the pointer.
  • Added an options.animate parameter to renderLineChart(): when set, the polyline draws in via a stroke-dasharray/stroke-dashoffset CSS transition instead of appearing immediately. renderSessionGraphs() now reads card.dataset.animate and passes it through, so only cards explicitly opted in animate.
  • Set data-animate="true" on the chart card in session_metric_detail.html only — inline session-page cards are left unset, so they render immediately and aren't replayed every 5s by the running-session auto-refresh poll.
  • Added .chart-axis-label and .chart-tooltip styles, and a .chart-card-detail .chart-svg height override for the larger detail-page chart, to fenn/dashboard/static/style.css.

@ApusBerliozi
ApusBerliozi merged commit 69d8298 into pyfenn:main Aug 7, 2026
14 of 18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Dashboard]: Add axis values, hover tooltips, and draw-in animation to SVG graphs

2 participants