-
Notifications
You must be signed in to change notification settings - Fork 114
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
📊 Rewrite of the New Dashboard Tab #1018
Merged
shankari
merged 139 commits into
e-mission:onboarding_routing_sept_2023
from
JGreenlee:dashboard-rewrite
Sep 26, 2023
Merged
Changes from all commits
Commits
Show all changes
139 commits
Select commit
Hold shift + click to select a range
b9385e6
Initial commit, added chart
ctyrrellnrel 26fe4f9
Added two new components
ctyrrellnrel c05e071
Added view state to MetricsCard
ctyrrellnrel 011b858
Added button to switch between components
ctyrrellnrel e36ba87
Added button and styling to MetricsCard
ctyrrellnrel 4440e1d
Removing unnecessary code
ctyrrellnrel 5ca9754
Added MetricsCard module to metrics.js
ctyrrellnrel f3af351
Merge branch 'aria_and_fall_2023_rewrite' of https://github.com/e-mis…
JGreenlee cb4c65c
remove unneeded code from old PR
JGreenlee ef8ce3c
move MetricDetails and MetricsCard to js/metrics
JGreenlee 1bd3b62
use new MetricsTab instead of main-metrics
JGreenlee c24da18
new MetricsTab
JGreenlee 7473855
add typings for metric data
JGreenlee 8753162
reformat MetricsCard to work with new MetricsTab
JGreenlee 12d17ce
fill out MetricDetails
JGreenlee 52854c0
implement datepicker + agg metrics on new dashboard
JGreenlee 5ebced8
adjust padding in MetricsCard
JGreenlee f32609e
MetricsCard fix typing of Props
JGreenlee 470b4e0
add ActiveMinutesCard to new dashboard
JGreenlee f93ba1e
rename UserMetrics type to MetricsData
JGreenlee 6026918
add @types/react to devDependencies
JGreenlee eb60ad5
refactor & memoize seconds to minutes calculation
JGreenlee 18eafef
unify MetricDetails and MetricsCard
JGreenlee db06256
delete MetricDetails.tsx
JGreenlee 9f46973
Merge branch 'aria_and_fall_2023_rewrite' of https://github.com/e-mis…
JGreenlee cf4f0e6
generalize format functions in useImperialConfig
JGreenlee 964da4b
fix formatForDisplay
JGreenlee c417879
show units correctly on MetricsCards
JGreenlee 7a3a6c6
support aggregate metrics on MetricsCard
JGreenlee b04aab7
fix MetricsCard not always updating details view
JGreenlee b6dfb4f
fix vertical scrolling on new Dashboard tab
JGreenlee d0763cd
use i18n for ActiveMinutesCard
JGreenlee d074cab
update BarChart for categorical data & flat inputs
JGreenlee 6780dae
in MetricsCard, pass records to BarChart
JGreenlee 4e7b054
styling tweaks and refactoring
JGreenlee 8f8d229
add chart to ActiveMinutesCard
JGreenlee 4aa123a
begin Carbon Footprint card
db5c005
BarChart: support stacked bars
JGreenlee 23a479c
show date ranges for weeks on ActiveMinutesCard
JGreenlee c480d67
readable labels on new dashboard
JGreenlee 9e40252
fix axis units on MetricsCard
JGreenlee fde2283
refactor new dashboard into Carousel
JGreenlee 167e3d1
refactoring metrics card styles
JGreenlee 76ebb17
more user metrics
8972b51
add percent change to carbon card
9c8e884
rough draft carbon chart
8839613
comment out "average speed" card
JGreenlee 7643895
dashboard: initial load 15 days ago to yesterday
JGreenlee 35cd467
add carbon goal lines
0fa637d
move %change to Card Title
f4179f3
flip bar chart to horizonal
3d0c910
clean up CarbonFootprintCard
c93961b
support split-line labels in horizontal BarChart
9e8aebc
i18n for CarbonFootprintCard
5aad944
add group metrics to chart
e6370c0
adjust styling of ChangeIdicator
258721c
prevent double negative
8151d7f
fix time ticks
4c44a00
patches to % change
8cc6d7f
eliminate create range function
9b128b7
show certain/uncertain and goal lines
8fc1c65
make ToggleSwitch more generic
JGreenlee c468478
move ToggleSwitch to /js/components
JGreenlee 29a0ab1
match ToggleSwitch props to SegmentedButtonProps
JGreenlee d2a8dc5
revert extra functions in metricsHelper.ts
JGreenlee d9f478b
ActiveMinutesCard -> WeeklyActiveMinutesCard
JGreenlee 4613f80
describe active minutes at bottom of card
JGreenlee 8a605e0
add LineChart.tsx
JGreenlee 2aea2e5
add DailyActiveMinutesCard to MetricsTab
JGreenlee 691c206
BarChart: support positioning of lineAnnotations
JGreenlee 41ba903
add weekly minutes goal, fix lone "0"
JGreenlee 20b457a
allow gaps in daily active minutes line chart
JGreenlee 6504bae
Merge remote-tracking branch 'origin/dashboard-rewrite' into dashboar…
bcc1010
color meter chart
71adf57
darken the guideline lines
950b163
forgotten color import
09d4711
add footnote
a9b311a
refactor BarChart
JGreenlee d48d333
Merge branch 'label_dashboard_profile_sept_2023' into dashboard-rewrite
JGreenlee 0f4a4e9
add text to Carbon Card
15ed685
move carbon footprint text to dedicated card
1c3b532
shorten carbon chart labels
b377933
bars colored by mode
e2b6b99
remove extraneous commented code
JGreenlee 4143bf0
refactor makeColorMap
JGreenlee e0c7d82
refactor modeColors
JGreenlee 40a9b5e
slim the Carousel card margins
JGreenlee 96ee1c6
decrease Y axis font size on BarChart
JGreenlee 3335086
format CarbonTextCard as rows
JGreenlee 50c5292
fix warnings in MetricsCard
JGreenlee 3cb062a
remove colons from carbon categories
JGreenlee aad133e
style US decarbonization goals text as footnote
JGreenlee 3ef6860
add footnote for "Unlabeled" uncertainty
JGreenlee ac59d00
make Carousel cards slightly wider
JGreenlee 9976516
fix previous week bar value
e4cadd2
adjust color-by-mode on dashboard
JGreenlee 4c1e967
Merge branch 'label_dashboard_profile_sept_2023' of https://github.co…
JGreenlee 44d3185
refactor: rename BarChart to Chart
JGreenlee 25a5f5a
big refactor of BarChart & LineChart
JGreenlee 83aa958
add base mode colors to DailyActiveMinutesCard
JGreenlee 7f73823
add subtitles to all dashboard cards
JGreenlee ca8edbe
change "Co2" to "CO₂"
JGreenlee 6a353f8
fix name of CarbonTextCard
JGreenlee 62ea9f4
add ActiveMinutesTableCard
JGreenlee 17f401c
remove the old Dashboard tab
JGreenlee 8ebc390
implement refresh() on MetricsTab
JGreenlee 89e3d64
add CDC recommendations footnote
JGreenlee 06f7b2d
i18n + add footnote markers on CarbonTextCard
JGreenlee 72f6437
remove fake data that was used for testing
JGreenlee 9208ec0
dashboard: use rich mode text, not readable label
JGreenlee 7dbc343
remove old dashboard library nvd3
JGreenlee 7d2b9dc
make space for annotation at top of chart
JGreenlee 5fcc5d4
fix footprint calculations using baseModes
JGreenlee 7d0eb81
adjust ChangeIndicator colors and text
JGreenlee 92ad2ee
fix dateRange issue
JGreenlee a3b0c08
show Unlabeled as faint grey, last item in legend
JGreenlee b9e1416
re-order "Prev. week" before "Past week", refactor
JGreenlee 0ecfa58
tweak ChangeIndicator style
JGreenlee 54e6d8b
fix error sometimes if metrics is not defined yet
JGreenlee 907737b
add 'meter' gradients to carbon graph
JGreenlee a3264e2
adjust carbon meter gradient
JGreenlee 67111b8
refactor: remove darkenForBorder + fix
JGreenlee fe2dd55
fix segmentDaysByWeeks
JGreenlee f57603c
use custom labels
f9822c5
Merge branch 'dashboard-rewrite' of https://github.com/JGreenlee/e-mi…
388b5d7
carbon chart: fix border of green, 'low' emissions
JGreenlee 44753f6
add slight borderRadius to Charts
JGreenlee 9cad0ee
reorder goal lines + adjust colors
JGreenlee c2c656c
fix group text
dd126a7
only show metrics for whole weeks
de20d3b
"taxi" -> "worst case"
8f5fb89
remove calorie keys
edd8624
Merge remote-tracking branch 'upstream/label_dashboard_profile_sept_2…
ab26e18
Merge branch 'onboarding_routing_sept_2023' into dashboard-rewrite
JGreenlee da20511
Merge branch 'dashboard-rewrite' of https://github.com/JGreenlee/e-mi…
4cc97db
Merge upstream, resolved main.js
8c6bdb2
update comments about prev vs past week
752674b
not >= 7 day weeks, == 7 day weeks
bb4fdd0
update infinity behavior on changeIndicator
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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
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
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 |
|---|---|---|
| @@ -1,201 +1,27 @@ | ||
| import React from "react"; | ||
| import Chart, { Props as ChartProps } from "./Chart"; | ||
| import { useTheme } from "react-native-paper"; | ||
| import { getGradient } from "./charting"; | ||
|
|
||
| import React, { useRef, useState } from 'react'; | ||
| import { array, string, bool } from 'prop-types'; | ||
| import { angularize } from '../angular-react-helper'; | ||
| import { View } from 'react-native'; | ||
| import { useTheme } from 'react-native-paper'; | ||
| import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, TimeScale } from 'chart.js'; | ||
| import { Bar } from 'react-chartjs-2'; | ||
| import Annotation, { AnnotationOptions } from 'chartjs-plugin-annotation'; | ||
|
|
||
| Chart.register( | ||
| CategoryScale, | ||
| LinearScale, | ||
| TimeScale, | ||
| BarElement, | ||
| Title, | ||
| Tooltip, | ||
| Legend, | ||
| Annotation, | ||
| ); | ||
|
|
||
| const BarChart = ({ chartData, axisTitle, lineAnnotations=null, isHorizontal=false }) => { | ||
| type Props = Omit<ChartProps, 'type'> & { | ||
| meter?: {high: number, middle: number, dash_key: string}, | ||
| } | ||
| const BarChart = ({ meter, ...rest }: Props) => { | ||
|
|
||
| const { colors } = useTheme(); | ||
| const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1); | ||
|
|
||
| const barChartRef = useRef<Chart>(null); | ||
|
|
||
| const defaultPalette = [ | ||
| '#c95465', // red oklch(60% 0.15 14) | ||
| '#4a71b1', // blue oklch(55% 0.11 260) | ||
| '#d2824e', // orange oklch(68% 0.12 52) | ||
| '#856b5d', // brown oklch(55% 0.04 50) | ||
| '#59894f', // green oklch(58% 0.1 140) | ||
| '#e0cc55', // yellow oklch(84% 0.14 100) | ||
| '#b273ac', // purple oklch(64% 0.11 330) | ||
| '#f09da6', // pink oklch(78% 0.1 12) | ||
| '#b3aca8', // grey oklch(75% 0.01 55) | ||
| '#80afad', // teal oklch(72% 0.05 192) | ||
| ] | ||
|
|
||
| const indexAxis = isHorizontal ? 'y' : 'x'; | ||
|
|
||
| function getChartHeight() { | ||
| /* when horizontal charts have more data, they should get taller | ||
| so they don't look squished */ | ||
| if (isHorizontal) { | ||
| // 'ideal' chart height is based on the number of datasets and number of unique index values | ||
| const uniqueIndexVals = []; | ||
| chartData.forEach(e => e.records.forEach(r => { | ||
| if (!uniqueIndexVals.includes(r[indexAxis])) uniqueIndexVals.push(r[indexAxis]); | ||
| })); | ||
| const numIndexVals = uniqueIndexVals.length; | ||
| const idealChartHeight = numVisibleDatasets * numIndexVals * 8; | ||
|
|
||
| /* each index val should be at least 20px tall for visibility, | ||
| and the graph itself should be at least 250px tall */ | ||
| const minChartHeight = Math.max(numIndexVals * 20, 250); | ||
|
|
||
| // return whichever is greater | ||
| return { height: Math.max(idealChartHeight, minChartHeight) }; | ||
| if (meter) { | ||
| rest.getColorForChartEl = (chart, dataset, ctx, colorFor) => { | ||
| const darkenDegree = colorFor == 'border' ? 0.25 : 0; | ||
| const alpha = colorFor == 'border' ? 1 : 0; | ||
| return getGradient(chart, meter, dataset, ctx, alpha, darkenDegree); | ||
| } | ||
| // vertical charts will just match the parent container | ||
| return { height: '100%' }; | ||
| rest.borderWidth = 3; | ||
| } | ||
|
|
||
| return ( | ||
| <View style={[getChartHeight(), {padding: 12}]}> | ||
| <Bar ref={barChartRef} | ||
| data={{ | ||
| datasets: chartData.map((d, i) => ({ | ||
| label: d.label, | ||
| data: d.records, | ||
| // cycle through the default palette, repeat if necessary | ||
| backgroundColor: defaultPalette[i % defaultPalette.length], | ||
| })) | ||
| }} | ||
| options={{ | ||
| indexAxis: indexAxis, | ||
| responsive: true, | ||
| maintainAspectRatio: false, | ||
| resizeDelay: 1, | ||
| scales: { | ||
| ...(isHorizontal ? { | ||
| y: { | ||
| offset: true, | ||
| type: 'time', | ||
| adapters: { | ||
| date: { zone: 'utc' }, | ||
| }, | ||
| time: { | ||
| unit: 'day', | ||
| tooltipFormat: 'DDD', // Luxon "localized date with full month": e.g. August 6, 2014 | ||
| }, | ||
| beforeUpdate: (axis) => { | ||
| setNumVisibleDatasets(axis.chart.getVisibleDatasetCount()) | ||
| }, | ||
| reverse: true, | ||
| }, | ||
| x: { | ||
| title: { display: true, text: axisTitle }, | ||
| }, | ||
| } : { | ||
| x: { | ||
| offset: true, | ||
| type: 'time', | ||
| adapters: { | ||
| date: { zone: 'utc' }, | ||
| }, | ||
| time: { | ||
| unit: 'day', | ||
| tooltipFormat: 'DDD', // Luxon "localized date with full month": e.g. August 6, 2014 | ||
| }, | ||
| }, | ||
| y: { | ||
| title: { display: true, text: axisTitle }, | ||
| }, | ||
| }), | ||
| }, | ||
| plugins: { | ||
| ...(lineAnnotations?.length > 0 && { | ||
| annotation: { | ||
| annotations: lineAnnotations.map((a, i) => ({ | ||
| type: 'line', | ||
| label: { | ||
| display: true, | ||
| padding: { x: 3, y: 1 }, | ||
| borderRadius: 0, | ||
| backgroundColor: 'rgba(0,0,0,.7)', | ||
| color: 'rgba(255,255,255,1)', | ||
| font: { size: 10 }, | ||
| position: 'start', | ||
| content: a.label, | ||
| }, | ||
| ...(isHorizontal ? { xMin: a.value, xMax: a.value } | ||
| : { yMin: a.value, yMax: a.value }), | ||
| borderColor: colors.onBackground, | ||
| borderWidth: 2, | ||
| borderDash: [3, 3], | ||
| } satisfies AnnotationOptions)), | ||
| } | ||
| }), | ||
| } | ||
| }} /> | ||
| </View> | ||
| ) | ||
| <Chart type="bar" {...rest} /> | ||
| ); | ||
| } | ||
|
|
||
| BarChart.propTypes = { | ||
| chartData: array, | ||
| axisTitle: string, | ||
| lineAnnotations: array, | ||
| isHorizontal: bool, | ||
| }; | ||
|
|
||
| angularize(BarChart, 'BarChart', 'emission.main.barchart'); | ||
| export default BarChart; | ||
|
|
||
| // const sampleAnnotations = [ | ||
| // { value: 35, label: 'Target1' }, | ||
| // { value: 65, label: 'Target2' }, | ||
| // ]; | ||
|
|
||
| // const sampleChartData = [ | ||
| // { | ||
| // label: 'Primary', | ||
| // records: [ | ||
| // { x: moment('2023-06-20'), y: 20 }, | ||
| // { x: moment('2023-06-21'), y: 30 }, | ||
| // { x: moment('2023-06-23'), y: 80 }, | ||
| // { x: moment('2023-06-24'), y: 40 }, | ||
| // ], | ||
| // }, | ||
| // { | ||
| // label: 'Secondary', | ||
| // records: [ | ||
| // { x: moment('2023-06-21'), y: 10 }, | ||
| // { x: moment('2023-06-22'), y: 50 }, | ||
| // { x: moment('2023-06-23'), y: 30 }, | ||
| // { x: moment('2023-06-25'), y: 40 }, | ||
| // ], | ||
| // }, | ||
| // { | ||
| // label: 'Tertiary', | ||
| // records: [ | ||
| // { x: moment('2023-06-20'), y: 30 }, | ||
| // { x: moment('2023-06-22'), y: 40 }, | ||
| // { x: moment('2023-06-24'), y: 10 }, | ||
| // { x: moment('2023-06-25'), y: 60 }, | ||
| // ], | ||
| // }, | ||
| // { | ||
| // label: 'Quaternary', | ||
| // records: [ | ||
| // { x: moment('2023-06-22'), y: 10 }, | ||
| // { x: moment('2023-06-23'), y: 20 }, | ||
| // { x: moment('2023-06-24'), y: 30 }, | ||
| // { x: moment('2023-06-25'), y: 40 }, | ||
| // ], | ||
| // }, | ||
| // ]; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
woo! Will we be restoring the graph in the trip detail screen or adding new ones (using the new chart library) going forward?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The speed graph should be fairly easy to add because we made
LineChartin such a way that it can be easily re-used.If we want, we could display plenty of other interesting things there too.