Charts & Visualization

Charts and Data Visualization

The HCG AI application utilizes Chart.js to provide clinical-grade visualizations of pregnancy progression. These charts help users and healthcare providers track $\beta$-hCG doubling rates and fetal growth trends against expected medical benchmarks.

Visualization Overview

The platform renders two primary interactive visualizations:

1. HCG Trend Analysis: Tracks $\beta$-hCG levels over time to monitor doubling rates.
2. Ultrasound Growth Tracking: Visualizes fetal measurements (GS, CRL, Heart Rate) to assess gestational development.

HCG Trend Chart

The HCG chart plots blood test results chronologically. It is designed to help identify whether HCG levels are increasing within the expected 48–72 hour window.

Usage:

• Data Source: Fetched automatically from the /api/hcg-entries endpoint.
• Axes: The X-axis represents the date of the blood test, while the Y-axis represents the HCG value in mIU/mL.
• Interaction: Hovering over data points reveals the specific value and notes recorded for that entry.

Ultrasound Measurement Chart

This visualization tracks multiple biometric parameters derived from ultrasound scans. It allows for the comparison of different metrics on a single timeline to ensure proportional growth.

Supported Metrics:

• Gestational Sac (GS): Measured in mm.
• Crown-Rump Length (CRL): Measured in mm.
• Fetal Heart Rate (FHR): Measured in BPM.
• Yolk Sac (YS): Measured in mm.

Data Interface for Visualizations

The charts are populated using the following JSON structures from the API. If you are extending the dashboard or integrating external data, ensure the following schemas are met:

HCG Entry Schema

Endpoint: GET /api/hcg-entries

| Field | Type | Description | | :--- | :--- | :--- | | date | string | ISO format date (YYYY-MM-DD) | | hcg_value | number | The HCG concentration in mIU/mL | | units | string | Typically 'mIU/mL' |

Sample Response:

[
  {
    "date": "2023-10-01",
    "hcg_value": 1500,
    "units": "mIU/mL",
    "notes": "First blood draw"
  },
  {
    "date": "2023-10-03",
    "hcg_value": 3100,
    "units": "mIU/mL",
    "notes": "48-hour follow up"
  }
]

Ultrasound Entry Schema

Endpoint: GET /api/ultrasound-entries

| Field | Type | Description | | :--- | :--- | :--- | | date | string | ISO format date | | gs_size | number | Gestational Sac size (mm) | | crl_size | number | Crown-Rump Length (mm) | | heart_rate | number | Fetal heart rate (BPM) |

Technical Implementation

The charts are initialized in the frontend using the Chart.js constructor. The application uses a reactive pattern where charts are destroyed and re-rendered whenever a user adds, updates, or deletes an entry to ensure data integrity.

Example Configuration:

// Internal representation of the HCG Chart configuration
const hcgChartConfig = {
    type: 'line',
    data: {
        labels: data.map(e => e.date),
        datasets: [{
            label: 'β-hCG Level (mIU/mL)',
            data: data.map(e => e.hcgValue),
            borderColor: '#ff4b5c',
            tension: 0.3,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            tooltip: { mode: 'index', intersect: false }
        }
    }
};

Risk Assessment Overlays

In the Analysis Tab, charts may be supplemented with risk assessment data derived from the analysis_results table. This includes:

• Z-Scores: Calculated growth deviations from the mean.
• Risk Zones: Visual indicators (Low, Medium, High risk) based on the HCG doubling rate or ultrasound measurements compared to the Gestational Age (GA).