From 0ed240bcc112a082e20b08bed1c26be228705c08 Mon Sep 17 00:00:00 2001
From: Kartikay <kartikay_2101ce32@iitp.ac.in>
Date: Mon, 11 Dec 2023 23:09:56 +0530
Subject: [PATCH] Fix >16 JSON algo

Signed-off-by: Kartikay <kartikay_2101ce32@iitp.ac.in>
---
 packages/site/src/components/Chart.tsx | 26 ++++++++++++++----------
 packages/site/src/pages/index.tsx      | 28 +++++++++++++-------------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/site/src/components/Chart.tsx b/packages/site/src/components/Chart.tsx
index f89a250..c2319e3 100644
--- a/packages/site/src/components/Chart.tsx
+++ b/packages/site/src/components/Chart.tsx
@@ -1,19 +1,23 @@
 // Chart.js
 import * as React from 'react';
 import { LineChart } from '@mui/x-charts/LineChart';
+import Box from '@mui/material/Box';
 
 export const Chart = ({ data }) => {
 
-  const xAxisData = Array.from({ length: 16 }, (_, index) => index + 1);
+    const xAxisData = Object.keys(data).map((key) => parseInt(key.replace('price_', '')));
 
-  const yAxisData = data.map((entry) => entry.usdValue);
-
-  return (
-    <LineChart
-      xAxis={[{ data: xAxisData }]}
-      series={[{ data: yAxisData }]}
-      width={500}
-      height={300}
-    />
-  );
+    const yAxisData = Object.values(data);
+  
+    return (
+        <Box sx={{ backgroundColor: 'white', p: 2, borderRadius: 8, borderColor: 'black', border: 2,  marginTop: '2 rem' }}>
+            <p>USD Price Chart of last 16 minutes</p>
+        <LineChart
+          xAxis={[{ data: xAxisData }]}
+          series={[{ data: yAxisData }]}
+          width={500}
+          height={300}
+        />
+      </Box>
+    );
 };
\ No newline at end of file
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
index e79fbd7..7ce519a 100644
--- a/packages/site/src/pages/index.tsx
+++ b/packages/site/src/pages/index.tsx
@@ -261,20 +261,20 @@ const Index = () => {
     return time;
   };
 
-  function shiftAndReplaceLast(jsonObj, newValue) {
-    const x = Object.values(jsonObj);
-    for(var i = 1; i < x.length; i++) {
-      x[i-1] = x[i];
-    }
-    
-    x[x.length-1] = newValue;
-    console.log(x);
-    console.log(x[x.length-3]);
-    const updatedJson = {};
-    x.forEach((value, index) => {
-      updatedJson[`price_${index}`] = value;
-    });
-    return updatedJson;
+  function shiftAndReplaceLast(jsonObject, newValue) {
+
+      const keys = Object.keys(jsonObject);
+
+      // Reverse cyclically shift the values
+      for (let i = 0; i < keys.length - 1; i++) {
+        jsonObject[keys[i]] = jsonObject[keys[i + 1]];
+      }
+
+      // Set the new value for the last key
+      jsonObject[keys[keys.length - 1]] = newValue;
+
+
+      return jsonObject;
   }
   let counter = 0; // Initialize counter to start from 0
   let newJSON ={}