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 __());
    };
})();
var LegendAndTitles = /** @class */ (function (_super) {
    __extends(LegendAndTitles, _super);
    function LegendAndTitles(props) {
        var _this = _super.call(this, props) || this;
        _this.flexPie = null;
        _this.state = {
            data: Util.getData(),
            positions: Util.getPositions(),
            header: 'Fruit By Value',
            footer: '2014 GrapeCity, inc.',
            legendPosition: 'Right'
        };
        _this.headerChanged = _this.headerChanged.bind(_this);
        _this.footerChanged = _this.footerChanged.bind(_this);
        _this.legendPositionChanged = _this.legendPositionChanged.bind(_this);
        return _this;
    }
    LegendAndTitles.prototype.headerChanged = function (e) {
        this.setState({ header: e.target.value });
    };
    LegendAndTitles.prototype.footerChanged = function (e) {
        this.setState({ footer: e.target.value });
    };
    LegendAndTitles.prototype.legendPositionChanged = function (s, e) {
        this.setState({ legendPosition: s.text });
    };
    LegendAndTitles.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Legend" }, "Legend and Titles"),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "legend"),
                " properties can be used to customize the appearance of the chart's legend. The ",
                React.createElement("b", null, "header"),
                " and ",
                React.createElement("b", null, "footer"),
                " properties can be used to add titles to the FlexPie control as well."),
            React.createElement("p", null,
                "The following example allows you to change the FlexPie's ",
                React.createElement("b", null, "legend.position"),
                ", ",
                React.createElement("b", null, "header"),
                ", and ",
                React.createElement("b", null, "footer"),
                " properties in real-time."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("div", null,
                        React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                            React.createElement("li", { className: "active" },
                                React.createElement("a", { href: "#ltJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                            React.createElement("li", null,
                                React.createElement("a", { href: "#ltJs", role: "tab", "data-toggle": "tab" }, "JS"))),
                        React.createElement("div", { className: "tab-content" },
                            React.createElement("div", { className: "tab-pane active pane-content", id: "ltJsx" },
                                '<Wj.FlexPie\n',
                                '    itemsSource={this.state.data}\n',
                                '    binding="value"\n',
                                '    bindingName="name"\n',
                                '    header={this.state.header}\n',
                                '    footer={this.state.footer}>\n',
                                '    <Wj.FlexChartLegend position={wijmo.chart.Position[this.state.legendPosition]} />\n',
                                '</Wj.FlexPie>\n',
                                '  <div className="form-horizontal">\n',
                                '     <div className="form-group">\n',
                                '         <label className="col-md-3 control-label">Header</label>\n',
                                '         <div className="col-md-9">\n',
                                '              <input className="form-control" value={ this.state.header } onChange={ this.headerChanged }/>\n',
                                '           </div>\n',
                                '     </div>\n',
                                '     <div className="form-group">\n',
                                '         <label className="col-md-3 control-label">Footer</label>\n',
                                '         <div className="col-md-9">\n',
                                '         <input className="form-control" value={ this.state.footer } onChange={ this.footerChanged }/>\n',
                                '         </div>\n',
                                '     </div>\n',
                                '     <div className="form-group">\n',
                                '         <label className="col-md-3 control-label">Legend Position</label>\n',
                                '         <div className="col-md-9">\n',
                                '         <Wj.ComboBox\n',
                                '             itemsSource={ this.state.positions }\n',
                                '             text={ this.state.legendPosition }\n',
                                '             textChanged={ this.legendPositionChanged } />\n',
                                '         </div>\n',
                                '     </div>\n',
                                '  </div>\n'),
                            React.createElement("div", { className: "tab-pane pane-content", id: "ltJs" },
                                '   flexPie = null\n',
                                '\n',
                                '   state = {\n',
                                '       data: Util.getData(),\n',
                                '       positions: Util.getPositions(),\n',
                                '       header: \'Fruit By Value\',\n',
                                '       footer: \'2014 GrapeCity, inc.\',\n',
                                '       legendPosition: \'Right\'\n',
                                '   }\n',
                                '   constructor(props) {\n',
                                '       super(props);\n',
                                '       this.headerChanged = this.headerChanged.bind(this);\n',
                                '       this.footerChanged = this.footerChanged.bind(this);\n',
                                '       this.legendPositionChanged = this.legendPositionChanged.bind(this);\n',
                                '   }\n',
                                '\n',
                                '   headerChanged(e) {\n',
                                '       this.setState({ header: e.target.value });\n',
                                '   }\n',
                                '   footerChanged(e) {\n',
                                '       this.setState({ footer: e.target.value });\n',
                                '   }\n',
                                '   legendPositionChanged(s, e) {\n',
                                '       this.setState({ legendPosition: s.text });\n',
                                '   }\n')))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(Wj.FlexPie, { itemsSource: this.state.data, binding: "value", bindingName: "name", header: this.state.header, footer: this.state.footer },
                        React.createElement(Wj.FlexChartLegend, { position: wijmo.chart.Position[this.state.legendPosition] })),
                    React.createElement("div", { className: "form-horizontal" },
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Header"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement("input", { className: "form-control", value: this.state.header, onChange: this.headerChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Footer"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement("input", { className: "form-control", value: this.state.footer, onChange: this.footerChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Legend Position"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement(Wj.ComboBox, { itemsSource: this.state.positions, text: this.state.legendPosition, textChanged: this.legendPositionChanged })))))));
    };
    return LegendAndTitles;
}(React.Component));
//# sourceMappingURL=LegendAndTitles.js.map