trends

Summary

Every day you have logged, as a scrollable chart, and how much of the last week was actually known.

Raw wireframe

• .context/designs/mobile/trends/trends.html

Why it is drawn this way

An average is the only honest headline. Daily intake is noisy, and fixating on it is how tracking apps make people miserable — so the number is the headline and the bars are the texture behind it.

The chart scrolls, and that is what removed the Week/Month toggle. The wireframe used to carry a segmented control that was never built. A toggle gives you two windows somebody else chose; dragging gives you every day, and "what was I doing in August" is not a different view of the week — it is the week being the wrong window. It opens at today and you drag backwards; the first bar is the first day ever logged. chartDays caps the range at a year, because the scroller renders one View per day and is not virtualised.

Bars are a fixed width, not flex-1. A bar sized by how many days exist means the chart silently redraws itself every morning as one more day arrives, and by ninety days each bar is a hairline under an unreadable label.

The chart and the average above it share ONE range. The card cannot say seven days over a chart showing ninety, so Daily average is now the mean over every logged day in the chart, with across N logged days under it and the range named once in the screen's eyebrow. The average divides by the days that have food on them rather than by the range — dividing by the range would drop the number every time somebody misses a day and read as "you are eating less" when it means "you logged less".

The cards below are still the last seven days, and each says so in its own title. Two ranges on one screen is fine when both name themselves; it is only a lie when one of them is silent about it.

The target is part of the chart's ceiling. Scaling to the tallest bar alone put the dashed target line above the plot on any range where every day came in under it — which is most ranges, for anyone the app is working for.

The dashes are Views, not a dashed border or an SVG line. RN's borderStyle: "dashed" needs a border on all four sides to render on Android, and an SVG spanning an unmeasured width costs a layout pass to do what a clipped row of rectangles does for nothing.

The bars bleed past the card's padding on both sides. A chart that stops neatly inside its gutter looks finished, and nobody drags a finished thing.

The confidence strip is unique to this product. It shows how much of the week's total was established rather than guessed — see confidence.

What follows was the reasoning while it did live here. Trends is already the history tab; the gallery is the same history with pictures instead of numbers, and a five-slot tab bar with a capture button in the middle has no room to spare.

Related

• confidence
• calendar
• gallery

Sources

• .context/designs/mobile/trends/trends.html
• apps/mobile/src/lib/trends.ts
• apps/mobile/src/components/trends/kcal-chart.tsx