mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
fix(mood): full-saturate the time-of-day chart and mood calendar
The v1.19.0 saturation fix missed two surfaces: the mood-by-time-of-day bars and the mood calendar still rendered populated values at 0.55 opacity, reading as a dimmed glitch. Drop the dimming on populated bars and cells (and the legend swatches); keep the quiet tint only on the no-data empty state.
This commit is contained in:
1 parent
c67bd942a2
commit
bbff6ab143
2 files changed
+13
-7
No files matched your search
@@ -271,7 +271,10 @@ export function MoodHeatmap({
|
||||
height={cellSize}
|
||||
rx={2}
|
||||
fill={cell.color}
|
||||
fillOpacity={cell.cell ? 0.55 : 1}
|
||||
// v1.19.1 — populated days render at full saturation so the
|
||||
// mood band reads clearly; only the no-entry cells stay the
|
||||
// quiet `--secondary` empty-state tint.
|
||||
fillOpacity={1}
|
||||
className="cursor-pointer"
|
||||
onPointerEnter={(e) => {
|
||||
if (e.pointerType === "touch") return;
|
||||
@@ -331,7 +334,7 @@ export function MoodHeatmap({
|
||||
<span key={label} className="flex items-center gap-1">
|
||||
<div
|
||||
className="h-3 w-3 rounded-sm"
|
||||
style={{ backgroundColor: color, opacity: 0.55 }}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
{label}
|
||||
</span>
|
||||
|
||||
@@ -84,10 +84,9 @@ export function MoodTimeOfDayChart({
|
||||
data={data}
|
||||
margin={{ top: 8, right: 12, bottom: 8, left: 0 }}
|
||||
>
|
||||
{/* Muted chart language — same treatment as the weekday/distribution
|
||||
siblings: `--muted-foreground` axis ticks, a quiet comment-grey
|
||||
target guide, and 0.55 bar fill so the level hues inform without
|
||||
shouting. */}
|
||||
{/* Quiet chart language — `--muted-foreground` axis ticks and a
|
||||
comment-grey target guide. The bars themselves render at full
|
||||
saturation (v1.19.1) so the mood level hues read clearly. */}
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
|
||||
@@ -130,7 +129,10 @@ export function MoodTimeOfDayChart({
|
||||
];
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="value" radius={[3, 3, 0, 0]} fillOpacity={0.55}>
|
||||
{/* v1.19.1 — populated buckets render at full saturation so the
|
||||
level hues read clearly; only the no-data buckets keep the quiet
|
||||
`--secondary` empty-state tint. */}
|
||||
<Bar dataKey="value" radius={[3, 3, 0, 0]}>
|
||||
{data.map((row) => (
|
||||
<Cell
|
||||
key={row.bucket}
|
||||
@@ -139,6 +141,7 @@ export function MoodTimeOfDayChart({
|
||||
? "var(--secondary)"
|
||||
: colorForScore(row.avgScore)
|
||||
}
|
||||
fillOpacity={row.avgScore == null ? 0.55 : 1}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
|
||||
Reference in new issue
Block a user