"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");
var wjcChart = require("wijmo/wijmo.chart");
var wjInput = require("wijmo/wijmo.react.input");
var wjChartHierarchical = require("wijmo/wijmo.react.chart.hierarchical");
var wjChart = require("wijmo/wijmo.react.chart");
//Application
var DataSvc_1 = require("../services/DataSvc");
var BasicFeatures = /** @class */ (function (_super) {
    __extends(BasicFeatures, _super);
    function BasicFeatures(props) {
        var _this = _super.call(this, props) || this;
        _this.data = DataSvc_1.DataService.default.getHierarchicalData();
        _this.palettes = ['standard', 'cocoa', 'coral', 'dark', 'highcontrast', 'light', 'midnight', 'minimal', 'modern', 'organic', 'slate'];
        _this.state = {
            innerRadius: 0,
            offset: 0,
            startAngle: 0,
            palette: 'standard',
            chartPalette: wjcChart.Palettes['standard'],
            reversed: false
        };
        _this.paletteChanged = _this.paletteChanged.bind(_this);
        _this.startAngleChanged = _this.startAngleChanged.bind(_this);
        _this.innerRadiusChanged = _this.innerRadiusChanged.bind(_this);
        _this.offsetChanged = _this.offsetChanged.bind(_this);
        _this.stateChanged = _this.stateChanged.bind(_this);
        return _this;
    }
    BasicFeatures.prototype.paletteChanged = function (menu) {
        var selectedStacking = menu.selectedValue;
        this.setState({ palette: selectedStacking });
        this.setState({ chartPalette: wjcChart.Palettes[selectedStacking] });
    };
    BasicFeatures.prototype.startAngleChanged = function (sender) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ startAngle: sender.value });
    };
    BasicFeatures.prototype.innerRadiusChanged = function (sender) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ innerRadius: sender.value });
    };
    BasicFeatures.prototype.offsetChanged = function (sender) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ offset: sender.value });
    };
    BasicFeatures.prototype.stateChanged = function (event) {
        var target = event.target, value = target.type === 'checkbox' ? target.checked : target.value, name = target.name;
        this.setState((_a = {},
            _a[name] = value,
            _a));
        var _a;
    };
    BasicFeatures.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Features" }, "Basic Features"),
            React.createElement("p", null, "The Sunburst chart control has five basic properties that allow you to customize its layout and appearance:"),
            React.createElement("ul", null,
                React.createElement("li", null,
                    React.createElement("b", null, "innerRadius"),
                    ":  Specifies the control's inner radius to support donut charts."),
                React.createElement("li", null,
                    React.createElement("b", null, "offset"),
                    ":  Specifies the offset of the sunburst slices from the center of the control."),
                React.createElement("li", null,
                    React.createElement("b", null, "startAngle"),
                    ":  Starting at the nine o'clock position, specifies the angle to start drawing sunburst slices."),
                React.createElement("li", null,
                    React.createElement("b", null, "palette"),
                    ":  Specifies an array of default colors to be used when rendering sunburst slices."),
                React.createElement("li", null,
                    React.createElement("b", null, "reversed"),
                    ":  Determines whether the control should draw sunburst slices clockwise (false) or counterclockwise (true).")),
            React.createElement("p", null, "The example below allows you to see what happens when you change these properties. Also, clicking on a sunburst slice will display a tooltip for the data point."),
            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: "#bfJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#bfJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "bfJsx" },
                            '<wjChartHierarchical.Sunburst\n',
                            '    itemsSource={this.data}\n',
                            '    binding="value"\n',
                            '    bindingName={["year", "quarter", "month"]}\n',
                            '    childItemsPath="items"\n',
                            '    palette={this.state.chartPalette}\n',
                            '    innerRadius={this.state.innerRadius}\n',
                            '    offset={this.state.offset}\n',
                            '    startAngle={this.state.startAngle}\n',
                            '    reversed={this.state.reversed}>\n',
                            '    <wjChart.FlexPieDataLabel position="Center" content="{name}" />\n',
                            '</wjChartHierarchical.Sunburst> \n',
                            ' <div className="form-horizontal">\n',
                            '     <div className="form-group">\n',
                            '         <label className="col-md-3 control-label">Inner Radius</label>\n',
                            '         <div className="col-md-9">\n',
                            '             <wjInput.InputNumber\n',
                            '                 value={this.state.innerRadius}\n',
                            '                 min={0}\n',
                            '                 max={1}\n',
                            '                 step={.1}\n',
                            '                 format="n"\n',
                            '                 valueChanged={this.innerRadiusChanged} />\n',
                            '         </div>\n',
                            '     </div>\n',
                            '     <div className="form-group">\n',
                            '         <label className="col-md-3 control-label">Offset</label>\n',
                            '         <div className="col-md-9">\n',
                            '             <wjInput.InputNumber\n',
                            '                 value={this.state.offset}\n',
                            '                 min={0}\n',
                            '                 max={1}\n',
                            '                 step={.1}\n',
                            '                 format="n"\n',
                            '                 valueChanged={this.offsetChanged} />\n',
                            '         </div>\n',
                            '     </div>\n',
                            '     <div className="form-group">\n',
                            '         <label className="col-md-3 control-label">Start Angle</label>\n',
                            '         <div className="col-md-9">\n',
                            '             <wjInput.InputNumber\n',
                            '                 value={this.state.startAngle}\n',
                            '                 min={0}\n',
                            '                 max={360}\n',
                            '                 step={60}\n',
                            '                 valueChanged={this.startAngleChanged} />\n',
                            '         </div>\n',
                            '     </div>\n',
                            '     <div className="form-group">\n',
                            '         <div className="col-md-offset-3 col-md-9">\n',
                            '             <wjInput.Menu\n',
                            '                 header={"Palette:  " + "<b>" + this.state.palette + "</b\n',
                            '                 itemsSource={this.palettes}\n',
                            '\n',
                            '                 itemClicked={this.paletteChanged} />\n',
                            '         </div>\n',
                            '     </div>\n',
                            '     <div className="form-group">\n',
                            '         <div className="col-md-offset-3 col-md-9">\n',
                            '             <div className="checkbox">\n',
                            '                 <label>\n',
                            '                     <input type="checkbox" name="reversed" checked={this.state.reversed}\n',
                            '                         onChange={this.stateChanged} /> Reversed?\n',
                            '             </label>\n',
                            '             </div>\n',
                            '         </div>\n',
                            '     </div>\n',
                            ' </div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "bfJs" },
                            '  data = DataService.default.getHierarchicalData();\n',
                            '  palettes = [\'standard\', \'cocoa\', \'coral\', \'dark\', \'highcontrast\', \'light\', \'midnight\', \'minimal\', \'modern\', \'organic\', \'slate\'];\n',
                            '\n',
                            '  constructor(props) {\n',
                            '      super(props);\n',
                            '\n',
                            '      this.state = {\n',
                            '          innerRadius: 0,\n',
                            '          offset: 0,\n',
                            '          startAngle: 0,\n',
                            '          palette: \'standard\',\n',
                            '          chartPalette: wjcChart.Palettes[\'standard\'],\n',
                            '          reversed: false\n',
                            '      }\n',
                            '     this.paletteChanged = this.paletteChanged.bind(this);\n',
                            '     this.startAngleChanged = this.startAngleChanged.bind(this);\n',
                            '     this.innerRadiusChanged = this.innerRadiusChanged.bind(this);\n',
                            '     this.offsetChanged = this.offsetChanged.bind(this);\n',
                            '     this.stateChanged = this.stateChanged.bind(this);\n',
                            '  }\n',
                            '\n',
                            '  paletteChanged(menu: wjcInput.Menu) {\n',
                            '      var selectedStacking = menu.selectedValue;\n',
                            '      this.setState({ palette: selectedStacking });\n',
                            '      this.setState({ chartPalette: wjcChart.Palettes[selectedStacking] });\n',
                            '  }\n',
                            '\n',
                            '  startAngleChanged(sender: wjcInput.InputNumber) {\n',
                            '      if (sender.value < sender.min || sender.value > sender.max) {\n',
                            '          return;\n',
                            '      }\n',
                            '      this.setState({ startAngle: sender.value });\n',
                            '  }\n',
                            '\n',
                            '  innerRadiusChanged(sender: wjcInput.InputNumber) {\n',
                            '      if (sender.value < sender.min || sender.value > sender.max) {\n',
                            '          return;\n',
                            '      }\n',
                            '      this.setState({ innerRadius: sender.value });\n',
                            '  }\n',
                            '\n',
                            '  offsetChanged(sender: wjcInput.InputNumber) {\n',
                            '      if (sender.value < sender.min || sender.value > sender.max) {\n',
                            '          return;\n',
                            '      }\n',
                            '      this.setState({ offset: sender.value });\n',
                            '  }\n',
                            '\n',
                            '  stateChanged(event) {\n',
                            '      var target = event.target,\n',
                            '          value = target.type === \'checkbox\' ? target.checked : target.value,\n',
                            '          name = target.name, labelContent;\n',
                            '\n',
                            '      this.setState({\n',
                            '          [name]: value\n',
                            '      });\n',
                            '  }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjChartHierarchical.Sunburst, { itemsSource: this.data, binding: "value", bindingName: ["year", "quarter", "month"], childItemsPath: "items", palette: this.state.chartPalette, innerRadius: this.state.innerRadius, offset: this.state.offset, startAngle: this.state.startAngle, reversed: this.state.reversed },
                        React.createElement(wjChart.FlexPieDataLabel, { position: "Center", content: "{name}" })),
                    React.createElement("div", { className: "form-horizontal" },
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Inner Radius"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement(wjInput.InputNumber, { value: this.state.innerRadius, min: 0, max: 1, step: .1, format: "n", valueChanged: this.innerRadiusChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Offset"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement(wjInput.InputNumber, { value: this.state.offset, min: 0, max: 1, step: .1, format: "n", valueChanged: this.offsetChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-md-3 control-label" }, "Start Angle"),
                            React.createElement("div", { className: "col-md-9" },
                                React.createElement(wjInput.InputNumber, { value: this.state.startAngle, min: 0, max: 360, step: 60, valueChanged: this.startAngleChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("div", { className: "col-md-offset-3 col-md-9" },
                                React.createElement(wjInput.Menu, { header: "Palette:  " + "<b>" + this.state.palette + "</b>", itemsSource: this.palettes, itemClicked: this.paletteChanged }))),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("div", { className: "col-md-offset-3 col-md-9" },
                                React.createElement("div", { className: "checkbox" },
                                    React.createElement("label", null,
                                        React.createElement("input", { type: "checkbox", name: "reversed", checked: this.state.reversed, onChange: this.stateChanged }),
                                        " Reversed?"))))))));
    };
    return BasicFeatures;
}(React.Component));
exports.BasicFeatures = BasicFeatures;
//# sourceMappingURL=BasicFeatures.js.map