Migrate top crates chart to echarts (#3)

Author: shwin0901

src/routes/stats/+page.svelte

@@ -10,6 +10,7 @@
   } from "./stats";
   import { onMount } from "svelte";
   import Histogram from "./HistogramChart.svelte";
+  import TopCratesChart from "./TopCratesChart.svelte";
 
   /**
    * @type {number[]}
@@ -33,17 +34,25 @@
 
    let currentYear = moment().year();
 
+   /**
+    * @type {{label:string, name:string; value: number}[]}
+    */
+   let topCratesData = [];
+
+   let searchTime = "the last year";
+
   /**
    * 
    * @param {number} now
    * @param {number} yearAgo
    */
   async function getEchartData(now, yearAgo) {
-    const { weeksArr, dateArr, hourArr } = await getHistogramEchartDatas(now, yearAgo);
+    const { weeksArr, dateArr, hourArr, topCratesArr } = await getHistogramEchartDatas(now, yearAgo);
     weekData = weeksArr;
     dateData = dateArr;
     hourData = hourArr;
-    await renderCharts(now, yearAgo, moment(yearAgo).format('YYYY'));
+    topCratesData = topCratesArr;
+    await renderCharts(now, yearAgo);
   }
 
    /**
@@ -52,7 +61,8 @@
     */
   function handleChangeYear(y){
     currentYear = y;
-    const year = moment(String(y));
+    searchTime = String(y);
+    const year = moment(searchTime);
     const now = year.endOf('year').valueOf();
     const yearAgo = year.startOf('year').valueOf();
     getEchartData(now, yearAgo);
@@ -61,8 +71,6 @@
   onMount(async () => {
     const now = moment().valueOf();
     const yearAgo = moment().startOf("day").subtract(1, "year").valueOf();
-
-    await renderCharts(now, yearAgo);
     yearList = await getYearList(currentYear);
     getEchartData(now, yearAgo);
   })
@@ -74,7 +82,7 @@
     <div class="chart-heatmap hidden md:block"></div>
   </div>
   <div class="search-time w-full text-center text-xl">
-    <b>0</b> searches in <b>the last year</b>, approximately saved
+    <b>0</b> searches in <b>{searchTime}</b>, approximately saved
     <b>0 seconds</b>.
     <b
       aria-label="We consider one search save 5 seconds in average, just an estimated value."
@@ -111,7 +119,7 @@
 
       <div>
         <h3>Top searched crates</h3>
-        <div class="topCratesData relative box-border"></div>
+        <TopCratesChart data={topCratesData} />
       </div>
     </div>
   </div>

src/routes/stats/HistogramChart.svelte

@@ -64,4 +64,4 @@
   })
 </script>
 
-<div class="relative h-[320px] w-[380px] 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

@@ -0,0 +1,75 @@
+<script>
+  import { onMount } from "svelte";
+  import { init } from "echarts";
+  import { CHART_COLOR } from "./stats";
+
+   /**
+    * @type {{label:string, name:string; value: number}[]}
+    */
+  export let data = [];
+
+  /**
+   * @type {HTMLElement}
+   */
+  let echartElement;
+
+  /**
+   * @type {any}
+   */
+  let elementChart;
+  const option = {
+    color: CHART_COLOR,
+    xAxis: {
+      position: 'top',
+    },
+    yAxis: {
+      type: "category",
+      data,
+      inverse: true,
+
+    },
+    series: [
+      {
+        data,
+        type: "bar",
+        label: {
+          show: true,
+          color: '#000',
+          formatter:(/** @type {{ data: {name:string} }} */ params) => params.data.name,
+          verticalAlign: "middle",
+          position: [10, '50%'],
+          fontSize: 14,
+        }
+      },
+    ],
+    tooltip: {
+      show:true,
+      trigger: 'axis'
+    }
+  }
+
+  $: {
+    if(elementChart) {
+      elementChart.setOption({
+        yAxis: {
+          data: data.map((item) => item.label),
+        },
+        series: [
+          {
+            data,
+          }
+        ]
+      });
+      elementChart.resize({
+        height: 800 / 15 * data.length + 100,
+      });
+    }
+  }
+
+  onMount(async () => {
+    elementChart = init(echartElement);
+    elementChart.setOption(option);
+  })
+</script>
+
+<div class="relative w-[340px] md:w-[460px] m-auto" bind:this={echartElement}></div>

src/routes/stats/charts.js

@@ -1,79 +1,6 @@
 import moment from "moment";
 import * as d3 from "d3";
 
-function barChart({ margin, height, width, data, selector, color, }) {
-    let tooltip;
-
-    let yAxis = g => g
-        .attr("transform", `translate(${margin.left},0)`)
-        .call(d3.axisLeft(y).tickFormat(i => data[i].label).tickSizeOuter(0))
-        .attr('font-size', 14);
-
-    let xAxis = g => g
-        .attr("transform", `translate(0,${margin.top})`)
-        .call(d3.axisTop(x).ticks(Math.min(10, d3.max(data, d => d.value))))
-        .call(g => g.select(".domain"))
-        .attr('font-size', 14);
-
-    let y = d3.scaleBand()
-        .domain(d3.range(data.length))
-        .rangeRound([margin.top, height - margin.bottom])
-        .padding(0.2);
-
-    let x = d3.scaleLinear()
-        .domain([0, d3.max(data, d => d.value)])
-        .range([margin.left, width - margin.right])
-
-    const svg = d3.select(selector)
-        .append("svg")
-        .attr("width", width)
-        .attr("height", height);
-    // .attr("viewBox", [0, 0, width, height]);
-
-    svg.append("g")
-        .attr("fill", color)
-        .selectAll("rect")
-        .data(data)
-        .join("rect")
-        .attr("x", x(0))
-        .attr("y", (d, i) => y(i) + y.bandwidth() / 4)
-        .attr("width", d => x(d.value) - x(0))
-        .attr("height", y.bandwidth() / 2)
-        .on('mouseover', function (d, i) {
-            let tooltipWidth = 36;
-            tooltip = d3.select(selector)
-                .append('div')
-                .attr('class', 'histogram-bar-tooltip')
-                .html(`<span>${d.value}</span>`)
-                .style('width', `${tooltipWidth}px`)
-                .style('left', x(d.value) + 5 + "px")
-                .style('top', y(i) + y.bandwidth() / 2 - tooltipWidth / 3 + "px")
-        })
-        .on("mouseout", function (d, i) {
-            tooltip.remove();
-        });
-
-    svg.append("g")
-        .attr("fill", "black")
-        .attr("text-anchor", "start")
-        .attr("font-family", "sans-serif")
-        .attr("font-size", 14)
-        .selectAll("text")
-        .data(data)
-        .join("text")
-        .attr("x", d => x(0) + 5)
-        .attr("y", (d, i) => y(i))
-        .attr("dy", "0.35em")
-        .text(d => d.name);
-
-    svg.append("g")
-        .call(xAxis);
-
-    svg.append("g")
-        .call(yAxis);
-
-}
-
 function calendarHeatmap(start, end) {
     // defaults
     const width = 800;
@@ -349,6 +276,5 @@ function calendarHeatmap(start, end) {
 }
 
 export {
-    barChart,
     calendarHeatmap,
 };

src/routes/stats/stats.js

@@ -1,7 +1,8 @@
-import { barChart, calendarHeatmap } from "./charts.js";
+import { calendarHeatmap } from "./charts.js";
 import { STATS_PATTERNS, Statistics } from "querylib";
 import moment from "moment";
 
+const TOP_CRATE_LENGTH = 15;
 let chartWidth = 460;
 const TYPE_OTHER = "other";
 export const CHART_COLOR = "rgba(249, 188, 45, 0.5)";
@@ -79,13 +80,10 @@ function calculateSavedTime(times) {
     }
 }
 
-function renderSearchTimes(length = 0, searchTime) {
+function renderSearchTimes(length = 0) {
     let searchTimes = document.querySelector(".search-time");
     let frequency = searchTimes.querySelectorAll("b");
     frequency[0].textContent = `${length}`;
-    if (searchTime) {
-        frequency[1].textContent = `${searchTime}`;
-    }
     frequency[2].textContent = calculateSavedTime(length);
 }
 
@@ -157,35 +155,7 @@ function renderSearchStats(typeDataObj, total) {
     });
 }
 
-function renderTopCratesChart(topCratesObj) {
-    const topCratesContainer = document.querySelector(".topCratesData");
-    if (topCratesContainer.hasChildNodes()) {
-        topCratesContainer.innerHTML = null;
-    }
-    const topCratesData = Object.entries(topCratesObj)
-        .sort((a, b) => b[1] - a[1])
-        .map(([key, value], index) => {
-            return {
-                label: `#${index + 1}`,
-                name: key,
-                value
-            };
-        });
-    topCratesData.splice(15);
-    barChart({
-        margin: ({ top: 30, right: 0, bottom: 10, left: 30 }),
-        // Calculate height dynamically to keep the bar with consistence width regardless of the topCratesData length.
-        height: 800 / 15 * topCratesData.length + 40,
-        barHeight: 25,
-        width: chartWidth,
-        data: topCratesData,
-        selector: ".topCratesData",
-        color: CHART_COLOR,
-    });
-}
-
-
-export async function renderCharts(now, yearAgo, searchTime) {
+export async function renderCharts(now, yearAgo) {
     chartWidth = Math.min(chartWidth, document.getElementById("chart").clientWidth) - 10;
     const { timeline } = await Statistics.load();
 
@@ -209,9 +179,7 @@ export async function renderCharts(now, yearAgo, searchTime) {
     let typeTotal = 0;
     const typeDataObj = Object.create(null);
 
-    const topCratesObj = Object.create(null);
-
-    data.forEach(([t, content, type]) => {
+    data.forEach(([t, content]) => {
         const time = moment(t);
         const hour = time.hour();
 
@@ -225,15 +193,11 @@ export async function renderCharts(now, yearAgo, searchTime) {
             typeDataObj[typeName] = (typeDataObj[typeName] || 0) + 1;
             typeTotal += 1;
         }
-        if (type) {
-            topCratesObj[type] = (topCratesObj[type] || 0) + 1;
-        }
     });
 
-    renderSearchTimes(data.length, searchTime);
+    renderSearchTimes(data.length);
     renderHeatmap(heatMapData, now, yearAgo);
     renderSearchStats(typeDataObj, typeTotal);
-    renderTopCratesChart(topCratesObj);
 }
 
 /**
@@ -251,7 +215,9 @@ export async function getHistogramEchartDatas(now, yearAgo) {
     const dateArr = DATES_LABEL.map(() => 0);
     const hourArr = HOURS_LABEL.map(() => 0);
 
-    for (const [t] of data) {
+    const topCratesObj = Object.create(null);
+
+    for (const [t, , type] of data) {
         const time = moment(t);
         const hour = time.hour();
 
@@ -260,11 +226,26 @@ export async function getHistogramEchartDatas(now, yearAgo) {
         if (hour !== 0) {
             hourArr[hour - 1] += 1;
         }
+        if (type) {
+            topCratesObj[type] = (topCratesObj[type] || 0) + 1;
+        }
     };
+
+    const topCratesArr = Object.entries(topCratesObj)
+        .sort((a, b) => b[1] - a[1])
+        .map(([key, value], index) => {
+            return {
+                label: `#${index + 1}`,
+                name: key,
+                value
+            };
+        });
+    topCratesArr.splice(TOP_CRATE_LENGTH);
     return {
         weeksArr,
         dateArr,
         hourArr,
+        topCratesArr,
     }
 }