"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 Theming = /** @class */ (function (_super) {
    __extends(Theming, _super);
    function Theming(props) {
        var _this = _super.call(this, props) || this;
        _this.data = DataSvc_1.DataService.default.getData();
        _this.bindingName = ['category', 'subCategory'];
        _this.palette1 = [{
                titleColor: '#00277d',
                maxColor: 'rgba(0,39,125,0.7)',
                minColor: 'rgba(168,187,230,0.7)'
            }, {
                titleColor: '#7d1f00',
                maxColor: 'rgba(125,21,0,0.7)',
                minColor: 'rgba(230,183,168,0.7)'
            }, {
                titleColor: '#007d27',
                maxColor: 'rgba(0,125,39,0.7)',
                minColor: 'rgba(168,230,188,0.7)'
            }, {
                titleColor: '#7d003c',
                maxColor: 'rgba(125,0,60,0.7)',
                minColor: 'rgba(230,168,198,0.7)'
            }, {
                titleColor: '#7d4300',
                maxColor: 'rgba(125,67,0,0.7)',
                minColor: 'rgba(230,201,168,0.7)'
            }, {
                titleColor: '#51007d',
                maxColor: 'rgba(81,0,125,0.7)',
                minColor: 'rgba(209,170,230,0.7)'
            }, {
                titleColor: '#7d7400',
                maxColor: 'rgba(125,116,0,0.7)',
                minColor: 'rgba(230,226,168,0.7)'
            }, {
                titleColor: '#970000',
                maxColor: 'rgba(151,0,0,0.7)',
                minColor: 'rgba(230,169,169,0.7)'
            }];
        _this.palette2 = ['#88bde6', '#fbb258', '#90cd97', '#f6aac9', '#bfa554', '#bc99c7', '#eddd46', '#f07e6e', '#8c8c8c'];
        return _this;
    }
    Theming.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Theming" }, "Theming"),
            React.createElement("p", null,
                "The TreeMap chart control allows you to customize the appearance by using the ",
                React.createElement("b", null, "palette"),
                " 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: "#tmJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#tmJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "tmJsx" },
                            '<wjChartHierarchical.TreeMap\n',
                            '    className="custom-treemap"\n',
                            '    itemsSource={this.data}\n',
                            '    dataLabel={{ content: "{name}" }}\n',
                            '    bindingName={this.bindingName}\n',
                            '    binding="sales"\n',
                            '    palette={this.palette1} />\n',
                            '\n',
                            '<wjChartHierarchical.TreeMap\n',
                            '    className="custom-treemap"\n',
                            '    itemsSource={this.data}\n',
                            '    bindingName={this.bindingName}\n',
                            '    dataLabel={{ content: "{name}" }}\n',
                            '    binding="sales"\n',
                            '    palette={this.palette2} />\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "tmJs" },
                            ' data = DataService.default.getData();\n',
                            ' bindingName = [\'category\', \'subCategory\'];\n',
                            ' palette1 = [{\n',
                            '             titleColor: \'#00277d\',\n',
                            '             maxColor: \'rgba(0,39,125,0.7)\',\n',
                            '             minColor: \'rgba(168,187,230,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#7d1f00\',\n',
                            '                 maxColor: \'rgba(125,21,0,0.7)\',\n',
                            '                 minColor: \'rgba(230,183,168,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#007d27\',\n',
                            '                 maxColor: \'rgba(0,125,39,0.7)\',\n',
                            '                 minColor: \'rgba(168,230,188,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#7d003c\',\n',
                            '                 maxColor: \'rgba(125,0,60,0.7)\',\n',
                            '                 minColor: \'rgba(230,168,198,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#7d4300\',\n',
                            '                 maxColor: \'rgba(125,67,0,0.7)\',\n',
                            '                 minColor: \'rgba(230,201,168,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#51007d\',\n',
                            '                 maxColor: \'rgba(81,0,125,0.7)\',\n',
                            '                 minColor: \'rgba(209,170,230,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#7d7400\',\n',
                            '                 maxColor: \'rgba(125,116,0,0.7)\',\n',
                            '                 minColor: \'rgba(230,226,168,0.7)\'\n',
                            '             }, {\n',
                            '                 titleColor: \'#970000\',\n',
                            '                 maxColor: \'rgba(151,0,0,0.7)\',\n',
                            '                 minColor: \'rgba(230,169,169,0.7)\'\n',
                            '             }];\n',
                            'palette2 = [\'#88bde6\', \'#fbb258\', \'#90cd97\', \'#f6aac9\', \'#bfa554\', \'#bc99c7\', \'#eddd46\', \'#f07e6e\', \'#8c8c8c\'];\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, { className: "custom-treemap", itemsSource: this.data, dataLabel: { content: "{name}" }, bindingName: this.bindingName, binding: "sales", palette: this.palette1 }),
                    React.createElement(wjChartHierarchical.TreeMap, { className: "custom-treemap", itemsSource: this.data, bindingName: this.bindingName, dataLabel: { content: "{name}" }, binding: "sales", palette: this.palette2 }))));
    };
    return Theming;
}(React.Component));
exports.Theming = Theming;
//# sourceMappingURL=Theming.js.map