add circle_vis plugin

src/kibana/plugins/circle_vis/circle_chart.js

@@ -0,0 +1,60 @@
+define(function (require) {
+  return function CircleChartFactory(d3, Private) {
+
+    function CircleChart() {
+    }
+
+    CircleChart.prototype.draw = function (data, diameter) {
+      var format = d3.format(',d');
+
+      var pack = d3.layout.pack()
+        .size([diameter - 4, diameter - 4])
+        .value(function (d) {
+          return d.size;
+        });
+
+      d3.select('.circle-vis').selectAll('svg').remove();
+
+      var svg = d3.select('.circle-vis')
+        .append('svg')
+        .attr('width', diameter)
+        .attr('height', diameter)
+        .append('g')
+        .attr('transform', 'translate(2,2)');
+
+      d3.select(this.frameElement).style('height', diameter + 'px');
+
+      var node = svg.datum(data).selectAll('.node')
+        .data(pack.nodes)
+        .enter().append('g')
+        .attr('class', function (d) {
+          return d.children ? 'node' : 'leaf node';
+        })
+        .attr('transform', function (d) {
+          return 'translate(' + d.x + ',' + d.y + ')';
+        });
+
+      node.append('title')
+        .text(function (d) {
+          return d.name + (d.children ? '' : ': ' + format(d.size));
+        });
+
+      node.append('circle')
+        .attr('class', 'circle')
+        .attr('r', function (d) {
+          return d.r;
+        });
+
+      node.filter(function (d) {
+        return !d.children;
+      }).append('text')
+        .attr('dy', '.3em')
+        .style('text-anchor', 'middle')
+        .text(function (d) {
+          return d.name.substring(0, d.r / 3);
+        });
+    };
+
+    return CircleChart;
+  };
+});

src/kibana/plugins/circle_vis/circle_vis.html

@@ -0,0 +1,2 @@
+<div ng-controller="circleVisController" class="circle-vis">
+</div>

src/kibana/plugins/circle_vis/circle_vis.js

@@ -0,0 +1,52 @@
+define(function (require) {
+  // 利用するCSSとControllerを読み込む
+  require('css!plugins/circle_vis/circle_vis.css');
+  require('plugins/circle_vis/circle_vis_controller');
+
+  return function (Private) {
+    var TemplateVisType = Private(require('plugins/vis_types/template/template_vis_type'));
+    var Schemas = Private(require('plugins/vis_types/_schemas'));
+
+    return new TemplateVisType({
+      // グラフを一意に示す名前
+      name: 'circle',
+      // 画面に表示される名前
+      title: 'Circle',
+      // アイコン(Font Awesomeのアイコン名を指定)
+      icon: 'fa-circle-o',
+      // このグラフのテンプレートファイル
+      template: require('text!plugins/circle_vis/circle_vis.html'),
+      // このグラフ特有のパラメータ
+      params: {
+        // パラメータのデフォルト値
+        defaults: {
+          // 一番外側の円の直径
+          diameter: 960
+        },
+        // パラメータ入力画面(画面左のサイドバーに表示される)
+        editor: require('text!plugins/circle_vis/circle_vis_params.html')
+      },
+      // Elasticsearchに投げるクエリのAggregationsの定義
+      schemas: new Schemas([
+        {
+          // 円のサイズを決めるための項目
+          group: 'metrics',
+          name: 'metric',
+          title: 'Metric',
+          min: 2,
+          max: 2,
+          defaults: [
+            { schema: 'metric', type: 'count' }
+          ]
+        },
+        {
+          // グルーピングの項目。複数入力可能
+          group: 'buckets',
+          name: 'segment',
+          title: 'Grouping',
+          min: 1
+        }
+      ])
+    });
+  };
+});

src/kibana/plugins/circle_vis/circle_vis.less

@@ -0,0 +1,18 @@
+.circle-vis {
+  .circle {
+    opacity: 1;
+    fill: rgb(31, 119, 180);
+    fill-opacity: .25;
+    stroke: rgb(31, 119, 180);
+    stroke-width: 1px;
+  }
+
+  .leaf .circle {
+    fill: #ff7f0e;
+    fill-opacity: 1;
+  }
+
+  text {
+    font: 10px sans-serif;
+  }
+}

src/kibana/plugins/circle_vis/circle_vis_controller.js

@@ -0,0 +1,39 @@
+define(function (require) {
+  var _ = require('lodash');
+
+  // moduleサービスを取得
+  var module = require('modules').get('kibana/circle_vis', ['kibana']);
+
+  // moduleにコントローラを登録
+  module.controller('circleVisController', function ($scope, Private) {
+
+    var CircleChart = Private(require('plugins/circle_vis/circle_chart'));
+    var chart = new CircleChart();
+
+    // ユーザーが入力したAggregationsの情報を取得
+    var metricId = $scope.vis.aggs.bySchemaGroup.metrics[1].id;
+    var bucketIds = $scope.vis.aggs.bySchemaGroup.buckets;
+
+    // Elasticsearchのレスポンスの変化を監視
+    $scope.$watch('esResponse', function (resp) {
+      if (resp) {
+        // D3.jsで描画するときに扱いやすいように、Elasticsearchのレスポンスを加工する
+        var createChildren = function (data, index) {
+          return _.map(data[bucketIds[index].id].buckets, function (v) {
+            var child = {'name': v.key};
+            if (v[metricId]) child['size'] = v[metricId].value;
+            if (bucketIds[index + 1] && v[bucketIds[index + 1].id]) child['children'] = createChildren(v, index + 1);
+            return child;
+          });
+        };
+        var res = {
+          'name': 'root',
+          'children': createChildren(resp.aggregations, 0)
+        };
+
+        // グラフの描画をおこなう
+        chart.draw(res, $scope.vis.params.diameter);
+      }
+    });
+  });
+});

src/kibana/plugins/circle_vis/circle_vis_params.html

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <label>Diameter</label>
+  <input type="range" ng-model="vis.params.diameter" class="form-control" min="320" max="1280" />
+</div>

src/kibana/plugins/circle_vis/index.js

@@ -0,0 +1,6 @@
+define(function (require) {
+  // 新しいグラフの種類を登録
+  require('registry/vis_types').register(function (Private) {
+    return Private(require('plugins/circle_vis/circle_vis'));
+  });
+});

tasks/config/less.js

@@ -13,7 +13,8 @@ module.exports = {
       '<%= plugins %>/visualize/styles/visualization.less',
       '<%= plugins %>/visualize/styles/main.less',
       '<%= plugins %>/table_vis/table_vis.less',
-      '<%= plugins %>/metric_vis/metric_vis.less'
+      '<%= plugins %>/metric_vis/metric_vis.less',
+      '<%= plugins %>/circle_vis/circle_vis.less'
     ],
     expand: true,
     ext: '.css',