archive of tuffy and btcdashboardHEADmain

1 files changed, 81 insertions, 0 deletions

diff --git a/btcdashboard/App.js b/btcdashboard/App.js
new file mode 100644
index 0000000..838ab4f
--- /dev/null
+++ b/btcdashboard/App.js
@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const App = () => {
+  const [prices, setPrices] = useState([]);
+  const [rawData, setRawData] = useState('');
+  const [error, setError] = useState(null);
+  
+  const testingString = "hiiii";
+
+  useEffect(() => {
+    const fetchPrices = async () => {
+      try {
+        console.log('Fetching prices...');
+        const response = await fetch('/api/prices', {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        console.log('Response status:', response.status);
+        console.log('Response headers:', response.headers);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        console.log('Fetched data:', data);
+        setPrices(data);
+        setRawData(JSON.stringify(data, null, 2));
+        setError(null);
+      } catch (error) {
+        console.error('Failed to fetch prices:', error);
+        setError(error.toString());
+        setRawData('');
+      }
+    };
+    fetchPrices();
+    const interval = setInterval(fetchPrices, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // prep data
+  const chartData = prices.map(item => {
+    const parsedItem = JSON.parse(item);
+    return {
+      price: parsedItem.price,
+      time: new Date(parsedItem.timestamp * 1000).toLocaleTimeString()
+    };
+  }).reverse(); // show oldest data first
+
+  return (
+    <div>
+      <h1>price</h1>
+      <p>test stuff: {testingString}</p>
+      {error && <p>Error: {error}</p>}
+      <pre>{rawData}</pre>
+      
+      <h2>Price Graph</h2>
+      <ResponsiveContainer width="100%" height={400}>
+        <LineChart
+          data={chartData}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="time" />
+          <YAxis domain={['auto', 'auto']} />
+          <Tooltip />
+          <Legend />
+          <Line type="monotone" dataKey="price" stroke="#8884d8" activeDot={{ r: 8 }} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default App;