"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var charting_1 = require("@uifabric/charting");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
exports.MultiStackedBarChartExample = function () {
    var firstChartPoints = [
        {
            legend: 'Debit card numbers (EU and USA)',
            data: 40,
            color: Styling_1.DefaultPalette.red,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '40%',
        },
        {
            legend: 'Passport numbers (USA)',
            data: 23,
            color: Styling_1.DefaultPalette.green,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '23%',
        },
        {
            legend: 'Social security numbers',
            data: 35,
            color: Styling_1.DefaultPalette.yellow,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '35%',
        },
        {
            legend: 'Credit card numbers',
            data: 87,
            color: Styling_1.DefaultPalette.blueLight,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
        {
            legend: 'Tax identification numbers (USA)',
            data: 87,
            color: Styling_1.DefaultPalette.black,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
    ];
    var firstChartPoints1 = [
        {
            legend: 'Debit card numbers (EU and USA)',
            data: 40,
            color: Styling_1.DefaultPalette.red,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '40%',
        },
        {
            legend: 'Passport numbers (USA)',
            data: 56,
            color: Styling_1.DefaultPalette.green,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '56%',
        },
        {
            legend: 'Social security numbers',
            data: 35,
            color: Styling_1.DefaultPalette.yellow,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '35%',
        },
        {
            legend: 'Credit card numbers',
            data: 92,
            color: Styling_1.DefaultPalette.blueLight,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '92%',
        },
        {
            legend: 'Tax identification numbers (USA)',
            data: 87,
            color: Styling_1.DefaultPalette.black,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
    ];
    var secondChartPoints = [
        {
            legend: 'Phone Numbers',
            data: 40,
            color: Styling_1.DefaultPalette.blue,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
        {
            legend: 'Credit card Numbers',
            data: 23,
            color: Styling_1.DefaultPalette.green,
            xAxisCalloutData: '2020/04/30',
            yAxisCalloutData: '87%',
        },
    ];
    var hideRatio = [true, false];
    var hideDenominator = [true, true];
    var data = [
        {
            chartTitle: 'Monitored',
            chartData: firstChartPoints,
        },
        {
            chartTitle: 'Monitored Second Chart',
            chartData: firstChartPoints1,
        },
        {
            chartTitle: 'Unmonitored',
            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' }, legendsOverflowProps: { focusZoneProps: { 'aria-label': 'legends Container' } }, legendsOverflowText: 'OverFlow Items', 
        // eslint-disable-next-line react/jsx-no-bind
        onRenderCalloutPerDataPoint: function (props) {
            return props ? (React.createElement(charting_1.ChartHoverCard, { Legend: props.legend, YValue: props.yAxisCalloutData || props.data, color: props.color })) : null;
        } }));
};
//# sourceMappingURL=MultiStackedBarChart.Example.js.map