"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 wjChartRadar = require("wijmo/wijmo.react.chart.radar");
//Application
var DataSvc_1 = require("../services/DataSvc");
var GettingStarted = /** @class */ (function (_super) {
    __extends(GettingStarted, _super);
    function GettingStarted(props) {
        var _this = _super.call(this, props) || this;
        _this.data = DataSvc_1.DataService.default.getData();
        return _this;
    }
    GettingStarted.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Getting Started"),
            React.createElement("p", null, "Steps for getting started with the FlexRadar control in React applications:"),
            React.createElement("ol", null,
                React.createElement("li", null,
                    "Add a React component to provide data and logic.",
                    React.createElement("br", null)),
                React.createElement("li", null, "Add a FlexRadar control to the page and bind it to your data."),
                React.createElement("li", null, "(Optional) Add some CSS to customize the FlexRadar control's appearance.")),
            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: "#gsJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#gsJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "gsJsx" },
                            '  <wjChartRadar.FlexRadar\n',
                            '      itemsSource={this.data} \n',
                            '      bindingX="country"  >\n',
                            '      <wjChartRadar.FlexRadarAxis wjProperty="axisY" min={0} max={100} />\n',
                            '      <wjChartRadar.FlexRadarSeries name="Sales" binding="sales" />\n',
                            '      <wjChartRadar.FlexRadarSeries name="Downloads" binding="downloads"  />\n',
                            '  </wjChartRadar.FlexRadar>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "gsJs" },
                            ' // DataService\n',
                            ' export class DataService {\n',
                            '     static default = new DataService();\n',
                            '     // data used to generate random items\n',
                            '     getData(): any[] {\n',
                            '         var data = [],\n',
                            '             countries = \'US,Germany,UK,Japan,Italy,Greece\'.split(\',\');\n',
                            ' \n',
                            '         // populate itemsSource\n',
                            '         for (var i = 0; i < countries.length; i++) {\n',
                            '             data.push({\n',
                            '                 country: countries[i],\n',
                            '                 downloads: Math.ceil(Math.random() * 80) + 20,\n',
                            '                 sales: Math.ceil(Math.random() * 80) + 20\n',
                            '             });\n',
                            '         }\n',
                            '         return data;\n',
                            '     }\n',
                            ' \n',
                            '     getPolarData(): any[] {\n',
                            '         var data = [],\n',
                            '             len = 360;\n',
                            ' \n',
                            '         // populate itemsSource\n',
                            '         for (var i = 0; i <= len; i += 10) {\n',
                            '             data.push({\n',
                            '                 longitude: i,\n',
                            '                 latitude1: Math.ceil(Math.random() * 30) + 60,\n',
                            '                 latitude2: Math.ceil(Math.random() * 30) + 30\n',
                            '             });\n',
                            '         }\n',
                            '         return data;\n',
                            '     }\n',
                            ' }\n',
                            ' ',
                            ' }\n',
                            '// Component\n',
                            ' data = DataService.default.getData();\n',
                            '\n',
                            '   constructor(props) {\n',
                            '       super(props);\n',
                            '   }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartRadar.FlexRadar, { itemsSource: this.data, bindingX: "country" },
                        React.createElement(wjChartRadar.FlexRadarAxis, { wjProperty: "axisY", min: 0, max: 100 }),
                        React.createElement(wjChartRadar.FlexRadarSeries, { name: "Sales", binding: "sales" }),
                        React.createElement(wjChartRadar.FlexRadarSeries, { name: "Downloads", binding: "downloads" })))));
    };
    return GettingStarted;
}(React.Component));
exports.GettingStarted = GettingStarted;
//# sourceMappingURL=GettingStarted.js.map