diff --git a/src/core_plugins/region_map/public/choropleth_layer.js b/src/core_plugins/region_map/public/choropleth_layer.js index a925ec01ca352..a56c9f7910354 100644 --- a/src/core_plugins/region_map/public/choropleth_layer.js +++ b/src/core_plugins/region_map/public/choropleth_layer.js @@ -6,6 +6,7 @@ import { KibanaMapLayer } from 'ui/vis/map/kibana_map_layer'; import { truncatedColorMaps } from 'ui/vislib/components/color/truncated_colormaps'; import * as topojson from 'topojson-client'; import { toastNotifications } from 'ui/notify'; +import * as colorUtil from 'ui/vis/map/color_util'; const EMPTY_STYLE = { weight: 1, @@ -179,7 +180,7 @@ CORS configuration of the server permits requests from the Kibana application on if (this._metrics && this._metrics.length > 0) { const { min, max } = getMinMax(this._metrics); - this._legendColors = getLegendColors(this._colorRamp); + this._legendColors = colorUtil.getLegendColors(this._colorRamp); const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain(); this._legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(this._legendColors); } @@ -420,39 +421,15 @@ function getMinMax(data) { return { min, max }; } -function getLegendColors(colorRamp) { - const colors = []; - colors[0] = getColor(colorRamp, 0); - colors[1] = getColor(colorRamp, Math.floor(colorRamp.length * 1 / 4)); - colors[2] = getColor(colorRamp, Math.floor(colorRamp.length * 2 / 4)); - colors[3] = getColor(colorRamp, Math.floor(colorRamp.length * 3 / 4)); - colors[4] = getColor(colorRamp, colorRamp.length - 1); - return colors; -} - -function getColor(colorRamp, i) { - - if (!colorRamp[i]) { - return getColor(); - } - - const color = colorRamp[i][1]; - const red = Math.floor(color[0] * 255); - const green = Math.floor(color[1] * 255); - const blue = Math.floor(color[2] * 255); - return `rgb(${red},${green},${blue})`; -} - - function getChoroplethColor(value, min, max, colorRamp) { if (min === max) { - return getColor(colorRamp, colorRamp.length - 1); + return colorUtil.getColor(colorRamp, colorRamp.length - 1); } const fraction = (value - min) / (max - min); const index = Math.round(colorRamp.length * fraction) - 1; const i = Math.max(Math.min(colorRamp.length - 1, index), 0); - return getColor(colorRamp, i); + return colorUtil.getColor(colorRamp, i); } diff --git a/src/core_plugins/tile_map/public/__tests__/blues.png b/src/core_plugins/tile_map/public/__tests__/blues.png new file mode 100644 index 0000000000000..89d6734eb123a Binary files /dev/null and b/src/core_plugins/tile_map/public/__tests__/blues.png differ diff --git a/src/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js b/src/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js index efbb6dee48188..0355483460491 100644 --- a/src/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js +++ b/src/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js @@ -7,6 +7,8 @@ import { ImageComparator } from 'test_utils/image_comparator'; import sinon from 'sinon'; import dummyESResponse from './dummy_es_response.json'; import initial from './initial.png'; +import blues from './blues.png'; +import shadedGeohashGrid from './shadedGeohashGrid.png'; import heatmapRaw from './heatmap_raw.png'; function mockRawData() { @@ -180,7 +182,6 @@ describe('CoordinateMapsVisualizationTest', function () { coordinateMapVisualization.destroy(); expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); - }); it('should toggle back&forth OK between mapTypes', async function () { @@ -218,6 +219,61 @@ describe('CoordinateMapsVisualizationTest', function () { }); + it('should toggle to different color schema ok', async function () { + + const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); + await coordinateMapVisualization.render(dummyESResponse, { + resize: false, + params: true, + aggs: true, + data: true, + uiState: false + }); + + + vis.params.colorSchema = 'Blues'; + await coordinateMapVisualization.render(dummyESResponse, { + resize: false, + params: true, + aggs: false, + data: false, + uiState: false + }); + + const mismatchedPixels = await compareImage(blues, 0); + coordinateMapVisualization.destroy(); + expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); + + }); + + it('should toggle to different color schema and maptypes ok', async function () { + + const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis); + await coordinateMapVisualization.render(dummyESResponse, { + resize: false, + params: true, + aggs: true, + data: true, + uiState: false + }); + + + vis.params.colorSchema = 'Greens'; + vis.params.mapType = 'Shaded Geohash Grid'; + await coordinateMapVisualization.render(dummyESResponse, { + resize: false, + params: true, + aggs: false, + data: false, + uiState: false + }); + + const mismatchedPixels = await compareImage(shadedGeohashGrid, 0); + coordinateMapVisualization.destroy(); + expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF); + + }); + }); diff --git a/src/core_plugins/tile_map/public/__tests__/geohash_layer.js b/src/core_plugins/tile_map/public/__tests__/geohash_layer.js index 1156e75e172b4..f4aaf6102fde4 100644 --- a/src/core_plugins/tile_map/public/__tests__/geohash_layer.js +++ b/src/core_plugins/tile_map/public/__tests__/geohash_layer.js @@ -51,6 +51,7 @@ describe('geohash_layer', function () { }); afterEach(function () { + // return; kibanaMap.destroy(); teardownDOM(); imageComparator.destroy(); @@ -58,11 +59,11 @@ describe('geohash_layer', function () { [ { - options: { mapType: 'Scaled Circle Markers' }, + options: { mapType: 'Scaled Circle Markers', colorRamp: 'Yellow to Red' }, expected: scaledCircleMarkersPng }, { - options: { mapType: 'Shaded Circle Markers' }, + options: { mapType: 'Shaded Circle Markers', colorRamp: 'Yellow to Red' }, expected: shadedCircleMarkersPng }, { @@ -99,7 +100,7 @@ describe('geohash_layer', function () { { type: 'FeatureCollection', features: [] - }, {}, { 'mapType': 'Scaled Circle Markers' }, kibanaMap.getZoomLevel(), kibanaMap); + }, {}, { 'mapType': 'Scaled Circle Markers', colorRamp: 'Yellow to Red' }, kibanaMap.getZoomLevel(), kibanaMap); kibanaMap.addLayer(geohashLayer); expect(() => { diff --git a/src/core_plugins/tile_map/public/__tests__/initial.png b/src/core_plugins/tile_map/public/__tests__/initial.png index 650903185cde9..d108407c58388 100644 Binary files a/src/core_plugins/tile_map/public/__tests__/initial.png and b/src/core_plugins/tile_map/public/__tests__/initial.png differ diff --git a/src/core_plugins/tile_map/public/__tests__/scaledCircleMarkers.png b/src/core_plugins/tile_map/public/__tests__/scaledCircleMarkers.png index 304d13abff683..bdac30351ce04 100644 Binary files a/src/core_plugins/tile_map/public/__tests__/scaledCircleMarkers.png and b/src/core_plugins/tile_map/public/__tests__/scaledCircleMarkers.png differ diff --git a/src/core_plugins/tile_map/public/__tests__/shadedCircleMarkers.png b/src/core_plugins/tile_map/public/__tests__/shadedCircleMarkers.png index a8535f765f2a1..7cf3fe92f7afc 100644 Binary files a/src/core_plugins/tile_map/public/__tests__/shadedCircleMarkers.png and b/src/core_plugins/tile_map/public/__tests__/shadedCircleMarkers.png differ diff --git a/src/core_plugins/tile_map/public/__tests__/shadedGeohashGrid.png b/src/core_plugins/tile_map/public/__tests__/shadedGeohashGrid.png index 7cb92916f570c..e0b19dc619323 100644 Binary files a/src/core_plugins/tile_map/public/__tests__/shadedGeohashGrid.png and b/src/core_plugins/tile_map/public/__tests__/shadedGeohashGrid.png differ diff --git a/src/core_plugins/tile_map/public/coordinate_maps_visualization.js b/src/core_plugins/tile_map/public/coordinate_maps_visualization.js index 3b402f9cfc4ef..be647cc24b20e 100644 --- a/src/core_plugins/tile_map/public/coordinate_maps_visualization.js +++ b/src/core_plugins/tile_map/public/coordinate_maps_visualization.js @@ -133,6 +133,7 @@ export function CoordinateMapsVisualizationProvider(Notifier, Private) { mapType: newParams.mapType, isFilteredByCollar: this._isFilteredByCollar(), fetchBounds: this.getGeohashBounds.bind(this), + colorRamp: newParams.colorSchema, heatmap: { heatClusterSize: newParams.heatClusterSize } diff --git a/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html b/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html index 4791d069b4ec4..540c4a8ef6906 100644 --- a/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html +++ b/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html @@ -13,6 +13,21 @@ + +
+ +
+ +
+
+