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