github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge autozoom

Browse source
This commit is contained in:
Rashid Khan 2015-04-28 09:23:28 -07:00
commit 77a47caa99
22 changed files with 333 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/kibana/components/agg_types/buckets/geo_hash.js
View file

@ -4,7 +4,7 @@ define(function (require) {
var moment = require('moment');
var BucketAggType = Private(require('components/agg_types/buckets/_bucket_agg_type'));
var defaultPrecision = 3;
var defaultPrecision = 2;
function getPrecision(precision) {
var maxPrecision = _.parseInt(config.get('visualization:tileMap:maxPrecision'));

7
src/kibana/components/config/defaults.js
View file

@ -81,6 +81,11 @@ define(function (require) {
'truncate:maxHeight': {
value: 115,
description: 'The maximum height that a cell in a table should occupy. Set to 0 to disable truncation.'
},
'indexPattern:fieldMapping:lookBack': {
value: 5,
description: 'For index patterns containing timestamps in their names, look for this many recent matching ' +
'patterns from which to query the field mapping.'
}
};
});
});

4
src/kibana/components/index_patterns/_mapper.js
View file

@ -1,5 +1,5 @@
define(function (require) {
return function MapperService(Private, Promise, es, configFile) {
return function MapperService(Private, Promise, es, configFile, config) {
var _ = require('lodash');
var moment = require('moment');
@ -51,7 +51,7 @@ define(function (require) {
promise = self.getIndicesForIndexPattern(indexPattern)
.then(function (existing) {
if (existing.matches.length === 0) throw new IndexPatternMissingIndices();
return existing.matches.slice(-5); // Grab the most recent 5
return existing.matches.slice(-config.get('indexPattern:fieldMapping:lookBack')); // Grab the most recent
});
}

3
src/kibana/components/url/url.js
View file

@ -43,7 +43,8 @@ define(function (require) {
if (self.shouldAutoReload(next, prev)) {
var appState = getAppState();
appState.destroy();
if (appState) appState.destroy();
reloading = $rootScope.$on('$locationChangeSuccess', function () {
// call the "unlisten" function returned by $on
reloading();

8
src/kibana/components/vis/vis.js
View file

@ -102,6 +102,14 @@ define(function (require) {
}
};
Vis.prototype.hasSchemaAgg = function (schemaName, aggTypeName) {
var aggs = this.aggs.bySchemaName[schemaName] || [];
return aggs.some(function (agg) {
if (!agg.type || !agg.type.name) return false;
return agg.type.name === aggTypeName;
});
};
return Vis;
};
});

2
src/kibana/components/vislib/lib/dispatch.js
View file

@ -14,7 +14,7 @@ define(function (require) {
function Dispatch(handler) {
var stockEvents = ['brush', 'click', 'hover', 'mouseup', 'mousedown', 'mouseover', 'mouseout'];
var stockEvents = ['brush', 'click', 'hover', 'mouseup', 'mousedown', 'mouseover', 'mouseout', 'mapZoomEnd'];
var customEvents = _.deepGet(handler, 'vis.eventTypes.enabled');
var eventTypes = customEvents ? stockEvents.concat(customEvents) : stockEvents;

4
src/kibana/components/vislib/lib/legend.js
View file

@ -138,14 +138,14 @@ define(function (require) {
// legend
legendDiv.selectAll('li')
.filter(function (d) {
return this.getAttribute('data-label') !== label;
return this.getAttribute('data-label') !== label.toString();
})
.classed('blur_shape', true);
// all data-label attribute
charts.selectAll('[data-label]')
.filter(function (d) {
return this.getAttribute('data-label') !== label;
return this.getAttribute('data-label') !== label.toString();
})
.classed('blur_shape', true);

12
src/kibana/components/vislib/visualizations/area_chart.js
View file

@ -4,6 +4,7 @@ define(function (require) {
var $ = require('jquery');
var PointSeriesChart = Private(require('components/vislib/visualizations/_point_series_chart'));
var TimeMarker = Private(require('components/vislib/visualizations/time_marker'));
var errors = require('errors');
require('css!components/vislib/styles/main');
@ -266,6 +267,9 @@ define(function (require) {
var yScale = this.handler.yAxis.yScale;
var minWidth = 20;
var minHeight = 20;
var addTimeMarker = this._attr.addTimeMarker;
var times = this._attr.times || [];
var timeMarker;
var div;
var svg;
var width;
@ -283,6 +287,10 @@ define(function (require) {
width = elWidth;
height = elHeight - margin.top - margin.bottom;
if (addTimeMarker) {
timeMarker = new TimeMarker(times, xScale, height);
}
if (width < minWidth || height < minHeight) {
throw new errors.ContainerTooSmall();
}
@ -333,6 +341,10 @@ define(function (require) {
.style('stroke', '#ddd')
.style('stroke-width', 1);
if (addTimeMarker) {
timeMarker.render(svg);
}
return svg;
});
};

13
src/kibana/components/vislib/visualizations/column_chart.js
View file

@ -5,6 +5,7 @@ define(function (require) {
var moment = require('moment');
var PointSeriesChart = Private(require('components/vislib/visualizations/_point_series_chart'));
var TimeMarker = Private(require('components/vislib/visualizations/time_marker'));
var errors = require('errors');
require('css!components/vislib/styles/main');
@ -269,8 +270,12 @@ define(function (require) {
var elHeight = this._attr.height = $elem.height();
var yMin = this.handler.yAxis.yMin;
var yScale = this.handler.yAxis.yScale;
var xScale = this.handler.xAxis.xScale;
var minWidth = 20;
var minHeight = 20;
var addTimeMarker = this._attr.addTimeMarker;
var times = this._attr.times || [];
var timeMarker;
var div;
var svg;
var width;
@ -285,6 +290,10 @@ define(function (require) {
width = elWidth;
height = elHeight - margin.top - margin.bottom;
if (addTimeMarker) {
timeMarker = new TimeMarker(times, xScale, height);
}
if (width < minWidth || height < minHeight) {
throw new errors.ContainerTooSmall();
}
@ -325,6 +334,10 @@ define(function (require) {
.style('stroke-width', 1);
}
if (addTimeMarker) {
timeMarker.render(svg);
}
return svg;
});
};

13
src/kibana/components/vislib/visualizations/line_chart.js
View file

@ -5,6 +5,7 @@ define(function (require) {
var errors = require('errors');
var PointSeriesChart = Private(require('components/vislib/visualizations/_point_series_chart'));
var TimeMarker = Private(require('components/vislib/visualizations/time_marker'));
require('css!components/vislib/styles/main');
/**
@ -258,10 +259,14 @@ define(function (require) {
var elHeight = this._attr.height = $elem.height();
var yMin = this.handler.yAxis.yMin;
var yScale = this.handler.yAxis.yScale;
var xScale = this.handler.xAxis.xScale;
var minWidth = 20;
var minHeight = 20;
var startLineX = 0;
var lineStrokeWidth = 1;
var addTimeMarker = this._attr.addTimeMarker;
var times = this._attr.times || [];
var timeMarker;
var div;
var svg;
var width;
@ -288,6 +293,10 @@ define(function (require) {
width = elWidth - margin.left - margin.right;
height = elHeight - margin.top - margin.bottom;
if (addTimeMarker) {
timeMarker = new TimeMarker(times, xScale, height);
}
if (width < minWidth || height < minHeight) {
throw new errors.ContainerTooSmall();
}
@ -331,6 +340,10 @@ define(function (require) {
.style('stroke', '#ddd')
.style('stroke-width', lineStrokeWidth);
if (addTimeMarker) {
timeMarker.render(svg);
}
return svg;
});
};

16
src/kibana/components/vislib/visualizations/tile_map.js
View file

@ -149,7 +149,15 @@ define(function (require) {
}
}
});
});
map.on('zoomend', function (e) {
var mapInfo = {
zoom: map.getZoom(),
zoomPct: map.getZoom() / 18
};
self.events.dispatch.mapZoomEnd(mapInfo);
});
// add label for splits
@ -181,6 +189,14 @@ define(function (require) {
};
};
TileMap.prototype.addZoomEndEvent = function (element) {
var events = this.events;
var zoomend = events.addMapZoomEndEvent();
var attachedEvents = element.call(zoomend);
return attachedEvents;
};
/**
* zoom map to fit all features in featureLayer
*

74
src/kibana/components/vislib/visualizations/time_marker.js Normal file
View file

@ -0,0 +1,74 @@
define(function (require) {
var datemath = require('utils/datemath');
return function TimeMarkerFactory(d3) {
function TimeMarker(times, xScale, height) {
if (!(this instanceof TimeMarker)) {
return new TimeMarker(times, xScale, height);
}
var currentTimeArr = [{
'time': new Date().getTime(),
'class': 'time-marker',
'color': '#c80000',
'opacity': 0.3,
'width': 2
}];
this.xScale = xScale;
this.height = height;
this.times = (times.length) ? times.map(function (d) {
return {
'time': datemath.parse(d.time),
'class': d.class || 'time-marker',
'color': d.color || '#c80000',
'opacity': d.opacity || 0.3,
'width': d.width || 2
};
}) : currentTimeArr;
}
TimeMarker.prototype._isTimeBasedChart = function (selection) {
var data = selection.data();
return data.every(function (datum) {
return (datum.ordered && datum.ordered.date);
});
};
TimeMarker.prototype.render = function (selection) {
var self = this;
// return if not time based chart
if (!self._isTimeBasedChart(selection)) return;
selection.each(function () {
d3.select(this).selectAll('time-marker')
.data(self.times)
.enter().append('line')
.attr('class', function (d) {
return d.class;
})
.attr('pointer-events', 'none')
.attr('stroke', function (d) {
return d.color;
})
.attr('stroke-width', function (d) {
return d.width;
})
.attr('stroke-opacity', function (d) {
return d.opacity;
})
.attr('x1', function (d) {
return self.xScale(d.time);
})
.attr('x2', function (d) {
return self.xScale(d.time);
})
.attr('y1', self.height)
.attr('y2', self.xScale.range()[0]);
});
};
return TimeMarker;
};
});

1
src/kibana/plugins/discover/controllers/discover.js
View file

@ -484,6 +484,7 @@ define(function (require) {
type: 'histogram',
params: {
addLegend: false,
addTimeMarker: true
},
listeners: {
click: function (e) {

6
src/kibana/plugins/vis_types/controls/vislib_basic_options.html
View file

@ -17,4 +17,10 @@
Scale Y-Axis to Data Bounds
</label>
</div>
<div class="vis-option-item" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
<label>
<input type="checkbox" ng-model="vis.params.addTimeMarker" ng-checked="vis.params.addTimeMarker">
Current time marker
</label>
</div>
</div>

4
src/kibana/plugins/vis_types/vislib/area.js
View file

@ -20,7 +20,9 @@ define(function (require) {
scale: 'linear',
mode: 'stacked',
interpolate: 'linear',
defaultYExtents: false
defaultYExtents: false,
times: [],
addTimeMarker: false
},
scales: ['linear', 'log', 'square root'],
modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'],

20
src/kibana/plugins/vis_types/vislib/editors/tile_map.html
View file

@ -11,9 +11,25 @@
</div>
<div class="vis-option-item">
</br>
<label>
<input type="checkbox" value="{{isDesaturated}}" ng-model="vis.params.isDesaturated" name="isDesaturated" ng-checked="vis.params.isDesaturated">
<input type="checkbox"
name="autoPrecision"
value="{{autoPrecision}}"
ng-model="vis.params.autoPrecision"
ng-checked="vis.params.autoPrecision">
Change geoHash precision on map zoom
</label>
</div>
<div class="vis-option-item">
<label>
<input type="checkbox"
name="isDesaturated"
value="{{isDesaturated}}"
ng-model="vis.params.isDesaturated"
ng-checked="vis.params.isDesaturated">
Desaturate map tiles
</label>
</div>
</div>

4
src/kibana/plugins/vis_types/vislib/histogram.js
View file

@ -16,7 +16,9 @@ define(function (require) {
addLegend: true,
scale: 'linear',
mode: 'stacked',
defaultYExtents: false
defaultYExtents: false,
times: [],
addTimeMarker: false
},
scales: ['linear', 'log', 'square root'],
modes: ['stacked', 'percentage', 'grouped'],

4
src/kibana/plugins/vis_types/vislib/line.js
View file

@ -20,7 +20,9 @@ define(function (require) {
drawLinesBetweenPoints: true,
radiusRatio: 9,
scale: 'linear',
defaultYExtents: false
defaultYExtents: false,
times: [],
addTimeMarker: false
},
scales: ['linear', 'log', 'square root'],
editor: require('text!plugins/vis_types/vislib/editors/line.html')

3
src/kibana/plugins/vis_types/vislib/tile_map.js
View file

@ -14,7 +14,8 @@ define(function (require) {
params: {
defaults: {
mapType: 'Scaled Circle Markers',
isDesaturated: true
isDesaturated: true,
autoPrecision: true
},
mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid'],
editor: require('text!plugins/vis_types/vislib/editors/tile_map.html')

16
src/kibana/plugins/visualize/editor/editor.js
View file

@ -50,7 +50,7 @@ define(function (require) {
'kibana/notify',
'kibana/courier'
])
.controller('VisEditor', function ($scope, $route, timefilter, AppState, $location, kbnUrl, $timeout, courier, Private, Promise) {
.controller('VisEditor', function ($scope, $route, timefilter, AppState, $location, kbnUrl, $timeout, courier, Private, Promise, config) {
var _ = require('lodash');
var angular = require('angular');
@ -125,6 +125,16 @@ define(function (require) {
editableVis.listeners.click = vis.listeners.click = filterBarClickHandler($state);
editableVis.listeners.brush = vis.listeners.brush = brushEvent;
editableVis.listeners.mapZoomEnd = vis.listeners.mapZoomEnd = function (event) {
if (!vis.params.autoPrecision) return;
var geoHash = _.find(vis.aggs, function (agg) {
return agg.type.name === 'geohash_grid';
});
geoHash.params.precision = autoPrecision(event.zoom, config.get('visualization:tileMap:maxPrecision'));
$scope.fetch();
};
// track state of editable vis vs. "actual" vis
$scope.stageEditableVis = transferVisState(editableVis, vis, true);
@ -288,6 +298,10 @@ define(function (require) {
};
}
function autoPrecision(zoom, limit) {
return Math.min(Math.round(0.02 * Math.pow(zoom, 2) + 0.24 * zoom + 0.723), limit);
}
init();
});
});

7
test/unit/specs/vislib/lib/legend.js
View file

@ -5,17 +5,20 @@ define(function (require) {
var slices = require('vislib_fixtures/mock_data/histogram/_slices');
var stackedSeries = require('vislib_fixtures/mock_data/date_histogram/_stacked_series');
var histogramSlices = require('vislib_fixtures/mock_data/histogram/_slices');
var dataArray = [
stackedSeries,
slices,
histogramSlices,
stackedSeries,
stackedSeries,
stackedSeries
];
var chartTypes = [
'histogram',
'pie',
'pie',
'area',
'line'
];
@ -24,7 +27,7 @@ define(function (require) {
histogram: '.chart rect',
pie: '.chart path',
area: '.chart path',
line: '.chart circle',
line: '.chart circle'
};
angular.module('LegendFactory', ['kibana']);

127
test/unit/specs/vislib/visualizations/time_marker.js Normal file
View file

@ -0,0 +1,127 @@
define(function (require) {
var angular = require('angular');
var _ = require('lodash');
var $ = require('jquery');
var fixtures = require('fixtures/fake_hierarchical_data');
var series = require('vislib_fixtures/mock_data/date_histogram/_series');
var terms = require('vislib_fixtures/mock_data/terms/_columns');
angular.module('TimeMarkerFactory', ['kibana']);
describe('VisLib Time Marker Test Suite', function () {
var height = 50;
var color = '#ff0000';
var opacity = 0.5;
var width = 3;
var customClass = 'custom-time-marker';
var dateMathTimes = ['now-1m', 'now-5m', 'now-15m'];
var myTimes = dateMathTimes.map(function (dateMathString) {
return {
time: dateMathString,
class: customClass,
color: color,
opacity: opacity,
width: width
};
});
var getExtent = function (dataArray, func) {
return func(dataArray, function (obj) {
return func(obj.values, function (d) {
return d.x;
});
});
};
var times = [];
var TimeMarker;
var defaultMarker;
var customMarker;
var selection;
var xScale;
var minDomain;
var maxDomain;
var domain;
beforeEach(function () {
module('TimeMarkerFactory');
});
beforeEach(function () {
inject(function (d3, Private) {
TimeMarker = Private(require('components/vislib/visualizations/time_marker'));
minDomain = getExtent(series.series, d3.min);
maxDomain = getExtent(series.series, d3.max);
domain = [minDomain, maxDomain];
xScale = d3.time.scale().domain(domain).range([0, 500]);
defaultMarker = new TimeMarker(times, xScale, height);
customMarker = new TimeMarker(myTimes, xScale, height);
selection = d3.select('body').append('div').attr('class', 'marker');
selection.datum(series);
});
});
afterEach(function () {
selection.remove('*');
selection = null;
defaultMarker = null;
});
describe('_isTimeBaseChart method', function () {
var boolean;
var newSelection;
it('should return true when data is time based', function () {
boolean = defaultMarker._isTimeBasedChart(selection);
expect(boolean).to.be(true);
});
it('should return false when data is not time based', function () {
newSelection = selection.datum(terms);
boolean = defaultMarker._isTimeBasedChart(newSelection);
expect(boolean).to.be(false);
});
});
describe('render method', function () {
var lineArray;
beforeEach(function () {
defaultMarker.render(selection);
customMarker.render(selection);
lineArray = document.getElementsByClassName('custom-time-marker');
});
it('should render the default line', function () {
expect(!!$('line.time-marker').length).to.be(true);
});
it('should render the custom (user defined) lines', function () {
expect($('line.custom-time-marker').length).to.be(myTimes.length);
});
it('should set the class', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(line.getAttribute('class')).to.be(customClass);
});
});
it('should set the stroke', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(line.getAttribute('stroke')).to.be(color);
});
});
it('should set the stroke-opacity', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(+line.getAttribute('stroke-opacity')).to.be(opacity);
});
});
it('should set the stroke-width', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(+line.getAttribute('stroke-width')).to.be(width);
});
});
});
});
});