82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
|
|
function Ribbon() {
|
|
const [data, setData] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
const res = await axios.get("http://127.0.0.1:8000/api/scanner/ribbon");
|
|
setData(res.data || []);
|
|
setLoading(false);
|
|
} catch (err) {
|
|
console.error("Ribbon error:", err);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
const interval = setInterval(loadData, 100000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const openChart = (symbol) => {
|
|
window.open(`https://www.tradingview.com/chart/?symbol=NSE:${symbol}`, "_blank");
|
|
};
|
|
|
|
if (loading) return <div className="glass-card" style={{ textAlign: "center" }}>Loading Ribbon...</div>;
|
|
|
|
return (
|
|
<div className="glass-card animate-fade-in">
|
|
<h2 className="text-blue">📈 EMA Ribbon Strategy</h2>
|
|
<div className="data-table-container">
|
|
<table className="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Stock</th>
|
|
<th>Price</th>
|
|
<th>EMA High 5</th>
|
|
<th>EMA Low 5</th>
|
|
<th>EMA High 100</th>
|
|
<th>EMA Low 100</th>
|
|
<th>EMA Close 100</th>
|
|
<th>Signal</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(data || []).map((s, i) => (
|
|
<tr key={i}>
|
|
<td style={{ fontWeight: 600 }}>{s.symbol}</td>
|
|
<td>₹{s.price}</td>
|
|
<td>{s.ema_high_5}</td>
|
|
<td>{s.ema_low_5}</td>
|
|
<td>{s.ema_high_100}</td>
|
|
<td>{s.ema_low_100}</td>
|
|
<td className="text-blue">{s.ema_close_100}</td>
|
|
<td>
|
|
<span className={`badge ${
|
|
s.signal.includes("BUY") ? "badge-success" :
|
|
s.signal.includes("SELL") ? "badge-danger" : "badge-warning"
|
|
}`}>
|
|
{s.signal}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button className="action-btn" onClick={() => openChart(s.symbol)}>
|
|
Chart
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Ribbon;
|