Modify chart-params style

This commit is contained in:
Sam 2024-08-08 11:53:39 +01:00
parent fd861d9bf4
commit 15e8477605
6 changed files with 54 additions and 193 deletions

View File

@ -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")
// });
// }
// }});
// });
//

View File

@ -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: [

View File

@ -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) {

View File

@ -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: {

View File

@ -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);
}, },

View File

@ -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),
}, },