Merge pull request #11 from lucianavlop/price-chart-enhancements

Simplifying logic on price chart

README.md

@@ -1,10 +1,13 @@
 ## Description
-A simple dashboard to display the PVPC electricity prices in Spain.
+
+A dashboard to display the PVPC electricity prices in Spain.
 
 ## Stack
-- ReactJS
-- Material-UI
-- Nginx
+
+- ReactJS
+- Material-UI
+- Nginx
 
 ## API
+
 Requires an instances on this [API](https://github.com/daithihearn/electricity-prices)

package.json

@@ -1,6 +1,6 @@
 {
  "name": "daithi-dashboard",
- "version": "0.1.0",
+ "version": "2.1.1",
  "private": true,
  "dependencies": {
  "@emotion/react": "^11.10.6",

public/manifest.json

@@ -1,6 +1,6 @@
 {
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "electricity-prices-dashboard",
+ "name": "A dashboard to display the PVPC electricity prices in Spain.",
  "icons": [
  {
  "src": "favicon.ico",
@@ -18,6 +18,7 @@
  "sizes": "512x512"
  }
  ],
+ "version": "2.1.1",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",

src/components/PriceChart.tsx

@@ -194,11 +194,7 @@ const DailyChart: React.FC<DailyChartProps> = ({
  }, [currentPriceLocation, theme])
 
  const cheapPeriods = useMemo(() => {
- if (!showCheapPeriod || prices.length <= 1)
- return [
- Array<null>(prices.length).fill(null),
- Array<null>(prices.length).fill(null),
- ]
+ if (!showCheapPeriod || prices.length <= 1) return [[], []]
 
  const cp = getTwoCheapestPeriods(prices, 3)
 
@@ -209,23 +205,10 @@ const DailyChart: React.FC<DailyChartProps> = ({
  }, [prices, showCheapPeriod])
 
  const expensivePeriod = useMemo(() => {
- if (!showExpensivePeriod) return Array<null>(prices.length).fill(null)
+ if (!showExpensivePeriod) return []
 
  const ep = getMostExpensivePeriod(prices, 3)
- return prices.map(p => {
- const priceHour = new Date(p.dateTime).getHours()
- // If the dateTime of item is contained in ep, return the price, else return null
- if (
- ep.find(epItem => {
- const cpHour = new Date(epItem.dateTime).getHours()
- return cpHour === priceHour || cpHour + 1 === priceHour
- })
- ) {
- return p.price
- } else {
- return null
- }
- })
+ return filterAndPadPrices(prices, ep)
  }, [prices, showExpensivePeriod])
 
  const averageDataset = useMemo(