"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 wjInput = require("wijmo/wijmo.react.input");
var wjChartHierarchical = require("wijmo/wijmo.react.chart.hierarchical");
var wjcChartHierarchical = require("wijmo/wijmo.chart.hierarchical");
//Application
var DataSvc_1 = require("../services/DataSvc");
var Type = /** @class */ (function (_super) {
    __extends(Type, _super);
    function Type(props) {
        var _this = _super.call(this, props) || this;
        _this.data = DataSvc_1.DataService.default.getData();
        _this.bindingName = ['category', 'subCategory'];
        _this.treeMapTypes = [
            { text: 'Horizontal', value: wjcChartHierarchical.TreeMapType.Horizontal },
            { text: 'Squarified', value: wjcChartHierarchical.TreeMapType.Squarified },
            { text: 'Vertical', value: wjcChartHierarchical.TreeMapType.Vertical }
        ];
        _this.state = {
            slectedTreeMapType: _this.treeMapTypes[1]
        };
        _this.treeMapTypeChanged = _this.treeMapTypeChanged.bind(_this);
        return _this;
    }
    Type.prototype.treeMapTypeChanged = function (menu) {
        var selectedType = menu.selectedItem;
        this.setState({ slectedTreeMapType: selectedType });
    };
    Type.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "type" }, "Type"),
            React.createElement("p", null,
                "The TreeMap chart control allows you to customize its layout and appearance by using the ",
                React.createElement("b", null, "type"),
                " property."),
            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: "#tyJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#tyJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "tyJsx" },
                            ' <wjChartHierarchical.TreeMap\n',
                            '     itemsSource={this.data}\n',
                            '     bindingName={this.bindingName}\n',
                            '     binding="sales"\n',
                            '     type={this.state.slectedTreeMapType.value} >\n',
                            '     <wjChart.FlexPieDataLabel content="{name}" />\n',
                            ' </wjChartHierarchical.TreeMap>\n',
                            ' <wjInput.Menu\n',
                            '     header={"Type:  " + "<b>" + this.state.slectedTreeMapType.text + "</b>"}\n',
                            '     itemsSource={this.treeMapTypes}\n',
                            '     displayMemberPath="text"\n',
                            '     commandParameterPath="value"\n',
                            '     itemClicked={this.treeMapTypeChanged} />\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "tyJs" },
                            'data = DataService.default.getData();\n',
                            "\\n'}",
                            'bindingName = [\'category\', \'subCategory\'];\n',
                            'treeMapTypes = [\n',
                            '    { text: \'Horizontal\', value: wjcChartHierarchical.TreeMapType.Horizontal },\n',
                            '    { text: \'Squarified\', value: wjcChartHierarchical.TreeMapType.Squarified },\n',
                            '    { text: \'Vertical\', value: wjcChartHierarchical.TreeMapType.Vertical }\n',
                            '];\n',
                            'constructor(props) {\n',
                            '    super(props);\n',
                            '    this.state = {\n',
                            '        slectedTreeMapType: this.treeMapTypes[1]\n',
                            '    }\n',
                            '    this.treeMapTypeChanged = this.treeMapTypeChanged.bind(this);\n',
                            '}\n',
                            '\n',
                            'treeMapTypeChanged(menu) {\n',
                            '    var selectedType = menu.selectedItem;\n',
                            '    this.setState({ slectedTreeMapType: selectedType });\n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartHierarchical.TreeMap, { itemsSource: this.data, bindingName: this.bindingName, dataLabel: { content: "{name}" }, binding: "sales", type: this.state.slectedTreeMapType.value }),
                    React.createElement(wjInput.Menu, { header: "Type:  " + "<b>" + this.state.slectedTreeMapType.text + "</b>", itemsSource: this.treeMapTypes, displayMemberPath: "text", commandParameterPath: "value", itemClicked: this.treeMapTypeChanged }))));
    };
    return Type;
}(React.Component));
exports.Type = Type;
//# sourceMappingURL=Type.js.map