import { __extends } from "tslib";
import * as React from 'react';
import { ComponentPage, ExampleCard, PropertiesTableSet } from '@uifabric/example-app-base';
import { LegendOverflowExample } from './Legends.Overflow.Example';
import { LegendBasicExample } from './Legends.Basic.Example';
import { LegendWrapLinesExample } from './Legends.WrapLines.Example';
var LegendsOverflowExampleCode = require('!raw-loader!@fluentui/examples/src/charting/Legends/Legends.Overflow.Example.tsx');
var LegendsWrapLinesExampleCode = require('!raw-loader!@fluentui/examples/src/charting/Legends/Legends.WrapLines.Example.tsx');
var LegendsBasicExampleCode = require('!raw-loader!@fluentui/examples/src/charting/Legends/Legends.Basic.Example.tsx');
var LegendsPage = /** @class */ (function (_super) {
    __extends(LegendsPage, _super);
    function LegendsPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LegendsPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: "Legends", componentName: "Legends", exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: "Legends with overflow", code: LegendsOverflowExampleCode },
                    React.createElement(LegendOverflowExample, null)),
                React.createElement(ExampleCard, { title: "Legends with wrap lines", code: LegendsWrapLinesExampleCode },
                    React.createElement(LegendWrapLinesExample, null)),
                React.createElement(ExampleCard, { title: "Legends with no overflow", code: LegendsBasicExampleCode },
                    React.createElement(LegendBasicExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [require('!raw-loader!@uifabric/charting/src/components/Legends/Legends.types.ts')], renderOnly: ['ILegendsProps', 'ILegend', 'ILegendsStyles'] }), overview: React.createElement("div", null,
                React.createElement("p", null, "The legends wrap based upon the space available for them. If there is not enough space to show all legends on a single line, the legends fall into a overfow menu. Text appears indicating the number of legends in the overflow menu. The legneds are selectable and action to be performed upon clicking a certain legend can be passed.")) }));
    };
    return LegendsPage;
}(React.Component));
export { LegendsPage };
//# sourceMappingURL=LegendsPage.js.map