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 VerticalBarChartCustomAccessibilityExample = /** @class */ (function (_super) {
    __extends(VerticalBarChartCustomAccessibilityExample, _super);
    function VerticalBarChartCustomAccessibilityExample(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;
    }
    VerticalBarChartCustomAccessibilityExample.prototype.render = function () {
        var isChecked = this.state.isChecked;
        var points = [
            __assign(__assign({ x: 'One', y: 20 }, (isChecked && { lineData: { y: 10, yAxisCalloutData: '12%' } })), { callOutAccessibilityData: { ariaLabel: "Bar series 1 of 4 " + (isChecked ? 'one 12% 20' : 'one 20') } }),
            __assign(__assign({ x: 'Two', y: 48 }, (isChecked && { lineData: { y: 28 } })), { callOutAccessibilityData: { ariaLabel: "Bar series 2 of 4 " + (isChecked ? 'Two 28 48' : 'Two 48') } }),
            __assign(__assign({ x: 'Three', y: 30 }, (isChecked && { lineData: { y: 4 } })), { callOutAccessibilityData: { ariaLabel: "Bar series 3 of 4 " + (isChecked ? 'Three 4 30' : 'Three 30') } }),
            __assign(__assign({ x: 'Four', y: 40 }, (isChecked && { lineData: { y: 28 } })), { callOutAccessibilityData: { ariaLabel: "Bar series 4 of 4 " + (isChecked ? 'Four 28 40' : 'Four 40') } }),
        ];
        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, { chartTitle: "Vertical bar chart custom accessibility example ", data: points, width: 800, height: 400, barWidth: 20, useSingleColor: this.state.useSingleColor, yAxisTickCount: 6, colors: customColors, hideLegend: true }))));
    };
    return VerticalBarChartCustomAccessibilityExample;
}(React.Component));
export { VerticalBarChartCustomAccessibilityExample };
//# sourceMappingURL=VerticalBarChart.CustomAccessibility.Example.js.map