Improve prices chart

mike76-dev · Mar 28, 2024 · 436649b · 436649b
1 parent 71c4b1f
commit 436649b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/web/src/components/HostPrices/Controls/Controls.css b/web/src/components/HostPrices/Controls/Controls.css
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     position: absolute;
-    top: 3rem;
+    top: 0.8rem;
     right: 3.5rem;
 }
 

diff --git a/web/src/components/HostPrices/HostPrices.tsx b/web/src/components/HostPrices/HostPrices.tsx
@@ -201,7 +201,7 @@ const PriceChart = (props: PriceChartProps) => {
             fill: false,
             stepped: 'before',
             pointRadius: 0,
-            borderWidth: 1,
+            borderWidth: 2,
             order: 3
         })
         datasets.push({
@@ -213,7 +213,7 @@ const PriceChart = (props: PriceChartProps) => {
             fill: false,
             stepped: 'before',
             pointRadius: 0,
-            borderWidth: 1,
+            borderWidth: 2,
             order: 4
         })
         datasets.push({
@@ -225,7 +225,7 @@ const PriceChart = (props: PriceChartProps) => {
             fill: false,
             stepped: 'before',
             pointRadius: 0,
-            borderWidth: 1,
+            borderWidth: 2,
             order: 5
         })
         datasets.push({
@@ -237,12 +237,24 @@ const PriceChart = (props: PriceChartProps) => {
             fill: false,
             stepped: 'before',
             pointRadius: 0,
-            borderWidth: 1,
+            borderWidth: 2,
             order: 6
         })
         return { labels, datasets }
     }
 
+    const maxValues = (data: Dataset[]): { y: number, y1: number } => {
+        let y = 0
+        let y1 = 0
+        data.forEach(dataset => {
+            dataset.data.forEach(d => {
+                if (dataset.yAxisID === 'y' && d > y) y = d
+                if (dataset.yAxisID === 'y1' && d > y1) y1 = d
+            })
+        })
+        return { y, y1 }
+    }
+
     const chartRef = useRef<Chart | null>(null)
 
     const canvasCallback = (canvas: HTMLCanvasElement | null) => {
@@ -252,9 +264,11 @@ const PriceChart = (props: PriceChartProps) => {
             if (chartRef.current) {
                 chartRef.current.destroy()
             }
+            const data = formatData(props.data)
+            const { y, y1 } = maxValues(data.datasets as Dataset[])
             chartRef.current = new Chart(ctx, {
                 type: 'line',
-                data: formatData(props.data),
+                data: data,
                 options: {
                     responsive: true,
                     scales: {
@@ -273,7 +287,8 @@ const PriceChart = (props: PriceChartProps) => {
                             beginAtZero: true,
                             grid: {
                                 color: props.darkMode ? 'rgba(127, 127, 127, 0.1)': 'rgba(0, 0, 0, 0.1)'
-                            }
+                            },
+                            suggestedMax: y * 1.05
                         },
                         y1: {
                             title: {
@@ -285,7 +300,8 @@ const PriceChart = (props: PriceChartProps) => {
                             beginAtZero: true,
                             grid: {
                                 drawOnChartArea: false
-                            }
+                            },
+                            suggestedMax: y1
                         }
                     },
                     plugins: {