feat: enable extra info shown in UsageBar footer

Signed-off-by: linsheng <linsheng1@xsky.com>
xsky-fe · Mar 21, 2023 · efe9130 · efe9130
1 parent 1b8c030
commit efe9130
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/src/components/UsageBar/index.tsx b/src/components/UsageBar/index.tsx
@@ -41,6 +41,7 @@ const UsageBar: React.FC<UsageBarProps> = props => {
     isExcludeWarning,
     waterLine,
     isHideFooter,
+    extraFooterInfo,
     formatType,
     series,
     withLenged,
@@ -176,7 +177,7 @@ const UsageBar: React.FC<UsageBarProps> = props => {
   }
 
   return (
-    <div className={`UsageBar ${inline ? 'inline' : ''}`}>
+    <div className={`UsageBar ${inline ? 'inline' : ''} ${extraFooterInfo ? 'hasExtraInfo' : ''}`}>
       <ProgressBar>
         {lodash.map(finalSeries, ({ bsStyle, perc }, index) => (
           // bs ProgressBar 只支持最多 5 种 style，索引摒弃 bsStyle 属性，改用组装 className
@@ -195,7 +196,10 @@ const UsageBar: React.FC<UsageBarProps> = props => {
       )}
       {!isHideFooter && !hasSeries && (
         <div className="UsageBar__footer">
-          <div className="UsageBar__footer--left">{left}</div>
+          <div className="UsageBar__footer--left">
+            {left}
+            <span className="UsageBar__footer--extra">{extraFooterInfo}</span>
+          </div>
           <div className="UsageBar__footer--right">{right}</div>
         </div>
       )}
@@ -287,6 +291,10 @@ UsageBar.propTypes = {
    * 是否隐藏 footer 的展示
    **/
   isHideFooter: PropTypes.bool,
+  /**
+   * footer的额外信息
+   */
+  extraFooterInfo: PropTypes.string,
   /**
    * 2段以上 processbar 的数据集，该模式下支持（isPercent，isByte，isBulk，inline，withLenged）等属性
    * [{ name: 'pool1', value: 20, bsStyle: 'primary' }, { name: 'pool2', value: 40, bsStyle: 'success' }, { name: 'pool3', value: 20, bsStyle: 'error' }]

diff --git a/src/components/UsageBar/style.scss b/src/components/UsageBar/style.scss
@@ -10,6 +10,9 @@
   &.inline {
     display: inline-block;
     width: 120px;
+    &.hasExtraInfo {
+      width: 200px;
+    }
   }
   &__footer {
     display: flex;
@@ -19,6 +22,9 @@
       white-space: nowrap;
       margin-right: 10px;
     }
+    &--extra {
+      color: #808495;
+    }
     &--right {
       white-space: nowrap;
     }

diff --git a/src/interface.tsx b/src/interface.tsx
@@ -97,6 +97,7 @@ export interface UsageBarProps {
   isExcludeWarning?: boolean;
   waterLine?: number;
   isHideFooter?: boolean;
+  extraFooterInfo?: string;
   formatType?: string;
   series?: Array<UsageBarSerie>;
   withLenged?: boolean;

diff --git a/stories/UsageBar.stories.tsx b/stories/UsageBar.stories.tsx
@@ -83,4 +83,20 @@ storiesOf('DATA SHOW | UsageBar', module)
       <h4>SERIES 模式，isPercent，附带图例</h4>
       <UsageBar series={BYTESSERIES} isPercent withLenged />
     </>
+  ))
+  .add('extra info', () => (
+    <>
+      <h4>附带额外信息</h4>
+      <UsageBar isByte now={NOW} max={MAX} extraFooterInfo='（压缩后 100 GB）' />
+      <UsageBar isByte now={NOW} max={MAX} extraFooterInfo='（压缩后 100 GB）' />
+      <UsageBar isBulk now={NOW} max={MAX} extraFooterInfo='（压缩后 100 GB）' />
+      <UsageBar isBulk percent={NOW / MAX} max={MAX} extraFooterInfo='（压缩后 100 GB）' />
+      <>
+        <UsageBar now={NOW} max={MAX} isPercent inline extraFooterInfo='（压缩后 100 GB）' />
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <UsageBar now={NOW} max={MAX} isByte inline extraFooterInfo='（压缩后 100 GB）' />
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <UsageBar now={NOW} max={MAX} isBulk inline extraFooterInfo='（压缩后 100 GB）' />
+      </>
+    </>
   ))