import { __assign, __extends } from "tslib";
import * as React from 'react';
import { VerticalBarChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
var VerticalBarChartStyledExample = /** @class */ (function (_super) {
    __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 = [
            __assign({ x: 'One', y: 20 }, (isChecked && { lineData: { y: 10, yAxisCalloutData: '12%' } })),
            __assign({ x: 'Two', y: 48 }, (isChecked && { lineData: { y: 28 } })),
            __assign({ x: 'Three', y: 30 }, (isChecked && { lineData: { y: 4 } })),
            __assign({ x: 'Four', y: 40 }, (isChecked && { lineData: { y: 28 } })),
            __assign({ x: 'Five', y: 13 }, (isChecked && { lineData: { y: 8, yAxisCalloutData: '45%' } })),
            { x: 'Six', y: 60 },
            { x: 'Seven', y: 60 },
            __assign({ x: 'Eight', y: 57 }, (isChecked && { lineData: { y: 48 } })),
            { x: 'Nine', y: 14 },
            { x: 'Ten', y: 35 },
            __assign({ x: 'Elven', y: 20 }, (isChecked && { lineData: { y: 1 } })),
            __assign({ x: 'Twelve', y: 44 }, (isChecked && { lineData: { y: 10 } })),
            { x: 'Thirteen', y: 33 },
        ];
        var customColors = [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark];
        return (React.createElement(React.Fragment, null,
            React.createElement(Checkbox, { label: "show  line(This will draw the line)", checked: this.state.isChecked, onChange: this._onChange }),
            React.createElement(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(VerticalBarChart, { data: points, width: 800, height: 400, barWidth: 20, useSingleColor: this.state.useSingleColor, yAxisTickCount: 6, colors: customColors, hideLegend: true }))));
    };
    return VerticalBarChartStyledExample;
}(React.Component));
export { VerticalBarChartStyledExample };
//# sourceMappingURL=VerticalBarChart.Styled.Example.js.map