Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for stepPlot per-series #204

Merged
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
FEATURE: Added tests for stepPlot option per series
eichsjul committed Feb 7, 2013

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 4fa81db559064456958ecbd49176556a2c998a91
1 change: 1 addition & 0 deletions auto_tests/misc/local.html
Original file line number Diff line number Diff line change
@@ -47,6 +47,7 @@
<script type="text/javascript" src="../tests/scrolling_div.js"></script>
<script type="text/javascript" src="../tests/selection.js"></script>
<script type="text/javascript" src="../tests/simple_drawing.js"></script>
<script type="text/javascript" src="../tests/stepPlot_per_series.js"></script>
<script type="text/javascript" src="../tests/stacked.js"></script>
<!--
<script type="text/javascript" src="../tests/tickers.js"></script>
429 changes: 429 additions & 0 deletions auto_tests/tests/stepPlot_per_series.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,429 @@
/**
* @fileoverview Test cases for the option "stepPlot" especially for the scenario where the option is not set for the whole graph but for single series.
*
* @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
*/
var stepTestCase = TestCase("stepPlot_per_series");

stepTestCase.prototype.setUp = function() {
document.body.innerHTML = "<div id='graph'></div>";
};

var _origFunc = Dygraph.getContext;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a global variable which might conflict with others. I suggest you use stepTestCase.origFunc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have based this behavior on the following tests:

custom_bars.js
error_bars.js
missing_points.js
simple_drawing.js
to_dom_coords.js

which all use the same global variable. We're not sure what to do now since the same would apply to all of these tests. Any idea?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Take care of yours, and I'll fix it for all the others.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also note that the standard is to have the test case name capitalized. Can you tweak that too, please?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You know what? Don't worry about the test name. There are enough that are different. Maybe I'll go fix them historically, but no big deal.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will change the test name and also change the file name to lower case. We will also adapt the global var for the orginal getContext function for our text. thx

stepTestCase.prototype.setUp = function() {
document.body.innerHTML = "<div id='graph'></div>";
Dygraph.getContext = function(canvas) {
return new Proxy(_origFunc(canvas));
};
};

stepTestCase.prototype.tearDown = function() {
Dygraph.getContext = _origFunc;
};

stepTestCase.prototype.testMixedModeStepAndLineFilled = function() {
var opts = {
width: 480,
height: 320,
drawXGrid: false,
drawYGrid: false,
drawXAxis: false,
drawYAxis: false,
errorBars: false,
labels: ["X", "Idle", "Used"],
series: {
Idle: {stepPlot: false},
Used: {stepPlot: true}
},
fillGraph: true,
stackedGraph: false,
includeZero: true
};

var data = [
[1, 70,30],
[2, 12,88],
[3, 88,12],
[4, 63,37],
[5, 35,65]
];

var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);

htx = g.hidden_ctx_;

var attrs = {};


for (var i = 0; i < data.length - 1; i++) {

var x1 = data[i][0];
var x2 = data[i + 1][0];

var y1 = data[i][1];
var y2 = data[i + 1][1];

// First series (line)
var xy1 = g.toDomCoords(x1, y1);
var xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

y1 = data[i][2];
y2 = data[i + 1][2];

// Seconds series (step)
// Horizontal line
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
}
};

stepTestCase.prototype.testMixedModeStepAndLineStackedAndFilled = function() {
var opts = {
width: 480,
height: 320,
drawXGrid: false,
drawYGrid: false,
drawXAxis: false,
drawYAxis: false,
errorBars: false,
labels: ["X", "Idle", "Used", "NotUsed", "Active"],
series: {
Idle: {stepPlot: false},
Used: {stepPlot: true},
NotUsed: {stepPlot: false},
Active: {stepPlot: true}
},
fillGraph: true,
stackedGraph: true,
includeZero: true
};

var data = [
[1, 60,30,5,5],
[2, 12,73,5,10],
[3, 38,12,30,20],
[4, 50,17,23,10],
[5, 35,25,35,5]
];

var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);

htx = g.hidden_ctx_;

var attrs = {};


for (var i = 0; i < data.length - 1; i++) {

var x1 = data[i][0];
var x2 = data[i + 1][0];
var y1base = 0;
var y2base = 0;
var y1 = data[i][4];
var y2 = data[i + 1][4];


// Fourth series (step)
// Test lines
// Horizontal line
var xy1 = g.toDomCoords(x1, y1);
var xy2 = g.toDomCoords(x2, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Test edges of areas (also drawn by dygraphs as lines)
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x2, y2base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

y1base = y1;
y2base = y2;
y1 += data[i][3];
y2 += data[i + 1][3];

// Third series (line)
// Test lines
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Test edges of areas (also drawn by dygraphs as lines)
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x2, y2base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

y1base = y1;
y2base = y2;
y1 += data[i][2];
y2 += data[i + 1][2];

// Second series (step)
// Test lines
// Horizontal line
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Test edges of areas (also drawn by dygraphs as lines)
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x2, y2base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

y1base = y1;
y2base = y2;
y1 += data[i][1];
y2 += data[i + 1][1];

// First series (line)
// Test lines
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Test edges of areas (also drawn by dygraphs as lines)
xy1 = g.toDomCoords(x1, y1);
xy2 = g.toDomCoords(x2, y2);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x2, y2base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1base);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
xy1 = xy2;
xy2 = g.toDomCoords(x1, y1);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
}
};

stepTestCase.prototype.testMixedModeStepAndLineErrorBars = function() {
var opts = {
width: 480,
height: 320,
drawXGrid: false,
drawYGrid: false,
drawXAxis: false,
drawYAxis: false,
errorBars: true,
sigma: 1,
labels: ["X", "Data1", "Data2"],
series: {
Data1: {stepPlot: true},
Data2: {stepPlot: false}
}
};
var data = [
[1, [75, 2], [50, 3]],
[2, [70, 5], [90, 4]],
[3, [80, 7], [112, 5]],
[4, [55, 3], [100, 2]],
[5, [69, 4], [85, 6]]
];

var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);

htx = g.hidden_ctx_;

var attrs = {};

// Test first series (step)
for (var i = 0; i < data.length - 1; i++) {
var x1 = data[i][0];
var x2 = data[i + 1][0];

var y1_middle = data[i][1][0];
var y2_middle = data[i + 1][1][0];

var y1_top = y1_middle + data[i][1][1];
var y2_top = y2_middle + data[i + 1][1][1];

var y1_bottom = y1_middle - data[i][1][1];
var y2_bottom = y2_middle - data[i + 1][1][1];
// Bottom line
// Horizontal line
var xy1 = g.toDomCoords(x1, y1_bottom);
var xy2 = g.toDomCoords(x2, y1_bottom);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1_bottom);
xy2 = g.toDomCoords(x2, y2_bottom);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Top line
// Horizontal line
xy1 = g.toDomCoords(x1, y1_top);
xy2 = g.toDomCoords(x2, y1_top);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1_top);
xy2 = g.toDomCoords(x2, y2_top);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Middle line
// Horizontal line
xy1 = g.toDomCoords(x1, y1_middle);
xy2 = g.toDomCoords(x2, y1_middle);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1_middle);
xy2 = g.toDomCoords(x2, y2_middle);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
}

// Test second series (line)
for (var i = 0; i < data.length - 1; i++) {
// bottom line
var xy1 = g.toDomCoords(data[i][0], (data[i][2][0] - data[i][2][1]));
var xy2 = g.toDomCoords(data[i + 1][0], (data[i + 1][2][0] - data[i + 1][2][1]));
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// top line
xy1 = g.toDomCoords(data[i][0], data[i][2][0] + data[i][2][1]);
xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0] + data[i + 1][2][1]);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// middle line
xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
}

};

stepTestCase.prototype.testMixedModeStepAndLineCustomBars = function() {
var opts = {
width: 480,
height: 320,
drawXGrid: false,
drawYGrid: false,
drawXAxis: false,
drawYAxis: false,
customBars: true,
labels: ["X", "Data1", "Data2"],
series: {
Data1: {stepPlot: true},
Data2: {stepPlot: false}
}
};
var data = [
[1, [73, 75, 78], [50, 55, 70]],
[2, [65, 70, 75], [83, 91, 99]],
[3, [75, 85, 90], [98, 107, 117]],
[4, [55, 58, 61], [93, 102, 105]],
[5, [69, 73, 85], [80, 85, 87]]
];

var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);

htx = g.hidden_ctx_;

var attrs = {};

// Test first series (step)
for (var i = 0; i < data.length - 1; i++) {

var x1 = data[i][0];
var x2 = data[i + 1][0];

var y1_middle = data[i][1][1];
var y2_middle = data[i + 1][1][1];

var y1_top = data[i][1][2];
var y2_top = data[i + 1][1][2];

var y1_bottom = data[i][1][0];
var y2_bottom = data[i + 1][1][0];

// Bottom line
// Horizontal line
var xy1 = g.toDomCoords(x1, y1_bottom);
var xy2 = g.toDomCoords(x2, y1_bottom);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1_middle);
xy2 = g.toDomCoords(x2, y2_middle);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Top line
// Horizontal line
xy1 = g.toDomCoords(x1, y1_top);
xy2 = g.toDomCoords(x2, y1_top);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1_middle);
xy2 = g.toDomCoords(x2, y2_middle);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Middle line
// Horizontal line
xy1 = g.toDomCoords(x1, y1_middle);
xy2 = g.toDomCoords(x2, y1_middle);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
// Vertical line
xy1 = g.toDomCoords(x2, y1_middle);
xy2 = g.toDomCoords(x2, y2_middle);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
}

// Test second series (line)
for (var i = 0; i < data.length - 1; i++) {
// Bottom line
var xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Top line
xy1 = g.toDomCoords(data[i][0], data[i][2][2]);
xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][2]);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);

// Middle line
xy1 = g.toDomCoords(data[i][0], data[i][2][1]);
xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][1]);
CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
}
};