define(["require", "exports", "react", "@uifabric/charting", "office-ui-fabric-react/lib/Styling"], function (require, exports, React, charting_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.MultiStackedBarChartCustomAccessibilityExample = function () {
        var firstChartPoints = [
            {
                legend: 'Debit card numbers (EU and USA)',
                data: 40,
                color: Styling_1.DefaultPalette.red,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '40%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 5 2020/04/30 40%' },
            },
            {
                legend: 'Passport numbers (USA)',
                data: 23,
                color: Styling_1.DefaultPalette.green,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '23%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 5 2020/04/30 23%' },
            },
            {
                legend: 'Social security numbers',
                data: 35,
                color: Styling_1.DefaultPalette.yellow,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '35%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 3 of 5 2020/04/30 35%' },
            },
            {
                legend: 'Credit card numbers',
                data: 87,
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 4 of 5 2020/04/30 87%' },
            },
            {
                legend: 'Tax identification numbers (USA)',
                data: 87,
                color: Styling_1.DefaultPalette.black,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 5 of 5 2020/04/30 87%' },
            },
        ];
        var firstChartPoints1 = [
            {
                legend: 'Debit card numbers (EU and USA)',
                data: 40,
                color: Styling_1.DefaultPalette.red,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '40%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 5 2020/04/30 40%' },
            },
            {
                legend: 'Passport numbers (USA)',
                data: 56,
                color: Styling_1.DefaultPalette.green,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '56%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 5 2020/04/30 56%' },
            },
            {
                legend: 'Social security numbers',
                data: 35,
                color: Styling_1.DefaultPalette.yellow,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '35%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 3 of 5 2020/04/30 35%' },
            },
            {
                legend: 'Credit card numbers',
                data: 92,
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '92%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 4 of 5 2020/04/30 92%' },
            },
            {
                legend: 'Tax identification numbers (USA)',
                data: 87,
                color: Styling_1.DefaultPalette.black,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 5 of 5 2020/04/30 87%' },
            },
        ];
        var secondChartPoints = [
            {
                legend: 'Phone Numbers',
                data: 40,
                color: Styling_1.DefaultPalette.blue,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 2 2020/04/30 87%' },
            },
            {
                legend: 'Credit card Numbers',
                data: 23,
                color: Styling_1.DefaultPalette.green,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 2 2020/04/30 87%' },
            },
        ];
        var hideRatio = [true, false];
        var hideDenominator = [true, true];
        var data = [
            {
                chartTitle: 'Monitored',
                chartTitleAccessibilityData: { ariaLabel: 'Bar chart depicting about Monitored' },
                chartData: firstChartPoints,
            },
            {
                chartTitle: 'Monitored Second Chart',
                chartTitleAccessibilityData: { ariaLabel: 'Bar chart depicting about Monitored Second Chart' },
                chartData: firstChartPoints1,
            },
            {
                chartTitle: 'Unmonitored',
                chartTitleAccessibilityData: { ariaLabel: 'Bar chart depicting about Unmonitored' },
                chartDataAccessibilityData: { ariaLabel: 'number 40 out of 63' },
                chartData: secondChartPoints,
            },
        ];
        return (React.createElement(charting_1.MultiStackedBarChart, { data: data, hideDenominator: hideDenominator, hideRatio: hideRatio, width: 600, href: 'https://developer.microsoft.com/en-us/', focusZonePropsForLegendsInHoverCard: { 'aria-label': 'legends Container' }, legendsOverflowText: 'OverFlow Items' }));
    };
});
//# sourceMappingURL=MultiStackedBarChart.CustomAccessibility.Example.js.map