forked from e-mission/e-mission-phone
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move carbon footprint text to dedicated card
e-mission/e-mission-docs#961 (comment) -> implementing this suggestion isolate the text to a dedicated card, and place the "meter" card and "text" card in a carousel, now we have three rows, each a carousel. also isolated data management functions shared across the two cards into `metricsHelper.ts` The two cards keeps information easily accessible to those using a screen reader, while maintaining focus on the "meter" card and not cluttering the screen
- Loading branch information
Abby Wheelis
committed
Sep 6, 2023
1 parent
0f4a4e9
commit 15ed685
Showing
4 changed files
with
262 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import React, { useMemo } from 'react'; | ||
| import { View } from 'react-native'; | ||
| import { Card, Text, useTheme} from 'react-native-paper'; | ||
| import { MetricsData } from './metricsTypes'; | ||
| import { cardStyles } from './MetricsTab'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { filterToRecentWeeks, formatDateRangeOfDays, parseDataFromMetrics, generateSummaryFromData, calculatePercentChange } from './metricsHelper'; | ||
| import { getAngularService } from '../angular-react-helper'; | ||
|
|
||
| type Props = { userMetrics: MetricsData, aggMetrics: MetricsData } | ||
| const DailyActiveMinutesCard = ({ userMetrics, aggMetrics }: Props) => { | ||
|
|
||
| const { colors } = useTheme(); | ||
| const { t } = useTranslation(); | ||
| const FootprintHelper = getAngularService("FootprintHelper"); | ||
|
|
||
| const userText = useMemo(() => { | ||
| if(userMetrics?.distance?.length > 0) { | ||
| //separate data into weeks | ||
| let thisWeekDistance = filterToRecentWeeks(userMetrics?.distance)[0]; | ||
| let lastWeekDistance = filterToRecentWeeks(userMetrics?.distance)[1]; | ||
|
|
||
| //formatted distance data from this week | ||
| let userThisWeekModeMap = parseDataFromMetrics(thisWeekDistance, 'user'); | ||
| let userThisWeekSummaryMap = generateSummaryFromData(userThisWeekModeMap, 'distance'); | ||
| let worstDistance = userThisWeekSummaryMap.reduce((prevDistance, currModeSummary) => prevDistance + currModeSummary.values, 0); | ||
|
|
||
| //formatted data from last week | ||
| let userLastWeekModeMap = {}; | ||
| let userLastWeekSummaryMap = {}; | ||
| if(lastWeekDistance) { | ||
| userLastWeekModeMap = parseDataFromMetrics(lastWeekDistance, 'user'); | ||
| userLastWeekSummaryMap = generateSummaryFromData(userLastWeekModeMap, 'distance'); | ||
| } | ||
|
|
||
| //setting up data to be displayed | ||
| let textList = []; | ||
|
|
||
| //calculate low-high and format range for past week | ||
| let userPastWeek = { | ||
| low: FootprintHelper.getFootprintForMetrics(userThisWeekSummaryMap, 0), | ||
| high: FootprintHelper.getFootprintForMetrics(userThisWeekSummaryMap, FootprintHelper.getHighestFootprint()), | ||
| }; | ||
| textList.push({label: `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(thisWeekDistance)})`, | ||
| value: (userPastWeek.high - userPastWeek.low)==0 ? Math.round(userPastWeek.low) : Math.round(userPastWeek.low) + " - " + Math.round(userPastWeek.high)}); | ||
|
|
||
| //calculate low-high and format range for prev week, if exists | ||
| if(userLastWeekSummaryMap[0]) { | ||
| let userPrevWeek = { | ||
| low: FootprintHelper.getFootprintForMetrics(userLastWeekSummaryMap, 0), | ||
| high: FootprintHelper.getFootprintForMetrics(userLastWeekSummaryMap, FootprintHelper.getHighestFootprint()) | ||
| }; | ||
| textList.push({label: `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(lastWeekDistance)})`, | ||
| value: (userPrevWeek.high - userPrevWeek.low)==0 ? Math.round(userPrevWeek.low) : Math.round(userPrevWeek.low) + " - " + Math.round(userPrevWeek.high)}); | ||
| } | ||
|
|
||
| //calculate worst-case carbon footprint | ||
| let worstCarbon = FootprintHelper.getHighestFootprintForDistance(worstDistance); | ||
| textList.push({label:t('main-metrics.worst-case'), value: Math.round(worstCarbon)}); | ||
|
|
||
| return textList; | ||
| } | ||
| }, [userMetrics]); | ||
|
|
||
| const groupText = useMemo(() => { | ||
| if(aggMetrics?.distance?.length > 0) | ||
| { | ||
| //separate data into weeks | ||
| let thisWeekDistance = filterToRecentWeeks(aggMetrics?.distance)[0]; | ||
|
|
||
| let aggThisWeekModeMap = parseDataFromMetrics(thisWeekDistance, "aggregate"); | ||
| let aggThisWeekSummary = generateSummaryFromData(aggThisWeekModeMap, "distance"); | ||
|
|
||
| // Issue 422: | ||
| // https://github.com/e-mission/e-mission-docs/issues/422 | ||
| let aggCarbonData = []; | ||
| for (var i in aggThisWeekSummary) { | ||
| aggCarbonData.push(aggThisWeekSummary[i]); | ||
| if (isNaN(aggCarbonData[i].values)) { | ||
| console.warn("WARNING in calculating groupCarbonRecords: value is NaN for mode " + aggCarbonData[i].key + ", changing to 0"); | ||
| aggCarbonData[i].values = 0; | ||
| } | ||
| } | ||
|
|
||
| let groupText = []; | ||
|
|
||
| let aggCarbon = { | ||
| low: FootprintHelper.getFootprintForMetrics(aggCarbonData, 0), | ||
| high: FootprintHelper.getFootprintForMetrics(aggCarbonData, FootprintHelper.getHighestFootprint()), | ||
| } | ||
| console.log("testing group past week", aggCarbon); | ||
| groupText.push({label: t('main-metrics.average'), | ||
| value: (aggCarbon.high - aggCarbon.low)==0 ? Math.round(aggCarbon.low) : Math.round(aggCarbon.low) + " - " + Math.round(aggCarbon.high)}); | ||
|
|
||
| return groupText; | ||
| } | ||
| }, [aggMetrics]); | ||
|
|
||
| const textEntries = useMemo(() => { | ||
| let tempText = [] | ||
| if(userText?.length){ | ||
| tempText = tempText.concat(userText); | ||
| } | ||
| if(groupText?.length) { | ||
| tempText = tempText.concat(groupText); | ||
| } | ||
| return tempText; | ||
| }, [userText, groupText]); | ||
|
|
||
| return ( | ||
| <Card style={cardStyles.card} | ||
| contentStyle={{flex: 1}}> | ||
| <Card.Title | ||
| title={t('main-metrics.footprint')} | ||
| titleVariant='titleLarge' | ||
| titleStyle={cardStyles.titleText(colors)} | ||
| titleNumberOfLines={2} | ||
| style={cardStyles.title(colors)} /> | ||
| <Card.Content style={cardStyles.content}> | ||
| { textEntries?.length > 0 && | ||
| <View style={{paddingHorizontal: 8, flexDirection: 'row', marginTop: 10, flexWrap: 'wrap' }}> | ||
| { Object.keys(textEntries).map((i) => | ||
| <View key={textEntries[i].label} style={{ width: '50%', paddingHorizontal: 8 }}> | ||
| <Text variant='titleSmall'>{textEntries[i].label}</Text> | ||
| <Text>{textEntries[i].value + ' ' + "kg Co2"}</Text> | ||
| </View> | ||
| )} | ||
| </View> | ||
| } | ||
| </Card.Content> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export default DailyActiveMinutesCard; |
Oops, something went wrong.