"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//Wijmo
var wjChartHierarchical = require("wijmo/wijmo.react.chart.hierarchical");
var wjChart = require("wijmo/wijmo.react.chart");
//Application
var DataSvc_1 = require("../services/DataSvc");
var GroupCollection = /** @class */ (function (_super) {
    __extends(GroupCollection, _super);
    function GroupCollection(props) {
        var _this = _super.call(this, props) || this;
        _this.groupData = DataSvc_1.DataService.default.getGroupCVData();
        return _this;
    }
    GroupCollection.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "groupCollectionView" }, "Group Collection"),
            React.createElement("p", null, "The sample shows how to use the Sunburst chart with grouped CollectionView."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#gcJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#gcJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "gcJsx" },
                            ' <wjChartHierarchical.Sunburst\n',
                            '            itemsSource={this.groupData}\n',
                            '            binding="value" >\n',
                            '     <wjChart.FlexPieDataLabel content="{name}" />\n',
                            ' </wjChartHierarchical.Sunburst> \n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "gcJs" },
                            'import * as wjcCore from \'wijmo/wijmo\';\n',
                            '\n',
                            'export class DataService {\n',
                            '    static default = new DataService();\n',
                            '\n',
                            '    getGroupCVData(): wijmo.CollectionView {\n',
                            '        var data = [],\n',
                            '            quarters = [\'Q1\', \'Q2\', \'Q3\', \'Q4\'],\n',
                            '            months = [[{\n',
                            '                name: \'Jan\',\n',
                            '                value: 1\n',
                            '            }, {\n',
                            '                name: \'Feb\',\n',
                            '                value: 2\n',
                            '            }, {\n',
                            '                name: \'Mar\',\n',
                            '                value: 3\n',
                            '            }], [{\n',
                            '                name: \'Apr\',\n',
                            '                value: 4\n',
                            '            }, {\n',
                            '                name: \'May\',\n',
                            '                value: 5\n',
                            '            }, {\n',
                            '                name: \'June\',\n',
                            '                value: 6\n',
                            '            }], [{\n',
                            '                name: \'Jul\',\n',
                            '                value: 7\n',
                            '            }, {\n',
                            '                name: \'Aug\',\n',
                            '                value: 8\n',
                            '            }, {\n',
                            '                name: \'Sep\',\n',
                            '                value: 9\n',
                            '            }], [{\n',
                            '                name: \'Oct\',\n',
                            '                value: 10\n',
                            '            }, {\n',
                            '                name: \'Nov\',\n',
                            '                value: 11\n',
                            '            }, {\n',
                            '                name: \'Dec\',\n',
                            '                value: 12\n',
                            '            }]],\n',
                            '            years = [], year = new Date().getFullYear(), yearLen, i, len = 100;\n',
                            '\n',
                            '        yearLen = 3;\n',
                            '        for (i = yearLen; i > 0; i--) {\n',
                            '            years.push(year - i);\n',
                            '        }\n',
                            '\n',
                            '        var y, q, m;\n',
                            '\n',
                            '        for (i = 0; i < len; i++) {\n',
                            '            y = Math.floor(Math.random() * yearLen);\n',
                            '            q = Math.floor(Math.random() * 4);\n',
                            '            m = Math.floor(Math.random() * 3);\n',
                            '\n',
                            '            data.push({\n',
                            '                year: years[y],\n',
                            '                quarter: quarters[q],\n',
                            '                month: months[q][m].name,\n',
                            '                monthVal: months[q][m].value,\n',
                            '                value: Math.round(Math.random() * 100)\n',
                            '            });\n',
                            '        }\n',
                            '\n',
                            '        var cv = new wijmo.CollectionView(data);\n',
                            '\n',
                            '\n',
                            '        cv.sortDescriptions.push(new wijmo.SortDescription(\'year\', false));\n',
                            '        cv.sortDescriptions.push(new wijmo.SortDescription(\'quarter\', false));\n',
                            '        cv.sortDescriptions.push(new wijmo.SortDescription(\'monthVal\', false));\n',
                            '        cv.groupDescriptions.push(new wijmo.PropertyGroupDescription(\'year\'));\n',
                            '        cv.groupDescriptions.push(new wijmo.PropertyGroupDescription(\'quarter\'));\n',
                            '        cv.groupDescriptions.push(new wijmo.PropertyGroupDescription(\'month\'));\n',
                            '        return cv;\n',
                            '    }\n',
                            '}\n',
                            '\n',
                            '\n',
                            '//GettingStarted component\n',
                            'groupData = DataService.default.getGroupCVData();\n',
                            'constructor(props) {\n',
                            '   super(props);\n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartHierarchical.Sunburst, { itemsSource: this.groupData, binding: "value" },
                        React.createElement(wjChart.FlexPieDataLabel, { content: "{name}" })))));
    };
    return GroupCollection;
}(React.Component));
exports.GroupCollection = GroupCollection;
//# sourceMappingURL=GroupCollection.js.map