show "No data" better when there's nothing to show

e-mission · May 21, 2024 · cc4d134 · cc4d134
1 parent 269faed
commit cc4d134
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 66 deletions.
diff --git a/www/i18n/en.json b/www/i18n/en.json
@@ -116,7 +116,8 @@
     "hours": "hours",
     "minutes": "minutes",
     "responses": "responses",
-    "custom": "Custom"
+    "custom": "Custom",
+    "no-data": "No data"
   },
 
   "diary": {

diff --git a/www/js/metrics/CarbonFootprintCard.tsx b/www/js/metrics/CarbonFootprintCard.tsx
@@ -236,11 +236,9 @@ const CarbonFootprintCard = ({ userMetrics, aggMetrics }: Props) => {
             </Text>
           </View>
         ) : (
-          <View style={{ flex: 1, justifyContent: 'center' }}>
-            <Text variant="labelMedium" style={{ textAlign: 'center' }}>
-              {t('metrics.chart-no-data')}
-            </Text>
-          </View>
+          <Text variant="labelMedium" style={{ textAlign: 'center', margin: 'auto' }}>
+            {t('metrics.chart-no-data')}
+          </Text>
         )}
       </Card.Content>
     </Card>

diff --git a/www/js/metrics/DailyActiveMinutesCard.tsx b/www/js/metrics/DailyActiveMinutesCard.tsx
@@ -56,11 +56,9 @@ const DailyActiveMinutesCard = ({ userMetrics }: Props) => {
             getColorForLabel={(l) => getBaseModeByText(l, labelOptions).color}
           />
         ) : (
-          <View style={{ flex: 1, justifyContent: 'center' }}>
-            <Text variant="labelMedium" style={{ textAlign: 'center' }}>
-              {t('metrics.chart-no-data')}
-            </Text>
-          </View>
+          <Text variant="labelMedium" style={{ textAlign: 'center', margin: 'auto' }}>
+            {t('metrics.chart-no-data')}
+          </Text>
         )}
       </Card.Content>
     </Card>

diff --git a/www/js/metrics/MetricsCard.tsx b/www/js/metrics/MetricsCard.tsx
@@ -117,7 +117,7 @@ const MetricsCard = ({
   };
 
   return (
-    <Card style={cardStyles.card}>
+    <Card style={cardStyles.card} contentStyle={{ flex: 1 }}>
       <Card.Title
         title={cardTitle}
         titleVariant="titleLarge"
@@ -149,41 +149,51 @@ const MetricsCard = ({
         style={cardStyles.title(colors)}
       />
       <Card.Content style={cardStyles.content}>
-        {viewMode == 'details' && (
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-            {Object.keys(metricSumValues).map((label, i) => (
-              <View style={{ width: '50%', paddingHorizontal: 8 }} key={i}>
-                <Text variant="titleSmall">{labelKeyToRichMode(label)}</Text>
-                <Text>{metricSumValues[label] + ' ' + axisUnits}</Text>
-              </View>
-            ))}
-          </View>
-        )}
-        {viewMode == 'graph' && (
-          <>
-            <BarChart
-              records={chartData}
-              axisTitle={axisUnits}
-              isHorizontal={true}
-              timeAxis={true}
-              stacked={graphIsStacked}
-              getColorForLabel={getColorForLabel}
-            />
-            <View
-              style={{
-                flexDirection: 'row',
-                height: 10,
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-              }}>
-              <Text variant="labelMedium">Stack bars:</Text>
-              <Checkbox
-                status={graphIsStacked ? 'checked' : 'unchecked'}
-                onPress={() => setGraphIsStacked(!graphIsStacked)}
-              />
+        {viewMode == 'details' &&
+          (Object.keys(metricSumValues).length ? (
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+              {Object.keys(metricSumValues).map((label, i) => (
+                <View style={{ width: '50%', paddingHorizontal: 8 }} key={i}>
+                  <Text variant="titleSmall">{labelKeyToRichMode(label)}</Text>
+                  <Text>{metricSumValues[label] + ' ' + axisUnits}</Text>
+                </View>
+              ))}
             </View>
-          </>
-        )}
+          ) : (
+            <Text variant="labelMedium" style={{ textAlign: 'center', margin: 'auto' }}>
+              {t('metrics.chart-no-data')}
+            </Text>
+          ))}
+        {viewMode == 'graph' &&
+          (chartData.length ? (
+            <>
+              <BarChart
+                records={chartData}
+                axisTitle={axisUnits}
+                isHorizontal={true}
+                timeAxis={true}
+                stacked={graphIsStacked}
+                getColorForLabel={getColorForLabel}
+              />
+              <View
+                style={{
+                  flexDirection: 'row',
+                  height: 10,
+                  alignItems: 'center',
+                  justifyContent: 'flex-end',
+                }}>
+                <Text variant="labelMedium">Stack bars:</Text>
+                <Checkbox
+                  status={graphIsStacked ? 'checked' : 'unchecked'}
+                  onPress={() => setGraphIsStacked(!graphIsStacked)}
+                />
+              </View>
+            </>
+          ) : (
+            <Text variant="labelMedium" style={{ textAlign: 'center', margin: 'auto' }}>
+              {t('metrics.chart-no-data')}
+            </Text>
+          ))}
       </Card.Content>
     </Card>
   );

diff --git a/www/js/metrics/SurveyComparisonCard.tsx b/www/js/metrics/SurveyComparisonCard.tsx
@@ -10,6 +10,10 @@ import { DayOfMetricData, MetricsData } from './metricsTypes';
 import { getUniqueLabelsForDays } from './metricsHelper';
 ChartJS.register(ArcElement, Tooltip, Legend);
 
+/**
+ * @description Calculates the percentage of 'responded' values across days of 'response_count' data.
+ * @returns Percentage as a whole number (0-100), or null if no data.
+ */
 function getResponsePctForDays(days: DayOfMetricData[]) {
   const surveys = getUniqueLabelsForDays(days);
   let acc = { responded: 0, not_responded: 0 };
@@ -19,7 +23,9 @@ function getResponsePctForDays(days: DayOfMetricData[]) {
       acc.not_responded += day[`survey_${survey}`]?.not_responded || 0;
     });
   });
-  return Math.round((acc.responded / (acc.responded + acc.not_responded)) * 100);
+  const total = acc.responded + acc.not_responded;
+  if (total === 0) return null;
+  return Math.round((acc.responded / total) * 100);
 }
 
 type Props = {
@@ -82,7 +88,7 @@ const SurveyComparisonCard = ({ userMetrics, aggMetrics }: Props) => {
           ) : (
             <Icon source="account-group" size={40} />
           )}
-          <Text>{rate}%</Text>
+          <Text>{rate === null ? t('metrics.no-data') : rate + '%'}</Text>
         </View>
         <Doughnut
           data={data}

diff --git a/www/js/metrics/SurveyTripCategoriesCard.tsx b/www/js/metrics/SurveyTripCategoriesCard.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Card } from 'react-native-paper';
+import { Text, Card } from 'react-native-paper';
 import { cardStyles } from './MetricsTab';
 import { useTranslation } from 'react-i18next';
 import BarChart from '../components/BarChart';
@@ -58,18 +58,26 @@ const SurveyTripCategoriesCard = ({ userMetrics, aggMetrics }: Props) => {
         style={cardStyles.title(colors)}
       />
       <Card.Content style={cardStyles.content}>
-        <BarChart
-          records={records}
-          axisTitle=""
-          isHorizontal={false}
-          timeAxis={false}
-          stacked={true}
-          getColorForLabel={(l) => (l === 'Response' ? colors.navy : colors.orange)}
-          getColorForChartEl={(l) => (l === 'Response' ? colors.navy : colors.orange)}
-          showLegend={false}
-          reverse={false}
-        />
-        <LabelPanel first={t('main-metrics.response')} second={t('main-metrics.no-response')} />
+        {records.length ? (
+          <>
+            <BarChart
+              records={records}
+              axisTitle=""
+              isHorizontal={false}
+              timeAxis={false}
+              stacked={true}
+              getColorForLabel={(l) => (l === 'Response' ? colors.navy : colors.orange)}
+              getColorForChartEl={(l) => (l === 'Response' ? colors.navy : colors.orange)}
+              showLegend={false}
+              reverse={false}
+            />
+            <LabelPanel first={t('main-metrics.response')} second={t('main-metrics.no-response')} />
+          </>
+        ) : (
+          <Text variant="labelMedium" style={{ textAlign: 'center', margin: 'auto' }}>
+            {t('metrics.chart-no-data')}
+          </Text>
+        )}
       </Card.Content>
     </Card>
   );

diff --git a/www/js/metrics/WeeklyActiveMinutesCard.tsx b/www/js/metrics/WeeklyActiveMinutesCard.tsx
@@ -76,11 +76,9 @@ const WeeklyActiveMinutesCard = ({ userMetrics }: Props) => {
             </Text>
           </View>
         ) : (
-          <View style={{ flex: 1, justifyContent: 'center' }}>
-            <Text variant="labelMedium" style={{ textAlign: 'center' }}>
-              {t('metrics.chart-no-data')}
-            </Text>
-          </View>
+          <Text variant="labelMedium" style={{ textAlign: 'center', margin: 'auto' }}>
+            {t('metrics.chart-no-data')}
+          </Text>
         )}
       </Card.Content>
     </Card>