"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");
//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();
        _this.bindingName = ['category', 'subCategory'];
        return _this;
    }
    GettingStarted.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Start" }, "Getting Started"),
            React.createElement("p", null, "Here are the steps for getting started with the TreeMap control in React applications:"),
            React.createElement("ol", null,
                React.createElement("li", null,
                    "Add a TreeMap React component to provide data and logic.",
                    React.createElement("br", null)),
                React.createElement("li", null, "Add some CSS to customize the treemap'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" },
                            '<wjChartHierarchical.TreeMap\n',
                            '    itemsSource={this.data}\n',
                            '    dataLabel={{ content: "{name}" }}\n',
                            '    bindingName={this.bindingName}\n',
                            '    binding="sales" />\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "gsJs" },
                            'import * as wjcCore from \'wijmo/wijmo\';\n',
                            '\n',
                            'export class DataService {\n',
                            '    static default = new DataService();\n',
                            '\n',
                            '    rand(): number {\n',
                            '        return Math.round(Math.random() * 100);\n',
                            '    };\n',
                            '\n',
                            '    categories = [\'Beverages\', \'Condiments\', \'Confections\', \'Dairy Products\', \'Grains/Cereals\', \'Meat/Poultry\', \'Produce\', \'Seafood\'];\n',
                            '\n',
                            '    subCategories = [[\'Soft drinks\', \'Coffees\', \'Teas\', \'Beers\', \'Ales\'], [\'Sweet and Savory sauces\', \'Relishes\', \'Spreads\', \'Seasonings\'],\n',
                            '    [\'Desserts\', \'Candies\', \'Sweet breads\'], [\'Chesses\'], [\'Breads\', \'Crackers\', \'Pasta\', \'Cereal\'], [\'Prepared meats\'], [\'Dried fruit\', \'Bean curd\'], [\'Seaweed\', \'Fish\']];\n',
                            '\n',
                            '    // data used to generate random items\n',
                            '    getData(): any[] {\n',
                            '        var self = this,\n',
                            '            data = [];\n',
                            '\n',
                            '        self.categories.forEach(function (c, idx) {\n',
                            '            var sub = self.subCategories[idx];\n',
                            '            sub.forEach(function (s) {\n',
                            '                data.push({\n',
                            '                    category: c,\n',
                            '                    subCategory: s,\n',
                            '                    sales: self.rand()\n',
                            '                });\n',
                            '            });\n',
                            '        });\n',
                            '        return data;\n',
                            '    };\n',
                            '}\n',
                            '\n',
                            '\n',
                            '//GettingStarted component\n',
                            'data = DataService.default.getData();\n',
                            'bindingName = [\'category\', \'subCategory\'];\n',
                            'constructor(props) {\n',
                            '   super(props);\n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartHierarchical.TreeMap, { itemsSource: this.data, dataLabel: { content: "{name}" }, bindingName: this.bindingName, binding: "sales" }))));
    };
    return GettingStarted;
}(React.Component));
exports.GettingStarted = GettingStarted;
//# sourceMappingURL=GettingStarted.js.map