"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var charting_1 = require("@uifabric/charting");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var Checkbox_1 = require("office-ui-fabric-react/lib-commonjs/Checkbox");
var VerticalStackedBarChartCustomAccessibilityExample = /** @class */ (function (_super) {
    tslib_1.__extends(VerticalStackedBarChartCustomAccessibilityExample, _super);
    function VerticalStackedBarChartCustomAccessibilityExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onWidthChange = function (e) {
            _this.setState({ width: parseInt(e.target.value, 10) });
        };
        _this._onHeightChange = function (e) {
            _this.setState({ height: parseInt(e.target.value, 10) });
        };
        _this._onShowLineChange = function (ev, checked) {
            _this.setState({ showLine: checked });
        };
        _this.state = {
            width: 650,
            height: 350,
            showLine: true,
            barGapMax: 2,
        };
        return _this;
    }
    VerticalStackedBarChartCustomAccessibilityExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalStackedBarChartCustomAccessibilityExample.prototype._basicExample = function () {
        var _this = this;
        var showLine = this.state.showLine;
        var firstChartPoints = [
            {
                legend: 'Metadata1',
                data: 40,
                color: Styling_1.DefaultPalette.accent,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '40%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 1-1 of 4, 2020/04/30 40%' },
            },
            {
                legend: 'Metadata2',
                data: 5,
                color: Styling_1.DefaultPalette.blueMid,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '5%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 1-2 of 4, 2020/04/30 5%' },
            },
            {
                legend: 'Metadata3',
                data: 20,
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '20%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 1-3 of 4, 2020/04/30 20%' },
            },
        ];
        var secondChartPoints = [
            {
                legend: 'Metadata1',
                data: 30,
                color: Styling_1.DefaultPalette.accent,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '30%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 2-1 of 4, 2020/04/30 30%' },
            },
            {
                legend: 'Metadata2',
                data: 20,
                color: Styling_1.DefaultPalette.blueMid,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '20%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 2-2 of 4, 2020/04/30 20%' },
            },
            {
                legend: 'Metadata3',
                data: 40,
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '40%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 2-3 of 4, 2020/04/30 40%' },
            },
        ];
        var thirdChartPoints = [
            {
                legend: 'Metadata1',
                data: 44,
                color: Styling_1.DefaultPalette.accent,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '44%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 3-1 of 4, 2020/04/30 44%' },
            },
            {
                legend: 'Metadata2',
                data: 28,
                color: Styling_1.DefaultPalette.blueMid,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '28%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 3-2 of 4, 2020/04/30 28%' },
            },
            {
                legend: 'Metadata3',
                data: 30,
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '30%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 3-3 of 4, 2020/04/30 30%' },
            },
        ];
        var data = [
            tslib_1.__assign(tslib_1.__assign({ chartData: firstChartPoints, xAxisPoint: 0 }, (showLine && {
                lineData: [
                    { y: 42, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta },
                    { y: 10, legend: 'Recommended Builds', color: Styling_1.DefaultPalette.redDark },
                ],
            })), { stackCallOutAccessibilityData: { ariaLabel: 'Bar stack series 1 of 6' } }),
            tslib_1.__assign(tslib_1.__assign({ chartData: secondChartPoints, xAxisPoint: 20 }, (showLine && {
                lineData: [{ y: 33, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta }],
            })), { stackCallOutAccessibilityData: { ariaLabel: 'Bar stack series 2 of 6' } }),
            tslib_1.__assign(tslib_1.__assign({ chartData: thirdChartPoints, xAxisPoint: 40 }, (showLine && {
                lineData: [
                    { y: 60, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta },
                    { y: 20, legend: 'Recommended Builds', color: Styling_1.DefaultPalette.redDark },
                ],
            })), { stackCallOutAccessibilityData: { ariaLabel: 'Bar stack series 3 of 6' } }),
        ];
        var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
        return (React.createElement(React.Fragment, null,
            React.createElement("label", null, "change Width:"),
            React.createElement("input", { type: "range", value: this.state.width, min: 200, max: 1000, onChange: this._onWidthChange }),
            React.createElement("label", null, "change Height:"),
            React.createElement("input", { type: "range", value: this.state.height, min: 200, max: 1000, onChange: this._onHeightChange }),
            React.createElement("label", null, "BarGapMax:"),
            React.createElement("input", { type: "range", value: this.state.barGapMax, min: 0, max: 10, onChange: function (e) { return _this.setState({ barGapMax: +e.target.value }); } }),
            React.createElement(Checkbox_1.Checkbox, { label: "show the lines (hide or show the lines)", checked: this.state.showLine, onChange: this._onShowLineChange, styles: { root: { marginTop: '20px' } } }),
            React.createElement("div", { style: rootStyle },
                React.createElement(charting_1.VerticalStackedBarChart, { chartTitle: "Vertical stacked bar chart custom accessibility example", barGapMax: this.state.barGapMax, data: data, height: this.state.height, width: this.state.width, legendProps: {
                        allowFocusOnLegends: true,
                    } }))));
    };
    return VerticalStackedBarChartCustomAccessibilityExample;
}(React.Component));
exports.VerticalStackedBarChartCustomAccessibilityExample = VerticalStackedBarChartCustomAccessibilityExample;
//# sourceMappingURL=VerticalStackedBarChart.CustomAccessibility.Example.js.map