Minor style updates, fixing the "combined" steps provider (#112)

* Fix steps daily data, other style tweaks * early exit * Fixing a couple other issues * Revert story change * Fix query device data to catch errors --------- Co-authored-by: Chris Nowak <chris@Christophers-MacBook-Pro.local>
CareEvolution · Sep 18, 2023 · c519952 · c519952
1 parent 1c99f6b
commit c519952
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 28 deletions.
diff --git a/src/components/container/DailyDataChart/DailyDataChart.css b/src/components/container/DailyDataChart/DailyDataChart.css
@@ -30,7 +30,7 @@
 .mdhui-daily-data-chart .mdhui-daily-data-tooltip {
     padding: 8px;
     background: var(--mdhui-background-color-0);
-    border-radius: 5px;
+    border-radius: var(--mdhui-card-border-radius);
     box-shadow: var(--mdhui-box-shadow-1);
     animation: fadein 1s;
     -moz-animation: fadein 1s;

diff --git a/src/components/container/DailyDataChart/DailyDataChart.stories.tsx b/src/components/container/DailyDataChart/DailyDataChart.stories.tsx
@@ -58,6 +58,22 @@ export const stepsBarChart = {
     render: render
 };
 
+
+export const stepsLiveBarChart = {
+    args: {
+        title: "Steps",
+        options: {
+
+        },
+        intervalType: "Week",
+        weekStartsOn: "6DaysAgo",
+        dailyDataType: DailyDataType.Steps,
+        valueFormatter: (value: number) => Number(value.toFixed(0)).toLocaleString(),
+        chartType: "Bar"
+    },
+    render: render
+};
+
 export const stepsAreaChart = {
     args: {
         title: "Steps",

diff --git a/src/components/container/DeviceDataMonthChart/DeviceDataMonthChart.css b/src/components/container/DeviceDataMonthChart/DeviceDataMonthChart.css
@@ -55,7 +55,7 @@
     padding: 4px;
     font-size: 12px;
     background: var(--mdhui-background-color-0);
-    border-radius: 5px;
+    border-radius: var(--mdhui-card-border-radius);
     box-shadow: var(--mdhui-box-shadow-0);
     animation: fadein 1s;
     -moz-animation: fadein 1s;

diff --git a/src/components/presentational/Button/Button.css b/src/components/presentational/Button/Button.css
@@ -7,7 +7,7 @@
     line-height: 17px;
     color: #FFF;
     border: none;
-    border-radius: 5px;
+    border-radius: var(--mdhui-card-border-radius);
     cursor: pointer;
     font-weight: bold;
     text-align: center;

diff --git a/src/components/presentational/Card/Card.css b/src/components/presentational/Card/Card.css
@@ -1,5 +1,5 @@
 .mdhui-card {
-    border-radius: 5px;
+    border-radius: var(--mdhui-card-border-radius);
     margin: 16px;
     background: var(--mdhui-background-color-0);
     box-shadow: var(--mdhui-box-shadow-0);

diff --git a/src/helpers/daily-data-providers/combined-steps.ts b/src/helpers/daily-data-providers/combined-steps.ts
@@ -1,29 +1,42 @@
 import { add } from "date-fns";
 import { appleHealthStepsDataProvider, fitbitStepsDataProvider, garminStepsDataProvider } from ".";
 import getDayKey from "../get-day-key";
+import MyDataHelps from "@careevolution/mydatahelps-js";
 
 export default function (startDate: Date, endDate: Date) {
-	var fitbitSteps = fitbitStepsDataProvider(startDate, endDate);
-	var appleSteps = appleHealthStepsDataProvider(startDate, endDate);
-	var garminSteps = garminStepsDataProvider(startDate, endDate);
+	let providers: Promise<{ [key: string]: number }>[] = [];
 
-	return Promise.all([fitbitSteps, appleSteps, garminSteps]).then((values) => {
-		var data: { [key: string]: number } = {};
-		while (startDate < endDate) {
-			var dayKey = getDayKey(startDate);
-			var steps: number | null = null;
-			if (values[0][dayKey]) {
-				steps = values[0][dayKey];
-			}
+	return MyDataHelps.getDataCollectionSettings().then((settings) => {
+		if (settings.fitbitEnabled) {
+			providers.push(fitbitStepsDataProvider(startDate, endDate));
+		}
+		if (settings.garminEnabled) {
+			providers.push(garminStepsDataProvider(startDate, endDate));
+		}
+		if (settings.queryableDeviceDataTypes.find(s => s.namespace == "AppleHealth" && s.type == "HourlySteps")) {
+			providers.push(appleHealthStepsDataProvider(startDate, endDate));
+		}
 
-			if (values[1][dayKey] && (steps == null || values[1][dayKey] > steps)) {
-				steps = values[1][dayKey];
-			}
-			if (steps) {
-				data[dayKey] = steps;
-			}
-			startDate = add(startDate, { days: 1 });
+		if (!providers.length) {
+			return {};
 		}
-		return data;
+
+		return Promise.all(providers).then((values) => {
+			var data: { [key: string]: number } = {};
+			while (startDate < endDate) {
+				var dayKey = getDayKey(startDate);
+				var steps: number | null = null;
+				values.forEach((value) => {
+					if (value[dayKey] || steps == null || steps < value[dayKey]) {
+						steps = value[dayKey];
+					}
+				});
+				if (steps) {
+					data[dayKey] = steps;
+				}
+				startDate = add(startDate, { days: 1 });
+			}
+			return data;
+		});
 	});
 }
diff --git a/src/helpers/daily-data-providers/query-all-device-data.ts b/src/helpers/daily-data-providers/query-all-device-data.ts
@@ -1,4 +1,4 @@
-import MyDataHelps, { DeviceDataPoint, DeviceDataPointQuery, Guid,  } from '@careevolution/mydatahelps-js';
+import MyDataHelps, { DeviceDataPoint, DeviceDataPointQuery, Guid, } from '@careevolution/mydatahelps-js';
 
 export default function queryAllDeviceData(parameters: DeviceDataPointQuery) {
 	var allDeviceDataPoints: DeviceDataPoint[] = [];
@@ -14,6 +14,8 @@ export default function queryAllDeviceData(parameters: DeviceDataPointQuery) {
 			} else {
 				return allDeviceDataPoints;
 			}
+		}).catch(function (error) {
+			return allDeviceDataPoints;
 		});
 	}
 	return queryPage();

diff --git a/src/helpers/globalCss.ts b/src/helpers/globalCss.ts
@@ -7,6 +7,10 @@ export const core = css`
     --mdhui-color-warning: #FF671D;
     --mdhui-color-danger: #eb5546;
     --mdhui-fadein-animation: fadein 1s;
+    
+    --mdhui-card-border-radius: 12px;
+    --mdhui-font-family: ui-rounded, -apple-system, Helvetica, Arial, sans-serif;
+    --mdhui-modal-overlay-color: rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-reduced-motion) {
@@ -59,13 +63,14 @@ export const lightColorScheme = css`
     --mdhui-text-color-3: #999;
     --mdhui-text-color-4: #bbb;
 
-    --mdhui-box-shadow-color-0: #ddd;
+    --mdhui-box-shadow-color-0: rgba(0, 0, 0, 0.05);
     --mdhui-box-shadow-color-1: #aaa;
 
-    --mdhui-box-shadow-0: 0px 9px 9px 0px var(--mdhui-box-shadow-color-0);
+    --mdhui-box-shadow-0: 0px 4px 4px 0px var(--mdhui-box-shadow-color-0);
     --mdhui-box-shadow-1: 0px 0px 5px 0px var(--mdhui-box-shadow-color-1);
 
     --mdhui-overlay-gradient:linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 240, 0.2) 100%);
+    
 }
 `
 
@@ -113,9 +118,9 @@ html {
 body {
     padding: 0;
     margin: 0;
-    font-family: ui-rounded, -apple-system, Helvetica, Arial, sans-serif;
+    font-family: var(--mdhui-font-family);
     background: var(--mdhui-background-color-1);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    line-height: 1.2em;
+    line-height: 1.2;
 }`;