d3pie: eliminated dom lookups for labels
Costa Tsaousis (ktsaou) committed
Feb 4, 2018 at 03:24 UTC
e1dff0634539ce63ab6d563263c1bcd45c12a96e
2 files changed
+63
-89
web/dashboard.js
+1
-1
@@ -243,7 +243,7 @@ var NETDATA = window.NETDATA || {};
243
NETDATA.raphael_js = NETDATA.serverStatic + 'lib/raphael-2.2.4-min.js';
244
NETDATA.c3_js = NETDATA.serverStatic + 'lib/c3-0.4.18.min.js';
245
NETDATA.c3_css = NETDATA.serverStatic + 'css/c3-0.4.18.min.css';
246
- NETDATA.d3pie_js = NETDATA.serverStatic + 'lib/d3pie-0.2.1-netdata-2.js';
246
+ NETDATA.d3pie_js = NETDATA.serverStatic + 'lib/d3pie-0.2.1-netdata-2.js?v7';
247
NETDATA.d3_js = NETDATA.serverStatic + 'lib/d3-4.12.2.min.js';
248
NETDATA.morris_js = NETDATA.serverStatic + 'lib/morris-0.5.1.min.js';
249
NETDATA.morris_css = NETDATA.serverStatic + 'css/morris-0.5.1.css';
web/lib/d3pie-0.2.1-netdata-2.js
+62
-88
@@ -300,16 +300,20 @@ var helpers = {
300
}
301
},
302
303
- getDimensions: function(id) {
304
- var el = document.getElementById(id);
303
+ getDimensions: function(el) {
304
+ if(typeof el === 'string')
305
+ el = document.getElementById(el);
306
+
307
var w = 0, h = 0;
308
if (el) {
309
var dimensions = el.getBBox();
310
w = dimensions.width;
311
h = dimensions.height;
310
- } else {
312
+ }
313
+ else {
314
console.log("error: getDimensions() " + id + " not found.");
315
}
316
+
317
return { w: w, h: h };
318
},
319
@@ -766,7 +770,7 @@ var labels = {
770
var outerLabel = pie.svg.insert("g", "." + pie.cssPrefix + "labels-" + section)
771
.attr("class", pie.cssPrefix + "labels-" + section);
772
769
- var labelGroup = outerLabel.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
773
+ var labelGroup = pie.__labels[section] = outerLabel.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
774
.data(pie.options.data.content)
775
.enter()
776
.append("g")
@@ -856,7 +860,7 @@ var labels = {
860
labels["dimensions-" + section] = [];
861
862
// get the latest widths, heights
859
- var labelGroups = d3.selectAll("." + pie.cssPrefix + "labelGroup-" + section);
863
+ var labelGroups = pie.__labels[section];
864
labelGroups.each(function(d, i) {
865
var mainLabel = d3.select(this).selectAll("." + pie.cssPrefix + "segmentMainLabel-" + section);
866
var percentage = d3.select(this).selectAll("." + pie.cssPrefix + "segmentPercentage-" + section);
@@ -894,7 +898,7 @@ var labels = {
898
899
computeLabelLinePositions: function(pie) {
900
pie.lineCoordGroups = [];
897
- d3.selectAll("." + pie.cssPrefix + "labelGroup-outer")
901
+ pie.__labels.outer
902
.each(function(d, i) { return labels.computeLinePosition(pie, i); });
903
},
904
@@ -964,7 +968,7 @@ var labels = {
968
addLabelLines: function(pie) {
969
var lineGroups = pie.svg.insert("g", "." + pie.cssPrefix + "pieChart") // meaning, BEFORE .pieChart
970
.attr("class", pie.cssPrefix + "lineGroups")
967
- .style("opacity", 0);
971
+ .style("opacity", 1);
972
973
var lineGroup = lineGroups.selectAll("." + pie.cssPrefix + "lineGroup")
974
.data(pie.lineCoordGroups)
@@ -992,12 +996,14 @@ var labels = {
996
},
997
998
positionLabelGroups: function(pie, section) {
995
- if (pie.options.labels[section].format === "none") {
996
- return;
997
- }
999
+ if (pie.options.labels[section].format === "none")
1000
+ return;
1001
999
- d3.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
1000
- .style("opacity", 0)
1002
+ pie.__labels[section]
1003
+ .style("opacity", function(d, i) {
1004
+ var percentage = pie.options.labels[section].hideWhenLessThanPercentage;
1005
+ return (percentage !== null && d.percentage < percentage) ? 0 : 1;
1006
+ })
1007
.attr("transform", function(d, i) {
1008
var x, y;
1009
if (section === "outer") {
@@ -1030,45 +1036,6 @@ var labels = {
1036
},
1037
1038
1033
- fadeInLabelsAndLines: function(pie) {
1034
-
1035
- // fade in the labels when the load effect is complete - or immediately if there's no load effect
1036
- //var loadSpeed = (pie.options.effects.load.effect === "default") ? pie.options.effects.load.speed : 1;
1037
- //setTimeout(function() {
1038
- var labelFadeInTime = (pie.options.effects.load.effect === "default") ? 400 : 1; // 400 is hardcoded for the present
1039
-
1040
- d3.selectAll("." + pie.cssPrefix + "labelGroup-outer")
1041
- //.transition()
1042
- //.duration(labelFadeInTime)
1043
- .style("opacity", function(d, i) {
1044
- var percentage = pie.options.labels.outer.hideWhenLessThanPercentage;
1045
- return (percentage !== null && d.percentage < percentage) ? 0 : 1;
1046
- });
1047
-
1048
- d3.selectAll("." + pie.cssPrefix + "labelGroup-inner")
1049
- //.transition()
1050
- //.duration(labelFadeInTime)
1051
- .style("opacity", function(d, i) {
1052
- var percentage = pie.options.labels.inner.hideWhenLessThanPercentage;
1053
- return (percentage !== null && d.percentage < percentage) ? 0 : 1;
1054
- });
1055
-
1056
- d3.selectAll("g." + pie.cssPrefix + "lineGroups")
1057
- //.transition()
1058
- //.duration(labelFadeInTime)
1059
- .style("opacity", 1);
1060
-
1061
- // once everything's done loading, trigger the onload callback if defined
1062
- if (helpers.isFunction(pie.options.callbacks.onload)) {
1063
- //setTimeout(function() {
1064
- try {
1065
- pie.options.callbacks.onload();
1066
- } catch (e) { }
1067
- //}, labelFadeInTime);
1068
- }
1069
- //}, loadSpeed);
1070
- },
1071
-
1039
getIncludes: function(val) {
1040
var addMainLabel = false;
1041
var addValue = false;
@@ -1111,7 +1078,7 @@ var labels = {
1078
computeOuterLabelCoords: function(pie) {
1079
1080
// 1. figure out the ideal positions for the outer labels
1114
- pie.svg.selectAll("." + pie.cssPrefix + "labelGroup-outer")
1081
+ pie.__labels.outer
1082
.each(function(d, i) {
1083
return labels.getIdealOuterLabelPositions(pie, i);
1084
});
@@ -1359,7 +1326,8 @@ var segments = {
1326
},
1327
1328
addSegmentEventHandlers: function(pie) {
1362
- var arc = d3.selectAll("." + pie.cssPrefix + "arc,." + pie.cssPrefix + "labelGroup-inner,." + pie.cssPrefix + "labelGroup-outer");
1329
+ var arc = d3.selectAll("." + pie.cssPrefix + "arc");
1330
+ arc = arc.merge(pie.__labels.inner.merge(pie.__labels.outer));
1331
1332
arc.on("click", function() {
1333
var currentEl = d3.select(this);
@@ -2088,51 +2056,57 @@ var tt = {
2056
self.textComponents.headerHeight = headerHeight;
2057
}
2058
2091
- // at this point, all main text component dimensions have been calculated
2092
- math.computePieRadius(self);
2059
+ // at this point, all main text component dimensions have been calculated
2060
+ math.computePieRadius(self);
2061
2094
- // this value is used all over the place for placing things and calculating locations. We figure it out ONCE
2095
- // and store it as part of the object
2096
- math.calculatePieCenter(self);
2062
+ // this value is used all over the place for placing things and calculating locations. We figure it out ONCE
2063
+ // and store it as part of the object
2064
+ math.calculatePieCenter(self);
2065
2098
- // position the title and subtitle
2099
- text.positionTitle(self);
2100
- text.positionSubtitle(self);
2066
+ // position the title and subtitle
2067
+ text.positionTitle(self);
2068
+ text.positionSubtitle(self);
2069
2102
- // now create the pie chart segments, and gradients if the user desired
2103
- if (self.options.misc.gradient.enabled) {
2104
- segments.addGradients(self);
2105
- }
2106
- segments.create(self); // also creates this.arc
2107
- labels.add(self, "inner", self.options.labels.inner.format);
2108
- labels.add(self, "outer", self.options.labels.outer.format);
2070
+ // now create the pie chart segments, and gradients if the user desired
2071
+ if (self.options.misc.gradient.enabled) {
2072
+ segments.addGradients(self);
2073
+ }
2074
+ segments.create(self); // also creates this.arc
2075
2110
- // position the label elements relatively within their individual group (label, percentage, value)
2111
- labels.positionLabelElements(self, "inner", self.options.labels.inner.format);
2112
- labels.positionLabelElements(self, "outer", self.options.labels.outer.format);
2113
- labels.computeOuterLabelCoords(self);
2076
+ self.__labels = {};
2077
+ labels.add(self, "inner", self.options.labels.inner.format);
2078
+ labels.add(self, "outer", self.options.labels.outer.format);
2079
2115
- // this is (and should be) dumb. It just places the outer groups at their calculated, collision-free positions
2116
- labels.positionLabelGroups(self, "outer");
2080
+ // position the label elements relatively within their individual group (label, percentage, value)
2081
+ labels.positionLabelElements(self, "inner", self.options.labels.inner.format);
2082
+ labels.positionLabelElements(self, "outer", self.options.labels.outer.format);
2083
+ labels.computeOuterLabelCoords(self);
2084
2118
- // we use the label line positions for many other calculations, so ALWAYS compute them
2119
- labels.computeLabelLinePositions(self);
2085
+ // this is (and should be) dumb. It just places the outer groups at their calculated, collision-free positions
2086
+ labels.positionLabelGroups(self, "outer");
2087
2121
- // only add them if they're actually enabled
2122
- if (self.options.labels.lines.enabled && self.options.labels.outer.format !== "none") {
2123
- labels.addLabelLines(self);
2124
- }
2088
+ // we use the label line positions for many other calculations, so ALWAYS compute them
2089
+ labels.computeLabelLinePositions(self);
2090
2126
- labels.positionLabelGroups(self, "inner");
2127
- labels.fadeInLabelsAndLines(self);
2091
+ // only add them if they're actually enabled
2092
+ if (self.options.labels.lines.enabled && self.options.labels.outer.format !== "none") {
2093
+ labels.addLabelLines(self);
2094
+ }
2095
2129
- // add and position the tooltips
2130
- if (self.options.tooltips.enabled) {
2131
- tt.addTooltips(self);
2132
- }
2096
+ labels.positionLabelGroups(self, "inner");
2097
+
2098
+ if (helpers.isFunction(self.options.callbacks.onload)) {
2099
+ try {
2100
+ self.options.callbacks.onload();
2101
+ } catch (e) { }
2102
+ }
2103
+
2104
+ // add and position the tooltips
2105
+ if (self.options.tooltips.enabled) {
2106
+ tt.addTooltips(self);
2107
+ }
2108
2134
- segments.addSegmentEventHandlers(self);
2135
- //});
2109
+ segments.addSegmentEventHandlers(self);
2110
};
2111
2112
var _getPercentage = function(value, total, decimalPlaces) {