From 380592f329634f9f862bbe1ad20b023b53c6a21e Mon Sep 17 00:00:00 2001
From: ziwu7 <263377135@qq.com>
Date: Sat, 3 Aug 2024 17:14:07 +0800
Subject: [PATCH] Addition of epidemic data statistics page and chart
 performance optimization

---
 package.json                     |   2 +-
 pnpm-lock.yaml                   |  69 +++++++++-------
 source/page/Statistics/index.tsx | 133 +++++++++++++++++++++++++++++++
 source/page/data/menu.ts         |   7 +-
 source/page/index.tsx            |   7 +-
 source/service/Epidemic.ts       |  13 +++
 6 files changed, 198 insertions(+), 33 deletions(-)
 create mode 100644 source/page/Statistics/index.tsx

diff --git a/package.json b/package.json
index 15ac71c..1e99f83 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "classnames": "^2.5.1",
         "dom-renderer": "^2.1.8",
         "echarts": "^5.5.0",
-        "echarts-jsx": "^1.2.0",
+        "echarts-jsx": "^1.2.1",
         "github-web-widget": "^4.0.0-rc.2",
         "koajax": "^1.1.2",
         "mobx": "^6.12.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1218fc1..082dec3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,8 @@ importers:
         specifier: ^5.5.0
         version: 5.5.0
       echarts-jsx:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.4.5)
+        specifier: ^1.2.1
+        version: 1.2.1(typescript@5.4.5)
       github-web-widget:
         specifier: ^4.0.0-rc.2
         version: 4.0.0-rc.2(element-internals-polyfill@1.3.11)(typescript@5.4.5)
@@ -802,12 +802,6 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
   '@esbuild/linux-ia32@0.21.5':
     resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
@@ -2022,6 +2016,11 @@ packages:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
 
+  declarative-shadow-dom-polyfill@0.4.0:
+    resolution: {integrity: sha512-a3c/x43EIo+gzc7ZPY1NuOowPOClqaaU+5G1wwOG7h5xQ8UhZPM6NYcSDsvhTn9Pyc275pmvSUPPY+r4pPTOVA==}
+    peerDependencies:
+      typescript: '>=5.5.3'
+
   decompress-response@3.3.0:
     resolution: {integrity: sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==}
     engines: {node: '>=4'}
@@ -2071,6 +2070,9 @@ packages:
   dom-renderer@2.1.8:
     resolution: {integrity: sha512-XciJAb8pAFAlpFOBO79njazvbfNzA16+045Uie5kZORSu+NY5X2cecjI4nyT4M4ji0nzRsF8P8KHH8xvKM1cdg==}
 
+  dom-renderer@2.3.0:
+    resolution: {integrity: sha512-HSYhONmJqFc/wsRmQIm+Lw2DGoVn3T99t0rh3A9/bZvlm82THWM+QYjSC7SyM8EIybvhjPt94LoXnxlyai3ncA==}
+
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -2098,8 +2100,8 @@ packages:
   duplexer3@0.1.5:
     resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==}
 
-  echarts-jsx@1.2.0:
-    resolution: {integrity: sha512-ZMlNsj8KcQAr6pz1YErPYMkamPqjKMs8cq2dtWdiFHXERDuTgQrK1oulzYHB+iZuqxxkygqhLIjKwTrJNq1OIQ==}
+  echarts-jsx@1.2.1:
+    resolution: {integrity: sha512-epcIsL91qcVbd/3gzKPa1cxSqhBtcG5uphDwse6edzTd8m61WGg3O/Sr/DBI5/nZISuOCKBbT0INdMrw1IzCfQ==}
     peerDependencies:
       '@webcomponents/webcomponentsjs': ^2.8
 
@@ -4732,9 +4734,6 @@ snapshots:
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
@@ -4925,13 +4924,15 @@ snapshots:
       '@parcel/utils': 2.11.0
       lmdb: 2.8.5
 
-  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/logger': 2.12.0
       '@parcel/utils': 2.12.0
       lmdb: 2.8.5
+    transitivePeerDependencies:
+      - '@swc/helpers'
 
   '@parcel/codeframe@2.11.0':
     dependencies:
@@ -4995,7 +4996,7 @@ snapshots:
   '@parcel/core@2.12.0(@swc/helpers@0.5.11)':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
       '@parcel/events': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
@@ -5008,7 +5009,7 @@ snapshots:
       '@parcel/source-map': 2.1.1
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       abortcontroller-polyfill: 1.7.5
       base-x: 3.0.9
       browserslist: 4.23.0
@@ -5052,7 +5053,7 @@ snapshots:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       '@parcel/watcher': 2.4.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -5147,7 +5148,7 @@ snapshots:
       '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
 
   '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
     dependencies:
@@ -5191,7 +5192,7 @@ snapshots:
       '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       '@swc/core': 1.4.1(@swc/helpers@0.5.11)
       semver: 7.6.0
     transitivePeerDependencies:
@@ -5401,7 +5402,7 @@ snapshots:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
       '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       nullthrows: 1.1.1
 
   '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
@@ -5412,7 +5413,7 @@ snapshots:
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       '@swc/helpers': 0.5.6
       browserslist: 4.23.0
       nullthrows: 1.1.1
@@ -5523,12 +5524,12 @@ snapshots:
 
   '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/source-map': 2.1.1
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
       utility-types: 3.11.0
     transitivePeerDependencies:
       - '@parcel/core'
@@ -5622,7 +5623,7 @@ snapshots:
       '@parcel/utils': 2.11.0
       nullthrows: 1.1.1
 
-  '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
+  '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
@@ -5631,8 +5632,6 @@ snapshots:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
-    transitivePeerDependencies:
-      - '@swc/helpers'
 
   '@rollup/plugin-babel@5.3.1(@babel/core@7.24.5)(rollup@2.79.1)':
     dependencies:
@@ -6262,6 +6261,10 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  declarative-shadow-dom-polyfill@0.4.0(typescript@5.4.5):
+    dependencies:
+      typescript: 5.4.5
+
   decompress-response@3.3.0:
     dependencies:
       mimic-response: 1.0.1
@@ -6309,6 +6312,15 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  dom-renderer@2.3.0(typescript@5.4.5):
+    dependencies:
+      declarative-shadow-dom-polyfill: 0.4.0(typescript@5.4.5)
+      tslib: 2.6.3
+      web-streams-polyfill: 4.0.0
+      web-utility: 4.4.0(typescript@5.4.5)
+    transitivePeerDependencies:
+      - typescript
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -6337,9 +6349,9 @@ snapshots:
 
   duplexer3@0.1.5: {}
 
-  echarts-jsx@1.2.0(typescript@5.4.5):
+  echarts-jsx@1.2.1(typescript@5.4.5):
     dependencies:
-      dom-renderer: 2.1.8(typescript@5.4.5)
+      dom-renderer: 2.3.0(typescript@5.4.5)
       echarts: 5.5.0
       iterable-observer: 1.0.1
       lodash: 4.17.21
@@ -6454,7 +6466,6 @@ snapshots:
       '@esbuild/darwin-x64': 0.21.5
       '@esbuild/freebsd-arm64': 0.21.5
       '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
       '@esbuild/linux-arm64': 0.21.5
       '@esbuild/linux-ia32': 0.21.5
       '@esbuild/linux-loong64': 0.21.5
diff --git a/source/page/Statistics/index.tsx b/source/page/Statistics/index.tsx
new file mode 100644
index 0000000..9dcf780
--- /dev/null
+++ b/source/page/Statistics/index.tsx
@@ -0,0 +1,133 @@
+import { observable } from 'mobx';
+import {component,observer} from 'web-cell';
+import {Overall,AreaData,getOverall,getArea } from '../../service/Epidemic';
+import 'echarts-jsx/dist/renderers/SVG';
+import 'echarts-jsx/dist/components/title';
+import 'echarts-jsx/dist/components/legend';
+import 'echarts-jsx/dist/components/tooltip';
+import 'echarts-jsx/dist/components/grid';
+import 'echarts-jsx/dist/components/x-axis';
+import 'echarts-jsx/dist/components/y-axis';
+import 'echarts-jsx/dist/charts/line';
+import 'echarts-jsx/dist/charts/bar';
+
+@component({ tagName: 'statistics-page' })
+@observer
+export default class StatisticsPage extends HTMLElement {
+  
+    @observable
+    accessor virusData : {
+        overAll: Overall[];
+        areaData:AreaData[];
+    }
+    async mountedCallback() {
+       const [overall,areadata]  =await Promise.all([getOverall(),getArea()])
+
+       this.virusData = {
+        overAll:overall,
+        areaData:areadata,
+        }
+    }
+    toMonth(dateString){
+        let date = new Date(dateString);
+        let year = date.getFullYear();
+        let month = date.getMonth(); 
+        return new Date(year, month);
+    }
+
+    render(){
+        if(this.virusData){
+            let confirmedCount =  this.virusData.overAll.map(item=>[this.toMonth(item.updateTime),item.confirmedCount])
+            let suspectedCount = this.virusData.overAll.map(item=>[this.toMonth(item.updateTime),item.suspectedCount])
+            let curedCount = this.virusData.overAll.map(item=>[this.toMonth(item.updateTime),item.curedCount])
+            let deadCount = this.virusData.overAll.map(item=>[this.toMonth(item.updateTime),item.deadCount])
+            let seriousCount = this.virusData.overAll.map(item=>[this.toMonth(item.updateTime),item.seriousCount])
+          
+            let cityData =  this.virusData.areaData.filter((item)=>{
+                if(item.provinceName==='广东省'){return item}
+            })
+            let city_confirmedCounts = cityData.map((item)=>[item.cityName,item.city_confirmedCount])
+            let city_curedCounts = cityData.map((item)=>[item.cityName,item.city_curedCount])
+            let city_suspectedCounts = cityData.map((item)=>[item.cityName,item.city_suspectedCount])
+            let city_deadCounts = cityData.map((item)=>[item.cityName,item.city_deadCount])
+            return (
+                <div>
+                    <ec-svg-renderer
+                        className="w-100 h-50"
+                    >
+                        <ec-title text="患者人数数据" top="5%" x="center" />
+                        <ec-legend
+                            orient="horizontal"
+                            bottom="13%"
+                            data={['确诊',"恢复",'严重',"疑似",'死亡']}
+                        />
+                        <ec-tooltip trigger="axis" />
+                        <ec-grid bottom="25%" left={60} />
+                        <ec-x-axis name="日期" type="time" nameGap={5} />
+                        <ec-y-axis id='y1' name="确诊&恢复&严重人数" type="value" nameGap={10}  />
+                        <ec-y-axis id='y2' name="疑似&死亡人数" type="value" nameGap={10}  />
+                    
+                        <ec-bar-chart
+                            data={confirmedCount}
+                            name="确诊"
+                        />
+                        <ec-bar-chart
+                            data={curedCount}
+                            name="恢复"
+                        />
+                        <ec-bar-chart
+                            data={seriousCount}
+                            name="严重"
+                        />
+                        <ec-line-chart
+                            data={suspectedCount}
+                            yAxisIndex={1}
+                            name="疑似"
+                        />
+                        <ec-line-chart
+                            data={deadCount}
+                            yAxisIndex={1}
+                            name="死亡"
+                        />
+                    </ec-svg-renderer>
+
+                    <ec-svg-renderer
+                        className="w-100 h-50"
+                    >
+                        <ec-title text="患者人数地市分布" top="5%" x="center" />
+                        <ec-legend
+                            orient="horizontal"
+                            bottom="13%"
+                            data={['确诊',"恢复",'疑似','死亡']}
+                        />
+                        <ec-tooltip trigger="axis" />
+                        <ec-grid bottom="25%" left={60} />
+                        <ec-x-axis name="地市" type="category" nameGap={5} />
+                        <ec-y-axis id='y1' name="确诊&恢复人数" type="value" nameGap={10}  />
+                        <ec-y-axis id='y2' name="疑似&死亡人数" type="value" nameGap={10}  />
+
+                        <ec-bar-chart
+                            data={city_confirmedCounts}
+                            name="确诊"
+                        />
+                        <ec-bar-chart
+                            data={city_curedCounts}
+                            name="恢复"
+                        />
+                        <ec-line-chart
+                            data={city_suspectedCounts}
+                            name="疑似"
+                            yAxisIndex={1}
+                        />
+                        <ec-line-chart
+                            data={city_deadCounts}
+                            name="死亡"
+                            yAxisIndex={1}
+                        />
+
+                    </ec-svg-renderer>
+                </div>
+            );
+        }
+    }
+}
diff --git a/source/page/data/menu.ts b/source/page/data/menu.ts
index a69d3d0..b302043 100644
--- a/source/page/data/menu.ts
+++ b/source/page/data/menu.ts
@@ -7,7 +7,8 @@ export enum RouteRoot {
     Clinic = 'clinic',
     Maps = 'maps',
     Admin = 'admin',
-    Community = 'community'
+    Community = 'community',
+    Statistics = 'statistics'
 }
 
 export default [
@@ -58,5 +59,9 @@ export default [
     {
         title: '开放社区',
         href: RouteRoot.Community
+    },
+    {
+        title: '疫情统计',
+        href: RouteRoot.Statistics
     }
 ];
diff --git a/source/page/index.tsx b/source/page/index.tsx
index 1748aa8..2dc5b02 100644
--- a/source/page/index.tsx
+++ b/source/page/index.tsx
@@ -16,6 +16,7 @@ import logo from '../image/wuhan2020.png';
 import { HomePage } from './Home';
 import Disclaimer from '../../Disclaimer.md';
 
+
 const HospitalPage = lazy(() => import('./Hospital')),
     HospitalEdit = lazy(() => import('./Hospital/Edit')),
     LogisticsPage = lazy(() => import('./Logistics')),
@@ -30,8 +31,8 @@ const HospitalPage = lazy(() => import('./Hospital')),
     ClinicEdit = lazy(() => import('./Clinic/Edit')),
     UserAdmin = lazy(() => import('./Admin/User')),
     CommunityPage = lazy(() => import('./Community')),
-    MapsPage = lazy(() => import('./Map'));
-
+    MapsPage = lazy(() => import('./Map')),
+    StatisticsPage= lazy(() => import('./Statistics'));
 const userMenu = [
     {
         title: '管理',
@@ -117,6 +118,7 @@ export const PageFrame: FC = () => (
             <Route path={RouteRoot.Maps} component={MapsPage} />
             <Route path={RouteRoot.Admin} component={UserAdmin} />
             <Route path={RouteRoot.Community} component={CommunityPage} />
+            <Route path={RouteRoot.Statistics} component={StatisticsPage} />
             <Route
                 path="disclaimer"
                 component={({ className = '', ...props }) => (
@@ -127,6 +129,7 @@ export const PageFrame: FC = () => (
                     />
                 )}
             />
+            
         </Container>
 
         <footer className="d-md-flex justify-content-around text-center bg-light py-5">
diff --git a/source/service/Epidemic.ts b/source/service/Epidemic.ts
index e0009a7..7e832cd 100644
--- a/source/service/Epidemic.ts
+++ b/source/service/Epidemic.ts
@@ -74,6 +74,12 @@ export interface Province extends Base, StatisticData {
     cities?: City[];
 }
 
+export interface AreaData extends Base,
+    Partial<Record<`${'city_' | 'province_'}${StatisticType}Count`,number>>,
+    Record<`${'city'|'continent'|'country'|'province'}EnglishName`,string>,
+    Record<`${'city'|'continent'|'country'|'province'}Name`,string>,
+    Record<`${'city_' | 'province_'}zipCode`,string>{}
+
 export async function getOverall() {
     const { body } = await epidemic.get<Overall[]>('Overall', { Range: '0-9' });
 
@@ -91,3 +97,10 @@ export async function getCurrent() {
 
     return body;
 }
+
+export async function getArea() {
+    const { body } = await epidemic.get<AreaData[]>('Area', { Range: '0-9' });
+
+    return body;
+}
+