"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 LegendOverflowExample = /** @class */ (function (_super) {
    tslib_1.__extends(LegendOverflowExample, _super);
    function LegendOverflowExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LegendOverflowExample.prototype.render = function () {
        var legends = [
            {
                title: 'Legend 1',
                color: Styling_1.DefaultPalette.red,
                action: function () {
                    console.log('Legend1 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend1');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 2',
                color: Styling_1.DefaultPalette.green,
                action: function () {
                    console.log('Legend2 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend2');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 3',
                color: Styling_1.DefaultPalette.yellow,
                action: function () {
                    console.log('Legend3 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend3');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 4',
                color: Styling_1.DefaultPalette.blue,
                action: function () {
                    console.log('Legend4 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend4');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 5',
                color: Styling_1.DefaultPalette.purpleLight,
                action: function () {
                    console.log('Legend5 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend5');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 6',
                color: Styling_1.DefaultPalette.orange,
                action: function () {
                    console.log('Legend6 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend6');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 7',
                color: Styling_1.DefaultPalette.magenta,
                action: function () {
                    console.log('Legend7 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend7');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 8',
                color: Styling_1.DefaultPalette.themeDark,
                action: function () {
                    console.log('Legend8 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend8');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 9',
                color: Styling_1.DefaultPalette.redDark,
                action: function () {
                    console.log('Legend9 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend9');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 10',
                color: Styling_1.DefaultPalette.blueMid,
                action: function () {
                    console.log('Legend10 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend10');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 11',
                color: Styling_1.DefaultPalette.blackTranslucent40,
                action: function () {
                    console.log('Legend11 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend11');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 12',
                color: Styling_1.DefaultPalette.greenDark,
                action: function () {
                    console.log('Legend12 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend12');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 13',
                color: Styling_1.DefaultPalette.yellowLight,
                action: function () {
                    console.log('Legend13 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend13');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 14',
                color: Styling_1.DefaultPalette.magentaLight,
                action: function () {
                    console.log('Legend14 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend14');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 15',
                color: Styling_1.DefaultPalette.purpleDark,
                action: function () {
                    console.log('Legend15 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend15');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 16',
                color: Styling_1.DefaultPalette.blueMid,
                action: function () {
                    console.log('Legend16 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend16');
                },
                onMouseOutAction: function () { return undefined; },
            },
            {
                title: 'Legend 17',
                color: Styling_1.DefaultPalette.accent,
                action: function () {
                    console.log('Legend17 clicked');
                },
                hoverAction: function () {
                    console.log('Hover action for legend17');
                },
                onMouseOutAction: function () { return undefined; },
            },
        ];
        return (React.createElement(charting_1.Legends, { legends: legends, overflowText: 'Overflow Items', allowFocusOnLegends: true, overflowProps: { focusZoneProps: { 'aria-label': 'legends container' } }, canSelectMultipleLegends: false }));
    };
    return LegendOverflowExample;
}(React.Component));
exports.LegendOverflowExample = LegendOverflowExample;
//# sourceMappingURL=Legends.Overflow.Example.js.map