File size: 4,228 Bytes
5feba25 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | import MetricItem from './MetricItem'
const FEATURE_LABELS = {
'Age': 'Age',
'Glucose': 'Blood Glucose',
'HbA1c': 'HbA1c',
'BMI': 'BMI',
'Cholesterol': 'Cholesterol',
'Triglycerides': 'Triglycerides',
'Blood Pressure': 'Blood Pressure',
'Physical Activity': 'Physical Activity',
'Sleep Hours': 'Sleep Hours',
'Stress Level': 'Stress Level',
'Diet Score': 'Diet Score',
'Smoking': 'Smoking',
'Alcohol': 'Alcohol',
'Family History': 'Family History',
'LengthOfStay': 'Length of Stay',
'Oxygen Saturation': 'Oxygen Saturation',
}
const FEATURE_DEFINITIONS = {
'Age': 'Your current age in years.',
'Glucose': 'Current blood sugar level (mg/dL).',
'HbA1c': 'Average blood sugar over the last 3 months (%).',
'BMI': 'Body Mass Index; a measure of body fat based on height and weight.',
'Cholesterol': 'Total amount of cholesterol in your blood (mg/dL).',
'Triglycerides': 'A type of fat found in your blood (mg/dL).',
'Blood Pressure': 'The force of your blood against artery walls (e.g., 120).',
'Physical Activity': 'Total hours of exercise or active movement per week.',
'Sleep Hours': 'Average hours of sleep you get per 24-hour period.',
'Stress Level': '1-3 (Low): Calm, in control. 4-6 (Moderate): Busy, pressured. 7-8 (High): Anxious, overwhelmed. 9-10 (Very High): Exhausted, unable to cope.',
'Diet Score': 'Self-rating of how healthy your meals are (1-10).',
'Smoking': 'Whether you currently smoke or have a history of smoking.',
'Alcohol': 'Your frequency of alcohol consumption.',
'Family History': 'Whether close relatives have had chronic conditions like heart disease or diabetes.',
'LengthOfStay': 'Total days spent in a hospital during your last visit.',
'Oxygen Saturation': 'The percentage of oxygen in your blood (SpO2).',
}
const DEFAULT_FEATURES = [
'Age', 'Glucose', 'HbA1c', 'BMI',
'Cholesterol', 'Triglycerides', 'Blood Pressure', 'Physical Activity',
'Sleep Hours', 'Stress Level', 'Diet Score', 'Smoking',
'Alcohol', 'Family History', 'LengthOfStay', 'Oxygen Saturation'
]
const FeatureSidebar = ({ features }) => {
const collectedCount = DEFAULT_FEATURES.filter(
feature => features[feature] !== null && features[feature] !== undefined
).length
const progressPercent = (collectedCount / 16) * 100
return (
<div className="w-72 bg-gray-50 border-r border-gray-200 flex flex-col h-full">
{/* Header */}
<div className="p-4 border-b border-gray-200">
<h2 className="text-sm font-semibold text-gray-900 mb-3">Health Metrics</h2>
{/* Progress bar */}
<div className="mb-2">
<div className="flex justify-between mb-1">
<span className="text-xs text-gray-600">{collectedCount}/16</span>
<span className="text-xs text-gray-600">{Math.round(progressPercent)}%</span>
</div>
<div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
<div
className="h-full bg-purple-600 transition-all duration-300"
style={{ width: `${progressPercent}%` }}
/>
</div>
</div>
</div>
{/* Features list */}
<div className="flex-1 overflow-y-auto px-4 py-3">
<div className="space-y-2">
{DEFAULT_FEATURES.map(feature => {
const isCollected = features[feature] !== null && features[feature] !== undefined
const displayLabel = FEATURE_LABELS[feature] || feature
const definition = FEATURE_DEFINITIONS[feature] || 'No description available.'
return (
<MetricItem
key={feature}
feature={feature}
displayLabel={displayLabel}
definition={definition}
isCollected={isCollected}
/>
)
})}
</div>
{/* Help text at bottom */}
<div className="mt-4 pt-3 border-t border-gray-200 text-xs text-gray-500">
<p>💡 <strong>Tip:</strong> Hover over or click the <span className="text-gray-600">ⓘ</span> icon next to each metric to learn what it measures.</p>
</div>
</div>
</div>
)
}
export default FeatureSidebar
|