RelativeActivity: Hide when no data types can be rendered.

src/components/container/RelativeActivity/RelativeActivity.stories.tsx

@@ -48,6 +48,12 @@ export const NoThresholds = {
         title: "Activity",
         previewState: "Default"
     },
+    argTypes: {
+        previewState: {
+            control: "radio",
+            options: ["Default", "LimitedData", "NoData"]
+        }
+    },
     render: render
 };
 
@@ -66,6 +72,12 @@ export const SomeThresholds = {
         previewState: "Default",
         specifyThresholds: true
     },
+    argTypes: {
+        previewState: {
+            control: "radio",
+            options: ["Default", "LimitedData", "NoData"]
+        }
+    },
     render: render
 };
 
@@ -85,6 +97,12 @@ export const AllThresholds = {
         previewState: "Default",
         specifyThresholds: true
     },
+    argTypes: {
+        previewState: {
+            control: "radio",
+            options: ["Default", "LimitedData", "NoData"]
+        }
+    },
     render: render
 };
 

src/components/container/RelativeActivity/RelativeActivity.tsx

@@ -16,7 +16,7 @@ import { queryRelativeActivity } from "../../../helpers/relative-activity";
 export interface RelativeActivityProps {
     dataTypes?: RelativeActivityDataType[];
     useContext?: boolean;
-    previewState?: "Default";
+    previewState?: "Default" | "LimitedData" | "NoData";
     title?: string;
     innerRef?: React.Ref<HTMLDivElement>
     date?: Date;
@@ -39,15 +39,20 @@ export default function (props: RelativeActivityProps) {
         function transformResults(results: { [key: string]: { [key: string]: RelativeActivityQueryResult } } | undefined) {
             if (!results) return;
             let transformedResults: { [key: string]: RelativeActivityQueryResult } = {};
+            const dayKey = getDayKey(date);
             dataTypes.forEach(dataType => {
-                if (results[dataType.dailyDataType]?.[getDayKey(date)]?.value) {
-                    transformedResults[dataType.dailyDataType] = results[dataType.dailyDataType][getDayKey(date)];
+                const result = results[dataType.dailyDataType]?.[dayKey];
+                if (result?.value && result.threshold !== undefined && result.relativePercent !== undefined) {
+                    if (props.previewState !== "LimitedData" || (dataType.threshold !== undefined && dataType.threshold !== "30DayAverage")) {
+                        transformedResults[dataType.dailyDataType] = result;
+                    }
                 }
             });
             return transformedResults;
         }
 
         setResults(undefined);
+        if (props.previewState === "NoData") return;
         if (props.useContext) {
             if (!relativeActivityContext?.data) {
                 return;

src/components/container/RelativeActivityDayCoordinator/RelativeActivityDayCoordinator.tsx

@@ -1,6 +1,5 @@
 import React, { createContext, DependencyList, useContext, useState } from 'react';
 import { checkDailyDataAvailability, queryRelativeActivity, RelativeActivityDataType, RelativeActivityQueryResult, useInitializeView } from '../../../helpers';
-import { startOfToday } from 'date-fns';
 import { DateRangeContext, DateRangeCoordinator, LoadingIndicator, SparkBarChart, SparkBarChartBar } from '../../presentational';
 import { WeeklyDayNavigator } from '../../container';
 
@@ -48,10 +47,6 @@ export default function RelativeActivityDateRangeCoordinator(props: RelativeActi
 
         let bars: SparkBarChartBar[] = availableDataTypes.map(dataType => {
             const dataForDay = relativeActivityData?.[dataType.dailyDataType]?.[dayKey];
-            const relativePercent = dataForDay?.relativePercent ?? 0;
-            if (relativePercent === undefined) {
-                return { color: 'var(--mdhui-color-primary)', barFillPercent: 0 };
-            }
 
             const value = dataForDay?.value ?? 0;
             let color = dataType.color || 'var(--mdhui-color-primary)';
@@ -61,7 +56,7 @@ export default function RelativeActivityDateRangeCoordinator(props: RelativeActi
 
             return {
                 color: color,
-                barFillPercent: relativePercent
+                barFillPercent: dataForDay?.relativePercent ?? 0
             };
         });