mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
Colour insight series from the chart palette, not the status tokens
Metric pages coloured their series with success, info, warning, destructive or a raw palette yellow, picked per page, so a steps line read as 'good' and a resting-pulse line as an alarm. Series now take the chart tokens by hue family (chart-2 green, chart-3 pink, chart-4 cyan, chart-5 orange), and the systolic/diastolic pair and the pulse pair stay paired. Status colours remain where they carry meaning: target bands, time in range, mood score scales. The mood tag scale drops its raw palette reds and greens for the status tokens, which are tuned for the light theme.
This commit is contained in:
Marc-André Bombeck committed
1 parent
a1b46eb2f4
commit
e9a5614733
37 files changed
+50
-50
No files matched your search
@@ -22,7 +22,7 @@ export default function InsightsActiveEnergyPage() {
|
||||
chartKey="activeEnergy"
|
||||
i18nPrefix="insights.activeEnergy"
|
||||
explainerMetric="activeEnergy"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
unit="kcal"
|
||||
yAxisUnit="kcal"
|
||||
emptyStateIcon={<Flame className="size-6" />}
|
||||
|
||||
@@ -101,10 +101,10 @@ export default function InsightsBlutdruckPage() {
|
||||
{
|
||||
min: bpTargets.diastolic.min,
|
||||
max: bpTargets.diastolic.max,
|
||||
color: "var(--info)",
|
||||
color: "var(--chart-4)",
|
||||
opacity: 0.21,
|
||||
label: t("charts.diastolic"),
|
||||
textColor: "var(--info)",
|
||||
textColor: "var(--chart-4)",
|
||||
lineOpacity: 0.24,
|
||||
},
|
||||
]
|
||||
@@ -172,7 +172,7 @@ export default function InsightsBlutdruckPage() {
|
||||
types={["BLOOD_PRESSURE_SYS", "BLOOD_PRESSURE_DIA"]}
|
||||
title={t("charts.bloodPressure")}
|
||||
titleIcon={HeartPulse}
|
||||
colors={["var(--chart-3)", "var(--info)"]}
|
||||
colors={["var(--chart-3)", "var(--chart-4)"]}
|
||||
unit="mmHg"
|
||||
yAxisUnit="mmHg"
|
||||
targetZones={bpTargetZones}
|
||||
|
||||
@@ -116,7 +116,7 @@ export default function InsightsBmiPage() {
|
||||
chartKey="bmi"
|
||||
types={["WEIGHT"]}
|
||||
title={t("targets.bmi")}
|
||||
colors={["var(--dracula-yellow)"]}
|
||||
colors={["var(--chart-5)"]}
|
||||
unit="kg/m²"
|
||||
valueMode="bmi"
|
||||
valueBands={BMI_BANDS}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsBodyFatPage() {
|
||||
chartKey="bodyFat"
|
||||
i18nPrefix="insights.bodyFat"
|
||||
explainerMetric="bodyFat"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
unit="%"
|
||||
statIcon={Percent}
|
||||
emptyStateIcon={<Percent className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsKoerperwasserPage() {
|
||||
chartKey="totalBodyWater"
|
||||
i18nPrefix="insights.totalBodyWater"
|
||||
explainerMetric="bodyWater"
|
||||
color="var(--info)"
|
||||
color="var(--chart-4)"
|
||||
emptyStateIcon={<Droplet className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
captureType="TOTAL_BODY_WATER"
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsKnochenmassePage() {
|
||||
chartKey="boneMass"
|
||||
i18nPrefix="insights.boneMass"
|
||||
explainerMetric="boneMass"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
emptyStateIcon={<Bone className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
captureType="BONE_MASS"
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function InsightsBreathingDisturbancesPage() {
|
||||
chartKey="breathingDisturbances"
|
||||
i18nPrefix="insights.breathingDisturbances"
|
||||
explainerMetric="breathingDisturbances"
|
||||
color="var(--info)"
|
||||
color="var(--chart-4)"
|
||||
unitKey="insights.units.breathingEvents"
|
||||
emptyStateIcon={<Wind className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsTageslichtPage() {
|
||||
chartKey="timeInDaylight"
|
||||
i18nPrefix="insights.timeInDaylight"
|
||||
explainerMetric="daylight"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="min"
|
||||
yAxisUnit="min"
|
||||
emptyStateIcon={<Sun className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsDoppelstandphasePage() {
|
||||
chartKey="walkingDoubleSupport"
|
||||
i18nPrefix="insights.walkingDoubleSupport"
|
||||
explainerMetric="doubleSupportTime"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="%"
|
||||
yAxisUnit="%"
|
||||
emptyStateIcon={<Footprints className="size-6" />}
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function InsightsFallsPage() {
|
||||
chartKey="fallCount"
|
||||
i18nPrefix="insights.falls"
|
||||
explainerMetric="falls"
|
||||
color="var(--destructive)"
|
||||
color="var(--chart-3)"
|
||||
unitKey="insights.units.falls"
|
||||
emptyStateIcon={<PersonStanding className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsFettmassePage() {
|
||||
chartKey="fatMass"
|
||||
i18nPrefix="insights.fatMass"
|
||||
explainerMetric="fatMass"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
emptyStateIcon={<Droplets className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
coachPrefill="I haven't logged any fat mass yet — what does this metric tell me about my health, and how do I improve it?"
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsStockwerkePage() {
|
||||
chartKey="flightsClimbed"
|
||||
i18nPrefix="insights.flightsClimbed"
|
||||
explainerMetric="flightsClimbed"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unitKey="insights.units.flights"
|
||||
emptyStateIcon={<TrendingUp className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function InsightsGripStrengthPage() {
|
||||
insightMetric="GRIP_STRENGTH"
|
||||
chartKey="gripStrength"
|
||||
i18nPrefix="insights.gripStrength"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
statIcon={Dumbbell}
|
||||
emptyStateIcon={<Dumbbell className="size-6" />}
|
||||
emptyStateCtaType="GRIP_STRENGTH"
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function InsightsOxygenSaturationPage() {
|
||||
chartKey="oxygenSaturation"
|
||||
i18nPrefix="insights.oxygenSaturation"
|
||||
explainerMetric="oxygenSaturation"
|
||||
color="var(--info)"
|
||||
color="var(--chart-4)"
|
||||
unit="%"
|
||||
yAxisUnit="%"
|
||||
valueBands={[
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsPainPage() {
|
||||
insightMetric="PAIN_NRS"
|
||||
chartKey="painNrs"
|
||||
i18nPrefix="insights.pain"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
unit=""
|
||||
yAxisUnit="/10"
|
||||
statIcon={Activity}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsPulswellengeschwindigkeitPage() {
|
||||
chartKey="pulseWaveVelocity"
|
||||
i18nPrefix="insights.pulseWaveVelocity"
|
||||
explainerMetric="pulseWaveVelocity"
|
||||
color="var(--destructive)"
|
||||
color="var(--chart-3)"
|
||||
unit="m/s"
|
||||
yAxisUnit="m/s"
|
||||
emptyStateIcon={<Activity className="size-6" />}
|
||||
|
||||
@@ -157,8 +157,8 @@ export default function InsightsPulsPage() {
|
||||
titleIcon={Heart}
|
||||
colors={
|
||||
hasRestingHr
|
||||
? ["var(--success)", "var(--destructive)"]
|
||||
: ["var(--success)"]
|
||||
? ["var(--chart-2)", "var(--chart-3)"]
|
||||
: ["var(--chart-2)"]
|
||||
}
|
||||
unit="bpm"
|
||||
compareBaseline={compareBaseline}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsAtemfrequenzPage() {
|
||||
chartKey="respiratoryRate"
|
||||
i18nPrefix="insights.respiratoryRate"
|
||||
explainerMetric="respiratoryRate"
|
||||
color="var(--info)"
|
||||
color="var(--chart-4)"
|
||||
unitKey="insights.units.respiratoryRate"
|
||||
emptyStateIcon={<Wind className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function InsightsRestingHrPage() {
|
||||
chartKey="restingHr"
|
||||
i18nPrefix="insights.restingHr"
|
||||
explainerMetric="restingHr"
|
||||
color="var(--destructive)"
|
||||
color="var(--chart-3)"
|
||||
unit="bpm"
|
||||
yAxisUnit="bpm"
|
||||
emptyStateIcon={<Heart className="size-6" />}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function InsightsSixMinuteWalkPage() {
|
||||
chartKey="sixMinuteWalkDistance"
|
||||
i18nPrefix="insights.sixMinuteWalk"
|
||||
explainerMetric="sixMinuteWalk"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="m"
|
||||
yAxisUnit="m"
|
||||
emptyStateIcon={<Footprints className="size-6" />}
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function InsightsHauttemperaturPage() {
|
||||
chartKey="skinTemperature"
|
||||
i18nPrefix="insights.skinTemperature"
|
||||
explainerMetric="skinTemperature"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
emptyStateIcon={<Thermometer className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
coachPrefill="I haven't logged any skin temperature yet — what does this metric tell me about my health, and how do I improve it?"
|
||||
@@ -38,7 +38,7 @@ export default function InsightsHauttemperaturPage() {
|
||||
type="BODY_TEMPERATURE_DEVIATION"
|
||||
title={t("measurements.typeBodyTemperatureDeviation")}
|
||||
icon={ThermometerSnowflake}
|
||||
color="var(--info)"
|
||||
color="var(--chart-4)"
|
||||
fractionDigits={2}
|
||||
sectionTitle={t("insights.bodyTempDeviation.title")}
|
||||
sectionIcon={ThermometerSnowflake}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function InsightsStairAscentSpeedPage() {
|
||||
chartKey="stairAscentSpeed"
|
||||
i18nPrefix="insights.stairAscentSpeed"
|
||||
explainerMetric="stairAscentSpeed"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="m/s"
|
||||
yAxisUnit="m/s"
|
||||
emptyStateIcon={<Gauge className="size-6" />}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function InsightsStairDescentSpeedPage() {
|
||||
chartKey="stairDescentSpeed"
|
||||
i18nPrefix="insights.stairDescentSpeed"
|
||||
explainerMetric="stairDescentSpeed"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="m/s"
|
||||
yAxisUnit="m/s"
|
||||
emptyStateIcon={<Gauge className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsSchrittlaengePage() {
|
||||
chartKey="walkingStepLength"
|
||||
i18nPrefix="insights.walkingStepLength"
|
||||
explainerMetric="stepLength"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="m"
|
||||
yAxisUnit="m"
|
||||
emptyStateIcon={<Footprints className="size-6" />}
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function InsightsStepsPage() {
|
||||
i18nPrefix="insights.steps"
|
||||
explainerMetric="steps"
|
||||
statIcon={Footprints}
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unitKey="insights.units.steps"
|
||||
emptyStateIcon={<Footprints className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsViszeralfettPage() {
|
||||
chartKey="visceralFat"
|
||||
i18nPrefix="insights.visceralFat"
|
||||
explainerMetric="visceralFat"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
unit=""
|
||||
yAxisUnit=""
|
||||
emptyStateIcon={<Droplets className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsWaistPage() {
|
||||
insightMetric="WAIST_CIRCUMFERENCE"
|
||||
chartKey="waistCircumference"
|
||||
i18nPrefix="insights.waist"
|
||||
color="var(--info)"
|
||||
color="var(--chart-4)"
|
||||
statIcon={Ruler}
|
||||
emptyStateIcon={<Ruler className="size-6" />}
|
||||
emptyStateCtaType="WAIST_CIRCUMFERENCE"
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsGangasymmetriePage() {
|
||||
chartKey="walkingAsymmetry"
|
||||
i18nPrefix="insights.walkingAsymmetry"
|
||||
explainerMetric="walkingAsymmetry"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="%"
|
||||
yAxisUnit="%"
|
||||
emptyStateIcon={<Footprints className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsGehstreckePage() {
|
||||
chartKey="walkingRunningDistance"
|
||||
i18nPrefix="insights.walkingRunningDistance"
|
||||
explainerMetric="walkingDistance"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
emptyStateIcon={<Footprints className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
coachPrefill="I haven't logged any walking and running distance yet — what does this metric tell me about my health, and how do I improve it?"
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsGehpulsPage() {
|
||||
chartKey="walkingHeartRateAverage"
|
||||
i18nPrefix="insights.walkingHeartRateAverage"
|
||||
explainerMetric="walkingHeartRate"
|
||||
color="var(--destructive)"
|
||||
color="var(--chart-3)"
|
||||
unit="bpm"
|
||||
yAxisUnit="bpm"
|
||||
emptyStateIcon={<HeartPulse className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsGehgeschwindigkeitPage() {
|
||||
chartKey="walkingSpeed"
|
||||
i18nPrefix="insights.walkingSpeed"
|
||||
explainerMetric="walkingSpeed"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
emptyStateIcon={<Gauge className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
coachPrefill="I haven't logged any walking speed yet — what does this metric tell me about my health, and how do I improve it?"
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsGangstabilitaetPage() {
|
||||
chartKey="walkingSteadiness"
|
||||
i18nPrefix="insights.walkingSteadiness"
|
||||
explainerMetric="walkingSteadiness"
|
||||
color="var(--success)"
|
||||
color="var(--chart-2)"
|
||||
unit="%"
|
||||
yAxisUnit="%"
|
||||
emptyStateIcon={<Gauge className="size-6" />}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function InsightsWristTemperaturePage() {
|
||||
chartKey="wristTemperature"
|
||||
i18nPrefix="insights.wristTemperature"
|
||||
explainerMetric="wristTemperature"
|
||||
color="var(--warning)"
|
||||
color="var(--chart-5)"
|
||||
emptyStateIcon={<Thermometer className="size-6" />}
|
||||
emptyStateCtaType={null}
|
||||
coachPrefill="I haven't logged any wrist-temperature data yet — what does this metric tell me about my health, and how do I improve it?"
|
||||
|
||||
@@ -28,10 +28,10 @@ export interface MoodStructuredTagRow {
|
||||
}
|
||||
|
||||
function colorForScore(score: number): string {
|
||||
if (score < 2) return "var(--dracula-red)";
|
||||
if (score < 3) return "var(--dracula-orange)";
|
||||
if (score < 2) return "var(--destructive)";
|
||||
if (score < 3) return "var(--warning)";
|
||||
if (score < 3.5) return "var(--dracula-yellow)";
|
||||
return "var(--dracula-green)";
|
||||
return "var(--success)";
|
||||
}
|
||||
|
||||
export function MoodStructuredTagBreakdown({
|
||||
|
||||
@@ -89,7 +89,7 @@ export function RecoverySection() {
|
||||
title: t("measurements.typeAnsCharge"),
|
||||
explainer: t("insights.recovery.block.ansChargeExplainer"),
|
||||
icon: Battery,
|
||||
color: "var(--success)",
|
||||
color: "var(--chart-2)",
|
||||
unit: unitScore,
|
||||
fractionDigits: 1,
|
||||
},
|
||||
@@ -105,7 +105,7 @@ export function RecoverySection() {
|
||||
title: t("measurements.typeDayStrain"),
|
||||
explainer: t("insights.recovery.block.dayStrainExplainer"),
|
||||
icon: Gauge,
|
||||
color: "var(--warning)",
|
||||
color: "var(--chart-5)",
|
||||
unit: unitScore,
|
||||
fractionDigits: 1,
|
||||
},
|
||||
@@ -142,7 +142,7 @@ export function RecoverySection() {
|
||||
title: t("measurements.typeAverageHeartRate"),
|
||||
explainer: t("insights.recovery.block.averageHeartRateExplainer"),
|
||||
icon: Heart,
|
||||
color: "var(--info)",
|
||||
color: "var(--chart-4)",
|
||||
unit: unitBpm,
|
||||
},
|
||||
{
|
||||
@@ -152,7 +152,7 @@ export function RecoverySection() {
|
||||
title: t("measurements.typeMaxHeartRate"),
|
||||
explainer: t("insights.recovery.block.maxHeartRateExplainer"),
|
||||
icon: HeartPulse,
|
||||
color: "var(--destructive)",
|
||||
color: "var(--chart-3)",
|
||||
unit: unitBpm,
|
||||
},
|
||||
{
|
||||
@@ -162,7 +162,7 @@ export function RecoverySection() {
|
||||
title: t("measurements.typeEnergyExpenditureKj"),
|
||||
explainer: t("insights.recovery.block.energyExpenditureKjExplainer"),
|
||||
icon: Flame,
|
||||
color: "var(--dracula-yellow)",
|
||||
color: "var(--chart-5)",
|
||||
unit: unitKj,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -42,7 +42,7 @@ export function SleepDurationChart({
|
||||
chartKey="sleep"
|
||||
types={["SLEEP_DURATION"]}
|
||||
title={t("charts.sleep")}
|
||||
colors={["var(--info)"]}
|
||||
colors={["var(--chart-4)"]}
|
||||
unit="h"
|
||||
yAxisUnit="h"
|
||||
compareBaseline={compareBaseline}
|
||||
|
||||
@@ -64,28 +64,28 @@ export function SleepQualitySection({ enabled }: { enabled: boolean }) {
|
||||
type: "SLEEP_PERFORMANCE",
|
||||
title: t("measurements.typeSleepPerformance"),
|
||||
icon: Target,
|
||||
color: "var(--info)",
|
||||
color: "var(--chart-4)",
|
||||
unit: "%",
|
||||
},
|
||||
{
|
||||
type: "SLEEP_EFFICIENCY",
|
||||
title: t("measurements.typeSleepEfficiency"),
|
||||
icon: Gauge,
|
||||
color: "var(--success)",
|
||||
color: "var(--chart-2)",
|
||||
unit: "%",
|
||||
},
|
||||
{
|
||||
type: "SLEEP_CONSISTENCY",
|
||||
title: t("measurements.typeSleepConsistency"),
|
||||
icon: Repeat,
|
||||
color: "var(--dracula-yellow)",
|
||||
color: "var(--chart-5)",
|
||||
unit: "%",
|
||||
},
|
||||
{
|
||||
type: "SLEEP_NEED",
|
||||
title: t("measurements.typeSleepNeed"),
|
||||
icon: Waves,
|
||||
color: "var(--warning)",
|
||||
color: "var(--chart-5)",
|
||||
unit: t("insights.deviceScore.unitMinutes"),
|
||||
},
|
||||
{
|
||||
|
||||
Reference in new issue
Block a user