var LegendAndTitles = React.createClass({
    flexPie: null,
    getInitialState: function () {
        return {
            data: Util.getData(),
            positions: Util.getPositions(),
            header: 'Fruit By Value',
            footer: '2014 GrapeCity, inc.',
            legendPosition: 'Right'
        };
    },
    // event handlers
    initialized: function (s, e) {
        this.flexPie = s;
        this.flexPie.legend.position = this.state.legendPosition;
    },
    headerChanged: function (e) {
        this.setState({ header: e.target.value });
    },
    footerChanged: function (e) {
        this.setState({ footer: e.target.value });
    },
    legendPositionChanged: function (s, e) {
        this.setState({ legendPosition: s.text });
        this.flexPie.legend.position = this.state.legendPosition;
    },
    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',
                                '     initialized={this.initialized}\n',
                                '     binding="value"\n',
                                '     bindingName="name" \n',
                                '     header={ this.state.header }\n',
                                '     footer={ this.state.footer }/>\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" },
                                '     getInitialState: function () {\n',
                                '         return {\n',
                                '             data: Util.getData(),\n',
                                '             positions: Util.getPositions(),\n',
                                '             header: \'Fruit By Value\',\n',
                                '             footer: \'2014 GrapeCity, inc.\',\n',
                                '             legendPosition: \'Right\'\n',
                                '         }\n',
                                '     },\n',
                                '\n',
                                '     // event handlers\n',
                                '    initialized: function (s, e) {\n',
                                '        this.flexPie = s;\n',
                                '        this.flexPie.legend.position = this.state.legendPosition;\n',
                                '     },\n',
                                '     headerChanged: function(e) {\n',
                                '         this.setState({ header: e.target.value });\n',
                                '     },\n',
                                '     footerChanged: function(e) {\n',
                                '         this.setState({ footer: e.target.value });\n',
                                '     },\n',
                                '     legendPositionChanged: function(s, e) {\n',
                                '         this.setState({ legendPosition: s.text });\n',
                                '         this.flexPie.legend.position = this.state.legendPosition;\n',
                                '     },\n')))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(Wj.FlexPie, { itemsSource: this.state.data, initialized: this.initialized, binding: "value", bindingName: "name", header: this.state.header, footer: this.state.footer }),
                    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 })))))));
    }
});
//# sourceMappingURL=LegendAndTitles.js.map