Modify chart-params style
This commit is contained in:
parent
fd861d9bf4
commit
15e8477605
|
@ -96,134 +96,3 @@ document.addEventListener("reloadTable", () => {
|
||||||
jsonTable.removeEventListener("change", handleCheckboxChange);
|
jsonTable.removeEventListener("change", handleCheckboxChange);
|
||||||
jsonTable.addEventListener("change", handleCheckboxChange);
|
jsonTable.addEventListener("change", handleCheckboxChange);
|
||||||
});
|
});
|
||||||
// let checkedBoxes = [];
|
|
||||||
// let chartData = {};
|
|
||||||
// const apiEndpoint = {{ .Get "endpoint" }};
|
|
||||||
// const apiCategoryVariable = {{ .Get "apiCategoryVariable" }};
|
|
||||||
// let myChart;
|
|
||||||
// let chartDataMap = new Map();
|
|
||||||
//
|
|
||||||
// // Define base chart parameters
|
|
||||||
// const chartBaseConfig = {
|
|
||||||
// backgroundColor: backgroundColor,
|
|
||||||
// grid: grid,
|
|
||||||
// tooltip: {
|
|
||||||
// backgroundColor: tooltipBgColor,
|
|
||||||
// order: "seriesDesc",
|
|
||||||
// textStyle: textStyleMain,
|
|
||||||
// trigger: "axis",
|
|
||||||
// },
|
|
||||||
// toolbox: toolboxParams,
|
|
||||||
// xAxis: {
|
|
||||||
// axisTick: axisTick,
|
|
||||||
// axisLabel: axisLabel,
|
|
||||||
// axisLine: axisLine,
|
|
||||||
// type: "time",
|
|
||||||
// name: "Date",
|
|
||||||
// },
|
|
||||||
// yAxis: {
|
|
||||||
// axisTick: axisTick,
|
|
||||||
// splitLine: {
|
|
||||||
// show: false,
|
|
||||||
// },
|
|
||||||
// axisLabel: axisLabel,
|
|
||||||
// axisLine: axisLine,
|
|
||||||
// },
|
|
||||||
// series: [],
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// function fetchDataForChart(params) {
|
|
||||||
// return fetch(
|
|
||||||
// apiEndpoint+"&"+apiCategoryVariable+"="+params,
|
|
||||||
// )
|
|
||||||
// .then((response) => response.json())
|
|
||||||
// .then((data) => {
|
|
||||||
// // Transform data using reduce
|
|
||||||
// // so we end with an object where each element is
|
|
||||||
// // a separate country containing an array of
|
|
||||||
// // data
|
|
||||||
// const chartData = data.reduce((acc, item) => {
|
|
||||||
// const objectId = item.{{ .Get "objectCategoryId" | safeJS }};
|
|
||||||
// if (!acc[objectId]) {
|
|
||||||
// acc[objectId] = [];
|
|
||||||
// }
|
|
||||||
// acc[objectId].push([item.{{ .Get "plotXVariable" | safeJS }}, item.{{ .Get "plotYVariable" | safeJS }}]);
|
|
||||||
// return acc;
|
|
||||||
// }, {});
|
|
||||||
// return chartData;
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // Draw chart with data from chartData
|
|
||||||
// function updateChart() {
|
|
||||||
// for (let objectId in chartData) {
|
|
||||||
// chartDataMap.set(objectId, chartData[objectId]);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // To remove keys in chartDataMap
|
|
||||||
// chartDataMap.forEach((value, key) => {
|
|
||||||
// if (!chartData.hasOwnProperty(key)) {
|
|
||||||
// chartDataMap.delete(key);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// option = {
|
|
||||||
// ...chartBaseConfig,
|
|
||||||
//
|
|
||||||
// series: Array.from(chartDataMap.entries()).map(
|
|
||||||
// ([name, data]) => ({
|
|
||||||
// name,
|
|
||||||
// type: "line",
|
|
||||||
// data,
|
|
||||||
// showSymbol: false,
|
|
||||||
// }),
|
|
||||||
// ),
|
|
||||||
// };
|
|
||||||
// myChart.setOption(option, true);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // Listen for reloadTable event
|
|
||||||
// document
|
|
||||||
// .getElementById("jsonTableContainer")
|
|
||||||
// .addEventListener("reloadTable", (event) => {
|
|
||||||
// myChart = echarts.init(document.getElementById("chart"));
|
|
||||||
// console.log("table reloaded")
|
|
||||||
//
|
|
||||||
// // Get initial checkedBoxes when table loaded
|
|
||||||
// // and cast to string for passing to API
|
|
||||||
// let checkedBoxes = Array.from(
|
|
||||||
// document.querySelectorAll(
|
|
||||||
// '#jsonTableContainer input[type="checkbox"]:checked',
|
|
||||||
// ),
|
|
||||||
// ).map((checkbox) => checkbox.id);
|
|
||||||
//
|
|
||||||
// let str = checkedBoxes.join(",");
|
|
||||||
// fetchDataForChart(str).then((initialData) => {
|
|
||||||
// chartData = initialData;
|
|
||||||
// updateChart();
|
|
||||||
// });
|
|
||||||
// console.log(str)
|
|
||||||
//
|
|
||||||
// // Listen for checkbox events in the table
|
|
||||||
// document
|
|
||||||
// .getElementById("jsonTableContainer")
|
|
||||||
// .addEventListener("change", (event) => {
|
|
||||||
// if (event.target.type === "checkbox") {
|
|
||||||
// boxChecked = event.target.checked
|
|
||||||
// boxId = event.target.id
|
|
||||||
// // Remove unchecked boxes
|
|
||||||
//
|
|
||||||
// if (boxChecked === false) {
|
|
||||||
// delete chartData[boxId];
|
|
||||||
// updateChart();
|
|
||||||
// console.log("Removed "+boxId+" from chartData")
|
|
||||||
// // Add checked boxes
|
|
||||||
// } else {
|
|
||||||
// fetchDataForChart(boxId).then((newData) => {
|
|
||||||
// chartData = { ...chartData, ...newData };
|
|
||||||
// updateChart();
|
|
||||||
// console.log("added "+boxId+" to chartData")
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }});
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
|
|
|
@ -18,12 +18,7 @@ async function fetchDataForChart() {
|
||||||
function initEchart(dataArr) {
|
function initEchart(dataArr) {
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
tooltip: {
|
tooltip: tooltip,
|
||||||
backgroundColor: tooltipBgColor,
|
|
||||||
order: "seriesDesc",
|
|
||||||
textStyle: textStyleMain,
|
|
||||||
trigger: "axis",
|
|
||||||
},
|
|
||||||
toolbox: toolboxParams,
|
toolbox: toolboxParams,
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: dataArr.map((row) => row.date),
|
data: dataArr.map((row) => row.date),
|
||||||
|
@ -37,12 +32,9 @@ function initEchart(dataArr) {
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "Price (USD)",
|
name: "Price (USD)",
|
||||||
|
nameGap: 30,
|
||||||
nameLocation: "middle",
|
nameLocation: "middle",
|
||||||
nameTextStyle: {
|
nameTextStyle: textStyleMain,
|
||||||
fontSize: 12 * fontScale,
|
|
||||||
padding: [0, 0, 40, 0],
|
|
||||||
color: "#eff1d6",
|
|
||||||
},
|
|
||||||
position: "left",
|
position: "left",
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
axisTick: axisTick,
|
axisTick: axisTick,
|
||||||
|
@ -50,7 +42,12 @@ function initEchart(dataArr) {
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisLabel: axisLabel,
|
axisLabel: {
|
||||||
|
...axisLabel,
|
||||||
|
formatter(value, index) {
|
||||||
|
return nFormatter(value, 0);
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
|
|
|
@ -1,7 +1,22 @@
|
||||||
const fontScale = 1;
|
const fontScale = 1;
|
||||||
|
|
||||||
const backgroundColor = "#181a1b";
|
const backgroundColor = "#f9f9f9";
|
||||||
const tooltipBgColor = "#00557f";
|
const tooltipBgColor = "#e7e7f5";
|
||||||
|
const textColor = "#373841";
|
||||||
|
|
||||||
|
const textStyleMain = {
|
||||||
|
fontFamily: "sans-serif",
|
||||||
|
fontSize: 12 * fontScale,
|
||||||
|
color: textColor,
|
||||||
|
};
|
||||||
|
|
||||||
|
const tooltip = {
|
||||||
|
borderColor: textColor,
|
||||||
|
backgroundColor: tooltipBgColor,
|
||||||
|
order: "seriesDesc",
|
||||||
|
textStyle: textStyleMain,
|
||||||
|
trigger: "axis",
|
||||||
|
};
|
||||||
|
|
||||||
const toolboxParams = {
|
const toolboxParams = {
|
||||||
itemSize: 8 * fontScale,
|
itemSize: 8 * fontScale,
|
||||||
|
@ -9,7 +24,7 @@ const toolboxParams = {
|
||||||
top: "-1%",
|
top: "-1%",
|
||||||
right: "20%",
|
right: "20%",
|
||||||
iconStyle: {
|
iconStyle: {
|
||||||
borderColor: "#eff1d6",
|
borderColor: textColor,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
},
|
},
|
||||||
feature: {
|
feature: {
|
||||||
|
@ -23,22 +38,16 @@ const toolboxParams = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const textStyleMain = {
|
|
||||||
fontFamily: "sans-serif",
|
|
||||||
fontSize: 12 * fontScale,
|
|
||||||
color: "#eff1d6",
|
|
||||||
};
|
|
||||||
|
|
||||||
const axisLabel = {
|
const axisLabel = {
|
||||||
fontSize: 12 * fontScale,
|
fontSize: 12 * fontScale,
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
margin: 10,
|
margin: 10,
|
||||||
};
|
};
|
||||||
|
|
||||||
const axisLine = {
|
const axisLine = {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
width: 2,
|
width: 2,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -55,13 +64,13 @@ const grid = {
|
||||||
const yaxisTextStyle = {
|
const yaxisTextStyle = {
|
||||||
fontSize: 12 * fontScale,
|
fontSize: 12 * fontScale,
|
||||||
padding: [0, 0, 10, 0],
|
padding: [0, 0, 10, 0],
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
};
|
};
|
||||||
|
|
||||||
const yaxisTextStyle2 = {
|
const yaxisTextStyle2 = {
|
||||||
fontSize: 12 * fontScale,
|
fontSize: 12 * fontScale,
|
||||||
padding: [50, 0, 0, 0],
|
padding: [50, 0, 0, 0],
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
};
|
};
|
||||||
|
|
||||||
function dataZoom(start = 90, end = 100, bottom = 15, height = 15) {
|
function dataZoom(start = 90, end = 100, bottom = 15, height = 15) {
|
||||||
|
|
|
@ -19,11 +19,8 @@ function initEchart(dataArr) {
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
...tooltip,
|
||||||
valueFormatter: (value) => `${value.toFixed(0)} sats/vByte`,
|
valueFormatter: (value) => `${value.toFixed(0)} sats/vByte`,
|
||||||
backgroundColor: tooltipBgColor,
|
|
||||||
order: "seriesDesc",
|
|
||||||
textStyle: textStyleMain,
|
|
||||||
trigger: "axis",
|
|
||||||
},
|
},
|
||||||
toolbox: toolboxParams,
|
toolbox: toolboxParams,
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
|
|
@ -19,13 +19,10 @@ function initEchart(dataArr) {
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
backgroundColor: tooltipBgColor,
|
...tooltip,
|
||||||
order: "seriesDesc",
|
|
||||||
valueFormatter(value, index) {
|
valueFormatter(value, index) {
|
||||||
return nFormatter(value, 0);
|
return nFormatter(value, 0);
|
||||||
},
|
},
|
||||||
textStyle: textStyleMain,
|
|
||||||
trigger: "axis",
|
|
||||||
},
|
},
|
||||||
toolbox: toolboxParams,
|
toolbox: toolboxParams,
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
@ -41,11 +38,8 @@ function initEchart(dataArr) {
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "Hashrate (H/s)",
|
name: "Hashrate (H/s)",
|
||||||
nameLocation: "middle",
|
nameLocation: "middle",
|
||||||
nameTextStyle: {
|
nameGap: 35,
|
||||||
fontSize: 12 * fontScale,
|
nameTextStyle: textStyleMain,
|
||||||
padding: [0, 0, 20, 0],
|
|
||||||
color: "#eff1d6",
|
|
||||||
},
|
|
||||||
position: "left",
|
position: "left",
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
axisTick: axisTick,
|
axisTick: axisTick,
|
||||||
|
@ -55,7 +49,7 @@ function initEchart(dataArr) {
|
||||||
axisLine: axisLine,
|
axisLine: axisLine,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12 * fontScale,
|
fontSize: 12 * fontScale,
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
formatter(value, index) {
|
formatter(value, index) {
|
||||||
return nFormatter(value, 0);
|
return nFormatter(value, 0);
|
||||||
},
|
},
|
||||||
|
@ -65,11 +59,8 @@ function initEchart(dataArr) {
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "Difficulty",
|
name: "Difficulty",
|
||||||
nameLocation: "middle",
|
nameLocation: "middle",
|
||||||
nameTextStyle: {
|
nameGap: 30,
|
||||||
fontSize: 12 * fontScale,
|
nameTextStyle: textStyleMain,
|
||||||
padding: [20, 0, 0, 0],
|
|
||||||
color: "#eff1d6",
|
|
||||||
},
|
|
||||||
axisTick: axisTick,
|
axisTick: axisTick,
|
||||||
position: "right",
|
position: "right",
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
|
@ -79,7 +70,7 @@ function initEchart(dataArr) {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12 * fontScale,
|
fontSize: 12 * fontScale,
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
formatter(value, index) {
|
formatter(value, index) {
|
||||||
return nFormatter(value, 0);
|
return nFormatter(value, 0);
|
||||||
},
|
},
|
||||||
|
|
|
@ -18,12 +18,7 @@ async function fetchDataForChart() {
|
||||||
function initEchart(dataArr) {
|
function initEchart(dataArr) {
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
tooltip: {
|
tooltip: tooltip,
|
||||||
backgroundColor: tooltipBgColor,
|
|
||||||
order: "seriesDesc",
|
|
||||||
textStyle: textStyleMain,
|
|
||||||
trigger: "axis",
|
|
||||||
},
|
|
||||||
toolbox: toolboxParams,
|
toolbox: toolboxParams,
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: dataArr.map((row) => row.date),
|
data: dataArr.map((row) => row.date),
|
||||||
|
@ -36,14 +31,10 @@ function initEchart(dataArr) {
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
nameGap: 50,
|
|
||||||
name: "Total Daily Rewards (USD)",
|
name: "Total Daily Rewards (USD)",
|
||||||
nameLocation: "middle",
|
nameLocation: "middle",
|
||||||
nameTextStyle: {
|
nameGap: 35,
|
||||||
fontSize: 12 * fontScale,
|
nameTextStyle: textStyleMain,
|
||||||
padding: [0, 0, 15, 0],
|
|
||||||
color: "#eff1d6",
|
|
||||||
},
|
|
||||||
position: "left",
|
position: "left",
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
axisTick: axisTick,
|
axisTick: axisTick,
|
||||||
|
@ -51,14 +42,21 @@ function initEchart(dataArr) {
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisLabel: axisLabel,
|
axisLabel: {
|
||||||
|
...axisLabel,
|
||||||
|
formatter(value, index) {
|
||||||
|
return nFormatter(value, 0);
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "Block Subsidy (BTC)",
|
name: "Block Subsidy (BTC)",
|
||||||
nameGap: -30,
|
|
||||||
nameLocation: "middle",
|
nameLocation: "middle",
|
||||||
nameTextStyle: yaxisTextStyle2,
|
nameTextStyle: {
|
||||||
|
fontSize: 12 * fontScale,
|
||||||
|
color: textColor,
|
||||||
|
},
|
||||||
axisTick: axisTick,
|
axisTick: axisTick,
|
||||||
position: "right",
|
position: "right",
|
||||||
alignTicks: true,
|
alignTicks: true,
|
||||||
|
@ -68,7 +66,7 @@ function initEchart(dataArr) {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12 * fontScale,
|
fontSize: 12 * fontScale,
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -104,7 +102,7 @@ function initEchart(dataArr) {
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 1,
|
width: 1,
|
||||||
color: "#eff1d6",
|
color: textColor,
|
||||||
},
|
},
|
||||||
data: dataArr.map((row) => row.total_reward_usd),
|
data: dataArr.map((row) => row.total_reward_usd),
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue