可视化组件PrometheusGraph使用

官方文档：weaveworks

使用心得：

引入配置：

step1:当然是引入graph文件包

step2:app.js中引入需要的样式主题

step3. 引入app.js成全局对象

<ThemeProvider theme={theme}>

*************************************

</ThemeProvider>

step4. 安装全局依赖

从无到有，安装一下依赖包，"styled-components": "^3.4.9"当前版本号固定，因为我安装了最新的会引发AxisLine的问题，具体可能和版本有问题

1，可视化组件PrometheusGraph使用

一、组件的基本属性

1.multiSeries：渲染的数据，后台获取（必须的）

2.stepDurationSec 多长时间计算一次数据变化（单位秒）(必须的)

3.startTimeSec 开始记录数据的时间日期转秒（单位秒）(必须的)

4.endTimeSec 结束记录数据的时间日期转秒（单位秒）(必须的)

5.colorTheme 枚举， 'mixed', 'blue', 'purple'三种颜色可选 (非必须的)

6.metricUnits 枚举 'numeric', 'seconds', 'bytes', 'percent'四中单位可选，second单位是秒(非必须的，默认numeric)

7.valuesMinSpread 设置一个Y轴最大值，设置小了没有显示(非必须的，默认按数据最大值和最小值计算得出y轴高度)

8.showStacked 线条的样式，默认堆叠显示，或者折线显示(必须的，默认堆叠图形)

9.legendShown 是否显示每个job（）

10、loading 图形加载的状态（默认false）

11、error错误信息提示

12selectedLegendKeys默认job项

13、getSeriesKey 选择job的函数

14、deployments在某个时间节点显示的信息

15、onDeploymentClick 根据deployments提供的数据节点触发的事件函数

16.renderLegendItemSuffix 在legend菜单栏增加自定义内容

代码使用：

<PrometheusGraph

showStacked={showStacked}

multiSeries={dataSource}// 渲染的数据，后台获取

stepDurationSec={10}//多长时间计算一次数据变化（单位秒）(必须的)

startTimeSec={startTime}//开始记录数据的时间日期转秒

endTimeSec={endTime}//结束记录数据的时间日期转秒

loading={loading}//图形加载的状态

error={dataSource.length <= 0 ? i18n.common.noData : null}//错误信息提示

metricUnits="bytes"

colorTheme="blue"

legendShown={true}//是否显示每个job（）

getSeriesNameParts={({ metric }) => [

JSON.stringify(metric),

// _.join(memoryTemplate, '\n')

]}

图：