|
|
@@ -9,6 +9,8 @@
|
|
|
|
|
|
export let code;
|
|
|
|
|
|
+ const BASE_URL = import.meta.env.VITE_STOCKS_HOST;
|
|
|
+
|
|
|
let chartCanvas;
|
|
|
let chartInstance;
|
|
|
let selectedRange = '5d';
|
|
|
@@ -22,8 +24,7 @@
|
|
|
|
|
|
async function fetchData(range) {
|
|
|
try {
|
|
|
- const endpoint = `https://stocks-be.lhamacorp.com/api/stocks/${code}/history?range=${range}`;
|
|
|
- const res = await getRequest(endpoint, {}, null);
|
|
|
+ const res = await getRequest(`${BASE_URL}/api/stocks/${code}/history?range=${range}`, {}, null);
|
|
|
if (!res.ok) {
|
|
|
console.error(`Failed to fetch price history: ${res.status}`);
|
|
|
return [];
|
|
|
@@ -84,6 +85,27 @@
|
|
|
legend: {
|
|
|
display: false
|
|
|
},
|
|
|
+ tooltip: {
|
|
|
+ callbacks: {
|
|
|
+ title: (context) => {
|
|
|
+ const idx = context[0].dataIndex;
|
|
|
+ const raw = data[idx];
|
|
|
+ const dt = new Date(raw.createdAt);
|
|
|
+ return dt.toLocaleString('en-GB', {
|
|
|
+ day: '2-digit',
|
|
|
+ month: '2-digit',
|
|
|
+ year: 'numeric',
|
|
|
+ hour: '2-digit',
|
|
|
+ minute: '2-digit',
|
|
|
+ second: '2-digit',
|
|
|
+ hour12: false
|
|
|
+ });
|
|
|
+ },
|
|
|
+ label: (context) => {
|
|
|
+ return `Price: ${context.parsed.y.toFixed(2)}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
datalabels: {
|
|
|
color: '#fff',
|
|
|
anchor: 'end',
|
|
|
@@ -95,6 +117,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -102,19 +125,32 @@
|
|
|
selectedRange = range;
|
|
|
isLoading = true;
|
|
|
|
|
|
- const history = await fetchData(range);
|
|
|
+ const [history, latestRes] = await Promise.all([
|
|
|
+ fetchData(range),
|
|
|
+ getRequest(`${BASE_URL}/api/stocks/${code}`, {}, null)
|
|
|
+ ]);
|
|
|
isLoading = false;
|
|
|
|
|
|
- if (history.length > 0) {
|
|
|
- const first = history[0].price;
|
|
|
- const lastEntry = history[history.length - 1];
|
|
|
+ let data = history;
|
|
|
+
|
|
|
+ if (latestRes?.ok) {
|
|
|
+ const latest = await latestRes.json();
|
|
|
+ const lastHist = history[history.length - 1];
|
|
|
+ if (new Date(latest.createdAt) > new Date(lastHist.createdAt)) {
|
|
|
+ data = [...history, latest];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.length > 0) {
|
|
|
+ const first = data[0].price;
|
|
|
+ const lastEntry = data[data.length - 1];
|
|
|
|
|
|
currentPrice = lastEntry.price;
|
|
|
currentCurrency = lastEntry.currency || '';
|
|
|
priceChange = first !== 0 ? ((lastEntry.price - first) / first) * 100 : null;
|
|
|
lastUpdated = new Date(lastEntry.createdAt);
|
|
|
|
|
|
- renderChart(history);
|
|
|
+ renderChart(data);
|
|
|
}
|
|
|
}
|
|
|
|