Modify chart-params style

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

static/js/bitcoin-price.js

@@ -18,12 +18,7 @@ async function fetchDataForChart() {
 function initEchart(dataArr) {
   const option = {
     backgroundColor: backgroundColor,
-    tooltip: {
+    tooltip: tooltip,
-      backgroundColor: tooltipBgColor,
-      order: "seriesDesc",
-      textStyle: textStyleMain,
-      trigger: "axis",
-    },
     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: {
+        nameTextStyle: textStyleMain,
-          fontSize: 12 * fontScale,
-          padding: [0, 0, 40, 0],
-          color: "#eff1d6",
-        },
         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: [

static/js/chart-params.js

@@ -1,7 +1,22 @@
 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 = {
   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) {

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

static/js/hashrate.js

@@ -19,13 +19,10 @@ function initEchart(dataArr) {
   const option = {
     backgroundColor: backgroundColor,
     tooltip: {
-      backgroundColor: tooltipBgColor,
+      ...tooltip,
-      order: "seriesDesc",
       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: {
+        nameGap: 35,
-          fontSize: 12 * fontScale,
+        nameTextStyle: textStyleMain,
-          padding: [0, 0, 20, 0],
-          color: "#eff1d6",
-        },
         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: {
+        nameGap: 30,
-          fontSize: 12 * fontScale,
+        nameTextStyle: textStyleMain,
-          padding: [20, 0, 0, 0],
-          color: "#eff1d6",
-        },
         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);
           },

static/js/miner-rewards.js

@@ -18,12 +18,7 @@ async function fetchDataForChart() {
 function initEchart(dataArr) {
   const option = {
     backgroundColor: backgroundColor,
-    tooltip: {
+    tooltip: tooltip,
-      backgroundColor: tooltipBgColor,
-      order: "seriesDesc",
-      textStyle: textStyleMain,
-      trigger: "axis",
-    },
     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: {
+        nameGap: 35,
-          fontSize: 12 * fontScale,
+        nameTextStyle: textStyleMain,
-          padding: [0, 0, 15, 0],
-          color: "#eff1d6",
-        },
         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),
       },