Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Dynamic Legend: Fix for Rickshaw GitHub Issue #89 #266

Open
wants to merge 3 commits into from

3 participants

@mpderbec

This pull request fixes up the Legend class so that it can properly respond to series that are being dynamically added/removed. I modified the extensions.html example so that it (quickly) adds the series one at a time to the graph. This will hopefully expose any non-dynamic problems in the future.

Tests conducted:

  • Extensions.html thoroughly tested by manual operation.
  • Exercised Highlight, Toggle and Order behaviors.
  • Executed nodeunit tests.
Mark Derbecker added some commits
Mark Derbecker Fix for Rickshaw GitHub Issue #89
- Re-factored Rickshaw.Graph.Legend considerably to allow for dynamic series additions/deletions.
- Removed somewhat brittle "series-reordering" code in Rickshaw.Behavior.Series.Highlight and added the concept of zOrder to the Renderer.
d318d76
Mark Derbecker Bug fixes for previous commit:
- Legend order had been reversed from previous version. Fixed.
- Rickshaw.Graph.Behavior.Series.Order.js interactions with the Legend were broken. Fixed.
6406e84
Mark Derbecker Modified "extensions.html" example so that it builds up the graph one…
… series at a time. This properly exercises the dynamic nature of the legend and the series behaviors.
a2e16ef
@mpderbec mpderbec referenced this pull request
Open

Add/Remove series data #89

@mpderbec

I will mention that I attempted to use pull request #201 prior to embarking on this set of changes… Unfortunately it did not fix the issue for all edge cases and all of the current extensions.

@dchester
Owner

Thanks -- this is a good problem to solve. We have a branch around that aims to address some of these same issues. I'll take a pass through each and pull this together.

@rbu

How is the dynamic series branch doing, btw? It probably needs some work being rebased to current master, is that worth a shot? @dchester, do you remember what issues you had with the work so far and what needs to be done to get that branch and/or this PR merged?

@rbu

Probably should have that discussion on #341....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 20, 2013
  1. Fix for Rickshaw GitHub Issue #89

    Mark Derbecker authored
    - Re-factored Rickshaw.Graph.Legend considerably to allow for dynamic series additions/deletions.
    - Removed somewhat brittle "series-reordering" code in Rickshaw.Behavior.Series.Highlight and added the concept of zOrder to the Renderer.
  2. Bug fixes for previous commit:

    Mark Derbecker authored
    - Legend order had been reversed from previous version. Fixed.
    - Rickshaw.Graph.Behavior.Series.Order.js interactions with the Legend were broken. Fixed.
  3. Modified "extensions.html" example so that it builds up the graph one…

    Mark Derbecker authored
    … series at a time. This properly exercises the dynamic nature of the legend and the series behaviors.
This page is out of date. Refresh to see the latest.
View
1  examples/css/extensions.css
@@ -17,6 +17,7 @@ div, span, p, td {
display: inline-block;
position: relative;
left: 8px;
+ height: 150px;
}
#legend_container {
position: absolute;
View
38 examples/extensions.html
@@ -120,16 +120,7 @@
var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );
-// instantiate our graph!
-
-var graph = new Rickshaw.Graph( {
- element: document.getElementById("chart"),
- width: 900,
- height: 500,
- renderer: 'area',
- stroke: true,
- preserve: true,
- series: [
+var seriesArray = [
{
color: palette.color(),
data: seriesData[0],
@@ -159,7 +150,19 @@
data: seriesData[6],
name: 'New York'
}
- ]
+ ];
+
+// instantiate our graph!
+
+var graphSeries = [seriesArray[0]];
+var graph = new Rickshaw.Graph( {
+ element: document.getElementById("chart"),
+ width: 900,
+ height: 500,
+ renderer: 'area',
+ stroke: true,
+ preserve: true,
+ series: graphSeries
} );
graph.render();
@@ -255,6 +258,19 @@
addAnnotation(true);
setTimeout( function() { setInterval( addAnnotation, 6000 ) }, 6000 );
+function addNewSeries() {
+ var i = graphSeries.length;
+ if (i >= seriesArray.length) {
+ return;
+ } else {
+ graphSeries[i] = seriesArray[i];
+ setTimeout(addNewSeries, 50);
+ }
+ graph.update();
+}
+
+addNewSeries();
+
</script>
</body>
View
22 src/js/Rickshaw.Graph.Behavior.Series.Highlight.js
@@ -26,19 +26,15 @@ 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 (index > 0 && self.graph.renderer.unstack && (line.series.renderer ? line.series.renderer.unstack : true)) {
-
- var seriesIndex = self.graph.series.length - index - 1;
- line.originalIndex = seriesIndex;
-
- var series = self.graph.series.splice(seriesIndex, 1)[0];
- self.graph.series.push(series);
+ if (self.graph.renderer.unstack && (line.series.renderer ? line.series.renderer.unstack : true)) {
+ line.series.zOrder = 1;
}
return;
}
colorSafe[line.series.name] = colorSafe[line.series.name] || line.series.color;
line.series.color = disabledColor(line.series.color);
+ line.series.zOrder = 0;
} );
@@ -53,17 +49,11 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
self.legend.lines.forEach( function(line) {
- // return reordered series to its original place
- if (l === line && line.hasOwnProperty('originalIndex')) {
-
- var series = self.graph.series.pop();
- self.graph.series.splice(line.originalIndex, 0, series);
- delete line.originalIndex;
- }
-
if (colorSafe[line.series.name]) {
line.series.color = colorSafe[line.series.name];
}
+ line.series.zOrder = 0;
+
} );
self.graph.update();
@@ -75,6 +65,8 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
this.legend.lines.forEach( function(l) {
self.addHighlightEvents(l);
} );
+
+ this.legend.highlighter = this;
}
};
View
1  src/js/Rickshaw.Graph.Behavior.Series.Toggle.js
@@ -119,4 +119,5 @@ Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
this.updateBehaviour = function () { this._addBehavior() };
+ this.legend.toggler = this;
};
View
116 src/js/Rickshaw.Graph.Legend.js
@@ -9,58 +9,100 @@ Rickshaw.Graph.Legend = function(args) {
element.classList.add('rickshaw_legend');
- var list = this.list = document.createElement('ul');
- element.appendChild(list);
+ this.list = document.createElement('ul');
+ element.appendChild(this.list);
- var series = graph.series
- .map( function(s) { return s } );
+ this.prepareSeries = function(unpreparedSeries) {
+ var preparedSeries = unpreparedSeries.map(function(s) {
+ return s;
+ });
- if (!args.naturalOrder) {
- series = series.reverse();
- }
+ if (!args.naturalOrder) {
+ preparedSeries = preparedSeries.reverse();
+ }
+
+ return preparedSeries;
+ };
this.lines = [];
- this.addLine = function (series) {
- var line = document.createElement('li');
- line.className = 'line';
- if (series.disabled) {
- line.className += ' disabled';
- }
+ this.addLine = function(series) {
+ var lineElement = document.createElement('li');
+ lineElement.series = series;
- var swatch = document.createElement('div');
- swatch.className = 'swatch';
- swatch.style.backgroundColor = series.color;
+ var lineData = {
+ element: lineElement,
+ series: series
+ };
- line.appendChild(swatch);
+ lineData.swatch = document.createElement('div');
+ lineElement.appendChild(lineData.swatch);
- var label = document.createElement('span');
- label.className = 'label';
- label.innerHTML = series.name;
+ lineData.label = document.createElement('span');
+ lineElement.appendChild(lineData.label);
- line.appendChild(label);
- list.appendChild(line);
+ this.updateLineBehavior(lineData);
+
+ if (self.toggler) {
+ self.toggler.addAnchor(lineData);
+ self.toggler.updateBehaviour();
+ }
+ if (self.highlighter) {
+ self.highlighter.addHighlightEvents(lineData);
+ }
- line.series = series;
+ return lineData;
+ };
- if (series.noLegend) {
- line.style.display = 'none';
+ this.updateLineBehavior = function(lineData) {
+ if (lineData.series.noLegend) {
+ lineData.element.style.display = 'none';
}
- var _line = { element: line, series: series };
- if (self.shelving) {
- self.shelving.addAnchor(_line);
- self.shelving.updateBehaviour();
+ lineData.element.className = 'line';
+ if (lineData.series.disabled) {
+ lineData.element.className += ' disabled';
}
- if (self.highlighter) {
- self.highlighter.addHighlightEvents(_line);
+
+ lineData.swatch.className = 'swatch';
+ lineData.swatch.style.backgroundColor = lineData.series.color;
+
+ lineData.label.className = 'label';
+ lineData.label.innerHTML = lineData.series.name;
+ };
+
+ this.updateLines = function() {
+ var newSetOfLines = [];
+ var seriesArray = this.prepareSeries(graph.series);
+
+ for (var i = 0; i < seriesArray.length; i++) {
+ var series = seriesArray[i];
+ var existingLine = null;
+ for (var j = self.lines.length - 1; j >= 0; j--) {
+ if (self.lines[j].series === series) {
+ existingLine = self.lines[j];
+ break;
+ }
+ }
+
+ if (existingLine !== null) {
+ newSetOfLines.push(existingLine);
+ } else {
+ newSetOfLines.push(self.addLine(series));
+ }
}
- self.lines.push(_line);
+
+ self.lines = newSetOfLines;
+
+ self.list.innerHTML = '';
+ self.lines.forEach(function (lineData) {
+ self.list.appendChild(lineData.element);
+ });
};
- series.forEach( function(s) {
- self.addLine(s);
- } );
+ self.updateLines();
- graph.onUpdate( function() {} );
-};
+ graph.onUpdate(function() {
+ self.updateLines();
+ });
+};
View
14 src/js/Rickshaw.Graph.Renderer.js
@@ -82,7 +82,11 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
var vis = args.vis || graph.vis;
vis.selectAll('*').remove();
- var data = series
+ var orderedSeries = series
+ .slice(0)
+ .sort(function(a, b) { return a.zOrder !== undefined && b.zOrder !== undefined && a.zOrder > b.zOrder; });
+
+ var data = orderedSeries
.filter(function(s) { return !s.disabled })
.map(function(s) { return s.stack });
@@ -92,10 +96,10 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
.attr("d", this.seriesPathFactory());
var i = 0;
- series.forEach( function(series) {
- if (series.disabled) return;
- series.path = nodes[0][i++];
- this._styleSeries(series);
+ orderedSeries.forEach( function(s) {
+ if (s.disabled) return;
+ s.path = nodes[0][i++];
+ this._styleSeries(s);
}, this );
},
Something went wrong with that request. Please try again.