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:

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.