Charts & Visuals
Overview
The HCG AI application leverages Chart.js to provide visual insights into pregnancy progression. These visualizations transform raw medical data—such as β-hCG levels and ultrasound measurements—into easy-to-interpret trends, helping users and healthcare providers monitor development and assess potential risks.
Visualization Types
1. β-hCG Trend Analysis
This is a line chart that plots HCG hormone levels over time. It is crucial for identifying doubling times and ensuring levels are rising within expected medical ranges for the first trimester.
- X-Axis: Date of the blood test.
- Y-Axis: HCG Value (mIU/mL).
- Key Features: Automatic scaling and chronological sorting of entries.
2. Ultrasound Growth Tracking
The system visualizes growth metrics derived from ultrasound scans. This includes tracking fetal development markers against gestational age.
- Metrics Tracked:
- CRL (Crown-Rump Length): Measured in mm.
- GS (Gestational Sac) & YS (Yolk Sac): Measured in mm.
- FHR (Fetal Heart Rate): Measured in BPM (Beats Per Minute).
3. Risk Assessment Indicators
While not a traditional line chart, the Analysis Tab uses visual indicators (color-coded badges) to represent data from the analysis_results table.
- Low Risk: Green indicator.
- Medium Risk: Yellow indicator.
- High Risk: Red indicator.
Data Structures for Visuals
To populate charts, the application expects data in the following formats (matching the PostgreSQL schema):
HCG Entry Object
Used to generate the HCG Trend Chart.
{
"date": "2023-10-25",
"hcg_value": 1500,
"units": "mIU/mL"
}
Ultrasound Entry Object
Used to generate growth and heart rate charts.
{
"date": "2023-10-30",
"gestational_age": "7w2d",
"crl_size": 12,
"heart_rate": 145
}
Interaction and Usage
The visuals are automatically updated whenever new data is submitted through the dashboard.
Accessing the Charts
- Home Tab: Displays the primary overview of HCG trends.
- Analysis Tab: Provides detailed breakdowns and risk-level visualizations based on the most recent entries.
- Entries Tab: Allows users to manage the raw data that feeds into the charts.
Tooltips and Details
Hovering over any data point on a Chart.js element will reveal:
- The exact measurement value.
- The date/time of the record.
- Associated notes (if provided during entry).
Configuration Details
The application utilizes the following Chart.js configuration defaults for all visuals:
| Property | Default Value | Description |
| :--- | :--- | :--- |
| Responsive | true | Charts resize based on mobile/desktop viewports. |
| Maintain Aspect Ratio | false | Allows charts to fill container height in the dashboard. |
| Theme | Custom CSS | Styled via style.css to match the "Heart" theme. |
| Icons | feather-icons | Used in legends and section headers. |
Adding New Measurements
If you are extending the application to track additional metrics (e.g., progesterone), ensure the new data is added to the shared/schema.ts and mapped to a new Chart.js dataset in the frontend logic.