visualize

index.js 中，首要当然是注册自己。此外，还加载两部分功能：plugins/kibana/visualize/editor/* 和 plugins/kibana/visualize/wizard/wizard.js。然后定义了一个 route，默认跳转 /visualize 到 /visualize/step/1。

editor

editor.js 中也定义了两个 route，分别是 /visualize/create 和 /visualize/edit/:id。然后还定义了一个controller，叫 VisEditor，对应的 HTML 是 plugins/kibana/visualize/editor/editor.html，其中用到两个 directive，分别是 visualize 和 vis-editor-sidebar。

其中 create 是先加载 ui/registry/vis_types，并检查 $route.current.params.type 是否存在，然后调用 savedVisualizations.get($route.current.params) 方法；而 edit 是直接调用 savedVisualizations.get($route.current.params.id)。

vis_types

实际注册了 vis_types 的地方包括：

  • plugins/table_vis/index.js
  • plugins/metric_vis/index.js
  • plugins/markdown_vis/index.js
  • plugins/kbn_vislib_vis_types/index.js

前三个是表单，最后一个是可视化图。内容如下：

  1. import visTypes from 'ui/registry/vis_types';
  2. visTypes.register(require('plugins/kbn_vislib_vis_types/histogram'));
  3. visTypes.register(require('plugins/kbn_vislib_vis_types/line'));
  4. visTypes.register(require('plugins/kbn_vislib_vis_types/pie'));
  5. visTypes.register(require('plugins/kbn_vislib_vis_types/area'));
  6. visTypes.register(require('plugins/kbn_vislib_vis_types/tile_map'));

以 histogram 为例解释一下 visTypes。下面的实现较长，我们拆成三部分：

第一部分，加载并生成VislibVisType对象：

  1. import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
  2. import VisSchemasProvider from 'ui/vis/schemas';
  3. import histogramTemplate from 'plugins/kbn_vislib_vis_types/editors/histogram.html';
  5. export default function HistogramVisType(Private) {
  6.   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
  7.   const Schemas = Private(VisSchemasProvider);
  9.   return new VislibVisType({
  10.     name: 'histogram',
  11.     title: 'Vertical bar chart',
  12.     icon: 'fa-bar-chart',
  13.     description: 'The goto chart for oh-so-many needs. Great for time and non-time data. Stacked or grouped, ' +
  14.     'exact numbers or percentages. If you are not sure which chart you need, you could do worse than to start here.',

第二部分，histogram 可视化所接受的参数默认值以及对应的参数编辑页面：

  1.       params: {
  2.         defaults: {
  3.           shareYAxis: true,
  4.           addTooltip: true,
  5.           addLegend: true,
  6.           legendPosition: 'right',
  7.           scale: 'linear',
  8.           mode: 'stacked',
  9.           times: [],
  10.           addTimeMarker: false,
  11.           defaultYExtents: false,
  12.           setYExtents: false,
  13.           yAxis: {}
  14.         },
  15.         scales: ['linear', 'log', 'square root'],
  16.         modes: ['stacked', 'percentage', 'grouped'],
  17.         editor: histogramTemplate
  18.       },

第三部分，histogram 可视化能接受的 Schema。一般来说，metric 数值聚合肯定是 Y 轴；bucket 聚合肯定是 X 轴；而在此基础上，Kibana4 还可以让 bucket 有不同效果，也就是 Schema 里的 segment(默认), group 和 split。根据效果不同，这里是各有增减的，比如饼图就不会有 group。

  1.       schemas: new Schemas([
  2.         {
  3.           group: 'metrics',
  4.           name: 'metric',
  5.           title: 'Y-Axis',
  6.           min: 1,
  7.           aggFilter: '!std_dev',
  8.           defaults: [
  9.             { schema: 'metric', type: 'count' }
  10.           ]
  11.         },
  12.         {
  13.           group: 'buckets',
  14.           name: 'segment',
  15.           title: 'X-Axis',
  16.           min: 0,
  17.           max: 1,
  18.           aggFilter: '!geohash_grid'
  19.         },
  20.         {
  21.           group: 'buckets',
  22.           name: 'group',
  23.           title: 'Split Bars',
  24.           min: 0,
  25.           max: 1,
  26.           aggFilter: '!geohash_grid'
  27.         },
  28.         {
  29.           group: 'buckets',
  30.           name: 'split',
  31.           title: 'Split Chart',
  32.           min: 0,
  33.           max: 1,
  34.           aggFilter: '!geohash_grid'
  35.         }
  36.       ])
  37.     });
  38.   };
  39. });

这里使用的 VislibVisType 类，继承自 ui/vis/VisType.js， VisType.js 内容如下：

  1. import VisSchemasProvider from 'ui/vis/schemas';
  3. export default function VisTypeFactory(Private) {
  4.   let VisTypeSchemas = Private(VisSchemasProvider);
  6. function VisType(opts) {
  7.   opts = opts || {};
  9.     this.name = opts.name;
  10.     this.title = opts.title;
  11.     this.responseConverter = opts.responseConverter;
  12.     this.hierarchicalData = opts.hierarchicalData || false;
  13.     this.icon = opts.icon;
  14.     this.description = opts.description;
  15.     this.schemas = opts.schemas || new VisTypeSchemas();
  16.     this.params = opts.params || {};
  17.     this.requiresSearch = opts.requiresSearch == null ? true : opts.requiresSearch; // Default to true unless otherwise specified
  18.   }
  20.   return VisType;
  21. };

基本跟上面 histogram 的示例一致，注意这里面的 responseConverter 和 hierarchicalData，是给不同的 visType 做相应数据转换的。在实际的 VislibVisType 中，就有下面一段：

  1.       if (this.responseConverter == null) {
  2.         this.responseConverter = pointSeries;
  3.       }

可见默认情况下，Kibana 是尝试把聚合结果转换成点线图数组的。

VislibVisType 中另一部分，则是扩展了一个自己的方法 createRenderbot，用来生成 VislibRenderbot 对象。这个类的实现在 ui/vislib_vis_type/vislib_renderbot.js，其中最关键的几行是：

  1. import VislibVisTypeBuildChartDataProvider from 'ui/vislib_vis_type/build_chart_data';
  2. module.exports = function VislibRenderbotFactory(Private, $injector) {
  3.   let buildChartData = Private(VislibVisTypeBuildChartDataProvider);
  4.   ...
  5.     self.vislibVis = new vislib.Vis(self.$el[0], self.vislibParams);
  6.   ...
  7.   VislibRenderbot.prototype.buildChartData = buildChartData;
  8.   VislibRenderbot.prototype.render = function (esResponse) {
  9.     this.chartData = this.buildChartData(esResponse);
  10.     return AngularPromise.delay(1).then(() => {
  11.       this.vislibVis.render(this.chartData, this.uiState);
  12.     });
  13.   };

也就是说，分为两部分，buildChartData 方法和 vislib.Vis 对象。

先来看 buildChartData 的实现：

  1. import AggResponseIndexProvider from 'ui/agg_response/index';
  2. ...
  3.     return function (esResponse) {
  4.       let vis = this.vis;
  5.       if (vis.isHierarchical()) {
  6.         return aggResponse.hierarchical(vis, esResponse);
  7.       }
  8.       let tableGroup = aggResponse.tabify(vis, esResponse, {
  9.         canSplit: true,
  10.         asAggConfigResults: true
  11.       });
  12.       let converted = convertTableGroup(vis, tableGroup);
  13.       if (!converted) {
  14.         converted = { rows: []  };
  15.       }
  16.       converted.hits = esResponse.hits.total;
  17.       return converted;
  18.     };
  19.     ....
  20.     function convertTable(vis, table) {
  21.       return vis.type.responseConverter(vis, table);
  22.     }

又看到 responseConverter 和 hierarchical 两个熟悉的字眼了，不过这回是另一个对象的方法，那么我们继续跟踪下去，看看这个 aggResponse 类是怎么回事：

  1. import AggResponseHierarchicalBuildHierarchicalDataProvider from 'ui/agg_response/hierarchical/build_hierarchical_data';
  2. import AggResponsePointSeriesPointSeriesProvider from 'ui/agg_response/point_series/point_series';
  3. import AggResponseTabifyTabifyProvider from 'ui/agg_response/tabify/tabify';
  4. import AggResponseGeoJsonGeoJsonProvider from 'ui/agg_response/geo_json/geo_json';
  6. export default function NormalizeChartDataFactory(Private) {
  7.   return {
  8.     hierarchical: Private(AggResponseHierarchicalBuildHierarchicalDataProvider),
  9.     pointSeries: Private(AggResponsePointSeriesPointSeriesProvider),
  10.     tabify: Private(AggResponseTabifyTabifyProvider),
  11.     geoJson: Private(AggResponseGeoJsonGeoJsonProvider)
  12.   };
  13. };

然后我们看 vislib.Vis 对象，定义在 ui/public/vislib/vis.js 里。同时我们注意到，定义 vislib 这个服务的 ui/public/vislib/index.js 里，还导入了一个模块，叫 d3，没错，我们离真正的绘图越来越近了。

vis.js 中加载了 ui/vislib/lib/handler/handler_types 和 ui/vislib/visualizations/vis_types：

  1. import VislibLibHandlerHandlerTypesProvider from 'ui/vislib/lib/handler/handler_types';
  2. import VislibVisualizationsVisTypesProvider from 'ui/vislib/visualizations/vis_types';

chartTypes 用来定义图：

  1. class Vis extends Events {
  2.   constructor($el, config) {
  3.     super(arguments);
  4.     this.el = $el.get ? $el.get(0) : $el;
  5.     this.binder = new Binder();
  6.     this.ChartClass = chartTypes[config.type];
  7.     this._attr = _.defaults({}, config || {}, {
  8.       legendOpen: true
  9.     });

接着是 handlerTypes 用来绘制图：

  1.     render(data, uiState) {
  2.       var chartType = this._attr.type;
  3.       this.data = data;
  4.       this.handler = handlerTypes[chartType](this) || handlerTypes.column(this);
  5.       this._runWithoutResizeChecker('render');
  6.     };
  9.     _runWithoutResizeChecker(method) {
  10.       this.resizeChecker.stopSchedule();
  11.       this._runOnHandler(method);
  12.       this.resizeChecker.saveSize();
  13.       this.resizeChecker.saveDirty(false);
  14.       this.resizeChecker.continueSchedule();
  15.     };
  16.     _runOnHandler = function (method) {
  17.       this.handler[method]();
  18.     };

ui/vislib/lib/handler/handler_types 中，根据不同的 vis_types，分别返回不同的处理对象，主要出自 ui/vislib/lib/handler/types/point_series, ui/vislib/lib/handler/types/pie 和 ui/vislib/lib/handler/types/tile_map。比如 histogram 就是 pointSeries.column。可以看到 point_series.js 中，对 column 是加上了 zeroFill:true, expandLastBucket:true 两个参数调用 create() 方法。而 create() 方法里的 new Handler() 传递的，显然就是给 d3.js 的绘图参数。而 Handler 具体初始化和渲染过程，则在被加载的 ui/vislib/lib/handler/handler.js 中。Handler.prototype.render 中如下一段：

  1. const selection = d3.select(this.el);
  2. const chartSelection = selection..selectAll('.chart');
  3. chartSelection.each(function (chartData) {
  4.   const chart = new self.ChartClass(self, this, chartData);
  5.   self.vis.activeEvents().forEach(function (event) {
  6.     self.enable(event, chart);
  7.   });
  9.   binder.on(chart.events, 'rendered', () => {
  10.     loadedCount++;
  11.     if (loadedCount === chartSelection.length) {
  12.       charts[0].events.emit('renderComplete');
  13.     }
  14.   });
  15.   charts.push(chart);
  16.   chart.render();
  17. });

这里面的 ChartClass() 就是在 vislib.js 中加载了的 ui/vislib/visualizations/vis_types 。它会根据不同的 vis_types，分别返回不同的可视化对象，包括：ui/vislib/visualizations/column_chart, ui/vislib/visualizations/pie_chart, ui/vislib/visualizations/line_chart, ui/vislib/visualizations/area_chart 和 ui/vislib/visualizations/tile_map。

这些对象都有同一个基类：ui/vislib/visualizations/_chart，其中有这么一段：

  1.     render() {
  2.       const selection = d3.select(this.chartEl);
  4.       selection.selectAll('*').remove();
  5.       selection.call(this.draw());
  6.     };

也就是说，各个可视化对象，只需要用 d3.js 或者其他绘图库，完成自己的 draw() 函数，就可以了！

draw 函数的实现一般格式，就像下面这段出自 LineChart 的代码：

  1.     draw() {
  2.       const self = this;
  3.       const $elem = $(this.chartEl);
  4.       const margin = this._attr.margin;
  5.       const elWidth = this._attr.width = $elem.width();
  6.       const elHeight = this._attr.height = $elem.height();
  7.       const scaleType = this.handler.yAxis.getScaleType();
  8.       const yScale = this.handler.yAxis.yScale;
  9.       const xScale = this.handler.xAxis.xScale;
  10.       const minWidth = 20;
  11.       const minHeight = 20;
  12.       const startLineX = 0;
  13.       const lineStrokeWidth = 1;
  14.       const addTimeMarker = this._attr.addTimeMarker;
  15.       const times = this._attr.times || [];
  16.       let timeMarker;
  18.       return function (selection) {
  19.         selection.each(function (data) {
  20.           const el = this;
  21.           const layers = data.series.map(function mapSeries(d) {
  22.             const label = d.label;
  23.             return d.values.map(function mapValues(e, i) {
  24.               return {
  25.                 _input: e,
  26.                 label: label,
  27.                 x: self._attr.xValue.call(d.values, e, i),
  28.                 y: self._attr.yValue.call(d.values, e, i)
  29.               };
  30.             });
  31.           });
  32.           const width = elWidth - margin.left - margin.right;
  33.           const height = elHeight - margin.top - margin.bottom;
  34.           const div = d3.select(el);
  35.           const svg = div.append('svg')
  36.           .attr('width', width + margin.left + margin.right)
  37.           .attr('height', height + margin.top + margin.bottom)
  38.           .append('g')
  39.           .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  41.           // 处理 data 到 svg 上
  42.           ...
  43.           self.events.emit('rendered', {
  44.             chart: data
  45.           });
  46.           return svg;
  47.         });
  48.       };
  49.     };

当然，为了代码逻辑，有些比较复杂的绘制，还是会继续拆分成其他文件的。比如 leaflet 地图，就是在 ui/vislib/visualizations/tile_map 里加载的 ui/vislib/visualizations/_map.js 完成。

从数据到 d3 渲染，要经过的主要流程就是这样。如果打算自己亲手扩展一个新的可视化方案的读者，可以具体参考我实现的 sankey 图：https://github.com/chenryn/kibana4/commit/4e0bcbeb4c8fd94807c3a0b1df2ac6f56634f9a5

savedVisualizations

这个类在 core_plugins/kibana/public/visualize/saved_visualizations/saved_visualizations.js 里定义。其中分三步，加载 core_plugins/kibana/public/visualize/saved_visualizations/_saved_vis，注册到 plugins/kibana/management/saved_object_registry，以及定义一个 angular service 叫 savedVisualizations。

plugins/kibana/visualize/saved_visualizations/_saved_vis 里是定义一个 angular factory 叫 SavedVis。这个类继承自 courier.SavedObject，主要有 _getLinkedSavedSearch 方法调用 savedSearches 获取在 discover 中保存的 search 对象，以及 visState 属性。该属性保存了 visualize 定义的 JSON 数据。

savedVisualizations 里主要就是初始化 SavedVis 对象，以及提供了一个 find 搜索方法。整个实现和上一节讲的 savedSearches 基本一样，就不再讲了。

Visualize

这个 directive 在 ui/visualize/visualize.js 中定义。而我们可以上拉看到的请求、响应、表格、性能数据，则使用的是 ui/visualize/spy/spy.js 中定义的另一个 directive visualizeSpy。

visualize.html 上定义了一个普通的 div，其 class 为 visualize-chart，在 visualize.js 中，通过 getter('.visualize-chart') 方法获取 div 元素：

  1.         function getter(selector) {
  2.           return function () {
  3.             let $sel = $el.find(selector);
  4.             if ($sel.size()) return $sel;
  5.           };
  6.         }
  7.         let getVisEl = getter('.visualize-chart');

然后创建一个 renderbot：

  1.         $scope.$watch('vis', prereq(function (vis, oldVis) {
  2.           let $visEl = getVisEl();
  3.           if (!$visEl) return;
  5.           if (!attr.editableVis) {
  6.             $scope.editableVis = vis;
  7.           }
  9.           if (oldVis) $scope.renderbot = null;
  10.           if (vis) $scope.renderbot = vis.type.createRenderbot(vis, $visEl);
  11.         }));

最后在 searchSource 对象变化，即有新的搜索响应返回时，完成渲染：

  1.         $scope.$watch('searchSource', prereq(function (searchSource) {
  2.           if (!searchSource || attr.esResp) return;
  3.           searchSource.onResults().then(function onResults(resp) {
  4.             if ($scope.searchSource !== searchSource) return;
  6.             $scope.esResp = resp;
  8.             return searchSource.onResults().then(onResults);
  9.           }).catch(notify.fatal);
  10.           searchSource.onError(notify.error).catch(notify.fatal);
  11.         }));
  12.         $scope.$watch('esResp', prereq(function (resp, prevResp) {
  13.           if (!resp) return;
  14.           $scope.renderbot.render(resp);
  15.         }));

VisEditorSidebar

这个 directive 在 plugins/kibana/visualize/editor/sidebar.js 中定义。对应的 HTML 是 plugins/kibana/visualize/editor/sidebar.html，其中又用到两个 directive，分别是 vis-editor-agg-group 和 vis-editor-vis-options。它们分别有 sidebar.js 加载的 plugins/kibana/visualize/editor/agg_group 和 plugins/kibana/visualize/editor/vis_options 提供。然后继续 HTML -> directive 下去，基本上 plugins/kibana/visualize/editor/ 目录下那堆 agg*.js 和 agg*.html 都是做这个用的。

其中比较有意思的，应该算是 agg_add.js。我们都知道，K4 最大的特点就是可以层叠子聚合，这个操作就是在这里完成的：

  1. import VisAggConfigProvider from 'ui/vis/agg_config';
  2. import uiModules from 'ui/modules';
  3. import aggAddTemplate from 'plugins/kibana/visualize/editor/agg_add.html';
  5. uiModules
  6. .get('kibana')
  7. .directive('visEditorAggAdd', function (Private) {
  8.   const AggConfig = Private(VisAggConfigProvider);
  10.   return {
  11.     restrict: 'E',
  12.     template: aggAddTemplate,
  13.     controllerAs: 'add',
  14.     controller: function ($scope) {
  15.       const self = this;
  17.       self.form = false;
  18.       self.submit = function (schema) {
  19.         self.form = false;
  21.         const aggConfig = new AggConfig($scope.vis, {
  22.           schema: schema
  23.         });
  24.         aggConfig.brandNew = true;
  25.         $scope.vis.aggs.push(aggConfig);
  26.       };
  27.     }
  28.   };
  29. });

另一个比较重要的是 core_plugins/kibana/public/visualize/editor/agg_params.js。其中加载了 ui/agg_types/index.js，又监听了 “agg.type” 变量，也就是实现了选择不同的 agg_types 时，提供不同的 agg_params 选项。比方说，选择 date_histogram，字段就只能是 @timestamp 这种 date 类型的字段。

ui/agg_types/index.js 中定义了所有可选 agg_types 的类。其中 metrics 包括：count, avg, sum, min, max, std_deviation, cardinality, percentiles, percentile_rank，具体实现分别存在 ui/agg_types/metrics/ 目录下的同名.js文件里；buckets 包括：date_histogram, histogram, range, date_range, ip_range, terms, filters, significant_terms, geo_hash，具体实现分别存在 ui/agg_types/buckets/ 目录下的同名.js文件里。

这些类定义中，都有比较类似的格式，其中 params 数组的第一个元素，都是类似这样：

  1. {
  2.   name: 'field',
  3.   filterFieldTypes: 'string'
  4. }

terms.js 里还多了一行 scriptable: true，而且 filterFieldTypes 是数组。

  1.         {
  2.           name: 'field',
  3.           scriptable: true,
  4.           filterFieldTypes: ['number', 'boolean', 'date', 'ip',  'string']
  5.         }

这个 filterFieldTypes 在 ui/vis/_agg_config.js 中，通过 fieldTypeFilter(this.vis.indexPattern.fields, fieldParam.filterFieldTypes); 得到可选字段列表。fieldTypeFilter 的具体实现在 filters/filed_type.js 中。

wizard

wizard.js 中提供两个 route 和对应的 controller。分别是 /visualize/step/1 对应 VisualizeWizardStep1，/visualize/step/2 对应 VisualizeWizardStep2。这两个的最终结果，都是跳转到 /visualize/create?type=* 下。