From 090b2b13aa05d81e4e017957d8cfb543bfaa5c1c Mon Sep 17 00:00:00 2001
From: Jason Yu <hangyu@paypal.com>
Date: Wed, 18 Dec 2024 13:48:09 +0800
Subject: [PATCH] Refine UI.

---
 src/App.js     | 37 +++++++++++++++++++-----------
 src/records.js | 61 +++++++++++++-------------------------------------
 2 files changed, 39 insertions(+), 59 deletions(-)

diff --git a/src/App.js b/src/App.js
index 41deb76..8b16d7f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import {
   GridComponent,
   TooltipComponent,
   LegendComponent,
+  // DataZoomComponent,
 } from 'echarts/components';
 import { CanvasRenderer, } from 'echarts/renderers';
 import './App.css'
@@ -14,34 +15,44 @@ import logo from './logo.png'
 import data from './records'
 
 echarts.use(
-  [TooltipComponent, GridComponent, LineChart, CanvasRenderer, LegendComponent]
+  [
+    TooltipComponent, 
+    GridComponent, 
+    LineChart, 
+    CanvasRenderer, 
+    LegendComponent, 
+    // DataZoomComponent,
+  ]
 )
 
 const numberWithCommas = (x) => {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
 }
 
+const valueRecords = Object.values(data)
+const labelRecords = Object.keys(data)
+
 const App = () => {
   const total = useMemo(() => {
     return numberWithCommas(
-      data[data.length - 1]?.values?.reduce((prev, curr) => {
+      valueRecords[valueRecords.length - 1]?.reduce((prev, curr) => {
         return prev += curr
       }, 0)
     )
   }, [])
 
   const latestDate = useMemo(() => {
-    return dayjs(data[data.length - 1]?.date).format('MMM DD, YYYY')
+    return dayjs(labelRecords[labelRecords.length - 1]).format('MMM DD, YYYY')
   }, [])
 
   const latestValues = useMemo(() => {
-    return data[data.length - 1]?.values?.map(value => <span>{numberWithCommas(value)}</span>)
+    return valueRecords[valueRecords.length - 1]?.map((value, idx) => <span key={idx}>{numberWithCommas(value)}</span>)
   }, [])
 
   const chartOptions = useMemo(() => {
-    const valueCollector = idx => 
-      data.reduce((prev, curr) => {
-        prev.push(curr?.values?.[idx])
+    const valueCollector = idx =>
+      valueRecords.reduce((prev, curr) => {
+        prev.push(curr?.[idx])
         return prev
       }, [])
 
@@ -69,7 +80,7 @@ const App = () => {
         {
           type: 'category',
           boundaryGap: false,
-          data: data.map(i => dayjs(i?.date).format('YYYY-MM-DD'))
+          data: labelRecords.map(i => dayjs(i).format('YYYY-MM-DD'))
         }
       ],
       yAxis: [
@@ -83,7 +94,7 @@ const App = () => {
           type: 'line',
           stack: 'Total',
           itemStyle: {
-            // color: '#010101cf'
+            color: '#010101cf'
           },
           areaStyle: {},
           emphasis: {
@@ -96,7 +107,7 @@ const App = () => {
           type: 'line',
           stack: 'Total',
           itemStyle: {
-            // color: '#ff2543cf'
+            color: '#ff2543cf'
           },
           areaStyle: {},
           emphasis: {
@@ -109,7 +120,7 @@ const App = () => {
           type: 'line',
           stack: 'Total',
           itemStyle: {
-            // color: '#01a2d6cf'
+            color: '#01a2d6cf'
           },
           areaStyle: {},
           emphasis: {
@@ -122,7 +133,7 @@ const App = () => {
           type: 'line',
           stack: 'Total',
           itemStyle: {
-            // color: '#ff0000cf'
+            color: '#ff0000cf'
           },
           areaStyle: {},
           emphasis: {
@@ -138,7 +149,7 @@ const App = () => {
     <div className="app">
       <img className='title' src={logo} alt="EfficLab logo" />
       <div className='note'>We aim to be the biggest and the most professional Chinese channel of computer technology.</div>
-      <div className='note'>Please contact <a className='mail' href= "mailto: service@efficlab.com">service@efficlab.com</a> for any business cooperation.</div>
+      <div className='note'>Please contact <a className='mail' href="mailto: service@efficlab.com">service@efficlab.com</a> for any business cooperation.</div>
       <div className='data'>
         <div className='note'>Followers as of {latestDate}</div>
         <div className='chart'>
diff --git a/src/records.js b/src/records.js
index 4a888aa..13d76c0 100644
--- a/src/records.js
+++ b/src/records.js
@@ -1,48 +1,17 @@
-const records = [
-  {
-    date: '2024-10-08',
-    values: [1820, 24134, 1885, 4644],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-10-15',
-    values: [2718, 24472, 1909, 4680],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-10-22',
-    values: [3182, 24791, 1926, 4710],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-10-30',
-    values: [3514, 26159, 1931, 4733],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-11-06',
-    values: [3680, 26712, 1928, 4746],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-11-13',
-    values: [3793, 27339, 1929, 4755],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-11-20',
-    values: [3862, 28032, 1932, 4757],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-11-27',
-    values: [3899, 28685, 1932, 4788],  // YT, B, RED, DOUYIN.
-  },
-  {
-    date: '2024-12-04',
-    values: [3952, 29047, 1933, 4790],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-12-10',
-    values: [3971, 29715, 1936, 4783],  // YT, B, RED, DOUYIN.
-  }, 
-  {
-    date: '2024-12-17',
-    values: [4184, 30344, 1938, 4789],  // YT, B, RED, DOUYIN.
-  }, 
-]
+const records = {
+  // YT, B, RED, DOUYIN.
+  '2024-10-08': [1820, 24134, 1885, 4644],
+  '2024-10-15': [2718, 24472, 1909, 4680],
+  '2024-10-22': [3182, 24791, 1926, 4710],
+  '2024-10-30': [3514, 26159, 1931, 4733],
+  '2024-11-06': [3680, 26712, 1928, 4746],
+  '2024-11-13': [3793, 27339, 1929, 4755],
+  '2024-11-20': [3862, 28032, 1932, 4757],
+  '2024-11-27': [3899, 28685, 1932, 4788],
+  '2024-12-04': [3952, 29047, 1933, 4790],
+  '2024-12-10': [3971, 29715, 1936, 4783],
+  '2024-12-17': [4184, 30344, 1938, 4789],
+  // [TO GO WITH MORE RECORDS]
+}
 
 export default records