[WIP] Example visualizations

package.json

@@ -109,6 +109,7 @@
     "brace": "0.5.1",
     "bunyan": "1.7.1",
     "check-hash": "1.0.1",
+    "circos": "2.0.3",
     "color": "1.0.3",
     "commander": "2.8.1",
     "css-loader": "0.17.0",

src/core_plugins/circos_vis/index.js

@@ -0,0 +1,9 @@
+export default function (kibana) {
+  return new kibana.Plugin({
+    uiExports: {
+      visTypes: [
+        'plugins/circos_vis/circos_vis'
+      ]
+    }
+  });
+}

src/core_plugins/circos_vis/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "circos_vis",
+  "version": "kibana"
+}

src/core_plugins/circos_vis/public/circos_vis.js

@@ -0,0 +1,76 @@
+import './circos_vis.less';
+import './vis_options';
+import { CATEGORY } from 'ui/vis/vis_category';
+import { VisSchemasProvider } from 'ui/vis/editors/default/schemas';
+import { VisFactoryProvider } from 'ui/vis/vis_factory';
+import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
+import { CircosVisController } from './vis_controller';
+import { CircosResponseHandlerProvider } from './response_handler';
+
+function Test1Provider(Private) {
+  const VisFactory = Private(VisFactoryProvider);
+  const Schemas = Private(VisSchemasProvider);
+  const responseHandler = Private(CircosResponseHandlerProvider).handler;
+
+  // return the visType object, which kibana will use to display and configure new Vis object of this type.
+  return VisFactory.createBaseVisualization({
+    name: 'circos_vis',
+    title: 'Circos',
+    icon: 'fa fa-gear',
+    description: 'Circos visualization',
+    category: CATEGORY.OTHER,
+    visualization: CircosVisController,
+    visConfig: {
+      defaults: {
+        seriesParams: [],
+        layout: {
+          gap: 0,
+          showLabels: true,
+        }
+      },
+    },
+    editorConfig: {
+      collections: {
+        chartTypes: ['heatmap', 'histogram', 'line', 'scatter'],
+        colorSchemas: ['OrRd', 'GnBu', 'BuGn', 'YlGn'],
+      },
+      optionsTemplate: '<circos-vis-options></circos-vis-options>',
+      schemas: new Schemas([
+        {
+          group: 'metrics',
+          name: 'metric',
+          title: 'Y-Axis',
+          min: 1,
+          aggFilter: ['!geo_centroid'],
+          defaults: [
+            { schema: 'metric', type: 'count' }
+          ]
+        },
+        {
+          group: 'buckets',
+          name: 'segment',
+          title: 'X-Axis',
+          min: 0,
+          max: 1,
+          aggFilter: '!geohash_grid'
+        },
+        {
+          group: 'buckets',
+          name: 'split',
+          title: 'Split Circle',
+          min: 0,
+          max: 1,
+          aggFilter: '!geohash_grid'
+        }
+      ])
+    },
+    requestHandler: 'courier',
+    responseHandler: responseHandler,
+  });
+}
+
+// register the provider with the visTypes registry
+VisTypesRegistryProvider.register(Test1Provider);
+
+// export the provider so that the visType can be required with Private()
+export default Test1Provider;

src/core_plugins/circos_vis/public/circos_vis.less

@@ -0,0 +1,5 @@
+@import (reference) "~ui/styles/mixins.less";
+
+.circos_vis {
+  /* add your styles here */
+}

src/core_plugins/circos_vis/public/response_handler.js

@@ -0,0 +1,58 @@
+import _ from 'lodash';
+import { AggResponseIndexProvider } from 'ui/agg_response/index';
+
+const CircosResponseHandlerProvider = function (Private) {
+  const aggResponse = Private(AggResponseIndexProvider);
+
+  return {
+    name: 'circos',
+    handler: function (vis, response) {
+      return new Promise((resolve) => {
+
+        const tableGroup = aggResponse.tabify(vis, response, {
+          canSplit: true,
+          asAggConfigResults: true
+        });
+
+        const layouts = [];
+        const series = [];
+
+        _.forIn(tableGroup.tables, (table, key) => {
+          if (!table.rows) table = table.tables[0];
+          layouts.push({
+            id: key,
+            label: table.$parent.key,
+            len: table.rows.length
+          });
+
+          const cnt = [];
+          table.rows.forEach(row => {
+            for (let serieCnt = 0; serieCnt < row.length - 1; serieCnt++) {
+              if (!series[serieCnt]) {
+                series[serieCnt] = [];
+              }
+              if (!cnt[serieCnt]) {
+                cnt[serieCnt] = 0;
+              }
+              const value = row[serieCnt + 1].value;
+              series[serieCnt].push({
+                block_id: key,
+                value: value,
+                start: cnt[serieCnt]++,
+                position: (cnt[serieCnt] + (cnt[serieCnt] - 1)) / 2,
+                end: cnt[serieCnt]
+              });
+            }
+          });
+        });
+
+        resolve({
+          layout: layouts,
+          series: series,
+        });
+      });
+    }
+  };
+};
+
+export { CircosResponseHandlerProvider };

src/core_plugins/circos_vis/public/vis_controller.js

@@ -0,0 +1,68 @@
+import Circos from 'circos';
+
+class CircosVisController {
+  constructor(el, vis) {
+    this.el = el;
+    this._vis = vis;
+  }
+
+  render(visData) {
+
+    this.visData = visData;
+    if (this.circos) {
+      this.destroy();
+    }
+
+
+    const width = this.el.offsetWidth;
+    const height = this.el.offsetHeight;
+    const radius = Math.min(width, height) / 20;
+
+    this.circos = new Circos({
+      container: this.el,
+      width: this.el.offsetWidth * 0.9,
+      height: this.el.offsetHeight * 0.9,
+    });
+
+    this.circos.layout(visData.layout, {
+      gap: this._vis.params.layout.gap,
+      innerRadius: radius,
+      outerRadius: radius,
+      labels: {
+        display: this._vis.params.layout.showLabels,
+        radialOffset: this._vis.params.layout.offsetLabels
+      },
+      ticks: { display: true, labels: false }
+    });
+
+    visData.series.forEach((serie, i) => {
+      const seriesParams = this._vis.params.seriesParams[i];
+      this.circos[seriesParams.type](`series-${i}`, serie, {
+        innerRadius: seriesParams.innerRadius,
+        outerRadius: seriesParams.outerRadius,
+        color: seriesParams.colorSchema,
+        tooltipContent: (datum) => {
+          return datum.value;
+        }
+      });
+    });
+
+    this.circos.render();
+
+
+  }
+
+  resize() {
+    if (!this.circos) return;
+    this.render(this.visData);
+  }
+
+  destroy() {
+    if (this.circos) {
+      this.el.innerHTML = '';
+      this.circos = null;
+    }
+  }
+}
+
+export { CircosVisController };

src/core_plugins/circos_vis/public/vis_options.html

@@ -0,0 +1,151 @@
+<div>
+  <div class="kuiSideBarSection kuiSideBarSection__main">
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Metrics
+    </div>
+  </div>
+
+  <div
+    ng-repeat="chart in vis.params.seriesParams track by $index"
+    class="kuiSideBarSection"
+  >
+    <div class="kuiSideBarCollapsibleTitle">
+      <div
+        ng-init="isSeriesOpen = ($index === 0)"
+        class="kuiSideBarCollapsibleTitle__label"
+        ng-click="isSeriesOpen = !isSeriesOpen"
+        kbn-accessible-click
+      >
+        <span
+          aria-hidden="true"
+          ng-class="{ 'fa-caret-down': isSeriesOpen, 'fa-caret-right': !isSeriesOpen }"
+          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
+        ></span>
+        <span class="kuiSideBarCollapsibleTitle__text">
+          {{chart.label}}
+        </span>
+      </div>
+    </div>
+
+    <div ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
+      <!-- General -->
+      <div class="kuiSideBarSection">
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'seriesType' + $index }}">
+            Chart Type
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'seriesType' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="chart.type"
+              ng-options="mode for mode in vis.type.editorConfig.collections.chartTypes"
+            ></select>
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'innerRadius' + $index }}">
+            Inner Radius
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input
+              id="{{ 'innerRadius' + $index }}"
+              class="kuiSideBarInput"
+              ng-model="chart.innerRadius"
+              type="number"
+              min="1"
+              max="10"
+            >
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'outerRadius' + $index }}">
+            Outer Radius
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input
+              id="{{ 'outerRadius' + $index }}"
+              class="kuiSideBarInput"
+              ng-model="chart.outerRadius"
+              type="number"
+              min="1"
+              max="10"
+            >
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="colorSchema">
+            Color Schema
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="colorSchema"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="chart.colorSchema"
+              ng-options="color for color in vis.type.editorConfig.collections.colorSchemas"
+            ></select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="height: 10px"></div>
+  </div>
+  <div class="kuiSideBarSection kuiSideBarSection__main">
+    <div class="kuiSideBarSectionTitle">
+      <div class="kuiSideBarSectionTitle__text">
+        Style
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="circleGap">
+        Gap
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input
+          id="circleGap"
+          class="kuiSideBarInput"
+          ng-model="vis.params.layout.gap"
+          type="number"
+          step="0.01"
+          min="0"
+          max="1"
+        >
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="showLabels">
+        Show Labels
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.layout.showLabels">
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="offsetLabels">
+        Offset Labels
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input
+          id="offsetLabels"
+          class="kuiSideBarInput"
+          ng-model="vis.params.layout.offsetLabels"
+          type="number"
+          step="5"
+          min="0"
+          max="200"
+        >
+      </div>
+    </div>
+
+  </div>
+</div>