fix: compatibility of safari (PaddlePaddle#674)

PeterPanZH · Jun 23, 2020 · 62b4802 · 62b4802
1 parent f31522f
commit 62b4802
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 41 deletions.
diff --git a/frontend/packages/core/components/LineChart.tsx b/frontend/packages/core/components/LineChart.tsx
@@ -1,32 +1,15 @@
 import * as chart from '~/utils/chart';
 
 import React, {useEffect, useImperativeHandle} from 'react';
-import {WithStyled, position, primaryColor, size} from '~/utils/style';
+import {WithStyled, primaryColor} from '~/utils/style';
+import useECharts, {Wrapper} from '~/hooks/useECharts';
 
 import {EChartOption} from 'echarts';
 import GridLoader from 'react-spinners/GridLoader';
 import defaultsDeep from 'lodash/defaultsDeep';
 import {formatTime} from '~/utils';
-import styled from 'styled-components';
-import useECharts from '~/hooks/useECharts';
 import {useTranslation} from '~/utils/i18n';
 
-const Wrapper = styled.div`
-    position: relative;
-
-    > .echarts {
-        height: 100%;
-    }
-
-    > .loading {
-        ${size('100%')}
-        ${position('absolute', 0, null, null, 0)}
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-`;
-
 type LineChartProps = {
     options?: EChartOption;
     title?: string;

diff --git a/frontend/packages/core/components/StackChart.tsx b/frontend/packages/core/components/StackChart.tsx
@@ -1,33 +1,14 @@
 import * as chart from '~/utils/chart';
 
 import React, {useCallback, useEffect, useImperativeHandle} from 'react';
-import {WithStyled, position, primaryColor, size} from '~/utils/style';
+import {WithStyled, primaryColor} from '~/utils/style';
+import useECharts, {Wrapper} from '~/hooks/useECharts';
 
 import {EChartOption} from 'echarts';
 import GridLoader from 'react-spinners/GridLoader';
-import {dataURL2Blob} from '~/utils/image';
 import defaultsDeep from 'lodash/defaultsDeep';
-import {saveAs} from 'file-saver';
-import styled from 'styled-components';
-import useECharts from '~/hooks/useECharts';
 import {useTranslation} from '~/utils/i18n';
 
-const Wrapper = styled.div`
-    position: relative;
-
-    > .echarts {
-        height: 100%;
-    }
-
-    > .loading {
-        ${size('100%')}
-        ${position('absolute', 0, null, null, 0)}
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-`;
-
 type renderItem = NonNullable<EChartOption.SeriesCustom['renderItem']>;
 type renderItemArguments = NonNullable<renderItem['arguments']>;
 type RenderItem = (

diff --git a/frontend/packages/core/hooks/useECharts.ts b/frontend/packages/core/hooks/useECharts.ts
@@ -1,9 +1,10 @@
 import {MutableRefObject, useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
-import {maskColor, primaryColor, textColor} from '~/utils/style';
+import {maskColor, position, primaryColor, size, textColor} from '~/utils/style';
 
 import {ECharts} from 'echarts';
 import {dataURL2Blob} from '~/utils/image';
 import {saveAs} from 'file-saver';
+import styled from 'styled-components';
 
 const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElement>(options: {
     loading?: boolean;
@@ -99,3 +100,22 @@ const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElemen
 };
 
 export default useECharts;
+
+export const Wrapper = styled.div`
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+
+    > .echarts {
+        width: 100%;
+    }
+
+    > .loading {
+        ${size('100%')}
+        ${position('absolute', 0, null, null, 0)}
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+`;