Skip to content
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.

Sign up for GitHub

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

Update Dashboard UI #1002

Closed
wants to merge 7 commits into from
Closed

Update Dashboard UI #1002

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b9385e6
Initial commit, added chart
ctyrrellnrel Jul 12, 2023
26fe4f9
Added two new components
ctyrrellnrel Jul 12, 2023
c05e071
Added view state to MetricsCard
ctyrrellnrel Jul 12, 2023
011b858
Added button to switch between components
ctyrrellnrel Jul 12, 2023
e36ba87
Added button and styling to MetricsCard
ctyrrellnrel Jul 12, 2023
4440e1d
Removing unnecessary code
ctyrrellnrel Jul 13, 2023
5ca9754
Added MetricsCard module to metrics.js
ctyrrellnrel Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions www/js/components/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ Chart.register(
);

const BarChart = ({ chartData, axisTitle, lineAnnotations=null, isHorizontal=false }) => {

const { colors } = useTheme();
const [ numVisibleDatasets, setNumVisibleDatasets ] = useState(1);

const barChartRef = useRef<Chart>(null);

const defaultPalette = [
const defaultPalette = [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try to avoid committing needless changes like this, where you add a space or adjust indentation

I know this was probably on accident - just make sure you check over the diff of what you're committing before you do so

'#c95465', // red oklch(60% 0.15 14)
'#4a71b1', // blue oklch(55% 0.11 260)
'#d2824e', // orange oklch(68% 0.12 52)
Expand Down
87 changes: 87 additions & 0 deletions www/js/components/MetricDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm guessing this was copied over from BarChart. It doesn't need to be here though

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want to copy the contents of a file as a starting point for a new file, that's ok -- just make sure you remove the bits that aren't relevant.
we don't want unused code lying around

'#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 (
<View>

</View>
)
}

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 },
// ],
// },
// ];
122 changes: 122 additions & 0 deletions www/js/components/MetricsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@

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, Surface, SurfaceProps} from 'react-native-paper';
import BarChart from './BarChart';
import MetricsDetails from './MetricDetails';
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 (
<Card children={{}} style={{width:"90%", alignSelf:"center", height:"280px" }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't have to include children as a prop. I know VSCode probably yelled at you about it being missing.

As long as there are components nested inside you can ignore that warning. It's some issue with VSCode, Typescript, and React.

<Surface style={{backgroundColor: 'rgba(0, 136, 206, 1)', height: "60px"}}>
<Card.Title
titleStyle={{textAlign:"center", color:"white", fontSize:"20px"}}
title="My Distance"
right={state.detailsView ?
(()=><IconButton icon="chart-bar" mode="contained" onPress={()=> setState({detailsView : false})}/>
):
(
()=> <IconButton icon="abacus" mode="contained" onPress={()=> setState({detailsView : true})}/>
)}
/>
</Surface>


{state.detailsView ? (
<>
<Card.Content>
<MetricsDetails chartData={chartData}/>
</Card.Content>
</>

) : (
<>
<Card.Content>
<BarChart chartData={chartData} axisTitle={axisTitle} isHorizontal={true}/>
</Card.Content>
</>
)
}


</Card>
)
}


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 },
// ],
// },
// ];
18 changes: 1 addition & 17 deletions www/templates/main-metrics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,23 +133,7 @@ <h4 class="dashboard-headers" ng-i18next>{{'main-metrics.calories'}} </h4>
<ion-slide id="modes">
<div id="dashboard-bottom" class="card">
<h4 class="dashboard-headers" ng-i18next>{{'main-metrics.distance'}}</h4>
<div ng-if="summaryData.defaultSummary.distance.length == 0" style="margin-top: 20px;color: #008acf;font-weight: 700;" ng-i18next>{{'main-metrics.no-summary-data'}}</div>
<div class="row" ng-repeat="d in summaryData.defaultSummary.distance" ng-if="$index % 2 == 0" ng-init="dIndex = $index" style="padding-top: 5px !important;">
<div ng-repeat="i in [0,1]" ng-if="(dIndex + i)<summaryData.defaultSummary.distance.length" class="col-50" style="margin-bottom: 10px;">

<div class="metric-summary-left">
<i ng-class="'icon ' + modeIcon(summaryData.defaultSummary.distance[dIndex + i].key)" style="font-size: 30px !important; color: #008acf;"></i>
</div>
<div class="metric-summary-right">
<div class="metric-summary-title">
{{ summaryData.defaultSummary.distance[dIndex + i].key }}
</div>
<div class="metric-summary-content">
{{ formatDistance(summaryData.defaultSummary.distance[dIndex + i].values).slice(-1)[0] }}
</div>
</div>
</div>
</div>
<metrics-card chart-data="data.distance" axis-title="distanceOptions.chart.yAxis.axisLabel"></metrics-card>
</div>
</ion-slide>
<ion-slide id="modes">
Expand Down