Map enhancements

src/core_plugins/assets/index.js

@@ -0,0 +1,13 @@
+import path from 'path';
+
+console.log(__dirname);
+
+//you'll need something like
+//https://localhost:5601/kzf/plugins/assets/state.geojson
+//https://localhost:5601/kzf/plugins/choropleth/data/state.geojson
+module.exports = function (kibana) {
+  return new kibana.Plugin({
+    id: 'assets',
+    publicDir: path.resolve(__dirname, 'public')
+  });
+};

src/core_plugins/assets/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "assets",
+  "version": "kibana",
+  "description": "An Asset Serving Plugin"
+}

src/core_plugins/choropleth/index.js

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

src/core_plugins/choropleth/package.json

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

src/core_plugins/choropleth/public/choropleth.less

@@ -0,0 +1,7 @@
+.choropleth-vis {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/core_plugins/choropleth/public/choropleth_controller.html

@@ -0,0 +1,3 @@
+<div ng-controller="KbnChoroplethController" class="choropleth-vis">
+
+</div>

src/core_plugins/choropleth/public/choropleth_controller.js

@@ -0,0 +1,90 @@
+import uiModules from 'ui/modules';
+import _ from 'lodash';
+import AggConfigResult from 'ui/vis/agg_config_result';
+import KibanaMap from 'ui/vis_maps/kibana_map.js';
+import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
+import colorramps from 'ui/vislib/components/color/colormaps';
+
+const module = uiModules.get('kibana/choropleth', ['kibana']);
+module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
+
+  const containerNode = $element[0];
+  const kibanaMap = new KibanaMap(containerNode);
+  const url = tilemapSettings.getUrl();
+  const options = tilemapSettings.getTMSOptions();
+  kibanaMap.setTMSBaseLayer({url, ...options});
+
+  const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
+
+  kibanaMap.on('choropleth:select', function (event) {
+    const appState = getAppState();
+    const clickHandler = filterBarClickHandler(appState);
+    const aggs = $scope.vis.aggs.getResponseAggs();
+    const aggConfigResult = new AggConfigResult(aggs[0], false, event, event);
+    clickHandler({point: {aggConfigResult: aggConfigResult}});
+  });
+
+  $scope.$watch('esResponse', async function (response) {
+
+    const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
+    if (!response) {
+      return;
+    }
+
+    const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
+    const buckets = response.aggregations[termAggId].buckets;
+    const results = buckets.map((bucket) => {
+      return {
+        term: bucket.key,
+        value: getValue(metricsAgg, bucket)
+      };
+    });
+
+    const options = $scope.vis.params;
+    // if (!options.selectedLayer.url || !options.selectedJoinField) {
+    //   console.log('invalid selection');//todo: fix this
+    //   return;
+    // }
+
+    if (!options.selectedJoinField){
+      options.selectedJoinField = options.selectedLayer.fields[0];
+    }
+
+    kibanaMap.setChoroplethLayer(options.selectedLayer.url, options.selectedJoinField);
+    kibanaMap.setChoroplethMetrics(results);
+    kibanaMap.resize();
+
+  });
+
+  $scope.$watch('vis.params', (options) => {
+    if (!options.selectedJoinField){
+      options.selectedJoinField = options.selectedLayer.fields[0];
+    }
+    kibanaMap.setChoroplethLayer(options.selectedLayer.url, options.selectedJoinField);
+    kibanaMap.setChoroplethColorRamp(colorramps[options.colorSchema]);
+    kibanaMap.resize();
+  });
+
+  $scope.$watch(getContainerSize, _.debounce(() => {
+    kibanaMap.resize();
+  }, 500, {trailing: true}), true);
+
+  function getContainerSize() {
+    return {width: $element.width(), height: $element.height()};
+  }
+
+});
+
+
+function getValue(metricsAgg, bucket) {
+  let size = metricsAgg.getValue(bucket);
+  if (typeof size !== 'number' || isNaN(size)) {
+    try {
+      size = bucket[1].values[0].value;//lift out first value (e.g. median aggregations return as array)
+    } catch (e) {
+      size = 1;//punt
+    }
+  }
+  return size;
+}
+

src/core_plugins/choropleth/public/choropleth_vis.js

@@ -0,0 +1,57 @@
+import 'plugins/choropleth/choropleth.less';
+import 'plugins/choropleth/choropleth_controller';
+import 'plugins/choropleth/choropleth_vis_params';
+import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
+import VisSchemasProvider from 'ui/vis/schemas';
+import choroplethTemplate from 'plugins/choropleth/choropleth_controller.html';
+import visTypes from 'ui/registry/vis_types';
+import colorramps from 'ui/vislib/components/color/colormaps';
+import vectorMaps from 'plugins/choropleth/vector_maps';
+
+visTypes.register(function ChoroplethProvider(Private) {
+  const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
+  const Schemas = Private(VisSchemasProvider);
+
+  return new TemplateVisType({
+    name: 'choropleth',
+    title: 'Vector Map',
+    implementsRenderComplete: true,
+    description: 'Show metrics on a thematic map. Darker colors represent higher values.',
+    icon: 'fa-globe',
+    template: choroplethTemplate,
+    params: {
+      defaults: {
+        colorSchema: 'Yellow to Red',
+        selectedLayer: vectorMaps['Countries'],
+        selectedJoinField: vectorMaps['Countries'].fields[0]
+      },
+      colorSchemas: Object.keys(colorramps),
+      vectorMaps: vectorMaps,
+      editor: '<choropleth-vis-params></choropleth-vis-params>'
+    },
+    schemas: new Schemas([
+      {
+        group: 'metrics',
+        name: 'metric',
+        title: '',
+        min: 1,
+        max: 1,
+        aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks'],
+        defaults: [
+          { schema: 'metric', type: 'count' }
+        ]
+      },
+      {
+        group: 'buckets',
+        name: 'segment',
+        icon: 'fa fa-globe',
+        title: 'shape field',
+        min: 1,
+        max: 1,
+        aggFilter: ['terms']
+      }
+    ])
+  });
+});
+
+

src/core_plugins/choropleth/public/choropleth_vis_params.html

@@ -0,0 +1,46 @@
+<div class="form-group">
+  <div class="kuiSideBarFormRow">
+    <label class="kuiSideBarFormRow__label" for="colorSchema">
+      Color Schema
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select
+        id="colorSchema"
+        class="kuiSelect kuiSideBarSelect"
+        ng-model="vis.params.colorSchema"
+        ng-options="mode for mode in vis.type.params.colorSchemas"
+      ></select>
+    </div>
+  </div>
+  <div class="kuiSideBarFormRow">
+    <label class="kuiSideBarFormRow__label" for="vectorMap">
+      Vector map
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select
+        id="vectorMap"
+        class="kuiSelect kuiSideBarSelect"
+        ng-model="vis.params.selectedLayer"
+        ng-options="layer for (layer, meta) in vis.type.params.vectorMaps"
+      ></select>
+    </div>
+  </div>
+
+  <div class="kuiSideBarFormRow">
+    <label class="kuiSideBarFormRow__label" for="joinField">
+      Join on field
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select id="joinField"
+              ng-model="vis.params.selectedJoinField"
+              ng-options="field for field in vis.params.selectedLayer.fields"
+              ng-init="vis.params.selectedJoinField=vis.params.selectedLayer.fields[0]"
+      >
+        <option value=''>Select</option></select>
+    </div>
+  </div>
+
+
+
+
+</div>

src/core_plugins/choropleth/public/choropleth_vis_params.js

@@ -0,0 +1,13 @@
+import uiModules from 'ui/modules';
+import choroplethVisParamsTemplate from 'plugins/choropleth/choropleth_vis_params.html';
+
+uiModules.get('kibana/choropleth')
+  .directive('choroplethVisParams', function () {
+    return {
+      restrict: 'E',
+      template: choroplethVisParamsTemplate,
+      link: function ($scope, $element) {
+
+      }
+    };
+  });

src/core_plugins/choropleth/public/vector_maps.js

@@ -0,0 +1,29 @@
+const vectorMaps = {
+  'Countries': {
+    url: '../plugins/choropleth/data/world_countries.geojson',
+    fields: ['iso']
+  },
+  'States': {
+    url: '../plugins/choropleth/data/us_states.geojson',
+    fields: ['NAME']
+  }
+};
+
+// const vectorMaps = {
+//   'Countries': ['iso'],
+//   'States': ['name', 'abbr']
+// };
+//
+// const vectorMaps = [{
+//   name: 'Countries',
+//   url: '../plugins/choropleth/data/world_countries.geojson',
+//   fields: ['iso']
+// },
+//   {
+//   name: 'States',
+//     url: '../plugins/choropleth/data/us_states.geojson',
+//     fields: ['name', 'abbr']
+//   }];
+
+
+export default vectorMaps;