Looking at something closely should not cost you the chart, the period and the scroll position you were reading it in. Three rules hold that across the app’s surfaces.
Hover previews, a click pins
usePinnable (apps/renderer/src/hooks/usePinnable.ts) is the one place the rule is made, used by every chart that has marks to pick: the day chart (lines, steps, dots and bars over days), the bars chart, the timeline, the scatter and the calendar heatmap. Hovering a mark shows its readout. A click or tap pins it, and while something is pinned, hovering elsewhere does not change what is shown. A pinned readout is released by Escape, by clicking the pinned mark again, or by a press anywhere but the pinned popover, on the chart or off it, which is how a tap on a phone lets go. A press on another mark moves the pin there. On a phone a tap is the hover, so the pin is what gives a touch screen a way to look and then act.
The pinned popover is what carries the actions, because a hover readout disappears the moment you reach for it: a day’s Inspect, a zone’s Edit. A hover readout takes no clicks and sits over the marks it describes.
What a chart’s targets are
On a day chart (components/charts/DayChart.tsx) each point’s target is its column, the stretch of the time axis nearer to it than to its neighbours, bounded to a band around the mark: 32 px tall for a mouse and 44 px on a coarse pointer, the size a finger needs. Empty space far above or below the line selects nothing. A bar is its own target, from the baseline to its top with 2 px to spare at each end, and at least 16 px tall for a mouse and 22 px on a coarse pointer. A point’s band is moved inside the plot rather than cut at its top and bottom, so a mark at either edge, an ordered scale’s top or bottom option, keeps the whole target.
A zone band answers for itself. Hovering one reads out its name and range (“Healthy · 78 kg – 81 kg”); a click or tap pins it with an Edit that opens the trackable’s form at its Zones (/trackables/update?section=zones). Points and zones share one pin, keyed apart, so pinning either releases the other and there is never a second popover. Point targets are drawn above the zones, so near a point the point answers and the band answers everywhere else. Changing a zone happens in the form, never by dragging on the chart: the pin and the Edit are two deliberate steps before anything can change.
An entry opens where you are
EntryDialog (components/entries/EntryDialog.tsx) opens an entry over the page you are on, in the same editor the entry panel uses everywhere else (EntryEditor); the route /entries/edit is the same editor at an address you can link to. What “this” means depends on the surface:
| surface | what it is | what it opens |
|---|---|---|
| a chart’s point, a calendar cell with a value | a day | the day’s one entry in the editor; for several, the list of them (time and value) with a way back; for none, nothing |
| a table row | an entry | that entry in the editor |
| a timeline bar, a block in the Calendar’s Week or Day | an entry | its popover, whose Edit opens it |
A day with several entries offers the list rather than choosing one, since any rule for picking (first, last, largest) would be the app guessing. A derived trackable’s point opens nothing: its value is computed and has no entry behind it.
The month calendar’s day sheet is already a list of a day’s entries, so it edits one in its own detail view, with a way back to the list, rather than opening a dialog over itself.
Names that look like links are links
A trackable’s name where it heads something you are reading links to its page: a Home card’s header, a row of Recents, a trackable’s heading in a day’s sheet. The day sheet’s link closes the sheet as it goes, since the sheet belongs to the page under it, which does not unmount when the trackable changes. Names inside something already clickable, on a draggable chip, or in a truncated axis label are not links.
Related
Chart · Calendar Drill-down · Data Table · Visualizations · Home