Skip to content

Commit

Permalink
Merge pull request #18 from daithihearn/loading-animation
Browse files Browse the repository at this point in the history
Loading animation
  • Loading branch information
daithihearn authored Jan 3, 2024
2 parents 8a75b4c + fbd0b2a commit 4bce8de
Show file tree
Hide file tree
Showing 7 changed files with 749 additions and 618 deletions.
30 changes: 15 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
{
"name": "daithi-dashboard",
"version": "2.8.3",
"version": "2.9.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.20",
"@mui/x-date-pickers": "^6.18.3",
"@testing-library/jest-dom": "^6.1.5",
"@mui/icons-material": "^5.15.3",
"@mui/material": "^5.15.3",
"@mui/x-date-pickers": "^6.18.6",
"@testing-library/jest-dom": "^6.2.0",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.11",
"@types/luxon": "^3.3.7",
"@types/node": "^20.10.4",
"@types/react": "^18.2.42",
"@types/react-dom": "^18.2.17",
"axios": "^1.6.2",
"@types/node": "^20.10.6",
"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.18",
"axios": "^1.6.3",
"chart.js": "^4.4.1",
"chartjs-adapter-moment": "^1.0.1",
"chartjs-plugin-annotation": "^3.0.1",
"luxon": "^3.4.4",
"mixpanel-browser": "^2.48.1",
"prettier": "^3.1.0",
"prettier": "^3.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typesafe-i18n": "^5.26.2",
"typescript": "^5.3.3",
"web-vitals": "^3.5.0"
"web-vitals": "^3.5.1"
},
"scripts": {
"start": "react-scripts start",
Expand Down Expand Up @@ -64,10 +64,10 @@
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-env": "^7.23.5",
"@babel/preset-env": "^7.23.7",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@types/mixpanel-browser": "^2.47.5",
"@types/mixpanel-browser": "^2.48.1",
"babel-jest": "^29.7.0"
}
}
2 changes: 1 addition & 1 deletion public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"sizes": "512x512"
}
],
"version": "2.8.3",
"version": "2.9.0",
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
Expand Down
110 changes: 110 additions & 0 deletions src/components/DailyInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Grid } from "@mui/material"
import Metric from "./Metric"
import { useI18nContext } from "i18n/i18n-react"
import { useDateTime } from "hooks/RegionalDateTime"
import { useMemo } from "react"
import { DailyPriceInfo } from "models/DailyPriceInfo"

export interface DailyInfoProps {
dailyInfo: DailyPriceInfo
thirtyDayAverage: number
}

const DailyInfo: React.FC<DailyInfoProps> = ({
dailyInfo,
thirtyDayAverage,
}) => {
const { LL } = useI18nContext()
const { now, fromISO } = useDateTime()

const isToday = useMemo(() => {
if (dailyInfo.prices.length === 0) return false
const currentDate = fromISO(dailyInfo.prices[0].dateTime)
return currentDate.hasSame(now(), "day")
}, [dailyInfo.prices, fromISO, now])

const currentPrice = useMemo(() => {
if (!isToday) return null
const currentDate = now()
return (
dailyInfo.prices.find(price => {
const priceDateTimeInMadrid = fromISO(price.dateTime)

return currentDate.hasSame(priceDateTimeInMadrid, "hour")
}) ?? null
)
}, [dailyInfo.prices, fromISO, isToday, now])

const minPrice = useMemo(() => {
if (dailyInfo.prices.length === 0) return null
const min = Math.min(...dailyInfo.prices.map(price => price.price))
return dailyInfo.prices.find(price => price.price === min) ?? null
}, [dailyInfo.prices])

const maxPrice = useMemo(() => {
if (dailyInfo.prices.length === 0) return null
const max = Math.max(...dailyInfo.prices.map(price => price.price))
return dailyInfo.prices.find(price => price.price === max) ?? null
}, [dailyInfo.prices])

return (
<Grid container spacing={3}>
{currentPrice && (
<Grid item xs={12} sm={6} md={3}>
<Metric
label={LL.CURRENT_PRICE({
currentTime: fromISO(
currentPrice.dateTime,
).toFormat("HH:mm"),
})}
value={currentPrice.price}
delta={
currentPrice
? thirtyDayAverage - currentPrice.price
: 0
}
/>
</Grid>
)}

<Grid item xs={12} sm={6} md={3}>
{minPrice && (
<Metric
label={LL.MIN_PRICE({
minPrice: minPrice
? fromISO(minPrice.dateTime).toFormat("HH:mm")
: "",
})}
value={minPrice ? minPrice.price : 0}
delta={thirtyDayAverage - minPrice.price}
/>
)}
</Grid>
<Grid item xs={12} sm={6} md={3}>
{maxPrice && (
<Metric
label={LL.MAX_PRICE({
maxPrice: maxPrice
? fromISO(maxPrice.dateTime).toFormat("HH:mm")
: "",
})}
value={maxPrice ? maxPrice.price : 0}
delta={
thirtyDayAverage - (maxPrice ? maxPrice.price : 0)
}
/>
)}
</Grid>
<Grid item xs={12} sm={6} md={3}>
{thirtyDayAverage && (
<Metric
label={LL.THIRTY_DAY_AVG()}
value={thirtyDayAverage}
/>
)}
</Grid>
</Grid>
)
}

export default DailyInfo
43 changes: 43 additions & 0 deletions src/components/WithLoading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react"
import { CircularProgress, Box } from "@mui/material"
import { useTheme } from "@mui/material/styles"

interface Props {
isLoading: boolean
children: React.ReactNode
}

const WithLoading: React.FC<Props> = ({ isLoading, children }) => {
const theme = useTheme()

const backgroundColor = theme.palette.background.default

return (
<Box
position="relative"
width="100%" // Fill the width of the parent component
height="100%" // Fill the height of the parent component
>
{isLoading && (
<Box
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
display="flex"
justifyContent="center"
alignItems="center"
bgcolor={backgroundColor} // Set background color from theme
style={{ opacity: 0.8 }} // Optional: Add transparency
>
<CircularProgress />
</Box>
)}

{children}
</Box>
)
}

export default WithLoading
Loading

0 comments on commit 4bce8de

Please sign in to comment.