From b9385e6e0deca7b5a1822bbbdb799764304db971 Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Tue, 11 Jul 2023 16:19:24 -0800 Subject: [PATCH 1/7] Initial commit, added chart - replaced normal details view of 'My distance' with chart - next steps - create button to switch between chart and details view in 'my distance' card - Figure out why all data is showing up unlabled - Allow the axis to switch easily - right now, setting isHorizontal doesn't completely switch data, only thedirection of the bars - would be nice to flip data axis and bar axis simultaneously --- www/js/components/BarChart.tsx | 2 +- www/templates/main-metrics.html | 20 +++----------------- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/www/js/components/BarChart.tsx b/www/js/components/BarChart.tsx index 6da3d2a2b..9d835f918 100644 --- a/www/js/components/BarChart.tsx +++ b/www/js/components/BarChart.tsx @@ -20,7 +20,7 @@ Chart.register( ); const BarChart = ({ chartData, axisTitle, lineAnnotations=null, isHorizontal=false }) => { - + const { colors } = useTheme(); const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1); diff --git a/www/templates/main-metrics.html b/www/templates/main-metrics.html index 40e731d91..e85f50795 100644 --- a/www/templates/main-metrics.html +++ b/www/templates/main-metrics.html @@ -133,23 +133,9 @@

{{'main-metrics.calories'}}

{{'main-metrics.distance'}}

-
{{'main-metrics.no-summary-data'}}
-
-
- -
- -
-
-
- {{ summaryData.defaultSummary.distance[dIndex + i].key }} -
-
- {{ formatDistance(summaryData.defaultSummary.distance[dIndex + i].values).slice(-1)[0] }} -
-
-
-
+ + +
From 26fe4f9fae365bab7345aa7224eb594c486cfba3 Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Tue, 11 Jul 2023 17:56:01 -0800 Subject: [PATCH 2/7] Added two new components - one (MetricDetails) is going to be a copy of the original metric details view - the next (MetricsCard) is going to be a container to have both the BarChart component, and the MetricDetails component - Will be a react component, rather than function, and will hold onto the state of whether or not the barchart or metricdetails will be showing - next steps - add a button to switch between the two views --- www/js/components/MetricDetails.tsx | 87 +++++++++++++++++++++++++++ www/js/components/MetricsCard.tsx | 91 +++++++++++++++++++++++++++++ www/templates/main-metrics.html | 4 +- 3 files changed, 179 insertions(+), 3 deletions(-) create mode 100644 www/js/components/MetricDetails.tsx create mode 100644 www/js/components/MetricsCard.tsx diff --git a/www/js/components/MetricDetails.tsx b/www/js/components/MetricDetails.tsx new file mode 100644 index 000000000..20107efea --- /dev/null +++ b/www/js/components/MetricDetails.tsx @@ -0,0 +1,87 @@ + +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'; + +const MetricsDetails = ({ chartData}) => { + + const { colors } = useTheme(); + const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1); + + 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) + ] + + + + return ( + + + + ) +} + +MetricsDetails.propTypes = { + chartData: array, + axisTitle: string, + lineAnnotations: array, + isHorizontal: bool, +}; + +angularize(MetricsDetails, 'MetricsDetails', 'emission.main.metricsdetails'); +export default MetricsDetails; + +// 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 }, +// ], +// }, +// ]; diff --git a/www/js/components/MetricsCard.tsx b/www/js/components/MetricsCard.tsx new file mode 100644 index 000000000..66d77cb68 --- /dev/null +++ b/www/js/components/MetricsCard.tsx @@ -0,0 +1,91 @@ + +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 , Card, CardProps} from 'react-native-paper'; +import BarChart from './BarChart'; +import MetricsDetails from './MetricDetails'; + +const MetricsCard = ({chartData, axisTitle}) => { + + const { colors } = useTheme(); + const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1); + + 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 details : bool = false; + return ( + + + {details ? ( + + ) : ( + + ) + } + + + ) +} + +MetricsCard.propTypes = { + chartData: array, +}; + +angularize(MetricsCard, 'MetricsCard', 'emission.main.metricscard'); +export default MetricsCard; + +// 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 }, +// ], +// }, +// ]; diff --git a/www/templates/main-metrics.html b/www/templates/main-metrics.html index e85f50795..ce96a91ff 100644 --- a/www/templates/main-metrics.html +++ b/www/templates/main-metrics.html @@ -133,9 +133,7 @@

{{'main-metrics.calories'}}

{{'main-metrics.distance'}}

- - - +
From c05e0718fc14de7a187ea78f9ac16b604de86b08 Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Tue, 11 Jul 2023 18:26:19 -0800 Subject: [PATCH 3/7] Added view state to MetricsCard - allows the card to keep track of whether or not it has a BarChart or MetricDetails child component - next step - Add button --- www/js/components/MetricsCard.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/www/js/components/MetricsCard.tsx b/www/js/components/MetricsCard.tsx index 66d77cb68..b0edc6ad5 100644 --- a/www/js/components/MetricsCard.tsx +++ b/www/js/components/MetricsCard.tsx @@ -1,5 +1,5 @@ -import React, { useRef, useState } from 'react'; +import React, { useRef, state, useState } from 'react'; import { array, string, bool } from 'prop-types'; import { angularize } from '../angular-react-helper'; import { View } from 'react-native'; @@ -7,9 +7,11 @@ import { useTheme , Card, CardProps} from 'react-native-paper'; import BarChart from './BarChart'; import MetricsDetails from './MetricDetails'; + const MetricsCard = ({chartData, axisTitle}) => { - + const { colors } = useTheme(); + const [state, setState] = useState({detailsView : false}) const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1); const defaultPalette = [ @@ -24,21 +26,23 @@ const MetricsCard = ({chartData, axisTitle}) => { '#b3aca8', // grey oklch(75% 0.01 55) '#80afad', // teal oklch(72% 0.05 192) ] - const details : bool = false; return ( - {details ? ( + + {state.detailsView ? ( ) : ( ) } + ) } + MetricsCard.propTypes = { chartData: array, }; From 011b858d1f488ebd367d30c233bf0999bafebdbd Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Tue, 11 Jul 2023 19:02:13 -0800 Subject: [PATCH 4/7] Added button to switch between components - next step - format and style button --- www/js/components/MetricsCard.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/www/js/components/MetricsCard.tsx b/www/js/components/MetricsCard.tsx index b0edc6ad5..35514b03f 100644 --- a/www/js/components/MetricsCard.tsx +++ b/www/js/components/MetricsCard.tsx @@ -3,7 +3,7 @@ import React, { useRef, state, useState } from 'react'; import { array, string, bool } from 'prop-types'; import { angularize } from '../angular-react-helper'; import { View } from 'react-native'; -import { useTheme , Card, CardProps} from 'react-native-paper'; +import { useTheme , Card, IconButton} from 'react-native-paper'; import BarChart from './BarChart'; import MetricsDetails from './MetricDetails'; @@ -28,15 +28,22 @@ const MetricsCard = ({chartData, axisTitle}) => { ] return ( - - + + {state.detailsView ? ( + + setState({detailsView : false})}/> + ) : ( + + + setState({detailsView : true})}/> + ) } - + ) From e36ba873cc44b35aae68716183c0adc7f4d84055 Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Wed, 12 Jul 2023 02:16:51 -0800 Subject: [PATCH 5/7] Added button and styling to MetricsCard - button allows switching between the BarChart and the MetricDetails card - button icon switches depending on the card represented --- www/js/components/BarChart.tsx | 2 +- www/js/components/MetricsCard.tsx | 46 ++++++++++++++++++++++--------- 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/www/js/components/BarChart.tsx b/www/js/components/BarChart.tsx index 9d835f918..764719ad6 100644 --- a/www/js/components/BarChart.tsx +++ b/www/js/components/BarChart.tsx @@ -26,7 +26,7 @@ const BarChart = ({ chartData, axisTitle, lineAnnotations=null, isHorizontal=fal const barChartRef = useRef(null); - const defaultPalette = [ + const defaultPalette = [ '#c95465', // red oklch(60% 0.15 14) '#4a71b1', // blue oklch(55% 0.11 260) '#d2824e', // orange oklch(68% 0.12 52) diff --git a/www/js/components/MetricsCard.tsx b/www/js/components/MetricsCard.tsx index 35514b03f..e14df49ec 100644 --- a/www/js/components/MetricsCard.tsx +++ b/www/js/components/MetricsCard.tsx @@ -3,9 +3,10 @@ import React, { useRef, state, useState } from 'react'; import { array, string, bool } from 'prop-types'; import { angularize } from '../angular-react-helper'; import { View } from 'react-native'; -import { useTheme , Card, IconButton} from 'react-native-paper'; +import { useTheme , Card, IconButton, Surface, SurfaceProps} from 'react-native-paper'; import BarChart from './BarChart'; import MetricsDetails from './MetricDetails'; +import { StyleSheet } from 'react-native'; const MetricsCard = ({chartData, axisTitle}) => { @@ -24,23 +25,37 @@ const MetricsCard = ({chartData, axisTitle}) => { '#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) + '#80afad', // teal oklch(72% 0.05 192) ] return ( - - + + + setState({detailsView : false})}/> + ): + ( + ()=> setState({detailsView : true})}/> + )} + /> + + {state.detailsView ? ( - - setState({detailsView : false})}/> - - + <> + + + + + ) : ( - - - setState({detailsView : true})}/> - - + <> + + + + ) } @@ -57,6 +72,11 @@ MetricsCard.propTypes = { angularize(MetricsCard, 'MetricsCard', 'emission.main.metricscard'); export default MetricsCard; +const cardStyles = StyleSheet.create({ + cardLabel: { + color: '#c95465' + } +}); // const sampleAnnotations = [ // { value: 35, label: 'Target1' }, // { value: 65, label: 'Target2' }, From 4440e1db3e5ef0a10cf64e70c292a884216c4cd7 Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Thu, 13 Jul 2023 02:52:19 -0800 Subject: [PATCH 6/7] Removing unnecessary code - removed children property from card - removed leftover code from copying from BarChart.tsx to MetricsCard and MetricDetails - Removed unecessary import statements --- www/js/components/MetricDetails.tsx | 54 ++------------------- www/js/components/MetricsCard.tsx | 75 ++--------------------------- 2 files changed, 9 insertions(+), 120 deletions(-) diff --git a/www/js/components/MetricDetails.tsx b/www/js/components/MetricDetails.tsx index 20107efea..6a195875f 100644 --- a/www/js/components/MetricDetails.tsx +++ b/www/js/components/MetricDetails.tsx @@ -3,7 +3,7 @@ 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 { useTheme, Card } from 'react-native-paper'; const MetricsDetails = ({ chartData}) => { @@ -27,61 +27,17 @@ const MetricsDetails = ({ chartData}) => { return ( - +
+ 25 + miles +
) } MetricsDetails.propTypes = { chartData: array, - axisTitle: string, - lineAnnotations: array, - isHorizontal: bool, }; angularize(MetricsDetails, 'MetricsDetails', 'emission.main.metricsdetails'); export default MetricsDetails; - -// 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 }, -// ], -// }, -// ]; diff --git a/www/js/components/MetricsCard.tsx b/www/js/components/MetricsCard.tsx index e14df49ec..ddd792235 100644 --- a/www/js/components/MetricsCard.tsx +++ b/www/js/components/MetricsCard.tsx @@ -1,9 +1,8 @@ -import React, { useRef, state, useState } from 'react'; -import { array, string, bool } from 'prop-types'; +import React, { useState } from 'react'; +import { array, } from 'prop-types'; import { angularize } from '../angular-react-helper'; -import { View } from 'react-native'; -import { useTheme , Card, IconButton, Surface, SurfaceProps} from 'react-native-paper'; +import { Card, IconButton, Surface} from 'react-native-paper'; import BarChart from './BarChart'; import MetricsDetails from './MetricDetails'; import { StyleSheet } from 'react-native'; @@ -11,24 +10,9 @@ import { StyleSheet } from 'react-native'; const MetricsCard = ({chartData, axisTitle}) => { - const { colors } = useTheme(); const [state, setState] = useState({detailsView : false}) - const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1); - - 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) - ] return ( - + { /> - {state.detailsView ? ( <> @@ -64,59 +47,9 @@ const MetricsCard = ({chartData, axisTitle}) => { ) } - MetricsCard.propTypes = { chartData: array, }; angularize(MetricsCard, 'MetricsCard', 'emission.main.metricscard'); export default MetricsCard; - -const cardStyles = StyleSheet.create({ - cardLabel: { - color: '#c95465' - } -}); -// 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 }, -// ], -// }, -// ]; From 5ca9754784a85c52f7ceeebc67cecad043afba08 Mon Sep 17 00:00:00 2001 From: ctyrrellnrel Date: Tue, 18 Jul 2023 16:57:19 -0800 Subject: [PATCH 7/7] Added MetricsCard module to metrics.js -- also switched main-metrics html so that only the MetricsCard element is held in the ion-slide element, without any extra divs or headers --- www/js/metrics.js | 3 ++- www/templates/main-metrics.html | 6 ++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/www/js/metrics.js b/www/js/metrics.js index ef1b26891..1e65b5bdd 100644 --- a/www/js/metrics.js +++ b/www/js/metrics.js @@ -3,7 +3,7 @@ import angular from 'angular'; import 'nvd3'; import BarChart from './components/BarChart'; - +import MetricsCard from './components/MetricsCard'; angular.module('emission.main.metrics',['emission.services', 'ionic-datepicker', 'emission.config.imperial', @@ -12,6 +12,7 @@ angular.module('emission.main.metrics',['emission.services', 'emission.stats.clientstats', 'emission.plugin.kvstore', 'emission.plugin.logger', + MetricsCard.module, BarChart.module]) .controller('MetricsCtrl', function($scope, $ionicActionSheet, $ionicLoading, diff --git a/www/templates/main-metrics.html b/www/templates/main-metrics.html index ce96a91ff..925f390f7 100644 --- a/www/templates/main-metrics.html +++ b/www/templates/main-metrics.html @@ -131,10 +131,8 @@

{{'main-metrics.calories'}}

-
-

{{'main-metrics.distance'}}

- -
+ +