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.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) {
|
||||
const option = {
|
||||
backgroundColor: backgroundColor,
|
||||
tooltip: {
|
||||
backgroundColor: tooltipBgColor,
|
||||
order: "seriesDesc",
|
||||
textStyle: textStyleMain,
|
||||
trigger: "axis",
|
||||
},
|
||||
tooltip: tooltip,
|
||||
toolbox: toolboxParams,
|
||||
xAxis: {
|
||||
data: dataArr.map((row) => row.date),
|
||||
|
@ -37,12 +32,9 @@ function initEchart(dataArr) {
|
|||
{
|
||||
type: "value",
|
||||
name: "Price (USD)",
|
||||
nameGap: 30,
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
fontSize: 12 * fontScale,
|
||||
padding: [0, 0, 40, 0],
|
||||
color: "#eff1d6",
|
||||
},
|
||||
nameTextStyle: textStyleMain,
|
||||
position: "left",
|
||||
alignTicks: true,
|
||||
axisTick: axisTick,
|
||||
|
@ -50,7 +42,12 @@ function initEchart(dataArr) {
|
|||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: axisLabel,
|
||||
axisLabel: {
|
||||
...axisLabel,
|
||||
formatter(value, index) {
|
||||
return nFormatter(value, 0);
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
|
@ -1,7 +1,22 @@
|
|||
const fontScale = 1;
|
||||
|
||||
const backgroundColor = "#181a1b";
|
||||
const tooltipBgColor = "#00557f";
|
||||
const backgroundColor = "#f9f9f9";
|
||||
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 = {
|
||||
itemSize: 8 * fontScale,
|
||||
|
@ -9,7 +24,7 @@ const toolboxParams = {
|
|||
top: "-1%",
|
||||
right: "20%",
|
||||
iconStyle: {
|
||||
borderColor: "#eff1d6",
|
||||
borderColor: textColor,
|
||||
borderWidth: 2,
|
||||
},
|
||||
feature: {
|
||||
|
@ -23,22 +38,16 @@ const toolboxParams = {
|
|||
},
|
||||
};
|
||||
|
||||
const textStyleMain = {
|
||||
fontFamily: "sans-serif",
|
||||
fontSize: 12 * fontScale,
|
||||
color: "#eff1d6",
|
||||
};
|
||||
|
||||
const axisLabel = {
|
||||
fontSize: 12 * fontScale,
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
margin: 10,
|
||||
};
|
||||
|
||||
const axisLine = {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
width: 2,
|
||||
},
|
||||
};
|
||||
|
@ -55,13 +64,13 @@ const grid = {
|
|||
const yaxisTextStyle = {
|
||||
fontSize: 12 * fontScale,
|
||||
padding: [0, 0, 10, 0],
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
};
|
||||
|
||||
const yaxisTextStyle2 = {
|
||||
fontSize: 12 * fontScale,
|
||||
padding: [50, 0, 0, 0],
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
};
|
||||
|
||||
function dataZoom(start = 90, end = 100, bottom = 15, height = 15) {
|
||||
|
|
|
@ -19,11 +19,8 @@ function initEchart(dataArr) {
|
|||
const option = {
|
||||
backgroundColor: backgroundColor,
|
||||
tooltip: {
|
||||
...tooltip,
|
||||
valueFormatter: (value) => `${value.toFixed(0)} sats/vByte`,
|
||||
backgroundColor: tooltipBgColor,
|
||||
order: "seriesDesc",
|
||||
textStyle: textStyleMain,
|
||||
trigger: "axis",
|
||||
},
|
||||
toolbox: toolboxParams,
|
||||
xAxis: {
|
||||
|
|
|
@ -19,13 +19,10 @@ function initEchart(dataArr) {
|
|||
const option = {
|
||||
backgroundColor: backgroundColor,
|
||||
tooltip: {
|
||||
backgroundColor: tooltipBgColor,
|
||||
order: "seriesDesc",
|
||||
...tooltip,
|
||||
valueFormatter(value, index) {
|
||||
return nFormatter(value, 0);
|
||||
},
|
||||
textStyle: textStyleMain,
|
||||
trigger: "axis",
|
||||
},
|
||||
toolbox: toolboxParams,
|
||||
xAxis: {
|
||||
|
@ -41,11 +38,8 @@ function initEchart(dataArr) {
|
|||
type: "value",
|
||||
name: "Hashrate (H/s)",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
fontSize: 12 * fontScale,
|
||||
padding: [0, 0, 20, 0],
|
||||
color: "#eff1d6",
|
||||
},
|
||||
nameGap: 35,
|
||||
nameTextStyle: textStyleMain,
|
||||
position: "left",
|
||||
alignTicks: true,
|
||||
axisTick: axisTick,
|
||||
|
@ -55,7 +49,7 @@ function initEchart(dataArr) {
|
|||
axisLine: axisLine,
|
||||
axisLabel: {
|
||||
fontSize: 12 * fontScale,
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
formatter(value, index) {
|
||||
return nFormatter(value, 0);
|
||||
},
|
||||
|
@ -65,11 +59,8 @@ function initEchart(dataArr) {
|
|||
type: "value",
|
||||
name: "Difficulty",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
fontSize: 12 * fontScale,
|
||||
padding: [20, 0, 0, 0],
|
||||
color: "#eff1d6",
|
||||
},
|
||||
nameGap: 30,
|
||||
nameTextStyle: textStyleMain,
|
||||
axisTick: axisTick,
|
||||
position: "right",
|
||||
alignTicks: true,
|
||||
|
@ -79,7 +70,7 @@ function initEchart(dataArr) {
|
|||
},
|
||||
axisLabel: {
|
||||
fontSize: 12 * fontScale,
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
formatter(value, index) {
|
||||
return nFormatter(value, 0);
|
||||
},
|
||||
|
|
|
@ -18,12 +18,7 @@ async function fetchDataForChart() {
|
|||
function initEchart(dataArr) {
|
||||
const option = {
|
||||
backgroundColor: backgroundColor,
|
||||
tooltip: {
|
||||
backgroundColor: tooltipBgColor,
|
||||
order: "seriesDesc",
|
||||
textStyle: textStyleMain,
|
||||
trigger: "axis",
|
||||
},
|
||||
tooltip: tooltip,
|
||||
toolbox: toolboxParams,
|
||||
xAxis: {
|
||||
data: dataArr.map((row) => row.date),
|
||||
|
@ -36,14 +31,10 @@ function initEchart(dataArr) {
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
nameGap: 50,
|
||||
name: "Total Daily Rewards (USD)",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
fontSize: 12 * fontScale,
|
||||
padding: [0, 0, 15, 0],
|
||||
color: "#eff1d6",
|
||||
},
|
||||
nameGap: 35,
|
||||
nameTextStyle: textStyleMain,
|
||||
position: "left",
|
||||
alignTicks: true,
|
||||
axisTick: axisTick,
|
||||
|
@ -51,14 +42,21 @@ function initEchart(dataArr) {
|
|||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: axisLabel,
|
||||
axisLabel: {
|
||||
...axisLabel,
|
||||
formatter(value, index) {
|
||||
return nFormatter(value, 0);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "Block Subsidy (BTC)",
|
||||
nameGap: -30,
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: yaxisTextStyle2,
|
||||
nameTextStyle: {
|
||||
fontSize: 12 * fontScale,
|
||||
color: textColor,
|
||||
},
|
||||
axisTick: axisTick,
|
||||
position: "right",
|
||||
alignTicks: true,
|
||||
|
@ -68,7 +66,7 @@ function initEchart(dataArr) {
|
|||
},
|
||||
axisLabel: {
|
||||
fontSize: 12 * fontScale,
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
@ -104,7 +102,7 @@ function initEchart(dataArr) {
|
|||
symbol: "none",
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#eff1d6",
|
||||
color: textColor,
|
||||
},
|
||||
data: dataArr.map((row) => row.total_reward_usd),
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue