170 lines
4.1 KiB
JavaScript
170 lines
4.1 KiB
JavaScript
let dataArr = [];
|
|
const myChart = echarts.init(document.getElementById("chart"));
|
|
const filename = "final__miner_rewards.json";
|
|
const periods = [
|
|
"all time",
|
|
"last 7 days",
|
|
"last 28 days",
|
|
"last 365 days",
|
|
"last 2 years",
|
|
];
|
|
|
|
async function fetchDataForChart(selectedValue) {
|
|
try {
|
|
const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
|
|
const response = await fetch(apiEndpoint);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const dataArr = await response.json();
|
|
initEchart(dataArr);
|
|
} catch (error) {
|
|
console.error("Fetching data failed:", error);
|
|
}
|
|
}
|
|
|
|
function initEchart(dataArr) {
|
|
console.log(dataArr);
|
|
const option = {
|
|
backgroundColor: backgroundColor,
|
|
tooltip: {
|
|
...tooltip,
|
|
formatter: function (params) {
|
|
let colors = ["#ee6666", "#000000", "#b0da9d", "#8699d5"];
|
|
let colorSpan = (color) =>
|
|
'<span style="display:inline-block;margin-right:1px;border-radius:5px;width:9px;height:9px;background-color:' +
|
|
color +
|
|
'"></span>';
|
|
let tooltip = "<p>" + params[0].axisValue + "</p>";
|
|
params.reverse().forEach((item, index) => {
|
|
let color = colors[index % colors.length];
|
|
let labels =
|
|
"<p>" +
|
|
colorSpan(color) +
|
|
" " +
|
|
item.seriesName +
|
|
": " +
|
|
nFormatter(item.data, 3);
|
|
("</p>");
|
|
tooltip += labels;
|
|
});
|
|
|
|
return tooltip;
|
|
},
|
|
valueFormatter(value, index) {
|
|
return nFormatter(value, 3);
|
|
},
|
|
},
|
|
toolbox: toolboxParams,
|
|
xAxis: {
|
|
data: dataArr.map((row) => row.date),
|
|
axisTick: axisTick,
|
|
axisLabel: axisLabel,
|
|
axisLine: axisLine,
|
|
},
|
|
grid: grid,
|
|
dataZoom: dataZoom(0),
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "Rewards (USD)",
|
|
nameLocation: "middle",
|
|
nameGap: 30,
|
|
nameTextStyle: textStyleMain,
|
|
position: "left",
|
|
alignTicks: true,
|
|
axisTick: axisTick,
|
|
axisLine: axisLine,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
...axisLabel,
|
|
formatter(value, index) {
|
|
return nFormatter(value, 0);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
name: "Subsidy (BTC)",
|
|
nameLocation: "middle",
|
|
nameGap: 20,
|
|
nameTextStyle: {
|
|
fontSize: 12 * fontScale,
|
|
color: textColor,
|
|
},
|
|
axisTick: axisTick,
|
|
position: "right",
|
|
alignTicks: true,
|
|
axisLine: axisLine,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
fontSize: 12 * fontScale,
|
|
color: textColor,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "line",
|
|
name: "Subsidy (USD)",
|
|
stack: "Total",
|
|
areaStyle: {},
|
|
symbol: "none",
|
|
lineStyle: {
|
|
width: 0,
|
|
},
|
|
data: dataArr.map((row) => row.subsidy_usd),
|
|
},
|
|
{
|
|
type: "line",
|
|
name: "Fees (USD)",
|
|
stack: "Total",
|
|
areaStyle: {},
|
|
symbol: "none",
|
|
lineStyle: {
|
|
width: 0,
|
|
},
|
|
data: dataArr.map((row) => row.totalfee_usd),
|
|
},
|
|
{
|
|
type: "line",
|
|
name: "Total (USD)",
|
|
symbol: "none",
|
|
lineStyle: {
|
|
width: 1,
|
|
color: textColor,
|
|
},
|
|
data: dataArr.map((row) => row.total_reward_usd),
|
|
},
|
|
{
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
name: "Block Subsidy (BTC)",
|
|
symbol: "none",
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
data: dataArr.map((row) => row.block_subsidy),
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let periodIndex = 2;
|
|
periodDropdown(periods, periodIndex);
|
|
fetchDataForChart(periods[periodIndex]);
|
|
const selectElement = document.getElementById("select-period-dropdown");
|
|
|
|
selectElement.addEventListener("change", function (event) {
|
|
const selectedValue = event.target.value;
|
|
fetchDataForChart(selectedValue);
|
|
});
|
|
});
|