diff --git a/src/components/container/RelativeActivity/RelativeActivity.stories.tsx b/src/components/container/RelativeActivity/RelativeActivity.stories.tsx index bd2de5ad9..32d620a15 100644 --- a/src/components/container/RelativeActivity/RelativeActivity.stories.tsx +++ b/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 }; diff --git a/src/components/container/RelativeActivity/RelativeActivity.tsx b/src/components/container/RelativeActivity/RelativeActivity.tsx index 03b1a4fcc..ee00e40d2 100644 --- a/src/components/container/RelativeActivity/RelativeActivity.tsx +++ b/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 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; diff --git a/src/components/container/RelativeActivityDayCoordinator/RelativeActivityDayCoordinator.tsx b/src/components/container/RelativeActivityDayCoordinator/RelativeActivityDayCoordinator.tsx index 70d3b5ac9..99b900ad8 100644 --- a/src/components/container/RelativeActivityDayCoordinator/RelativeActivityDayCoordinator.tsx +++ b/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 }; });