};
-
- window.SonarWidgets.PieChart.prototype.update = function(container) {
- container = d3.select(container);
-
- var widget = this,
- width = container.property('offsetWidth');
- this.width(width > 100 ? width : 100);
-
-
- // Update svg canvas
- this.svg
- .attr('width', this.width())
- .attr('height', this.height());
-
-
- // Update available size
- this.availableWidth = this.width() - this.margin().left - this.margin().right -
- this.legendWidth() - this.legendMargin();
- this.availableHeight = this.height() - this.margin().top - this.margin().bottom;
- this.radius = Math.min(this.availableWidth, this.availableHeight) / 2;
- this._legendSize = Math.floor(this.availableHeight / this._lineHeight);
- this._legendSymbols = Math.floor((this.width() - this.margin().left - this.margin().right -
- this.legendMargin() - 2 * this.radius) / 6.2);
-
-
- // Update plot
- this.plotWrap
- .attr('transform', trans(this.radius, this.radius));
-
-
- // Update arc
- this.arc
- .innerRadius(this.radius / 2)
- .outerRadius(this.radius);
-
-
- // Configure sectors
- this.sectors = this.plotWrap.selectAll('.arc')
- .data(this.pie(this.components()));
-
- this.sectors
- .enter()
- .append('path')
- .classed('arc', true)
- .style('fill', function(d, i) { return widget.color(i); });
-
- this.sectors
- .transition()
- .attr('d', this.arc);
-
- this.sectors
- .exit().remove();
-
-
- // Update legend
+ window.SonarWidgets.PieChart.prototype.updateLegend = function () {
+ var widget = this;
this.legendWrap
.attr('transform', trans(
this.legendMargin() + 2 * this.radius,
.text(function(d) {
return d.name.length > widget._legendSymbols ? d.name.substr(0, widget._legendSymbols) + '...' : d.name;
});
+ };
- // Update details
+ window.SonarWidgets.PieChart.prototype.updateDetails = function () {
+ var widget = this;
this.detailsWrap
.attr('width', this.legendWidth())
.attr('transform', trans(
this.donutLabel2
.attr('transform', trans(0, widget.radius / 6))
.style('font-size', fz + 'px');
+ };
- // Configure events
+ window.SonarWidgets.PieChart.prototype.configureEvents = function () {
+ var widget = this;
var updateMetrics = function(metrics) {
widget.detailsMetrics = widget.detailsWrap.selectAll('.details-metric')
.data(metrics);
};
+ window.SonarWidgets.PieChart.prototype.update = function(container) {
+ container = d3.select(container);
+
+ var widget = this,
+ width = container.property('offsetWidth');
+ this.width(width > 100 ? width : 100);
+
+
+ // Update svg canvas
+ this.svg
+ .attr('width', this.width())
+ .attr('height', this.height());
+
+
+ // Update available size
+ this.availableWidth = this.width() - this.margin().left - this.margin().right -
+ this.legendWidth() - this.legendMargin();
+ this.availableHeight = this.height() - this.margin().top - this.margin().bottom;
+ this.radius = Math.min(this.availableWidth, this.availableHeight) / 2;
+ this._legendSize = Math.floor(this.availableHeight / this._lineHeight);
+ this._legendSymbols = Math.floor((this.width() - this.margin().left - this.margin().right -
+ this.legendMargin() - 2 * this.radius) / 6.2);
+
+
+ // Update plot
+ this.plotWrap
+ .attr('transform', trans(this.radius, this.radius));
+
+
+ // Update arc
+ this.arc
+ .innerRadius(this.radius / 2)
+ .outerRadius(this.radius);
+
+
+ // Configure sectors
+ this.sectors = this.plotWrap.selectAll('.arc')
+ .data(this.pie(this.components()));
+
+ this.sectors
+ .enter()
+ .append('path')
+ .classed('arc', true)
+ .style('fill', function(d, i) { return widget.color(i); });
+
+ this.sectors
+ .transition()
+ .attr('d', this.arc);
+
+ this.sectors
+ .exit().remove();
+
+
+ this.updateLegend();
+ this.updateDetails();
+ this.configureEvents();
+ };
+
+
window.SonarWidgets.PieChart.defaults = {
width: 350,
};
- window.SonarWidgets.StackArea.prototype.render = function () {
+
+ window.SonarWidgets.StackArea.prototype.initScales = function() {
var widget = this,
colorsLength = widget.colors().length;
-
- this.svg = this.container.append('svg')
- .attr('class', 'sonar-d3');
-
- this.gWrap = this.svg.append('g');
-
- this.gtimeAxis = this.gWrap.append('g')
- .attr('class', 'axis x');
-
- this.plotWrap = this.gWrap.append('g')
- .attr('class', 'plot');
-
- this.scanner = this.plotWrap.append('line');
-
- this.infoWrap = this.gWrap.append('g');
- this.infoDate = this.infoWrap.append('text');
- this.infoSnapshot = this.infoWrap.append('text');
- this.infoTotal = this.infoWrap.append('text');
-
- this.gWrap
- .attr('transform', trans(this.margin().left, this.margin().top));
-
-
- // Configure stack
- this.stack = d3.layout.stack();
- this.stackData = this.stack(this.data());
- this.stackDataTop = this.stackData[this.stackData.length - 1];
-
-
- // Configure scales
var timeDomain = this.data()
.map(function(_) {
return d3.extent(_, function(d) {
this.color = function(i) {
return widget.colors()[i % colorsLength][0];
};
+ };
- // Configure the axis
+ window.SonarWidgets.StackArea.prototype.initAxis = function() {
this.timeAxis = d3.svg.axis()
.scale(this.time)
.orient('bottom')
.ticks(5);
+ };
- // Configure the area
+ window.SonarWidgets.StackArea.prototype.initArea = function() {
+ var widget = this;
this.area = d3.svg.area()
.x(function(d) { return widget.time(d.x); })
.y0(function(d) { return widget.y(d.y0); })
this.areaLine = d3.svg.line()
.x(function(d) { return widget.time(d.x); })
.y(function(d) { return widget.y(d.y0 + d.y); });
+ };
- // Configure scanner
- this.scanner
- .attr('class', 'scanner')
- .attr('y1', 0);
-
-
- // Configure info
+ window.SonarWidgets.StackArea.prototype.initInfo = function() {
+ var widget = this;
this.infoWrap
.attr('class', 'info')
.attr('transform', trans(0, -60));
prevX += (infoMetricText.node().getComputedTextLength() + 70);
}
});
+ };
- // Configure events
+ window.SonarWidgets.StackArea.prototype.initEvents = function() {
+ var widget = this;
this.events = widget.snapshots()
.filter(function(d) { return d.e.length > 0; });
cl = closest(widget.data()[0], mx, function(d) { return widget.time(d.x); });
widget.selectSnapshot(cl);
});
+ };
+
+
+ window.SonarWidgets.StackArea.prototype.render = function () {
+ this.svg = this.container.append('svg')
+ .attr('class', 'sonar-d3');
+
+ this.gWrap = this.svg.append('g');
+
+ this.gtimeAxis = this.gWrap.append('g')
+ .attr('class', 'axis x');
+
+ this.plotWrap = this.gWrap.append('g')
+ .attr('class', 'plot');
+
+ this.scanner = this.plotWrap.append('line');
+ this.infoWrap = this.gWrap.append('g');
+ this.infoDate = this.infoWrap.append('text');
+ this.infoSnapshot = this.infoWrap.append('text');
+ this.infoTotal = this.infoWrap.append('text');
+
+ this.gWrap
+ .attr('transform', trans(this.margin().left, this.margin().top));
+ // Configure stack
+ this.stack = d3.layout.stack();
+ this.stackData = this.stack(this.data());
+ this.stackDataTop = this.stackData[this.stackData.length - 1];
+
+ this.initScales();
+ this.initAxis();
+ this.initArea();
+
+ // Configure scanner
+ this.scanner
+ .attr('class', 'scanner')
+ .attr('y1', 0);
+
+ this.initInfo();
+ this.initEvents();
this.update();
return this;
};
-
window.SonarWidgets.StackArea.prototype.update = function() {
var widget = this,
width = this.container.property('offsetWidth');