import { __extends } from "tslib";
import * as React from 'react';
import { Legends } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
var LegendBasicExample = /** @class */ (function (_super) {
    __extends(LegendBasicExample, _super);
    function LegendBasicExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LegendBasicExample.prototype.render = function () {
        var legends = [
            {
                title: 'fsd 1',
                color: DefaultPalette.blue,
                action: function () {
                    console.log('click from LegendsPage');
                    alert('Legend1 clicked');
                },
                onMouseOutAction: function () {
                    console.log('On mouse out action');
                },
                hoverAction: function () {
                    console.log('hover action');
                },
            },
            {
                title: 'Legend 2',
                color: DefaultPalette.red,
                action: function () {
                    alert('Legend2 clicked');
                },
                hoverAction: function () {
                    console.log('hover action');
                },
            },
            {
                title: 'Legend 3',
                color: DefaultPalette.green,
                action: function () {
                    alert('Legend3 clicked');
                },
                hoverAction: function () {
                    console.log('hover action');
                },
            },
            {
                title: 'Legend 4',
                color: DefaultPalette.yellow,
                shape: 'triangle',
                action: function () {
                    alert('Legend4 clicked');
                },
                hoverAction: function () {
                    console.log('hover action');
                },
            },
        ];
        return React.createElement(Legends, { legends: legends, overflowProps: { focusZoneProps: { 'aria-label': 'legends container' } } });
    };
    return LegendBasicExample;
}(React.Component));
export { LegendBasicExample };
//# sourceMappingURL=Legends.Basic.Example.js.map