sam
/
baseddata.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
static/js/bitcoin-business-growth-chart.js
View File

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

21
static/js/bitcoin-price.js
View File

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

35
static/js/chart-params.js
View File

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

5
static/js/feerate-percentile.js
View File

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

23
static/js/hashrate.js
View File

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

32
static/js/miner-rewards.js
View File

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