Semi

Author: sheepzh

script/user-chart/render.ts

@@ -12,49 +12,62 @@ import { Argv, Browser } from "./argv"
 import { filenameOf, getExistGist } from "./common"
 import { EChartsType, init } from "echarts"
 
-const ALL_BROWSERS: Browser[] = ['chrome', 'firefox', "edge"]
+const ALL_BROWSERS: Browser[] = ['firefox', 'edge', 'chrome']
+
+type OriginData = {
+    [browser in Browser]: UserCount
+}
+
+type ChartData = {
+    xAixs: string[]
+    yAixses: {
+        [browser in Browser]: number[]
+    }
+}
 
 export async function render(argv: Argv): Promise<void> {
     const token = argv.gistToken
     // 1. get all data
-    const [chromeUser, firefoxUser, edgeUser]: UserCount[] = await Promise.all(
-        ALL_BROWSERS.map(b => getDataFromGist(token, b))
-    )
-    // 2. Find all dates and sort them
+    const originData: OriginData = await getOriginData(token)
+    // 2. pre-process data
+    const chartData = preProcess(originData)
+    // 3. render csv
+    const svg = render2Svg(chartData)
+    // 4. upload
+    await upload2Gist(token, svg)
+    process.exit()
+}
+
+function preProcess(originData: OriginData): ChartData {
+    // 1. sort datess
     const dateSet = new Set<string>()
-    Object.keys(chromeUser).forEach(d => dateSet.add(d))
-    Object.keys(firefoxUser).forEach(d => dateSet.add(d))
-    Object.keys(edgeUser).forEach(d => dateSet.add(d))
+    Object.values(originData).forEach(ud => Object.keys(ud).forEach(date => dateSet.add(date)))
     let allDates = Array.from(dateSet).sort()
 
-    // 3. smooth the dates
-    const chromeCtx = new SmoothContext()
-    const edgeCtx = new SmoothContext()
-    const firefoxCtx = new SmoothContext()
+    // 2. smooth the count
+    const ctx: { [browser in Browser]: SmoothContext } = {
+        chrome: new SmoothContext(),
+        firefox: new SmoothContext(),
+        edge: new SmoothContext(),
+    }
 
-    allDates.forEach(date => {
-        chromeCtx.process(chromeUser[date])
-        edgeCtx.process(edgeUser[date])
-        firefoxCtx.process(firefoxUser[date])
-    })
+    allDates.forEach(
+        date => ALL_BROWSERS.forEach(b => ctx[b].process(originData[b][date]))
+    )
+    const result = {
+        xAixs: allDates,
+        yAixses: {
+            chrome: ctx.chrome.end(),
+            firefox: ctx.firefox.end(),
+            edge: ctx.edge.end(),
+        }
+    }
 
-    let chromeData = chromeCtx.end()
-    let edgeData = edgeCtx.end()
-    let firefoxData = firefoxCtx.end()
-
-    // 4. zoom
-    const dataSize = Object.keys(chromeData)?.length
-    const reduction = Math.floor(dataSize / 150)
-    chromeData = zoom(chromeData, reduction)
-    edgeData = zoom(edgeData, reduction)
-    firefoxData = zoom(firefoxData, reduction)
-    allDates = zoom(allDates, reduction)
-
-    // 5. render csv
-    const svg = render2Svg(chromeData, edgeData, firefoxData, allDates)
-    // 6. upload
-    await upload2Gist(token, svg)
-    process.exit()
+    // 3. zoom
+    const reduction = Math.floor(Object.keys(allDates).length / 150)
+    result.xAixs = zoom(result.xAixs, reduction)
+    ALL_BROWSERS.forEach(b => result.yAixses[b] = zoom(result.yAixses[b], reduction))
+    return result
 }
 
 class SmoothContext {
@@ -115,24 +128,20 @@ function zoom<T>(data: T[], reduction: number): T[] {
     return newData
 }
 
-function render2Svg(chromeData: number[], edgeData: number[], firefoxData: number[], allDates: string[]): string {
+function render2Svg(chartData: ChartData): string {
+    const { xAixs, yAixses } = chartData
     const chart: EChartsType = init(null, null, {
         renderer: 'svg',
         ssr: true,
-        width: 1280,
+        width: 960,
         height: 640
     })
-    const legendsData: Record<string, number[]> = {
-        Firefox: firefoxData,
-        Edge: edgeData,
-        Chrome: chromeData,
-    }
     chart.setOption({
         title: {
             text: 'Total Active User Count',
-            subtext: `${allDates[0]} to ${allDates[allDates.length - 1]}`
+            subtext: `${xAixs[0]} to ${xAixs[xAixs.length - 1]}`
         },
-        legend: { data: Object.keys(legendsData) },
+        legend: { data: ALL_BROWSERS },
         grid: {
             left: '3%',
             right: '4%',
@@ -142,27 +151,33 @@ function render2Svg(chromeData: number[], edgeData: number[], firefoxData: numbe
         xAxis: [{
             type: 'category',
             boundaryGap: false,
-            data: allDates
+            data: xAixs
         }],
         yAxis: [
             { type: 'value' }
         ],
-        series: Object.entries(legendsData)
-            .map(([legend, data]) => ({
-                name: legend,
-                type: 'line',
-                stack: 'Total',
-                // Fill the area
-                areaStyle: {},
-                data
-            }))
+        series: ALL_BROWSERS.map(b => ({
+            name: b,
+            type: 'line',
+            stack: 'Total',
+            // Fill the area
+            areaStyle: {},
+            data: yAixses[b]
+        }))
     })
     return chart.renderToSVGString()
 }
 
 const USER_COUNT_GIST_DESC = "User count of timer, auto-generated"
 const USER_COUNT_SVG_FILE_NAME = "user_count.svg"
 
+async function getOriginData(token: string): Promise<OriginData> {
+    const [firefox, edge, chrome]: UserCount[] = await Promise.all(
+        ALL_BROWSERS.map(b => getDataFromGist(token, b))
+    )
+    return { chrome, firefox, edge }
+}
+
 /**
  * Get the data from gist
  */