From 81ff030b634c53bb2bd02ceebb6569126886d26d Mon Sep 17 00:00:00 2001
From: chen shuai <qixian.cs@outlook.com>
Date: Mon, 25 Mar 2019 11:51:56 +0800
Subject: [PATCH] feat: Optimize the display of toolTips

---
 src/components/Charts/MiniProgress/index.js   | 42 +++++++++----------
 src/components/Charts/MiniProgress/index.less |  2 +
 src/pages/Dashboard/IntroduceRow.js           | 12 +++++-
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js
index 16ca2b7b..6e9840f9 100644
--- a/src/components/Charts/MiniProgress/index.js
+++ b/src/components/Charts/MiniProgress/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-import { formatMessage } from 'umi/locale';
 
 import styles from './index.less';
 
@@ -10,28 +9,27 @@ const MiniProgress = ({
   color = 'rgb(19, 194, 194)',
   strokeWidth,
   percent,
-}) => (
-  <div className={styles.miniProgress}>
-    <Tooltip
-      title={`${targetLabel ||
-        formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(': ')} ${target}%`}
-    >
-      <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
-        <span style={{ backgroundColor: color || null }} />
-        <span style={{ backgroundColor: color || null }} />
+}) => {
+  return (
+    <div className={styles.miniProgress}>
+      <Tooltip title={targetLabel}>
+        <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
+          <span style={{ backgroundColor: color || null }} />
+          <span style={{ backgroundColor: color || null }} />
+        </div>
+      </Tooltip>
+      <div className={styles.progressWrap}>
+        <div
+          className={styles.progress}
+          style={{
+            backgroundColor: color || null,
+            width: percent ? `${percent}%` : null,
+            height: strokeWidth || null,
+          }}
+        />
       </div>
-    </Tooltip>
-    <div className={styles.progressWrap}>
-      <div
-        className={styles.progress}
-        style={{
-          backgroundColor: color || null,
-          width: percent ? `${percent}%` : null,
-          height: strokeWidth || null,
-        }}
-      />
     </div>
-  </div>
-);
+  );
+};
 
 export default MiniProgress;
diff --git a/src/components/Charts/MiniProgress/index.less b/src/components/Charts/MiniProgress/index.less
index 40ba70be..e1e0b4fc 100644
--- a/src/components/Charts/MiniProgress/index.less
+++ b/src/components/Charts/MiniProgress/index.less
@@ -19,6 +19,8 @@
     position: absolute;
     top: 0;
     bottom: 0;
+    z-index: 9;
+    width: 20px;
     span {
       position: absolute;
       top: 0;
diff --git a/src/pages/Dashboard/IntroduceRow.js b/src/pages/Dashboard/IntroduceRow.js
index 7262826f..e33a4001 100644
--- a/src/pages/Dashboard/IntroduceRow.js
+++ b/src/pages/Dashboard/IntroduceRow.js
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { Row, Col, Icon, Tooltip } from 'antd';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage, formatMessage } from 'umi/locale';
 import styles from './Analysis.less';
 import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
 import Trend from '@/components/Trend';
@@ -135,7 +135,15 @@ const IntroduceRow = memo(({ loading, visitData }) => (
         }
         contentHeight={46}
       >
-        <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
+        <MiniProgress
+          percent={78}
+          strokeWidth={8}
+          target={80}
+          targetLabel={`${formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(
+            ': '
+          )}80%`}
+          color="#13C2C2"
+        />
       </ChartCard>
     </Col>
   </Row>
-- 
GitLab