107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
function createChart(
|
|
chart,
|
|
endpoint,
|
|
xAxisType,
|
|
scaleChart = false,
|
|
) {
|
|
async function fetchDataForChart(query) {
|
|
try {
|
|
const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
|
|
const response = await fetch(apiEndpoint);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const chartData = await response.json();
|
|
console.log(chartData)
|
|
updateChart(chartData);
|
|
} catch (error) {
|
|
console.error("Fetching data failed:", error);
|
|
}
|
|
}
|
|
|
|
function updateChart(chartData) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
...tooltip,
|
|
},
|
|
xAxis: {
|
|
type: xAxisType,
|
|
data: chartData.map((item) => item.date),
|
|
},
|
|
yAxis: {
|
|
scale: scaleChart,
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
stack: "value",
|
|
name: "10th",
|
|
barCategoryGap: "0%",
|
|
data: chartData.map((row) => row.feerate_10th),
|
|
},
|
|
{
|
|
type: "bar",
|
|
stack: "value",
|
|
name: "25th",
|
|
barCategoryGap: "0%",
|
|
data: chartData.map((row) => row.feerate_25th),
|
|
},
|
|
{
|
|
type: "bar",
|
|
stack: "value",
|
|
name: "50th",
|
|
barCategoryGap: "0%",
|
|
data: chartData.map((row) => row.feerate_50th),
|
|
},
|
|
{
|
|
type: "bar",
|
|
stack: "value",
|
|
name: "75th",
|
|
barCategoryGap: "0%",
|
|
data: chartData.map((row) => row.feerate_75th),
|
|
},
|
|
{
|
|
type: "bar",
|
|
stack: "value",
|
|
name: "90th",
|
|
barCategoryGap: "0%",
|
|
data: chartData.map((row) => row.feerate_90th),
|
|
},
|
|
],
|
|
};
|
|
chart.setOption(option, true);
|
|
}
|
|
|
|
// listen for filter events for this target
|
|
document.addEventListener("filterChange", function(event) {
|
|
eventDetail = event.detail;
|
|
if (eventDetail.filterActions.includes("refresh")) {
|
|
chartData = [];
|
|
query = queryConstructor();
|
|
fetchDataForChart(query);
|
|
updateChart(chartData);
|
|
}
|
|
});
|
|
|
|
let query = queryConstructor();
|
|
fetchDataForChart(query);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
chartData = [];
|
|
let chartDom = document.getElementById("feerate-percentiles-chart");
|
|
let myChart = echarts.init(chartDom);
|
|
|
|
const filterPeriods = {"7 day": 7, "28 day": 28, "365 day": 365, "2 years": 730, "5 years": 1826, "10 years": 3652, "all time": 10000};
|
|
dropDownFilter("days_ago_dropdown_filter", "days_ago", ["feerate-percentile-chart"], filterPeriods, "365 day")
|
|
|
|
createChart(
|
|
chart = myChart,
|
|
endpoint = "feerate_percentiles",
|
|
xAxisType = "category",
|
|
);
|
|
});
|
|
|