dd-rc-mStock

0.0.12 • Public • Published

dd-rc-mStock


监控图表组件
可以通过节点空间和监控名称获取监控数据,也可以直接传入监控数据,二者必须选一

安装

dd-rc-mStock

示例

  import MStock from 'dd-rc-mStock';
  <MStock ns="xxx.xxx.xxx" mName="cpu.idle" mode={1} />

Props

参数 说明 类型 默认值
ns 节点空间 string
mName 监控名称 string
mode 1: 大图模式;2: 小图模式,收缩工具条到图标中,关闭图表导航等 number 1
mData 监控数据 监控图表的配置依赖mData数据,以及series接口需要mData object
callbacks 回调 object
hConfig 图表配置 可以对曲线图做一些个性化配置Highstock Api object

mData

{
  'ns':               节点空间 {String} 例如 "collect.api.xxx.com"
  'mName':            监控名称 {String} 例如 "cpu.idle"
  'aggregate':        聚合计算 {String} "avg"、"sum"、"max"、"min"
  'dataGrouping':     采样算法 {String} "avg"、"max"、"min"
  'interval':         采集周期 {Number} (秒)
  'measurement_type': 采集类型 {String} 例如 "CPU"、"LOG"...
  'unit':             Y轴单位  {String} 例如 "%"...
  'yaxis':            Y轴范围值{Array}  例如 "[-10, 0, 10]", 服务储传来的是数组字符串,后面需要转换成数组
  'stime':            开始时间 {String} 毫秒时间戳
  'etime':            结束时间 {String} 毫秒时间戳
  'selectedTags':     已选择Tags {Object} 例如 selectedTags: { status: ['404', '200'] }
}

callbacks

  • beforeInitChart(config) 曲线图初始化前回调,可以在初始化前再次对配置做修复,返回新的配置
  • initChart(chart) 曲线图初始化回调,需要自己加载以及处理 seriesData,非必要场景不建议使用,会覆盖内置的方法
  • afterInitChart(chart, seriesData) 曲线图初始化后回调, 可以在渲染完曲线图后做一些后置操作

Methods

  • getChart 返回highstock实例
  • setChart 更新highstock实例
  • stockUpdate 更新图表
  • getMData 获取图表数据
  • setMData 更新图表数据

Readme

Keywords

none

Package Sidebar

Install

npm i dd-rc-mStock

Weekly Downloads

2

Version

0.0.12

License

MIT

Last publish

Collaborators

  • dd-dxq