From fcd3b661c7fee47dccd81f26e9da6ba489d610e6 Mon Sep 17 00:00:00 2001 From: Jayen Date: Tue, 22 Jul 2014 13:49:38 +1000 Subject: [PATCH 1/3] updated legend to group series which have the same name updated toggle/order/highlight as necessary for legend series groups --- ...ickshaw.Graph.Behavior.Series.Highlight.js | 33 ++++--- .../Rickshaw.Graph.Behavior.Series.Order.js | 2 +- .../Rickshaw.Graph.Behavior.Series.Toggle.js | 12 +-- src/js/Rickshaw.Graph.Legend.js | 88 ++++++++++++------- 4 files changed, 88 insertions(+), 47 deletions(-) diff --git a/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js b/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js index f22ebcf2..b93ff074 100644 --- a/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js +++ b/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js @@ -26,19 +26,27 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) { if (l === line) { // if we're not in a stacked renderer bring active line to the top - if (self.graph.renderer.unstack && (line.series.renderer ? line.series.renderer.unstack : true)) { + if (self.graph.renderer.unstack) + line.series.forEach(function (series) { + if (series.renderer ? series.renderer.unstack : true) { - var seriesIndex = self.graph.series.indexOf(line.series); - line.originalIndex = seriesIndex; + var seriesIndex = self.graph.series.indexOf(series); + line.originalIndex = seriesIndex; - var series = self.graph.series.splice(seriesIndex, 1)[0]; - self.graph.series.push(series); - } + series = self.graph.series.splice(seriesIndex, 1)[0]; + self.graph.series.push(series); + } + }); return; } - colorSafe[line.series.name] = colorSafe[line.series.name] || line.series.color; - line.series.color = disabledColor(line.series.color); + // backup and change the series' colors + line.series.forEach(function (series, s) { + if (!(series.name in colorSafe)) + colorSafe[series.name] = []; + colorSafe[series.name][s] = colorSafe[series.name][s] || series.color; + series.color = disabledColor(series.color); + }); } ); @@ -61,9 +69,12 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) { delete line.originalIndex; } - if (colorSafe[line.series.name]) { - line.series.color = colorSafe[line.series.name]; - } + // restore the series' colors + line.series.forEach(function (series, s) { + if (colorSafe[series.name] && colorSafe[series.name][s]) { + series.color = colorSafe[series.name][s]; + } + }); } ); self.graph.update(); diff --git a/src/js/Rickshaw.Graph.Behavior.Series.Order.js b/src/js/Rickshaw.Graph.Behavior.Series.Order.js index a14ae007..51142db0 100644 --- a/src/js/Rickshaw.Graph.Behavior.Series.Order.js +++ b/src/js/Rickshaw.Graph.Behavior.Series.Order.js @@ -23,7 +23,7 @@ Rickshaw.Graph.Behavior.Series.Order = function(args) { var series = []; jQuery(self.legend.list).find('li').each( function(index, item) { if (!item.series) return; - series.push(item.series); + series = series.concat(item.series); } ); for (var i = self.graph.series.length - 1; i >= 0; i--) { diff --git a/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js b/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js index c3c365bb..89c9e995 100644 --- a/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js +++ b/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js @@ -15,11 +15,12 @@ Rickshaw.Graph.Behavior.Series.Toggle = function(args) { line.element.insertBefore(anchor, line.element.firstChild); anchor.onclick = function(e) { - if (line.series.disabled) { + if (line.series.disabled()) { line.series.enable(); line.element.classList.remove('disabled'); - } else { - if (this.graph.series.filter(function(s) { return !s.disabled }).length <= 1) return; + } else { + // prevent disabling the last series + if (this.graph.series.filter(function(s) { return !s.disabled }).length <= line.series.length) return; line.series.disable(); line.element.classList.add('disabled'); } @@ -31,13 +32,14 @@ Rickshaw.Graph.Behavior.Series.Toggle = function(args) { var label = line.element.getElementsByTagName('span')[0]; label.onclick = function(e){ - var disableAllOtherLines = line.series.disabled; + var disableAllOtherLines = line.series.disabled(); if ( ! disableAllOtherLines ) { + // if any other series is enabled, disableAllOtherLines for ( var i = 0; i < self.legend.lines.length; i++ ) { var l = self.legend.lines[i]; if ( line.series === l.series ) { // noop - } else if ( l.series.disabled ) { + } else if ( l.series.disabled() ) { // noop } else { disableAllOtherLines = true; diff --git a/src/js/Rickshaw.Graph.Legend.js b/src/js/Rickshaw.Graph.Legend.js index 3643b452..1efdc609 100644 --- a/src/js/Rickshaw.Graph.Legend.js +++ b/src/js/Rickshaw.Graph.Legend.js @@ -45,42 +45,70 @@ Rickshaw.Graph.Legend = Rickshaw.Class.create( { }, addLine: function (series) { - var line = document.createElement('li'); - line.className = 'line'; - if (series.disabled) { - line.className += ' disabled'; + var line; + for (var l = 0; l < this.list.children.length; l++) { + line = this.list.children[l]; + // don't need to check for line.series[0].name's existence. shouldn't have a line without it. + if (line.series[0].name == series.name) { + line.series.push(series); + break; + } } - if (series.className) { - d3.select(line).classed(series.className, true); - } - var swatch = document.createElement('div'); - swatch.className = 'swatch'; - swatch.style.backgroundColor = series.color; - - line.appendChild(swatch); - - var label = document.createElement('span'); - label.className = 'label'; - label.innerHTML = series.name; - line.appendChild(label); - this.list.appendChild(line); - - line.series = series; - - if (series.noLegend) { - line.style.display = 'none'; + if (l == this.list.children.length) { + line = document.createElement('li'); + line.className = 'line'; + if (series.disabled) { + line.className += ' disabled'; + } + if (series.className) { + d3.select(line).classed(series.className, true); + } + var swatch = document.createElement('div'); + swatch.className = 'swatch'; + swatch.style.backgroundColor = series.color; + + line.appendChild(swatch); + + var label = document.createElement('span'); + label.className = 'label'; + label.innerHTML = series.name; + + line.appendChild(label); + this.list.appendChild(line); + + line.series = [series]; + + if (series.noLegend) { + line.style.display = 'none'; + } } - var _line = { element: line, series: series }; - if (this.shelving) { - this.shelving.addAnchor(_line); - this.shelving.updateBehaviour(); + var _line; + for (l = 0; l < this.lines.length; l++) { + _line = this.lines[l]; + // don't need to check for _line.series[0].name's existence. shouldn't have a _line without it. + if (_line.series[0].name == series.name) { + _line.series.push(series); + break; + } } - if (this.highlighter) { - this.highlighter.addHighlightEvents(_line); + + if (l == this.lines.length) { + series = [series]; + series.disabled = function () {return this[0].disabled}; + series.enable = function () {this.forEach(function (s) {s.enable();})}; + series.disable = function () {this.forEach(function (s) {s.disable();})}; + _line = {element: line, series: series}; + if (this.shelving) { + this.shelving.addAnchor(_line); + this.shelving.updateBehaviour(); + } + if (this.highlighter) { + this.highlighter.addHighlightEvents(_line); + } + this.lines.push(_line); } - this.lines.push(_line); return line; } } ); From 3fd86ef6419bdb33298caa035065652c27f92908 Mon Sep 17 00:00:00 2001 From: Jayen Date: Tue, 22 Jul 2014 14:01:06 +1000 Subject: [PATCH 2/3] example for legend grouping multiple series by name --- examples/multi2.html | 179 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 examples/multi2.html diff --git a/examples/multi2.html b/examples/multi2.html new file mode 100644 index 00000000..a24f5710 --- /dev/null +++ b/examples/multi2.html @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + +
+
+
+
+
+ + + From d6b3308c73d3ec53efc5a19fb57cb6fec5c5c075 Mon Sep 17 00:00:00 2001 From: Jayen Date: Tue, 22 Jul 2014 14:10:13 +1000 Subject: [PATCH 3/3] updated test for legend grouping multiple series by name --- tests/Rickshaw.Graph.Legend.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/tests/Rickshaw.Graph.Legend.js b/tests/Rickshaw.Graph.Legend.js index 6144b956..d84f1e6b 100644 --- a/tests/Rickshaw.Graph.Legend.js +++ b/tests/Rickshaw.Graph.Legend.js @@ -27,6 +27,12 @@ exports.setUp = function(callback) { data: [ { x: 4, y: 32 } ] + }, + { + name: 'bar', + data: [ + { x: 32, y: 4 } + ] } ] }); @@ -83,6 +89,7 @@ exports.canOverrideClassName = function(test) { exports['should put series classes on legend elements'] = function(test) { this.graph.series[0].className = 'fnord-series-0'; this.graph.series[1].className = 'fnord-series-1'; + this.graph.series[2].className = 'fnord-series-2'; var legend = new Rickshaw.Graph.Legend({ graph: this.graph, @@ -90,6 +97,7 @@ exports['should put series classes on legend elements'] = function(test) { }); test.equal(d3.select(this.legendEl).selectAll('.line').size(), 2); test.equal(d3.select(this.legendEl).selectAll('.fnord-series-0').size(), 1); - test.equal(d3.select(this.legendEl).selectAll('.fnord-series-1').size(), 1); + test.equal(d3.select(this.legendEl).selectAll('.fnord-series-1').size(), 0); + test.equal(d3.select(this.legendEl).selectAll('.fnord-series-2').size(), 1); test.done(); }; \ No newline at end of file