Polish charts UI

Author: Folyd

src/routes/stats/+page.svelte

@@ -20,60 +20,61 @@
   /**
    * @type {number[]}
    */
-   let dateData = [];
+  let dateData = [];
 
   /**
    * @type {number[]}
    */
-   let hourData = [];
+  let hourData = [];
 
-   /**
-    * @type {number[]}
-    */
-   let yearList = [];
+  /**
+   * @type {number[]}
+   */
+  let yearList = [];
 
-   let currentYear = moment().year();
+  let currentYear = moment().year();
 
-   /**
-    * @type {{name:string; value: number}[]}
-    */
-   let topCratesData = [];
+  /**
+   * @type {{name:string; value: number}[]}
+   */
+  let topCratesData = [];
 
-   let searchTime = "the last year";
+  let searchTime = "the last year";
 
   /**
-   * 
+   *
    * @param {number} now
    * @param {number} yearAgo
    */
   async function getEchartData(now, yearAgo) {
-    const { weeksArr, dateArr, hourArr, topCratesArr } = await getHistogramEchartDatas(now, yearAgo);
+    const { weeksArr, dateArr, hourArr, topCratesArr } =
+      await getHistogramEchartDatas(now, yearAgo);
     weekData = weeksArr;
     dateData = dateArr;
     hourData = hourArr;
     topCratesData = topCratesArr;
     await renderCharts(now, yearAgo);
   }
 
-   /**
-    * 
-    * @param {number} y
-    */
-  function handleChangeYear(y){
+  /**
+   *
+   * @param {number} y
+   */
+  function handleChangeYear(y) {
     currentYear = y;
     searchTime = String(y);
     const year = moment(searchTime);
-    const now = year.endOf('year').valueOf();
-    const yearAgo = year.startOf('year').valueOf();
+    const now = year.endOf("year").valueOf();
+    const yearAgo = year.startOf("year").valueOf();
     getEchartData(now, yearAgo);
-  };
+  }
 
   onMount(async () => {
     const now = moment().valueOf();
     const yearAgo = moment().startOf("day").subtract(1, "year").valueOf();
     yearList = await getYearList(currentYear);
     getEchartData(now, yearAgo);
-  })
+  });
 </script>
 
 <link rel="stylesheet" href="/css/charts.css" />
@@ -126,6 +127,11 @@
 </div>
 <ul class="hidden md:block filter-list">
   {#each yearList as item}
-    <li class:selected={item === currentYear} on:click={() => handleChangeYear(item)}>{item}</li>
+    <li
+      class:selected={item === currentYear}
+      on:click={() => handleChangeYear(item)}
+    >
+      {item}
+    </li>
   {/each}
 </ul>

src/routes/stats/HistogramChart.svelte

@@ -3,6 +3,10 @@
   import { init } from "echarts";
   import { CHART_COLOR } from "./stats";
 
+  /**
+   * @type {string}
+   */
+  export let color = CHART_COLOR;
   /**
    * @type {number[]}
    */
@@ -16,7 +20,7 @@
   /**
    * @type {HTMLElement}
    */
-  let echartElement
+  let echartElement;
 
   /**
    * @type {any}
@@ -38,13 +42,14 @@
       },
     ],
     tooltip: {
-      show:true,
-      trigger: 'axis'
-    }
-  }
+      show: true,
+      trigger: "axis",
+    },
+  };
 
   $: {
-      elementChart && elementChart.setOption({
+    elementChart &&
+      elementChart.setOption({
         xAxis: {
           type: "category",
           data: labels,
@@ -53,15 +58,21 @@
           {
             data,
             type: "bar",
-          }
-        ]
+            itemStyle: {
+              borderRadius: [5, 5, 0, 0], // [topLeft, topRight, bottomRight, bottomLeft]
+            },
+          },
+        ],
       });
   }
 
   onMount(() => {
     elementChart = init(echartElement);
     elementChart.setOption(option);
-  })
+  });
 </script>
 
-<div class="relative h-[320px] w-[340px] md:w-[460px] m-auto" bind:this={echartElement}></div>
+<div
+  class="relative h-[320px] w-[340px] md:w-[460px] m-auto"
+  bind:this={echartElement}
+></div>

src/routes/stats/TopCratesChart.svelte

@@ -3,9 +3,9 @@
   import { init } from "echarts";
   import { CHART_COLOR, TOP_CRATE_LABEL } from "./stats";
 
-   /**
-    * @type {{name:string; value: number}[]}
-    */
+  /**
+   * @type {{name:string; value: number}[]}
+   */
   export let data = [];
 
   /**
@@ -20,50 +20,58 @@
   const option = {
     color: CHART_COLOR,
     xAxis: {
-      position: 'top',
+      position: "top",
     },
     yAxis: {
       type: "category",
       data: TOP_CRATE_LABEL,
       inverse: true,
-
     },
     series: [
       {
         data,
         type: "bar",
+        barWidth: '55%', // Adjust this value to make bars thinner
+        barGap: '100%', // Increase this value to create larger gaps
         label: {
           show: true,
-          color: '#000',
-          formatter:(/** @type {{ data: {name:string} }} */ params) => params.data.name,
+          color: "#000",
+          formatter: (/** @type {{ data: {name:string} }} */ params) =>
+            params.data.name,
           verticalAlign: "middle",
-          position: [10, '50%'],
+          position: [10, "50%"],
           fontSize: 14,
-        }
+        },
+        itemStyle: {
+          borderRadius: [0, 5, 5, 0], // [topLeft, topRight, bottomRight, bottomLeft]
+        },
       },
     ],
     tooltip: {
-      show:true,
-      trigger: 'axis'
-    }
-  }
+      show: true,
+      trigger: "axis",
+    },
+  };
 
   $: {
-    if(elementChart) {
+    if (elementChart) {
       elementChart.setOption({
         series: [
           {
             data,
-          }
-        ]
+          },
+        ],
       });
     }
   }
 
   onMount(async () => {
     elementChart = init(echartElement);
     elementChart.setOption(option);
-  })
+  });
 </script>
 
-<div class="relative w-[340px] md:w-[460px] m-auto h-[1060px]" bind:this={echartElement}></div>
+<div
+  class="relative w-[340px] md:w-[460px] m-auto h-[1060px]"
+  bind:this={echartElement}
+></div>