Commit 81ff030b authored by chen shuai's avatar chen shuai

feat: Optimize the display of toolTips

parent 2d409d42
import React from 'react';
import { Tooltip } from 'antd';
import { formatMessage } from 'umi/locale';
import styles from './index.less';
......@@ -10,12 +9,10 @@ const MiniProgress = ({
color = 'rgb(19, 194, 194)',
strokeWidth,
percent,
}) => (
}) => {
return (
<div className={styles.miniProgress}>
<Tooltip
title={`${targetLabel ||
formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(': ')} ${target}%`}
>
<Tooltip title={targetLabel}>
<div className={styles.target} style={{ left: target ? `${target}%` : null }}>
<span style={{ backgroundColor: color || null }} />
<span style={{ backgroundColor: color || null }} />
......@@ -32,6 +29,7 @@ const MiniProgress = ({
/>
</div>
</div>
);
);
};
export default MiniProgress;
......@@ -19,6 +19,8 @@
position: absolute;
top: 0;
bottom: 0;
z-index: 9;
width: 20px;
span {
position: absolute;
top: 0;
......
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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment