-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add temperature change card in site dashboard
- Loading branch information
1 parent
a7dc5b4
commit 8743014
Showing
3 changed files
with
171 additions
and
8 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
152 changes: 152 additions & 0 deletions
152
packages/website/src/common/SiteDetails/TemperatureChange/index.tsx
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,152 @@ | ||
| import React from 'react'; | ||
| import { | ||
| Box, | ||
| Card, | ||
| CardContent, | ||
| CardHeader, | ||
| createStyles, | ||
| Grid, | ||
| Theme, | ||
| Typography, | ||
| WithStyles, | ||
| withStyles, | ||
| } from '@material-ui/core'; | ||
| import cls from 'classnames'; | ||
| import red from '@material-ui/core/colors/red'; | ||
| import UpdateInfo from 'common/UpdateInfo'; | ||
| import { colors } from 'layout/App/theme'; | ||
| import { DailyData, LatestDataASSofarValue } from 'store/Sites/types'; | ||
| import { toRelativeTime } from 'helpers/dates'; | ||
| import { ReactComponent as Caret } from 'assets/caret.svg'; | ||
| import { styles as incomingStyles } from '../styles'; | ||
|
|
||
| const TemperatureChangeComponent = ({ | ||
| data, | ||
| dailyData, | ||
| classes, | ||
| }: TemperatureChangeProps) => { | ||
| const { satelliteTemperature } = data; | ||
| const lastWeekData = dailyData.slice(0, 7); | ||
| const temperatureChange = | ||
| lastWeekData[0].satelliteTemperature - lastWeekData[6].satelliteTemperature; | ||
| const avgTemp = | ||
| lastWeekData.reduce((acc, curr) => acc + curr.satelliteTemperature, 0) / 7; | ||
|
|
||
| const increased = temperatureChange >= 0; | ||
| const relativeTime = | ||
| satelliteTemperature?.timestamp && | ||
| toRelativeTime(satelliteTemperature.timestamp); | ||
|
|
||
| return ( | ||
| <Card className={classes.root}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title={ | ||
| <Grid container> | ||
| <Grid item> | ||
| <Typography | ||
| className={classes.cardTitle} | ||
| color="textSecondary" | ||
| variant="h6" | ||
| > | ||
| 7-DAYS CHANGE | ||
| </Typography> | ||
| </Grid> | ||
| </Grid> | ||
| } | ||
| /> | ||
| <CardContent className={classes.content}> | ||
| <Box className={classes.cardContent}> | ||
| <Box | ||
| className={cls( | ||
| classes.tempContainer, | ||
| increased ? classes.tempIncreased : classes.tempDecreased, | ||
| )} | ||
| > | ||
| <Caret | ||
| className={cls(classes.icon, { [classes.rotate]: !increased })} | ||
| /> | ||
| <Typography variant="h1" className={classes.temperatureChange}> | ||
| {increased ? '+' : ''} | ||
| {temperatureChange.toFixed(1)}°C | ||
| </Typography> | ||
| </Box> | ||
| <Box> | ||
| <Typography | ||
| className={classes.temperature} | ||
| color="textSecondary" | ||
| variant="h4" | ||
| > | ||
| {avgTemp.toFixed(1)}°C | ||
| </Typography> | ||
| <Typography color="textSecondary" variant="h6"> | ||
| AVERAGE 7-DAYS TEMP | ||
| </Typography> | ||
| </Box> | ||
| </Box> | ||
| <UpdateInfo | ||
| relativeTime={relativeTime} | ||
| timeText="Last data received" | ||
| live | ||
| frequency="hourly" | ||
| /> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = (theme: Theme) => | ||
| createStyles({ | ||
| ...incomingStyles, | ||
| root: { | ||
| height: '100%', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| backgroundColor: colors.backgroundGray, | ||
| }, | ||
| content: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| flexGrow: 1, | ||
| padding: 0, | ||
| }, | ||
| cardContent: { | ||
| margin: 'auto', | ||
| }, | ||
| temperatureChange: { | ||
| fontWeight: 500, | ||
| }, | ||
| tempContainer: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| gap: theme.spacing(2), | ||
| marginBottom: theme.spacing(2), | ||
| }, | ||
| tempIncreased: { | ||
| color: red[500], | ||
| }, | ||
| tempDecreased: { | ||
| color: theme.palette.primary.main, | ||
| }, | ||
| icon: { | ||
| fill: 'currentColor', | ||
| fontSize: '52px', | ||
| }, | ||
| rotate: { | ||
| transform: 'rotate(180deg)', | ||
| }, | ||
| temperature: { | ||
| fontSize: 24, | ||
| fontWeight: 500, | ||
| }, | ||
| }); | ||
|
|
||
| interface IncomingTemperatureChangeProps { | ||
| data: LatestDataASSofarValue; | ||
| dailyData: DailyData[]; | ||
| } | ||
|
|
||
| type TemperatureChangeProps = WithStyles<typeof styles> & | ||
| IncomingTemperatureChangeProps; | ||
|
|
||
| export const TemperatureChange = withStyles(styles)(TemperatureChangeComponent); |
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