fix menu, price graph ticks

the-hideout · Dec 23, 2023 · 311f701 · 311f701
1 parent 1ae36cf
commit 311f701
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 25 deletions.
diff --git a/src/components/menu/MenuItem.jsx b/src/components/menu/MenuItem.jsx
@@ -74,7 +74,7 @@ function MenuItem(props) {
     }
 
     return (
-        <li class={props.className}>
+        <li className={props.className}>
             {getCheckbox()}
             {getIcon()}
             <Link to={props.to} onClick={handleClick}>

diff --git 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 (
         <div className="price-history-wrapper">
             <VictoryChart
                 height={height}
                 width={1280}
                 padding={{ top: 20, left: 15, right: 15, bottom: 30 }}
-                minDomain={{ y: min - min * 0.1 }}
+                minDomain={{ y: min - max * 0.1 }}
                 maxDomain={{ y: max + max * 0.1 }}
                 theme={VictoryTheme.material}
                 containerComponent={
                     <VictoryVoronoiContainer
-                        labels={({ datum }) => `${formatPrice(datum.y)}`}
+                        labels={({ datum }) => `${formatPrice(datum.y)}\n${new Date(datum.x).toLocaleTimeString(navigator.language, {hour: '2-digit', minute: '2-digit', hour12: false})}`}
                     />
                 }
             >
                 <VictoryAxis
-                    tickFormat={(dateParsed) => {
-                        // 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}
                 />
                 <VictoryAxis dependentAxis/>
                 <VictoryLine