From fabefacd8da4932c9a5e8b4aec33d196c290d33b Mon Sep 17 00:00:00 2001
From: hc <hc@email.ch>
Date: Thu, 12 Sep 2024 11:46:51 +0800
Subject: archive of tuffy and btcdashboard

---
 btcdashboard/App.js | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 btcdashboard/App.js

(limited to 'btcdashboard/App.js')

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;
-- 
cgit v1.2.3-70-g09d2