define(["require", "exports", "tslib", "react", "@uifabric/charting", "office-ui-fabric-react/lib/Styling", "office-ui-fabric-react/lib/Checkbox"], function (require, exports, tslib_1, React, charting_1, Styling_1, Checkbox_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var VerticalBarChartStyledExample = /** @class */ (function (_super) {
        tslib_1.__extends(VerticalBarChartStyledExample, _super);
        function VerticalBarChartStyledExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onChange = function (ev, checked) {
                _this.setState({ isChecked: checked });
            };
            _this._onCheckChange = function (ev, checked) {
                _this.setState({ useSingleColor: checked });
            };
            _this.state = {
                isChecked: true,
                useSingleColor: true,
            };
            return _this;
        }
        VerticalBarChartStyledExample.prototype.render = function () {
            var isChecked = this.state.isChecked;
            var points = [
                tslib_1.__assign({ x: 'One', y: 20 }, (isChecked && { lineData: { y: 10, yAxisCalloutData: '12%' } })),
                tslib_1.__assign({ x: 'Two', y: 48 }, (isChecked && { lineData: { y: 28 } })),
                tslib_1.__assign({ x: 'Three', y: 30 }, (isChecked && { lineData: { y: 4 } })),
                tslib_1.__assign({ x: 'Four', y: 40 }, (isChecked && { lineData: { y: 28 } })),
                tslib_1.__assign({ x: 'Five', y: 13 }, (isChecked && { lineData: { y: 8, yAxisCalloutData: '45%' } })),
                { x: 'Six', y: 60 },
                { x: 'Seven', y: 60 },
                tslib_1.__assign({ x: 'Eight', y: 57 }, (isChecked && { lineData: { y: 48 } })),
                { x: 'Nine', y: 14 },
                { x: 'Ten', y: 35 },
                tslib_1.__assign({ x: 'Elven', y: 20 }, (isChecked && { lineData: { y: 1 } })),
                tslib_1.__assign({ x: 'Twelve', y: 44 }, (isChecked && { lineData: { y: 10 } })),
                { x: 'Thirteen', y: 33 },
            ];
            var customColors = [Styling_1.DefaultPalette.greenLight, Styling_1.DefaultPalette.green, Styling_1.DefaultPalette.greenDark];
            return (React.createElement(React.Fragment, null,
                React.createElement(Checkbox_1.Checkbox, { label: "show  line(This will draw the line)", checked: this.state.isChecked, onChange: this._onChange }),
                React.createElement(Checkbox_1.Checkbox, { label: "use single color(This will have only one color)", checked: this.state.useSingleColor, onChange: this._onCheckChange, styles: { root: { marginTop: '20px' } } }),
                React.createElement("div", { style: { width: '800px', height: '400px' } },
                    React.createElement(charting_1.VerticalBarChart, { data: points, width: 800, height: 400, barWidth: 20, useSingleColor: this.state.useSingleColor, yAxisTickCount: 6, colors: customColors, hideLegend: true }))));
        };
        return VerticalBarChartStyledExample;
    }(React.Component));
    exports.VerticalBarChartStyledExample = VerticalBarChartStyledExample;
});
//# sourceMappingURL=VerticalBarChart.Styled.Example.js.map