diff --git a/src/components/menu/MenuItem.jsx b/src/components/menu/MenuItem.jsx
index 936bca432..ef2728d22 100644
--- a/src/components/menu/MenuItem.jsx
+++ b/src/components/menu/MenuItem.jsx
@@ -74,7 +74,7 @@ function MenuItem(props) {
}
return (
-
+
{getCheckbox()}
{getIcon()}
diff --git a/src/components/price-graph/index.js b/src/components/price-graph/index.js
index dc33cedd5..3c63789bd 100644
--- a/src/components/price-graph/index.js
+++ b/src/components/price-graph/index.js
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
import {
VictoryChart,
VictoryLine,
@@ -33,6 +34,42 @@ function PriceGraph({ item, itemId }) {
}
}`,
);
+ const { dayTicks, max, min, avgDown, minDown } = useMemo(() => {
+ const returnValues = {
+ dayTicks: [],
+ max: 0,
+ min: 0,
+ avgDown: false,
+ minDown: false,
+ };
+ if (status !== 'success' || !data?.data?.historicalItemPrices|| data.data.historicalItemPrices.length < 2) {
+ return returnValues;
+ }
+ returnValues.dayTicks = data.data.historicalItemPrices.reduce((all, current) => {
+ const newTimestamp = new Date(Number(current.timestamp)).setHours(0, 0, 0, 0);
+ if (!all.some(currentTs => currentTs === newTimestamp)) {
+ all.push(newTimestamp);
+ }
+ return all;
+ }, []);
+
+ returnValues.max = data.data.historicalItemPrices.reduce((currMax, price) => {
+ return Math.max(currMax, price.price)
+ }, 0);
+
+ returnValues.min = data.data.historicalItemPrices.reduce((curMin, p) => {
+ if (p.priceMin < curMin) {
+ return p.priceMin;
+ }
+ return curMin;
+ }, Number.MAX_SAFE_INTEGER);
+
+ returnValues.avgDown = data.data.historicalItemPrices[0].price > data.data.historicalItemPrices[data.data.historicalItemPrices.length-1].price;
+ returnValues.minDown = data.data.historicalItemPrices[0].priceMin > data.data.historicalItemPrices[data.data.historicalItemPrices.length-1].priceMin;
+
+ return returnValues;
+ }, [status, data]);
+
let height = VictoryTheme.material.height;
if (window.innerWidth < 760) {
@@ -47,51 +84,35 @@ function PriceGraph({ item, itemId }) {
return t('No data');
}
- let max = 0;
-
- data.data.historicalItemPrices.forEach((price) => {
- if (price.price > max) {
- max = price.price;
- }
- });
-
- const min = data.data.historicalItemPrices.reduce((curMin, p) => {
- if (p.priceMin < curMin) {
- return p.priceMin;
- }
- return curMin;
- }, Number.MAX_SAFE_INTEGER);
-
- const avgDown = data.data.historicalItemPrices[0].price > data.data.historicalItemPrices[data.data.historicalItemPrices.length-1].price;
- const minDown = data.data.historicalItemPrices[0].priceMin > data.data.historicalItemPrices[data.data.historicalItemPrices.length-1].priceMin;
-
return (
`${formatPrice(datum.y)}`}
+ labels={({ datum }) => `${formatPrice(datum.y)}\n${new Date(datum.x).toLocaleTimeString(navigator.language, {hour: '2-digit', minute: '2-digit', hour12: false})}`}
/>
}
>
{
- // let relativeTime = getRelativeTimeAndUnit(dateParsed);
+ tickFormat={(timestamp) => {
+ // let relativeTime = getRelativeTimeAndUnit(timestamp);
//
// return t('{{val, relativetime}}', { val: relativeTime[0], range: relativeTime[1] })
-
- return t('{{val, datetime}}', { val: dateParsed,
+ const dateTime = new Date(timestamp);
+ //console.log(dateTime);
+ return t('{{val, datetime}}', { val: dateTime,
formatParams: {
val: { weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric' },
},
})
}}
+ tickValues={dayTicks}
/>