Merge pull request #124 from allenfantasy/fix-responsive-issue

fix(VirusMap): tweak display issue in portrait screen
wuhan2020 · Feb 4, 2020 · 90858a0 · 90858a0
2 parents 44201e5 + a693ef6
commit 90858a0
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 76 deletions.
diff --git a/source/components/EchartsMap.tsx b/source/components/EchartsMap.tsx
@@ -11,6 +11,7 @@
  */
 
 import { observer } from 'mobx-web-cell';
+// eslint-disable-next-line no-unused-vars
 import { component, mixin, createCell, attribute, watch } from 'web-cell';
 import echarts from 'echarts';
 import long2short from '../adapters/long2short';
@@ -78,7 +79,6 @@ export class EchartsMap extends mixin<MapProps, {}>() {
       if (typeof originFunction === 'function') {
         originFunction();
       }
-
       if (this.chart) {
         this.chart.resize();
       }
@@ -88,13 +88,7 @@ export class EchartsMap extends mixin<MapProps, {}>() {
   }
 
   updatedCallback() {
-    const {
-      mapUrl,
-      mapName,
-      chartOptions,
-      chartOnClickCallBack,
-      chartGeoRoamCallBack
-    } = this.props;
+    const { mapUrl, mapName, chartOptions, chartOnClickCallBack } = this.props;
 
     if (this.chart !== undefined) {
       this.chart.showLoading();

diff --git a/source/components/HierarchicalVirusMap.tsx b/source/components/HierarchicalVirusMap.tsx
@@ -9,10 +9,18 @@
  */
 
 import { observer } from 'mobx-web-cell';
+// eslint-disable-next-line no-unused-vars
 import { component, mixin, createCell, attribute, watch } from 'web-cell';
+// eslint-disable-next-line no-unused-vars
 import { VirusMap, STMapDataType } from './VirusMap';
-import { Series, ProvinceData, OverallCountryData } from '../adapters/patientStatInterface';
+// eslint-disable-next-line no-unused-vars
+import {
+  Series,
+  ProvinceData,
+  OverallCountryData
+} from '../adapters/patientStatInterface';
 import { extractCitiesSeries } from '../adapters/isaaclin';
+import { isLandscape } from '../utils';
 
 interface Props {
   data: OverallCountryData;
@@ -24,6 +32,18 @@ interface State {
   currentChartArea: string;
 }
 
+interface DrillUpBtnStyle {
+  display: string;
+  position: string;
+  width: string;
+  height: string;
+  padding: string;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+}
+
 function autoBreaks(values: number[]) {
   const base = [1, 10, 50, 100, 500, 1000];
   const k =
@@ -116,9 +136,32 @@ export class HierarchicalVirusMap extends mixin<Props, State>() {
 
     const current =
       data.provincesSeries[
-      Math.max(...Object.keys(data.provincesSeries).map(t => parseInt(t, 10)))
+        Math.max(...Object.keys(data.provincesSeries).map(t => parseInt(t, 10)))
       ];
 
+    let drillUpBtnStyle: DrillUpBtnStyle = {
+      display: this.state.path.length > 0 ? 'block' : 'none',
+      position: 'absolute',
+      width: '30px',
+      height: '30px',
+      padding: '5px'
+    };
+    const isPC = isLandscape();
+
+    if (isPC) {
+      drillUpBtnStyle = {
+        ...drillUpBtnStyle,
+        top: '50px',
+        left: '120px'
+      };
+    } else {
+      drillUpBtnStyle = {
+        ...drillUpBtnStyle,
+        top: '10px',
+        right: '10px'
+      };
+    }
+
     return (
       <div>
         <div style={{ position: 'relative' }}>
@@ -136,18 +179,10 @@ export class HierarchicalVirusMap extends mixin<Props, State>() {
           />
           <button
             class="btn btn-dark"
-            style={{
-              display: this.state.path.length > 0 ? 'block' : 'none',
-              width: '30px',
-              height: '30px',
-              position: 'absolute',
-              top: '50px',
-              left: '120px',
-              padding: '5px'
-            }}
+            style={drillUpBtnStyle}
             onClick={this.navigateUp.bind(this)}
           >
-            <span class="fa fa-search-minus"></span>
+            <span class="fa fa-undo"></span>
           </button>
         </div>
       </div>

diff --git a/source/components/VirusChart.tsx b/source/components/VirusChart.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /**
  * WebCell 疫情数据折线图可视化组件
  * 本组件使用stack line chart和line chart展现信息
@@ -19,6 +20,7 @@ import {
   OverallCountryData
 } from '../adapters/patientStatInterface';
 import provinceName from '../../data/isaaclin/provinces.json';
+import { isLandscape } from '../utils';
 
 interface Props {
   data: OverallCountryData;
@@ -69,15 +71,7 @@ export class VirusChart extends mixin<Props, State>() {
   }
 
   public fixChartFontSize(baseFontSize: number) {
-    const isPC =
-      (window.innerWidth ||
-        document.documentElement.clientWidth ||
-        document.body.clientWidth) >
-      (window.innerHeight ||
-        document.documentElement.clientHeight ||
-        document.body.clientHeight) *
-        0.8;
-
+    const isPC = isLandscape();
     if (isPC) {
       return (
         (baseFontSize *

diff --git a/source/components/VirusMap.tsx b/source/components/VirusMap.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /**
  * WebCell疫情地图组件
  * 基于EchartsMap组件构建的疫情地图组件，传入地图url及各区域的具体信息后自动生成疫情地图。
@@ -16,6 +17,7 @@ import { PatientStatData } from '../adapters/patientStatInterface';
 import { VirusChart } from '../components/VirusChart';
 import { OverallCountryData } from '../adapters/patientStatInterface';
 import MapUrls from '../../map_data/map_dict.json';
+import { isLandscape } from '../utils';
 //import create_pieces from "../adapters/piece"
 
 type MapDataType = { [name: string]: PatientStatData };
@@ -314,6 +316,8 @@ export class VirusMap extends mixin<Props, {}>() {
       playInterval: 1500,
       currentIndex: data.timeline.length - 1,
       data: data.timeline,
+      left: 'left',
+      right: 0,
       label: {
         fontSize: 10,
         position: 10,
@@ -338,51 +342,42 @@ export class VirusMap extends mixin<Props, {}>() {
     return (data as STMapDataType).timeline !== undefined;
   }
 
-  public render(
-    {
-      name,
-      data,
-      chartOnClickCallBack,
-      currentChartArea,
-      chartData,
-      chartPath
-    }: Props,
-    {}
-  ) {
-    const isPC =
-      (window.innerWidth ||
-        document.documentElement.clientWidth ||
-        document.body.clientWidth) >
-      (window.innerHeight ||
-        document.documentElement.clientHeight ||
-        document.body.clientHeight) *
-        0.8;
-
+  public render({
+    name,
+    data,
+    chartOnClickCallBack,
+    currentChartArea,
+    chartData,
+    chartPath
+  }: Props) {
     // 缩放时间重新set一下option
+    const pcStyle = {
+      display: 'flex',
+      flexDirection: 'row',
+      width: '100%',
+      height: '100%'
+    };
+    const mobileStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%'
+    };
+    const isPC = isLandscape();
+    const containerStyle = isPC ? pcStyle : mobileStyle;
+    const mapStyle = {
+      width: isPC ? '65%' : '100%',
+      height: '100%'
+    };
+    const virusChartStyle = {
+      width: isPC ? '35%' : '100%',
+      height: '100%'
+    };
+
     return (
-      <div
-        style={
-          isPC
-            ? {
-                display: 'flex',
-                flexDirection: 'row',
-                width: '100%',
-                height: '100%'
-              }
-            : {
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                height: '200%'
-              }
-        }
-      >
+      <div style={containerStyle}>
         <EchartsMap
-          style={
-            isPC
-              ? { width: '65%', height: '100%' }
-              : { width: '100%', height: '100%' }
-          }
+          style={mapStyle}
           mapUrl={MapUrls[name]}
           mapName={mapName(name)}
           chartOptions={
@@ -394,11 +389,7 @@ export class VirusMap extends mixin<Props, {}>() {
           chartOnClickCallBack={chartOnClickCallBack}
         />
         <VirusChart
-          style={
-            isPC
-              ? { width: '35%', height: '100%' }
-              : { width: '100%', height: '100%' }
-          }
+          style={virusChartStyle}
           data={chartData}
           area={currentChartArea}
           path={chartPath}

diff --git a/source/utils.ts b/source/utils.ts
@@ -0,0 +1,12 @@
+// 宽屏模式（通常是 PC）
+export const isLandscape = () => {
+  return (
+    (window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth) >
+    (window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight) *
+      0.8
+  );
+};