mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
Merge pull request #6929 from elastic/jasper/backport/6911/6918/4.5
[backport] PR #6911 to 4.5
This commit is contained in:
commit
d6494717f0
59 changed files with 816 additions and 816 deletions
|
@ -1,10 +1,10 @@
|
|||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var Binder = require('ui/Binder');
|
||||
var positionTooltip = require('./positionTooltip');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let Binder = require('ui/Binder');
|
||||
let positionTooltip = require('./positionTooltip');
|
||||
|
||||
var allContents = [];
|
||||
let allContents = [];
|
||||
|
||||
/**
|
||||
* Add tooltip and listeners to visualization elements
|
||||
|
@ -59,13 +59,13 @@ Tooltip.prototype.$getSizer = _.once(function () {
|
|||
* Show the tooltip, positioning it based on the content and chart container
|
||||
*/
|
||||
Tooltip.prototype.show = function () {
|
||||
var $tooltip = this.$get();
|
||||
var $chart = this.$getChart();
|
||||
var html = $tooltip.html();
|
||||
let $tooltip = this.$get();
|
||||
let $chart = this.$getChart();
|
||||
let html = $tooltip.html();
|
||||
|
||||
if (!$chart) return;
|
||||
|
||||
var placement = positionTooltip({
|
||||
let placement = positionTooltip({
|
||||
$window: $(window),
|
||||
$chart: $chart,
|
||||
$el: $tooltip,
|
||||
|
@ -84,7 +84,7 @@ Tooltip.prototype.show = function () {
|
|||
* Hide the tooltip, clearing its contents
|
||||
*/
|
||||
Tooltip.prototype.hide = function () {
|
||||
var $tooltip = this.$get();
|
||||
let $tooltip = this.$get();
|
||||
allContents = [];
|
||||
$tooltip.css({
|
||||
visibility: 'hidden',
|
||||
|
@ -100,7 +100,7 @@ Tooltip.prototype.hide = function () {
|
|||
* @return {Object} jQuery node for the chart
|
||||
*/
|
||||
Tooltip.prototype.$getChart = function () {
|
||||
var chart = $(this.container && this.container.node());
|
||||
let chart = $(this.container && this.container.node());
|
||||
return chart.size() ? chart : false;
|
||||
};
|
||||
|
||||
|
@ -111,7 +111,7 @@ Tooltip.prototype.$getChart = function () {
|
|||
* @return {Function} Renders tooltip on a D3 selection
|
||||
*/
|
||||
Tooltip.prototype.render = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
/**
|
||||
* Calculates values for the tooltip placement
|
||||
|
@ -119,17 +119,17 @@ Tooltip.prototype.render = function () {
|
|||
* @param {Object} selection D3 selection object
|
||||
*/
|
||||
return function (selection) {
|
||||
var $tooltip = self.$get();
|
||||
var id = self.id;
|
||||
var order = self.order;
|
||||
let $tooltip = self.$get();
|
||||
let id = self.id;
|
||||
let order = self.order;
|
||||
|
||||
var tooltipSelection = d3.select($tooltip.get(0));
|
||||
let tooltipSelection = d3.select($tooltip.get(0));
|
||||
|
||||
if (self.container === undefined || self.container !== d3.select(self.el).select('.' + self.containerClass)) {
|
||||
self.container = d3.select(self.el).select('.' + self.containerClass);
|
||||
}
|
||||
|
||||
var $chart = self.$getChart();
|
||||
let $chart = self.$getChart();
|
||||
if ($chart) {
|
||||
self.binder.jqOn($chart, 'mouseleave', function (event) {
|
||||
// only clear when we leave the chart, so that
|
||||
|
@ -139,7 +139,7 @@ Tooltip.prototype.render = function () {
|
|||
}
|
||||
|
||||
selection.each(function (d, i) {
|
||||
var element = d3.select(this);
|
||||
let element = d3.select(this);
|
||||
|
||||
function render(html) {
|
||||
allContents = _.filter(allContents, function (content) {
|
||||
|
@ -148,7 +148,7 @@ Tooltip.prototype.render = function () {
|
|||
|
||||
if (html) allContents.push({ id: id, html: html, order: order });
|
||||
|
||||
var allHtml = _(allContents)
|
||||
let allHtml = _(allContents)
|
||||
.sortBy('order')
|
||||
.pluck('html')
|
||||
.compact()
|
||||
|
@ -167,7 +167,7 @@ Tooltip.prototype.render = function () {
|
|||
return render();
|
||||
}
|
||||
|
||||
var events = self.events ? self.events.eventResponse(d, i) : d;
|
||||
let events = self.events ? self.events.eventResponse(d, i) : d;
|
||||
return render(self.formatter(events));
|
||||
});
|
||||
|
||||
|
|
|
@ -1,31 +1,31 @@
|
|||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
|
||||
var OFFSET = 10;
|
||||
let OFFSET = 10;
|
||||
let $clone;
|
||||
|
||||
// translate css properties into their basic direction
|
||||
var propDirs = {
|
||||
let propDirs = {
|
||||
top: 'north',
|
||||
left: 'west'
|
||||
};
|
||||
|
||||
function positionTooltip(opts, html) {
|
||||
if (!opts) return;
|
||||
var $chart = $(opts.$chart);
|
||||
var $el = $(opts.$el);
|
||||
var $window = $(opts.$window || window);
|
||||
var $sizer = $(opts.$sizer);
|
||||
var prev = $chart.data('previousPlacement') || {};
|
||||
var event = opts.event;
|
||||
let $chart = $(opts.$chart);
|
||||
let $el = $(opts.$el);
|
||||
let $window = $(opts.$window || window);
|
||||
let $sizer = $(opts.$sizer);
|
||||
let prev = $chart.data('previousPlacement') || {};
|
||||
let event = opts.event;
|
||||
|
||||
if (!$chart.size() || !$el.size()) return;
|
||||
|
||||
var size = getTtSize(html || $el.html(), $sizer);
|
||||
var pos = getBasePosition(size, event);
|
||||
var overflow = getOverflow(size, pos, [$chart, $window]);
|
||||
let size = getTtSize(html || $el.html(), $sizer);
|
||||
let pos = getBasePosition(size, event);
|
||||
let overflow = getOverflow(size, pos, [$chart, $window]);
|
||||
|
||||
var placement = placeToAvoidOverflow(pos, prev, overflow);
|
||||
let placement = placeToAvoidOverflow(pos, prev, overflow);
|
||||
$chart.data('previousPlacement', placement);
|
||||
return placement;
|
||||
}
|
||||
|
@ -35,7 +35,7 @@ function getTtSize(ttHtml, $sizer) {
|
|||
$sizer.html(ttHtml);
|
||||
}
|
||||
|
||||
var size = {
|
||||
let size = {
|
||||
width: $sizer.outerWidth(),
|
||||
height: $sizer.outerHeight()
|
||||
};
|
||||
|
@ -55,7 +55,7 @@ function getBasePosition(size, event) {
|
|||
function getBounds($el) {
|
||||
// in testing, $window is not actually a window, so we need to add
|
||||
// the offsets to make it work right.
|
||||
var bounds = $el.offset() || { top: 0, left: 0 };
|
||||
let bounds = $el.offset() || { top: 0, left: 0 };
|
||||
bounds.top += $el.scrollTop();
|
||||
bounds.left += $el.scrollLeft();
|
||||
bounds.bottom = bounds.top + $el.outerHeight();
|
||||
|
@ -64,7 +64,7 @@ function getBounds($el) {
|
|||
}
|
||||
|
||||
function getOverflow(size, pos, containers) {
|
||||
var overflow = {};
|
||||
let overflow = {};
|
||||
|
||||
containers.map(getBounds).forEach(function (bounds) {
|
||||
// number of pixels that the toolip would overflow it's far
|
||||
|
@ -90,16 +90,16 @@ function mergeOverflows(dest, src) {
|
|||
}
|
||||
|
||||
function pickPlacement(prop, pos, overflow, prev, pref, fallback, placement) {
|
||||
var stash = '_' + prop;
|
||||
let stash = '_' + prop;
|
||||
|
||||
// list of directions in order of preference
|
||||
var dirs = _.unique([prev[stash], pref, fallback].filter(Boolean));
|
||||
let dirs = _.unique([prev[stash], pref, fallback].filter(Boolean));
|
||||
|
||||
let dir;
|
||||
let value;
|
||||
|
||||
// find the first direction that doesn't overflow
|
||||
for (var i = 0; i < dirs.length; i++) {
|
||||
for (let i = 0; i < dirs.length; i++) {
|
||||
dir = dirs[i];
|
||||
if (overflow[dir] > 0) continue;
|
||||
value = pos[dir];
|
||||
|
@ -111,7 +111,7 @@ function pickPlacement(prop, pos, overflow, prev, pref, fallback, placement) {
|
|||
if (value == null) {
|
||||
dir = dirs[0];
|
||||
|
||||
var offset = overflow[dir];
|
||||
let offset = overflow[dir];
|
||||
if (propDirs[prop] === dir) {
|
||||
// when the property represents the same direction
|
||||
// as dir, we flip the overflow
|
||||
|
@ -126,7 +126,7 @@ function pickPlacement(prop, pos, overflow, prev, pref, fallback, placement) {
|
|||
}
|
||||
|
||||
function placeToAvoidOverflow(pos, prev, overflow) {
|
||||
var placement = {};
|
||||
let placement = {};
|
||||
pickPlacement('top', pos, overflow, prev, 'south', 'north', placement);
|
||||
pickPlacement('left', pos, overflow, prev, 'east', 'west', placement);
|
||||
return placement;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
define(function (require) {
|
||||
return function ColorUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
var mappedColors = Private(require('ui/vislib/components/color/mapped_colors'));
|
||||
let _ = require('lodash');
|
||||
let mappedColors = Private(require('ui/vislib/components/color/mapped_colors'));
|
||||
|
||||
/*
|
||||
* Accepts an array of strings or numbers that are used to create a
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function ColorPaletteUtilService(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
|
||||
var seedColors = Private(require('ui/vislib/components/color/seed_colors'));
|
||||
let seedColors = Private(require('ui/vislib/components/color/seed_colors'));
|
||||
|
||||
|
||||
/*
|
||||
|
@ -12,10 +12,10 @@ define(function (require) {
|
|||
* new colors are generated up to the value of the input number.
|
||||
*/
|
||||
|
||||
var offset = 300; // Hue offset to start at
|
||||
let offset = 300; // Hue offset to start at
|
||||
|
||||
var fraction = function (goal) {
|
||||
var walkTree = function (numerator, denominator, bytes) {
|
||||
let fraction = function (goal) {
|
||||
let walkTree = function (numerator, denominator, bytes) {
|
||||
if (bytes.length) {
|
||||
return walkTree(
|
||||
(numerator * 2) + (bytes.pop() ? 1 : -1),
|
||||
|
@ -28,7 +28,7 @@ define(function (require) {
|
|||
}
|
||||
};
|
||||
|
||||
var b = (goal + 2)
|
||||
let b = (goal + 2)
|
||||
.toString(2)
|
||||
.split('')
|
||||
.map(function (num) {
|
||||
|
@ -45,9 +45,9 @@ define(function (require) {
|
|||
throw new TypeError('ColorPaletteUtilService expects a number');
|
||||
}
|
||||
|
||||
var colors = seedColors;
|
||||
let colors = seedColors;
|
||||
|
||||
var seedLength = seedColors.length;
|
||||
let seedLength = seedColors.length;
|
||||
|
||||
_.times(num - seedLength, function (i) {
|
||||
colors.push(d3.hsl((fraction(i + seedLength + 1) * 360 + offset) % 360, 0.5, 0.5).toString());
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
define(function (require) {
|
||||
return function GetArrayUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
var flattenSeries = Private(require('ui/vislib/components/labels/flatten_series'));
|
||||
let _ = require('lodash');
|
||||
let flattenSeries = Private(require('ui/vislib/components/labels/flatten_series'));
|
||||
|
||||
/*
|
||||
* Accepts a Kibana data object and returns an array of values objects.
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function (require) {
|
||||
return function GetSeriesUtilService() {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
/*
|
||||
* Accepts a Kibana data object with a rows or columns key
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define(function (require) {
|
||||
return function LabelUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
var createArr = Private(require('ui/vislib/components/labels/data_array'));
|
||||
var getArrOfUniqLabels = Private(require('ui/vislib/components/labels/uniq_labels'));
|
||||
var getPieLabels = Private(require('ui/vislib/components/labels/pie/pie_labels'));
|
||||
let createArr = Private(require('ui/vislib/components/labels/data_array'));
|
||||
let getArrOfUniqLabels = Private(require('ui/vislib/components/labels/uniq_labels'));
|
||||
let getPieLabels = Private(require('ui/vislib/components/labels/pie/pie_labels'));
|
||||
|
||||
/*
|
||||
* Accepts a Kibana data object and returns an array of unique labels (strings).
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
return function GetPieNames(Private) {
|
||||
var returnNames = Private(require('ui/vislib/components/labels/pie/return_pie_names'));
|
||||
let returnNames = Private(require('ui/vislib/components/labels/pie/return_pie_names'));
|
||||
|
||||
return function (data, columns) {
|
||||
var slices = data.slices;
|
||||
let slices = data.slices;
|
||||
|
||||
if (slices.children) {
|
||||
return _(returnNames(slices.children, 0, columns))
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
define(function (require) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
return function PieLabels(Private) {
|
||||
var removeZeroSlices = Private(require('ui/vislib/components/labels/pie/remove_zero_slices'));
|
||||
var getNames = Private(require('ui/vislib/components/labels/pie/get_pie_names'));
|
||||
let removeZeroSlices = Private(require('ui/vislib/components/labels/pie/remove_zero_slices'));
|
||||
let getNames = Private(require('ui/vislib/components/labels/pie/get_pie_names'));
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj)) { throw new TypeError('PieLabel expects an object'); }
|
||||
|
||||
var data = obj.columns || obj.rows || [obj];
|
||||
var names = [];
|
||||
let data = obj.columns || obj.rows || [obj];
|
||||
let names = [];
|
||||
|
||||
data.forEach(function (obj) {
|
||||
var columns = obj.raw ? obj.raw.columns : undefined;
|
||||
let columns = obj.raw ? obj.raw.columns : undefined;
|
||||
obj.slices = removeZeroSlices(obj.slices);
|
||||
|
||||
getNames(obj, columns).forEach(function (name) {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
define(function (require) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
return function RemoveZeroSlices() {
|
||||
return function removeZeroSlices(slices) {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
define(function () {
|
||||
return function ReturnPieNames() {
|
||||
return function returnNames(array, index, columns) {
|
||||
var names = [];
|
||||
let names = [];
|
||||
|
||||
array.forEach(function (obj) {
|
||||
names.push({ key: obj.name, index: index });
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function (require) {
|
||||
return function UniqLabelUtilService() {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
/*
|
||||
* Accepts an array of data objects and a formatter function.
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function (require) {
|
||||
return function FlattenDataObjectUtilService() {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
/*
|
||||
* Accepts a Kibana data object, flattens the data.series values array,
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define(function (require) {
|
||||
return function ZeroInjectionUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
var orderXValues = Private(require('ui/vislib/components/zero_injection/ordered_x_keys'));
|
||||
var createZeroFilledArray = Private(require('ui/vislib/components/zero_injection/zero_filled_array'));
|
||||
var zeroFillDataArray = Private(require('ui/vislib/components/zero_injection/zero_fill_data_array'));
|
||||
let orderXValues = Private(require('ui/vislib/components/zero_injection/ordered_x_keys'));
|
||||
let createZeroFilledArray = Private(require('ui/vislib/components/zero_injection/zero_filled_array'));
|
||||
let zeroFillDataArray = Private(require('ui/vislib/components/zero_injection/zero_fill_data_array'));
|
||||
|
||||
/*
|
||||
* A Kibana data object may have multiple series with different array lengths.
|
||||
|
@ -32,12 +32,12 @@ define(function (require) {
|
|||
throw new TypeError('ZeroInjectionUtilService expects an object with a series, rows, or columns key');
|
||||
}
|
||||
|
||||
var keys = orderXValues(obj);
|
||||
var arr = getDataArray(obj);
|
||||
let keys = orderXValues(obj);
|
||||
let arr = getDataArray(obj);
|
||||
|
||||
arr.forEach(function (object) {
|
||||
object.series.forEach(function (series) {
|
||||
var zeroArray = createZeroFilledArray(keys);
|
||||
let zeroArray = createZeroFilledArray(keys);
|
||||
|
||||
series.values = zeroFillDataArray(zeroArray, series.values);
|
||||
});
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
define(function (require) {
|
||||
return function OrderedXKeysUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
var moment = require('moment');
|
||||
var getUniqKeys = Private(require('ui/vislib/components/zero_injection/uniq_keys'));
|
||||
let _ = require('lodash');
|
||||
let moment = require('moment');
|
||||
let getUniqKeys = Private(require('ui/vislib/components/zero_injection/uniq_keys'));
|
||||
|
||||
/*
|
||||
* Accepts a Kibana data object and returns
|
||||
|
@ -16,11 +16,11 @@ define(function (require) {
|
|||
throw new Error('OrderedXKeysUtilService expects an object');
|
||||
}
|
||||
|
||||
var uniqKeys = getUniqKeys(obj);
|
||||
var uniqKeysPairs = [...uniqKeys.entries()];
|
||||
let uniqKeys = getUniqKeys(obj);
|
||||
let uniqKeysPairs = [...uniqKeys.entries()];
|
||||
|
||||
var interval = _.get(obj, 'ordered.interval');
|
||||
var dateInterval = moment.isDuration(interval) ? interval : false;
|
||||
let interval = _.get(obj, 'ordered.interval');
|
||||
let dateInterval = moment.isDuration(interval) ? interval : false;
|
||||
|
||||
return _(uniqKeysPairs)
|
||||
.sortBy(function (d) {
|
||||
|
@ -32,14 +32,14 @@ define(function (require) {
|
|||
.map(function (d, i, list) {
|
||||
if (!d[1].isNumber) return d[0];
|
||||
|
||||
var val = +d[0];
|
||||
let val = +d[0];
|
||||
if (interval == null) return val;
|
||||
|
||||
var gapEdge = parseFloat(_.get(list, [i + 1, 0]));
|
||||
let gapEdge = parseFloat(_.get(list, [i + 1, 0]));
|
||||
if (isNaN(gapEdge)) return val;
|
||||
|
||||
var vals = [];
|
||||
var next = val;
|
||||
let vals = [];
|
||||
let next = val;
|
||||
|
||||
if (dateInterval) {
|
||||
next = moment(val);
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
define(function (require) {
|
||||
return function UniqueXValuesUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
var flattenDataArray = Private(require('ui/vislib/components/zero_injection/flatten_data'));
|
||||
let flattenDataArray = Private(require('ui/vislib/components/zero_injection/flatten_data'));
|
||||
|
||||
/*
|
||||
* Accepts a Kibana data object.
|
||||
|
@ -16,8 +16,8 @@ define(function (require) {
|
|||
throw new TypeError('UniqueXValuesUtilService expects an object');
|
||||
}
|
||||
|
||||
var flattenedData = flattenDataArray(obj);
|
||||
var uniqueXValues = new Map();
|
||||
let flattenedData = flattenDataArray(obj);
|
||||
let uniqueXValues = new Map();
|
||||
|
||||
let charts;
|
||||
if (!obj.series) {
|
||||
|
@ -26,17 +26,17 @@ define(function (require) {
|
|||
charts = [obj];
|
||||
}
|
||||
|
||||
var isDate = charts.every(function (chart) {
|
||||
let isDate = charts.every(function (chart) {
|
||||
return chart.ordered && chart.ordered.date;
|
||||
});
|
||||
|
||||
var isOrdered = charts.every(function (chart) {
|
||||
let isOrdered = charts.every(function (chart) {
|
||||
return chart.ordered;
|
||||
});
|
||||
|
||||
flattenedData.forEach(function (d, i) {
|
||||
var key = d.x;
|
||||
var prev = uniqueXValues.get(key);
|
||||
let key = d.x;
|
||||
let prev = uniqueXValues.get(key);
|
||||
|
||||
if (d.xi != null) {
|
||||
i = d.xi;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function (require) {
|
||||
return function ZeroFillDataArrayUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
/*
|
||||
* Accepts an array of zero-filled y value objects (arr1)
|
||||
|
@ -16,9 +16,9 @@ define(function (require) {
|
|||
let i;
|
||||
let val;
|
||||
let index;
|
||||
var max = arr2.length;
|
||||
let max = arr2.length;
|
||||
|
||||
var getX = function (d) {
|
||||
let getX = function (d) {
|
||||
return d.x === val.x;
|
||||
};
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function ZeroFilledArrayUtilService() {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
/*
|
||||
* Accepts an array of x axis values (strings or numbers).
|
||||
|
@ -12,7 +12,7 @@ define(function () {
|
|||
throw new Error('ZeroFilledArrayUtilService expects an array of strings or numbers');
|
||||
}
|
||||
|
||||
var zeroFilledArray = [];
|
||||
let zeroFilledArray = [];
|
||||
|
||||
arr.forEach(function (val) {
|
||||
zeroFilledArray.push({
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
define(function (require) {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
/**
|
||||
* Creates a string based on the hex color passed in
|
||||
*
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function (require) {
|
||||
var _ = require('lodash');
|
||||
var errors = require('ui/errors');
|
||||
let _ = require('lodash');
|
||||
let errors = require('ui/errors');
|
||||
|
||||
return function ErrorHandlerFactory() {
|
||||
|
||||
|
@ -22,8 +22,8 @@ define(function (require) {
|
|||
* @returns {HTMLElement} HTML div with an error message
|
||||
*/
|
||||
ErrorHandler.prototype.validateWidthandHeight = function (width, height) {
|
||||
var badWidth = _.isNaN(width) || width <= 0;
|
||||
var badHeight = _.isNaN(height) || height <= 0;
|
||||
let badWidth = _.isNaN(width) || width <= 0;
|
||||
let badHeight = _.isNaN(height) || height <= 0;
|
||||
|
||||
if (badWidth || badHeight) {
|
||||
throw new errors.ContainerTooSmall();
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function AlertsFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
var Binder = require('ui/Binder');
|
||||
let d3 = require('d3');
|
||||
let $ = require('jquery');
|
||||
let _ = require('lodash');
|
||||
let Binder = require('ui/Binder');
|
||||
|
||||
/**
|
||||
* Adds allerts that float in front of a visualization
|
||||
|
@ -23,7 +23,7 @@ define(function (require) {
|
|||
this.alertDefs = alertDefs || [];
|
||||
|
||||
this.binder.jqOn(vis.el, 'mouseenter', '.vis-alerts-tray', function () {
|
||||
var $tray = $(this);
|
||||
let $tray = $(this);
|
||||
hide();
|
||||
$(vis.el).on('mousemove', checkForExit);
|
||||
|
||||
|
@ -43,13 +43,13 @@ define(function (require) {
|
|||
}
|
||||
|
||||
function checkForExit(event) {
|
||||
var pos = $tray.offset();
|
||||
let pos = $tray.offset();
|
||||
if (pos.top > event.clientY || pos.left > event.clientX) return show();
|
||||
|
||||
var bottom = pos.top + $tray.height();
|
||||
let bottom = pos.top + $tray.height();
|
||||
if (event.clientY > bottom) return show();
|
||||
|
||||
var right = pos.left + $tray.width();
|
||||
let right = pos.left + $tray.width();
|
||||
if (event.clientX > right) return show();
|
||||
}
|
||||
});
|
||||
|
@ -62,21 +62,21 @@ define(function (require) {
|
|||
* @returns {D3.Selection|D3.Transition.Transition} DOM element with chart titles
|
||||
*/
|
||||
Alerts.prototype.render = function () {
|
||||
var vis = this.vis;
|
||||
var data = this.data;
|
||||
let vis = this.vis;
|
||||
let data = this.data;
|
||||
|
||||
var alerts = _(this.alertDefs)
|
||||
let alerts = _(this.alertDefs)
|
||||
.map(function (alertDef) {
|
||||
if (!alertDef) return;
|
||||
if (alertDef.test && !alertDef.test(vis, data)) return;
|
||||
|
||||
var type = alertDef.type || 'info';
|
||||
var icon = alertDef.icon || type;
|
||||
var msg = alertDef.msg;
|
||||
let type = alertDef.type || 'info';
|
||||
let icon = alertDef.icon || type;
|
||||
let msg = alertDef.msg;
|
||||
|
||||
// alert container
|
||||
var $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
|
||||
var $text = $('<p>').addClass('vis-alerts-text').text(msg);
|
||||
let $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
|
||||
let $text = $('<p>').addClass('vis-alerts-text').text(msg);
|
||||
|
||||
return $('<div>').addClass('vis-alert vis-alert-' + type).append([$icon, $text]);
|
||||
})
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define(function (require) {
|
||||
return function AxisTitleFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
let $ = require('jquery');
|
||||
let _ = require('lodash');
|
||||
|
||||
var ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
let ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
|
||||
/**
|
||||
* Appends axis title(s) to the visualization
|
||||
|
@ -45,14 +45,14 @@ define(function (require) {
|
|||
* @returns {Function} Appends axis title to a D3 selection
|
||||
*/
|
||||
AxisTitle.prototype.draw = function (title) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var el = this;
|
||||
var div = d3.select(el);
|
||||
var width = $(el).width();
|
||||
var height = $(el).height();
|
||||
let el = this;
|
||||
let div = d3.select(el);
|
||||
let width = $(el).width();
|
||||
let height = $(el).height();
|
||||
|
||||
self.validateWidthandHeight(width, height);
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function ChartTitleFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
let $ = require('jquery');
|
||||
let _ = require('lodash');
|
||||
|
||||
var ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
var Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
let ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
let Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
|
||||
/**
|
||||
* Appends chart titles to the visualization
|
||||
|
@ -33,9 +33,9 @@ define(function (require) {
|
|||
* @returns {D3.Selection|D3.Transition.Transition} DOM element with chart titles
|
||||
*/
|
||||
ChartTitle.prototype.render = function () {
|
||||
var el = d3.select(this.el).select('.chart-title').node();
|
||||
var width = el ? el.clientWidth : 0;
|
||||
var height = el ? el.clientHeight : 0;
|
||||
let el = d3.select(this.el).select('.chart-title').node();
|
||||
let width = el ? el.clientWidth : 0;
|
||||
let height = el ? el.clientHeight : 0;
|
||||
|
||||
return d3.select(this.el).selectAll('.chart-title').call(this.draw(width, height));
|
||||
};
|
||||
|
@ -48,14 +48,14 @@ define(function (require) {
|
|||
* @returns {Function} Truncates text
|
||||
*/
|
||||
ChartTitle.prototype.truncate = function (size) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var text = d3.select(this);
|
||||
var n = text[0].length;
|
||||
var maxWidth = size / n * 0.9;
|
||||
var length = this.getComputedTextLength();
|
||||
let text = d3.select(this);
|
||||
let n = text[0].length;
|
||||
let maxWidth = size / n * 0.9;
|
||||
let length = this.getComputedTextLength();
|
||||
let str;
|
||||
let avg;
|
||||
let end;
|
||||
|
@ -95,14 +95,14 @@ define(function (require) {
|
|||
* @returns {Function} Appends chart titles to a D3 selection
|
||||
*/
|
||||
ChartTitle.prototype.draw = function (width, height) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var div = d3.select(this);
|
||||
var dataType = this.parentNode.__data__.rows ? 'rows' : 'columns';
|
||||
var size = dataType === 'rows' ? height : width;
|
||||
var txtHtOffset = 11;
|
||||
let div = d3.select(this);
|
||||
let dataType = this.parentNode.__data__.rows ? 'rows' : 'columns';
|
||||
let size = dataType === 'rows' ? height : width;
|
||||
let txtHtOffset = 11;
|
||||
|
||||
self.validateWidthandHeight(width, height);
|
||||
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
define(function (require) {
|
||||
return function DataFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
|
||||
var injectZeros = Private(require('ui/vislib/components/zero_injection/inject_zeros'));
|
||||
var orderKeys = Private(require('ui/vislib/components/zero_injection/ordered_x_keys'));
|
||||
var getLabels = Private(require('ui/vislib/components/labels/labels'));
|
||||
var color = Private(require('ui/vislib/components/color/color'));
|
||||
var errors = require('ui/errors');
|
||||
let injectZeros = Private(require('ui/vislib/components/zero_injection/inject_zeros'));
|
||||
let orderKeys = Private(require('ui/vislib/components/zero_injection/ordered_x_keys'));
|
||||
let getLabels = Private(require('ui/vislib/components/labels/labels'));
|
||||
let color = Private(require('ui/vislib/components/color/color'));
|
||||
let errors = require('ui/errors');
|
||||
|
||||
/**
|
||||
* Provides an API for pulling values off the data
|
||||
|
@ -25,7 +25,7 @@ define(function (require) {
|
|||
|
||||
this.uiState = uiState;
|
||||
|
||||
var self = this;
|
||||
let self = this;
|
||||
let offset;
|
||||
|
||||
if (attr.mode === 'stacked') {
|
||||
|
@ -82,7 +82,7 @@ define(function (require) {
|
|||
|
||||
Data.prototype._getLabels = function (data) {
|
||||
if (this.type === 'series') {
|
||||
var noLabel = getLabels(data).length === 1 && getLabels(data)[0] === '';
|
||||
let noLabel = getLabels(data).length === 1 && getLabels(data)[0] === '';
|
||||
if (noLabel) {
|
||||
this._updateData();
|
||||
return [(this.get('yAxisLabel'))];
|
||||
|
@ -117,7 +117,7 @@ define(function (require) {
|
|||
* Returns the results of the addition of numbers in a filtered array.
|
||||
*/
|
||||
Data.prototype._sumYs = function (arr, callback) {
|
||||
var filteredArray = arr.filter(callback);
|
||||
let filteredArray = arr.filter(callback);
|
||||
|
||||
return (filteredArray.length) ? filteredArray.reduce(this._addVals) : 0;
|
||||
};
|
||||
|
@ -134,8 +134,8 @@ define(function (require) {
|
|||
*
|
||||
*/
|
||||
Data.prototype._getCounts = function (i, j) {
|
||||
var data = this.chartData();
|
||||
var dataLengths = {};
|
||||
let data = this.chartData();
|
||||
let dataLengths = {};
|
||||
|
||||
dataLengths.charts = data.length;
|
||||
dataLengths.stacks = dataLengths.charts ? data[i].series.length : 0;
|
||||
|
@ -148,7 +148,7 @@ define(function (require) {
|
|||
*
|
||||
*/
|
||||
Data.prototype._createCache = function () {
|
||||
var cache = {
|
||||
let cache = {
|
||||
index: {
|
||||
chart: 0,
|
||||
stack: 0,
|
||||
|
@ -169,7 +169,7 @@ define(function (require) {
|
|||
* mixed datasets containing both positive and negative values.
|
||||
*/
|
||||
Data.prototype._stackNegAndPosVals = function (d, y0, y) {
|
||||
var data = this.chartData();
|
||||
let data = this.chartData();
|
||||
|
||||
// Storing counters and data characteristics needed to stack values properly
|
||||
if (!this._cache) {
|
||||
|
@ -181,7 +181,7 @@ define(function (require) {
|
|||
|
||||
|
||||
// last stack, or last value, reset the stack count and y value array
|
||||
var lastStack = (this._cache.index.stack >= this._cache.count.stacks);
|
||||
let lastStack = (this._cache.index.stack >= this._cache.count.stacks);
|
||||
if (lastStack) {
|
||||
this._cache.index.stack = 0;
|
||||
++this._cache.index.value;
|
||||
|
@ -192,7 +192,7 @@ define(function (require) {
|
|||
}
|
||||
|
||||
// last value, prepare for the next chart, if one exists
|
||||
var lastValue = (this._cache.index.value >= this._cache.count.values);
|
||||
let lastValue = (this._cache.index.value >= this._cache.count.values);
|
||||
if (lastValue) {
|
||||
this._cache.index.value = 0;
|
||||
++this._cache.index.chart;
|
||||
|
@ -204,14 +204,14 @@ define(function (require) {
|
|||
}
|
||||
|
||||
// get stack and value count for next chart
|
||||
var chartSeries = data[this._cache.index.chart].series;
|
||||
let chartSeries = data[this._cache.index.chart].series;
|
||||
this._cache.count.stacks = chartSeries.length;
|
||||
this._cache.count.values = chartSeries.length ? chartSeries[this._cache.index.stack].values.length : 0;
|
||||
}
|
||||
};
|
||||
|
||||
Data.prototype.getDataType = function () {
|
||||
var data = this.getVisData();
|
||||
let data = this.getVisData();
|
||||
let type;
|
||||
|
||||
data.forEach(function (obj) {
|
||||
|
@ -236,7 +236,7 @@ define(function (require) {
|
|||
*/
|
||||
Data.prototype.chartData = function () {
|
||||
if (!this.data.series) {
|
||||
var arr = this.data.rows ? this.data.rows : this.data.columns;
|
||||
let arr = this.data.rows ? this.data.rows : this.data.columns;
|
||||
return _.toArray(arr);
|
||||
}
|
||||
return [this.data];
|
||||
|
@ -269,7 +269,7 @@ define(function (require) {
|
|||
* @return {Object}
|
||||
*/
|
||||
Data.prototype.getGeoExtents = function () {
|
||||
var visData = this.getVisData();
|
||||
let visData = this.getVisData();
|
||||
|
||||
return _.reduce(_.pluck(visData, 'geoJson.properties'), function (minMax, props) {
|
||||
return {
|
||||
|
@ -303,7 +303,7 @@ define(function (require) {
|
|||
* @returns {*} Data object value
|
||||
*/
|
||||
Data.prototype.get = function (thing, def) {
|
||||
var source = (this.data.rows || this.data.columns || [this.data])[0];
|
||||
let source = (this.data.rows || this.data.columns || [this.data])[0];
|
||||
return _.get(source, thing, def);
|
||||
};
|
||||
|
||||
|
@ -312,7 +312,7 @@ define(function (require) {
|
|||
* @returns {*}
|
||||
*/
|
||||
Data.prototype.hasNullValues = function () {
|
||||
var chartData = this.chartData();
|
||||
let chartData = this.chartData();
|
||||
|
||||
return chartData.some(function (chart) {
|
||||
return chart.series.some(function (obj) {
|
||||
|
@ -348,13 +348,13 @@ define(function (require) {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
Data.prototype.shouldBeStacked = function () {
|
||||
var isHistogram = (this._attr.type === 'histogram');
|
||||
var isArea = (this._attr.type === 'area');
|
||||
var isOverlapping = (this._attr.mode === 'overlap');
|
||||
var grouped = (this._attr.mode === 'grouped');
|
||||
let isHistogram = (this._attr.type === 'histogram');
|
||||
let isArea = (this._attr.type === 'area');
|
||||
let isOverlapping = (this._attr.mode === 'overlap');
|
||||
let grouped = (this._attr.mode === 'grouped');
|
||||
|
||||
var stackedHisto = isHistogram && !grouped;
|
||||
var stackedArea = isArea && !isOverlapping;
|
||||
let stackedHisto = isHistogram && !grouped;
|
||||
let stackedArea = isArea && !isOverlapping;
|
||||
|
||||
return stackedHisto || stackedArea;
|
||||
};
|
||||
|
@ -384,27 +384,27 @@ define(function (require) {
|
|||
* @returns {Number} Min y axis value
|
||||
*/
|
||||
Data.prototype.getYMin = function (getValue) {
|
||||
var self = this;
|
||||
var arr = [];
|
||||
let self = this;
|
||||
let arr = [];
|
||||
|
||||
if (this._attr.mode === 'percentage' || this._attr.mode === 'wiggle' ||
|
||||
this._attr.mode === 'silhouette') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var flat = this.flatten();
|
||||
let flat = this.flatten();
|
||||
// if there is only one data point and its less than zero,
|
||||
// return 0 as the yMax value.
|
||||
if (!flat.length || flat.length === 1 && flat[0].y > 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var min = Infinity;
|
||||
let min = Infinity;
|
||||
|
||||
// for each object in the dataArray,
|
||||
// push the calculated y value to the initialized array (arr)
|
||||
_.each(this.chartData(), function (chart) {
|
||||
var calculatedMin = self._getYExtent(chart, 'min', getValue);
|
||||
let calculatedMin = self._getYExtent(chart, 'min', getValue);
|
||||
if (!_.isUndefined(calculatedMin)) {
|
||||
min = Math.min(min, calculatedMin);
|
||||
}
|
||||
|
@ -424,26 +424,26 @@ define(function (require) {
|
|||
* @returns {Number} Max y axis value
|
||||
*/
|
||||
Data.prototype.getYMax = function (getValue) {
|
||||
var self = this;
|
||||
var arr = [];
|
||||
let self = this;
|
||||
let arr = [];
|
||||
|
||||
if (self._attr.mode === 'percentage') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
var flat = this.flatten();
|
||||
let flat = this.flatten();
|
||||
// if there is only one data point and its less than zero,
|
||||
// return 0 as the yMax value.
|
||||
if (!flat.length || flat.length === 1 && flat[0].y < 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var max = -Infinity;
|
||||
let max = -Infinity;
|
||||
|
||||
// for each object in the dataArray,
|
||||
// push the calculated y value to the initialized array (arr)
|
||||
_.each(this.chartData(), function (chart) {
|
||||
var calculatedMax = self._getYExtent(chart, 'max', getValue);
|
||||
let calculatedMax = self._getYExtent(chart, 'max', getValue);
|
||||
if (!_.isUndefined(calculatedMax)) {
|
||||
max = Math.max(max, calculatedMax);
|
||||
}
|
||||
|
@ -481,7 +481,7 @@ define(function (require) {
|
|||
getValue = getValue || this._getY;
|
||||
}
|
||||
|
||||
var points = chart.series
|
||||
let points = chart.series
|
||||
.reduce(function (points, series) {
|
||||
return points.concat(series.values);
|
||||
}, [])
|
||||
|
@ -516,8 +516,8 @@ define(function (require) {
|
|||
* @returns {Array} Array of labels (strings)
|
||||
*/
|
||||
Data.prototype.returnNames = function (array, index, columns) {
|
||||
var names = [];
|
||||
var self = this;
|
||||
let names = [];
|
||||
let self = this;
|
||||
|
||||
_.forEach(array, function (obj, i) {
|
||||
names.push({
|
||||
|
@ -527,7 +527,7 @@ define(function (require) {
|
|||
});
|
||||
|
||||
if (obj.children) {
|
||||
var plusIndex = index + 1;
|
||||
let plusIndex = index + 1;
|
||||
|
||||
_.forEach(self.returnNames(obj.children, plusIndex, columns), function (namedObj) {
|
||||
names.push(namedObj);
|
||||
|
@ -549,10 +549,10 @@ define(function (require) {
|
|||
* @returns {Array} Array of names (strings)
|
||||
*/
|
||||
Data.prototype.getNames = function (data, columns) {
|
||||
var slices = data.slices;
|
||||
let slices = data.slices;
|
||||
|
||||
if (slices.children) {
|
||||
var namedObj = this.returnNames(slices.children, 0, columns);
|
||||
let namedObj = this.returnNames(slices.children, 0, columns);
|
||||
|
||||
return _(namedObj)
|
||||
.sortBy(function (obj) {
|
||||
|
@ -571,7 +571,7 @@ define(function (require) {
|
|||
* @returns {*}
|
||||
*/
|
||||
Data.prototype._removeZeroSlices = function (slices) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
if (!slices.children) return slices;
|
||||
|
||||
|
@ -594,11 +594,11 @@ define(function (require) {
|
|||
* @returns {Array} Array of unique names (strings)
|
||||
*/
|
||||
Data.prototype.pieNames = function (data) {
|
||||
var self = this;
|
||||
var names = [];
|
||||
let self = this;
|
||||
let names = [];
|
||||
|
||||
_.forEach(data, function (obj) {
|
||||
var columns = obj.raw ? obj.raw.columns : undefined;
|
||||
let columns = obj.raw ? obj.raw.columns : undefined;
|
||||
obj.slices = self._removeZeroSlices(obj.slices);
|
||||
|
||||
_.forEach(self.getNames(obj, columns), function (name) {
|
||||
|
@ -670,17 +670,17 @@ define(function (require) {
|
|||
* @return {undefined}
|
||||
*/
|
||||
Data.prototype._normalizeOrdered = function () {
|
||||
var data = this.getVisData();
|
||||
var self = this;
|
||||
let data = this.getVisData();
|
||||
let self = this;
|
||||
|
||||
data.forEach(function (d) {
|
||||
if (!d.ordered || !d.ordered.date) return;
|
||||
|
||||
var missingMin = d.ordered.min == null;
|
||||
var missingMax = d.ordered.max == null;
|
||||
let missingMin = d.ordered.min == null;
|
||||
let missingMax = d.ordered.max == null;
|
||||
|
||||
if (missingMax || missingMin) {
|
||||
var extent = d3.extent(self.xValues());
|
||||
let extent = d3.extent(self.xValues());
|
||||
if (missingMin) d.ordered.min = extent[0];
|
||||
if (missingMax) d.ordered.max = extent[1];
|
||||
}
|
||||
|
@ -702,7 +702,7 @@ define(function (require) {
|
|||
values = _.map(series.rows, function (row) {
|
||||
return row[row.length - 1];
|
||||
});
|
||||
var extents = [_.min(values), _.max(values)];
|
||||
let extents = [_.min(values), _.max(values)];
|
||||
return extents;
|
||||
};
|
||||
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define(function (require) {
|
||||
return function DispatchClass(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
var SimpleEmitter = require('ui/utils/SimpleEmitter');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
let SimpleEmitter = require('ui/utils/SimpleEmitter');
|
||||
|
||||
/**
|
||||
* Handles event responses
|
||||
|
@ -35,19 +35,19 @@ define(function (require) {
|
|||
* e: (d3.event|*), handler: (Object|*)}} Event response object
|
||||
*/
|
||||
Dispatch.prototype.eventResponse = function (d, i) {
|
||||
var datum = d._input || d;
|
||||
var data = d3.event.target.nearestViewportElement ?
|
||||
let datum = d._input || d;
|
||||
let data = d3.event.target.nearestViewportElement ?
|
||||
d3.event.target.nearestViewportElement.__data__ : d3.event.target.__data__;
|
||||
var label = d.label ? d.label : d.name;
|
||||
var isSeries = !!(data && data.series);
|
||||
var isSlices = !!(data && data.slices);
|
||||
var series = isSeries ? data.series : undefined;
|
||||
var slices = isSlices ? data.slices : undefined;
|
||||
var handler = this.handler;
|
||||
var color = _.get(handler, 'data.color');
|
||||
var isPercentage = (handler && handler._attr.mode === 'percentage');
|
||||
let label = d.label ? d.label : d.name;
|
||||
let isSeries = !!(data && data.series);
|
||||
let isSlices = !!(data && data.slices);
|
||||
let series = isSeries ? data.series : undefined;
|
||||
let slices = isSlices ? data.slices : undefined;
|
||||
let handler = this.handler;
|
||||
let color = _.get(handler, 'data.color');
|
||||
let isPercentage = (handler && handler._attr.mode === 'percentage');
|
||||
|
||||
var eventData = {
|
||||
let eventData = {
|
||||
value: d.y,
|
||||
point: datum,
|
||||
datum: datum,
|
||||
|
@ -64,7 +64,7 @@ define(function (require) {
|
|||
|
||||
if (isSeries) {
|
||||
// Find object with the actual d value and add it to the point object
|
||||
var object = _.find(series, { 'label': d.label });
|
||||
let object = _.find(series, { 'label': d.label });
|
||||
eventData.value = +object.values[i].y;
|
||||
|
||||
if (isPercentage) {
|
||||
|
@ -87,7 +87,7 @@ define(function (require) {
|
|||
Dispatch.prototype.addEvent = function (event, callback) {
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var element = d3.select(this);
|
||||
let element = d3.select(this);
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
return element.on(event, callback);
|
||||
|
@ -102,10 +102,10 @@ define(function (require) {
|
|||
* @returns {Function}
|
||||
*/
|
||||
Dispatch.prototype.addHoverEvent = function () {
|
||||
var self = this;
|
||||
var isClickable = this.listenerCount('click') > 0;
|
||||
var addEvent = this.addEvent;
|
||||
var $el = this.handler.el;
|
||||
let self = this;
|
||||
let isClickable = this.listenerCount('click') > 0;
|
||||
let addEvent = this.addEvent;
|
||||
let $el = this.handler.el;
|
||||
if (!this.handler.highlight) {
|
||||
this.handler.highlight = self.highlight;
|
||||
}
|
||||
|
@ -129,9 +129,9 @@ define(function (require) {
|
|||
* @returns {Function}
|
||||
*/
|
||||
Dispatch.prototype.addMouseoutEvent = function () {
|
||||
var self = this;
|
||||
var addEvent = this.addEvent;
|
||||
var $el = this.handler.el;
|
||||
let self = this;
|
||||
let addEvent = this.addEvent;
|
||||
let $el = this.handler.el;
|
||||
if (!this.handler.unHighlight) {
|
||||
this.handler.unHighlight = self.unHighlight;
|
||||
}
|
||||
|
@ -149,8 +149,8 @@ define(function (require) {
|
|||
* @returns {Function}
|
||||
*/
|
||||
Dispatch.prototype.addClickEvent = function () {
|
||||
var self = this;
|
||||
var addEvent = this.addEvent;
|
||||
let self = this;
|
||||
let addEvent = this.addEvent;
|
||||
|
||||
function click(d, i) {
|
||||
self.emit('click', self.eventResponse(d, i));
|
||||
|
@ -166,9 +166,9 @@ define(function (require) {
|
|||
* @returns {Boolean}
|
||||
*/
|
||||
Dispatch.prototype.allowBrushing = function () {
|
||||
var xAxis = this.handler.xAxis;
|
||||
let xAxis = this.handler.xAxis;
|
||||
// Don't allow brushing for time based charts from non-time-based indices
|
||||
var hasTimeField = this.handler.vis._attr.hasTimeField;
|
||||
let hasTimeField = this.handler.vis._attr.hasTimeField;
|
||||
|
||||
return Boolean(hasTimeField && xAxis.ordered && xAxis.xScale && _.isFunction(xAxis.xScale.invert));
|
||||
};
|
||||
|
@ -191,16 +191,16 @@ define(function (require) {
|
|||
Dispatch.prototype.addBrushEvent = function (svg) {
|
||||
if (!this.isBrushable()) return;
|
||||
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.xAxis.yScale;
|
||||
var brush = this.createBrush(xScale, svg);
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.xAxis.yScale;
|
||||
let brush = this.createBrush(xScale, svg);
|
||||
|
||||
function brushEnd() {
|
||||
if (!validBrushClick(d3.event)) return;
|
||||
|
||||
var bar = d3.select(this);
|
||||
var startX = d3.mouse(svg.node());
|
||||
var startXInv = xScale.invert(startX[0]);
|
||||
let bar = d3.select(this);
|
||||
let startX = d3.mouse(svg.node());
|
||||
let startXInv = xScale.invert(startX[0]);
|
||||
|
||||
// Reset the brush value
|
||||
brush.extent([startXInv, startXInv]);
|
||||
|
@ -234,7 +234,7 @@ define(function (require) {
|
|||
* @method highlight
|
||||
*/
|
||||
Dispatch.prototype.highlight = function (element) {
|
||||
var label = this.getAttribute('data-label');
|
||||
let label = this.getAttribute('data-label');
|
||||
if (!label) return;
|
||||
//Opacity 1 is needed to avoid the css application
|
||||
$('[data-label]', element.parentNode).css('opacity', 1).not(
|
||||
|
@ -262,26 +262,26 @@ define(function (require) {
|
|||
* @returns {*} Returns a D3 brush function and a SVG with a brush group attached
|
||||
*/
|
||||
Dispatch.prototype.createBrush = function (xScale, svg) {
|
||||
var self = this;
|
||||
var attr = self.handler._attr;
|
||||
var height = attr.height;
|
||||
var margin = attr.margin;
|
||||
let self = this;
|
||||
let attr = self.handler._attr;
|
||||
let height = attr.height;
|
||||
let margin = attr.margin;
|
||||
|
||||
// Brush scale
|
||||
var brush = d3.svg.brush()
|
||||
let brush = d3.svg.brush()
|
||||
.x(xScale)
|
||||
.on('brushend', function brushEnd() {
|
||||
|
||||
// Assumes data is selected at the chart level
|
||||
// In this case, the number of data objects should always be 1
|
||||
var data = d3.select(this).data()[0];
|
||||
var isTimeSeries = (data.ordered && data.ordered.date);
|
||||
let data = d3.select(this).data()[0];
|
||||
let isTimeSeries = (data.ordered && data.ordered.date);
|
||||
|
||||
// Allows for brushing on d3.scale.ordinal()
|
||||
var selected = xScale.domain().filter(function (d) {
|
||||
let selected = xScale.domain().filter(function (d) {
|
||||
return (brush.extent()[0] <= xScale(d)) && (xScale(d) <= brush.extent()[1]);
|
||||
});
|
||||
var range = isTimeSeries ? brush.extent() : selected;
|
||||
let range = isTimeSeries ? brush.extent() : selected;
|
||||
|
||||
return self.emit('brush', {
|
||||
range: range,
|
||||
|
@ -298,7 +298,7 @@ define(function (require) {
|
|||
.call(brush)
|
||||
.call(function (brushG) {
|
||||
// hijack the brush start event to filter out right/middle clicks
|
||||
var brushHandler = brushG.on('mousedown.brush');
|
||||
let brushHandler = brushG.on('mousedown.brush');
|
||||
if (!brushHandler) return; // touch events in use
|
||||
brushG.on('mousedown.brush', function () {
|
||||
if (validBrushClick(d3.event)) brushHandler.apply(this, arguments);
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
define(function (require) {
|
||||
return function HandlerBaseClass(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var errors = require('ui/errors');
|
||||
var Binder = require('ui/Binder');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let errors = require('ui/errors');
|
||||
let Binder = require('ui/Binder');
|
||||
|
||||
var Data = Private(require('ui/vislib/lib/data'));
|
||||
var Layout = Private(require('ui/vislib/lib/layout/layout'));
|
||||
let Data = Private(require('ui/vislib/lib/data'));
|
||||
let Layout = Private(require('ui/vislib/lib/layout/layout'));
|
||||
|
||||
/**
|
||||
* Handles building all the components of the visualization
|
||||
|
@ -52,7 +52,7 @@ define(function (require) {
|
|||
// memoize so that the same function is returned every time,
|
||||
// allowing us to remove/re-add the same function
|
||||
this.getProxyHandler = _.memoize(function (event) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
return function (e) {
|
||||
self.vis.emit(event, e);
|
||||
};
|
||||
|
@ -67,7 +67,7 @@ define(function (require) {
|
|||
* @private
|
||||
*/
|
||||
Handler.prototype._validateData = function () {
|
||||
var dataType = this.data.type;
|
||||
let dataType = this.data.type;
|
||||
|
||||
if (!dataType) {
|
||||
throw new errors.NoResults();
|
||||
|
@ -82,9 +82,9 @@ define(function (require) {
|
|||
* @returns {HTMLElement} With the visualization child element
|
||||
*/
|
||||
Handler.prototype.render = function () {
|
||||
var self = this;
|
||||
var charts = this.charts = [];
|
||||
var selection = d3.select(this.el);
|
||||
let self = this;
|
||||
let charts = this.charts = [];
|
||||
let selection = d3.select(this.el);
|
||||
|
||||
selection.selectAll('*').remove();
|
||||
|
||||
|
@ -98,7 +98,7 @@ define(function (require) {
|
|||
// render the chart(s)
|
||||
selection.selectAll('.chart')
|
||||
.each(function (chartData) {
|
||||
var chart = new self.ChartClass(self, this, chartData);
|
||||
let chart = new self.ChartClass(self, this, chartData);
|
||||
|
||||
self.vis.activeEvents().forEach(function (event) {
|
||||
self.enable(event, chart);
|
||||
|
@ -134,7 +134,7 @@ define(function (require) {
|
|||
|
||||
function chartEventProxyToggle(method) {
|
||||
return function (event, chart) {
|
||||
var proxyHandler = this.getProxyHandler(event);
|
||||
let proxyHandler = this.getProxyHandler(event);
|
||||
|
||||
_.each(chart ? [chart] : this.charts, function (chart) {
|
||||
chart.events[method](event, proxyHandler);
|
||||
|
@ -165,7 +165,7 @@ define(function (require) {
|
|||
Handler.prototype.error = function (message) {
|
||||
this.removeAll(this.el);
|
||||
|
||||
var div = d3.select(this.el)
|
||||
let div = d3.select(this.el)
|
||||
.append('div')
|
||||
// class name needs `chart` in it for the polling checkSize function
|
||||
// to continuously call render on resize
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function (require) {
|
||||
return function HandlerTypeFactory(Private) {
|
||||
var pointSeries = Private(require('ui/vislib/lib/handler/types/point_series'));
|
||||
let pointSeries = Private(require('ui/vislib/lib/handler/types/point_series'));
|
||||
|
||||
/**
|
||||
* Handles the building of each visualization
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
define(function (require) {
|
||||
return function PieHandler(Private) {
|
||||
var Handler = Private(require('ui/vislib/lib/handler/handler'));
|
||||
var Data = Private(require('ui/vislib/lib/data'));
|
||||
var ChartTitle = Private(require('ui/vislib/lib/chart_title'));
|
||||
let Handler = Private(require('ui/vislib/lib/handler/handler'));
|
||||
let Data = Private(require('ui/vislib/lib/data'));
|
||||
let ChartTitle = Private(require('ui/vislib/lib/chart_title'));
|
||||
|
||||
/*
|
||||
* Handler for Pie visualizations.
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
define(function (require) {
|
||||
return function ColumnHandler(Private) {
|
||||
var injectZeros = Private(require('ui/vislib/components/zero_injection/inject_zeros'));
|
||||
var Handler = Private(require('ui/vislib/lib/handler/handler'));
|
||||
var Data = Private(require('ui/vislib/lib/data'));
|
||||
var XAxis = Private(require('ui/vislib/lib/x_axis'));
|
||||
var YAxis = Private(require('ui/vislib/lib/y_axis'));
|
||||
var AxisTitle = Private(require('ui/vislib/lib/axis_title'));
|
||||
var ChartTitle = Private(require('ui/vislib/lib/chart_title'));
|
||||
var Alerts = Private(require('ui/vislib/lib/alerts'));
|
||||
let injectZeros = Private(require('ui/vislib/components/zero_injection/inject_zeros'));
|
||||
let Handler = Private(require('ui/vislib/lib/handler/handler'));
|
||||
let Data = Private(require('ui/vislib/lib/data'));
|
||||
let XAxis = Private(require('ui/vislib/lib/x_axis'));
|
||||
let YAxis = Private(require('ui/vislib/lib/y_axis'));
|
||||
let AxisTitle = Private(require('ui/vislib/lib/axis_title'));
|
||||
let ChartTitle = Private(require('ui/vislib/lib/chart_title'));
|
||||
let Alerts = Private(require('ui/vislib/lib/alerts'));
|
||||
|
||||
/*
|
||||
* Create handlers for Area, Column, and Line charts which
|
||||
|
@ -17,7 +17,7 @@ define(function (require) {
|
|||
opts = opts || {};
|
||||
|
||||
return function (vis) {
|
||||
var isUserDefinedYAxis = vis._attr.setYExtents;
|
||||
let isUserDefinedYAxis = vis._attr.setYExtents;
|
||||
let data;
|
||||
|
||||
if (opts.zeroFill) {
|
||||
|
@ -70,8 +70,8 @@ define(function (require) {
|
|||
test: function (vis, data) {
|
||||
if (!data.shouldBeStacked() || data.maxNumberOfSeries() < 2) return;
|
||||
|
||||
var hasPos = data.getYMax(data._getY) > 0;
|
||||
var hasNeg = data.getYMin(data._getY) < 0;
|
||||
let hasPos = data.getYMax(data._getY) > 0;
|
||||
let hasNeg = data.getYMin(data._getY) < 0;
|
||||
return (hasPos && hasNeg);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
define(function (require) {
|
||||
return function MapHandlerProvider(Private) {
|
||||
var _ = require('lodash');
|
||||
let _ = require('lodash');
|
||||
|
||||
var Handler = Private(require('ui/vislib/lib/handler/handler'));
|
||||
var Data = Private(require('ui/vislib/lib/data'));
|
||||
let Handler = Private(require('ui/vislib/lib/handler/handler'));
|
||||
let Data = Private(require('ui/vislib/lib/data'));
|
||||
|
||||
return function (vis) {
|
||||
var data = new Data(vis.data, vis._attr, vis.uiState);
|
||||
let data = new Data(vis.data, vis._attr, vis.uiState);
|
||||
|
||||
var MapHandler = new Handler(vis, {
|
||||
let MapHandler = new Handler(vis, {
|
||||
data: data
|
||||
});
|
||||
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function LayoutFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
|
||||
var layoutType = Private(require('ui/vislib/lib/layout/layout_types'));
|
||||
let layoutType = Private(require('ui/vislib/lib/layout/layout_types'));
|
||||
|
||||
/**
|
||||
* Builds the visualization DOM layout
|
||||
|
@ -53,7 +53,7 @@ define(function (require) {
|
|||
* @returns {*} Creates the visualization layout
|
||||
*/
|
||||
Layout.prototype.createLayout = function (arr) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
return _.each(arr, function (obj) {
|
||||
self.layout(obj);
|
||||
|
@ -86,7 +86,7 @@ define(function (require) {
|
|||
obj.parent = '.' + obj.parent;
|
||||
}
|
||||
|
||||
var childEl = this.appendElem(obj.parent, obj.type, obj.class);
|
||||
let childEl = this.appendElem(obj.parent, obj.type, obj.class);
|
||||
|
||||
if (obj.datum) {
|
||||
childEl.datum(obj.datum);
|
||||
|
@ -97,7 +97,7 @@ define(function (require) {
|
|||
}
|
||||
|
||||
if (obj.children) {
|
||||
var newParent = childEl[0][0];
|
||||
let newParent = childEl[0][0];
|
||||
|
||||
_.forEach(obj.children, function (obj) {
|
||||
if (!obj.parent) {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function ChartSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
|
||||
|
@ -9,7 +9,7 @@ define(function () {
|
|||
*/
|
||||
return function split(selection) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this)
|
||||
let div = d3.select(this)
|
||||
.attr('class', function () {
|
||||
if (data.rows) {
|
||||
return 'chart-wrapper-row';
|
||||
|
@ -21,7 +21,7 @@ define(function () {
|
|||
});
|
||||
let divClass;
|
||||
|
||||
var charts = div.selectAll('charts')
|
||||
let charts = div.selectAll('charts')
|
||||
.append('div')
|
||||
.data(function (d) {
|
||||
if (d.rows) {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
define(function () {
|
||||
return function ChartTitleSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
var $ = require('jquery');
|
||||
let d3 = require('d3');
|
||||
let $ = require('jquery');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to either the `.y-axis-chart-title` element or the
|
||||
|
@ -12,8 +12,8 @@ define(function () {
|
|||
*/
|
||||
return function (selection) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this);
|
||||
var parent = $(this).parents('.vis-wrapper');
|
||||
let div = d3.select(this);
|
||||
let parent = $(this).parents('.vis-wrapper');
|
||||
|
||||
if (!data.series) {
|
||||
div.selectAll('.chart-title')
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function XAxisSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.x-axis-div-wrapper` element based on the data layout.
|
||||
|
@ -10,7 +10,7 @@ define(function () {
|
|||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var div = d3.select(this);
|
||||
let div = d3.select(this);
|
||||
|
||||
div.selectAll('.x-axis-div')
|
||||
.append('div')
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function YAxisSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.y-axis-div-wrapper` element based on the data layout.
|
||||
|
@ -10,10 +10,10 @@ define(function () {
|
|||
|
||||
// render and get bounding box width
|
||||
return function (selection, parent, opts) {
|
||||
var yAxis = opts && opts.yAxis;
|
||||
let yAxis = opts && opts.yAxis;
|
||||
|
||||
selection.each(function () {
|
||||
var div = d3.select(this);
|
||||
let div = d3.select(this);
|
||||
|
||||
div.call(setWidth, yAxis);
|
||||
|
||||
|
@ -31,14 +31,14 @@ define(function () {
|
|||
function setWidth(el, yAxis) {
|
||||
if (!yAxis) return;
|
||||
|
||||
var padding = 5;
|
||||
var height = parseInt(el.node().clientHeight, 10);
|
||||
let padding = 5;
|
||||
let height = parseInt(el.node().clientHeight, 10);
|
||||
|
||||
// render svg and get the width of the bounding box
|
||||
var svg = d3.select('body')
|
||||
let svg = d3.select('body')
|
||||
.append('svg')
|
||||
.attr('style', 'position:absolute; top:-10000; left:-10000');
|
||||
var width = svg.append('g')
|
||||
let width = svg.append('g')
|
||||
.call(yAxis.getYAxis(height)).node().getBBox().width + padding;
|
||||
svg.remove();
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function ChartSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
|
||||
|
@ -10,7 +10,7 @@ define(function () {
|
|||
|
||||
return function split(selection) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this)
|
||||
let div = d3.select(this)
|
||||
.attr('class', function () {
|
||||
if (data.rows) {
|
||||
return 'chart-wrapper-row';
|
||||
|
@ -22,7 +22,7 @@ define(function () {
|
|||
});
|
||||
let divClass;
|
||||
|
||||
var charts = div.selectAll('charts')
|
||||
let charts = div.selectAll('charts')
|
||||
.append('div')
|
||||
.data(function (d) {
|
||||
if (d.rows) {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function ChartTitleSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to either the `.y-axis-chart-title` element or the
|
||||
|
@ -12,7 +12,7 @@ define(function () {
|
|||
|
||||
return function (selection, parent) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this);
|
||||
let div = d3.select(this);
|
||||
|
||||
if (!data.slices) {
|
||||
div.selectAll('.chart-title')
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
define(function () {
|
||||
return function ChartSplitFactory() {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
|
||||
|
@ -9,7 +9,7 @@ define(function () {
|
|||
*/
|
||||
return function split(selection) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this)
|
||||
let div = d3.select(this)
|
||||
.attr('class', function () {
|
||||
// Determine the parent class
|
||||
if (data.rows) {
|
||||
|
@ -22,7 +22,7 @@ define(function () {
|
|||
});
|
||||
let divClass;
|
||||
|
||||
var charts = div.selectAll('charts')
|
||||
let charts = div.selectAll('charts')
|
||||
.append('div')
|
||||
.data(function (d) {
|
||||
// Determine the child class
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function ColumnLayoutFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
let d3 = require('d3');
|
||||
|
||||
var chartSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/chart_split'));
|
||||
var yAxisSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/y_axis_split'));
|
||||
var xAxisSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/x_axis_split'));
|
||||
var chartTitleSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/chart_title_split'));
|
||||
let chartSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/chart_split'));
|
||||
let yAxisSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/y_axis_split'));
|
||||
let xAxisSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/x_axis_split'));
|
||||
let chartTitleSplit = Private(require('ui/vislib/lib/layout/splits/column_chart/chart_title_split'));
|
||||
|
||||
/**
|
||||
* Specifies the visualization layout for column charts.
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
define(function (require) {
|
||||
return function ColumnLayoutFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var mapSplit = Private(require('ui/vislib/lib/layout/splits/tile_map/map_split'));
|
||||
let d3 = require('d3');
|
||||
let mapSplit = Private(require('ui/vislib/lib/layout/splits/tile_map/map_split'));
|
||||
|
||||
/*
|
||||
* Specifies the visualization layout for tile maps.
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
define(function (require) {
|
||||
return function ColumnLayoutFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var chartSplit = Private(require('ui/vislib/lib/layout/splits/pie_chart/chart_split'));
|
||||
var chartTitleSplit = Private(require('ui/vislib/lib/layout/splits/pie_chart/chart_title_split'));
|
||||
let d3 = require('d3');
|
||||
let chartSplit = Private(require('ui/vislib/lib/layout/splits/pie_chart/chart_split'));
|
||||
let chartTitleSplit = Private(require('ui/vislib/lib/layout/splits/pie_chart/chart_title_split'));
|
||||
|
||||
/**
|
||||
* Specifies the visualization layout for column charts.
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
define(function (require) {
|
||||
return function ResizeCheckerFactory(Private, Notifier, $rootScope) {
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let _ = require('lodash');
|
||||
|
||||
var EventEmitter = Private(require('ui/events'));
|
||||
var reflowWatcher = Private(require('ui/reflow_watcher'));
|
||||
var sequencer = require('ui/utils/sequencer');
|
||||
let EventEmitter = Private(require('ui/events'));
|
||||
let reflowWatcher = Private(require('ui/reflow_watcher'));
|
||||
let sequencer = require('ui/utils/sequencer');
|
||||
|
||||
var SCHEDULE = ResizeChecker.SCHEDULE = sequencer.createEaseIn(
|
||||
let SCHEDULE = ResizeChecker.SCHEDULE = sequencer.createEaseIn(
|
||||
100, // shortest delay
|
||||
10000, // longest delay
|
||||
50 // tick count
|
||||
|
@ -15,7 +15,7 @@ define(function (require) {
|
|||
|
||||
// maximum ms that we can delay emitting 'resize'. This is only used
|
||||
// to debounce resizes when the size of the element is constantly changing
|
||||
var MS_MAX_RESIZE_DELAY = ResizeChecker.MS_MAX_RESIZE_DELAY = 500;
|
||||
let MS_MAX_RESIZE_DELAY = ResizeChecker.MS_MAX_RESIZE_DELAY = 500;
|
||||
|
||||
/**
|
||||
* Checks the size of an element on a regular basis. Provides
|
||||
|
@ -87,7 +87,7 @@ define(function (require) {
|
|||
* @return {boolean} - true if the passed in value matches the saved size
|
||||
*/
|
||||
ResizeChecker.prototype._equalsSavedSize = function (a) {
|
||||
var b = this._savedSize || {};
|
||||
let b = this._savedSize || {};
|
||||
return a.w === b.w && a.h === b.h;
|
||||
};
|
||||
|
||||
|
@ -128,12 +128,12 @@ define(function (require) {
|
|||
* @return {void}
|
||||
*/
|
||||
ResizeChecker.prototype.check = function () {
|
||||
var newSize = this.read();
|
||||
var dirty = this.saveSize(newSize);
|
||||
var dirtyChanged = this.saveDirty(dirty);
|
||||
let newSize = this.read();
|
||||
let dirty = this.saveSize(newSize);
|
||||
let dirtyChanged = this.saveDirty(dirty);
|
||||
|
||||
var doneDirty = !dirty && dirtyChanged;
|
||||
var muchDirty = dirty && (this.lastDirtyChange() - Date.now() > MS_MAX_RESIZE_DELAY);
|
||||
let doneDirty = !dirty && dirtyChanged;
|
||||
let muchDirty = dirty && (this.lastDirtyChange() - Date.now() > MS_MAX_RESIZE_DELAY);
|
||||
if (doneDirty || muchDirty) {
|
||||
this.emit('resize', newSize);
|
||||
}
|
||||
|
@ -174,10 +174,10 @@ define(function (require) {
|
|||
this._tick += 1;
|
||||
}
|
||||
|
||||
var check = this.check; // already bound
|
||||
var tick = this._tick;
|
||||
var notify = this.notify;
|
||||
var ms = this._currentSchedule[this._tick];
|
||||
let check = this.check; // already bound
|
||||
let tick = this._tick;
|
||||
let notify = this.notify;
|
||||
let ms = this._currentSchedule[this._tick];
|
||||
return (this._timerId = setTimeout(function () {
|
||||
check();
|
||||
}, ms));
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function XAxisFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
var moment = require('moment');
|
||||
let d3 = require('d3');
|
||||
let $ = require('jquery');
|
||||
let _ = require('lodash');
|
||||
let moment = require('moment');
|
||||
|
||||
var ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
let ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
|
||||
/**
|
||||
* Adds an x axis to the visualization
|
||||
|
@ -47,7 +47,7 @@ define(function (require) {
|
|||
* @returns {*} D3 scale function
|
||||
*/
|
||||
XAxis.prototype.getScale = function () {
|
||||
var ordered = this.ordered;
|
||||
let ordered = this.ordered;
|
||||
|
||||
if (ordered && ordered.date) {
|
||||
return d3.time.scale.utc();
|
||||
|
@ -65,7 +65,7 @@ define(function (require) {
|
|||
* @returns {*} D3 scale function
|
||||
*/
|
||||
XAxis.prototype.getDomain = function (scale) {
|
||||
var ordered = this.ordered;
|
||||
let ordered = this.ordered;
|
||||
|
||||
if (ordered && ordered.date) {
|
||||
return this.getTimeDomain(scale, this.xValues);
|
||||
|
@ -99,10 +99,10 @@ define(function (require) {
|
|||
* @param extent
|
||||
*/
|
||||
XAxis.prototype._calculateExtent = function (data, extent) {
|
||||
var ordered = this.ordered;
|
||||
var opts = [ordered[extent]];
|
||||
let ordered = this.ordered;
|
||||
let opts = [ordered[extent]];
|
||||
|
||||
var point = d3[extent](data);
|
||||
let point = d3[extent](data);
|
||||
if (this.expandLastBucket && extent === 'max') {
|
||||
point = this.addInterval(point);
|
||||
}
|
||||
|
@ -146,17 +146,17 @@ define(function (require) {
|
|||
* @returns {number} - x + n intervals
|
||||
*/
|
||||
XAxis.prototype.modByInterval = function (x, n) {
|
||||
var ordered = this.ordered;
|
||||
let ordered = this.ordered;
|
||||
if (!ordered) return x;
|
||||
var interval = ordered.interval;
|
||||
let interval = ordered.interval;
|
||||
if (!interval) return x;
|
||||
|
||||
if (!ordered.date) {
|
||||
return x += (ordered.interval * n);
|
||||
}
|
||||
|
||||
var y = moment(x);
|
||||
var method = n > 0 ? 'add' : 'subtract';
|
||||
let y = moment(x);
|
||||
let method = n > 0 ? 'add' : 'subtract';
|
||||
|
||||
_.times(Math.abs(n), function () {
|
||||
y[method](interval);
|
||||
|
@ -187,7 +187,7 @@ define(function (require) {
|
|||
* @returns {*} D3 scale function
|
||||
*/
|
||||
XAxis.prototype.getRange = function (domain, width) {
|
||||
var ordered = this.ordered;
|
||||
let ordered = this.ordered;
|
||||
|
||||
if (ordered && ordered.date) {
|
||||
return domain.range([0, width]);
|
||||
|
@ -203,7 +203,7 @@ define(function (require) {
|
|||
* @returns {*} D3 x scale function
|
||||
*/
|
||||
XAxis.prototype.getXScale = function (width) {
|
||||
var domain = this.getDomain(this.getScale());
|
||||
let domain = this.getDomain(this.getScale());
|
||||
|
||||
return this.getRange(domain, width);
|
||||
};
|
||||
|
@ -235,7 +235,7 @@ define(function (require) {
|
|||
* @returns {Function} Renders the x axis to a D3 selection
|
||||
*/
|
||||
XAxis.prototype.draw = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
let div;
|
||||
let width;
|
||||
let height;
|
||||
|
@ -283,8 +283,8 @@ define(function (require) {
|
|||
* @returns {Function} Filters or rotates x axis tick labels
|
||||
*/
|
||||
XAxis.prototype.filterOrRotate = function () {
|
||||
var self = this;
|
||||
var ordered = self.ordered;
|
||||
let self = this;
|
||||
let ordered = self.ordered;
|
||||
let axis;
|
||||
let labels;
|
||||
|
||||
|
@ -312,13 +312,13 @@ define(function (require) {
|
|||
* @returns {Function} Rotates x axis tick labels of a D3 selection
|
||||
*/
|
||||
XAxis.prototype.rotateAxisLabels = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
let text;
|
||||
var barWidth = self.xScale.rangeBand();
|
||||
var maxRotatedLength = 180;
|
||||
var xAxisPadding = 15;
|
||||
let barWidth = self.xScale.rangeBand();
|
||||
let maxRotatedLength = 180;
|
||||
let xAxisPadding = 15;
|
||||
let svg;
|
||||
var lengths = [];
|
||||
let lengths = [];
|
||||
let length;
|
||||
self._attr.isRotated = false;
|
||||
|
||||
|
@ -367,13 +367,13 @@ define(function (require) {
|
|||
* @returns {*|jQuery}
|
||||
*/
|
||||
XAxis.prototype.truncateLabel = function (text, size) {
|
||||
var node = d3.select(text).node();
|
||||
var str = $(node).text();
|
||||
var width = node.getBBox().width;
|
||||
var chars = str.length;
|
||||
var pxPerChar = width / chars;
|
||||
var endChar = 0;
|
||||
var ellipsesPad = 4;
|
||||
let node = d3.select(text).node();
|
||||
let str = $(node).text();
|
||||
let width = node.getBBox().width;
|
||||
let chars = str.length;
|
||||
let pxPerChar = width / chars;
|
||||
let endChar = 0;
|
||||
let ellipsesPad = 4;
|
||||
|
||||
if (width > size) {
|
||||
endChar = Math.floor((size / pxPerChar) - ellipsesPad);
|
||||
|
@ -396,14 +396,14 @@ define(function (require) {
|
|||
* @returns {Function}
|
||||
*/
|
||||
XAxis.prototype.filterAxisLabels = function () {
|
||||
var self = this;
|
||||
var startX = 0;
|
||||
let self = this;
|
||||
let startX = 0;
|
||||
let maxW;
|
||||
let par;
|
||||
let myX;
|
||||
let myWidth;
|
||||
let halfWidth;
|
||||
var padding = 1.1;
|
||||
let padding = 1.1;
|
||||
|
||||
return function (selection) {
|
||||
selection.selectAll('.tick text')
|
||||
|
@ -435,7 +435,7 @@ define(function (require) {
|
|||
* @returns {Function}
|
||||
*/
|
||||
XAxis.prototype.fitTitles = function () {
|
||||
var visEls = $('.vis-wrapper');
|
||||
let visEls = $('.vis-wrapper');
|
||||
let xAxisChartTitle;
|
||||
let yAxisChartTitle;
|
||||
let text;
|
||||
|
@ -444,12 +444,12 @@ define(function (require) {
|
|||
return function () {
|
||||
|
||||
visEls.each(function () {
|
||||
var visEl = d3.select(this);
|
||||
var $visEl = $(this);
|
||||
var xAxisTitle = $visEl.find('.x-axis-title');
|
||||
var yAxisTitle = $visEl.find('.y-axis-title');
|
||||
var titleWidth = xAxisTitle.width();
|
||||
var titleHeight = yAxisTitle.height();
|
||||
let visEl = d3.select(this);
|
||||
let $visEl = $(this);
|
||||
let xAxisTitle = $visEl.find('.x-axis-title');
|
||||
let yAxisTitle = $visEl.find('.y-axis-title');
|
||||
let titleWidth = xAxisTitle.width();
|
||||
let titleHeight = yAxisTitle.height();
|
||||
|
||||
text = visEl.select('.x-axis-title')
|
||||
.select('svg')
|
||||
|
@ -503,17 +503,17 @@ define(function (require) {
|
|||
* @method updateXaxisHeight
|
||||
*/
|
||||
XAxis.prototype.updateXaxisHeight = function () {
|
||||
var selection = d3.select(this.el).selectAll('.vis-wrapper');
|
||||
let selection = d3.select(this.el).selectAll('.vis-wrapper');
|
||||
|
||||
selection.each(function () {
|
||||
var visEl = d3.select(this);
|
||||
let visEl = d3.select(this);
|
||||
|
||||
if (visEl.select('.inner-spacer-block').node() === null) {
|
||||
visEl.select('.y-axis-spacer-block')
|
||||
.append('div')
|
||||
.attr('class', 'inner-spacer-block');
|
||||
}
|
||||
var xAxisHt = visEl.select('.x-axis-wrapper').style('height');
|
||||
let xAxisHt = visEl.select('.x-axis-wrapper').style('height');
|
||||
|
||||
visEl.select('.inner-spacer-block').style('height', xAxisHt);
|
||||
});
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function YAxisFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var errors = require('ui/errors');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let errors = require('ui/errors');
|
||||
|
||||
var ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
let ErrorHandler = Private(require('ui/vislib/lib/_error_handler'));
|
||||
|
||||
/**
|
||||
* Appends y axis to the visualization
|
||||
|
@ -46,7 +46,7 @@ define(function (require) {
|
|||
};
|
||||
|
||||
YAxis.prototype._validateUserExtents = function (domain) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
return domain.map(function (val) {
|
||||
val = parseInt(val, 10);
|
||||
|
@ -58,8 +58,8 @@ define(function (require) {
|
|||
};
|
||||
|
||||
YAxis.prototype._getExtents = function (domain) {
|
||||
var min = domain[0];
|
||||
var max = domain[1];
|
||||
let min = domain[0];
|
||||
let max = domain[1];
|
||||
|
||||
if (this._isUserDefined()) return this._validateUserExtents(domain);
|
||||
if (this._isYExtents()) return domain;
|
||||
|
@ -113,8 +113,8 @@ define(function (require) {
|
|||
* @returns {D3.Scale.QuantitiveScale|*} D3 yScale function
|
||||
*/
|
||||
YAxis.prototype.getYScale = function (height) {
|
||||
var scale = this._getScaleType(this._attr.scale);
|
||||
var domain = this._getExtents(this.domain);
|
||||
let scale = this._getScaleType(this._attr.scale);
|
||||
let domain = this._getExtents(this.domain);
|
||||
|
||||
this.yScale = scale
|
||||
.domain(domain)
|
||||
|
@ -131,7 +131,7 @@ define(function (require) {
|
|||
};
|
||||
|
||||
YAxis.prototype.tickFormat = function () {
|
||||
var isPercentage = this._attr.mode === 'percentage';
|
||||
let isPercentage = this._attr.mode === 'percentage';
|
||||
if (isPercentage) return d3.format('%');
|
||||
if (this.yAxisFormatter) return this.yAxisFormatter;
|
||||
return d3.format('n');
|
||||
|
@ -149,7 +149,7 @@ define(function (require) {
|
|||
* @returns {D3.Svg.Axis|*} D3 yAxis function
|
||||
*/
|
||||
YAxis.prototype.getYAxis = function (height) {
|
||||
var yScale = this.getYScale(height);
|
||||
let yScale = this.getYScale(height);
|
||||
this._validateYScale(yScale);
|
||||
|
||||
// Create the d3 yAxis function
|
||||
|
@ -173,7 +173,7 @@ define(function (require) {
|
|||
* @returns {number} Number of y axis ticks
|
||||
*/
|
||||
YAxis.prototype.tickScale = function (height) {
|
||||
var yTickScale = d3.scale.linear()
|
||||
let yTickScale = d3.scale.linear()
|
||||
.clamp(true)
|
||||
.domain([20, 40, 1000])
|
||||
.range([0, 3, 11]);
|
||||
|
@ -188,29 +188,29 @@ define(function (require) {
|
|||
* @returns {Function} Renders y axis to visualization
|
||||
*/
|
||||
YAxis.prototype.draw = function () {
|
||||
var self = this;
|
||||
var margin = this._attr.margin;
|
||||
var mode = this._attr.mode;
|
||||
var isWiggleOrSilhouette = (mode === 'wiggle' || mode === 'silhouette');
|
||||
let self = this;
|
||||
let margin = this._attr.margin;
|
||||
let mode = this._attr.mode;
|
||||
let isWiggleOrSilhouette = (mode === 'wiggle' || mode === 'silhouette');
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var el = this;
|
||||
let el = this;
|
||||
|
||||
var div = d3.select(el);
|
||||
var width = $(el).parent().width();
|
||||
var height = $(el).height();
|
||||
var adjustedHeight = height - margin.top - margin.bottom;
|
||||
let div = d3.select(el);
|
||||
let width = $(el).parent().width();
|
||||
let height = $(el).height();
|
||||
let adjustedHeight = height - margin.top - margin.bottom;
|
||||
|
||||
// Validate whether width and height are not 0 or `NaN`
|
||||
self.validateWidthandHeight(width, adjustedHeight);
|
||||
|
||||
var yAxis = self.getYAxis(adjustedHeight);
|
||||
let yAxis = self.getYAxis(adjustedHeight);
|
||||
|
||||
// The yAxis should not appear if mode is set to 'wiggle' or 'silhouette'
|
||||
if (!isWiggleOrSilhouette) {
|
||||
// Append svg and y axis
|
||||
var svg = div.append('svg')
|
||||
let svg = div.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
|
||||
|
@ -219,9 +219,9 @@ define(function (require) {
|
|||
.attr('transform', 'translate(' + (width - 2) + ',' + margin.top + ')')
|
||||
.call(yAxis);
|
||||
|
||||
var container = svg.select('g.y.axis').node();
|
||||
let container = svg.select('g.y.axis').node();
|
||||
if (container) {
|
||||
var cWidth = Math.max(width, container.getBBox().width);
|
||||
let cWidth = Math.max(width, container.getBBox().width);
|
||||
svg.attr('width', cWidth);
|
||||
svg.select('g')
|
||||
.attr('transform', 'translate(' + (cWidth - 2) + ',' + margin.top + ')');
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
define(function (require) {
|
||||
return function VisFactory(Private) {
|
||||
var _ = require('lodash');
|
||||
var d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
|
||||
var Binder = require('ui/Binder');
|
||||
let Binder = require('ui/Binder');
|
||||
|
||||
var ResizeChecker = Private(require('ui/vislib/lib/resize_checker'));
|
||||
var Events = Private(require('ui/events'));
|
||||
var handlerTypes = Private(require('ui/vislib/lib/handler/handler_types'));
|
||||
var chartTypes = Private(require('ui/vislib/visualizations/vis_types'));
|
||||
var errors = require('ui/errors');
|
||||
let ResizeChecker = Private(require('ui/vislib/lib/resize_checker'));
|
||||
let Events = Private(require('ui/events'));
|
||||
let handlerTypes = Private(require('ui/vislib/lib/handler/handler_types'));
|
||||
let chartTypes = Private(require('ui/vislib/visualizations/vis_types'));
|
||||
let errors = require('ui/errors');
|
||||
require('ui/vislib/styles/main.less');
|
||||
|
||||
/**
|
||||
|
@ -46,7 +46,7 @@ define(function (require) {
|
|||
* @param data {Object} Elasticsearch query results
|
||||
*/
|
||||
Vis.prototype.render = function (data, uiState) {
|
||||
var chartType = this._attr.type;
|
||||
let chartType = this._attr.type;
|
||||
|
||||
if (!data) {
|
||||
throw new Error('No valid data!');
|
||||
|
@ -115,7 +115,7 @@ define(function (require) {
|
|||
* @method destroy
|
||||
*/
|
||||
Vis.prototype.destroy = function () {
|
||||
var selection = d3.select(this.el).select('.vis-wrapper');
|
||||
let selection = d3.select(this.el).select('.vis-wrapper');
|
||||
|
||||
this.binder.destroy();
|
||||
this.resizeChecker.destroy();
|
||||
|
@ -157,9 +157,9 @@ define(function (require) {
|
|||
* @returns {*}
|
||||
*/
|
||||
Vis.prototype.on = function (event, listener) {
|
||||
var first = this.listenerCount(event) === 0;
|
||||
var ret = Events.prototype.on.call(this, event, listener);
|
||||
var added = this.listenerCount(event) > 0;
|
||||
let first = this.listenerCount(event) === 0;
|
||||
let ret = Events.prototype.on.call(this, event, listener);
|
||||
let added = this.listenerCount(event) > 0;
|
||||
|
||||
// if this is the first listener added for the event
|
||||
// enable the event in the handler
|
||||
|
@ -176,9 +176,9 @@ define(function (require) {
|
|||
* @returns {*}
|
||||
*/
|
||||
Vis.prototype.off = function (event, listener) {
|
||||
var last = this.listenerCount(event) === 1;
|
||||
var ret = Events.prototype.off.call(this, event, listener);
|
||||
var removed = this.listenerCount(event) === 0;
|
||||
let last = this.listenerCount(event) === 1;
|
||||
let ret = Events.prototype.off.call(this, event, listener);
|
||||
let removed = this.listenerCount(event) === 0;
|
||||
|
||||
// Once all listeners are removed, disable the events in the handler
|
||||
if (last && removed && this.handler) this.handler.disable(event);
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
define(function (require) {
|
||||
return function ChartBaseClass(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var errors = require('ui/errors');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let errors = require('ui/errors');
|
||||
|
||||
var Dispatch = Private(require('ui/vislib/lib/dispatch'));
|
||||
var Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
var dataLabel = require('ui/vislib/lib/_data_label');
|
||||
let Dispatch = Private(require('ui/vislib/lib/dispatch'));
|
||||
let Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
let dataLabel = require('ui/vislib/lib/_data_label');
|
||||
|
||||
/**
|
||||
* The Base Class for all visualizations.
|
||||
|
@ -27,11 +27,11 @@ define(function (require) {
|
|||
this.chartData = chartData;
|
||||
this.tooltips = [];
|
||||
|
||||
var events = this.events = new Dispatch(handler);
|
||||
let events = this.events = new Dispatch(handler);
|
||||
|
||||
if (_.get(this.handler, '_attr.addTooltip')) {
|
||||
var $el = this.handler.el;
|
||||
var formatter = this.handler.data.get('tooltipFormatter');
|
||||
let $el = this.handler.el;
|
||||
let formatter = this.handler.data.get('tooltipFormatter');
|
||||
|
||||
// Add tooltip
|
||||
this.tooltip = new Tooltip('chart', $el, formatter, events);
|
||||
|
@ -49,7 +49,7 @@ define(function (require) {
|
|||
* @returns {HTMLElement} Contains the D3 chart
|
||||
*/
|
||||
Chart.prototype.render = function () {
|
||||
var selection = d3.select(this.chartEl);
|
||||
let selection = d3.select(this.chartEl);
|
||||
|
||||
selection.selectAll('*').remove();
|
||||
selection.call(this.draw());
|
||||
|
@ -63,7 +63,7 @@ define(function (require) {
|
|||
*/
|
||||
Chart.prototype._addIdentifier = function (selection, labelProp) {
|
||||
labelProp = labelProp || 'label';
|
||||
var labels = this.handler.data.labels;
|
||||
let labels = this.handler.data.labels;
|
||||
|
||||
function resolveLabel(datum) {
|
||||
if (labels.length === 1) return labels[0];
|
||||
|
@ -72,7 +72,7 @@ define(function (require) {
|
|||
}
|
||||
|
||||
selection.each(function (datum) {
|
||||
var label = resolveLabel(datum);
|
||||
let label = resolveLabel(datum);
|
||||
if (label != null) dataLabel(this, label);
|
||||
});
|
||||
};
|
||||
|
@ -83,7 +83,7 @@ define(function (require) {
|
|||
* @method destroy
|
||||
*/
|
||||
Chart.prototype.destroy = function () {
|
||||
var selection = d3.select(this.chartEl);
|
||||
let selection = d3.select(this.chartEl);
|
||||
this.events.removeAllListeners();
|
||||
this.tooltips.forEach(function (tooltip) {
|
||||
tooltip.destroy();
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
define(function (require) {
|
||||
return function MapFactory(Private) {
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var L = require('leaflet');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let L = require('leaflet');
|
||||
|
||||
var defaultMapZoom = 2;
|
||||
var defaultMapCenter = [15, 5];
|
||||
var defaultMarkerType = 'Scaled Circle Markers';
|
||||
let defaultMapZoom = 2;
|
||||
let defaultMapCenter = [15, 5];
|
||||
let defaultMarkerType = 'Scaled Circle Markers';
|
||||
|
||||
var mapTiles = {
|
||||
let mapTiles = {
|
||||
url: 'https://otile{s}-s.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
|
||||
options: {
|
||||
attribution: 'Tiles by <a href="http://www.mapquest.com/">MapQuest</a> — ' +
|
||||
|
@ -18,7 +18,7 @@ define(function (require) {
|
|||
}
|
||||
};
|
||||
|
||||
var markerTypes = {
|
||||
let markerTypes = {
|
||||
'Scaled Circle Markers': Private(require('ui/vislib/visualizations/marker_types/scaled_circles')),
|
||||
'Shaded Circle Markers': Private(require('ui/vislib/visualizations/marker_types/shaded_circles')),
|
||||
'Shaded Geohash Grid': Private(require('ui/vislib/visualizations/marker_types/geohash_grid')),
|
||||
|
@ -46,7 +46,7 @@ define(function (require) {
|
|||
this._geoJson = _.get(this._chartData, 'geoJson');
|
||||
this._attr = params.attr || {};
|
||||
|
||||
var mapOptions = {
|
||||
let mapOptions = {
|
||||
minZoom: 1,
|
||||
maxZoom: 18,
|
||||
noWrap: true,
|
||||
|
@ -61,8 +61,8 @@ define(function (require) {
|
|||
TileMapMap.prototype.addBoundingControl = function () {
|
||||
if (this._boundingControl) return;
|
||||
|
||||
var self = this;
|
||||
var drawOptions = { draw: {} };
|
||||
let self = this;
|
||||
let drawOptions = { draw: {} };
|
||||
|
||||
_.each(['polyline', 'polygon', 'circle', 'marker', 'rectangle'], function (drawShape) {
|
||||
if (self._events && !self._events.listenerCount(drawShape)) {
|
||||
|
@ -84,11 +84,11 @@ define(function (require) {
|
|||
TileMapMap.prototype.addFitControl = function () {
|
||||
if (this._fitControl) return;
|
||||
|
||||
var self = this;
|
||||
var fitContainer = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-control-fit');
|
||||
let self = this;
|
||||
let fitContainer = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-control-fit');
|
||||
|
||||
// Add button to fit container to points
|
||||
var FitControl = L.Control.extend({
|
||||
let FitControl = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft'
|
||||
},
|
||||
|
@ -120,7 +120,7 @@ define(function (require) {
|
|||
TileMapMap.prototype.addTitle = function (mapLabel) {
|
||||
if (this._label) return;
|
||||
|
||||
var label = this._label = L.control();
|
||||
let label = this._label = L.control();
|
||||
|
||||
label.onAdd = function () {
|
||||
this._div = L.DomUtil.create('div', 'tilemap-info tilemap-label');
|
||||
|
@ -191,13 +191,13 @@ define(function (require) {
|
|||
* @return {Object} marker layer
|
||||
*/
|
||||
TileMapMap.prototype._createMarkers = function (options) {
|
||||
var MarkerType = markerTypes[this._markerType];
|
||||
let MarkerType = markerTypes[this._markerType];
|
||||
return new MarkerType(this.map, this._geoJson, options);
|
||||
};
|
||||
|
||||
TileMapMap.prototype._attachEvents = function () {
|
||||
var self = this;
|
||||
var saturateTiles = self.saturateTiles.bind(self);
|
||||
let self = this;
|
||||
let saturateTiles = self.saturateTiles.bind(self);
|
||||
|
||||
this._tileLayer.on('tileload', saturateTiles);
|
||||
|
||||
|
@ -223,11 +223,11 @@ define(function (require) {
|
|||
});
|
||||
|
||||
this.map.on('draw:created', function (e) {
|
||||
var drawType = e.layerType;
|
||||
let drawType = e.layerType;
|
||||
if (!self._events || !self._events.listenerCount(drawType)) return;
|
||||
|
||||
// TODO: Different drawTypes need differ info. Need a switch on the object creation
|
||||
var bounds = e.layer.getBounds();
|
||||
let bounds = e.layer.getBounds();
|
||||
|
||||
self._events.emit(drawType, {
|
||||
e: e,
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function PointSeriesChartProvider(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
|
||||
var Chart = Private(require('ui/vislib/visualizations/_chart'));
|
||||
var Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
var touchdownTmpl = _.template(require('ui/vislib/partials/touchdown.tmpl.html'));
|
||||
let Chart = Private(require('ui/vislib/visualizations/_chart'));
|
||||
let Tooltip = Private(require('ui/vislib/components/Tooltip'));
|
||||
let touchdownTmpl = _.template(require('ui/vislib/partials/touchdown.tmpl.html'));
|
||||
|
||||
_.class(PointSeriesChart).inherits(Chart);
|
||||
function PointSeriesChart(handler, chartEl, chartData) {
|
||||
|
@ -17,12 +17,12 @@ define(function (require) {
|
|||
}
|
||||
|
||||
PointSeriesChart.prototype._stackMixedValues = function (stackCount) {
|
||||
var currentStackOffsets = [0, 0];
|
||||
var currentStackIndex = 0;
|
||||
let currentStackOffsets = [0, 0];
|
||||
let currentStackIndex = 0;
|
||||
|
||||
return function (d, y0, y) {
|
||||
var firstStack = currentStackIndex % stackCount === 0;
|
||||
var lastStack = ++currentStackIndex === stackCount;
|
||||
let firstStack = currentStackIndex % stackCount === 0;
|
||||
let lastStack = ++currentStackIndex === stackCount;
|
||||
|
||||
if (firstStack) {
|
||||
currentStackOffsets = [0, 0];
|
||||
|
@ -48,14 +48,14 @@ define(function (require) {
|
|||
* @returns {Array} Stacked data objects with x, y, and y0 values
|
||||
*/
|
||||
PointSeriesChart.prototype.stackData = function (data) {
|
||||
var self = this;
|
||||
var isHistogram = (this._attr.type === 'histogram' && this._attr.mode === 'stacked');
|
||||
var stack = this._attr.stack;
|
||||
let self = this;
|
||||
let isHistogram = (this._attr.type === 'histogram' && this._attr.mode === 'stacked');
|
||||
let stack = this._attr.stack;
|
||||
|
||||
if (isHistogram) stack.out(self._stackMixedValues(data.series.length));
|
||||
|
||||
return stack(data.series.map(function (d) {
|
||||
var label = d.label;
|
||||
let label = d.label;
|
||||
return d.values.map(function (e, i) {
|
||||
return {
|
||||
_input: e,
|
||||
|
@ -84,37 +84,37 @@ define(function (require) {
|
|||
* @returns {D3.Selection}
|
||||
*/
|
||||
PointSeriesChart.prototype.createEndZones = function (svg) {
|
||||
var self = this;
|
||||
var xAxis = this.handler.xAxis;
|
||||
var xScale = xAxis.xScale;
|
||||
var ordered = xAxis.ordered;
|
||||
var missingMinMax = !ordered || _.isUndefined(ordered.min) || _.isUndefined(ordered.max);
|
||||
let self = this;
|
||||
let xAxis = this.handler.xAxis;
|
||||
let xScale = xAxis.xScale;
|
||||
let ordered = xAxis.ordered;
|
||||
let missingMinMax = !ordered || _.isUndefined(ordered.min) || _.isUndefined(ordered.max);
|
||||
|
||||
if (missingMinMax || ordered.endzones === false) return;
|
||||
|
||||
var attr = this.handler._attr;
|
||||
var height = attr.height;
|
||||
var width = attr.width;
|
||||
var margin = attr.margin;
|
||||
var color = '#004c99';
|
||||
let attr = this.handler._attr;
|
||||
let height = attr.height;
|
||||
let width = attr.width;
|
||||
let margin = attr.margin;
|
||||
let color = '#004c99';
|
||||
|
||||
// we don't want to draw endzones over our min and max values, they
|
||||
// are still a part of the dataset. We want to start the endzones just
|
||||
// outside of them so we will use these values rather than ordered.min/max
|
||||
var oneUnit = (ordered.units || _.identity)(1);
|
||||
var beyondMin = ordered.min - oneUnit;
|
||||
var beyondMax = ordered.max + oneUnit;
|
||||
let oneUnit = (ordered.units || _.identity)(1);
|
||||
let beyondMin = ordered.min - oneUnit;
|
||||
let beyondMax = ordered.max + oneUnit;
|
||||
|
||||
// points on this axis represent the amount of time they cover,
|
||||
// so draw the endzones at the actual time bounds
|
||||
var leftEndzone = {
|
||||
let leftEndzone = {
|
||||
x: 0,
|
||||
w: Math.max(xScale(ordered.min), 0)
|
||||
};
|
||||
|
||||
var rightLastVal = xAxis.expandLastBucket ? ordered.max : Math.min(ordered.max, _.last(xAxis.xValues));
|
||||
var rightStart = rightLastVal + oneUnit;
|
||||
var rightEndzone = {
|
||||
let rightLastVal = xAxis.expandLastBucket ? ordered.max : Math.min(ordered.max, _.last(xAxis.xValues));
|
||||
let rightStart = rightLastVal + oneUnit;
|
||||
let rightEndzone = {
|
||||
x: xScale(rightStart),
|
||||
w: Math.max(width - xScale(rightStart), 0)
|
||||
};
|
||||
|
@ -136,17 +136,17 @@ define(function (require) {
|
|||
});
|
||||
|
||||
function callPlay(event) {
|
||||
var boundData = event.target.__data__;
|
||||
var mouseChartXCoord = event.clientX - self.chartEl.getBoundingClientRect().left;
|
||||
var wholeBucket = boundData && boundData.x != null;
|
||||
let boundData = event.target.__data__;
|
||||
let mouseChartXCoord = event.clientX - self.chartEl.getBoundingClientRect().left;
|
||||
let wholeBucket = boundData && boundData.x != null;
|
||||
|
||||
// the min and max that the endzones start in
|
||||
var min = leftEndzone.w;
|
||||
var max = rightEndzone.x;
|
||||
let min = leftEndzone.w;
|
||||
let max = rightEndzone.x;
|
||||
|
||||
// bounds of the cursor to consider
|
||||
var xLeft = mouseChartXCoord;
|
||||
var xRight = mouseChartXCoord;
|
||||
let xLeft = mouseChartXCoord;
|
||||
let xRight = mouseChartXCoord;
|
||||
if (wholeBucket) {
|
||||
xLeft = xScale(boundData.x);
|
||||
xRight = xScale(xAxis.addInterval(boundData.x));
|
||||
|
@ -163,7 +163,7 @@ define(function (require) {
|
|||
return touchdownTmpl(callPlay(d3.event));
|
||||
}
|
||||
|
||||
var endzoneTT = new Tooltip('endzones', this.handler.el, textFormatter, null);
|
||||
let endzoneTT = new Tooltip('endzones', this.handler.el, textFormatter, null);
|
||||
this.tooltips.push(endzoneTT);
|
||||
endzoneTT.order = 0;
|
||||
endzoneTT.showCondition = function inEndzone() {
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
define(function (require) {
|
||||
return function AreaChartFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
|
||||
var PointSeriesChart = Private(require('ui/vislib/visualizations/_point_series_chart'));
|
||||
var TimeMarker = Private(require('ui/vislib/visualizations/time_marker'));
|
||||
var errors = require('ui/errors');
|
||||
let PointSeriesChart = Private(require('ui/vislib/visualizations/_point_series_chart'));
|
||||
let TimeMarker = Private(require('ui/vislib/visualizations/time_marker'));
|
||||
let errors = require('ui/errors');
|
||||
|
||||
/**
|
||||
* Area chart visualization
|
||||
|
@ -32,14 +32,14 @@ define(function (require) {
|
|||
if (this.isOverlapping) {
|
||||
|
||||
// Default opacity should return to 0.6 on mouseout
|
||||
var defaultOpacity = 0.6;
|
||||
let defaultOpacity = 0.6;
|
||||
handler._attr.defaultOpacity = defaultOpacity;
|
||||
handler.highlight = function (element) {
|
||||
var label = this.getAttribute('data-label');
|
||||
let label = this.getAttribute('data-label');
|
||||
if (!label) return;
|
||||
|
||||
var highlightOpacity = 0.8;
|
||||
var highlightElements = $('[data-label]', element.parentNode).filter(
|
||||
let highlightOpacity = 0.8;
|
||||
let highlightElements = $('[data-label]', element.parentNode).filter(
|
||||
function (els, el) {
|
||||
return `${$(el).data('label')}` === label;
|
||||
});
|
||||
|
@ -71,15 +71,15 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection} SVG with path added
|
||||
*/
|
||||
AreaChart.prototype.addPath = function (svg, layers) {
|
||||
var self = this;
|
||||
var ordered = this.handler.data.get('ordered');
|
||||
var isTimeSeries = (ordered && ordered.date);
|
||||
var isOverlapping = this.isOverlapping;
|
||||
var color = this.handler.data.getColorFunc();
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var interpolate = (this._attr.smoothLines) ? 'cardinal' : this._attr.interpolate;
|
||||
var area = d3.svg.area()
|
||||
let self = this;
|
||||
let ordered = this.handler.data.get('ordered');
|
||||
let isTimeSeries = (ordered && ordered.date);
|
||||
let isOverlapping = this.isOverlapping;
|
||||
let color = this.handler.data.getColorFunc();
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let interpolate = (this._attr.smoothLines) ? 'cardinal' : this._attr.interpolate;
|
||||
let area = d3.svg.area()
|
||||
.x(function (d) {
|
||||
if (isTimeSeries) {
|
||||
return xScale(d.x);
|
||||
|
@ -104,7 +104,7 @@ define(function (require) {
|
|||
.interpolate(interpolate);
|
||||
|
||||
// Data layers
|
||||
var layer = svg.selectAll('.layer')
|
||||
let layer = svg.selectAll('.layer')
|
||||
.data(layers)
|
||||
.enter()
|
||||
.append('g')
|
||||
|
@ -113,7 +113,7 @@ define(function (require) {
|
|||
});
|
||||
|
||||
// Append path
|
||||
var path = layer.append('path')
|
||||
let path = layer.append('path')
|
||||
.call(this._addIdentifier)
|
||||
.style('fill', function (d) {
|
||||
return color(d[0].label);
|
||||
|
@ -138,13 +138,13 @@ define(function (require) {
|
|||
* @returns {D3.Selection} circles with event listeners attached
|
||||
*/
|
||||
AreaChart.prototype.addCircleEvents = function (element, svg) {
|
||||
var events = this.events;
|
||||
var isBrushable = events.isBrushable();
|
||||
var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
|
||||
var hover = events.addHoverEvent();
|
||||
var mouseout = events.addMouseoutEvent();
|
||||
var click = events.addClickEvent();
|
||||
var attachedEvents = element.call(hover).call(mouseout).call(click);
|
||||
let events = this.events;
|
||||
let isBrushable = events.isBrushable();
|
||||
let brush = isBrushable ? events.addBrushEvent(svg) : undefined;
|
||||
let hover = events.addHoverEvent();
|
||||
let mouseout = events.addMouseoutEvent();
|
||||
let click = events.addClickEvent();
|
||||
let attachedEvents = element.call(hover).call(mouseout).call(click);
|
||||
|
||||
if (isBrushable) {
|
||||
attachedEvents.call(brush);
|
||||
|
@ -162,16 +162,16 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection} SVG with circles added
|
||||
*/
|
||||
AreaChart.prototype.addCircles = function (svg, data) {
|
||||
var self = this;
|
||||
var color = this.handler.data.getColorFunc();
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var ordered = this.handler.data.get('ordered');
|
||||
var circleRadius = 12;
|
||||
var circleStrokeWidth = 0;
|
||||
var tooltip = this.tooltip;
|
||||
var isTooltip = this._attr.addTooltip;
|
||||
var isOverlapping = this.isOverlapping;
|
||||
let self = this;
|
||||
let color = this.handler.data.getColorFunc();
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let ordered = this.handler.data.get('ordered');
|
||||
let circleRadius = 12;
|
||||
let circleStrokeWidth = 0;
|
||||
let tooltip = this.tooltip;
|
||||
let isTooltip = this._attr.addTooltip;
|
||||
let isOverlapping = this.isOverlapping;
|
||||
let layer;
|
||||
let circles;
|
||||
|
||||
|
@ -239,9 +239,9 @@ define(function (require) {
|
|||
*/
|
||||
AreaChart.prototype.addClipPath = function (svg, width, height) {
|
||||
// Prevents circles from being clipped at the top of the chart
|
||||
var startX = 0;
|
||||
var startY = 0;
|
||||
var id = 'chart-area' + _.uniqueId();
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let id = 'chart-area' + _.uniqueId();
|
||||
|
||||
// Creating clipPath
|
||||
return svg
|
||||
|
@ -256,11 +256,11 @@ define(function (require) {
|
|||
};
|
||||
|
||||
AreaChart.prototype.checkIfEnoughData = function () {
|
||||
var series = this.chartData.series;
|
||||
var message = 'Area charts require more than one data point. Try adding ' +
|
||||
let series = this.chartData.series;
|
||||
let message = 'Area charts require more than one data point. Try adding ' +
|
||||
'an X-Axis Aggregation';
|
||||
|
||||
var notEnoughData = series.some(function (obj) {
|
||||
let notEnoughData = series.some(function (obj) {
|
||||
return obj.values.length < 2;
|
||||
});
|
||||
|
||||
|
@ -270,8 +270,8 @@ define(function (require) {
|
|||
};
|
||||
|
||||
AreaChart.prototype.validateWiggleSelection = function () {
|
||||
var isWiggle = this._attr.mode === 'wiggle';
|
||||
var ordered = this.handler.data.get('ordered');
|
||||
let isWiggle = this._attr.mode === 'wiggle';
|
||||
let ordered = this.handler.data.get('ordered');
|
||||
|
||||
if (isWiggle && !ordered) throw new errors.InvalidWiggleSelection();
|
||||
};
|
||||
|
@ -284,18 +284,18 @@ define(function (require) {
|
|||
*/
|
||||
AreaChart.prototype.draw = function () {
|
||||
// Attributes
|
||||
var self = this;
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var $elem = $(this.chartEl);
|
||||
var margin = this._attr.margin;
|
||||
var elWidth = this._attr.width = $elem.width();
|
||||
var elHeight = this._attr.height = $elem.height();
|
||||
var yMin = this.handler.yAxis.yMin;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var minWidth = 20;
|
||||
var minHeight = 20;
|
||||
var addTimeMarker = this._attr.addTimeMarker;
|
||||
var times = this._attr.times || [];
|
||||
let self = this;
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let $elem = $(this.chartEl);
|
||||
let margin = this._attr.margin;
|
||||
let elWidth = this._attr.width = $elem.width();
|
||||
let elHeight = this._attr.height = $elem.height();
|
||||
let yMin = this.handler.yAxis.yMin;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let minWidth = 20;
|
||||
let minHeight = 20;
|
||||
let addTimeMarker = this._attr.addTimeMarker;
|
||||
let times = this._attr.times || [];
|
||||
let timeMarker;
|
||||
let div;
|
||||
let svg;
|
||||
|
@ -360,7 +360,7 @@ define(function (require) {
|
|||
self.addCircleEvents(circles, svg);
|
||||
|
||||
// chart base line
|
||||
var line = svg.append('line')
|
||||
let line = svg.append('line')
|
||||
.attr('class', 'base-line')
|
||||
.attr('x1', 0)
|
||||
.attr('y1', yScale(0))
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
define(function (require) {
|
||||
return function ColumnChartFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var moment = require('moment');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let moment = require('moment');
|
||||
|
||||
var DataClass = Private(require('ui/vislib/lib/data'));
|
||||
let DataClass = Private(require('ui/vislib/lib/data'));
|
||||
|
||||
var PointSeriesChart = Private(require('ui/vislib/visualizations/_point_series_chart'));
|
||||
var TimeMarker = Private(require('ui/vislib/visualizations/time_marker'));
|
||||
var errors = require('ui/errors');
|
||||
let PointSeriesChart = Private(require('ui/vislib/visualizations/_point_series_chart'));
|
||||
let TimeMarker = Private(require('ui/vislib/visualizations/time_marker'));
|
||||
let errors = require('ui/errors');
|
||||
|
||||
/**
|
||||
* Vertical Bar Chart Visualization: renders vertical and/or stacked bars
|
||||
|
@ -45,10 +45,10 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection} SVG with rect added
|
||||
*/
|
||||
ColumnChart.prototype.addBars = function (svg, layers) {
|
||||
var self = this;
|
||||
var color = this.handler.data.getColorFunc();
|
||||
var tooltip = this.tooltip;
|
||||
var isTooltip = this._attr.addTooltip;
|
||||
let self = this;
|
||||
let color = this.handler.data.getColorFunc();
|
||||
let tooltip = this.tooltip;
|
||||
let isTooltip = this._attr.addTooltip;
|
||||
let layer;
|
||||
let bars;
|
||||
|
||||
|
@ -95,7 +95,7 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection}
|
||||
*/
|
||||
ColumnChart.prototype.updateBars = function (bars) {
|
||||
var offset = this._attr.mode;
|
||||
let offset = this._attr.mode;
|
||||
|
||||
if (offset === 'grouped') {
|
||||
return this.addGroupedBars(bars);
|
||||
|
@ -111,17 +111,17 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection}
|
||||
*/
|
||||
ColumnChart.prototype.addStackedBars = function (bars) {
|
||||
var data = this.chartData;
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var height = yScale.range()[0];
|
||||
var yMin = this.handler.yAxis.yScale.domain()[0];
|
||||
var self = this;
|
||||
let data = this.chartData;
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let height = yScale.range()[0];
|
||||
let yMin = this.handler.yAxis.yScale.domain()[0];
|
||||
let self = this;
|
||||
|
||||
let barWidth;
|
||||
if (data.ordered && data.ordered.date) {
|
||||
var start = data.ordered.min;
|
||||
var end = moment(data.ordered.min).add(data.ordered.interval).valueOf();
|
||||
let start = data.ordered.min;
|
||||
let end = moment(data.ordered.min).add(data.ordered.interval).valueOf();
|
||||
|
||||
barWidth = xScale(end) - xScale(start);
|
||||
barWidth = barWidth - Math.min(barWidth * 0.25, 15);
|
||||
|
@ -174,24 +174,24 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection}
|
||||
*/
|
||||
ColumnChart.prototype.addGroupedBars = function (bars) {
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var yMin = this.handler.yAxis.yMin;
|
||||
var data = this.chartData;
|
||||
var n = data.series.length;
|
||||
var height = yScale.range()[0];
|
||||
var groupSpacingPercentage = 0.15;
|
||||
var isTimeScale = (data.ordered && data.ordered.date);
|
||||
var minWidth = 1;
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let yMin = this.handler.yAxis.yMin;
|
||||
let data = this.chartData;
|
||||
let n = data.series.length;
|
||||
let height = yScale.range()[0];
|
||||
let groupSpacingPercentage = 0.15;
|
||||
let isTimeScale = (data.ordered && data.ordered.date);
|
||||
let minWidth = 1;
|
||||
let barWidth;
|
||||
|
||||
// update
|
||||
bars
|
||||
.attr('x', function (d, i, j) {
|
||||
if (isTimeScale) {
|
||||
var groupWidth = xScale(data.ordered.min + data.ordered.interval) -
|
||||
let groupWidth = xScale(data.ordered.min + data.ordered.interval) -
|
||||
xScale(data.ordered.min);
|
||||
var groupSpacing = groupWidth * groupSpacingPercentage;
|
||||
let groupSpacing = groupWidth * groupSpacingPercentage;
|
||||
|
||||
barWidth = (groupWidth - groupSpacing) / n;
|
||||
|
||||
|
@ -234,13 +234,13 @@ define(function (require) {
|
|||
* @returns {D3.Selection} rect with event listeners attached
|
||||
*/
|
||||
ColumnChart.prototype.addBarEvents = function (element, svg) {
|
||||
var events = this.events;
|
||||
var isBrushable = events.isBrushable();
|
||||
var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
|
||||
var hover = events.addHoverEvent();
|
||||
var mouseout = events.addMouseoutEvent();
|
||||
var click = events.addClickEvent();
|
||||
var attachedEvents = element.call(hover).call(mouseout).call(click);
|
||||
let events = this.events;
|
||||
let isBrushable = events.isBrushable();
|
||||
let brush = isBrushable ? events.addBrushEvent(svg) : undefined;
|
||||
let hover = events.addHoverEvent();
|
||||
let mouseout = events.addMouseoutEvent();
|
||||
let click = events.addClickEvent();
|
||||
let attachedEvents = element.call(hover).call(mouseout).call(click);
|
||||
|
||||
if (isBrushable) {
|
||||
attachedEvents.call(brush);
|
||||
|
@ -256,18 +256,18 @@ define(function (require) {
|
|||
* @returns {Function} Creates the vertical bar chart
|
||||
*/
|
||||
ColumnChart.prototype.draw = function () {
|
||||
var self = this;
|
||||
var $elem = $(this.chartEl);
|
||||
var margin = this._attr.margin;
|
||||
var elWidth = this._attr.width = $elem.width();
|
||||
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 || [];
|
||||
let self = this;
|
||||
let $elem = $(this.chartEl);
|
||||
let margin = this._attr.margin;
|
||||
let elWidth = this._attr.width = $elem.width();
|
||||
let elHeight = this._attr.height = $elem.height();
|
||||
let yMin = this.handler.yAxis.yMin;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let minWidth = 20;
|
||||
let minHeight = 20;
|
||||
let addTimeMarker = this._attr.addTimeMarker;
|
||||
let times = this._attr.times || [];
|
||||
let timeMarker;
|
||||
let div;
|
||||
let svg;
|
||||
|
@ -305,7 +305,7 @@ define(function (require) {
|
|||
// Adds event listeners
|
||||
self.addBarEvents(bars, svg);
|
||||
|
||||
var line = svg.append('line')
|
||||
let line = svg.append('line')
|
||||
.attr('class', 'base-line')
|
||||
.attr('x1', 0)
|
||||
.attr('y1', yScale(0))
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
define(function (require) {
|
||||
return function LineChartFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var errors = require('ui/errors');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let errors = require('ui/errors');
|
||||
|
||||
var PointSeriesChart = Private(require('ui/vislib/visualizations/_point_series_chart'));
|
||||
var TimeMarker = Private(require('ui/vislib/visualizations/time_marker'));
|
||||
let PointSeriesChart = Private(require('ui/vislib/visualizations/_point_series_chart'));
|
||||
let TimeMarker = Private(require('ui/vislib/visualizations/time_marker'));
|
||||
|
||||
/**
|
||||
* Line Chart Visualization
|
||||
|
@ -42,13 +42,13 @@ define(function (require) {
|
|||
* @returns {D3.Selection} SVG circles with event listeners attached
|
||||
*/
|
||||
LineChart.prototype.addCircleEvents = function (element, svg) {
|
||||
var events = this.events;
|
||||
var isBrushable = events.isBrushable();
|
||||
var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
|
||||
var hover = events.addHoverEvent();
|
||||
var mouseout = events.addMouseoutEvent();
|
||||
var click = events.addClickEvent();
|
||||
var attachedEvents = element.call(hover).call(mouseout).call(click);
|
||||
let events = this.events;
|
||||
let isBrushable = events.isBrushable();
|
||||
let brush = isBrushable ? events.addBrushEvent(svg) : undefined;
|
||||
let hover = events.addHoverEvent();
|
||||
let mouseout = events.addMouseoutEvent();
|
||||
let click = events.addClickEvent();
|
||||
let attachedEvents = element.call(hover).call(mouseout).call(click);
|
||||
|
||||
if (isBrushable) {
|
||||
attachedEvents.call(brush);
|
||||
|
@ -66,16 +66,16 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection} SVG with circles added
|
||||
*/
|
||||
LineChart.prototype.addCircles = function (svg, data) {
|
||||
var self = this;
|
||||
var showCircles = this._attr.showCircles;
|
||||
var color = this.handler.data.getColorFunc();
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var ordered = this.handler.data.get('ordered');
|
||||
var tooltip = this.tooltip;
|
||||
var isTooltip = this._attr.addTooltip;
|
||||
let self = this;
|
||||
let showCircles = this._attr.showCircles;
|
||||
let color = this.handler.data.getColorFunc();
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let ordered = this.handler.data.get('ordered');
|
||||
let tooltip = this.tooltip;
|
||||
let isTooltip = this._attr.addTooltip;
|
||||
|
||||
var radii = _(data)
|
||||
let radii = _(data)
|
||||
.map(function (series) {
|
||||
return _.pluck(series, '_input.z');
|
||||
})
|
||||
|
@ -89,15 +89,15 @@ define(function (require) {
|
|||
max: -Infinity
|
||||
});
|
||||
|
||||
var radiusStep = ((radii.max - radii.min) || (radii.max * 100)) / Math.pow(this._attr.radiusRatio, 2);
|
||||
let radiusStep = ((radii.max - radii.min) || (radii.max * 100)) / Math.pow(this._attr.radiusRatio, 2);
|
||||
|
||||
var layer = svg.selectAll('.points')
|
||||
let layer = svg.selectAll('.points')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'points line');
|
||||
|
||||
var circles = layer
|
||||
let circles = layer
|
||||
.selectAll('circle')
|
||||
.data(function appendData(data) {
|
||||
return data.filter(function (d) {
|
||||
|
@ -125,9 +125,9 @@ define(function (require) {
|
|||
}
|
||||
|
||||
function colorCircle(d) {
|
||||
var parent = d3.select(this).node().parentNode;
|
||||
var lengthOfParent = d3.select(parent).data()[0].length;
|
||||
var isVisible = (lengthOfParent === 1);
|
||||
let parent = d3.select(this).node().parentNode;
|
||||
let lengthOfParent = d3.select(parent).data()[0].length;
|
||||
let isVisible = (lengthOfParent === 1);
|
||||
|
||||
// If only 1 point exists, show circle
|
||||
if (!showCircles && !isVisible) return 'none';
|
||||
|
@ -135,10 +135,10 @@ define(function (require) {
|
|||
}
|
||||
function getCircleRadiusFn(modifier) {
|
||||
return function getCircleRadius(d) {
|
||||
var margin = self._attr.margin;
|
||||
var width = self._attr.width - margin.left - margin.right;
|
||||
var height = self._attr.height - margin.top - margin.bottom;
|
||||
var circleRadius = (d._input.z - radii.min) / radiusStep;
|
||||
let margin = self._attr.margin;
|
||||
let width = self._attr.width - margin.left - margin.right;
|
||||
let height = self._attr.height - margin.top - margin.bottom;
|
||||
let circleRadius = (d._input.z - radii.min) / radiusStep;
|
||||
|
||||
return _.min([Math.sqrt((circleRadius || 2) + 2), width, height]) + (modifier || 0);
|
||||
};
|
||||
|
@ -184,14 +184,14 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection} SVG with paths added
|
||||
*/
|
||||
LineChart.prototype.addLines = function (svg, data) {
|
||||
var self = this;
|
||||
var xScale = this.handler.xAxis.xScale;
|
||||
var yScale = this.handler.yAxis.yScale;
|
||||
var xAxisFormatter = this.handler.data.get('xAxisFormatter');
|
||||
var color = this.handler.data.getColorFunc();
|
||||
var ordered = this.handler.data.get('ordered');
|
||||
var interpolate = (this._attr.smoothLines) ? 'cardinal' : this._attr.interpolate;
|
||||
var line = d3.svg.line()
|
||||
let self = this;
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let xAxisFormatter = this.handler.data.get('xAxisFormatter');
|
||||
let color = this.handler.data.getColorFunc();
|
||||
let ordered = this.handler.data.get('ordered');
|
||||
let interpolate = (this._attr.smoothLines) ? 'cardinal' : this._attr.interpolate;
|
||||
let line = d3.svg.line()
|
||||
.defined(function (d) { return !_.isNull(d.y); })
|
||||
.interpolate(interpolate)
|
||||
.x(function x(d) {
|
||||
|
@ -236,10 +236,10 @@ define(function (require) {
|
|||
* @returns {D3.UpdateSelection} SVG with clipPath added
|
||||
*/
|
||||
LineChart.prototype.addClipPath = function (svg, width, height) {
|
||||
var clipPathBuffer = 5;
|
||||
var startX = 0;
|
||||
var startY = 0 - clipPathBuffer;
|
||||
var id = 'chart-area' + _.uniqueId();
|
||||
let clipPathBuffer = 5;
|
||||
let startX = 0;
|
||||
let startY = 0 - clipPathBuffer;
|
||||
let id = 'chart-area' + _.uniqueId();
|
||||
|
||||
return svg
|
||||
.attr('clip-path', 'url(#' + id + ')')
|
||||
|
@ -261,21 +261,21 @@ define(function (require) {
|
|||
* @returns {Function} Creates the line chart
|
||||
*/
|
||||
LineChart.prototype.draw = function () {
|
||||
var self = this;
|
||||
var $elem = $(this.chartEl);
|
||||
var margin = this._attr.margin;
|
||||
var elWidth = this._attr.width = $elem.width();
|
||||
var elHeight = this._attr.height = $elem.height();
|
||||
var scaleType = this.handler.yAxis.getScaleType();
|
||||
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 || [];
|
||||
let self = this;
|
||||
let $elem = $(this.chartEl);
|
||||
let margin = this._attr.margin;
|
||||
let elWidth = this._attr.width = $elem.width();
|
||||
let elHeight = this._attr.height = $elem.height();
|
||||
let scaleType = this.handler.yAxis.getScaleType();
|
||||
let yMin = this.handler.yAxis.yMin;
|
||||
let yScale = this.handler.yAxis.yScale;
|
||||
let xScale = this.handler.xAxis.xScale;
|
||||
let minWidth = 20;
|
||||
let minHeight = 20;
|
||||
let startLineX = 0;
|
||||
let lineStrokeWidth = 1;
|
||||
let addTimeMarker = this._attr.addTimeMarker;
|
||||
let times = this._attr.times || [];
|
||||
let timeMarker;
|
||||
let div;
|
||||
let svg;
|
||||
|
@ -286,10 +286,10 @@ define(function (require) {
|
|||
|
||||
return function (selection) {
|
||||
selection.each(function (data) {
|
||||
var el = this;
|
||||
let el = this;
|
||||
|
||||
var layers = data.series.map(function mapSeries(d) {
|
||||
var label = d.label;
|
||||
let layers = data.series.map(function mapSeries(d) {
|
||||
let label = d.label;
|
||||
return d.values.map(function mapValues(e, i) {
|
||||
return {
|
||||
_input: e,
|
||||
|
@ -331,7 +331,7 @@ define(function (require) {
|
|||
self.addCircleEvents(circles, svg);
|
||||
self.createEndZones(svg);
|
||||
|
||||
var scale = (scaleType === 'log') ? yScale(1) : yScale(0);
|
||||
let scale = (scaleType === 'log') ? yScale(1) : yScale(0);
|
||||
if (scale) {
|
||||
svg.append('line')
|
||||
.attr('class', 'base-line')
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function MarkerFactory() {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
var L = require('leaflet');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
let L = require('leaflet');
|
||||
|
||||
/**
|
||||
* Base map marker overlay, all other markers inherit from this class
|
||||
|
@ -36,7 +36,7 @@ define(function (require) {
|
|||
// ensure we only ever create 1 legend
|
||||
if (this._legend) return;
|
||||
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
// create the legend control, keep a reference
|
||||
self._legend = L.control({position: 'bottomright'});
|
||||
|
@ -44,17 +44,17 @@ define(function (require) {
|
|||
self._legend.onAdd = function () {
|
||||
// creates all the neccessary DOM elements for the control, adds listeners
|
||||
// on relevant map events, and returns the element containing the control
|
||||
var $div = $('<div>').addClass('tilemap-legend');
|
||||
let $div = $('<div>').addClass('tilemap-legend');
|
||||
|
||||
_.each(self._legendColors, function (color, i) {
|
||||
var labelText = self._legendQuantizer
|
||||
let labelText = self._legendQuantizer
|
||||
.invertExtent(color)
|
||||
.map(self._valueFormatter)
|
||||
.join(' – ');
|
||||
|
||||
var label = $('<div>').text(labelText);
|
||||
let label = $('<div>').text(labelText);
|
||||
|
||||
var icon = $('<i>').css({
|
||||
let icon = $('<i>').css({
|
||||
background: color,
|
||||
'border-color': self.darkerColor(color)
|
||||
});
|
||||
|
@ -77,7 +77,7 @@ define(function (require) {
|
|||
* @return {Object}
|
||||
*/
|
||||
BaseMarker.prototype.applyShadingStyle = function (value) {
|
||||
var color = this._legendQuantizer(value);
|
||||
let color = this._legendQuantizer(value);
|
||||
|
||||
return {
|
||||
fillColor: color,
|
||||
|
@ -97,11 +97,11 @@ define(function (require) {
|
|||
* return {undefined}
|
||||
*/
|
||||
BaseMarker.prototype.bindPopup = function (feature, layer) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
var popup = layer.on({
|
||||
let popup = layer.on({
|
||||
mouseover: function (e) {
|
||||
var layer = e.target;
|
||||
let layer = e.target;
|
||||
// bring layer to front if not older browser
|
||||
if (!L.Browser.ie && !L.Browser.opera) {
|
||||
layer.bringToFront();
|
||||
|
@ -131,7 +131,7 @@ define(function (require) {
|
|||
};
|
||||
|
||||
BaseMarker.prototype.destroy = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
// remove popups
|
||||
self.popups = self.popups.filter(function (popup) {
|
||||
|
@ -161,13 +161,13 @@ define(function (require) {
|
|||
* @param options {Object} Options to pass to L.geoJson
|
||||
*/
|
||||
BaseMarker.prototype._createMarkerGroup = function (options) {
|
||||
var self = this;
|
||||
var defaultOptions = {
|
||||
let self = this;
|
||||
let defaultOptions = {
|
||||
onEachFeature: function (feature, layer) {
|
||||
self.bindPopup(feature, layer);
|
||||
},
|
||||
style: function (feature) {
|
||||
var value = _.get(feature, 'properties.value');
|
||||
let value = _.get(feature, 'properties.value');
|
||||
return self.applyShadingStyle(value);
|
||||
},
|
||||
filter: self._filterToMapBounds()
|
||||
|
@ -185,10 +185,10 @@ define(function (require) {
|
|||
* @return {boolean}
|
||||
*/
|
||||
BaseMarker.prototype._filterToMapBounds = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
return function (feature) {
|
||||
var mapBounds = self.map.getBounds();
|
||||
var bucketRectBounds = _.get(feature, 'properties.rectangle');
|
||||
let mapBounds = self.map.getBounds();
|
||||
let bucketRectBounds = _.get(feature, 'properties.rectangle');
|
||||
return mapBounds.intersects(bucketRectBounds);
|
||||
};
|
||||
};
|
||||
|
@ -204,11 +204,11 @@ define(function (require) {
|
|||
*/
|
||||
BaseMarker.prototype._showTooltip = function (feature, latLng) {
|
||||
if (!this.map) return;
|
||||
var lat = _.get(feature, 'geometry.coordinates.1');
|
||||
var lng = _.get(feature, 'geometry.coordinates.0');
|
||||
let lat = _.get(feature, 'geometry.coordinates.1');
|
||||
let lng = _.get(feature, 'geometry.coordinates.0');
|
||||
latLng = latLng || L.latLng(lat, lng);
|
||||
|
||||
var content = this._tooltipFormatter(feature);
|
||||
let content = this._tooltipFormatter(feature);
|
||||
|
||||
if (!content) return;
|
||||
this._createTooltip(content, latLng);
|
||||
|
@ -240,15 +240,15 @@ define(function (require) {
|
|||
* return {undefined}
|
||||
*/
|
||||
BaseMarker.prototype.quantizeLegendColors = function () {
|
||||
var min = _.get(this.geoJson, 'properties.allmin', 0);
|
||||
var max = _.get(this.geoJson, 'properties.allmax', 1);
|
||||
var quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
|
||||
let min = _.get(this.geoJson, 'properties.allmin', 0);
|
||||
let max = _.get(this.geoJson, 'properties.allmax', 1);
|
||||
let quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
|
||||
|
||||
var reds1 = ['#ff6128'];
|
||||
var reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
|
||||
var reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
|
||||
var bottomCutoff = 2;
|
||||
var middleCutoff = 24;
|
||||
let reds1 = ['#ff6128'];
|
||||
let reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
|
||||
let reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
|
||||
let bottomCutoff = 2;
|
||||
let middleCutoff = 24;
|
||||
|
||||
if (max - min <= bottomCutoff) {
|
||||
this._legendColors = reds1;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function GeohashGridMarkerFactory(Private) {
|
||||
var _ = require('lodash');
|
||||
var L = require('leaflet');
|
||||
let _ = require('lodash');
|
||||
let L = require('leaflet');
|
||||
|
||||
var BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
let BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
|
||||
/**
|
||||
* Map overlay: rectangles that show the geohash grid bounds
|
||||
|
@ -14,19 +14,19 @@ define(function (require) {
|
|||
*/
|
||||
_.class(GeohashGridMarker).inherits(BaseMarker);
|
||||
function GeohashGridMarker(map, geoJson, params) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
GeohashGridMarker.Super.apply(this, arguments);
|
||||
|
||||
// super min and max from all chart data
|
||||
var min = this.geoJson.properties.allmin;
|
||||
var max = this.geoJson.properties.allmax;
|
||||
let min = this.geoJson.properties.allmin;
|
||||
let max = this.geoJson.properties.allmax;
|
||||
|
||||
this._createMarkerGroup({
|
||||
pointToLayer: function (feature, latlng) {
|
||||
var geohashRect = feature.properties.rectangle;
|
||||
let geohashRect = feature.properties.rectangle;
|
||||
// get bounds from northEast[3] and southWest[1]
|
||||
// corners in geohash rectangle
|
||||
var corners = [
|
||||
let corners = [
|
||||
[geohashRect[3][0], geohashRect[3][1]],
|
||||
[geohashRect[1][0], geohashRect[1][1]]
|
||||
];
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define(function (require) {
|
||||
return function HeatmapMarkerFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var L = require('leaflet');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let L = require('leaflet');
|
||||
|
||||
var BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
let BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
|
||||
/**
|
||||
* Map overlay: canvas layer with leaflet.heat plugin
|
||||
|
@ -15,7 +15,7 @@ define(function (require) {
|
|||
*/
|
||||
_.class(HeatmapMarker).inherits(BaseMarker);
|
||||
function HeatmapMarker(map, geoJson, params) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
this._disableTooltips = false;
|
||||
HeatmapMarker.Super.apply(this, arguments);
|
||||
|
||||
|
@ -36,8 +36,8 @@ define(function (require) {
|
|||
HeatmapMarker.prototype.addLegend = _.noop;
|
||||
|
||||
HeatmapMarker.prototype._createMarkerGroup = function (options) {
|
||||
var max = _.get(this.geoJson, 'properties.allmax');
|
||||
var points = this._dataToHeatArray(max);
|
||||
let max = _.get(this.geoJson, 'properties.allmax');
|
||||
let points = this._dataToHeatArray(max);
|
||||
|
||||
this._markerGroup = L.heatLayer(points, options);
|
||||
this._fixTooltips();
|
||||
|
@ -45,8 +45,8 @@ define(function (require) {
|
|||
};
|
||||
|
||||
HeatmapMarker.prototype._fixTooltips = function () {
|
||||
var self = this;
|
||||
var debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
|
||||
let self = this;
|
||||
let debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
|
||||
'leading': true,
|
||||
'trailing': false
|
||||
});
|
||||
|
@ -66,7 +66,7 @@ define(function (require) {
|
|||
}
|
||||
|
||||
function mouseMoveLocation(e) {
|
||||
var latlng = e.latlng;
|
||||
let latlng = e.latlng;
|
||||
|
||||
this.map.closePopup();
|
||||
|
||||
|
@ -78,7 +78,7 @@ define(function (require) {
|
|||
}
|
||||
|
||||
// find nearest feature to event latlng
|
||||
var feature = this._nearestFeature(latlng);
|
||||
let feature = this._nearestFeature(latlng);
|
||||
|
||||
// show tooltip if close enough to event latlng
|
||||
if (this._tooltipProximity(latlng, feature)) {
|
||||
|
@ -112,7 +112,7 @@ define(function (require) {
|
|||
* @return nearestPoint {Leaflet latLng}
|
||||
*/
|
||||
HeatmapMarker.prototype._nearestFeature = function (latLng) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
let nearest;
|
||||
|
||||
if (latLng.lng < -180 || latLng.lng > 180) {
|
||||
|
@ -120,8 +120,8 @@ define(function (require) {
|
|||
}
|
||||
|
||||
_.reduce(this.geoJson.features, function (distance, feature) {
|
||||
var featureLatLng = self._getLatLng(feature);
|
||||
var dist = latLng.distanceTo(featureLatLng);
|
||||
let featureLatLng = self._getLatLng(feature);
|
||||
let dist = latLng.distanceTo(featureLatLng);
|
||||
|
||||
if (dist < distance) {
|
||||
nearest = feature;
|
||||
|
@ -145,31 +145,31 @@ define(function (require) {
|
|||
HeatmapMarker.prototype._tooltipProximity = function (latlng, feature) {
|
||||
if (!feature) return;
|
||||
|
||||
var showTip = false;
|
||||
var featureLatLng = this._getLatLng(feature);
|
||||
let showTip = false;
|
||||
let featureLatLng = this._getLatLng(feature);
|
||||
|
||||
// zoomScale takes map zoom and returns proximity value for tooltip display
|
||||
// domain (input values) is map zoom (min 1 and max 18)
|
||||
// range (output values) is distance in meters
|
||||
// used to compare proximity of event latlng to feature latlng
|
||||
var zoomScale = d3.scale.linear()
|
||||
let zoomScale = d3.scale.linear()
|
||||
.domain([1, 4, 7, 10, 13, 16, 18])
|
||||
.range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
|
||||
|
||||
var proximity = zoomScale(this.map.getZoom());
|
||||
var distance = latlng.distanceTo(featureLatLng);
|
||||
let proximity = zoomScale(this.map.getZoom());
|
||||
let distance = latlng.distanceTo(featureLatLng);
|
||||
|
||||
// maxLngDif is max difference in longitudes
|
||||
// to prevent feature tooltip from appearing 360°
|
||||
// away from event latlng
|
||||
var maxLngDif = 40;
|
||||
var lngDif = Math.abs(latlng.lng - featureLatLng.lng);
|
||||
let maxLngDif = 40;
|
||||
let lngDif = Math.abs(latlng.lng - featureLatLng.lng);
|
||||
|
||||
if (distance < proximity && lngDif < maxLngDif) {
|
||||
showTip = true;
|
||||
}
|
||||
|
||||
var testScale = d3.scale.pow().exponent(0.2)
|
||||
let testScale = d3.scale.pow().exponent(0.2)
|
||||
.domain([1, 18])
|
||||
.range([1500000, 50]);
|
||||
return showTip;
|
||||
|
@ -186,12 +186,12 @@ define(function (require) {
|
|||
* @return {Array}
|
||||
*/
|
||||
HeatmapMarker.prototype._dataToHeatArray = function (max) {
|
||||
var self = this;
|
||||
var mapData = this.geoJson;
|
||||
let self = this;
|
||||
let mapData = this.geoJson;
|
||||
|
||||
return this.geoJson.features.map(function (feature) {
|
||||
var lat = feature.properties.center[0];
|
||||
var lng = feature.properties.center[1];
|
||||
let lat = feature.properties.center[0];
|
||||
let lng = feature.properties.center[1];
|
||||
let heatIntensity;
|
||||
|
||||
if (!self._attr.heatNormalizeData) {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function ScaledCircleMarkerFactory(Private) {
|
||||
var _ = require('lodash');
|
||||
var L = require('leaflet');
|
||||
let _ = require('lodash');
|
||||
let L = require('leaflet');
|
||||
|
||||
var BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
let BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
|
||||
/**
|
||||
* Map overlay: circle markers that are scaled to illustrate values
|
||||
|
@ -14,16 +14,16 @@ define(function (require) {
|
|||
*/
|
||||
_.class(ScaledCircleMarker).inherits(BaseMarker);
|
||||
function ScaledCircleMarker(map, geoJson, params) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
ScaledCircleMarker.Super.apply(this, arguments);
|
||||
|
||||
// multiplier to reduce size of all circles
|
||||
var scaleFactor = 0.6;
|
||||
let scaleFactor = 0.6;
|
||||
|
||||
this._createMarkerGroup({
|
||||
pointToLayer: function (feature, latlng) {
|
||||
var value = feature.properties.value;
|
||||
var scaledRadius = self._radiusScale(value) * scaleFactor;
|
||||
let value = feature.properties.value;
|
||||
let scaledRadius = self._radiusScale(value) * scaleFactor;
|
||||
return L.circleMarker(latlng).setRadius(scaledRadius);
|
||||
}
|
||||
});
|
||||
|
@ -38,17 +38,17 @@ define(function (require) {
|
|||
* @return {Number}
|
||||
*/
|
||||
ScaledCircleMarker.prototype._radiusScale = function (value) {
|
||||
var precisionBiasBase = 5;
|
||||
var precisionBiasNumerator = 200;
|
||||
var zoom = this.map.getZoom();
|
||||
var maxValue = this.geoJson.properties.allmax;
|
||||
var precision = _.max(this.geoJson.features.map(function (feature) {
|
||||
let precisionBiasBase = 5;
|
||||
let precisionBiasNumerator = 200;
|
||||
let zoom = this.map.getZoom();
|
||||
let maxValue = this.geoJson.properties.allmax;
|
||||
let precision = _.max(this.geoJson.features.map(function (feature) {
|
||||
return String(feature.properties.geohash).length;
|
||||
}));
|
||||
|
||||
var pct = Math.abs(value) / Math.abs(maxValue);
|
||||
var zoomRadius = 0.5 * Math.pow(2, zoom);
|
||||
var precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
|
||||
let pct = Math.abs(value) / Math.abs(maxValue);
|
||||
let zoomRadius = 0.5 * Math.pow(2, zoom);
|
||||
let precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
|
||||
|
||||
// square root value percentage
|
||||
return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
define(function (require) {
|
||||
return function ShadedCircleMarkerFactory(Private) {
|
||||
var _ = require('lodash');
|
||||
var L = require('leaflet');
|
||||
let _ = require('lodash');
|
||||
let L = require('leaflet');
|
||||
|
||||
var BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
let BaseMarker = Private(require('ui/vislib/visualizations/marker_types/base_marker'));
|
||||
|
||||
/**
|
||||
* Map overlay: circle markers that are shaded to illustrate values
|
||||
|
@ -14,19 +14,19 @@ define(function (require) {
|
|||
*/
|
||||
_.class(ShadedCircleMarker).inherits(BaseMarker);
|
||||
function ShadedCircleMarker(map, geoJson, params) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
ShadedCircleMarker.Super.apply(this, arguments);
|
||||
|
||||
// super min and max from all chart data
|
||||
var min = this.geoJson.properties.allmin;
|
||||
var max = this.geoJson.properties.allmax;
|
||||
let min = this.geoJson.properties.allmin;
|
||||
let max = this.geoJson.properties.allmax;
|
||||
|
||||
// multiplier to reduce size of all circles
|
||||
var scaleFactor = 0.8;
|
||||
let scaleFactor = 0.8;
|
||||
|
||||
this._createMarkerGroup({
|
||||
pointToLayer: function (feature, latlng) {
|
||||
var radius = self._geohashMinDistance(feature) * scaleFactor;
|
||||
let radius = self._geohashMinDistance(feature) * scaleFactor;
|
||||
return L.circle(latlng, radius);
|
||||
}
|
||||
});
|
||||
|
@ -41,8 +41,8 @@ define(function (require) {
|
|||
* @return {Number}
|
||||
*/
|
||||
ShadedCircleMarker.prototype._geohashMinDistance = function (feature) {
|
||||
var centerPoint = _.get(feature, 'properties.center');
|
||||
var geohashRect = _.get(feature, 'properties.rectangle');
|
||||
let centerPoint = _.get(feature, 'properties.center');
|
||||
let geohashRect = _.get(feature, 'properties.rectangle');
|
||||
|
||||
// centerPoint is an array of [lat, lng]
|
||||
// geohashRect is the 4 corners of the geoHash rectangle
|
||||
|
@ -50,16 +50,16 @@ define(function (require) {
|
|||
// clockwise, each value being an array of [lat, lng]
|
||||
|
||||
// center lat and southeast lng
|
||||
var east = L.latLng([centerPoint[0], geohashRect[2][1]]);
|
||||
let east = L.latLng([centerPoint[0], geohashRect[2][1]]);
|
||||
// southwest lat and center lng
|
||||
var north = L.latLng([geohashRect[3][0], centerPoint[1]]);
|
||||
let north = L.latLng([geohashRect[3][0], centerPoint[1]]);
|
||||
|
||||
// get latLng of geohash center point
|
||||
var center = L.latLng([centerPoint[0], centerPoint[1]]);
|
||||
let center = L.latLng([centerPoint[0], centerPoint[1]]);
|
||||
|
||||
// get smallest radius at center of geohash grid rectangle
|
||||
var eastRadius = Math.floor(center.distanceTo(east));
|
||||
var northRadius = Math.floor(center.distanceTo(north));
|
||||
let eastRadius = Math.floor(center.distanceTo(east));
|
||||
let northRadius = Math.floor(center.distanceTo(north));
|
||||
return _.min([eastRadius, northRadius]);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function PieChartFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
|
||||
var Chart = Private(require('ui/vislib/visualizations/_chart'));
|
||||
var errors = require('ui/errors');
|
||||
let Chart = Private(require('ui/vislib/visualizations/_chart'));
|
||||
let errors = require('ui/errors');
|
||||
|
||||
/**
|
||||
* Pie Chart Visualization
|
||||
|
@ -24,7 +24,7 @@ define(function (require) {
|
|||
}
|
||||
PieChart.Super.apply(this, arguments);
|
||||
|
||||
var charts = this.handler.data.getVisData();
|
||||
let charts = this.handler.data.getVisData();
|
||||
this._validatePieData(charts);
|
||||
|
||||
this._attr = _.defaults(handler._attr || {}, {
|
||||
|
@ -37,7 +37,7 @@ define(function (require) {
|
|||
* If so, an error is thrown.
|
||||
*/
|
||||
PieChart.prototype._validatePieData = function (charts) {
|
||||
var isAllZeros = charts.every(function (chart) {
|
||||
let isAllZeros = charts.every(function (chart) {
|
||||
return chart.slices.children.length === 0;
|
||||
});
|
||||
|
||||
|
@ -52,7 +52,7 @@ define(function (require) {
|
|||
* @returns {D3.Selection} SVG path with event listeners attached
|
||||
*/
|
||||
PieChart.prototype.addPathEvents = function (element) {
|
||||
var events = this.events;
|
||||
let events = this.events;
|
||||
|
||||
return element
|
||||
.call(events.addHoverEvent())
|
||||
|
@ -64,11 +64,11 @@ define(function (require) {
|
|||
(function assignPercentages(slices) {
|
||||
if (slices.sumOfChildren != null) return;
|
||||
|
||||
var parent = slices;
|
||||
var children = parent.children;
|
||||
var parentPercent = parent.percentOfParent;
|
||||
let parent = slices;
|
||||
let children = parent.children;
|
||||
let parentPercent = parent.percentOfParent;
|
||||
|
||||
var sum = parent.sumOfChildren = Math.abs(children.reduce(function (sum, child) {
|
||||
let sum = parent.sumOfChildren = Math.abs(children.reduce(function (sum, child) {
|
||||
return sum + Math.abs(child.size);
|
||||
}, 0));
|
||||
|
||||
|
@ -98,24 +98,24 @@ define(function (require) {
|
|||
* @returns {D3.Selection} SVG with paths attached
|
||||
*/
|
||||
PieChart.prototype.addPath = function (width, height, svg, slices) {
|
||||
var self = this;
|
||||
var marginFactor = 0.95;
|
||||
var isDonut = self._attr.isDonut;
|
||||
var radius = (Math.min(width, height) / 2) * marginFactor;
|
||||
var color = self.handler.data.getPieColorFunc();
|
||||
var tooltip = self.tooltip;
|
||||
var isTooltip = self._attr.addTooltip;
|
||||
let self = this;
|
||||
let marginFactor = 0.95;
|
||||
let isDonut = self._attr.isDonut;
|
||||
let radius = (Math.min(width, height) / 2) * marginFactor;
|
||||
let color = self.handler.data.getPieColorFunc();
|
||||
let tooltip = self.tooltip;
|
||||
let isTooltip = self._attr.addTooltip;
|
||||
|
||||
var partition = d3.layout.partition()
|
||||
let partition = d3.layout.partition()
|
||||
.sort(null)
|
||||
.value(function (d) {
|
||||
return d.percentOfParent * 100;
|
||||
});
|
||||
var x = d3.scale.linear()
|
||||
let x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
var y = d3.scale.sqrt()
|
||||
let y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
var arc = d3.svg.arc()
|
||||
let arc = d3.svg.arc()
|
||||
.startAngle(function (d) {
|
||||
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
|
||||
})
|
||||
|
@ -135,7 +135,7 @@ define(function (require) {
|
|||
return Math.max(0, y(d.y + d.dy));
|
||||
});
|
||||
|
||||
var path = svg
|
||||
let path = svg
|
||||
.datum(slices)
|
||||
.selectAll('path')
|
||||
.data(partition.nodes)
|
||||
|
@ -161,8 +161,8 @@ define(function (require) {
|
|||
};
|
||||
|
||||
PieChart.prototype._validateContainerSize = function (width, height) {
|
||||
var minWidth = 20;
|
||||
var minHeight = 20;
|
||||
let minWidth = 20;
|
||||
let minHeight = 20;
|
||||
|
||||
if (width <= minWidth || height <= minHeight) {
|
||||
throw new errors.ContainerTooSmall();
|
||||
|
@ -176,14 +176,14 @@ define(function (require) {
|
|||
* @returns {Function} Creates the pie chart
|
||||
*/
|
||||
PieChart.prototype.draw = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function (data) {
|
||||
var slices = data.slices;
|
||||
var div = d3.select(this);
|
||||
var width = $(this).width();
|
||||
var height = $(this).height();
|
||||
let slices = data.slices;
|
||||
let div = d3.select(this);
|
||||
let width = $(this).width();
|
||||
let height = $(this).height();
|
||||
let path;
|
||||
|
||||
if (!slices.children.length) return;
|
||||
|
@ -191,7 +191,7 @@ define(function (require) {
|
|||
self.convertToPercentage(slices);
|
||||
self._validateContainerSize(width, height);
|
||||
|
||||
var svg = div.append('svg')
|
||||
let svg = div.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.append('g')
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(function (require) {
|
||||
return function TileMapFactory(Private) {
|
||||
var d3 = require('d3');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
let d3 = require('d3');
|
||||
let _ = require('lodash');
|
||||
let $ = require('jquery');
|
||||
|
||||
var Chart = Private(require('ui/vislib/visualizations/_chart'));
|
||||
var TileMapMap = Private(require('ui/vislib/visualizations/_map'));
|
||||
let Chart = Private(require('ui/vislib/visualizations/_chart'));
|
||||
let TileMapMap = Private(require('ui/vislib/visualizations/_map'));
|
||||
|
||||
/**
|
||||
* Tile Map Visualization: renders maps
|
||||
|
@ -40,7 +40,7 @@ define(function (require) {
|
|||
* @return {Function} - function to add a map to a selection
|
||||
*/
|
||||
TileMap.prototype.draw = function () {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
// clean up old maps
|
||||
self.destroy();
|
||||
|
@ -85,7 +85,7 @@ define(function (require) {
|
|||
*/
|
||||
TileMap.prototype._appendGeoExtents = function () {
|
||||
// add allmin and allmax to geoJson
|
||||
var geoMinMax = this.handler.data.getGeoExtents();
|
||||
let geoMinMax = this.handler.data.getGeoExtents();
|
||||
this.geoJson.properties.allmin = geoMinMax.min;
|
||||
this.geoJson.properties.allmax = geoMinMax.max;
|
||||
};
|
||||
|
@ -97,9 +97,9 @@ define(function (require) {
|
|||
* @param selection {Object} d3 selection
|
||||
*/
|
||||
TileMap.prototype._appendMap = function (selection) {
|
||||
var container = $(selection).addClass('tilemap');
|
||||
let container = $(selection).addClass('tilemap');
|
||||
|
||||
var map = new TileMapMap(container, this._chartData, {
|
||||
let map = new TileMapMap(container, this._chartData, {
|
||||
// center: this._attr.mapCenter,
|
||||
// zoom: this._attr.mapZoom,
|
||||
events: this.events,
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
define(function (require) {
|
||||
return function TimeMarkerFactory() {
|
||||
var d3 = require('d3');
|
||||
var dateMath = require('ui/utils/dateMath');
|
||||
let d3 = require('d3');
|
||||
let dateMath = require('ui/utils/dateMath');
|
||||
|
||||
function TimeMarker(times, xScale, height) {
|
||||
if (!(this instanceof TimeMarker)) {
|
||||
return new TimeMarker(times, xScale, height);
|
||||
}
|
||||
|
||||
var currentTimeArr = [{
|
||||
let currentTimeArr = [{
|
||||
'time': new Date().getTime(),
|
||||
'class': 'time-marker',
|
||||
'color': '#c80000',
|
||||
|
@ -30,14 +30,14 @@ define(function (require) {
|
|||
}
|
||||
|
||||
TimeMarker.prototype._isTimeBasedChart = function (selection) {
|
||||
var data = selection.data();
|
||||
let data = selection.data();
|
||||
return data.every(function (datum) {
|
||||
return (datum.ordered && datum.ordered.date);
|
||||
});
|
||||
};
|
||||
|
||||
TimeMarker.prototype.render = function (selection) {
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
// return if not time based chart
|
||||
if (!self._isTimeBasedChart(selection)) return;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue