Add a provider report pdf component.

package.json

@@ -63,6 +63,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@react-pdf/renderer": "^3.3.8",
     "@types/lodash": "^4.14.195",
     "date-fns": "^2.28.0",
     "html-react-parser": "^5.0.7",

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.css

@@ -0,0 +1,3 @@
+.mdhui-asthma-provider-report {
+    padding: 16px;
+}

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.previewData.ts

@@ -0,0 +1,22 @@
+import { AsthmaLogEntry, AsthmaParticipant } from '../../model';
+import { DeviceDataPoint, SurveyAnswer } from '@careevolution/mydatahelps-js';
+
+export type AsthmaProviderReportPreviewState = 'default';
+
+export interface AsthmaProviderReportPreviewData {
+    participant: AsthmaParticipant;
+    logEntries: AsthmaLogEntry[];
+    surveyAnswers: SurveyAnswer[];
+    airQualityDataPoints: DeviceDataPoint[];
+}
+
+export const previewData: Record<AsthmaProviderReportPreviewState, AsthmaProviderReportPreviewData> = {
+    'default': {
+        participant: {
+            getFirstName: () => 'Leroy'
+        } as AsthmaParticipant,
+        logEntries: [],
+        surveyAnswers: [],
+        airQualityDataPoints: []
+    }
+};

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import AsthmaProviderReport, { AsthmaProviderReportProps } from './AsthmaProviderReport';
+import { Layout } from '../../../presentational';
+
+export default {
+    title: 'Asthma/Components/AsthmaProviderReport',
+    component: AsthmaProviderReport,
+    parameters: {layout: 'fullscreen'}
+};
+
+interface AsthmaProviderReportStoryArgs extends AsthmaProviderReportProps {
+    colorScheme: 'auto' | 'light' | 'dark';
+}
+
+const render = (args: AsthmaProviderReportStoryArgs) => {
+    return <Layout colorScheme={args.colorScheme}>
+        <AsthmaProviderReport {...args} logTodayEntrySurveyName="Log Symptoms - Today"/>
+    </Layout>;
+};
+
+export const Default = {
+    args: {
+        colorScheme: 'auto',
+        previewState: 'default'
+    },
+    argTypes: {
+        colorScheme: {
+            name: 'color scheme',
+            control: 'radio',
+            options: ['auto', 'light', 'dark']
+        },
+        previewState: {
+            name: 'state',
+            control: 'radio',
+            options: ['loading', 'default', 'live']
+        }
+    },
+    render: render
+};

src/components/asthma/components/AsthmaProviderReport/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AsthmaProviderReport';
+export { AsthmaProviderReportPreviewState } from './AsthmaProviderReport.previewData';

src/components/asthma/components/index.ts

@@ -8,4 +8,5 @@ export { default as AsthmaControlStatusHeader } from './AsthmaControlStatusHeade
 export { default as AsthmaLogEntryDetails, AsthmaLogEntryDetailsPreviewState } from './AsthmaLogEntryDetails';
 export { default as AsthmaLogEntryHeader } from './AsthmaLogEntryHeader';
 export { default as AsthmaPostEnrollmentSurveyTrigger } from './AsthmaPostEnrollmentSurveyTrigger';
+export { default as AsthmaProviderReport } from './AsthmaProviderReport';
 export { default as AsthmaRecommendedArticle } from './AsthmaRecommendedArticle';

src/components/asthma/helpers/asthma-data.ts

@@ -1,4 +1,4 @@
-import MyDataHelps, { DeviceDataPoint, DeviceDataPointQuery, DeviceDataPointsPage, DeviceInfo, PersistableDeviceDataPoint, SurveyAnswer, SurveyAnswersQuery } from '@careevolution/mydatahelps-js';
+import MyDataHelps, { DeviceDataPoint, DeviceDataPointQuery, DeviceDataPointsPage, DeviceInfo, Guid, PersistableDeviceDataPoint, SurveyAnswer, SurveyAnswersQuery } from '@careevolution/mydatahelps-js';
 import { add, compareDesc, endOfDay, endOfToday, formatISO, isAfter, isBefore, isToday, parseISO, startOfDay, startOfToday } from 'date-fns';
 import { AsthmaActionPlan, AsthmaAirQuality, AsthmaAirQualityType, AsthmaBiometric, AsthmaBiometricType, AsthmaDataStatus, AsthmaLogEntry, AsthmaParticipant } from '../model';
 import { isBloodOxygenLevelWithinRange, isDaytimeRestingHeartRateWithinRange, isNighttimeRestingHeartRateWithinRange, isRespiratoryRateWithinRange, isSleepDisturbancesWithinRange, isStepsWithinRange } from './asthma-functions';
@@ -174,13 +174,18 @@ const computeBiometricsForDate = (date: Date, dataPoints: DeviceDataPoint[]): As
     ];
 };
 
-const loadAirQualities = (observedAfter: Date, observedBefore: Date): Promise<DeviceDataPointsPage> => {
+const loadAirQualities = (observedAfter: Date, observedBefore?: Date, pageID?: Guid): Promise<DeviceDataPointsPage> => {
     let params: DeviceDataPointQuery = {
         namespace: 'AirNowApi',
         type: ['HomeAirQuality', 'WorkAirQuality'],
-        observedAfter: observedAfter.toISOString(),
-        observedBefore: observedBefore.toISOString()
+        observedAfter: observedAfter.toISOString()
     };
+    if (observedBefore) {
+        params.observedBefore = observedBefore.toISOString();
+    }
+    if (pageID) {
+        params.pageID = pageID;
+    }
     return MyDataHelps.queryDeviceData(params);
 };
 
@@ -236,6 +241,8 @@ export interface AsthmaDataService {
 
     loadAirQualitiesForDate(date: Date): Promise<AsthmaAirQuality[]>;
 
+    loadAirQualityDataPoints(fromDate: Date): Promise<DeviceDataPoint[]>;
+
     saveLogEntry(logEntry: AsthmaLogEntry): Promise<void>;
 
     loadAndClearAlertTakeover(): Promise<string | undefined>;
@@ -301,6 +308,17 @@ const service: AsthmaDataService = {
             computeAirQuality('work', result.deviceDataPoints, computeAqi, 'not-found')
         ];
     },
+    loadAirQualityDataPoints: async function (fromDate: Date): Promise<DeviceDataPoint[]> {
+        let allDataPoints: DeviceDataPoint[] = [];
+
+        let results = await loadAirQualities(fromDate);
+        allDataPoints = allDataPoints.concat(results.deviceDataPoints);
+        while (results.nextPageID) {
+            results = await loadAirQualities(fromDate, undefined, results.nextPageID);
+            allDataPoints = allDataPoints.concat(results.deviceDataPoints);
+        }
+        return allDataPoints;
+    },
     saveLogEntry: function (logEntry: AsthmaLogEntry): Promise<void> {
         let logEntryDataPoint: PersistableDeviceDataPoint = {
             type: 'Asthma-LogEntry',