mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
adding vislib documentation
This commit is contained in:
Shelby Sturgis
parent
46a5f951fd
commit
8bbd2962ba
42 changed files with 357 additions and 244 deletions
20
README.md
20
README.md
|
|
@ -7,20 +7,12 @@
|
|||
Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elasticsearch.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Requirements](#requirements)
|
||||
- [Installation](#installation)
|
||||
- [Quick Start](#quick-start)
|
||||
- [Discover](#discover)
|
||||
- [Visualize](#visualize)
|
||||
- [Dashboard](#dashboard)
|
||||
- [Settings](#settings)
|
||||
|
||||
## Requirements
|
||||
|
||||
- Java
|
||||
- Elasticsearch version 1.4.0 or later
|
||||
- ...and nothing else
|
||||
- [Installation](#installation)
|
||||
- [Quick Start](#quick-start)
|
||||
- [Discover](#discover)
|
||||
- [Visualize](#visualize)
|
||||
- [Dashboard](#dashboard)
|
||||
- [Settings](#settings)
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
|
|||
|
|
@ -8,17 +8,22 @@ define(function (require) {
|
|||
* Accepts an array of strings or numbers that are used to create a
|
||||
* a lookup table that associates the values (key) with a hex color (value).
|
||||
* Returns a function that accepts a value (i.e. a string or number)
|
||||
* and returns a hex color associated with that value
|
||||
* and returns a hex color associated with that value.
|
||||
*/
|
||||
|
||||
return function (arrayOfStringsOrNumbers) {
|
||||
// Takes an array of strings or numbers
|
||||
if (!_.isArray(arrayOfStringsOrNumbers)) {
|
||||
throw new Error('ColorUtil expects an array of strings or numbers');
|
||||
throw new Error('ColorUtil expects an array');
|
||||
}
|
||||
|
||||
// Creates lookup table of values (keys) and hex colors (values).
|
||||
var colorObj = _.zipObject(arrayOfStringsOrNumbers, createColorPalette(arrayOfStringsOrNumbers.length));
|
||||
arrayOfStringsOrNumbers.forEach(function (val) {
|
||||
if (!_.isString(val) && !_.isNumber(val) && !_.isUndefined(val)) {
|
||||
throw new TypeError('ColorUtil expects an array of strings, numbers, or undefined values');
|
||||
}
|
||||
});
|
||||
|
||||
var arrayLength = arrayOfStringsOrNumbers.length;
|
||||
var colorObj = _.zipObject(arrayOfStringsOrNumbers, createColorPalette(arrayLength));
|
||||
|
||||
return function (value) {
|
||||
return colorObj[value];
|
||||
|
|
|
|||
|
|
@ -4,15 +4,21 @@ define(function (require) {
|
|||
|
||||
var seedColors = Private(require('components/vislib/components/color/seed_colors'));
|
||||
|
||||
// Accepts a number that represents a length of an array
|
||||
return function (num) {
|
||||
var usedColors = [];
|
||||
/*
|
||||
* Generates an array of hex colors the length of the input number.
|
||||
* If the number is greater than the length of seed colors available,
|
||||
* new colors are generated up to the value of the input number.
|
||||
*/
|
||||
|
||||
// checks if more colors are needed
|
||||
return function (num) {
|
||||
if (!_.isNumber(num)) {
|
||||
throw new TypeError('ColorPaletteUtilService expects a number');
|
||||
}
|
||||
|
||||
var usedColors = [];
|
||||
var diff = num - seedColors.length;
|
||||
|
||||
if (diff > 0) {
|
||||
// generate more colors
|
||||
usedColors = _.clone(seedColors);
|
||||
|
||||
for (var newColor, i = 0; i < diff; i++) {
|
||||
|
|
@ -23,12 +29,9 @@ define(function (require) {
|
|||
usedColors.push(newColor);
|
||||
}
|
||||
} else {
|
||||
// trim to length of array labels
|
||||
usedColors = _.first(seedColors, num);
|
||||
}
|
||||
|
||||
// Returns an array of hex colors
|
||||
// Returned array should be same length as input (num).
|
||||
return usedColors;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
define(function () {
|
||||
/*
|
||||
* Using a random color generator presented awful colors and unpredictable color schemes.
|
||||
* So we needed to come up with one of our own that creates consistent, pleasing color patterns.
|
||||
* So we needed to come up with a color scheme of our own that creates consistent, pleasing color patterns.
|
||||
* The order allows us to guarantee that 1st, 2nd, 3rd, etc values always get the same color.
|
||||
* Returns an array of 72 colors.
|
||||
*/
|
||||
|
||||
return function SeedColorUtilService() {
|
||||
// returns an array of 72 seed colors
|
||||
return [
|
||||
'#57c17b',
|
||||
'#006e8a',
|
||||
|
|
|
|||
|
|
@ -4,23 +4,19 @@ define(function (require) {
|
|||
|
||||
var flattenSeries = Private(require('components/vislib/components/labels/flatten_series'));
|
||||
|
||||
/* Takes a kibana obj object
|
||||
* for example:
|
||||
* {
|
||||
* labels: '',
|
||||
* rows: [...],
|
||||
* raw: [...],
|
||||
* ...,
|
||||
* };
|
||||
* Data object can have a key that has rows, columns, or series.
|
||||
/*
|
||||
* Accepts a Kibana data object and returns an array of values objects.
|
||||
*/
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj) || !obj.rows && !obj.columns && !obj.series) {
|
||||
throw new TypeError('GetArrayUtilService expects an object with a series, rows, or columns key');
|
||||
}
|
||||
|
||||
if (!obj.series) {
|
||||
return flattenSeries(obj);
|
||||
}
|
||||
|
||||
// Returns a kibana obj.series array of objects with values array
|
||||
return obj.series;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,20 +2,17 @@ define(function (require) {
|
|||
return function GetSeriesUtilService() {
|
||||
var _ = require('lodash');
|
||||
|
||||
// Accepts a kibana data object
|
||||
return function (obj) {
|
||||
obj = obj.rows ? obj.rows : obj.columns;
|
||||
/*
|
||||
* Accepts a Kibana data object with a rows or columns key
|
||||
* and returns an array of flattened series values.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Flattens the obj.rows or obj.columns arrays
|
||||
* to an array of d.series objects
|
||||
* for example:
|
||||
* [
|
||||
* { label: .., values: [...] },
|
||||
* { label: .., values: [...] },
|
||||
* { label: .., values: [...] }
|
||||
* ]
|
||||
*/
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj) || !obj.rows && !obj.columns) {
|
||||
throw new TypeError('GetSeriesUtilService expects an object with either a rows or columns key');
|
||||
}
|
||||
|
||||
obj = obj.rows ? obj.rows : obj.columns;
|
||||
|
||||
return _.chain(obj)
|
||||
.pluck('series')
|
||||
|
|
|
|||
|
|
@ -2,35 +2,28 @@ define(function (require) {
|
|||
return function LabelUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
|
||||
var getArr = Private(require('components/vislib/components/labels/data_array'));
|
||||
var createArr = Private(require('components/vislib/components/labels/data_array'));
|
||||
var getArrOfUniqLabels = Private(require('components/vislib/components/labels/uniq_labels'));
|
||||
|
||||
/* Takes a kibana data object
|
||||
* for example:
|
||||
* {
|
||||
* labels: '',
|
||||
* rows: [...],
|
||||
* raw: [...],
|
||||
* ...,
|
||||
* };
|
||||
* Data object can have a key that has rows, columns, or series.
|
||||
/*
|
||||
* Accepts a Kibana data object and returns an array of unique labels (strings).
|
||||
* Extracts the field formatter from the raw object and passes it to the
|
||||
* getArrOfUniqLabels function.
|
||||
*
|
||||
* Currently, this service is only used for vertical bar charts and line charts.
|
||||
*/
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj)) {
|
||||
throw new Error('LabelUtil expects an object');
|
||||
throw new TypeError('LabelUtil expects an object');
|
||||
}
|
||||
|
||||
var raw;
|
||||
var fieldIndex;
|
||||
if (obj.raw) {
|
||||
raw = obj.raw.columns;
|
||||
fieldIndex = _.findIndex(raw, {'categoryName': 'group'});
|
||||
}
|
||||
var raw = obj.raw;
|
||||
var fieldIndex = raw ? _.findIndex(raw, {'categoryName': 'group'}) : undefined;
|
||||
var fieldFormatter = raw && fieldIndex && fieldIndex !== -1 ?
|
||||
raw[fieldIndex].field.format.convert : function (d) { return d; };
|
||||
|
||||
var fieldFormatter = raw && raw[fieldIndex] ? raw[fieldIndex].field.format.convert : function (d) { return d; };
|
||||
|
||||
// Returns an array of unique chart labels
|
||||
return getArrOfUniqLabels(getArr(obj), fieldFormatter);
|
||||
return getArrOfUniqLabels(createArr(obj), fieldFormatter);
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@ define(function (require) {
|
|||
return function UniqLabelUtilService() {
|
||||
var _ = require('lodash');
|
||||
|
||||
// Takes an array of objects
|
||||
/*
|
||||
* Accepts an array of data objects and a formatter function.
|
||||
* Returns a unique list of formatted labels (strings).
|
||||
*/
|
||||
|
||||
return function (arr, formatter) {
|
||||
if (!_.isArray(arr)) {
|
||||
throw TypeError('UniqLabelUtil expects an array of objects');
|
||||
throw new TypeError('UniqLabelUtil expects an array of objects');
|
||||
}
|
||||
|
||||
// Returns a array of unique chart labels
|
||||
return _(arr)
|
||||
.pluck('label')
|
||||
.unique()
|
||||
|
|
|
|||
|
|
@ -2,8 +2,16 @@ define(function (require) {
|
|||
return function FlattenDataObjectUtilService() {
|
||||
var _ = require('lodash');
|
||||
|
||||
// Takes a kibana data.series array of objects
|
||||
/*
|
||||
* Accepts a Kibana data object, flattens the data.series values array,
|
||||
* and returns an array of values objects.
|
||||
*/
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj) || !obj.rows && !obj.columns && !obj.series) {
|
||||
throw new TypeError('FlattenDataObjUtilService expects an object with a series, rows, or columns key');
|
||||
}
|
||||
|
||||
if (!obj.series) {
|
||||
obj = obj.rows ? obj.rows : obj.columns;
|
||||
|
||||
|
|
@ -15,14 +23,6 @@ define(function (require) {
|
|||
.value();
|
||||
}
|
||||
|
||||
// Returns an array of objects
|
||||
/*
|
||||
* [
|
||||
* { x: ..., y: ...},
|
||||
* { x: ..., y: ...},
|
||||
* { x: ..., y: ...}
|
||||
* ]
|
||||
*/
|
||||
return _.flatten(obj.series, 'values');
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,8 +6,22 @@ define(function (require) {
|
|||
var createZeroFilledArray = Private(require('components/vislib/components/zero_injection/zero_filled_array'));
|
||||
var zeroFillDataArray = Private(require('components/vislib/components/zero_injection/zero_fill_data_array'));
|
||||
|
||||
// Takes the kibana data objects
|
||||
/*
|
||||
* A Kibana data object may have multiple series with different array lengths.
|
||||
* This proves an impediment to stacking in the visualization library.
|
||||
* Therefore, zero values must be injected wherever these arrays do not line up.
|
||||
* That is, each array must have the same x values with zeros filled in where the
|
||||
* x values were added.
|
||||
*
|
||||
* This function and its helper functions accepts a Kibana data object
|
||||
* and injects zeros where needed.
|
||||
*/
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj) || !obj.rows && !obj.columns && !obj.series) {
|
||||
throw new TypeError('ZeroInjectionUtilService expects an object with a series, rows, or columns key');
|
||||
}
|
||||
|
||||
var keys = orderXValues(obj);
|
||||
var max;
|
||||
var zeroArray;
|
||||
|
|
@ -28,12 +42,9 @@ define(function (require) {
|
|||
arr[i].series[j].values = zeroFillDataArray(zeroArray, dataArray);
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
// Looping thru each arr.values object and replacing
|
||||
// the y value of the zero-filled array
|
||||
max = obj.series.length;
|
||||
|
||||
for (i = 0; i < max; i++) {
|
||||
|
|
@ -43,7 +54,6 @@ define(function (require) {
|
|||
obj.series[i].values = zeroFillDataArray(zeroArray, dataArray);
|
||||
}
|
||||
|
||||
// Returns a zero-filled array of objects
|
||||
return obj;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,24 +3,30 @@ define(function (require) {
|
|||
var _ = require('lodash');
|
||||
var getUniqKeys = Private(require('components/vislib/components/zero_injection/uniq_keys'));
|
||||
|
||||
// Takes a kibana data objects
|
||||
/*
|
||||
* Accepts a Kibana data object and returns
|
||||
* an array of x axis values ordered by their index number.
|
||||
*/
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj)) {
|
||||
throw new Error('OrderedXKeysUtilService expects an object');
|
||||
}
|
||||
|
||||
var objKeys = getUniqKeys(obj);
|
||||
|
||||
// Returns an array x axis values
|
||||
return _.chain(objKeys)
|
||||
.pairs()
|
||||
.sortBy(function (d) {
|
||||
// sort by number
|
||||
if (d[1].isNumber) {
|
||||
return +d[0];
|
||||
}
|
||||
return;
|
||||
})
|
||||
.map(function (d) {
|
||||
return d[1].isNumber ? +d[0] : d[0];
|
||||
})
|
||||
.value();
|
||||
.pairs()
|
||||
.sortBy(function (d) {
|
||||
if (d[1].isNumber) {
|
||||
// sort by index
|
||||
return +d[0];
|
||||
}
|
||||
})
|
||||
.map(function (d) {
|
||||
return d[1].isNumber ? +d[0] : d[0];
|
||||
})
|
||||
.value();
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
@ -4,19 +4,29 @@ define(function (require) {
|
|||
|
||||
var flattenDataArray = Private(require('components/vislib/components/zero_injection/flatten_data'));
|
||||
|
||||
// accepts a kibana data.series array of objects
|
||||
/*
|
||||
* Accepts a Kibana data object.
|
||||
* Returns an object with unique x axis values as keys with an object of
|
||||
* their index numbers and an isNumber boolean as their values.
|
||||
* e.g. { 'xAxisValue': { index: 1, isNumber: false }}, ...
|
||||
*/
|
||||
|
||||
return function (obj) {
|
||||
if (!_.isObject(obj)) {
|
||||
throw new TypeError('UniqueXValuesUtilService expects an object');
|
||||
}
|
||||
|
||||
var flattenedData = flattenDataArray(obj);
|
||||
var uniqueXValues = {};
|
||||
|
||||
// Appends unique x values in the order they appear to an empty object
|
||||
flattenedData.forEach(function (d, i) {
|
||||
var key = d.x;
|
||||
|
||||
uniqueXValues[key] = uniqueXValues[key] === void 0 ?
|
||||
{ index: i, isNumber: _.isNumber(key) } : { index: Math.max(i, uniqueXValues[key].index), isNumber: _.isNumber(key) };
|
||||
{ index: i, isNumber: _.isNumber(key) } :
|
||||
{ index: Math.max(i, uniqueXValues[key].index), isNumber: _.isNumber(key) };
|
||||
});
|
||||
|
||||
// returns an object with unique x values
|
||||
return uniqueXValues;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,21 @@ define(function (require) {
|
|||
return function ZeroFillDataArrayUtilService(Private) {
|
||||
var _ = require('lodash');
|
||||
|
||||
// Accepts an array of zero-filled y value objects
|
||||
// and a kibana data.series[i].values array of objects
|
||||
/*
|
||||
* Accepts an array of zero-filled y value objects (arr1)
|
||||
* and a kibana data.series[i].values array of objects (arr2).
|
||||
* Return a zero-filled array of objects (arr1).
|
||||
*/
|
||||
|
||||
return function (arr1, arr2) {
|
||||
if (!_.isArray(arr1) || !_.isArray(arr2)) {
|
||||
throw new TypeError('ZeroFillDataArrayUtilService expects 2 arrays');
|
||||
}
|
||||
|
||||
var max = arr2.length;
|
||||
var getX = function (d) {
|
||||
return d.x === val.x;
|
||||
};
|
||||
var max = arr2.length;
|
||||
var i;
|
||||
var val;
|
||||
var index;
|
||||
|
|
@ -19,7 +27,6 @@ define(function (require) {
|
|||
arr1.splice(index, 1, val);
|
||||
}
|
||||
|
||||
// Return a zero-filled array of objects
|
||||
return arr1;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
define(function () {
|
||||
return function ZeroFilledArrayUtilService() {
|
||||
// Accepts an array of strings or numbers
|
||||
// and a kibana data.ordered object
|
||||
var _ = require('lodash');
|
||||
|
||||
/*
|
||||
* Accepts an array of x axis values (strings or numbers).
|
||||
* Returns a zero filled array.
|
||||
*/
|
||||
|
||||
return function (arr) {
|
||||
var max = arr.length;
|
||||
var i;
|
||||
var val;
|
||||
if (!_.isArray(arr)) {
|
||||
throw new Error('ZeroFilledArrayUtilService expects an array of strings or numbers');
|
||||
}
|
||||
|
||||
var zeroFilledArray = [];
|
||||
|
||||
for (i = 0; i < max; i++) {
|
||||
val = arr[i];
|
||||
|
||||
arr.forEach(function (val) {
|
||||
zeroFilledArray.push({
|
||||
x: val,
|
||||
y: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Returns an array of objects with y value of 0
|
||||
return zeroFilledArray;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@ define(function (require) {
|
|||
return require('d3');
|
||||
});
|
||||
|
||||
// Kibana visualization library
|
||||
/**
|
||||
* Provides the Kibana4 Visualization Library
|
||||
*
|
||||
* @module visLib
|
||||
* @main visLib
|
||||
* @return {Object} Contains the version number and the Vis Class for creating visualizations
|
||||
*/
|
||||
module.service('visLib', function (Private) {
|
||||
return {
|
||||
version: '0.0.0',
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ define(function (require) {
|
|||
var _ = require('lodash');
|
||||
var errors = require('errors');
|
||||
|
||||
return function ErrorHandlerFactory(Private) {
|
||||
return function ErrorHandlerFactory() {
|
||||
// Common errors shared between constructors
|
||||
function ErrorHandler() {}
|
||||
|
||||
// Validate the height and width are > 0
|
||||
// min size must be at least 1px
|
||||
ErrorHandler.prototype.validateWidthandHeight = function (width, height) {
|
||||
// min size must be at least 1px
|
||||
var badWidth = _.isNaN(width) || width <= 0;
|
||||
var badHeight = _.isNaN(height) || height <= 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ define(function (require) {
|
|||
|
||||
var ErrorHandler = Private(require('components/vislib/lib/_error_handler'));
|
||||
|
||||
/*
|
||||
/**
|
||||
* Appends axis title(s) to the visualization
|
||||
*/
|
||||
|
||||
function AxisTitle(el, xTitle, yTitle) {
|
||||
if (!(this instanceof AxisTitle)) {
|
||||
return new AxisTitle(el, xTitle, yTitle);
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@ define(function (require) {
|
|||
var ErrorHandler = Private(require('components/vislib/lib/_error_handler'));
|
||||
var Tooltip = Private(require('components/vislib/lib/tooltip'));
|
||||
|
||||
/*
|
||||
/**
|
||||
* Append chart titles to the visualization
|
||||
* arguments:
|
||||
* el => reference to a DOM element
|
||||
*/
|
||||
|
||||
function ChartTitle(el) {
|
||||
if (!(this instanceof ChartTitle)) {
|
||||
return new ChartTitle(el);
|
||||
|
|
@ -47,10 +48,7 @@ define(function (require) {
|
|||
str = text.text();
|
||||
avg = length / str.length;
|
||||
end = Math.floor(maxWidth / avg) - 5;
|
||||
|
||||
str = str.substr(0, end) + '...';
|
||||
|
||||
// mouseover and mouseout
|
||||
self.addMouseEvents(text);
|
||||
|
||||
return text.text(str);
|
||||
|
|
@ -81,7 +79,6 @@ define(function (require) {
|
|||
var size = dataType === 'rows' ? height : width;
|
||||
var txtHtOffset = 11;
|
||||
|
||||
// Check if width or height are 0 or NaN
|
||||
self.validateWidthandHeight(width, height);
|
||||
|
||||
div.append('svg')
|
||||
|
|
@ -95,7 +92,6 @@ define(function (require) {
|
|||
.append('text')
|
||||
.attr('transform', function () {
|
||||
if (dataType === 'rows') {
|
||||
// if `rows`, rotate the chart titles
|
||||
return 'translate(' + txtHtOffset + ',' + height / 2 + ')rotate(270)';
|
||||
}
|
||||
return 'translate(' + width / 2 + ',' + txtHtOffset + ')';
|
||||
|
|
@ -106,7 +102,8 @@ define(function (require) {
|
|||
});
|
||||
|
||||
// truncate long chart titles
|
||||
div.selectAll('text').call(self.truncate(size));
|
||||
div.selectAll('text')
|
||||
.call(self.truncate(size));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ define(function (require) {
|
|||
/**
|
||||
* Events Class
|
||||
*/
|
||||
|
||||
function Dispatch(handler, chartData) {
|
||||
if (!(this instanceof Dispatch)) {
|
||||
return new Dispatch(handler, chartData);
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ define(function (require) {
|
|||
var Data = Private(require('components/vislib/lib/data'));
|
||||
var Layout = Private(require('components/vislib/lib/layout/layout'));
|
||||
|
||||
/*
|
||||
/**
|
||||
* Handles building all the components of the visualization
|
||||
* arguments:
|
||||
* vis => this object from vis.js
|
||||
*
|
||||
* returns an object with reference to the vis.prototype,
|
||||
* and news up all the constructors needed to build a visualization
|
||||
* @class Handler
|
||||
* @constructor
|
||||
* @param vis {Object} Reference to the Vis Class Constructor
|
||||
* @param opts {Object} Reference to Visualization constructors needed to create the visualization
|
||||
*/
|
||||
function Handler(vis, opts) {
|
||||
if (!(this instanceof Handler)) {
|
||||
|
|
@ -26,7 +26,6 @@ define(function (require) {
|
|||
'margin' : { top: 10, right: 3, bottom: 5, left: 3 }
|
||||
});
|
||||
|
||||
// Visualization constructors
|
||||
this.layout = new Layout(vis.el, vis.data, vis._attr.type);
|
||||
this.xAxis = opts.xAxis;
|
||||
this.yAxis = opts.yAxis;
|
||||
|
|
@ -37,11 +36,9 @@ define(function (require) {
|
|||
this.legend = opts.legend;
|
||||
}
|
||||
|
||||
// Array of objects to render to the visualization
|
||||
this.renderArray = _.filter([
|
||||
this.layout,
|
||||
this.legend,
|
||||
this.tooltip,
|
||||
this.axisTitle,
|
||||
this.chartTitle,
|
||||
this.xAxis,
|
||||
|
|
@ -49,27 +46,28 @@ define(function (require) {
|
|||
], Boolean);
|
||||
}
|
||||
|
||||
// Render the visualization
|
||||
/**
|
||||
* Renders the constructors that create the visualization,
|
||||
* including the chart constructor
|
||||
*
|
||||
* @method render
|
||||
* @returns {HTMLElement} With the visualization child element
|
||||
*/
|
||||
Handler.prototype.render = function () {
|
||||
var self = this;
|
||||
// Save a reference to the charts
|
||||
var charts = this.charts = [];
|
||||
|
||||
// Render objects in the render array
|
||||
_.forEach(this.renderArray, function (property) {
|
||||
if (typeof property.render === 'function') {
|
||||
property.render();
|
||||
}
|
||||
});
|
||||
|
||||
// Add charts to the visualization
|
||||
d3.select(this.el)
|
||||
.selectAll('.chart')
|
||||
.each(function (chartData) {
|
||||
// new up the visualization type
|
||||
var chart = new self.ChartClass(self, this, chartData);
|
||||
|
||||
// Bind events to the chart
|
||||
d3.rebind(chart, chart._attr.dispatch, 'on');
|
||||
|
||||
// Bubble events up to the Vis Class and Events Class
|
||||
|
|
@ -85,25 +83,36 @@ define(function (require) {
|
|||
self.vis.emit('brush', e);
|
||||
});
|
||||
|
||||
// Save reference to charts
|
||||
charts.push(chart);
|
||||
|
||||
// Render charts to screen
|
||||
chart.render();
|
||||
});
|
||||
};
|
||||
|
||||
// Remove all DOM elements from the `el` provided
|
||||
/**
|
||||
* Removes all DOM elements from the HTML element provided
|
||||
*
|
||||
* @method removeAll
|
||||
* @param el {HTMLElement} Reference to the HTML Element that contains the chart
|
||||
* @returns {HTMLElement} With the chart child element removed
|
||||
*/
|
||||
Handler.prototype.removeAll = function (el) {
|
||||
return d3.select(el).selectAll('*').remove();
|
||||
return d3.select(el)
|
||||
.selectAll('*')
|
||||
.remove();
|
||||
};
|
||||
|
||||
// Display an error message on the screen
|
||||
/**
|
||||
* Displays an error message in the DOM
|
||||
*
|
||||
* @method error
|
||||
* @param message {String} Error message to display
|
||||
* @returns {HTMLElement} Displays the input message
|
||||
*/
|
||||
Handler.prototype.error = function (message) {
|
||||
this.removeAll(this.el);
|
||||
|
||||
// Return an error wrapper DOM element
|
||||
return d3.select(this.el).append('div')
|
||||
return d3.select(this.el)
|
||||
.append('div')
|
||||
// class name needs `chart` in it for the polling checkSize function
|
||||
// to continuously call render on resize
|
||||
.attr('class', 'chart error')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
define(function (require) {
|
||||
return function HandlerTypeFactory(Private) {
|
||||
// handler types
|
||||
|
||||
/**
|
||||
* Handles the building of each visualization
|
||||
*
|
||||
* @return {Function} Returns an Object of Handler types
|
||||
*/
|
||||
return {
|
||||
histogram: Private(require('components/vislib/lib/handler/types/column')),
|
||||
line: Private(require('components/vislib/lib/handler/types/column')),
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ define(function (require) {
|
|||
var AxisTitle = Private(require('components/vislib/lib/axis_title'));
|
||||
var ChartTitle = Private(require('components/vislib/lib/chart_title'));
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
return function (vis) {
|
||||
var data = new Data(injectZeros(vis.data), vis._attr);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@ define(function (require) {
|
|||
var Legend = Private(require('components/vislib/lib/legend'));
|
||||
var ChartTitle = Private(require('components/vislib/lib/chart_title'));
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
return function (vis) {
|
||||
var data = new Data(vis.data, vis._attr);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ define(function (require) {
|
|||
|
||||
var layoutType = Private(require('components/vislib/lib/layout/layout_types'));
|
||||
|
||||
/*
|
||||
/**
|
||||
* The Layout Constructor is responsible for rendering the visualization
|
||||
* layout, which includes all the DOM div elements.
|
||||
* Input:
|
||||
|
|
@ -12,6 +12,15 @@ define(function (require) {
|
|||
* 2. data - data is bound to the div element
|
||||
* 3. chartType (e.g. 'histogram') - specifies the layout type to grab
|
||||
*/
|
||||
/**
|
||||
* Builds the visualization DOM layout
|
||||
*
|
||||
* @class Layout
|
||||
* @constructor
|
||||
* @param el {HTMLElement} HTML element to which the chart will be appended
|
||||
* @param data {Object} Elasticsearch query results for this specific chart
|
||||
* @param chartType {Object} Reference
|
||||
*/
|
||||
function Layout(el, data, chartType) {
|
||||
if (!(this instanceof Layout)) {
|
||||
return new Layout(el, data, chartType);
|
||||
|
|
@ -23,25 +32,26 @@ define(function (require) {
|
|||
}
|
||||
|
||||
// Render the layout
|
||||
// Remove all elements from the current visualization
|
||||
// Create the layout
|
||||
Layout.prototype.render = function () {
|
||||
// Remove all elements from the current visualization
|
||||
this.removeAll(this.el);
|
||||
|
||||
// Create the layout
|
||||
this.createLayout(this.layoutType);
|
||||
};
|
||||
|
||||
// Create the layout based on the json array provided
|
||||
// for each object in the layout array, call the layout function
|
||||
Layout.prototype.createLayout = function (arr) {
|
||||
var self = this;
|
||||
|
||||
// for each object in the layout array, call the layout function
|
||||
return _(arr).forEach(function (obj) {
|
||||
self.layout(obj);
|
||||
});
|
||||
};
|
||||
|
||||
// Appends a DOM element based on the object keys
|
||||
// check to see if reference to DOM element is string but not class selector
|
||||
// Create a class selector
|
||||
Layout.prototype.layout = function (obj) {
|
||||
if (!obj.parent) {
|
||||
throw new Error('No parent element provided');
|
||||
|
|
@ -55,28 +65,25 @@ define(function (require) {
|
|||
throw new Error(obj.type + ' must be a string');
|
||||
}
|
||||
|
||||
// check to see if reference to DOM element is string but not class selector
|
||||
if (typeof obj.parent === 'string' && obj.parent.charAt(0) !== '.') {
|
||||
// Create a class selector
|
||||
obj.parent = '.' + obj.parent;
|
||||
}
|
||||
|
||||
// append child
|
||||
var childEl = this.appendElem(obj.parent, obj.type, obj.class);
|
||||
|
||||
if (obj.datum) {
|
||||
// Bind datum to the element
|
||||
childEl.datum(obj.datum);
|
||||
}
|
||||
|
||||
if (obj.splits) {
|
||||
// Call the split on its obj.class
|
||||
d3.select(this.el).select('.' + obj.class).call(obj.splits);
|
||||
d3.select(this.el)
|
||||
.select('.' + obj.class)
|
||||
.call(obj.splits);
|
||||
}
|
||||
|
||||
if (obj.children) {
|
||||
// Creating the parent elem for the child nodes
|
||||
var newParent = d3.select(this.el).select('.' + obj.class)[0][0];
|
||||
var newParent = d3.select(this.el)
|
||||
.select('.' + obj.class)[0][0];
|
||||
|
||||
_.forEach(obj.children, function (obj) {
|
||||
if (!obj.parent) {
|
||||
|
|
@ -84,7 +91,6 @@ define(function (require) {
|
|||
}
|
||||
});
|
||||
|
||||
// Recursively pass children to createLayout
|
||||
this.createLayout(obj.children);
|
||||
}
|
||||
|
||||
|
|
@ -101,16 +107,20 @@ define(function (require) {
|
|||
// Create a DOM reference with a d3 selection
|
||||
// Need to make sure that the `el` is bound to this object
|
||||
// to prevent it from being appended to another Layout
|
||||
el = d3.select(this.el).select(el)[0][0];
|
||||
el = d3.select(this.el)
|
||||
.select(el)[0][0];
|
||||
}
|
||||
|
||||
return d3.select(el).append(type)
|
||||
return d3.select(el)
|
||||
.append(type)
|
||||
.attr('class', className);
|
||||
};
|
||||
|
||||
// Removes all DOM elements from `el`
|
||||
Layout.prototype.removeAll = function (el) {
|
||||
return d3.select(el).selectAll('*').remove();
|
||||
return d3.select(el)
|
||||
.selectAll('*')
|
||||
.remove();
|
||||
};
|
||||
|
||||
return Layout;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
define(function (require) {
|
||||
return function LayoutTypeFactory(Private) {
|
||||
// visLib layout types
|
||||
|
||||
/**
|
||||
* Provides the HTML layouts for each visualization class
|
||||
*
|
||||
* @module visLib
|
||||
* @submodule LayoutTypeFactory
|
||||
* @param Private {Service} Loads any function as an angular module
|
||||
* @return {Function} Returns an Object of HTML layouts for each visualization class
|
||||
*/
|
||||
return {
|
||||
histogram: Private(require('components/vislib/lib/layout/types/column_layout')),
|
||||
line: Private(require('components/vislib/lib/layout/types/column_layout')),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ define(function () {
|
|||
selection.each(function (data) {
|
||||
var div = d3.select(this)
|
||||
.attr('class', function () {
|
||||
// Determine the parent class
|
||||
if (data.rows) {
|
||||
return 'chart-wrapper-row';
|
||||
} else if (data.columns) {
|
||||
|
|
@ -23,7 +22,6 @@ define(function () {
|
|||
var charts = div.selectAll('charts')
|
||||
.append('div')
|
||||
.data(function (d) {
|
||||
// Determine the child class
|
||||
if (d.rows) {
|
||||
divClass = 'chart-row';
|
||||
return d.rows;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ define(function () {
|
|||
* `.x-axis-chart-title` element based on the data layout.
|
||||
* For example, if the data has rows, it returns the same number of
|
||||
* `.chart-title` elements as row objects.
|
||||
* if not data.rows or data.columns, return no chart titles
|
||||
*/
|
||||
return function (selection) {
|
||||
selection.each(function (data) {
|
||||
|
|
@ -21,17 +22,14 @@ define(function () {
|
|||
.attr('class', 'chart-title');
|
||||
|
||||
if (data.rows) {
|
||||
// if rows remove the x axis chart title element
|
||||
d3.select('.x-axis-chart-title').remove();
|
||||
} else {
|
||||
// if columns, remove the y axis chart title element
|
||||
d3.select('.y-axis-chart-title').remove();
|
||||
}
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
// if not data.rows or data.columns, return no chart titles
|
||||
return d3.select(this).remove();
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
define(function () {
|
||||
return function XAxisSplitFactory(d3) {
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.x-axis-div-wrapper` element based on the data layout.
|
||||
* For example, if the data has rows, it returns the same number of
|
||||
* `.x-axis-div` elements as row objects.
|
||||
*/
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var div = d3.select(this);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
define(function () {
|
||||
return function YAxisSplitFactory(d3) {
|
||||
|
||||
/*
|
||||
* Adds div DOM elements to the `.y-axis-div-wrapper` element based on the data layout.
|
||||
* For example, if the data has rows, it returns the same number of
|
||||
* `.y-axis-div` elements as row objects.
|
||||
*/
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
var div = d3.select(this);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
define(function () {
|
||||
return function ChartSplitFactory(d3) {
|
||||
/*
|
||||
|
||||
/**
|
||||
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
|
||||
* For example, if the data has rows, it returns the same number of
|
||||
* `.chart` elements as row objects.
|
||||
*/
|
||||
|
||||
return function split(selection) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this)
|
||||
.attr('class', function () {
|
||||
// Determine the parent class
|
||||
if (data.rows) {
|
||||
return 'chart-wrapper-row';
|
||||
} else if (data.columns) {
|
||||
|
|
@ -23,7 +24,6 @@ define(function () {
|
|||
var charts = div.selectAll('charts')
|
||||
.append('div')
|
||||
.data(function (d) {
|
||||
// Determine the child class
|
||||
if (d.rows) {
|
||||
divClass = 'chart-row';
|
||||
return d.rows;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
define(function () {
|
||||
return function ChartTitleSplitFactory(d3) {
|
||||
/*
|
||||
|
||||
/**
|
||||
* Adds div DOM elements to either the `.y-axis-chart-title` element or the
|
||||
* `.x-axis-chart-title` element based on the data layout.
|
||||
* For example, if the data has rows, it returns the same number of
|
||||
* `.chart-title` elements as row objects.
|
||||
* if not data.rows or data.columns, return no chart titles
|
||||
*/
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function (data) {
|
||||
var div = d3.select(this);
|
||||
|
|
@ -21,17 +24,14 @@ define(function () {
|
|||
.attr('class', 'chart-title');
|
||||
|
||||
if (data.rows) {
|
||||
// if rows remove the x axis chart title element
|
||||
d3.select('.x-axis-chart-title').remove();
|
||||
} else {
|
||||
// if columns, remove the y axis chart title element
|
||||
d3.select('.y-axis-chart-title').remove();
|
||||
}
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
// if not data.rows or data.columns, return no chart titles
|
||||
return d3.select(this).remove();
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ define(function (require) {
|
|||
var xAxisSplit = Private(require('components/vislib/lib/layout/splits/column_chart/x_axis_split'));
|
||||
var chartTitleSplit = Private(require('components/vislib/lib/layout/splits/column_chart/chart_title_split'));
|
||||
|
||||
/*
|
||||
/**
|
||||
* Specifies the visualization layout for column charts.
|
||||
*
|
||||
* This is done using an array of objects. The first object has
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ define(function (require) {
|
|||
var chartSplit = Private(require('components/vislib/lib/layout/splits/pie_chart/chart_split'));
|
||||
var chartTitleSplit = Private(require('components/vislib/lib/layout/splits/pie_chart/chart_title_split'));
|
||||
|
||||
/*
|
||||
/**
|
||||
* Specifies the visualization layout for column charts.
|
||||
*
|
||||
* This is done using an array of objects. The first object has
|
||||
|
|
|
|||
|
|
@ -3,12 +3,9 @@ define(function (require) {
|
|||
var _ = require('lodash');
|
||||
var legendHeaderTemplate = _.template(require('text!components/vislib/partials/legend_header.html'));
|
||||
|
||||
var Tooltip = Private(require('components/vislib/lib/tooltip'));
|
||||
|
||||
// Dynamically adds css file
|
||||
require('css!components/vislib/styles/main');
|
||||
|
||||
/*
|
||||
/**
|
||||
* Append legend to the visualization
|
||||
* arguments:
|
||||
* el => reference to DOM element
|
||||
|
|
@ -16,6 +13,7 @@ define(function (require) {
|
|||
* color => color function to assign colors to labels
|
||||
* _attr => visualization attributes
|
||||
*/
|
||||
|
||||
function Legend(vis, el, labels, color, _attr) {
|
||||
if (!(this instanceof Legend)) {
|
||||
return new Legend(vis, el, labels, color, _attr);
|
||||
|
|
@ -26,7 +24,6 @@ define(function (require) {
|
|||
this.labels = labels;
|
||||
this.color = color;
|
||||
this._attr = _.defaults(_attr || {}, {
|
||||
// Legend specific attributes
|
||||
'legendClass' : 'legend-col-wrapper',
|
||||
'blurredOpacity' : 0.3,
|
||||
'focusOpacity' : 1,
|
||||
|
|
@ -62,11 +59,9 @@ define(function (require) {
|
|||
.enter()
|
||||
.append('li')
|
||||
.attr('class', function (d) {
|
||||
// class names reflect the color assigned to the labels
|
||||
return 'color ' + self.colorToClass(args.color(d));
|
||||
})
|
||||
.html(function (d) {
|
||||
// return the appropriate color for each dot
|
||||
return '<span class="dots" style="background:' + args.color(d) + '"></span>' + d;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
define(function (require) {
|
||||
return function VisFactory(d3, Private) {
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
|
||||
var ResizeChecker = Private(require('components/vislib/lib/resize_checker'));
|
||||
|
|
@ -10,12 +9,13 @@ define(function (require) {
|
|||
var errors = require('errors');
|
||||
require('css!components/vislib/styles/main.css');
|
||||
|
||||
/*
|
||||
* Visualization controller. Exposed API for creating visualizations.
|
||||
* arguments:
|
||||
* $el => jquery reference to a DOM element
|
||||
* config => object of params for the chart.
|
||||
* e.g. type: 'column', addLegend: true, ...
|
||||
/**
|
||||
* Creates the visualizations.
|
||||
*
|
||||
* @class Vis
|
||||
* @constructor
|
||||
* @param $el {HTMLElement} jQuery selected HTML element
|
||||
* @param config {Object} Parameters that define the chart type and chart options
|
||||
*/
|
||||
_(Vis).inherits(Events);
|
||||
function Vis($el, config) {
|
||||
|
|
@ -35,7 +35,12 @@ define(function (require) {
|
|||
this.resizeChecker.on('resize', this.resize);
|
||||
}
|
||||
|
||||
// Exposed API for rendering charts.
|
||||
/**
|
||||
* Renders the visualization
|
||||
*
|
||||
* @method render
|
||||
* @param data {Object} Elasticsearch query results
|
||||
*/
|
||||
Vis.prototype.render = function (data) {
|
||||
var chartType = this._attr.type;
|
||||
|
||||
|
|
@ -43,14 +48,13 @@ define(function (require) {
|
|||
throw new Error('No valid data!');
|
||||
}
|
||||
|
||||
// Save data to this object and new up the Handler constructor
|
||||
this.data = data;
|
||||
this.handler = handlerTypes[chartType](this) || handlerTypes.column(this);
|
||||
|
||||
try {
|
||||
this.handler.render();
|
||||
} catch (error) {
|
||||
// if involving height and width of the container, log error to screen
|
||||
// If involving height and width of the container, log error to screen.
|
||||
// Because we have to wait for the DOM element to initialize, we do not
|
||||
// want to throw an error when the DOM `el` is zero
|
||||
if (error instanceof errors.ContainerTooSmall) {
|
||||
|
|
@ -61,7 +65,11 @@ define(function (require) {
|
|||
}
|
||||
};
|
||||
|
||||
// Resize the chart
|
||||
/**
|
||||
* Resizes the visualization
|
||||
*
|
||||
* @method resize
|
||||
*/
|
||||
Vis.prototype.resize = function () {
|
||||
if (!this.data) {
|
||||
// TODO: need to come up with a solution for resizing when no data is available
|
||||
|
|
@ -70,25 +78,38 @@ define(function (require) {
|
|||
this.render(this.data);
|
||||
};
|
||||
|
||||
// Destroy the chart
|
||||
/**
|
||||
* Destroys the visualization
|
||||
* Removes chart and all elements associated with it.
|
||||
* Remove event listeners and pass destroy call down to owned objects.
|
||||
*
|
||||
* @method destroy
|
||||
*/
|
||||
Vis.prototype.destroy = function () {
|
||||
// Removing chart and all elements associated with it
|
||||
d3.select(this.el).selectAll('*').remove();
|
||||
|
||||
// remove event listeners
|
||||
this.resizeChecker.off('resize', this.resize);
|
||||
|
||||
// pass destroy call down to owned objects
|
||||
this.resizeChecker.destroy();
|
||||
};
|
||||
|
||||
// Set attributes on the chart
|
||||
/**
|
||||
* Sets attributes on the visualization
|
||||
*
|
||||
* @method set
|
||||
* @param name {String} An attribute name
|
||||
* @param val {*} Value to which the attribute name is set
|
||||
*/
|
||||
Vis.prototype.set = function (name, val) {
|
||||
this._attr[name] = val;
|
||||
this.render(this.data);
|
||||
};
|
||||
|
||||
// Get attributes from the chart
|
||||
/**
|
||||
* Gets attributes from the visualization
|
||||
*
|
||||
* @method get
|
||||
* @param name {String} An attribute name
|
||||
* @returns {*} The value of the attribute name
|
||||
*/
|
||||
Vis.prototype.get = function (name) {
|
||||
return this._attr[name];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,9 +6,14 @@ define(function (require) {
|
|||
var Dispatch = Private(require('components/vislib/lib/dispatch'));
|
||||
var Tooltip = Private(require('components/vislib/lib/tooltip'));
|
||||
|
||||
/*
|
||||
* Base Class for all visualizations.
|
||||
* Exposes a render method.
|
||||
/**
|
||||
* The Base Class for all visualizations.
|
||||
*
|
||||
* @class Chart
|
||||
* @constructor
|
||||
* @param vis {Object} Reference to the Vis Class Constructor
|
||||
* @param el {HTMLElement} HTML element to which the chart will be appended
|
||||
* @param chartData {Object} Elasticsearch query results for this specific chart
|
||||
*/
|
||||
function Chart(handler, el, chartData) {
|
||||
if (!(this instanceof Chart)) {
|
||||
|
|
@ -23,18 +28,29 @@ define(function (require) {
|
|||
if (handler._attr.addTooltip) {
|
||||
var $el = this.handler.el;
|
||||
var formatter = this.handler.data.get('tooltipFormatter');
|
||||
// Add tooltip
|
||||
this.tooltip = new Tooltip($el, formatter, events);
|
||||
}
|
||||
|
||||
this._attr = _.defaults(handler._attr || {}, {});
|
||||
}
|
||||
|
||||
// Render the visualization.
|
||||
/**
|
||||
* Renders the chart(s)
|
||||
*
|
||||
* @method render
|
||||
* @returns {HTMLElement} Contains the D3 chart
|
||||
*/
|
||||
Chart.prototype.render = function () {
|
||||
return d3.select(this.chartEl).call(this.draw());
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a CSS class name
|
||||
*
|
||||
* @method colorToClass
|
||||
* @param label {String} Data point label
|
||||
* @returns {String} CSS class name
|
||||
*/
|
||||
Chart.prototype.colorToClass = function (label) {
|
||||
return 'color ' + Legend.prototype.colorToClass.call(null, label);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,12 +5,16 @@ define(function (require) {
|
|||
|
||||
var Chart = Private(require('components/vislib/visualizations/_chart'));
|
||||
var errors = require('errors');
|
||||
|
||||
// Dynamically adds css file
|
||||
require('css!components/vislib/styles/main');
|
||||
|
||||
/*
|
||||
* Column chart visualization => vertical bars, stacked bars
|
||||
/**
|
||||
* Vertical Bar Chart Visualization: renders vertical and/or stacked bars
|
||||
*
|
||||
* @class ColumnChart
|
||||
* @constructor
|
||||
* @param handler {Object} Reference to the Handler Class Constructor
|
||||
* @param el {HTMLElement} HTML element to which the chart will be appended
|
||||
* @param chartData {Object} Elasticsearch query results for this specific chart
|
||||
*/
|
||||
_(ColumnChart).inherits(Chart);
|
||||
function ColumnChart(handler, chartEl, chartData) {
|
||||
|
|
@ -18,6 +22,7 @@ define(function (require) {
|
|||
return new ColumnChart(handler, chartEl, chartData);
|
||||
}
|
||||
|
||||
// TODO: refactor
|
||||
var raw;
|
||||
var fieldIndex;
|
||||
|
||||
|
|
@ -36,7 +41,13 @@ define(function (require) {
|
|||
});
|
||||
}
|
||||
|
||||
// Stack data
|
||||
/**
|
||||
* Stacks chart data values
|
||||
*
|
||||
* @method stackData
|
||||
* @param data {Object} Elasticsearch query result for this chart
|
||||
* @returns {Array} Stacked data objects with x, y, and y0 values
|
||||
*/
|
||||
// TODO: refactor so that this is called from the data module
|
||||
ColumnChart.prototype.stackData = function (data) {
|
||||
var self = this;
|
||||
|
|
@ -53,6 +64,14 @@ define(function (require) {
|
|||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds SVG rects to Vertical Bar Chart
|
||||
*
|
||||
* @method addBars
|
||||
* @param svg
|
||||
* @param layers {Array}
|
||||
* @returns {D3.UpdateSelection}
|
||||
*/
|
||||
ColumnChart.prototype.addBars = function (svg, layers) {
|
||||
var self = this;
|
||||
var data = this.chartData;
|
||||
|
|
@ -64,7 +83,6 @@ define(function (require) {
|
|||
var layer;
|
||||
var bars;
|
||||
|
||||
// Data layers
|
||||
layer = svg.selectAll('.layer')
|
||||
.data(layers)
|
||||
.enter().append('g')
|
||||
|
|
@ -72,16 +90,13 @@ define(function (require) {
|
|||
return i;
|
||||
});
|
||||
|
||||
// Append the bars
|
||||
bars = layer.selectAll('rect')
|
||||
.data(function (d) {
|
||||
return d;
|
||||
});
|
||||
|
||||
// exit
|
||||
bars.exit().remove();
|
||||
|
||||
// enter
|
||||
bars.enter()
|
||||
.append('rect')
|
||||
.attr('class', function (d) {
|
||||
|
|
@ -91,7 +106,6 @@ define(function (require) {
|
|||
return color(self.fieldFormatter(d.label));
|
||||
});
|
||||
|
||||
// update
|
||||
bars
|
||||
.attr('x', function (d) {
|
||||
return xScale(d.x);
|
||||
|
|
@ -116,7 +130,6 @@ define(function (require) {
|
|||
return yScale(d.y0) - yScale(d.y0 + d.y);
|
||||
});
|
||||
|
||||
// Add tooltip
|
||||
if (isTooltip) {
|
||||
bars.call(tooltip.render());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ define(function (require) {
|
|||
var $ = require('jquery');
|
||||
|
||||
var Chart = Private(require('components/vislib/visualizations/_chart'));
|
||||
|
||||
// Dynamically adds css file
|
||||
require('css!components/vislib/styles/main');
|
||||
|
||||
_(LineChart).inherits(Chart);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
define(function (require) {
|
||||
return function VisTypeFactory(Private) {
|
||||
// visLib visualization types
|
||||
|
||||
/**
|
||||
* Provides the visualizations for the visLib
|
||||
*
|
||||
* @module visLib
|
||||
* @submodule VisTypeFactory
|
||||
* @param Private {Service} Loads any function as an angular module
|
||||
* @return {Function} Returns an Object of Visualization classes
|
||||
*/
|
||||
return {
|
||||
histogram: Private(require('components/vislib/visualizations/column_chart')),
|
||||
pie: Private(require('components/vislib/visualizations/pie_chart')),
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ define(function (require) {
|
|||
// This stores the Kibana revision number, @REV@ is replaced by grunt.
|
||||
.constant('kbnVersion', '@REV@')
|
||||
// The minimum Elasticsearch version required to run Kibana
|
||||
.constant('minimumElasticsearchVersion', '1.4.0.Beta1')
|
||||
.constant('minimumElasticsearchVersion', '1.3.1')
|
||||
// Use this for cache busting partials
|
||||
.constant('cacheBust', 'cache-bust=' + Date.now())
|
||||
// When we need to identify the current session of the app, ef shard preference
|
||||
|
|
|
|||
|
|
@ -247,11 +247,8 @@ define(function (require) {
|
|||
var getSeries;
|
||||
var columnsLabels;
|
||||
var rowsLabels;
|
||||
var seriesLabels;
|
||||
var columnsArr;
|
||||
var rowsArr;
|
||||
var seriesArr;
|
||||
var error;
|
||||
|
||||
beforeEach(function () {
|
||||
module('GetSeriesUtilService');
|
||||
|
|
@ -262,10 +259,8 @@ define(function (require) {
|
|||
getSeries = Private(require('components/vislib/components/labels/flatten_series'));
|
||||
columnsLabels = getSeries(columnsData);
|
||||
rowsLabels = getSeries(rowsData);
|
||||
seriesLabels = getSeries(seriesData);
|
||||
columnsArr = _.isArray(columnsLabels);
|
||||
rowsArr = _.isArray(rowsLabels);
|
||||
seriesArr = _.isArray(seriesLabels);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -281,10 +276,6 @@ define(function (require) {
|
|||
expect(rowsArr).to.be(true);
|
||||
});
|
||||
|
||||
it('should return an empty array if input is data.series', function () {
|
||||
expect(seriesLabels.length).to.be(0);
|
||||
});
|
||||
|
||||
it('should return an array of the same length as as input data.columns', function () {
|
||||
expect(columnsLabels.length).to.be(columnsData.columns.length);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ define(function (require) {
|
|||
beforeEach(function () {
|
||||
inject(function (Private) {
|
||||
uniqueKeys = Private(require('components/vislib/components/zero_injection/uniq_keys'));
|
||||
results = uniqueKeys(multiSeriesData.series);
|
||||
results = uniqueKeys(multiSeriesData);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue