Chart UI fix

e-mission · Apr 25, 2024 · 2281c7e · 2281c7e
1 parent 18e99bb
commit 2281c7e
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 29 deletions.
diff --git a/www/js/appTheme.ts b/www/js/appTheme.ts
@@ -36,6 +36,7 @@ const AppTheme = {
     silver: '#d9d9d9',
     skyblue: '#7fcaea',
     navy: '#0077aa',
+    orange: '#f6a063',
   },
   roundness: 5,
 };

diff --git a/www/js/components/Chart.tsx b/www/js/components/Chart.tsx
@@ -31,8 +31,9 @@ export type Props = {
   isHorizontal?: boolean;
   timeAxis?: boolean;
   stacked?: boolean;
-  hideLegend?: boolean;
+  showLegend?: boolean;
   reverse?: boolean;
+  enableTooltip?: boolean;
 };
 const Chart = ({
   records,
@@ -45,8 +46,9 @@ const Chart = ({
   isHorizontal,
   timeAxis,
   stacked,
-  hideLegend = false,
+  showLegend = true,
   reverse = true,
+  enableTooltip = true,
 }: Props) => {
   const { colors } = useTheme();
   const [numVisibleDatasets, setNumVisibleDatasets] = useState(1);
@@ -201,7 +203,10 @@ const Chart = ({
           },
           plugins: {
             legend: {
-              display: hideLegend,
+              display: showLegend,
+            },
+            tooltip: {
+              enabled: enableTooltip,
             },
             ...(lineAnnotations?.length && {
               annotation: {

diff --git a/www/js/metrics/SurveyDoughnutCharts.tsx b/www/js/metrics/SurveyDoughnutCharts.tsx
@@ -1,32 +1,55 @@
 import React from 'react';
 import { View, Text } from 'react-native';
+import { Icon } 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';
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
+export const LabelPanel = ({ first, second }) => {
+  const { colors } = useAppTheme();
+
+  return (
+    <View style={styles.labelWrapper}>
+      <View style={styles.labelItem}>
+        <View style={{ backgroundColor: colors.navy, width: 20, height: 20 }} />
+        <Text>{first}</Text>
+      </View>
+      <View style={styles.labelItem}>
+        <View style={{ backgroundColor: colors.orange, width: 20, height: 20 }} />
+        <Text>{second}</Text>
+      </View>
+    </View>
+  );
+};
+
 const SurveyDoughnutCharts = () => {
   const { colors } = useAppTheme();
   const { t } = useTranslation();
   const myResonseRate = 68;
   const othersResponseRate = 41;
 
-  const renderDoughnutChart = (rate) => {
+  const renderDoughnutChart = (rate, chartColor, myResponse) => {
     const data = {
       datasets: [
         {
           data: [rate, 100 - rate],
-          backgroundColor: [colors.navy, colors.silver],
-          borderColor: [colors.navy, colors.silver],
+          backgroundColor: [chartColor, colors.silver],
+          borderColor: [chartColor, colors.silver],
           borderWidth: 1,
         },
       ],
     };
     return (
       <View style={{ position: 'relative' }}>
         <View style={styles.textWrapper}>
+          {myResponse ? (
+            <Icon source="account" size={40} />
+          ) : (
+            <Icon source="account-group" size={40} />
+          )}
           <Text>{rate}%</Text>
         </View>
         <Doughnut
@@ -53,9 +76,10 @@ const SurveyDoughnutCharts = () => {
     <View>
       <Text style={styles.chartTitle}>{t('main-metrics.survey-response-rate')}</Text>
       <View style={styles.chartWrapper}>
-        {renderDoughnutChart(myResonseRate)}
-        {renderDoughnutChart(othersResponseRate)}
+        {renderDoughnutChart(myResonseRate, colors.navy, true)}
+        {renderDoughnutChart(othersResponseRate, colors.orange, false)}
       </View>
+      <LabelPanel first={t('main-metrics.you')} second={t('main-metrics.others')} />
     </View>
   );
 };
@@ -71,6 +95,7 @@ const styles: any = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    marginBottom: 20,
   },
   textWrapper: {
     position: 'absolute',
@@ -80,6 +105,17 @@ const styles: any = {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  labelWrapper: {
+    alignSelf: 'center',
+    display: 'flex',
+    gap: 10,
+  },
+  labelItem: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
 };
 
 export default SurveyDoughnutCharts;
diff --git a/www/js/metrics/SurveyLeaderboardCard.tsx b/www/js/metrics/SurveyLeaderboardCard.tsx
@@ -14,19 +14,11 @@ const SurveyLeaderboardCard = () => {
   const [tab, setTab] = useState('leaderboard');
   const myLabel = '#3';
 
-  const getLeaderboardLabelColor = (l) => {
-    if (l === myLabel) {
-      return colors.skyblue;
-    } else {
-      return colors.silver;
-    }
-  };
-
   const renderBarChart = () => {
     const records = [
-      { label: '#1', x: 91, y: '#1: 🏆' },
-      { label: '#2', x: 72, y: '#2: 🥈' },
-      { label: '#3', x: 68, y: '#3: 🥉' },
+      { label: '#1', x: 91, y: '🏆 #1:' },
+      { label: '#2', x: 72, y: '🥈 #2:' },
+      { label: '#3', x: 68, y: '🥉 #3:' },
       { label: '#4', x: 57, y: '#4:' },
       { label: '#5', x: 50, y: '#5:' },
       { label: '#6', x: 40, y: '#6:' },
@@ -41,10 +33,11 @@ const SurveyLeaderboardCard = () => {
           isHorizontal={true}
           timeAxis={false}
           stacked={false}
-          getColorForLabel={(l) => getLeaderboardLabelColor(l)}
-          getColorForChartEl={(l) => getLeaderboardLabelColor(l)}
-          hideLegend={true}
+          getColorForLabel={(l) => (l === myLabel ? colors.skyblue : colors.silver)}
+          getColorForChartEl={(l) => (l === myLabel ? colors.skyblue : colors.silver)}
+          showLegend={false}
           reverse={false}
+          enableTooltip={false}
         />
         <View style={styles.statusTextWrapper}>
           <Text>{t('main-metrics.you-are-in')}</Text>

diff --git a/www/js/metrics/SurveyTripCategoriesCard.tsx b/www/js/metrics/SurveyTripCategoriesCard.tsx
@@ -1,17 +1,46 @@
 import React from 'react';
+import { View, Text } from 'react-native';
 import { Card } from 'react-native-paper';
 import { cardStyles } from './MetricsTab';
 import { useTranslation } from 'react-i18next';
 import BarChart from '../components/BarChart';
 import { useAppTheme } from '../appTheme';
+import { LabelPanel } from './SurveyDoughnutCharts';
 
 const SurveyTripCategoriesCard = () => {
   const { colors } = useAppTheme();
   const { t } = useTranslation();
   const records = [
-    { label: 'EV Roaming trip', x: 'EV Roaming trip', y: 91 },
-    { label: 'EV Return trip', x: 'EV Return trip', y: 72 },
-    { label: 'Gas Car trip', x: 'Gas Car trip', y: 68 },
+    {
+      label: 'Response',
+      x: 'EV Roaming trip',
+      y: 20,
+    },
+    {
+      label: 'No Response',
+      x: 'EV Roaming trip',
+      y: 20,
+    },
+    {
+      label: 'Response',
+      x: 'EV Return trip',
+      y: 30,
+    },
+    {
+      label: 'No Response',
+      x: 'EV Return trip',
+      y: 40,
+    },
+    {
+      label: 'Response',
+      x: 'Gas Car trip',
+      y: 50,
+    },
+    {
+      label: 'No Response',
+      x: 'Gas Car trip',
+      y: 10,
+    },
   ];
 
   return (
@@ -30,12 +59,13 @@ const SurveyTripCategoriesCard = () => {
           axisTitle=""
           isHorizontal={false}
           timeAxis={false}
-          stacked={false}
-          getColorForLabel={() => colors.navy}
-          getColorForChartEl={() => colors.navy}
-          hideLegend={true}
+          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')} />
       </Card.Content>
     </Card>
   );