btcpayserver/BTCPayServer/Components/AppSales/Default.cshtml.js
d11n 641bdcff31
Histograms: Add Lightning data and API endpoints (#6217)
* Histograms: Add Lightning data and API endpoints

Ported over from the mobile-working-branch.

Adds histogram data for Lightning and exposes the wallet/lightning histogram data via the API. It also add a dashboard graph for the Lightning balance.

Caveat: The Lightning histogram is calculated by using the current channel balance and going backwards through as much invoices and transactions as we have. The "start" of the LN graph data might not be accurate though. That's because we don't track (and not even have) the LN onchain data. It is calculated by using the current channel balance and going backwards through as much invoices and transactions as we have. So the historic graph data for LN is basically a best effort of trying to reconstruct it with what we have: The LN channel transactions.

* More timeframes

* Refactoring: Remove redundant WalletHistogram types

* Remove store property from dashboard tile view models

* JS error fixes
2024-11-05 21:40:37 +09:00

61 lines
2.2 KiB
JavaScript

if (!window.appSales) {
window.appSales = {
dataLoaded (model) {
const id = `AppSales-${model.id}`;
const appId = model.id;
const period = model.period;
const baseUrl = model.dataUrl;
const data = model;
const render = (data, period) => {
document.querySelector(`#${id} .sales-count`).innerText = data.salesCount;
const series = data.series.map(s => s.salesCount);
const labels = data.series.map((s, i) => period === 'Month' ? (i % 5 === 0 ? s.label : '') : s.label);
const min = Math.min(...series);
const max = Math.max(...series);
const low = min === max ? 0 : Math.max(min - ((max - min) / 5), 0);
const tooltip = Chartist.plugins.tooltip2({
template: '<div class="chartist-tooltip-inner">Sales: {{value}}</div>',
offset: {
x: 0,
y: -8
}
});
new Chartist.Bar(`#${id} .ct-chart`, {
labels,
series: [series]
}, {
low,
axisY: { onlyInteger: true },
plugins: [tooltip]
});
};
render(data, period);
const update = async period => {
const url = `${baseUrl}/${period}`;
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
render(data, period);
}
};
function addEventListeners() {
delegate('change', `#${id} [name="AppSalesPeriod-${appId}"]`, async e => {
console.log("CHANGED", id)
const type = e.target.value;
await update(type);
});
}
if (document.readyState === "loading") {
window.addEventListener("DOMContentLoaded", addEventListeners);
} else {
addEventListeners();
}
}
};
}