Add new Insights components.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@careevolution/mydatahelps-ui",
-  "version": "3.14.0",
+  "version": "3.14.1-Insights.0",
   "description": "MyDataHelps UI Library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/container/InsightsDataCoordinator/InsightsDataCoordinator.tsx

@@ -0,0 +1,97 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { getDayKey, InsightsData, InsightsDataPreviewState, loadInsightsData, useInitializeView } from '../../../helpers';
+import { DateRangeContext } from '../../presentational';
+import { add, startOfToday } from 'date-fns';
+import MyDataHelps from '@careevolution/mydatahelps-js';
+
+export interface InsightsDataContext {
+    logSurveyName?: string;
+    loading: boolean;
+    firstTimeLoading: boolean;
+    insightsData: Partial<Record<string, InsightsData>>;
+    enterSurveyLog: (date: Date) => void;
+}
+
+export const InsightsDataContext = createContext<InsightsDataContext | null>(null);
+
+export interface InsightsDataCoordinatorProps {
+    previewState?: 'loading' | InsightsDataPreviewState;
+    logSurveyName?: string;
+    otherSurveyNames?: string[];
+    dailyDataTypes?: string[];
+    children: React.ReactNode;
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+
+export default function InsightsDataCoordinator(props: InsightsDataCoordinatorProps) {
+    const dateRangeContext = useContext(DateRangeContext);
+
+    const [loading, setLoading] = useState<boolean>(true);
+    const [firstTimeLoading, setFirstTimeLoading] = useState<boolean>(true);
+    const [insightsData, setInsightsData] = useState<Partial<Record<string, InsightsData>>>({});
+
+    const latestRequestId = useRef<number>(0);
+
+    const intervalStart = useMemo<Date>(
+        () => dateRangeContext?.intervalStart ?? startOfToday(),
+        [dateRangeContext?.intervalStart, getDayKey(new Date())]
+    );
+
+    const intervalEnd = useMemo<Date>(
+        () => {
+            if (dateRangeContext?.intervalType === '6Month') {
+                return add(intervalStart, { months: 6 });
+            }
+            if (dateRangeContext?.intervalType === 'Month') {
+                return add(intervalStart, { months: 1 });
+            }
+            if (dateRangeContext?.intervalType === 'Week') {
+                return add(intervalStart, { weeks: 1 });
+            }
+            return add(intervalStart, { days: 1 });
+        },
+        [intervalStart, dateRangeContext?.intervalType]
+    );
+
+    useEffect(() => {
+        setInsightsData({});
+    }, [intervalStart]);
+
+    useInitializeView(() => {
+        setLoading(true);
+        if (props.previewState) {
+            setFirstTimeLoading(true);
+            setInsightsData({});
+            if (props.previewState === 'loading') return;
+        }
+
+        const surveyNames: string[] = [...new Set(props.otherSurveyNames)];
+        if (props.logSurveyName && !surveyNames.includes(props.logSurveyName)) {
+            surveyNames.push(props.logSurveyName);
+        }
+        const dailyDataTypes = [...new Set(props.dailyDataTypes)];
+
+        const requestId = ++latestRequestId.current;
+        loadInsightsData(surveyNames, dailyDataTypes, intervalStart, intervalEnd, props.previewState).then(insightData => {
+            if (requestId !== latestRequestId.current) return;
+            setInsightsData(insightData);
+            setFirstTimeLoading(false);
+            if (!props.previewState?.startsWith('reloading')) {
+                setLoading(false);
+            }
+        });
+    }, [], [props.previewState, props.logSurveyName, props.otherSurveyNames, props.dailyDataTypes, intervalStart, intervalEnd]);
+
+    const enterSurveyLog = (date: Date) => {
+        if (props.previewState || loading || !props.logSurveyName) return;
+        setLoading(true);
+        MyDataHelps.startSurvey(props.logSurveyName, { event: getDayKey(date) });
+    };
+
+    return <div ref={props.innerRef}>
+        <InsightsDataContext.Provider
+            value={{ logSurveyName: props.logSurveyName, loading, firstTimeLoading, insightsData, enterSurveyLog }}
+            children={props.children}
+        />
+    </div>;
+}

src/components/container/InsightsDataCoordinator/index.ts

@@ -0,0 +1 @@
+export { default, InsightsDataContext } from './InsightsDataCoordinator';

src/components/container/index.ts

@@ -34,6 +34,7 @@ export { default as HealthConnectPhrSync } from "./HealthConnectPhrSync"
 export { default as HealthPreviewSection } from "./HealthPreviewSection"
 export { default as InboxItemList, InboxItemListPreviewState } from "./InboxItemList"
 export { default as InboxItemListCoordinator } from "./InboxItemListCoordinator"
+export { default as InsightsDataCoordinator, InsightsDataContext } from "./InsightsDataCoordinator"
 export { default as InsightMatrix } from "./InsightMatrix"
 export { IntradayHeartRateChart } from "./IntradayHeartRateChart"
 export { default as LabResultsBloodType } from "./LabResultsBloodType"

src/components/presentational/InsightsBadge/InsightsBadge.css

@@ -0,0 +1,20 @@
+.mdhui-insights-badge > .mdhui-progress-ring {
+    margin: 0;
+}
+
+.mdhui-insights-badge .mdhui-insights-badge-icon {
+    width: 42px;
+    height: 42px;
+    border: 1px solid var(--mdhui-border-color-1);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    box-sizing: border-box;
+}
+
+.mdhui-insights-badge .mdhui-insights-badge-icon-label {
+    line-height: 40px;
+    font-weight: bold;
+}

src/components/presentational/InsightsBadge/InsightsBadge.tsx

@@ -0,0 +1,61 @@
+import { ColorDefinition, InsightsData, resolveColor } from '../../../helpers';
+import React, { CSSProperties, Ref, useContext } from 'react';
+import { FontAwesomeSvgIcon } from 'react-fontawesome-svg-icon';
+import { LayoutContext, ProgressRing } from '../index';
+import './InsightsBadge.css';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export interface InsightsBadgeConfiguration {
+    identifier: string;
+    shouldRender?: (insightsData: InsightsData) => boolean;
+    getPercentComplete: (insightsData: InsightsData) => number;
+    customHighlightStyling?: CSSProperties;
+    icon?: IconDefinition;
+    iconColor?: ColorDefinition;
+}
+
+export interface InsightsBadgeProps {
+    configuration: InsightsBadgeConfiguration;
+    data: InsightsData;
+    innerRef?: Ref<HTMLDivElement>;
+}
+
+export default function InsightsBadge(props: InsightsBadgeProps) {
+    const layoutContext = useContext(LayoutContext);
+
+    const percentComplete = props.configuration.getPercentComplete(props.data);
+    const shouldHighlight = percentComplete === 100;
+
+    const iconColor = shouldHighlight ? props.configuration.iconColor ?? 'var(--mdhui-color-primary)' : { lightMode: '#acacb8', darkMode: '#8f8f9f' };
+    const progressColor = props.configuration.iconColor ?? 'var(--mdhui-color-primary)';
+
+    const resolvedBackgroundColor = resolveColor(layoutContext.colorScheme, { lightMode: '#fdfdfd', darkMode: '#43424f' });
+    const resolvedIconColor = resolveColor(layoutContext.colorScheme, iconColor);
+    const resolvedProgressColor = resolveColor(layoutContext.colorScheme, progressColor);
+    const resolvedIncompleteProgressColor = resolveColor(layoutContext.colorScheme, { lightMode: '#dedfe3', darkMode: '#43424f' });
+
+    const iconStyle: CSSProperties = {
+        background: resolvedBackgroundColor,
+        borderColor: resolvedBackgroundColor,
+        color: resolvedIconColor,
+        ...props.configuration.customHighlightStyling
+    };
+
+    return <div className="mdhui-insights-badge" ref={props.innerRef}>
+        <ProgressRing
+            diameter={44}
+            strokeWidth={6}
+            color={resolvedProgressColor}
+            incompleteColor={resolvedIncompleteProgressColor}
+            percentCompleted={percentComplete}
+            animate
+        >
+            <div className="mdhui-insights-badge-icon" style={iconStyle}>
+                {props.configuration.icon
+                    ? <FontAwesomeSvgIcon icon={props.configuration.icon} style={{ height: '100%', width: '100%' }} />
+                    : <div className="mdhui-insights-badge-icon-label">{props.configuration.identifier.substring(0, 1).toUpperCase()}</div>
+                }
+            </div>
+        </ProgressRing>
+    </div>;
+}

src/components/presentational/InsightsBadge/index.ts

@@ -0,0 +1 @@
+export { default, InsightsBadgeConfiguration } from './InsightsBadge';

src/components/presentational/InsightsCalendar/InsightsCalendar.css

@@ -0,0 +1,91 @@
+.mdhui-insights-calendar .mdhui-calendar {
+    border-top: solid 1px var(--mdhui-border-color-1);
+    padding-bottom: 8px;
+}
+
+.mdhui-insights-calendar .mdhui-week-calendar {
+    overflow-x: hidden;
+    border-bottom: none;
+}
+
+.mdhui-insights-calendar .mdhui-insights-week-calendar-day {
+    margin: 8px 0 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.mdhui-insights-calendar .mdhui-insights-week-calendar-day-of-week {
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--mdhui-text-color-2);
+    text-align: center;
+}
+
+.mdhui-insights-week-calendar-day-of-month {
+    font-size: 14px;
+    text-align: center;
+    margin-top: 8px;
+}
+
+.mdhui-insights-calendar .mdhui-insigts-week-calendar-day-rendered {
+    width: 100%;
+    margin: 16px 0 8px;
+}
+
+.mdhui-insights-calendar .mdhui-insights-week-calendar-day-footer {
+    margin: 16px 2px 0;
+}
+
+.mdhui-insights-calendar .mdhui-insights-week-calendar-day-badges {
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
+
+.mdhui-insights-calendar .mdhui-insights-calendar-footer {
+    border-top: 1px solid var(--mdhui-border-color-1);
+    position: relative;
+    min-height: 38px;
+}
+
+.mdhui-insights-calendar .mdhui-insights-calendar-legend {
+    padding: 8px 40px 8px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+}
+
+.mdhui-insights-calendar .mdhui-insights-calendar-legend-entry {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.mdhui-insights-calendar .mdhui-insights-calendar-legend-entry-color {
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+}
+
+.mdhui-insights-calendar .mdhui-insights-calendar-legend-entry-label {
+    font-size: 0.7em;
+    color: var(--mdhui-text-color-2);
+    font-weight: bold;
+}
+
+.mdhui-insights-calendar .mdhui-insights-calendar-loading-indicator.mdhui-loading-indicator {
+    position: absolute;
+    bottom: 6px;
+    right: 16px;
+    padding: 0;
+}