{"name": "traffic_light_vis","version": "0.1.0","description": "An awesome Kibana plugin for red/yellow/green status visualize"}
这两个基础文件格式都比较固定,除了改个名就基本 OK 了。
然后我们看最关键的可视化对象定义 public/traffic_light_vis.js 内容:
define(function (require) {// 加载样式表require('plugins/traffic_light_vis/traffic_light_vis.less');// 加载控制器程序require('plugins/traffic_light_vis/traffic_light_vis_controller');// 注册到 vis_typesrequire('ui/registry/vis_types').register(TrafficLightVisProvider);functionTrafficLightVisProvider(Private) {// TemplateVisType 基类,适用于基础的 metric 和数据表格式的可视化定义。实际上,Kibana4 的 metric_vis 和 table_vis 就继承自这个,// Kibana4 还有另一个基类叫 VisLibVisType,其他使用 D3.js 做可视化的,继承这个。var TemplateVisType =Private(require('ui/template_vis_type/TemplateVisType'));var Schemas =Private(require('ui/Vis/Schemas'));// 模板化的 visType 对象定义,用来配置和展示returnnewTemplateVisType({ name:'traffic_light',// 显示在 visualize 选择列表里的名称,描述,小图标 title:'Traffic Light', description:'Great for one-glance status readings, the traffic light visualization expresses in green / yellow / red the position of a single value in relation to low and high thresholds.', icon:'fa-car',// 可视化效果模板页面 template:require('plugins/traffic_light_vis/traffic_light_vis.html'), params: { defaults: { fontSize:60 },// 编辑参数的页面 editor:require('plugins/traffic_light_vis/traffic_light_vis_params.html') },// 在编辑页面上可以选择的 aggregation 类型。 schemas:newSchemas([ { group:'metrics', name:'metric', title:'Metric', min:1, defaults: [ { type:'count', schema:'metric' } ] } ]) }); }// export the provider so that the visType can be required with Private()return TrafficLightVisProvider;});