hms-cpapdash-charts

Shared Angular component library (@cpapdash/charts) for visualizing CPAP therapy data. It is the single set of chart and summary components reused across the CpapDash apps, so the web dashboard and companion app render therapy data the same way.

Built on Chart.js with chartjs-plugin-annotation. All components are standalone.

Components

Selector	Component	Purpose
sl-signal-chart	SignalChartComponent	Line chart for a therapy signal (flow, pressure, …) with annotations
sl-metric-card	MetricCardComponent	Single labelled metric (e.g. AHI) with unit
sl-overview-strip	OverviewStripComponent	Row of headline metrics for a session
sl-detail-panel	DetailPanelComponent	Expanded per-signal / per-event detail view
sl-event-badges	EventBadgesComponent	Inline badges for sleep events
sl-live-banner	LiveBannerComponent	Live-session status banner

Plus chart-helpers (dataset builders) and theme (shared chart theming) from the public API.

Quick Start

import { Component } from '@angular/core';
import { SignalChartComponent, MetricCardComponent } from '@cpapdash/charts';
import { ChartDataset } from 'chart.js';

@Component({
  selector: 'app-session',
  standalone: true,
  imports: [SignalChartComponent, MetricCardComponent],
  template: `
    <sl-metric-card label="AHI" [value]="ahi" unit="/h"></sl-metric-card>
    <sl-signal-chart
      title="Flow Rate" unit="L/min"
      [labels]="labels" [datasets]="datasets" [height]="160">
    </sl-signal-chart>
  `
})
export class SessionComponent {
  ahi = '4.2';
  labels: string[] = [];
  datasets: ChartDataset<'line'>[] = [];
}

Peer Dependencies

Provided by the host app:

• @angular/common, @angular/core — ^19 || ^20 || ^21
• chart.js — ^4
• chartjs-plugin-annotation — ^3

Use as a Shared Library

This is an ng-packagr library — it is built, then consumed as @cpapdash/charts. Two ways:

1. Import — build and install the package

Build the library and install the packaged output into the consuming app. Best when the consumer doesn't keep a local checkout.

# in this repo
ng build cpapdash-charts            # emits dist/cpapdash-charts
cd dist/cpapdash-charts && npm pack # -> cpapdash-charts-<version>.tgz

# in the consuming app
npm install /path/to/cpapdash-charts-<version>.tgz

A tag-triggered CI publish (npm / GitHub Packages) is the intended long-term distribution so consumers can npm install @cpapdash/charts directly.

2. Direct reference — local workspace path

How the CpapDash apps consume it during development: include this library in the Angular workspace and map the package name to its source/built output so edits are picked up without re-packing.

// tsconfig.json (consuming workspace)
{
  "compilerOptions": {
    "paths": {
      "@cpapdash/charts": ["./projects/hms-cpapdash-charts/src/public-api.ts"]
    }
  }
}

Then import the standalone components directly: import { SignalChartComponent } from '@cpapdash/charts';.

Related Projects

• hms-cpapdash-parser — C++ parser that produces the therapy data these charts render
• hms-cpap — Home Assistant CPAP data collection service
• CpapDash — CPAP therapy companion (web + app)