+
+
+ {Icon ? (
+
+ ) : null}
+ {name}
+
+
+ {t("cycle.insights.symptomMostlyIn", {
+ phase: phaseName,
+ count: row.counts[row.topPhase],
+ total: row.total,
+ })}
+
+
+ {/* Proportional phase-distribution bar — phase-hued, with the
+ dominant phase named above so it is never colour-only. */}
+
+ {PHASE_ORDER.map((phase) => {
+ const share =
+ row.total > 0 ? row.counts[phase] / row.total : 0;
+ if (share <= 0) return null;
+ return (
+
+ );
+ })}
+
+
+ );
+ })}
+