charts/tests/groupmarkertests.html

<!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>Group Marker 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.GroupMarker"),

    GroupMarkerTestTemplate = function(cfg, globalCfg)
    {
        var i;
        GroupMarkerTestTemplate.superclass.constructor.apply(this);
        cfg.width = cfg.width || 400;
        cfg.height = cfg.height || 300;
        cfg.groupMarkers = true;
        cfg.interactionType = "planar";
        cfg.render = "#mychart";
        this.attrCfg = cfg;
        for(i in globalCfg)
        {
            if(globalCfg.hasOwnProperty(i))
            {
                this[i] = globalCfg[i];
            }
        }
    };

    Y.extend(GroupMarkerTestTemplate, Y.Test.Case, {

        setUp: function() {
            this.chart = new Y.Chart(this.attrCfg);
        },

        testGroupMarkers: function()
        {
            var chart = this.chart,
                keys = chart.get("seriesKeys"),
                i = 0,
                len = keys.length;
            Y.Assert.isTrue(chart.get("groupMarkers"));
        },

        tearDown: function() {
            this.chart.destroy(true);
        }
    });

    Y.GroupMarkerTestTemplate = GroupMarkerTestTemplate;

    var dataProvider =  [
        {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
        {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
        {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
        {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
        {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
    ],


    GroupMarkerTest = new Y.GroupMarkerTestTemplate({
        seriesKeys: ["miscellaneous", "expenses", "revenue"],
        dataProvider: dataProvider
    },
    {
        name: "Group Marker Test"
    }),

    CircleMarkerTest = new Y.GroupMarkerTestTemplate({
        seriesKeys: ["miscellaneous", "expenses", "revenue"],
        dataProvider: dataProvider,
        seriesCollection: [
            {
                type: "combo",
                valueKey: "miscellaneous",
                styles: {
                    marker: {
                        shape: "circle"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "expenses",
                styles: {
                    marker: {
                        shape: "circle"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "revenue",
                styles: {
                    marker: {
                        shape: "circle"
                    }
                }
            }
        ]
    },
    {
        name: "Circle Marker Test"
    }),

    RectMarkerTest = new Y.GroupMarkerTestTemplate({
        seriesKeys: ["miscellaneous", "expenses", "revenue"],
        dataProvider: dataProvider,
        seriesCollection: [
            {
                type: "combo",
                valueKey: "miscellaneous",
                styles: {
                    marker: {
                        shape: "rect"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "expenses",
                styles: {
                    marker: {
                        shape: "rect"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "revenue",
                styles: {
                    marker: {
                        shape: "rect"
                    }
                }
            }
        ]
    },
    {
        name: "Rect Marker Test"
    }),

    DiamondMarkerTest = new Y.GroupMarkerTestTemplate({
        seriesKeys: ["miscellaneous", "expenses", "revenue"],
        dataProvider: dataProvider,
        seriesCollection: [
            {
                type: "combo",
                valueKey: "miscellaneous",
                styles: {
                    marker: {
                        shape: "diamond"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "expenses",
                styles: {
                    marker: {
                        shape: "diamond"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "revenue",
                styles: {
                    marker: {
                        shape: "diamond"
                    }
                }
            }
        ]
    },
    {
        name: "Diamond Marker Test"
    }),

    EllipseMarkerTest = new Y.GroupMarkerTestTemplate({
        seriesKeys: ["miscellaneous", "expenses", "revenue"],
        dataProvider: dataProvider,
        seriesCollection: [
            {
                type: "combo",
                valueKey: "miscellaneous",
                styles: {
                    marker: {
                        shape: "ellipse"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "expenses",
                styles: {
                    marker: {
                        shape: "ellipse"
                    }
                }
            },
            {
                type: "combo",
                valueKey: "revenue",
                styles: {
                    marker: {
                        shape: "ellipse"
                    }
                }
            }
        ]
    },
    {
        name: "Ellipse Marker Test"
    });

    suite.add(GroupMarkerTest);
    suite.add(CircleMarkerTest);
    suite.add(RectMarkerTest);
    suite.add(DiamondMarkerTest);
    suite.add(EllipseMarkerTest);

    //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.GroupMarker");
    Y.Test.Runner.add(suite);
    Y.Test.Runner.run();
});
</script>
</body>
</html>