"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");
var wjChart = require("wijmo/wijmo.react.chart");
var wjcChart = require("wijmo/wijmo.chart");
//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.themingData = DataSvc_1.DataService.default.getThemingData();
        return _this;
    }
    Theming.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Theming" }, "Theming"),
            React.createElement("p", null, "The appearance of the Sunburst chart control is largely defined in CSS. In addition to a default theme, we include several professionally designed themes that customize the appearance of all Wijmo controls to achieve a consistent and attractive look."),
            React.createElement("p", null, "You can customize the appearance of the Sunburst chart control using CSS. To do this, copy the CSS rules from the default theme to a new CSS file and modify the properties as needed."),
            React.createElement("p", null, "In this example, we added the \"custom-sunburst-chart\" CSS class to the control and defined some CSS rules to change the fill, font family, and font weight of the header and fill color of slices."),
            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("li", null,
                            React.createElement("a", { href: "#tmCss", role: "tab", "data-toggle": "tab" }, "CSS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "tmJsx" },
                            '<wjChartHierarchical.Sunburst\n',
                            '    itemsSource={this.themingData}\n',
                            '    binding="value"\n',
                            '    bindingName="name"\n',
                            '    childItemsPath="items"\n',
                            '    header="Bullseye(target)"\n',
                            '    className="custom-sunburst-chart"\n',
                            '    tooltip={{ content: "" }}>\n',
                            '    <wjChart.FlexChartLegend position={wjcChart.Position.None}/>\n',
                            '</wjChartHierarchical.Sunburst>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "tmJs" },
                            '    themingData = DataService.default.getThemingData();\n',
                            '\n',
                            '    constructor(props) {\n',
                            '        super(props);\n',
                            '    }\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "tmCss" },
                            '  .custom-sunburst-chart.wj-sunburst .wj-header .wj-title {\n',
                            '     fill: #666\n',
                            '     font-family: \'Courier New\', Courier, monospace;\n',
                            '     font-weight: bold\n',
                            ' }\n',
                            ' .custom-sunburst-chart.wj-sunburst ellipse,\n',
                            ' .custom-sunburst-chart.wj-sunburst path {\n',
                            '     stroke-width: 0;\n',
                            ' }\n',
                            ' .custom-sunburst-chart.wj-sunburst ellipse {\n',
                            '     fill: yellow;\n',
                            ' }\n',
                            ' \n',
                            ' .custom-sunburst-chart.wj-sunburst .slice-level2 > path {\n',
                            '     fill: red;\n',
                            ' }\n',
                            ' \n',
                            ' .custom-sunburst-chart.wj-sunburst .slice-level3 > path {\n',
                            '     fill: blue;\n',
                            ' }\n',
                            ' \n',
                            ' .custom-sunburst-chart.wj-sunburst .slice-level4 > path {\n',
                            '     fill: black;\n',
                            ' }\n',
                            ' \n',
                            ' .custom-sunburst-chart.wj-sunburst .slice-level5 > path {\n',
                            '     fill: white;\n',
                            '     stroke-width: 2;\n',
                            '     stroke: black;\n',
                            ' }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartHierarchical.Sunburst, { itemsSource: this.themingData, binding: "value", bindingName: "name", childItemsPath: "items", header: "Bullseye(target)", className: "custom-sunburst-chart", tooltip: { content: "" } },
                        React.createElement(wjChart.FlexChartLegend, { position: wjcChart.Position.None })))));
    };
    return Theming;
}(React.Component));
exports.Theming = Theming;
//# sourceMappingURL=Theming.js.map