seriestests.html revision b4da4dbaec018452f750d5ffc00c96e4eba47e9a
<html>
<head>
<title>Chart Series Tests</title>
#mychart {
width: 400px;
height: 300px;
}
</style>
</head>
<body class="yui3-skin-sam">
<h1>Chart Series Tests</h1>
<div id="mychart"></div>
<div id="c"></div>
<script type="text/javascript">
YUI({
allowRollup: false,
filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
}).use('charts', 'test', 'event-simulate', 'console', function (Y) {
Y.namespace("Tests");
Y.Tests.ChartSeriesEvents = (function(){
var ASSERT = Y.Assert,
ObjectAssert = Y.ObjectAssert;
//-------------------------------------------------------------------------
// Chart Event Test Case
//-------------------------------------------------------------------------
function ChartEventTestCase(cfg, type)
{
this.eventType = type;
this.attrCfg = cfg;
this.name = "Event '" + type + "' Tests";
this.result = null;
}
Y.extend(ChartEventTestCase, 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.contentBox = this.chart.get("contentBox");
//reset the result
this.result = null;
//assign event handler
this.handler = Y.delegate(this.eventType, Y.bind(this.handleEvent, this), this.contentBox, this.eventNode);
},
/*
* Removes event handlers that were used during the test.
*/
tearDown : function()
{
//remove the element
},
//---------------------------------------------------------------------
// Event handler
//---------------------------------------------------------------------
/*
* Uses to trap and assign the event object for interrogation.
* @param {Event} event The event object created from the event.
*/
handleEvent : function(event)
{
this.result = event;
}
});
function ChartMarkerEventTestCase()
{
ChartMarkerEventTestCase.superclass.constructor.apply(this, arguments);
this.eventNode = ".yui3-seriesmarker";
}
Y.extend(ChartMarkerEventTestCase, ChartEventTestCase, {
getMarkerData: function(e)
{
var type = e.type,
cb = this.chart.get("contentBox"),
markerNode = e.currentTarget,
strArr = markerNode.getAttribute("id").split("_"),
index = strArr.pop(),
seriesIndex = strArr.pop(),
series = this.chart.getSeries(parseInt(seriesIndex, 10)),
items = this.chart.getSeriesItems(series, index),
pageX = e.pageX,
pageY = e.pageY,
x = pageX - cb.getX(),
y = pageY - cb.getY();
return {
type: "markerEvent:" + type,
originEvent: e,
pageX:pageX,
pageY:pageY,
categoryItem:items.category,
valueItem:items.value,
node:markerNode,
x:x,
y:y,
series:series,
index:index,
seriesIndex:seriesIndex
};
},
seriesKeys: ["miscellaneous", "expenses", "revenue"],
//Simulate a mousemove event to test to ensure that the correct series data is associated with
//the correct markers.
testDefault: function()
{
var currentSeries,
keys = {},
key,
i = 0,
len = this.seriesKeys.length,
categoryKey,
seriesKey,
categoryDisplayName,
seriesDisplayName,
categoryValue,
seriesValue,
marker,
markers,
markerData,
//determine category and series axes by direction of chart
direction = this.chart.get("direction"),
categoryAxis = direction == "horizontal" ? "x" : "y",
seriesAxis = direction == "horizontal" ? "y" : "x",
markerXY,
markerWidth,
markerHeight
getNumber = Y.TimeAxis.prototype._getNumber;
for(; i < len; ++i)
{
}
for(key in keys)
{
{
currentSeries = this.chart.getSeries(key);
if(currentSeries)
{
i = 0;
markers = currentSeries.get("markers");
if(markers)
{
len = markers.length || 0;
for(; i < len; ++i)
{
marker = markers[i];
if(marker)
{
markerWidth = marker.get("width");
markerHeight = marker.get("height");
markerXY = marker.getXY();
Y.Assert.isNumber(marker.get("width"));
Y.Assert.isNumber(marker.get("height"));
Y.Event.simulate(marker.get("node"), "mouseover", {
clientX: markerXY[0] + markerWidth/2,
clientY: markerXY[1] + markerHeight/2
});
markerData = this.getMarkerData(this.result);
categoryValue = this.chart.get("dataProvider")[markerData.index][categoryKey];
if(this.chart.get("categoryType") == "time")
{
categoryValue = getNumber(categoryValue);
}
seriesValue = this.chart.get("dataProvider")[markerData.index][seriesKey];
Y.assert(markerData.categoryItem.displayName == categoryDisplayName);
Y.assert(markerData.valueItem.displayName == seriesDisplayName);
Y.assert(markerData.series == currentSeries);
Y.assert(markerData.categoryItem.key == categoryKey);
Y.assert(markerData.valueItem.key == seriesKey);
Y.assert(markerData.categoryItem.value == categoryValue);
Y.assert(markerData.valueItem.value == seriesValue);
}
}
}
}
}
}
}
});
Y.ChartMarkerEventTestCase = ChartMarkerEventTestCase;
var DataProviderWithZeros = [
],
SeriesKeys = ["miscellaneous", "expenses", "revenue"],
DataProviderWithNull = [
],
MissingSeriesAndSeriesStartingWithZeroConfig = {
dataProvider: [
{
"Time":new Date(2011,09,01,19,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,01,20,00,00,000),
"miscellaneous":5
},
{
"Time":new Date(2011,09,01,21,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,01,22,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,01,23,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,00,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,01,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,02,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,03,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,04,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,05,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,06,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,07,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,08,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,09,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,10,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,11,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,12,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,13,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,14,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,15,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,16,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,17,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,18,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,19,00,00,000),
"miscellaneous": 0
},
{
"Time":new Date(2011,09,02,20,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,21,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,22,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,02,23,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,00,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,01,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,02,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,03,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,04,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,05,00,00,000),
"miscellaneous":0
},
{
"Time":new Date(2011,09,03,06,00,00,000),
"miscellaneous":0
}
],
type: "column",
stacked: true,
render: "#mychart",
categoryType: "time",
axes: {
values:{
position :"left",
type :"stacked"
},
dateRange:{
keys : [
"Time"
],
position :"bottom",
type :"time",
labelFormat :"%a %l:%M %p"
}
},
seriesCollection : [
{
xAxis : "dateRange",
yAxis : "values",
xKey : "Time",
yKey : "expenses"
},
{
xAxis : "dateRange",
yAxis : "values",
xKey : "Time",
yKey : "miscellaneous"
}
]
},
DataProvider,
suite = new Y.Test.Suite("Chart Series Tests"),
zeroValueColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueStackedColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueStackedBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueStackedColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueStackedBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueComboMouseOverTests = new Y.ChartMarkerEventTestCase({
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueComboMouseOverTests = new Y.ChartMarkerEventTestCase({
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
missingSeriesAndSeriesStartingWithZero = new Y.ChartMarkerEventTestCase(MissingSeriesAndSeriesStartingWithZeroConfig, "mouseover");
suite.add(zeroValueColumnMouseOverTests);
suite.add(zeroValueBarMouseOverTests);
suite.add(zeroValueStackedColumnMouseOverTests);
suite.add(zeroValueStackedBarMouseOverTests);
suite.add(nullValueColumnMouseOverTests);
suite.add(nullValueBarMouseOverTests);
suite.add(nullValueStackedColumnMouseOverTests);
suite.add(nullValueStackedBarMouseOverTests);
suite.add(zeroValueComboMouseOverTests);
suite.add(nullValueComboMouseOverTests);
suite.add(missingSeriesAndSeriesStartingWithZero);
//return it
return suite;
})();
var r = new Y.Console({
verbose : true,
newestOnTop : false
});
r.render('#c');
//add to the testrunner and run
});
</script>
</body>
</html>