UsageBar 使用量

2019-06-06

通过当前值、最大值等参数展现某一指标的使用量,比如硬盘、存储池的容量使用,license配额的使用等。

使用场景#

  • 展示资源占整体百分比
  • 某个资源的使用、消耗情况

百分比格式展示#

字节#

个数#

行内应用#

状态#

告警:大于 max 的 75%,小于 max 的 85%

危险:大于 max 的 85%

极限值处理#

水位线,阈值线#

参数类型默认值说明
nownumber-当前量
maxnumber0最大量
percentnumber-百分比
isPercentbool-数字以百分比为单位展示
isBytebool-数字以字节(B, KB, MB, GB...)为单位展示
formatTypestring-格式化输出,可选[decimal|binary]
isBulkbool-数字以数量(万, 亿, 兆, 京...)为单位展示
inlinebool-设置组件行内展示,width 为 120px
showZeroMaxbool-当 max 为 0 时,展示为 0+单位 或者无限制
hideNowbool-是否隐藏 now 的展示
hideRightbool-是否隐藏 right 的展示
withPercentbool-左边数值百分比展示
withUnavailablebool-2段以上数据的processbar https://react-bootstrap.netlify.com/components/progress/#progress-bar-props <ProgressBar> <ProgressBar striped variant="success" now={35} key={1} /> <ProgressBar variant="warning" now={20} key={2} /> </ProgressBar>;
unavailableDatanumber-不可用数据量
isExcludeWarningbool-是否排除告警(黄色)状态,排除后按常态展示
waterLinenumber-水位线
isHideFooterbool-是否隐藏 footer 的展示
extraFooterInfostring-footer的额外信息
seriesarray-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' }]
withLengedbool-series 模式下是否显示图例