â– "+line_series.name+"");
this.resetLabelHandlers();
return line_series;
};
/**
* @param {?Object} opts
* @return {Rubix.AreaSeries}
*/
Rubix.prototype.area_series = function(opts) {
opts = opts || {};
opts.name = opts.name || this._generate_name();
if(this.charts.hasOwnProperty(opts.name)) {
throw new Error("Series exists: " + name);
}
if(this.stacked) {
var stacked_area_series = new Rubix.StackedAreaSeries(this, opts);
this.charts[stacked_area_series.name] = stacked_area_series;
this.legend.append("â– "+stacked_area_series.name+"
");
this.resetLabelHandlers();
return stacked_area_series;
}
var area_series = new Rubix.AreaSeries(this, opts);
this.charts[area_series.name] = area_series;
this.legend.append("â– "+area_series.name+"
");
this.resetLabelHandlers();
return area_series;
};
Rubix.prototype._generate_name = function() {
return 'Series ' + (++this.chart_counter);
};
/**
* @param {?Object} opts
* @return {Rubix.ColumnSeries}
*/
Rubix.prototype.column_series = function(opts) {
opts = opts || {};
opts.name = opts.name || this._generate_name();
if(this.charts.hasOwnProperty(opts.name)) {
throw new Error("Series exists: " + name);
}
if(this.opts.invertAxes !== false || this.opts.axis.x.range !== 'column') {
this.opts.invertAxes = false;
this.opts.axis.x.type = 'ordinal';
this.opts.axis.x.range = 'column';
this.setup()
}
var column_series = new Rubix.ColumnSeries(this, opts);
this.charts[column_series.name] = column_series;
this.legend.append("â– "+column_series.name+"
");
this.resetLabelHandlers();
return column_series;
};
/**
* @param {?Object} opts
* @return {Rubix.ColumnSeries}
*/
Rubix.prototype.bar_series = function(opts) {
opts = opts || {};
opts.name = opts.name || this._generate_name();
if(this.charts.hasOwnProperty(opts.name)) {
throw new Error("Series exists: " + name);
}
if(this.opts.invertAxes !== true || this.opts.axis.x.range !== 'column') {
this.opts.invertAxes = true;
this.opts.axis.x.type = 'ordinal';
this.opts.axis.x.range = 'column';
this.setup()
}
var column_series = new Rubix.ColumnSeries(this, opts);
this.charts[column_series.name] = column_series;
this.legend.append("â– "+column_series.name+"
");
this.resetLabelHandlers();
return column_series;
};
window.Rubix = window.Rubix || {};
/**
* @param {Rubix} rubix
* @param {Object} opts
* @constructor
*/
Rubix.StackedAreaSeries = function(rubix, opts) {
this.opts = opts;
this.opts.color = this.opts.color || 'steelblue';
this.opts.marker = this.opts.marker || 'circle';
this.opts.fillopacity = this.opts.fillopacity || 0.5;
this.opts.strokewidth = this.opts.strokewidth || 1;
this.opts.noshadow = this.opts.noshadow || false;
this.show_markers = this.opts.show_markers;
if(!this.opts.hasOwnProperty('name')) throw new Error('StackedAreaSeries should have a \'name\' property');
this.name = this.opts.name;
this.chart_hidden = false;
this.temp_stack = [];
this.setup = false;
this.last_stack = [];
this.last_stack_name = '';
this.last_stack_added = false;
this._setup(rubix);
};
/**
* @param {Rubix} rubix
* @private
*/
Rubix.StackedAreaSeries.prototype._setup = function(rubix) {
this.rubix = rubix;
this.root = this.rubix.root;
this.data = this.rubix.data;
this.width = this.rubix.width;
this.height = this.rubix.height;
this.stack = this.rubix.area_stack;
this.offset = this.rubix.area_offset;
this.area_stack_data = this.rubix.area_stack_data;
this.stacked_area_series = this.rubix.root_stacked_area_series;
this.show_markers = (this.show_markers === undefined) ? this.rubix.show_markers : this.show_markers;
this.master_detail = this.rubix.master_detail;
if(this.master_detail) {
this.md_root = this.rubix.md_root;
}
if(!this.id) {
this.id = this.rubix.uid('stacked-area');
}
/** separator */
var self = this;
this.line = d3.svg.line();
this.line.defined(function(d) {
if(self.rubix.offset === 'expand') {
if(d.y_new === 0 && d.y0 === 1) {
return false;
}
return true;
}
return d.y_new !== null && d.x !== null;
});
if(this.rubix.opts.invertAxes) {
this.line.x(function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
return 0;
}
return self.rubix.x(val);
});
this.line.y(function(d) {
if(self.rubix.axis.y.range === 'column' || self.rubix.axis.y.range === 'bar') {
return self.rubix.y(d.x) + self.rubix.y.rangeBand()/2;
}
return self.rubix.y(d.x);
});
this.line.interpolate(this.rubix.interpolate);
} else {
this.line.x(function(d) {
if(self.rubix.axis.x.range === 'column' || self.rubix.axis.x.range === 'bar') {
return self.rubix.x(d.x) + self.rubix.x.rangeBand()/2;
}
return self.rubix.x(d.x);
});
this.line.y(function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
return 0;
}
return self.rubix.y(val);
});
this.line.interpolate(this.rubix.interpolate);
}
this.area = d3.svg.area();
this.area.defined(this.line.defined());
if(this.rubix.opts.invertAxes) {
this.area.x0(function(d) {
var val = d.y0;
if(isNaN(val)) {
return 0;
}
return self.rubix.x(val);
});
this.area.x1(function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
return 0;
}
return self.rubix.x(val);
});
this.area.y(function(d) {
if(self.rubix.axis.y.range === 'column' || self.rubix.axis.y.range === 'bar') {
return self.rubix.y(d.x) + self.rubix.y.rangeBand()/2;
}
return self.rubix.y(d.x);
});
this.area.interpolate(this.rubix.interpolate);
} else {
this.area.x(function(d) {
if(self.rubix.axis.x.range === 'column' || self.rubix.axis.x.range === 'bar') {
return self.rubix.x(d.x) + self.rubix.x.rangeBand()/2;
}
return self.rubix.x(d.x);
});
this.area.y0(function(d) {
var val = d.y0;
if(isNaN(val)) {
return 0;
}
return self.rubix.y(val);
});
this.area.y1(function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
return 0;
}
return self.rubix.y(val);
});
this.area.interpolate(this.rubix.interpolate);
}
if(this.master_detail) {
this.master_line = d3.svg.line();
this.master_line.defined(function(d) {
if(self.rubix.area_offset === 'expand') {
if(d.y_new === 0 && d.y0 === 1) {
return false;
}
return true;
}
return d.y_new !== null && d.x !== null;
});
this.master_line.x(function(d) {
return self.rubix.x2(d.x);
});
this.master_line.y(function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
return 0;
}
return self.rubix.y2(val);
});
this.master_line.interpolate(this.rubix.interpolate);
this.master_area = d3.svg.area();
this.master_area.defined(this.master_line.defined());
this.master_area.x(function(d) {
return self.rubix.x2(d.x);
});
this.master_area.y0(function(d) {
var val = d.y0;
if(isNaN(val)) {
return 0;
}
return self.rubix.y2(val);
});
this.master_area.y1(function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
return 0;
}
return self.rubix.y2(val);
});
this.master_area.interpolate(this.rubix.interpolate);
}
};
// Alias for draw
Rubix.StackedAreaSeries.prototype.redraw = function(rubix) {
this._setup(rubix);
this.draw();
};
Rubix.StackedAreaSeries.prototype.noRedraw = function(rubix) {
this._setup(rubix);
this.draw(true);
};
/**
* @param {Array|Object} data
*/
Rubix.StackedAreaSeries.prototype.addData = function(data) {
this.rubix.data_changed = true;
if(!(data instanceof Array)) {
if(!(data instanceof Object)) {
throw new Error("Data must be an array or object");
} else {
if(!(data.hasOwnProperty('x') || data.hasOwnProperty('y'))) {
throw new Error("Object must be in the form: {x: ..., y: ...}");
}
data = [data];
}
}
if(!data.length) return;
if(!this.rubix.opts.noSort) {
data.sort(function(a, b) {
if(a.x > b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
}
this.data[this.name] = data;
this.area_stack_data.push({
key: this.name,
color: this.opts.color,
values: this.data[this.name],
fillopacity: this.opts.fillopacity,
strokewidth: this.opts.strokewidth,
orderKey: this.area_stack_data.length
});
this.rubix.resetAxis(true);
this.rubix.forceRedraw();
this._animate_draw();
};
Rubix.StackedAreaSeries.prototype.draw = function(forced) {
if(!this.name) return;
if(!this.data) return;
if(!this.data.hasOwnProperty(this.name)) return;
if(!this.data[this.name].length) return;
var oldLayers = this.layers;
try {
this.layers = this.stack(this.area_stack_data);
} catch(e) {
// data un-available. retaining old layer.
this.layers = oldLayers;
}
var self = this;
var isConstructed = this.stacked_area_series.selectAll('.'+this.id)[0].length;
if(!isConstructed) {
try {
this.stacked_area_series.selectAll('.layer').remove();
this.stacked_area_series.selectAll('.' + this.id + '-line').remove();
var p = this.stacked_area_series.selectAll('.layer').data(this.layers, function(d) {
return d.key;
});
var createdPath = p.enter().append('path');
createdPath.attr('class', 'layer')
.attr('d', function(d) { return self.area(d.values); })
.attr('fill', function(d) { return d.color; })
.attr('fill-opacity', function(d) {
return d.fillopacity
})
.attr('stroke', 'none');
p.exit().remove();
if(this.master_detail) {
createdPath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
createdPath.classed('clipped', true);
if(!forced) {
var md_p = this.md_root.select('.md-layers > .md_stacked_area_series').selectAll('.layer').data(this.layers, function(d) {
return d.key;
});
var createdMdPath = md_p.enter().append('path');
createdMdPath.attr('class', 'layer')
.attr('d', function(d) { return self.master_area(d.values); })
.attr('fill', function(d) { return d.color; })
.attr('fill-opacity', function(d) {
return d.fillopacity;
})
.attr('stroke', 'none');
createdMdPath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
createdMdPath.classed('clipped', true);
md_p.exit().remove();
}
}
for(var i=0; i .md_stacked_area_series').selectAll('.' + this.id + '-line').remove();
this.masterLinePath = this.md_root.select('.md-layers > .md_stacked_area_series').append('path').datum(datum).attr('class', this.id+'-line').attr('stroke', this.opts.color).attr('fill', 'none').attr('stroke-linecap', 'round').attr('d', this.master_line).attr('stroke-width', 2 * this.opts.strokewidth);
this.masterLinePath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.masterLinePath.classed('clipped', true);
if(this.dataChanged) {
this.rubix.resetExtent();
this.dataChanged = false;
}
}
if(!this.opts.noshadow) {
this.strokePath1.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.strokePath2.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.strokePath3.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
}
this.linePath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
if(!this.opts.noshadow) {
this.strokePath1.classed('clipped', true);
this.strokePath2.classed('clipped', true);
this.strokePath3.classed('clipped', true);
}
this.linePath.classed('clipped', true);
}
break;
}
}
} catch(e) {
// do nothing
}
this.setup = true;
} else {
this.rubix.runCommand('globalRedraw');
}
this.rubix.resetFocus(forced);
};
/**
* @param {Object} data
* @param {?Boolean} shift
* @param {?Boolean} noRedraw
*/
Rubix.StackedAreaSeries.prototype.updatePoint = function(data, shift, noRedraw) {
this.addPoint(data, shift, noRedraw);
};
/**
* @param {*} ref
* @param {?Boolean} noRedraw
*/
Rubix.StackedAreaSeries.prototype.removePoint = function(ref, noRedraw) {
if(this.chart_hidden) {
this.temp_stack.push({
type: 'removePoint',
ref: ref
});
return;
}
if(!this.data[this.name]) {
this.data[this.name] = [];
}
var removed = false, pos = 0;
for(var i=0; i b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
if(this.rubix.opts.interval) {
if(this.rubix.opts.interval < this.data[this.name].length) {
this.data[this.name].shift();
}
} else {
if(shift) {
this.data[this.name].shift();
}
}
var max_elems = d3.max(this.area_stack_data, function(d) {
return d.values.length;
});
for(var i=0; i1) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
if(this.temp_stack.length) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
};
Rubix.StackedAreaSeries.prototype.globalRedraw = function(rubix) {
this.stacked_area_series.select('.'+this.id+'-line').attr('d', this.line);
};
Rubix.StackedAreaSeries.prototype.forceRedraw = function(rubix) {
this.redraw(rubix);
};
Rubix.StackedAreaSeries.prototype.on_complete_draw = function() {
if(!this.setup) return;
var self = this;
if(this.opts.marker !== undefined && this.show_markers) {
if(this.master_detail) {
this.rubix.symbols.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip-symbols)');
}
this.markers = this.rubix.symbols.selectAll('.'+this.id+'-marker');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var symbolType = this.markers.data(this.data[this.name]);
var symbolPath = symbolType.enter().append('path');
symbolPath.attr('d', symbol)
.attr('class', this.id + '-marker')
.attr('fill', this.opts.color)
.style('display', function(d) {
if(self.rubix.area_offset === 'expand') {
if(d.y_new === 0 && d.y0 === 1) {
return 'none';
}
return null;
}
if(d.y_new === null) {
return 'none';
}
return null;
})
.attr('stroke', 'white')
.attr('transform', function(d) {
var val = d.y0 + d.y_new;
if(isNaN(val)) {
val = 0;
}
if(self.rubix.opts.invertAxes) {
var _y = self.rubix.y(d.x);
var _x = self.rubix.x(val);
if(self.rubix.axis.y.range === 'column' || self.rubix.axis.y.range === 'bar') {
_y += self.rubix.y.rangeBand()/2;
}
} else {
var _y = self.rubix.y(val);
var _x = self.rubix.x(d.x);
if(self.rubix.axis.x.range === 'column' || self.rubix.axis.x.range === 'bar') {
_x += self.rubix.x.rangeBand()/2;
}
}
return 'translate('+_x+','+_y+')';
});
symbolType.exit().remove();
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
}
};
Rubix.StackedAreaSeries.prototype.setupFocus = function() {
if(!this.setup) return;
if(this.focus) this.focus.remove();
this.focus = this.rubix.focus_group.append('g');
this.focus.attr('class', 'focus');
this.focus.style('display', 'none');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var path = this.focus.append('path').attr('d', symbol).attr('fill', this.opts.color).attr('stroke', 'white').attr('stroke-width', 2);
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
};
Rubix.StackedAreaSeries.prototype.on_focus = function() {
if(!this.setup) return;
this.linePath.attr('stroke-width', 2 * this.opts.strokewidth);
};
Rubix.StackedAreaSeries.prototype.off_focus = function() {
if(!this.setup) return;
this.linePath.attr('stroke-width', 2 * this.opts.strokewidth);
};
window.Rubix = window.Rubix || {};
var slugify = function(text) {
text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
text = text.replace(/-/gi, "_");
text = text.replace(/\s/gi, "-");
return text;
};
/**
* @param {string} id
* @param {Object} opts
* @return {Rubix.PieDonut}
*/
Rubix.Pie = function(id, opts) {
return new Rubix.PieDonut(id, 'pie', opts);
};
/**
* @param {string} id
* @param {Object} opts
* @return {Rubix.PieDonut}
*/
Rubix.Donut = function(id, opts) {
return new Rubix.PieDonut(id, 'donut', opts);
};
/**
* @private
* @param {string} id
* @param {Rubix.Pie || Rubix.Donut} type
* @param {Object} opts
* @constructor
*/
Rubix.PieDonut = function(id, type, opts) {
opts = opts || {};
this.type = type;
this.is_touch_device = 'ontouchstart' in document.documentElement;
this.legend_hidden = {};
this.chart_counter = 0;
this.master_id = this.uid('master_id');
this.area_stack_data_stack = [];
this.column_stack_data_stack = [];
this.root_elem = $(id);
this.root_elem.css('position', 'relative');
this.root_elem.addClass('rubixccnium-main-chart');
this.root_elem.append('');
this.root_elem.append('');
this.root_elem.append('');
this.root_elem.append('');
this.root_elem.append('');
var width = opts.width || '100%';
var height = opts.height || 150;
this.elem_width = width, this.elem_height = height;
this.root_elem.width(width).height(height);
this.elem = this.root_elem.find('.rubixccnium-chart');
this.tooltip = this.root_elem.find('.rubixccnium-tooltip');
this.tooltip.hide();
this.tooltip.html("");
opts.tooltip = opts.tooltip || {};
this.tooltip.css({
'font-family': 'Lato, "Lucida Grande", Arial, Helvetica, sans-serif',
'font-size': '12px',
'position': 'absolute',
'background': 'white',
'color': '#89949B',
'display': 'none',
'padding': '5px 15px',
'pointer-events': 'none',
'border-radius': '5px',
'z-index': 100,
'min-height': 50,
'user-select': 'none',
'cursor': 'default',
'border': '3px solid ' + (opts.tooltip.color ? opts.tooltip.color : '#89949B'),
'box-shadow': 'rgba(0, 0, 0, 0.2) 2px 4px 8px',
'background': 'white'
});
opts.legend = opts.legend || {};
this.legend = this.root_elem.find('.rubixccnium-legend');
this.legend.css({
'font-family': "Lato, 'Lucida Grande', Arial, Helvetica, sans-serif",
'text-align': 'center',
'margin-top': opts.legend.top || '-10px',
'margin-bottom': opts.legend.bottom || '5px',
'user-select': 'none',
'display': opts.hideLegend ? 'none' : 'block'
});
this.title = this.root_elem.find('.rubixccnium-title');
this.subtitle = this.root_elem.find('.rubixccnium-subtitle');
this.title.css({
'font-family': "Lato, 'Lucida Grande', Arial, Helvetica, sans-serif",
'text-align': 'center',
'user-select': 'none',
'font-weight': 'bold',
'font-size': '16px',
'color': 'steelblue',
'margin-top': '10px',
'cursor': 'default'
});
this.subtitle.css({
'font-family': "Lato, 'Lucida Grande', Arial, Helvetica, sans-serif",
'text-align': 'center',
'user-select': 'none',
'font-size': '10px',
'color': 'steelblue',
'margin-top': '10px',
'cursor': 'default',
'opacity': 0.8
});
var self = this;
this.elem.css({
'width': '100%',
'height': parseInt(this.root_elem.get(0).style.height),
'user-select': 'none',
'cursor': 'default'
});
this.root_elem.css('height', '100%');
this.opts = opts || {};
this.data = [];
this.is_touch_device = 'ontouchstart' in document.documentElement;
this.d3_eventSource = function () {
var e = d3.event, s;
while (s = e.sourceEvent) e = s;
return e;
}
this.last_render = null;
this.data_changed = false;
this.setup();
};
Rubix.PieDonut.prototype.setup = function() {
this._setupOpts();
this._setupOnce();
this._setupRedraw();
this.draw();
};
/** @private */
Rubix.PieDonut.prototype._setupOpts = function() {
this.opts.theme_style = this.opts.theme_style || 'light';
this.opts.theme_style_color = (this.opts.theme_style === 'light') ? '#C0D0E0' : '#555';
this.opts.theme_focus_line_color = (this.opts.theme_style === 'light') ? '#C0D0E0' : '#888';
this.opts.legend_color_brightness = this.opts.legend_color_brightness || 0.5;
this.opts.global_legend_color = this.opts.global_legend_color || false;
this.opts.titleColor = this.opts.titleColor || 'steelblue';
this.opts.subtitleColor = this.opts.subtitleColor || 'steelblue';
this.title.css('color', this.opts.titleColor);
this.subtitle.css('color', this.opts.subtitleColor);
if(this.opts.theme_style === 'dark') {
this.tooltip.css({
"color": "#aaa",
"font-weight": "bold",
"border": "1px solid #222",
"background-color": "#303030"
});
}
this.opts.margin = this.opts.margin || {};
this.margin = {
top : this.opts.margin.top || 25,
left : this.opts.margin.left || 25,
right : this.opts.margin.right || 25,
bottom : this.opts.margin.bottom || 25
};
this.opts.tooltip = this.opts.tooltip || {};
this.opts.tooltip.format = this.opts.tooltip.format || {};
this.tooltipFormatter = {
format: {
x: this.opts.tooltip.format.x || '',
y: this.opts.tooltip.format.y || ''
}
}
this.resize = this.opts.resize || 'throttled';
this.opts.title = this.opts.title || '';
this.opts.subtitle = this.opts.subtitle || '';
this.title.html(this.opts.title);
this.subtitle.html(this.opts.subtitle);
if(this.opts.title.length || this.opts.subtitle.length) {
this.elem.css('margin-top', '-20px');
}
(this.opts.title.length) ? this.title.show() : this.title.hide();
(this.opts.subtitle.length) ? this.subtitle.show() : this.subtitle.hide();
};
/** @private */
Rubix.PieDonut.prototype._setupOnce = function() {
// Add Pie Stack data here.
};
Rubix.PieDonut.prototype._setupRedraw = function() {
var self = this;
$(window).on('orientationchange', function() {
self.draw();
});
$(window).on('rubix.redraw.'+this.master_id, function() {
self.draw();
});
switch(this.resize) {
case 'always':
$(window).on('resize', function() {
self.draw();
});
break;
case 'debounced':
$(window).on('debouncedresize', function() {
self.draw();
});
break;
case 'throttled':
$(window).on('throttledresize', function() {
self.draw();
});
break;
default:
throw new Error('Unknown resize type!');
break;
}
};
Rubix.PieDonut.prototype.draw = function() {
this._draw();
};
/**
* @private
*/
Rubix.PieDonut.prototype._draw = function() {
this._cleanElement();
this._setSize();
this._setupCanvas();
this._setupRoot();
this._setupSeries();
this.final_draw();
};
/** @private */
Rubix.PieDonut.prototype._cleanElement = function() {
this.elem.children().remove();
};
/** @private */
Rubix.PieDonut.prototype._setSize = function() {
this.outerWidth = this.elem.width();
this.outerHeight = this.elem.height();
this.width = this.outerWidth - this.margin.left - this.margin.right;
this.height = this.outerHeight - this.margin.top - this.margin.bottom;
this.innerRadius = 0;
this.outerRadius = (Math.min(this.width, this.height) * .5) - 10;
if(this.type === 'donut') {
this.innerRadius = this.outerRadius * .6;
}
};
/** @private */
Rubix.PieDonut.prototype._setupCanvas = function() {
this.elem.html('');
this.canvas = d3.select(this.elem.get(0)).append('svg');
this.canvas.attr('width', this.outerWidth);
this.canvas.attr('height', this.outerHeight);
this.canvas.append('desc').text("Powered by RubixÆžium");
};
/** @private */
Rubix.PieDonut.prototype._setupRoot = function() {
this.root = this.canvas.append('g');
this.root.attr('width', this.width);
this.root.attr('height', this.height);
this.root.attr('transform', 'translate('+this.margin.left+','+this.margin.top+')');
if(!this.hasData) {
this.canvas.append('text').attr('class', 'noData').attr('font-size', '30px').attr('text-anchor', 'middle').attr('transform', 'translate('+this.outerWidth/2+','+this.outerHeight/2+')').attr('font-family', 'Lato, "Lucida Grande", Arial, Helvetica, sans-serif').text("No Data");
} else {
this.canvas.select('.noData').style('display', 'none');
}
};
Rubix.PieDonut.prototype._setupSeries = function() {
this.root_piedonut_series = this.root.append('g').attr('class', 'piedonut_series').attr('transform', "translate(" + this.width / 2 + "," + this.height / 2 + ")");
};
Rubix.PieDonut.prototype.uid = function(type) {
return 'rubixcc-pie-donut-' + type +'-' + Math.floor(2147483648*Math.random()).toString(36);
};
Rubix.PieDonut.prototype.addData = function(data) {
this.data_changed = true;
data.forEach(function(d) {
d.value = +d.value;
});
this.data = data;
this._setupLegend();
this.final_draw('launch');
};
Rubix.PieDonut.prototype._setupLegend = function() {
var self = this;
this.legend.children().remove();
for(var i=0; iâ– "+this.data[i].name+"");
}
$('.'+this.master_id+'-legend-labels').css({
'opacity': 0.9
});
for(var id in this.legend_hidden) {
var name = this.legend_hidden[id];
$('[data-name='+name+']').css({
'opacity': 0.2
}).addClass('toggle');
}
$('.'+this.master_id+'-legend-labels').off().on({
'hover': function(e) {
var hasClass = $(this).hasClass('toggle');
var name = $(this).attr('data-name');
var id = '#'+self.master_id+'-'+slugify(name);
if(hasClass) return;
switch(e.type) {
case 'mouseenter':
$(this).css({
'opacity': 1
});
d3.select(id).node().__onmouseover(e);
break;
case 'mouseleave':
$(this).css({
'opacity': 0.9
});
d3.select(id).node().__onmouseout(e)
break;
default:
break;
}
},
'click': function(e) {
var hasClass = $(this).hasClass('toggle');
var name = $(this).attr('data-name');
var id = '#'+self.master_id+'-'+slugify(name);
if(!hasClass) {
$(this).css({
'opacity': 0.2
});
$(this).addClass('toggle');
$(id).fadeOut();
self.legend_hidden[id] = name;
} else {
$(this).css({
'opacity': 1
});
$(this).removeClass('toggle');
$(id).fadeIn();
delete self.legend_hidden[id];
}
}
});
};
Rubix.PieDonut.prototype.final_draw = function(animate) {
var self = this;
if(this.data.length) {
this.canvas.select('.noData').style('display', 'none');
}
var arc = d3.svg.arc();
arc.innerRadius(this.innerRadius);
arc.outerRadius(this.outerRadius);
var pie = d3.layout.pie();
pie.sort(null);
pie.value(function(d) {
return d.value;
});
var main = this.root_piedonut_series.selectAll('.arc')
.data(pie(this.data), function(d) {
return d.data.name;
});
var g = main.enter().append('g')
.attr('class', 'arc').style('position', 'relative');
var color = d3.scale.category20();
var path = g.attr('id', function(d) {
return self.master_id+'-'+slugify(d.data.name);
}).style("fill", function(d, i) { return d.data.color; }).style('stroke', 'white').append("path").attr("d", function(d) {
return arc({
startAngle: 0,
endAngle: 0
});
})
if(animate === 'launch') {
this.old_pie_data = pie(this.data);
setTimeout(function() {
path.transition().attrTween('d', function(d) {
var i = d3.interpolate({
startAngle: 0,
endAngle: 0
}, {
startAngle: d.startAngle,
endAngle: d.endAngle
});
return function(t) {
return arc(i(t));
}
}).duration(500);
}, 15);
} else if(animate === 'add') {
var t = main.transition().duration(500).each('end', function() {
self.old_pie_data = pie(self.data);
});
t.select('path').attrTween('d', function(d, k) {
var startAngle = 0;
var endAngle = 0;
try {
startAngle = self.old_pie_data[k].startAngle;
endAngle = self.old_pie_data[k].endAngle;
} catch(e) {
startAngle = self.old_pie_data[self.old_pie_data.length-1].startAngle;
endAngle = self.old_pie_data[self.old_pie_data.length-1].endAngle;
// do nothing
}
var i = d3.interpolate({
startAngle: startAngle,
endAngle: endAngle
}, {
startAngle: d.startAngle,
endAngle: d.endAngle
});
if(d.data.hasOwnProperty('_remove')) {
self.data.splice(k, 1);
}
self._setupLegend();
return function(t) {
return arc(i(t));
}
});
} else {
this.old_pie_data = pie(this.data);
path.attr('d', function(d) {
return arc(d);
});
}
var mouseover = 'mouseover',
mousemove = 'mousemove',
mouseout = 'mouseout';
if(this.is_touch_device) {
mouseover = 'touchstart';
mousemove = 'touchstart';
mouseout = 'touchend';
}
var timer;
g.on(mouseover, function(d) {
clearTimeout(timer);
var centroid = arc.centroid(d);
var h = Math.sqrt(Math.pow(centroid[0], 2) + Math.pow(centroid[1], 2));
var x = centroid[0]/h * 8;
var y = centroid[1]/h * 8;
if(!self.is_touch_device) {
d3.select(this).transition().duration(150).attr('transform', "translate(" + [x, y] + ")");
}
});
g.on(mousemove, function(d, i) {
clearTimeout(timer);
if(self.is_touch_device) {
var coordinates = d3.touches(this, self.d3_eventSource().changedTouches)[0];
} else {
var coordinates = d3.mouse(this);
}
self.tooltip.css('display', useTable);
self.tooltip.css({
'left': (self.width/2 - self.margin.left/2) + coordinates[0],
'top' : (self.height/2 - self.margin.top/2) + coordinates[1]
});
if(self.opts.tooltip.customPlaceholder) {
var tip = self.opts.tooltip.customPlaceholder.replace("%n", d.data.name);
tip = tip.replace("%v", d.data.value);
tip = tip.replace("%c", d.data.color);
self.tooltip.html(tip);
} else {
self.tooltip.html("â– "+d.data.name+" : "+d.data.value+"
");
}
d3.select(this).style('fill', d.data.color);
});
g.on(mouseout, function(d, i) {
var $this = this;
if(self.is_touch_device) {
timer = setTimeout(function() {
self.tooltip.hide();
}, 3000);
setTimeout(function() {
d3.select($this).style('fill', d.data.color);
}, 3000);
} else {
self.tooltip.hide();
d3.select($this).style('fill', d.data.color);
d3.select($this).transition().duration(150).attr('transform', 'translate(0, 0)');
}
});
main.exit().remove();
for(var i in this.legend_hidden) {
$(i).hide();
}
};
Rubix.PieDonut.prototype.removePoint = function(ref) {
var removed = false;
for(var i=0; i b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
}
this.data[this.name] = data;
this.rubix.resetAxis(false);
this.rubix.forceRedraw();
this._animate_draw();
};
Rubix.LineSeries.prototype.draw = function(forced) {
if(!this.name) return;
if(!this.data) return;
if(!this.data.hasOwnProperty(this.name)) return;
if(!this.data[this.name].length) return;
var self = this;
var isConstructed = this.line_series.selectAll('.'+this.id)[0].length;
if(!isConstructed) {
this.line_series.selectAll('.'+this.id+'.clipped').remove();
if(!this.opts.scatter) {
if(!this.opts.noshadow) {
this.strokePath1 = this.line_series.append('path').attr('class', this.id+' line').datum(this.data[this.name]).attr('d', this.line).attr('stroke', 'black').attr('fill', 'none').attr('stroke-linecap', 'round').attr('stroke-width', 5 * this.opts.strokewidth).attr('stroke-opacity', 0.05000000000000001).attr('transform', 'translate(1,1)');
this.strokePath2 = this.line_series.append('path').attr('class', this.id+' line').datum(this.data[this.name]).attr('d', this.line).attr('stroke', 'black').attr('fill', 'none').attr('stroke-linecap', 'round').attr('stroke-width', 3 * this.opts.strokewidth).attr('stroke-opacity', 0.1).attr('transform', 'translate(1,1)');
this.strokePath3 = this.line_series.append('path').attr('class', this.id+' line').datum(this.data[this.name]).attr('d', this.line).attr('stroke', 'black').attr('fill', 'none').attr('stroke-linecap', 'round').attr('stroke-width', 1 * this.opts.strokewidth).attr('stroke-opacity', 0.15000000000000002).attr('transform', 'translate(1,1)');
}
this.linePath = this.line_series.append('path').datum(this.data[this.name]).attr('class', this.id+' line').attr('stroke', this.opts.color).attr('fill', 'none').attr('stroke-linecap', 'round').attr('d', this.line).attr('stroke-width', 2 * this.opts.strokewidth);
}
if(this.master_detail) {
if(!this.opts.scatter) {
this.md_root.select('.md-layers > .md_line_series').selectAll('.'+this.id+'.clipped').remove();
this.masterLinePath = this.md_root.select('.md-layers > .md_line_series').append('path').datum(this.data[this.name]).attr('class', this.id+' line').attr('stroke', this.opts.color).attr('fill', 'none').attr('stroke-linecap', 'round').attr('d', this.master_line).attr('stroke-width', 2 * this.opts.strokewidth);
this.masterLinePath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.masterLinePath.classed('clipped', true);
} else {
this.md_root.select('.md-layers > .md_line_series').attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
var self = this;
var datum = this.data[this.name];
this.markers_master = this.md_root.select('.md-layers > .md_line_series').selectAll('.'+this.id+'-marker');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var symbolType = this.markers_master.data(datum);
symbolType.enter().append('path')
.attr('d', symbol)
.attr('class', this.id + '-marker')
.attr('fill', this.opts.color)
.style('display', function(d) {
if(d.y === null) {
return 'none';
}
return null;
})
.attr('stroke', 'none')
.attr('transform', function(d) {
var val = d.y;
if(isNaN(val)) {
val = 0;
}
if(self.rubix.opts.invertAxes) {
var _y = self.rubix.y(d.x);
var _x = self.rubix.x(val);
if(self.rubix.axis.y.range === 'column' || self.rubix.axis.y.range === 'bar') {
_y += self.rubix.y.rangeBand()/2;
}
} else {
var _y = self.rubix.y2(val);
var _x = self.rubix.x2(d.x);
if(self.rubix.axis.x.range === 'column' || self.rubix.axis.x.range === 'bar') {
_x += self.rubix.x.rangeBand()/2;
}
}
return 'translate('+_x+','+_y+')';
});
symbolType.exit().remove();
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
}
if(this.dataChanged) {
this.rubix.resetExtent();
this.dataChanged = false;
}
if(!this.opts.scatter) {
if(!this.opts.noshadow) {
this.strokePath1.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.strokePath2.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.strokePath3.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
}
this.linePath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
if(!this.opts.noshadow) {
this.strokePath1.classed('clipped', true);
this.strokePath2.classed('clipped', true);
this.strokePath3.classed('clipped', true);
}
this.linePath.classed('clipped', true);
}
}
this.setup = true;
} else {
this.rubix.runCommand('globalRedraw');
}
this.rubix.resetFocus(forced);
};
/**
* @param {Array|Object} data
*/
Rubix.LineSeries.prototype.update = function(data) {
if(!(data instanceof Array)) {
if(!(data instanceof Object)) {
throw new Error("Data must be an array or object");
} else {
if(!(data.hasOwnProperty('x') || data.hasOwnProperty('y'))) {
throw new Error("Object must be in the form: {x: ..., y: ...}");
}
data = [data];
}
}
if(!this.rubix.opts.noSort) {
data.sort(function(a, b) {
if(a.x > b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
}
this.data[this.name] = data;
if(this.setup) {
this._animate_draw();
} else {
this.rubix.resetAxis(false);
this.rubix.forceRedraw();
}
};
/**
* Alias for addPoint
* @param {Object} data
* @param {?Boolean} shift
* @param {?Boolean} noRedraw
*/
Rubix.LineSeries.prototype.updatePoint = function(data, shift, noRedraw) {
this.addPoint(data, shift, noRedraw);
};
/**
* @param {*} ref
* @param {?Boolean} noRedraw
*/
Rubix.LineSeries.prototype.removePoint = function(ref, noRedraw) {
if(this.chart_hidden) {
this.temp_stack.push({
type: 'removePoint',
ref: ref
});
return;
}
if(!this.data[this.name]) {
this.data[this.name] = [];
}
var removed = false;
for(var i=0; i b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
if(this.rubix.opts.interval) {
if(this.rubix.opts.interval < this.data[this.name].length) {
this.data[this.name].shift();
}
} else {
if(shift) {
this.data[this.name].shift();
}
}
if(this.master_detail) {
this.dataChanged = true;
}
if(noRedraw) return;
if(this.setup) {
this._animate_draw();
} else {
this.rubix.resetAxis(true);
this.rubix.forceRedraw();
}
};
Rubix.LineSeries.prototype._animate_draw = function() {
var text = this.root.selectAll('.y.axis').selectAll('text')[0];
var width = [];
for(var i=0; i1) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
if(this.temp_stack.length) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
};
Rubix.LineSeries.prototype.globalRedraw = function(rubix) {
this.line_series.selectAll('.'+this.id+'.line').attr('d', this.line);
};
Rubix.LineSeries.prototype.forceRedraw = function(rubix) {
this.redraw(rubix);
};
Rubix.LineSeries.prototype.on_complete_draw = function() {
if(!this.setup) return;
var self = this;
var datum = this.data[this.name];
if(this.opts.marker !== undefined && this.show_markers) {
if(this.master_detail) {
this.rubix.symbols.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip-symbols)');
}
this.markers = this.rubix.symbols.selectAll('.'+this.id+'-marker');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var symbolType = this.markers.data(datum);
symbolType.enter().append('path')
.attr('d', symbol)
.attr('class', this.id + '-marker')
.attr('fill', this.opts.color)
.style('display', function(d) {
if(d.y === null) {
return 'none';
}
return null;
})
.attr('stroke', 'white')
.attr('transform', function(d) {
var val = d.y;
if(isNaN(val)) {
val = 0;
}
if(self.rubix.opts.invertAxes) {
var _y = self.rubix.y(d.x);
var _x = self.rubix.x(val);
if(self.rubix.axis.y.range === 'column' || self.rubix.axis.y.range === 'bar') {
_y += self.rubix.y.rangeBand()/2;
}
} else {
var _y = self.rubix.y(val);
var _x = self.rubix.x(d.x);
if(self.rubix.axis.x.range === 'column' || self.rubix.axis.x.range === 'bar') {
_x += self.rubix.x.rangeBand()/2;
}
}
return 'translate('+_x+','+_y+')';
});
symbolType.exit().remove();
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
}
};
Rubix.LineSeries.prototype.setupFocus = function() {
if(!this.setup) return;
if(this.focus) this.focus.remove();
this.focus = this.rubix.focus_group.append('g');
this.focus.attr('class', 'focus');
this.focus.style('display', 'none');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var path = this.focus.append('path').attr('d', symbol).attr('fill', this.opts.color).attr('stroke', 'white').attr('stroke-width', 2);
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
};
Rubix.LineSeries.prototype.on_focus = function() {
if(!this.setup) return;
this.linePath.attr('stroke-width', 2 * this.opts.strokewidth);
};
Rubix.LineSeries.prototype.off_focus = function() {
if(!this.setup) return;
this.linePath.attr('stroke-width', 2 * this.opts.strokewidth);
};
window.Rubix = window.Rubix || {};
/**
* @param {Rubix} rubix
* @param {Object} opts
* @constructor
*/
Rubix.ColumnSeries = function(rubix, opts) {
this.type = 'column_series';
this.opts = opts;
this.opts.color = this.opts.color || 'steelblue';
this.opts.marker = this.opts.marker || 'circle';
this.opts.nostroke = this.opts.nostroke || '';
this.opts.fillopacity = this.opts.fillopacity || 0.85;
this.show_markers = this.opts.show_markers;
if(!this.opts.hasOwnProperty('name')) throw new Error('ColumnSeries should have a \'name\' property');
this.name = this.opts.name;
this.chart_hidden = false;
this.temp_stack = [];
this.setup = false;
this.last_stack = [];
this.last_stack_name = '';
this.last_stack_added = false;
this.count = 0;
this._setup(rubix);
};
/**
* @param {Rubix} rubix
* @private
*/
Rubix.ColumnSeries.prototype._setup = function(rubix) {
this.rubix = rubix;
this.rubix.stacked = true;
this.root = this.rubix.root;
this.data = this.rubix.data;
this.width = this.rubix.width;
this.height = this.rubix.height;
this.stack = this.rubix.column_stack;
this.offset = this.rubix.column_offset;
this.cb_series = this.rubix.root_cb_series;
this.column_stack = this.rubix.column_stack_data;
this.show_markers = (this.show_markers === undefined) ? this.rubix.show_markers : this.show_markers;
this.grouped = this.rubix.grouped;
if(!this.id) {
this.id = this.rubix.uid('stacked-column');
}
};
// Alias for draw
Rubix.ColumnSeries.prototype.redraw = function(rubix) {
this._setup(rubix);
this.draw();
};
Rubix.ColumnSeries.prototype.noRedraw = function(rubix) {
this._setup(rubix);
this.draw(true);
};
/**
* @param {Array|Object} data
*/
Rubix.ColumnSeries.prototype.addData = function(data) {
this.rubix.data_changed = true;
if(!(data instanceof Array)) {
if(!(data instanceof Object)) {
throw new Error("Data must be an array or object");
} else {
if(!(data.hasOwnProperty('x') || data.hasOwnProperty('y'))) {
throw new Error("Object must be in the form: {x: ..., y: ...}");
}
data = [data];
}
}
if(!data.length) return;
if(!this.rubix.opts.noSort) {
data.sort(function(a, b) {
if(a.x > b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
}
var maxLen = 0, columns = [];
for(var i in this.data) {
var len = this.data[i].length;
if(len > maxLen) {
maxLen = len;
columns = [];
for(var k=0; k 0) {
return 'translate(0,'+(-Math.abs(val))+')';
} else {
return 'translate(0,0)';
}
});
}
} else {
if(this.rubix.opts.invertAxes) {
rect.attr('x', function(d) {
var val = self.rubix.x(d.y0);
if(isNaN(val)) {
return null;
}
return val;
});
rect.attr('y', function(d) {
return self.rubix.y(d.x) || 0;
});
rect.attr('class', function(d) {
return 'column-' + (self.rubix.y(d.x) + self.rubix.y.rangeBand()/2);
});
rect.attr("width", function(d) {
var val = Math.abs(self.rubix.x(d.y0)-self.rubix.x(d.y+d.y0));
if(isNaN(val)) {
return null;
}
return val;
});
rect.attr('height', self.rubix.y.rangeBand());
rect.attr('transform', function(d) {
if(d.y < 0) {
var val = Math.abs(self.rubix.x(d.y0)-self.rubix.x(d.y+d.y0));
return 'translate('+(-val)+',0)';
}
return null;
});
} else {
rect.attr('x', function(d) {
return self.rubix.x(d.x);
});
rect.attr('y', function(d) {
var val = self.rubix.y(d.y0);
if(isNaN(val)) {
return null;
}
return val;
});
rect.attr('class', function(d) {
return 'column-' + ((self.rubix.x(d.x) + self.rubix.x.rangeBand()/2));
});
rect.attr("width", self.rubix.x.rangeBand())
rect.attr('height', function(d) {
var val = Math.abs(self.rubix.y(d.y0)-self.rubix.y(d.y+d.y0));
if(isNaN(val)) {
return null;
}
return val;
});
rect.attr('transform', function(d) {
if(d.y > 0) {
var val = Math.abs(self.rubix.y(d.y0)-self.rubix.y(d.y+d.y0));
return 'translate(0,'+(-val)+')';
}
return null;
});
}
}
};
Rubix.ColumnSeries.prototype.draw = function(forced) {
try {
if(!this.name) return;
if(!this.data) return;
if(!this.data.hasOwnProperty(this.name)) return;
if(!this.data[this.name].length) return;
var oldLayers = this.layers;
try {
this.layers = this.stack(this.column_stack);
} catch(e) {
// data un-available. retaining old layer.
this.layers = oldLayers;
}
if(!this.grouped) {
var max = this.rubix.maxLen;
for(var i=0; i= 0) {
if(this.layers[j].values[k].y === null) {
this.layers[j].values[k].y0 = null;
} else {
if(ceiling === null) ceiling = 0;
this.layers[j].values[k].y0 = ceiling;
ceiling += this.layers[j].values[k].y;
}
}
break;
}
} catch(e) {
this.layers[j].values.push({
x: x,
y: null,
y0: null,
y_new: null
});
}
}
}
ceiling = null;
for(var j=this.layers.length-1; j>=0; j--) {
for(var k=0; k b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
}
this.data[this.name] = data;
if(this.setup) {
this._animate_draw();
} else {
this.rubix.resetAxis(true);
this.rubix.forceRedraw();
}
};
/**
* @param {Object} data
* @param {?Boolean} shift
* @param {?Boolean} noRedraw
*/
Rubix.ColumnSeries.prototype.updatePoint = function(data, shift, noRedraw) {
this.addPoint(data, shift, noRedraw);
};
/**
* @param {*} ref
* @param {?Boolean} noRedraw
*/
Rubix.ColumnSeries.prototype.removePoint = function(ref, noRedraw) {
if(this.chart_hidden) {
this.temp_stack.push({
type: 'removePoint',
ref: ref
});
return;
}
if(!this.data[this.name]) {
this.data[this.name] = [];
}
var removed = false, pos = 0;
for(var i=0; i maxLen) {
maxLen = len;
}
}
this.rubix.maxLen = maxLen;
if(noRedraw) return;
this.rubix.resetAxis();
this.rubix.forceRedraw();
this._animate_draw();
};
/**
* @param {Object} data
* @param {?Boolean} shift
* @param {?Boolean} noRedraw
*/
Rubix.ColumnSeries.prototype.addPoint = function(data, shift, noRedraw) {
this.rubix.data_changed = true;
if(!(data instanceof Object) || (data instanceof Array)) {
throw new Error("Object required for addPoint");
}
if(!(data.hasOwnProperty('x') || data.hasOwnProperty('y'))) {
throw new Error("Object must be in the form: {x: ..., y: ...}");
}
if(this.chart_hidden) {
this.temp_stack.push({
type: 'addPoint',
data: data,
shift: shift
});
return;
}
if(!this.data[this.name]) {
this.data[this.name] = [];
}
var added = false;
for(var i=0; i b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
added = false;
for(var i=0; i maxLen) {
maxLen = len;
columns = [];
for(var k=0; k1) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
if(this.temp_stack.length) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
};
Rubix.ColumnSeries.prototype.globalRedraw = function(rubix) {
// do nothing
};
Rubix.ColumnSeries.prototype.forceRedraw = function(rubix) {
this.redraw(rubix);
};
Rubix.ColumnSeries.prototype.on_complete_draw = function() {
if(!this.setup) return;
var strokecolor = 'white';
var self = this;
if(this.opts.marker !== undefined && this.show_markers) {
this.markers = this.rubix.symbols;
this.markers.selectAll('.column-symbols').remove();
var p = this.markers.selectAll('.column-symbols').data(this.layers, function(d) {
return d.key;
});
var symbolGroup = p.enter().append('g');
symbolGroup.attr('class', 'column-symbols');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbolPath = symbolGroup.selectAll('path').data(function(d) {
for(var i=0; i b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
}
this.data[this.name] = data;
this.rubix.resetAxis(false);
this.rubix.forceRedraw();
this._animate_draw();
};
Rubix.AreaSeries.prototype.draw = function(forced) {
if(!this.name) return;
if(!this.data) return;
if(!this.data.hasOwnProperty(this.name)) return;
if(!this.data[this.name].length) return;
var self = this;
var isConstructed = this.area_series.selectAll('.'+this.id)[0].length;
if(!isConstructed) {
this.area_series.selectAll('.'+this.id+'.clipped').remove();
if(!this.opts.noshadow) {
this.strokePath1 = this.area_series.append('path').attr('class', this.id+' line').datum(this.data[this.name]).attr('d', this.line).attr('stroke', 'black').attr('fill', 'none').attr('stroke-linecap', 'round').attr('stroke-width', 5 * this.opts.strokewidth).attr('stroke-opacity', 0.05000000000000001).attr('transform', 'translate(1,1)');
this.strokePath2 = this.area_series.append('path').attr('class', this.id+' line').datum(this.data[this.name]).attr('d', this.line).attr('stroke', 'black').attr('fill', 'none').attr('stroke-linecap', 'round').attr('stroke-width', 3 * this.opts.strokewidth).attr('stroke-opacity', 0.1).attr('transform', 'translate(1,1)');
this.strokePath3 = this.area_series.append('path').attr('class', this.id+' line').datum(this.data[this.name]).attr('d', this.line).attr('stroke', 'black').attr('fill', 'none').attr('stroke-linecap', 'round').attr('stroke-width', 1 * this.opts.strokewidth).attr('stroke-opacity', 0.15000000000000002).attr('transform', 'translate(1,1)');
}
this.areaPath = this.area_series.append('path').attr('class', this.id+' area').datum(this.data[this.name]).attr('d', this.area).attr('fill', this.opts.color).attr('fill-opacity', this.opts.fillopacity).attr('stroke', 'none');
this.linePath = this.area_series.append('path').datum(this.data[this.name]).attr('class', this.id+' line').attr('stroke', this.opts.color).attr('fill', 'none').attr('stroke-linecap', 'round').attr('d', this.line).attr('stroke-width', 2 * this.opts.strokewidth);
if(this.master_detail) {
this.md_root.select('.md-layers > .md_area_series').selectAll('.'+this.id+'.clipped').remove();
this.masterLinePath = this.md_root.select('.md-layers > .md_area_series').append('path').datum(this.data[this.name]).attr('class', this.id+' line').attr('stroke', this.opts.color).attr('fill', 'none').attr('stroke-linecap', 'round').attr('d', this.master_line).attr('stroke-width', 2 * this.opts.strokewidth);
this.masterLinePath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.masterLinePath.classed('clipped', true);
this.masterAreaPath = this.md_root.select('.md-layers > .md_area_series').append('path').attr('class', this.id+' area').datum(this.data[this.name]).attr('d', this.master_area).attr('fill', this.opts.color).attr('fill-opacity', this.opts.fillopacity).attr('stroke', 'none');
this.masterAreaPath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.masterAreaPath.classed('clipped', true);
if(this.dataChanged) {
this.rubix.resetExtent();
this.dataChanged = false;
}
if(!this.opts.noshadow) {
this.strokePath1.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.strokePath2.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.strokePath3.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
}
this.linePath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
if(!this.opts.noshadow) {
this.strokePath1.classed('clipped', true);
this.strokePath2.classed('clipped', true);
this.strokePath3.classed('clipped', true);
}
this.linePath.classed('clipped', true);
this.areaPath.classed('clipped', true);
}
this.areaPath.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip)');
this.setup = true;
} else {
this.rubix.runCommand('globalRedraw');
}
this.rubix.resetFocus(forced);
};
/**
* Alias for addPoint
* @param {Object} data
* @param {?Boolean} shift
* @param {?Boolean} noRedraw
*/
Rubix.AreaSeries.prototype.updatePoint = function(data, shift, noRedraw) {
this.addPoint(data, shift, noRedraw);
};
/**
* @param {*} ref
* @param {?Boolean} noRedraw
*/
Rubix.AreaSeries.prototype.removePoint = function(ref, noRedraw) {
if(this.chart_hidden) {
this.temp_stack.push({
type: 'removePoint',
ref: ref
});
return;
}
if(!this.data[this.name]) {
this.data[this.name] = [];
}
var removed = false;
for(var i=0; i b.x) {
return 1;
} else if(a.x === b.x) {
return 0;
} else {
return -1;
}
});
if(this.rubix.opts.interval) {
if(this.rubix.opts.interval < this.data[this.name].length) {
this.data[this.name].shift();
}
} else {
if(shift) {
this.data[this.name].shift();
}
}
if(this.master_detail) {
this.dataChanged = true;
}
if(noRedraw) return;
if(this.setup) {
this._animate_draw();
} else {
this.rubix.resetAxis(true);
this.rubix.forceRedraw();
}
};
Rubix.AreaSeries.prototype._animate_draw = function(local) {
var self = this;
var text = this.root.selectAll('.y.axis').selectAll('text')[0];
var width = [];
for(var i=0; i1) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
if(this.temp_stack.length) {
var rawData = this.temp_stack.shift();
if(rawData.type === 'addPoint') {
this.addPoint(rawData.data, rawData.shift, true);
} else {
this.removePoint(rawData.ref);
}
}
};
Rubix.AreaSeries.prototype.globalRedraw = function(rubix) {
this.area_series.selectAll('.'+this.id+'.line').attr('d', this.line);
this.area_series.selectAll('.'+this.id+'.area').attr('d', this.area);
};
Rubix.AreaSeries.prototype.forceRedraw = function(rubix) {
this.redraw(rubix);
};
Rubix.AreaSeries.prototype.on_complete_draw = function() {
if(!this.setup) return;
var self = this;
var datum = this.data[this.name];
if(this.opts.marker !== undefined && this.show_markers) {
if(this.master_detail) {
this.rubix.symbols.attr('clip-path', 'url(#'+self.rubix.master_id+'-clip-symbols)');
}
this.markers = this.rubix.symbols.selectAll('.'+this.id+'-marker');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var symbolType = this.markers.data(datum);
symbolType.enter().append('path')
.attr('d', symbol)
.attr('class', this.id + '-marker')
.attr('fill', this.opts.color)
.style('display', function(d) {
if(d.y === null) {
return 'none';
}
return null;
})
.attr('stroke', 'white')
.attr('transform', function(d) {
var val = d.y;
if(isNaN(val)) {
val = 0;
}
if(self.rubix.opts.invertAxes) {
var _y = self.rubix.y(d.x);
var _x = self.rubix.x(val);
if(self.rubix.axis.y.range === 'column' || self.rubix.axis.y.range === 'bar') {
_y += self.rubix.y.rangeBand()/2;
}
} else {
var _y = self.rubix.y(val);
var _x = self.rubix.x(d.x);
if(self.rubix.axis.x.range === 'column' || self.rubix.axis.x.range === 'bar') {
_x += self.rubix.x.rangeBand()/2;
}
}
return 'translate('+_x+','+_y+')';
});
symbolType.exit().remove();
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
}
};
Rubix.AreaSeries.prototype.setupFocus = function() {
if(!this.setup) return;
if(this.focus) this.focus.remove();
this.focus = this.rubix.focus_group.append('g');
this.focus.attr('class', 'focus');
this.focus.style('display', 'none');
switch(this.opts.marker) {
case 'circle':
case 'cross':
case 'square':
case 'diamond':
case 'triangle-up':
case 'triangle-down':
var symbol = d3.svg.symbol();
symbol.type(this.opts.marker);
var path = this.focus.append('path').attr('d', symbol).attr('fill', this.opts.color).attr('stroke', 'white').attr('stroke-width', 2);
break;
default:
throw new Error('Unknown marker type : ' + this.opts.marker);
break;
}
};
Rubix.AreaSeries.prototype.on_focus = function() {
if(!this.setup) return;
this.linePath.attr('stroke-width', 2 * this.opts.strokewidth);
};
Rubix.AreaSeries.prototype.off_focus = function() {
if(!this.setup) return;
this.linePath.attr('stroke-width', 2 * this.opts.strokewidth);
};
Rubix.Cleanup = function() {
var master_id = null;
for(var i=0; i