diff --git a/.eslintrc.json b/.eslintrc.json
index 7838937..7f37e95 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,6 +21,7 @@
         "prefer-const": "warn",
         "no-unused-vars": "warn",
         "@typescript-eslint/no-unused-vars": "warn",
+        "@typescript-eslint/no-explicit-any": "warn",
         "@typescript-eslint/no-unsafe-declaration-merging": "warn",
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/ban-ts-comment": "warn"
diff --git a/package.json b/package.json
index df53f90..e21676a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "wuhan2020-pwa",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "license": "AGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "武汉新型冠状病毒防疫信息平台",
diff --git a/source/page/Factory/edit.tsx b/source/page/Factory/edit.tsx
index fdd8d69..52149ef 100644
--- a/source/page/Factory/edit.tsx
+++ b/source/page/Factory/edit.tsx
@@ -180,11 +180,10 @@ export class FactoryEdit
                         label="备注"
                         defaultValue={remark}
                     />
-                    <div className="form-group mt-3">
+                    <div className="form-group mt-3 d-flex flex-column">
                         <Button
                             type="submit"
                             variant="primary"
-                            className="d-block"
                             disabled={factory.loading}
                         >
                             提交
@@ -192,7 +191,6 @@ export class FactoryEdit
                         <Button
                             type="reset"
                             variant="danger"
-                            className="d-block"
                             onClick={() => (location.hash = RouteRoot.Factory)}
                         >
                             取消
diff --git a/source/page/Hospital/Edit.tsx b/source/page/Hospital/Edit.tsx
index a413940..5648bf6 100644
--- a/source/page/Hospital/Edit.tsx
+++ b/source/page/Hospital/Edit.tsx
@@ -174,11 +174,10 @@ export class HospitalEdit
                         label="备注"
                         defaultValue={remark}
                     />
-                    <div className="form-group mt-3">
+                    <div className="form-group mt-3 d-flex flex-column">
                         <Button
                             type="submit"
                             variant="primary"
-                            className="d-block"
                             disabled={suppliesRequirement.loading}
                         >
                             提交
@@ -186,7 +185,6 @@ export class HospitalEdit
                         <Button
                             type="reset"
                             variant="danger"
-                            className="d-block"
                             onClick={() => (location.hash = RouteRoot.Hospital)}
                         >
                             取消
diff --git a/source/page/Hotel/Edit.tsx b/source/page/Hotel/Edit.tsx
index 9201fc7..9f296e8 100644
--- a/source/page/Hotel/Edit.tsx
+++ b/source/page/Hotel/Edit.tsx
@@ -159,11 +159,10 @@ export class HotelEdit extends HTMLElement implements WebCell<HotelEditProps> {
                         defaultValue={remark}
                         label="备注"
                     />
-                    <div className="form-group mt-3">
+                    <div className="form-group mt-3 d-flex flex-column">
                         <Button
                             type="submit"
                             variant="primary"
-                            className="d-block"
                             disabled={hotel.loading}
                         >
                             提交
@@ -171,7 +170,6 @@ export class HotelEdit extends HTMLElement implements WebCell<HotelEditProps> {
                         <Button
                             type="reset"
                             variant="danger"
-                            className="d-block"
                             onClick={() => (location.hash = RouteRoot.Hotel)}
                         >
                             取消
diff --git a/source/page/Map/adapter/isaaclin.ts b/source/page/Map/adapter/isaaclin.ts
index 760bfe1..9cdd0f8 100644
--- a/source/page/Map/adapter/isaaclin.ts
+++ b/source/page/Map/adapter/isaaclin.ts
@@ -1,3 +1,4 @@
+import { Hour } from 'web-utility';
 import {
     CountryOverviewData,
     CountryData,
@@ -7,30 +8,28 @@ import {
     Series
 } from './patientStatInterface';
 import { long2short } from './long2short'; // some city names are NOT short names so we also convert them here
-import { City, Province } from '../../../service/Epidemic';
-
-function convertStat(source): PatientStatData {
-    return {
-        confirmed: source.confirmedCount,
-        suspected: source.suspectedCount,
-        cured: source.curedCount,
-        dead: source.deadCount
-    };
-}
-
-export function convertCountry(source: Province[]): CountryData {
-    // currently we only support china
-    return {
-        name: '中国',
-        confirmed: 0,
-        suspected: 0,
-        cured: 0,
-        dead: 0,
-        provinces: Object.fromEntries(
-            source.map(item => [item.provinceShortName, convertProvince(item)])
-        )
-    };
-}
+import { City, Province, StatisticData } from '../../../service/Epidemic';
+
+const convertStat = (source: StatisticData): PatientStatData => ({
+    confirmed: source.confirmedCount,
+    suspected: source.suspectedCount,
+    cured: source.curedCount,
+    dead: source.deadCount
+});
+
+/**
+ * currently we only support china
+ */
+export const convertCountry = (source: Province[]): CountryData => ({
+    name: '中国',
+    confirmed: 0,
+    suspected: 0,
+    cured: 0,
+    dead: 0,
+    provinces: Object.fromEntries(
+        source.map(item => [item.provinceShortName, convertProvince(item)])
+    )
+});
 
 export function convertProvince(province: Province): ProvinceData {
     const { provinceShortName: name, updateTime, cities } = province;
@@ -50,16 +49,17 @@ export function convertProvince(province: Province): ProvinceData {
     };
 }
 
-export function convertCity(source: City, updateTime: number): CityData {
-    return {
-        name: long2short(source.cityName),
-        timestamp: updateTime, // 使用传入的省级数据更新时间
-        ...convertStat(source)
-    };
-}
+/**
+ * @param timestamp 使用传入的省级数据更新时间
+ */
+export const convertCity = (source: City, timestamp: number): CityData => ({
+    name: long2short(source.cityName),
+    timestamp,
+    ...convertStat(source)
+});
 
 function roundTime(t: number, resolution: number) {
-    const offset = resolution >= 24 * 3600000 ? 8 * 3600000 : 0; // consider locale if resolution > 1 day
+    const offset = resolution >= 24 * Hour ? 8 * Hour : 0; // consider locale if resolution > 1 day
 
     return Math.floor((t + offset) / resolution) * resolution - offset;
 }
@@ -69,7 +69,7 @@ function fillForward<T extends ProvinceData | CityData | CountryData>(
 ) {
     const all_ts = Object.keys(series).sort();
 
-    all_ts.forEach((t, i) => {
+    for (const [i, t] of all_ts.entries())
         if (i < all_ts.length - 1)
             for (const name of Object.keys(series[t])) {
                 const next_t = parseInt(all_ts[i + 1], 10);
@@ -77,15 +77,17 @@ function fillForward<T extends ProvinceData | CityData | CountryData>(
                 if (series[next_t][name] === undefined)
                     series[next_t][name] = series[t][name];
             }
-    });
 }
 
+/**
+ * @param resolution in ms
+ */
 export function convertProvincesSeries(
     source: Province[],
-    resolution: number, // in ms
+    resolution: number,
     shouldFillForward = false
-): Series<ProvinceData> {
-    let res: Series<ProvinceData> = {};
+) {
+    const res: Series<ProvinceData> = {};
 
     source.sort(item => item.updateTime);
 
@@ -109,7 +111,7 @@ export function extractCitiesSeries(
     name: string,
     resolution: number,
     shouldFillForward = false
-): Series<CityData> {
+) {
     const res: Series<CityData> = Object.fromEntries(
         Object.values(series)
             .map(provs => {
@@ -126,11 +128,13 @@ export function extractCitiesSeries(
     return res;
 }
 
-export function convertCountrySeries(
+/**
+ * @param resolution // in ms
+ */
+export const convertCountrySeries = (
     source: any[],
-    resolution: number // in ms
-): Series<CountryOverviewData> {
-    return Object.fromEntries(
+    resolution: number
+): Series<CountryOverviewData> =>
+    Object.fromEntries(
         source.map(item => [roundTime(item.updateTime, resolution), item])
     );
-}
diff --git a/source/page/Map/adapter/patientStatInterface.ts b/source/page/Map/adapter/patientStatInterface.ts
index 58133cc..e78e0ef 100644
--- a/source/page/Map/adapter/patientStatInterface.ts
+++ b/source/page/Map/adapter/patientStatInterface.ts
@@ -1,34 +1,27 @@
-export interface PatientStatData {
-    confirmed: number;
-    suspected: number;
-    cured: number;
-    dead: number;
-}
+import { StatisticType } from '../../../service';
 
-export interface CountryOverviewData extends PatientStatData {
-    name: string; // '中国'
-    timestamp?: number; // integer, unit is 'ms', unix epoch time
-}
+export type PatientStatData = Record<StatisticType, number>;
 
-export interface CountryData extends PatientStatData {
-    name: string; // '中国'
-    timestamp?: number; // integer, unit is 'ms', unix epoch time
-    provinces?: { [name: string]: ProvinceData };
+export type CountryOverviewData = CityData;
+
+export interface CountryData extends CityData {
+    provinces?: Record<string, ProvinceData>;
 }
 
-export interface ProvinceData extends PatientStatData {
-    name: string; // '湖北'
-    timestamp?: number;
-    cities: { [name: string]: CityData };
+export interface ProvinceData extends CityData {
+    cities: Record<string, CityData>;
 }
 
 export interface CityData extends PatientStatData {
     name: string; // '武汉'
+    /**
+     * integer, unit is 'ms', unix epoch time
+     */
     timestamp?: number;
 }
 
 export type Series<T extends CountryData | ProvinceData | CityData> = {
-    [timestamp: number]: { [name: string]: T };
+    [timestamp: number]: Record<string, T>;
 };
 
 export interface OverallCountryData {
diff --git a/source/page/Map/component/CellCharts.tsx b/source/page/Map/component/CellCharts.tsx
index 7f00d7d..7db9f51 100644
--- a/source/page/Map/component/CellCharts.tsx
+++ b/source/page/Map/component/CellCharts.tsx
@@ -6,30 +6,33 @@
  * 传入props说明:
  * chartOptions: ECharts 中的所有 options。
  */
-import { WebCellProps, component, mixin, watch } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { init } from 'echarts';
+import { WebCell, component, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { EChartsType, EChartsOption, init } from 'echarts';
 
-interface CellChartsProp extends WebCellProps {
-    chartOptions?: Record<string, any>;
+export interface CellChartsProps {
+    chartOptions?: EChartsOption;
 }
 
+export interface CellCharts extends WebCell<CellChartsProps> {}
+
+@component({ tagName: 'cell-charts' })
 @observer
-@component({
-    tagName: 'cell-charts',
-    renderTarget: 'children'
-})
-export class CellCharts extends mixin<CellChartsProp>() {
-    @watch
-    chartOptions = {};
+export class CellCharts
+    extends HTMLElement
+    implements WebCell<CellChartsProps>
+{
+    @observable
+    accessor chartOptions = {};
 
-    chart: any;
+    chart: EChartsType;
 
     connectedCallback() {
         this.classList.add('w-100', 'h-100');
-        // @ts-ignore
-        this.chart = init(this).setOption(this.chartOptions, false, false);
 
-        self.addEventListener('resize', () => this.chart?.resize());
+        this.chart = init(this);
+        this.chart.setOption(this.chartOptions, false, false);
+
+        self.addEventListener('resize', () => this.chart.resize());
     }
 }
diff --git a/source/page/Map/component/EChartsMap.tsx b/source/page/Map/component/EChartsMap.tsx
index c9bdd54..58ddc8f 100644
--- a/source/page/Map/component/EChartsMap.tsx
+++ b/source/page/Map/component/EChartsMap.tsx
@@ -1,67 +1,62 @@
-/**
- * WebCell Echarts热力图-地图可视化通用组件
- * 本地图组件为热力图-地图定制化开发提供了最高的自由度
- * @author: shadowingszy
- *
- * 传入props说明:
- * mapUrl: 地图json文件地址。
- * chartOptions: echarts中的所有options，注意，地图的map项值为'map'。
- * chartOnClickCallBack: 点击地图后的回调函数。
- * chartGeoRoamCallBack: 地图缩放事件回调函数。
- */
-// eslint-disable-next-line no-unused-vars
-import { WebCellProps, component, mixin, attribute, watch } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { init, registerMap } from 'echarts';
+import { DataObject } from 'dom-renderer';
+import { WebCell, component, attribute, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { EChartsOption, EChartsType, init, registerMap } from 'echarts';
 
 import { long2short } from '../adapter';
 
-export interface EChartsMapProps extends WebCellProps {
+export interface EChartsMapProps {
+    /**
+     * 地图 JSON 文件地址
+     */
     mapUrl?: string;
-    chartOptions?: any;
+    /**
+     * Echarts 中的所有 options（注意：地图的 map 项值为 'map'）
+     */
+    chartOptions?: EChartsOption;
     mapName?: string;
-    chartOnClickCallBack?: (param: any, chart: any) => void;
-    chartGeoRoamCallBack?: (param: any, chart: any) => void;
-    chartAdjustLabel?: (param: any, chart: any) => void;
+    /**
+     * 点击地图后的回调函数
+     */
+    onSeriesClick?: (event: CustomEvent<DataObject>) => any;
+    /**
+     * 地图缩放事件回调函数
+     */
+    onChartGeoRoam?: (event: CustomEvent<DataObject>) => any;
+    onChartLabelAdjust?: (event: CustomEvent<EChartsType>) => any;
 }
 
+export interface EChartsMap extends WebCell<EChartsMapProps> {}
+
+/**
+ * WebCell ECharts 热力图-地图可视化通用组件
+ *
+ * 本地图组件为热力图-地图定制化开发提供了最高的自由度
+ *
+ * @author shadowingszy
+ */
+@component({ tagName: 'echarts-map' })
 @observer
-@component({
-    tagName: 'echarts-map',
-    renderTarget: 'children'
-})
-export class EChartsMap extends mixin<EChartsMapProps>() {
+export class EChartsMap
+    extends HTMLElement
+    implements WebCell<EChartsMapProps>
+{
     @attribute
-    @watch
-    public mapUrl: string = '';
+    @observable
+    accessor mapUrl = '';
 
     @attribute
-    @watch
-    public mapName: string = 'map';
-
-    @watch
-    public chartOptions: any = {};
-
-    @watch
-    public chartOnClickCallBack = (param, chart: any) => {
-        console.log('click', param, chart);
-    };
+    @observable
+    accessor mapName = 'map';
 
-    @watch
-    public chartGeoRoamCallBack = (param, chart) => {
-        console.log('roam', param, chart);
-    };
+    @observable
+    accessor chartOptions: EChartsOption = {};
 
-    @watch
-    public chartAdjustLabel = (param, chart) => {
-        console.log('adjust-label', param, chart);
-    };
-
-    chart: any;
+    chart: EChartsType;
 
     connectedCallback() {
         this.classList.add('w-100', 'h-100');
-        // @ts-ignore
+
         this.chart = init(this);
 
         this.listen(), this.loadData();
@@ -74,35 +69,36 @@ export class EChartsMap extends mixin<EChartsMapProps>() {
     }
 
     adjustLabel() {
-        this.props.chartAdjustLabel(null, this.chart);
+        this.emit('chartlabeladjust', this.chart);
     }
 
     listen() {
-        const { chart, chartOnClickCallBack, chartOptions } = this;
+        const { chart, chartOptions } = this;
+        const { data } = chartOptions.baseOption.timeline;
         // implement hover-then-click on mobile devices
-        var hovered = '';
+        let hovered = '';
 
-        chart.on('mouseover', 'series', ({ name }) =>
-            // prevent click event to trigger immediately
-            setTimeout(() => (hovered = name))
-        );
-        chart.on('mouseout', 'series', () => (hovered = ''));
-
-        chart.on('click', 'series', params => {
-            if (hovered.length > 0) {
-                chartOnClickCallBack(params, chart);
+        chart
+            .on('mouseover', 'series', ({ name }) => {
+                // prevent click event to trigger immediately
+                setTimeout(() => (hovered = name));
+            })
+            .on('mouseout', 'series', () => {
                 hovered = '';
-            }
-        });
-        chart.on('click', 'timeline', ({ dataIndex }) =>
-            chart.dispatchAction({
-                type: 'timelineChange',
-                // index of time point
-                currentIndex: chartOptions.baseOption.timeline.data.findIndex(
-                    d => d === dataIndex
-                )
             })
-        );
+            .on('click', 'series', params => {
+                if (hovered) {
+                    this.emit('seriesclick', params);
+                    hovered = '';
+                }
+            })
+            .on('click', 'timeline', ({ dataIndex }) =>
+                chart.dispatchAction({
+                    type: 'timelineChange',
+                    // index of time point
+                    currentIndex: data.findIndex(d => d === dataIndex)
+                })
+            );
     }
 
     async loadData() {
diff --git a/source/page/Map/component/HierarchicalVirusMap.tsx b/source/page/Map/component/HierarchicalVirusMap.tsx
index 49ad69a..b4b01e0 100644
--- a/source/page/Map/component/HierarchicalVirusMap.tsx
+++ b/source/page/Map/component/HierarchicalVirusMap.tsx
@@ -1,26 +1,10 @@
-/**
- * WebCell分层疫情地图组件
- * 在 VirusMap 基础上，增加聚焦到省显示市级数据与回到省级的功能
- * @author: yarray, shadowingszy
- *
- * 传入参数说明:
- * data: 地图数据
- * resolution: 时间精度
- */
-import {
-    WebCellProps,
-    component,
-    mixin,
-    attribute,
-    watch,
-    createCell,
-    Fragment
-} from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { BGIcon } from 'boot-cell/source/Reminder/FAIcon';
+import { WebCell, component, attribute, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { BGIcon } from 'boot-cell';
+import { Hour } from 'web-utility';
 import classNames from 'classnames';
 
-// eslint-disable-next-line no-unused-vars
+import { EChartsMapProps } from './EChartsMap';
 import { VirusMap, STMapDataType } from './VirusMap';
 
 import { autoBreaks } from '../utility';
@@ -33,8 +17,14 @@ import {
 
 import style from './HierarchicalVirusMap.module.css';
 
-interface Props extends WebCellProps {
+export interface HierarchicalVirusMapProps {
+    /**
+     * 地图数据
+     */
     data: OverallCountryData;
+    /**
+     * 时间精度
+     */
     resolution: number;
 }
 
@@ -43,30 +33,39 @@ interface State {
     currentChartArea: string;
 }
 
+export interface HierarchicalVirusMap
+    extends WebCell<HierarchicalVirusMapProps> {}
+
+/**
+ * WebCell 分层疫情地图组件
+ *
+ * 在 VirusMap 基础上，增加聚焦到省显示市级数据与回到省级的功能
+ *
+ * @author yarray, shadowingszy
+ */
+@component({ tagName: 'hierarchical-virus-map' })
 @observer
-@component({
-    tagName: 'hierarchical-virus-map',
-    renderTarget: 'children'
-})
-export class HierarchicalVirusMap extends mixin<Props, State>() {
-    @watch
-    public data: OverallCountryData = {
+export class HierarchicalVirusMap
+    extends HTMLElement
+    implements WebCell<HierarchicalVirusMapProps>
+{
+    @observable
+    accessor data: OverallCountryData = {
         provincesSeries: {},
         countrySeries: {}
     };
 
     @attribute
-    @watch
-    public resolution: number = 3600000;
+    @observable
+    accessor resolution = Hour;
 
-    state = {
+    @observable
+    accessor state = {
         path: [],
         currentChartArea: '中国'
     };
 
     connectedCallback() {
-        super.connectedCallback();
-
         this.classList.add('position-relative');
     }
 
@@ -108,23 +107,25 @@ export class HierarchicalVirusMap extends mixin<Props, State>() {
         const { path } = this.state;
         // back to country view
         if (path.length)
-            this.setState({
+            this.state = {
                 path: path.slice(0, -1),
                 currentChartArea: '中国'
-            });
+            };
     };
 
-    navigateDown = params => {
+    navigateDown: EChartsMapProps['onSeriesClick'] = ({ detail: { name } }) => {
         const { path } = this.state;
         // if has name and path length < max length
         // TODO: check the data to see whether we can navigate down
-        this.setState({
-            path: params.name && !path.length ? [...path, params.name] : path,
-            currentChartArea: params.name
-        });
+        this.state = {
+            path: name && !path.length ? [...path, name] : path,
+            currentChartArea: name
+        };
     };
 
-    render({ data, resolution }: Props, { path, currentChartArea }: State) {
+    render() {
+        const { data, resolution } = this,
+            { path, currentChartArea } = this.state;
         const config = this.getVirusMapConfig(
                 path,
                 data.provincesSeries,
@@ -145,12 +146,12 @@ export class HierarchicalVirusMap extends mixin<Props, State>() {
                     name={config.name}
                     data={config.data}
                     breaks={autoBreaks(
-                        Object.values(current).map(prov => prov.confirmed)
+                        Object.values(current).map(({ confirmed }) => confirmed)
                     )} // use current province values to calculate viable mapping breaks
                     chartData={data}
                     chartPath={path}
                     currentChartArea={currentChartArea}
-                    chartOnClickCallBack={this.navigateDown}
+                    onSeriesClick={this.navigateDown}
                     onDblClick={this.navigateUp}
                 />
 
diff --git a/source/page/Map/component/VirusChart.tsx b/source/page/Map/component/VirusChart.tsx
index 9085e3f..01889ed 100644
--- a/source/page/Map/component/VirusChart.tsx
+++ b/source/page/Map/component/VirusChart.tsx
@@ -1,23 +1,6 @@
-/* eslint-disable no-unused-vars */
-/**
- * WebCell 疫情数据折线图可视化组件
- * 本组件使用stack line chart和line chart展现信息
- * @author: shadowingszy
- *
- * 传入props说明:
- * data: 各省市或国家数据。
- * area: 当前选中的国家或省市。
- */
-import {
-    WebCellProps,
-    component,
-    mixin,
-    createCell,
-    watch,
-    attribute,
-    Fragment
-} from 'web-cell';
-import { observer } from 'mobx-web-cell';
+import { WebCell, component, attribute, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { EChartsOption } from 'echarts';
 
 import { CellCharts } from './CellCharts';
 import { isLandscape } from '../utility';
@@ -30,38 +13,49 @@ import {
 } from '../adapter';
 import { area as areaModel } from '../../../model';
 
-interface Props extends WebCellProps {
+export interface VirusChartProps {
+    /**
+     * 各省市或国家数据
+     */
     data: OverallCountryData;
+    /**
+     * 当前选中的国家或省市
+     */
     area: string;
     path: string[];
 }
 
-interface State {
-    echartOptions: any;
-}
+const LINE_WIDTH = 5,
+    SYMOBL_SIZE = 10;
 
-const LINE_WIDTH = 5;
-const SYMOBL_SIZE = 10;
+export interface VirusChart extends WebCell<VirusChartProps> {}
 
+/**
+ * WebCell 疫情数据折线图可视化组件
+ *
+ * 本组件使用 Stack Line chart 和 Line chart 展现信息
+ *
+ * @author shadowingszy
+ */
+@component({ tagName: 'virus-line-charts' })
 @observer
-@component({
-    tagName: 'virus-line-charts',
-    renderTarget: 'children'
-})
-export class VirusChart extends mixin<Props, State>() {
-    @watch
-    data: OverallCountryData = {
+export class VirusChart
+    extends HTMLElement
+    implements WebCell<VirusChartProps>
+{
+    @observable
+    accessor data: OverallCountryData = {
         provincesSeries: {},
         countrySeries: {}
     };
 
     @attribute
-    @watch
-    area: string = '';
+    @observable
+    accessor area = '';
 
     @attribute
-    @watch
-    path: string[] = [];
+    @observable
+    accessor path: string[] = [];
 
     getOrderedTimeData(
         data: CountryData | Series<ProvinceData> | Series<CountryOverviewData>
@@ -114,7 +108,7 @@ export class VirusChart extends mixin<Props, State>() {
                     curedData.push([item.date, item[area]?.cured || 0]);
                     deadData.push([item.date, item[area]?.dead || 0]);
                 }
-            else {
+            else
                 for (const item of orderedProvinceData) {
                     confirmedData.push([
                         item.date,
@@ -133,15 +127,9 @@ export class VirusChart extends mixin<Props, State>() {
                         item[path[0]]?.cities[area]?.dead || 0
                     ]);
                 }
-            }
         }
 
-        return {
-            confirmedData,
-            suspectedData,
-            curedData,
-            deadData
-        };
+        return { confirmedData, suspectedData, curedData, deadData };
     }
 
     getConfirmedSuspectChartOptions(
@@ -226,7 +214,7 @@ export class VirusChart extends mixin<Props, State>() {
                 }
             ],
             color: ['#c22b49', '#cca42d']
-        };
+        } as EChartsOption;
     }
 
     getCuredDeadChartOptions(
@@ -307,13 +295,11 @@ export class VirusChart extends mixin<Props, State>() {
                 }
             ],
             color: ['#2dce89', '#86868d']
-        };
+        } as EChartsOption;
     }
 
     connectedCallback() {
         this.classList.add('d-flex', 'flex-column');
-
-        super.connectedCallback();
     }
 
     render() {
diff --git a/source/page/Map/component/VirusMap.tsx b/source/page/Map/component/VirusMap.tsx
index ad5c8f6..9982fb1 100644
--- a/source/page/Map/component/VirusMap.tsx
+++ b/source/page/Map/component/VirusMap.tsx
@@ -1,24 +1,6 @@
-/* eslint-disable no-unused-vars */
-/**
- * WebCell疫情地图组件
- * 基于EchartsMap组件构建的疫情地图组件，传入地图url及各区域的具体信息后自动生成疫情地图。
- * @author: shadowingszy, yarray
- *
- * 传入props说明:
- * name: 地图对应的行政区划（简写）
- * data: 显示在地图中的疫情数据。
- * chartOnClickCallBack: 点击地图后的回调函数。
- */
-import {
-    WebCellProps,
-    component,
-    mixin,
-    createCell,
-    attribute,
-    watch,
-    Fragment
-} from 'web-cell';
-import { observer } from 'mobx-web-cell';
+import { WebCell, component, attribute, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { Hour } from 'web-utility';
 
 import { EChartsMapProps, EChartsMap } from './EChartsMap';
 import { VirusChart } from './VirusChart';
@@ -28,26 +10,32 @@ import { createPieces } from '../utility';
 import MapUrls from '../data/province';
 import style from './VirusMap.module.css';
 
-export type MapDataType = { [name: string]: PatientStatData };
+export type MapDataType = Record<string, PatientStatData>;
 
+/**
+ * spatio-temporal data
+ */
 export type STMapDataType = {
     timeline: number[];
-    data: { [timestamp: number]: MapDataType };
-}; // spatio-temporal data
+    data: Record<number, MapDataType>;
+};
 
-interface Props extends WebCellProps {
+export interface VirusMapProps extends Pick<EChartsMapProps, 'onSeriesClick'> {
+    /**
+     * 地图对应的行政区划（简写）
+     */
     name: string;
+    /**
+     * 显示在地图中的疫情数据
+     */
     data?: MapDataType | STMapDataType;
     breaks?: number[];
     chartData?: OverallCountryData;
     chartPath?: string[];
     currentChartArea: string;
-    chartOnClickCallBack?: EChartsMapProps['chartOnClickCallBack'];
 }
 
-function mapName(name: string) {
-    return name === '中国' ? 'china' : 'map';
-}
+const mapName = (name: string) => (name === '中国' ? 'china' : 'map');
 
 const PALETTE = [
     '#FFFFFF',
@@ -66,45 +54,48 @@ enum PatientType {
     dead = '死亡'
 }
 
+export interface VirusMap extends WebCell<VirusMapProps> {}
+
+/**
+ * WebCell 疫情地图组件
+ *
+ * 基于 {@link EchartsMap} 组件构建的疫情地图组件，
+ * 传入地图 URL 及各区域的具体信息后自动生成疫情地图。
+ *
+ * @author shadowingszy, yarray
+ */
+@component({ tagName: 'virus-map' })
 @observer
-@component({
-    tagName: 'virus-map',
-    renderTarget: 'children'
-})
-export class VirusMap extends mixin<Props, {}>() {
+export class VirusMap extends HTMLElement implements WebCell<VirusMapProps> {
     @attribute
-    @watch
-    name: string = '';
+    @observable
+    accessor name = '';
 
-    @watch
-    data: MapDataType = {};
+    @observable
+    accessor data: VirusMapProps['data'] = {};
 
     @attribute
-    @watch
-    breaks: number[] = [1, 10, 50, 100, 500, 1000];
+    @observable
+    accessor breaks = [1, 10, 50, 100, 500, 1000];
 
-    @watch
-    chartData = {};
+    @observable
+    accessor chartData = {} as VirusChart['data'];
 
     @attribute
-    @watch
-    currentChartArea: string = '';
+    @observable
+    accessor currentChartArea = '';
 
     @attribute
-    @watch
-    chartPath: string[] = [];
-
-    @watch
-    chartOnClickCallBack = (param, chart) => {
-        console.log(param, chart);
-    };
+    @observable
+    accessor chartPath: string[] = [];
 
-    state = {
+    @observable
+    accessor state = {
         mapScale: 1,
-        chartArea: this.props.name
+        chartArea: this.name
     };
 
-    private genBasicVisualMap() {
+    get basicVisualMap() {
         return {
             show: true,
             type: 'piecewise',
@@ -127,10 +118,7 @@ export class VirusMap extends mixin<Props, {}>() {
 
     private baseOptions = (name: string, breaks: number[]) => {
         const pieceDict = { pieces: createPieces(breaks, PALETTE) };
-        const visualMap = {
-            ...this.genBasicVisualMap(),
-            ...pieceDict
-        };
+        const visualMap = { ...this.basicVisualMap, ...pieceDict };
 
         return {
             title: {
@@ -165,49 +153,49 @@ export class VirusMap extends mixin<Props, {}>() {
         };
     };
 
-    private overrides = (data: MapDataType) => {
-        return {
-            tooltip: {
-                trigger: 'item',
-                formatter: ({ componentType, dataIndex, name }) => {
-                    if (componentType === 'timeline')
-                        return new Date(dataIndex).toLocaleDateString(
-                            (dataIndex % 24) * 3600000 === 0
-                                ? 'zh-CN'
-                                : 'zh-CN-u-hc-h24'
+    private overrides = (data: MapDataType) => ({
+        tooltip: {
+            trigger: 'item',
+            formatter: ({ componentType, dataIndex, name }) => {
+                if (componentType === 'timeline')
+                    return new Date(dataIndex).toLocaleDateString(
+                        (dataIndex % 24) * Hour === 0
+                            ? 'zh-CN'
+                            : 'zh-CN-u-hc-h24'
+                    );
+
+                const outputArray = [name];
+
+                if (!data[name]) return name + '<br />暂无数据';
+
+                for (const key in PatientType)
+                    if (data[name][key] != null)
+                        outputArray.push(
+                            PatientType[key] + '：' + data[name][key]
                         );
 
-                    const outputArray = [name];
-
-                    if (!data[name]) return name + '<br />暂无数据';
-
-                    for (const key in PatientType)
-                        if (data[name][key] != null)
-                            outputArray.push(
-                                PatientType[key] + '：' + data[name][key]
-                            );
-
-                    return outputArray.join('<br />');
-                }
-            },
-            series: [
-                {
-                    data: Object.keys(data).map(name => ({
-                        name,
-                        value: data[name].confirmed || 0
-                    }))
-                }
-            ]
-        };
-    };
+                return outputArray.join('<br />');
+            }
+        },
+        series: [
+            {
+                data: Object.keys(data).map(name => ({
+                    name,
+                    value: data[name].confirmed || 0
+                }))
+            }
+        ]
+    });
 
-    chartAdjustLabel = (param: any, chart: any) => {
+    handleChartLabelAdjust: EChartsMapProps['onChartLabelAdjust'] = ({
+        detail: chart
+    }) => {
         const isForceRatio = 0.75,
             isAdjustLabel = true,
             domWidth = chart.getWidth(),
             domHeight = chart.getHeight();
 
-        let options = this.baseOptions(this.props.name, this.props.breaks);
+        let options = this.baseOptions(this.name, this.breaks);
 
         if (isForceRatio)
             if (domHeight > domWidth * isForceRatio)
@@ -215,7 +203,7 @@ export class VirusMap extends mixin<Props, {}>() {
                     (options.visualMap[0].top = '50px');
             else options.visualMap[0].left = '20px';
 
-        const scale = param ? param.scale : 1;
+        const scale = 1;
 
         if (isAdjustLabel && scale && isForceRatio) {
             const maxWidth = Math.min(domWidth, domHeight / isForceRatio);
@@ -228,22 +216,18 @@ export class VirusMap extends mixin<Props, {}>() {
             for (const s of options.series) s.label.show = show;
         }
 
-        options = this.isTimelineData(this.props.data)
+        options = this.isTimelineData(this.data)
             ? (this.getSTChartOptions(
-                  this.props.data as STMapDataType,
+                  this.data as STMapDataType,
                   options
               ) as any)
-            : (this.getChartOptions(
-                  this.props.data as MapDataType,
-                  options
-              ) as any);
+            : (this.getChartOptions(this.data as MapDataType, options) as any);
 
         chart.setOption(options);
     };
 
     getChartOptions = (data: MapDataType, options?: any) => {
-        options =
-            options || this.baseOptions(this.props.name, this.props.breaks);
+        options ||= this.baseOptions(this.name, this.breaks);
 
         const extra = this.overrides(data);
 
@@ -254,8 +238,7 @@ export class VirusMap extends mixin<Props, {}>() {
     };
 
     getSTChartOptions = (data: STMapDataType, options?: any) => {
-        options =
-            options || this.baseOptions(this.props.name, this.props.breaks);
+        options ||= this.baseOptions(this.name, this.breaks);
 
         options['timeline'] = {
             axisType: 'time',
@@ -287,24 +270,17 @@ export class VirusMap extends mixin<Props, {}>() {
         };
     };
 
-    private isTimelineData(data: MapDataType | STMapDataType): boolean {
-        return (data as STMapDataType).timeline !== undefined;
+    private isTimelineData(data: MapDataType | STMapDataType) {
+        return (data as STMapDataType).timeline != null;
     }
 
     connectedCallback() {
         this.classList.add(style.box);
-
-        super.connectedCallback();
     }
 
-    render({
-        name,
-        data,
-        chartOnClickCallBack,
-        currentChartArea,
-        chartData,
-        chartPath
-    }: Props) {
+    render() {
+        const { name, data, currentChartArea, chartData, chartPath } = this;
+
         return (
             <>
                 <EChartsMap
@@ -316,8 +292,7 @@ export class VirusMap extends mixin<Props, {}>() {
                             ? this.getSTChartOptions(data as STMapDataType)
                             : this.getChartOptions(data as MapDataType)
                     }
-                    chartAdjustLabel={this.chartAdjustLabel}
-                    chartOnClickCallBack={chartOnClickCallBack}
+                    onChartLabelAdjust={this.handleChartLabelAdjust}
                 />
                 <VirusChart
                     className={style.chart}
diff --git a/source/page/Map/index.tsx b/source/page/Map/index.tsx
index 4bad0b6..10576ea 100644
--- a/source/page/Map/index.tsx
+++ b/source/page/Map/index.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable no-unused-vars */
-import { component, createCell, mixin } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { SpinnerBox } from 'boot-cell/source/Prompt/Spinner';
+import { attribute, component, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { SpinnerBox } from 'boot-cell';
+import { CustomElement, Hour } from 'web-utility';
 
 import { HierarchicalVirusMap } from './component';
 import {
@@ -13,61 +13,57 @@ import {
     convertProvincesSeries,
     convertCountrySeries
 } from './adapter';
-import { getHistory, getCurrent, getOverall, Province } from '../../service';
+import { getHistory, getCurrent, getOverall } from '../../service';
 import style from './index.module.css';
 
-interface MapPageState {
-    loading?: boolean;
-    virusData?: {
+const resolution = Hour * 24;
+
+@component({ tagName: 'maps-page' })
+@observer
+export default class MapsPage extends HTMLElement implements CustomElement {
+    @attribute
+    @observable
+    accessor loading = true;
+
+    @observable
+    accessor virusData: {
         provincesSeries: Series<ProvinceData>;
         countrySeries: Series<CountryOverviewData>;
         countryData?: CountryData;
     };
-}
-
-const resolution = 3600000 * 24;
 
-@observer
-@component({
-    tagName: 'maps-page',
-    renderTarget: 'children'
-})
-export class MapsPage extends mixin<{}, MapPageState>() {
-    state = { loading: true, virusData: null };
-
-    async connectedCallback() {
+    connectedCallback() {
         this.classList.add(style.box);
 
-        super.connectedCallback();
-
         this.loadMapData();
     }
 
-    loadMapData = async () => {
-        const [rawData, rawCurrentData, overviewData] = await Promise.all<
-            Province[],
-            Province[],
-            {}[]
-        >([getHistory(), getCurrent(), getOverall()]);
+    async loadMapData() {
+        const [rawData, rawCurrentData, overviewData] = await Promise.all([
+            getHistory(),
+            getCurrent(),
+            getOverall()
+        ]);
 
-        const virusData = {
+        this.virusData = {
             provincesSeries: convertProvincesSeries(rawData, resolution, true),
             countrySeries: convertCountrySeries(overviewData, resolution),
             countryData: convertCountry(rawCurrentData)
         };
+        this.loading = false;
+    }
 
-        await this.setState({ loading: false, virusData });
-    };
+    render() {
+        const { loading, virusData } = this;
 
-    render(_, { loading, virusData }: MapPageState) {
         return (
             <SpinnerBox cover={loading}>
-                {virusData ? (
+                {virusData && (
                     <HierarchicalVirusMap
                         data={virusData}
                         resolution={resolution}
                     />
-                ) : null}
+                )}
             </SpinnerBox>
         );
     }
diff --git a/source/page/Map/utility.ts b/source/page/Map/utility.ts
index 053b293..87e8c6d 100644
--- a/source/page/Map/utility.ts
+++ b/source/page/Map/utility.ts
@@ -22,14 +22,12 @@ export function autoBreaks(values: number[]) {
 
 const pair = (s: any[]) => s.slice(0, -1).map((item, i) => [item, s[i + 1]]);
 
-export function createPieces(breaks: number[], palette) {
-    return [
-        { min: 0, max: 0, color: palette[0] },
-        ...pair(breaks).map(([b1, b2], i) => ({
-            gte: b1,
-            lt: b2,
-            color: palette[i + 1]
-        })),
-        { gte: breaks[breaks.length - 1], color: palette[breaks.length] }
-    ];
-}
+export const createPieces = (breaks: number[], palette: string[]) => [
+    { min: 0, max: 0, color: palette[0] },
+    ...pair(breaks).map(([b1, b2], i) => ({
+        gte: b1,
+        lt: b2,
+        color: palette[i + 1]
+    })),
+    { gte: breaks[breaks.length - 1], color: palette[breaks.length] }
+];
diff --git a/source/page/index.tsx b/source/page/index.tsx
index d9a7ce6..8af6ca7 100644
--- a/source/page/index.tsx
+++ b/source/page/index.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'web-cell';
+import { FC, lazy } from 'web-cell';
 import { createRouter } from 'cell-router';
 import {
     Container,
@@ -30,12 +30,8 @@ import { UserAdmin } from './Admin/User';
 import { CommunityPage } from './Community';
 import Disclaimer from '../../Disclaimer.md';
 
-// const routes = [
-//         {
-//             paths: [RouteRoot.Maps],
-//             component: async () => (await import('./Map')).MapsPage
-//         },
-//     ],
+const MapsPage = lazy(() => import('./Map'));
+
 const userMenu = [
     {
         title: '管理',
@@ -118,6 +114,7 @@ export const PageFrame: FC = () => (
             />
             <Route path={RouteRoot.Clinic} component={ClinicList} />
             <Route path={RouteRoot.Clinic + '/edit'} component={ClinicEdit} />
+            <Route path={RouteRoot.Maps} component={MapsPage} />
             <Route path={RouteRoot.Admin} component={UserAdmin} />
             <Route path={RouteRoot.Community} component={CommunityPage} />
             <Route
diff --git a/source/service/Epidemic.ts b/source/service/Epidemic.ts
index 9aa3867..cd13a2c 100644
--- a/source/service/Epidemic.ts
+++ b/source/service/Epidemic.ts
@@ -1,5 +1,6 @@
 // 疫情数据调用封装
 // NOTE: 访问接口地址并不是和系统对应的接口是同一服务
+import { DataObject } from 'dom-renderer';
 import { HTTPClient } from 'koajax';
 
 // @credit: https://lab.ahusmart.com/nCoV/api/ 提供了丁香园的疫情数据
@@ -10,15 +11,19 @@ export const epidemic = new HTTPClient({
     responseType: 'json'
 });
 
-interface MapData<T = {}> {
+interface MapData<T = DataObject> {
     results: T[];
 }
 
-export interface City {
+export type StatisticType = 'confirmed' | 'suspected' | 'cured' | 'dead';
+
+export type StatisticData = Record<`${StatisticType}Count`, number>;
+
+export interface City extends StatisticData {
     cityName: string;
 }
 
-export interface Province {
+export interface Province extends StatisticData {
     provinceShortName: string;
     cities?: City[];
     updateTime: number;