"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");
var wjcChart = require("wijmo/wijmo.chart");
var wjcChartRadar = require("wijmo/wijmo.chart.radar");
var wjInput = require("wijmo/wijmo.react.input");
var wjChartRadar = require("wijmo/wijmo.react.chart.radar");
//Application
var DataSvc_1 = require("../services/DataSvc");
var PolarBasicFeatures = /** @class */ (function (_super) {
    __extends(PolarBasicFeatures, _super);
    function PolarBasicFeatures(props) {
        var _this = _super.call(this, props) || this;
        _this.basicPolarData = DataSvc_1.DataService.default.getPolarData();
        _this.chartTypeArr = 'Line,LineSymbols,Area,Scatter,Column'.split(',');
        _this.stackingArr = 'None,Stacked,Stacked100pc'.split(',');
        _this.chartTypes = [];
        _this.stackingTypes = [];
        DataSvc_1.DataService.default.initChartProp(_this.chartTypeArr, _this.chartTypes);
        DataSvc_1.DataService.default.initChartProp(_this.stackingArr, _this.stackingTypes);
        _this.state = {
            polarChartType: 'Line',
            polarTotalAngle: 360,
            polarStartAngle: 0,
            polarStacking: 'None',
            polarReversed: false,
            showDataLabel: false
        };
        _this.chartTypeChanged = _this.chartTypeChanged.bind(_this);
        _this.stackingTypeChanged = _this.stackingTypeChanged.bind(_this);
        _this.polarStartAngleChanged = _this.polarStartAngleChanged.bind(_this);
        _this.polarTotalAngleChanged = _this.polarTotalAngleChanged.bind(_this);
        _this.stateChanged = _this.stateChanged.bind(_this);
        return _this;
    }
    PolarBasicFeatures.prototype.chartTypeChanged = function (menu) {
        var selectedType = menu.selectedItem;
        this.setState({ polarChartType: selectedType.value });
    };
    PolarBasicFeatures.prototype.stackingTypeChanged = function (menu) {
        var selectedStacking = menu.selectedItem;
        this.setState({ polarStacking: selectedStacking.value });
    };
    PolarBasicFeatures.prototype.polarStartAngleChanged = function (sender) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ polarStartAngle: sender.value });
    };
    PolarBasicFeatures.prototype.polarTotalAngleChanged = function (sender) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ polarTotalAngle: sender.value });
    };
    PolarBasicFeatures.prototype.stateChanged = function (event) {
        var target = event.target, value = target.type === 'checkbox' ? target.checked : target.value, name = target.name, labelContent;
        this.setState((_a = {},
            _a[name] = value,
            _a));
        var _a;
    };
    PolarBasicFeatures.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Features" }, "Polar Basic Features"),
            React.createElement("p", null, "The FlexRadar control can be a polar chart if xValues are number, it has some basic properties that allow you to customize its layout and appearance:"),
            React.createElement("ul", null,
                React.createElement("li", null,
                    React.createElement("b", null, "chartType"),
                    ":  Specifies the control's chart type."),
                React.createElement("li", null,
                    React.createElement("b", null, "startAngle"),
                    ":  Starting at the 12 o'clock position, specifies the angle to start drawing radar."),
                React.createElement("li", null,
                    React.createElement("b", null, "totalAngle"),
                    ":  Specifies the total angle to draw radar."),
                React.createElement("li", null,
                    React.createElement("b", null, "reversed"),
                    ":  Determines whether the control should draw radar clockwise (false) or counterclockwise (true)."),
                React.createElement("li", null,
                    React.createElement("b", null, "stacking"),
                    ":  Determines whether and how the series objects are stacked.")),
            React.createElement("p", null, "The example below allows you to see what happens when you change these properties."),
            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: "#pbJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#pbJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "pbJsx" },
                            '<wjChartRadar.FlexRadar\n',
                            '    itemsSource={this.basicPolarData}\n',
                            '    bindingX="longitude"\n',
                            '    chartType={wjcChartRadar.RadarChartType[this.state.polarChartType]}\n',
                            '    totalAngle={this.state.polarTotalAngle}\n',
                            '    startAngle={this.state.polarStartAngle}\n',
                            '    stacking={wjcChart.Stacking[this.state.polarStacking]}\n',
                            '    reversed={this.state.polarReversed}\n',
                            '    dataLabel={{ content: this.state.showDataLabel ? "{y}" : "" }}>\n',
                            '    <wjChartRadar.FlexRadarSeries name="Latitude1" binding="latitude1" />\n',
                            '    <wjChartRadar.FlexRadarSeries name="Latitude2" binding="latitude2" />\n',
                            '</wjChartRadar.FlexRadar>\n',
                            '<div className="form-horizontal">\n',
                            '    <div className="form-group">\n',
                            '        <div className="col-md-offset-3 col-md-9">\n',
                            '            <wjInput.Menu\n',
                            '                header={"Chart Type:  " + "<b>" + this.state.polarChartType + "</b>"}\n',
                            '                itemsSource={this.chartTypes}\n',
                            '                displayMemberPath="text"\n',
                            '                commandParameterPath="value"\n',
                            '                itemClicked={this.chartTypeChanged} />\n',
                            '        </div>\n',
                            '    </div>\n',
                            '    <div className="form-group">\n',
                            '        <div className="col-md-offset-3 col-md-9">\n',
                            '            <wjInput.Menu\n',
                            '                header={"Stacking:  " + "<b>" + this.state.polarStacking + "</b>"}\n',
                            '                itemsSource={this.stackingTypes}\n',
                            '                displayMemberPath="text"\n',
                            '                commandParameterPath="value"\n',
                            '                itemClicked={this.stackingTypeChanged} />   \n',
                            '    </div>\n',
                            '    </div>\n',
                            '    <div className="form-group">\n',
                            '        <label className="col-md-3 control-label">Start Angle</label>\n',
                            '        <div className="col-md-9">\n',
                            '        <wjInput.InputNumber\n',
                            '                value={this.state.polarStartAngle}\n',
                            '                min={0}\n',
                            '                max={360}\n',
                            '                step={60}\n',
                            '                valueChanged={this.polarStartAngleChanged} />\n',
                            '    </div>\n',
                            '    </div>\n',
                            '    <div className="form-group">\n',
                            '        <label className="col-md-3 control-label">Total Angle</label>\n',
                            '        <div className="col-md-9">\n',
                            '          <wjInput.InputNumber\n',
                            '            value={this.state.polarTotalAngle}\n',
                            '            min={90}\n',
                            '            max={360}\n',
                            '            step={90}\n',
                            '            valueChanged={this.polarTotalAngleChanged} />\n',
                            '    </div>\n',
                            '    </div>\n',
                            '    <div className="form-group">\n',
                            '        <div className="col-md-offset-3 col-md-9">\n',
                            '            <div className="checkbox">\n',
                            '                <label>\n',
                            '                    <input type="checkbox" name="polarReversed" checked={this.state.polarReversed}\n',
                            '                    onChange={this.stateChanged}/> Reversed?\n',
                            '            </label>\n',
                            '            </div>\n',
                            '        </div>\n',
                            '    </div>\n',
                            '    <div className="form-group">\n',
                            '        <div className="col-md-offset-3 col-md-9">\n',
                            '            <div className="checkbox">\n',
                            '                <label>\n',
                            '                    <input type="checkbox" name="showDataLabel" checked={this.state.showDataLabel}\n',
                            '                        onChange={this.stateChanged} /> Show DataLabel?\n',
                            '            </label>\n',
                            '            </div>\n',
                            '        </div>\n',
                            '    </div>\n',
                            '</div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "pbJs" },
                            ' data = DataService.default.getData();\n',
                            ' chartTypeArr = \'Line,LineSymbols,Area,Scatter,Column\'.split(\',\');\n',
                            ' stackingArr = \'None,Stacked,Stacked100pc\'.split(\',\');\n',
                            ' chartTypes = [];\n',
                            ' stackingTypes = [];\n',
                            ' constructor(props) {\n',
                            '     super(props);\n',
                            '     DataService.default.initChartProp(this.chartTypeArr, this.chartTypes);\n',
                            '     DataService.default.initChartProp(this.stackingArr, this.stackingTypes);\n',
                            '\n',
                            '     this.state = {\n',
                            '         polarChartType: \'Line\',\n',
                            '         polarTotalAngle: 360,\n',
                            '         polarStartAngle: 0,\n',
                            '         polarStacking: \'None\',\n',
                            '         polarReversed: false,\n',
                            '         showDataLabel: false\n',
                            '     }\n',
                            '       this.chartTypeChanged = this.chartTypeChanged.bind(this);\n',
                            '       this.stackingTypeChanged = this.stackingTypeChanged.bind(this);\n',
                            '       this.polarStartAngleChanged = this.polarStartAngleChanged.bind(this);\n',
                            '       this.polarTotalAngleChanged = this.polarTotalAngleChanged.bind(this);\n',
                            '       this.stateChanged = this.stateChanged.bind(this);\n',
                            ' }\n',
                            '\n',
                            ' chartTypeChanged(menu: wjcInput.Menu) {\n',
                            '     var selectedType = menu.selectedItem;\n',
                            '     this.setState({ polarChartType: selectedType.value });\n',
                            ' }\n',
                            '\n',
                            ' stackingTypeChanged(menu: wjcInput.Menu) {\n',
                            '     var selectedStacking = menu.selectedItem;\n',
                            '     this.setState({ polarStacking: selectedStacking.value });\n',
                            ' }\n',
                            '\n',
                            ' polarStartAngleChanged(sender: wjcInput.InputNumber){\n',
                            '     if (sender.value < sender.min || sender.value > sender.max) {\n',
                            '         return;\n',
                            '     }\n',
                            '     this.setState({ polarStartAngle: sender.value });\n',
                            ' }\n',
                            '\n',
                            ' polarTotalAngleChanged(sender: wjcInput.InputNumber){\n',
                            '     if (sender.value < sender.min || sender.value > sender.max) {\n',
                            '         return;\n',
                            '     }\n',
                            '     this.setState({ polarTotalAngle: sender.value });\n',
                            ' }\n',
                            '\n',
                            ' stateChanged(event) {\n',
                            '     var target = event.target,\n',
                            '         value = target.type === \'checkbox\' ? target.checked : target.value,\n',
                            '         name = target.name, labelContent;\n',
                            '\n',
                            '     this.setState({\n',
                            '         [name]: value\n',
                            '     });     \n',
                            ' }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartRadar.FlexRadar, { itemsSource: this.basicPolarData, bindingX: "longitude", chartType: wjcChartRadar.RadarChartType[this.state.polarChartType], totalAngle: this.state.polarTotalAngle, startAngle: this.state.polarStartAngle, stacking: wjcChart.Stacking[this.state.polarStacking], reversed: this.state.polarReversed, dataLabel: { content: this.state.showDataLabel ? "{y}" : "" } },
                        React.createElement(wjChartRadar.FlexRadarSeries, { name: "Latitude1", binding: "latitude1" }),
                        React.createElement(wjChartRadar.FlexRadarSeries, { name: "Latitude2", binding: "latitude2" })),
                    React.createElement("div", { className: "form-horizontal" },
                        React.createElement("div", { className: "form-group" },
                            React.createElement("div", { className: "col-md-offset-3 col-md-9" },
                                React.createElement(wjInput.Menu, { header: "Chart Type:  " + "<b>" + this.state.polarChartType + "</b>", itemsSource: this.chartTypes, displayMemberPath: "text", commandParameterPath: "value", itemClicked: this.chartTypeChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("div", { className: "col-md-offset-3 col-md-9" },
                                React.createElement(wjInput.Menu, { header: "Stacking:  " + "<b>" + this.state.polarStacking + "</b>", itemsSource: this.stackingTypes, displayMemberPath: "text", commandParameterPath: "value", itemClicked: this.stackingTypeChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Start Angle"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement(wjInput.InputNumber, { value: this.state.polarStartAngle, min: 0, max: 360, step: 60, valueChanged: this.polarStartAngleChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Total Angle"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement(wjInput.InputNumber, { value: this.state.polarTotalAngle, min: 90, max: 360, step: 90, valueChanged: this.polarTotalAngleChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("div", { className: "col-md-offset-3 col-md-9" },
                                React.createElement("div", { className: "checkbox" },
                                    React.createElement("label", null,
                                        React.createElement("input", { type: "checkbox", name: "polarReversed", checked: this.state.polarReversed, onChange: this.stateChanged }),
                                        " Reversed?")))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("div", { className: "col-md-offset-3 col-md-9" },
                                React.createElement("div", { className: "checkbox" },
                                    React.createElement("label", null,
                                        React.createElement("input", { type: "checkbox", name: "showDataLabel", checked: this.state.showDataLabel, onChange: this.stateChanged }),
                                        " Show DataLabel?"))))))));
    };
    return PolarBasicFeatures;
}(React.Component));
exports.PolarBasicFeatures = PolarBasicFeatures;
//# sourceMappingURL=PolarBasicFeatures.js.map