From 15e847760518db077c3a899448811fc2af0c7f82 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 8 Aug 2024 11:53:39 +0100 Subject: [PATCH] Modify chart-params style --- static/js/bitcoin-business-growth-chart.js | 131 --------------------- static/js/bitcoin-price.js | 21 ++-- static/js/chart-params.js | 35 ++++-- static/js/feerate-percentile.js | 5 +- static/js/hashrate.js | 23 ++-- static/js/miner-rewards.js | 32 +++-- 6 files changed, 54 insertions(+), 193 deletions(-) diff --git a/static/js/bitcoin-business-growth-chart.js b/static/js/bitcoin-business-growth-chart.js index 2b5a519..6f18213 100644 --- a/static/js/bitcoin-business-growth-chart.js +++ b/static/js/bitcoin-business-growth-chart.js @@ -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") -// }); -// } -// }}); -// }); -// diff --git a/static/js/bitcoin-price.js b/static/js/bitcoin-price.js index e437bee..51cb321 100644 --- a/static/js/bitcoin-price.js +++ b/static/js/bitcoin-price.js @@ -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: [ diff --git a/static/js/chart-params.js b/static/js/chart-params.js index 5ed8368..2b03f5e 100644 --- a/static/js/chart-params.js +++ b/static/js/chart-params.js @@ -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) { diff --git a/static/js/feerate-percentile.js b/static/js/feerate-percentile.js index e3a9dd9..d992394 100644 --- a/static/js/feerate-percentile.js +++ b/static/js/feerate-percentile.js @@ -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: { diff --git a/static/js/hashrate.js b/static/js/hashrate.js index 3f90066..271f61d 100644 --- a/static/js/hashrate.js +++ b/static/js/hashrate.js @@ -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); }, diff --git a/static/js/miner-rewards.js b/static/js/miner-rewards.js index 63de3e7..fac94b3 100644 --- a/static/js/miner-rewards.js +++ b/static/js/miner-rewards.js @@ -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), },