axesattrs.html revision 405aac5878aad69932e8149f2c47f600721bb1cf
<!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");
var suite = new Y.Test.Suite("Y.Charts.Axes"),
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);
}
});
suite.add(AxesAttributeTests);
//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.Axes");
Y.Test.Runner.add(suite);
Y.Test.Runner.run();
});
</script>
</body>
</html>