Separate 'Survey comparison Card' and 'Leaderboard Card'

Survey Comparison Card: Data depends on date range. Survey Leaderboard Card: Data is accumulated. To prevent confusion for users, we separate the two cards and inform them that the leaderboard data is accumulated.
jiji14 · May 16, 2024 · d4b3f51 · d4b3f51
1 parent d68354e
commit d4b3f51
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 130 deletions.
diff --git a/www/i18n/en.json b/www/i18n/en.json
@@ -226,6 +226,7 @@
     "surveys": "Surveys",
     "leaderboard": "Leaderboard",
     "survey-response-rate": "Survey Response Rate (%)",
+    "survey-leaderboard-desc": "This data has been accumulated since ",
     "comparison": "Comparison",
     "you": "You",
     "others": "Others in group",

diff --git a/www/js/metrics/MetricsTab.tsx b/www/js/metrics/MetricsTab.tsx
@@ -24,6 +24,7 @@ import { isoDateRangeToTsRange, isoDatesDifference } from '../diary/timelineHelp
 import { metrics_summaries } from 'e-mission-common';
 import SurveyLeaderboardCard from './SurveyLeaderboardCard';
 import SurveyTripCategoriesCard from './SurveyTripCategoriesCard';
+import SurveyComparisonCard from './SurveyComparisonCard';
 
 // 2 weeks of data is needed in order to compare "past week" vs "previous week"
 const N_DAYS_TO_LOAD = 14; // 2 weeks
@@ -160,7 +161,6 @@ const MetricsTab = () => {
     timelineIsLoading,
     refreshTimeline,
     loadMoreDays,
-    lastUpdateMetricDateTime,
   } = useContext(TimelineContext);
 
   const [aggMetrics, setAggMetrics] = useState<MetricsData | undefined>(undefined);
@@ -246,6 +246,7 @@ const MetricsTab = () => {
     appConfig?.metrics?.phone_dashboard_ui?.summary_options?.metrics_list ?? DEFAULT_SUMMARY_LIST;
   const { width: windowWidth } = useWindowDimensions();
   const cardWidth = windowWidth * 0.88;
+  const studyStartDate = `${appConfig?.intro.start_month} / ${appConfig?.intro.start_year}`;
 
   return (
     <>
@@ -312,12 +313,20 @@ const MetricsTab = () => {
               unitFormatFn={getFormattedSpeed} /> */}
           </Carousel>
         )}
-        {DUMMY_SURVEY_METRIC && (
+        {sectionsToShow.includes('surveys') && (
           <Carousel cardWidth={cardWidth} cardMargin={cardMargin}>
-            <SurveyLeaderboardCard surveyMetric={DUMMY_SURVEY_METRIC} />
+            <SurveyComparisonCard surveyMetric={DUMMY_SURVEY_METRIC} />
             <SurveyTripCategoriesCard surveyTripCategoryMetric={DUMMY_SURVEY_METRIC.me?.details} />
           </Carousel>
         )}
+        {sectionsToShow.includes('engagement') && (
+          <Carousel cardWidth={cardWidth} cardMargin={cardMargin}>
+            <SurveyLeaderboardCard
+              surveyMetric={DUMMY_SURVEY_METRIC}
+              studyStartDate={studyStartDate}
+            />
+          </Carousel>
+        )}
       </ScrollView>
     </>
   );

diff --git a/www/js/metrics/SurveyDoughnutCharts.tsx → www/js/metrics/SurveyComparisonCard.tsx b/www/js/metrics/SurveyDoughnutCharts.tsx → www/js/metrics/SurveyComparisonCard.tsx
@@ -1,14 +1,22 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import { Icon } from 'react-native-paper';
+import { Icon, Card } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import { useAppTheme } from '../appTheme';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import { Doughnut } from 'react-chartjs-2';
-import { SurveyComparison } from './SurveyLeaderboardCard';
-
+import { cardStyles, SurveyMetric } from './MetricsTab';
 ChartJS.register(ArcElement, Tooltip, Legend);
 
+type Props = {
+  surveyMetric: SurveyMetric;
+};
+
+export type SurveyComparison = {
+  me: number;
+  others: number;
+};
+
 export const LabelPanel = ({ first, second }) => {
   const { colors } = useAppTheme();
 
@@ -26,13 +34,25 @@ export const LabelPanel = ({ first, second }) => {
   );
 };
 
-type Props = {
-  surveyComparison : SurveyComparison
-}
-
-const SurveyDoughnutCharts = ({surveyComparison} : Props) => {
+const SurveyComparisonCard = ({ surveyMetric }: Props) => {
   const { colors } = useAppTheme();
   const { t } = useTranslation();
+
+  const mySurveyMetric = surveyMetric.me.overview;
+  const othersSurveyMetric = surveyMetric.others.overview;
+  const mySurveyRate = Math.round(
+    (mySurveyMetric.answered / (mySurveyMetric.answered + mySurveyMetric.unanswered)) * 100,
+  );
+
+  const surveyComparison: SurveyComparison = {
+    me: mySurveyRate,
+    others: Math.round(
+      (othersSurveyMetric.answered /
+        (othersSurveyMetric.answered + othersSurveyMetric.unanswered)) *
+        100,
+    ),
+  };
+
   const renderDoughnutChart = (rate, chartColor, myResponse) => {
     const data = {
       datasets: [
@@ -56,8 +76,8 @@ const SurveyDoughnutCharts = ({surveyComparison} : Props) => {
         </View>
         <Doughnut
           data={data}
-          width={150}
-          height={150}
+          width={140}
+          height={140}
           options={{
             cutout: 50,
             plugins: {
@@ -75,14 +95,26 @@ const SurveyDoughnutCharts = ({surveyComparison} : Props) => {
   };
 
   return (
-    <View>
-      <Text style={styles.chartTitle}>{t('main-metrics.survey-response-rate')}</Text>
-      <View style={styles.chartWrapper}>
-        {renderDoughnutChart(surveyComparison.me, colors.navy, true)}
-        {renderDoughnutChart(surveyComparison.others, colors.orange, false)}
-      </View>
-      <LabelPanel first={t('main-metrics.you')} second={t('main-metrics.others')} />
-    </View>
+    <Card style={cardStyles.card} contentStyle={{ flex: 1 }}>
+      <Card.Title
+        title={t('main-metrics.surveys')}
+        titleVariant="titleLarge"
+        titleStyle={cardStyles.titleText(colors)}
+        subtitle={t('main-metrics.comparison')}
+        subtitleStyle={[cardStyles.titleText(colors), cardStyles.subtitleText]}
+        style={cardStyles.title(colors)}
+      />
+      <Card.Content style={cardStyles.content}>
+        <View>
+          <Text style={styles.chartTitle}>{t('main-metrics.survey-response-rate')}</Text>
+          <View style={styles.chartWrapper}>
+            {renderDoughnutChart(surveyComparison.me, colors.navy, true)}
+            {renderDoughnutChart(surveyComparison.others, colors.orange, false)}
+          </View>
+          <LabelPanel first={t('main-metrics.you')} second={t('main-metrics.others')} />
+        </View>
+      </Card.Content>
+    </Card>
   );
 };
 
@@ -91,18 +123,23 @@ const styles: any = {
     alignSelf: 'center',
     fontWeight: 'bold',
     fontSize: 14,
-    marginBottom: 20,
+    marginBottom: 10,
+  },
+  statusTextWrapper: {
+    alignSelf: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 16,
   },
   chartWrapper: {
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 20,
+    justifyContent: 'space-around',
   },
   textWrapper: {
     position: 'absolute',
-    width: 150,
-    height: 150,
+    width: 140,
+    height: 140,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -111,6 +148,7 @@ const styles: any = {
     alignSelf: 'center',
     display: 'flex',
     gap: 10,
+    marginTop: 10,
   },
   labelItem: {
     display: 'flex',
@@ -120,4 +158,4 @@ const styles: any = {
   },
 };
 
-export default SurveyDoughnutCharts;
+export default SurveyComparisonCard;