charts.html revision 612b06cc570a4ff121dd3a165902c88fae294358
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
/*Supplemental: CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(/assets/bg_hd.gif);}
#mychart {
padding:10px 10px 10px 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts-min.css">
</head>
<body class="yui3-skin-sam">
<h3>Unit Tests</h3>
<div id="mychart"></div>
<script type="text/javascript" src="/build/yui/yui-min.js"></script>
<script>
YUI({
allowRollup: false,
filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
}).use('charts', 'test', 'console', function (Y)
{
Y.namespace("example.test");
//-------------------------------------------------------------------------
// Chart dataProvider Test Case
//-------------------------------------------------------------------------
function ChartDataProviderTestCase(cfg, type)
{
ChartDataProviderTestCase.superclass.constructor.call(this);
this.attrCfg = cfg;
this.name = type + " DataProvider Tests";
}
Y.extend(ChartDataProviderTestCase, Y.Test.Case, {
//---------------------------------------------------------------------
// Setup and teardown of test harnesses
//---------------------------------------------------------------------
/*
* Sets up several event handlers used to test UserAction mouse events.
*/
setUp : function()
{
//create the chart
this.chart = new Y.Chart(this.attrCfg);
this.contentBox = this.chart.get("contentBox");
},
/*
* Removes event handlers that were used during the test.
*/
tearDown : function()
{
this.chart.destroy();
},
testKeys: ["revenue", "expenses", "miscellaneous"],
testDefault: function()
{
var chart = this.chart,
testKeys = this.testKeys,
seriesCollection = chart.get("seriesCollection"),
i;
for(i in testKeys)
{
Y.Assert.isTrue(seriesCollection.hasOwnProperty(i));
Y.assert(seriesCollection[i] instanceof Y.CartesianSeries);
}
}
});
Y.ChartDataProviderTestCase = ChartDataProviderTestCase;
var suite = new Y.Test.Suite("Y.Charts"),
ChartTests = new Y.Test.Case({
name: "Chart Tests",
setUp: function() {
var myDataValues = [
{category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
{category:"5/2/2010", values:50, expenses:9100, revenue:100},
{category:"5/3/2010", values:400, expenses:1100, revenue:1500},
{category:"5/4/2010", values:200, expenses:1900, revenue:2800},
{category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
];
var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues});
mychart.render("#mychart");
this.chart = mychart;
},
tearDown: function() {
this.chart.destroy();
},
//Test to ensure that all items in the series collection are of the correct type.
testGetSeriesByIndex: function()
{
var series = this.chart.getSeries(0),
assert = Y.Assert;
assert.isInstanceOf(Y.CartesianSeries, series);
},
//Test to ensure that all items in the series collection are of the correct type.
testGetSeriesByKey: function()
{
var series = this.chart.getSeries("revenue"),
assert = Y.Assert;
assert.isInstanceOf(Y.CartesianSeries, series);
},
//Test to ensure the series axes are numeric and the category axis is of type category
testGetAxesByKey: function()
{
var category = this.chart.getAxisByKey("category"),
values = this.chart.getAxisByKey("values"),
assert = Y.Assert;
assert.isInstanceOf(Y.CategoryAxis, category);
assert.isInstanceOf(Y.NumericAxis, values);
},
//Test to ensure that getCategoryAxis returns a category axis
testGetCategoryAxis: function()
{
var category = this.chart.get("categoryAxis"),
assert = Y.Assert;
assert.isInstanceOf(Y.CategoryAxis, category);
},
//Test that the graph attribute is of type Graph
testGetGraph: function()
{
Y.Assert.isInstanceOf(Y.Graph, this.chart.get("graph"));
},
//Test to ensure that the axes hash contains AxisRenderer instances
testGetAxes: function()
{
var assert = Y.Assert,
axes = this.chart.get("axes"),
i;
for(i in axes)
{
if(axes.hasOwnProperty(i))
{
assert.isInstanceOf(Y.Axis, axes[i]);
}
}
},
//Test to ensure that default series keys are correct
testGetSeriesKeys: function()
{
var assert = Y.Assert,
YArray = Y.Array,
selectedIndex,
testKeys = ['values', 'expenses', 'revenue'],
newArray = [],
actualKeys = this.chart.get("seriesKeys"),
i = 0,
len = testKeys.length;
assert.areEqual(actualKeys.length, testKeys.length, "Actual seriesKeys array is not the correct length.");
for(; i < len; ++i)
{
selectedIndex = YArray.indexOf(actualKeys, testKeys[i]);
assert.isNotNull(selectedIndex + 1, "The seriesKeys array should contain the following key: " + testKeys[i] + ".");
if(selectedIndex > -1)
{
newArray.push(actualKeys[selectedIndex]);
}
else
{
throw new Error("The actual seriesKeys array should but does not contain " + testKeys[i] + ".");
}
}
assert.areEqual(newArray.length, actualKeys.length, "The seriesKeys array has more keys than it should.");
},
//Test to ensure default attributes are correct
testGetDefaultAttributes: function()
{
var assert = Y.Assert,
attrs = {
direction: "horizontal",
type: "combo",
valueAxisName: "values",
categoryAxisName: "category",
categoryKey: "category",
categoryType: "category",
interactionType: "marker"
},
chart = this.chart,
i;
for(i in attrs)
{
if(attrs.hasOwnProperty(i))
{
assert.areEqual(chart.get(i), attrs[i], "The attribute " + i + " should equal " + attrs[i] + ".");
}
}
}
}),
AxesAttributeTests = new Y.Test.Case({
name: "Axes Attribute Tests",
myDataValues: [
{date:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
{date:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
{date:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
{date:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
{date:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
],
startAxes: {
financials:{
keys:["miscellaneous", "revenue", "expenses"],
position:"right",
type:"numeric",
styles:{
majorTicks:{
display: "none"
}
}
},
dateRange:{
keys:["date"],
position:"bottom",
type:"category",
styles:{
majorTicks:{
display: "none"
},
label: {
rotation:-45,
margin:{top:5}
}
}
}
},
updateAxes: {
financials:{
keys:["miscellaneous", "revenue", "expenses"],
position:"left",
type:"numeric",
styles:{
majorTicks:{
display: "none"
},
label: {
margin: {
left: 0,
right: 4
}
}
}
},
dateRange:{
keys:["date"],
position:"bottom",
type:"category",
styles:{
majorTicks:{
display: "none"
},
label: {
rotation:-90,
margin:{top:5}
}
}
}
},
setUp: function()
{
var mychart = new Y.Chart({width:400, height:300,
categoryKey: "date",
dataProvider:this.myDataValues,
axes: this.startAxes,
render:"#mychart"
});
this.chart = mychart;
},
tearDown: function() {
this.chart.destroy();
},
testStartCatAxes: function()
{
var assert = Y.Assert,
chart = this.chart,
axis = chart.get("categoryAxis"),
i,
defaults = this.startAxes.dateRange,
position = defaults.position,
type = defaults.type,
styles = defaults.styles,
majorTickDisplay = styles.majorTicks.display,
label = styles.label,
labelRotation = label.rotation,
labelMarginTop = label.margin.top,
axisStyles = axis.get("styles");
assert.areEqual(position, axis.get("position"), "The value of position should be " + position);
assert.areEqual(type, axis.get("type"), "The value of type should be " + type);
assert.areEqual(majorTickDisplay, axisStyles.majorTicks.display, "The axis style majorTickDisplay.top should be " + majorTickDisplay);
assert.areEqual(labelRotation, axisStyles.label.rotation, "The axis label style rotation should be " + labelRotation);
assert.areEqual(labelMarginTop, axisStyles.label.margin.top, "The axis label style margin.top should be " + labelMarginTop);
},
testStartValueAxes: function()
{
var assert = Y.Assert,
chart = this.chart,
axis = chart.getAxisByKey("financials"),
i,
defaults = this.startAxes.financials,
position = defaults.position,
type = defaults.type,
styles = defaults.styles,
majorTickDisplay = styles.majorTicks.display,
axisStyles = axis.get("styles");
assert.areEqual(position, axis.get("position"), "The value of position should be " + position);
assert.areEqual(type, axis.get("type"), "The value of type should be " + type);
assert.areEqual(majorTickDisplay, axisStyles.majorTicks.display, "The axis style majorTickDisplay.top should be " + majorTickDisplay);
},
testUpdateCatAxes: function()
{
this.chart.set("axes", this.updateAxes);
var assert = Y.Assert,
chart = this.chart,
axis = chart.get("categoryAxis"),
i,
defaults = this.updateAxes.dateRange,
position = defaults.position,
type = defaults.type,
styles = defaults.styles,
majorTickDisplay = styles.majorTicks.display,
label = styles.label,
labelRotation = label.rotation,
labelMarginTop = label.margin.top,
axisStyles = axis.get("styles");
assert.areEqual(position, axis.get("position"), "The value of position should be " + position);
assert.areEqual(type, axis.get("type"), "The value of type should be " + type);
assert.areEqual(majorTickDisplay, axisStyles.majorTicks.display, "The axis style majorTickDisplay.top should be " + majorTickDisplay);
assert.areEqual(labelRotation, axisStyles.label.rotation, "The axis label style rotation should be " + labelRotation);
assert.areEqual(labelMarginTop, axisStyles.label.margin.top, "The axis label style margin.top should be " + labelMarginTop);
},
testUpdateValueAxes: function()
{
this.chart.set("axes", this.updateAxes);
var assert = Y.Assert,
chart = this.chart,
axis = chart.getAxisByKey("financials"),
i,
defaults = this.updateAxes.financials,
position = defaults.position,
type = defaults.type,
styles = defaults.styles,
majorTickDisplay = styles.majorTicks.display,
labelMargin = styles.label.margin,
labelMarginLeft = labelMargin.left,
labelMarginRight = labelMargin.right,
axisStyles = axis.get("styles");
assert.areEqual(position, axis.get("position"), "The value of position should be " + position);
assert.areEqual(type, axis.get("type"), "The value of type should be " + type);
assert.areEqual(majorTickDisplay, axisStyles.majorTicks.display, "The axis style majorTick.display should be " + majorTickDisplay);
assert.areEqual(labelMarginLeft, axisStyles.label.margin.left, "The axis label style margin.left should be " + labelMarginLeft);
assert.areEqual(labelMarginRight, axisStyles.label.margin.right, "The axis label style margin.right should be " + labelMarginRight);
}
}),
GraphTests = new Y.Test.Case({
name: "Graph Tests",
setUp: function() {
var myDataValues = [
{category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
{category:"5/2/2010", values:50, expenses:9100, revenue:100},
{category:"5/3/2010", values:400, expenses:1100, revenue:1500},
{category:"5/4/2010", values:200, expenses:1900, revenue:2800},
{category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
];
var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues, seriesKeys:["values", "revenue"]});
mychart.render("#mychart");
this.chart = mychart;
},
tearDown: function() {
this.chart.destroy();
},
"test:graph._getSeries(line)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("line");
Y.Assert.areEqual(series, Y.LineSeries, "The series type should be Y.LineSeries");
},
"test:graph._getSeries(column)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("column");
Y.Assert.areEqual(series, Y.ColumnSeries, "The series type should be Y.ColumnSeries");
},
"test:graph._getSeries(bar)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("bar");
Y.Assert.areEqual(series, Y.BarSeries, "The series type should be Y.BarSeries");
},
"test:graph._getSeries(area)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("area");
Y.Assert.areEqual(series, Y.AreaSeries, "The series type should be Y.AreaSeries");
},
"test:graph._getSeries(stackedarea)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedarea");
Y.Assert.areEqual(series, Y.StackedAreaSeries, "The series type should be Y.StackedAreaSeries");
},
"test:graph._getSeries(stackedcolumn)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedcolumn");
Y.Assert.areEqual(series, Y.StackedColumnSeries, "The series type should be Y.StackedColumnSeries");
},
"test:graph._getSeries(stackedbar)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedbar");
Y.Assert.areEqual(series, Y.StackedBarSeries, "The series type should be Y.StackedBarSeries");
},
"test:graph._getSeries(stackedline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedline");
Y.Assert.areEqual(series, Y.StackedLineSeries, "The series type should be Y.StackedLineSeries");
},
"test:graph._getSeries(markerseries)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("markerseries");
Y.Assert.areEqual(series, Y.MarkerSeries, "The series type should be Y.MarkerSeries");
},
"test:graph._getSeries(stackedmarkerseries)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedmarkerseries");
Y.Assert.areEqual(series, Y.StackedMarkerSeries, "The series type should be Y.StackedMarkerSeries");
},
"test:graph._getSeries(spline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("spline");
Y.Assert.areEqual(series, Y.SplineSeries, "The series type should be Y.SplineSeries");
},
"test:graph._getSeries(areaspline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("areaspline");
Y.Assert.areEqual(series, Y.AreaSplineSeries, "The series type should be Y.AreaSplineSeries");
},
"test:graph._getSeries(stackedspline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedspline");
Y.Assert.areEqual(series, Y.StackedSplineSeries, "The series type should be Y.StackedSplineSeries");
},
"test:graph._getSeries(stackedareapline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedareaspline");
Y.Assert.areEqual(series, Y.StackedAreaSplineSeries, "The series type should be Y.StackedAreaSplineSeries");
},
"test:graph._getSeries(pie)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("pie");
Y.Assert.areEqual(series, Y.PieSeries, "The series type should be Y.PieSeries");
},
"test:graph._getSeries(combo)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("combo");
Y.Assert.areEqual(series, Y.ComboSeries, "The series type should be Y.ComboSeries");
},
"test:graph._getSeries(stackedcombo)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedcombo");
Y.Assert.areEqual(series, Y.StackedComboSeries, "The series type should be Y.StackedComboSeries");
},
"test:graph._getSeries(combospline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("combospline");
Y.Assert.areEqual(series, Y.ComboSplineSeries, "The series type should be Y.ComboSplineSeries");
},
"test:graph._getSeries(stackedcombospline)": function()
{
var graph = this.chart.get("graph"),
series = graph._getSeries("stackedcombospline");
Y.Assert.areEqual(series, Y.StackedComboSplineSeries, "The series type should be Y.StackedComboSplineSeries");
},
"test:graph._getSeries(customclass)" : function()
{
var graph = this.chart.get("graph"),
series;
Y.CustomLineSeries = Y.Base.create("customLineSeries", Y.LineSeries, [], {
mycustomprop: null,
mycustommethod: function()
{
var yaypie = "mmmm";
yaypie += "Pie";
}
});
series = graph._getSeries(Y.CustomLineSeries);
Y.Assert.areEqual(series, Y.CustomLineSeries, "The series type should be Y.CustomLineSeries");
}
}),
//test to ensure that pie charts are drawn from center
//pie charts need to have the same width/height
PieCenterTest = new Y.Test.Case({
name: "PieChartCenterTest",
setUp: function() {
var myDataValues = [
{day:"Monday", taxes:2000},
{day:"Tuesday", taxes:50},
{day:"Wednesday", taxes:4000},
{day:"Thursday", taxes:200},
{day:"Friday", taxes:2000}
];
var mychart = new Y.Chart({type: "pie", width:400, height:400, dataProvider:myDataValues});
mychart.render("#mychart");
this.chart = mychart;
},
tearDown: function() {
this.chart.destroy();
},
testWidthAndHeightEqual: function()
{
var graphic = this.chart.get("graph").get("graphic"),
shapes = graphic.get("shapes"),
i,
shape;
for(i in shapes)
{
if(shapes.hasOwnProperty(i))
{
shape = shapes[i];
Y.assert(shape.get("width") === shape.get("height"));
}
}
},
testWidthGreaterThanHeight: function()
{
var graphic = this.chart.get("graph").get("graphic"),
shapes,
i,
shape;
this.chart.set("width", 500);
shapes = graphic.get("shapes");
for(i in shapes)
{
if(shapes.hasOwnProperty(i))
{
shape = shapes[i];
Y.assert(shape.get("width") === shape.get("height"));
}
}
},
testHeightGreaterThanWidth: function()
{
var graphic = this.chart.get("graph").get("graphic"),
shapes,
i,
shape;
this.chart.set("height", 600);
shapes = graphic.get("shapes");
for(i in shapes)
{
if(shapes.hasOwnProperty(i))
{
shape = shapes[i];
Y.assert(shape.get("width") === shape.get("height"));
}
}
}
}),
allPositiveDataProvider = [
{category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
{category:"5/2/2010", values:50, expenses:9100, revenue:100},
{category:"5/3/2010", values:400, expenses:1100, revenue:1500},
{category:"5/4/2010", values:200, expenses:1900, revenue:2800},
{category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
],
positiveAndNegativeDataProvider = [
{category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
{category:"5/2/2010", values:50, expenses:9100, revenue:-100},
{category:"5/3/2010", values:-400, expenses:-1100, revenue:1500},
{category:"5/4/2010", values:200, expenses:1900, revenue:-2800},
{category:"5/5/2010", values:5000, expenses:-5000, revenue:2650}
],
allNegativeDataProvider = [
{category:"5/1/2010", values:-2000, expenses:-3700, revenue:-2200},
{category:"5/2/2010", values:-50, expenses:-9100, revenue:-100},
{category:"5/3/2010", values:-400, expenses:-1100, revenue:-1500},
{category:"5/4/2010", values:-200, expenses:-1900, revenue:-2800},
{category:"5/5/2010", values:-5000, expenses:-5000, revenue:-2650}
],
decimalDataProvider = [
{category:"5/1/2010", values:2.45, expenses:3.71, revenue:2.2},
{category:"5/2/2010", values:0.5, expenses:9.1, revenue:0.16},
{category:"5/3/2010", values:1.4, expenses:1.14, revenue:1.25},
{category:"5/4/2010", values:0.05, expenses:1.9, revenue:2.8},
{category:"5/5/2010", values:5.53, expenses:5.21, revenue:2.65}
],
missingDataSmallDataProvider = [
{date: "1/1/2010", expenses: 3700},
{date: "1/2/2010", revenue: 2200},
{date: "2/1/2010", expenses: 9100},
{date: "2/2/2010", revenue: 100}
],
missingDataLargeDataProvider = [
{date: "1/1/2010", expenses: 3700},
{date: "1/2/2010", revenue: 2200},
{date: "1/3/2010", expenses: 3000},
{date: "1/4/2010", revenue: 400},
{date: "2/1/2010", expenses: 9100},
{date: "2/2/2010", revenue: 100},
{date: "2/3/2010", expenses: 3300},
{date: "2/4/2010", revenue: 1500}
],
nullValuesDataProvider = [
{category:"5/1/2010", values:null, expenses:3700, revenue:2200},
{category:"5/2/2010", values:50, expenses:null, revenue:100},
{category:"5/3/2010", values:400, expenses:1100, revenue:null},
{category:"5/4/2010", values:200, expenses:1900, revenue:2800},
{category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
],
missingFirstValuesDataProvider = [
{category:"5/1/2010"},
{category:"5/2/2010", values:50, expenses:9100, revenue:100},
{category:"5/3/2010", values:400, expenses:1100, revenue:1500},
{category:"5/4/2010", values:200, expenses:1900, revenue:2800},
{category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
],
AllPositiveDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: allPositiveDataProvider
}, "All Positive"),
AllNegativeDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: allNegativeDataProvider
}, "All Negative"),
PositiveAndNegativeDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: positiveAndNegativeDataProvider
}, "Positive and Negative"),
DecimalDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: decimalDataProvider
}, "Decimal");
MissingSmallDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: missingDataSmallDataProvider
}, "Missing Small");
MissingLargeDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: missingDataLargeDataProvider
}, "Missing Large"),
NullValuesDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: nullValuesDataProvider
}, "Null Values"),
MissingFirstValuesDataProviderTest = new Y.ChartDataProviderTestCase({
dataProvider: missingFirstValuesDataProvider
}, "Missing First Values");
suite.add(ChartTests);
suite.add(AxesAttributeTests);
suite.add(GraphTests);
suite.add(PieCenterTest);
suite.add(AllPositiveDataProviderTest);
suite.add(PositiveAndNegativeDataProviderTest);
suite.add(AllNegativeDataProviderTest);
suite.add(DecimalDataProviderTest);
suite.add(MissingSmallDataProviderTest);
suite.add(MissingLargeDataProviderTest);
suite.add(NullValuesDataProviderTest);
suite.add(MissingFirstValuesDataProviderTest);
//create the console
var r = new Y.Console({
newestOnTop : false,
style: 'block' // to anchor in the example content
});
r.render('#testLogger');
//run the tests
Y.Test.Runner.setName("Y.Charts");
Y.Test.Runner.add(suite);
Y.Test.Runner.run();
});
</script>
</body>
</html>