"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StackedBarChartPage = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_docsite_components_1 = require("@fluentui/react-docsite-components");
var StackedBarChart_Basic_Example_1 = require("./StackedBarChart.Basic.Example");
var StackedBarChart_Benchmark_Example_1 = require("./StackedBarChart.Benchmark.Example");
var StackedBarChart_Multiple_Example_1 = require("./StackedBarChart.Multiple.Example");
var StackedBarChart_Dynamic_Example_1 = require("./StackedBarChart.Dynamic.Example");
var MultiStackedBarChart_Example_1 = require("./MultiStackedBarChart.Example");
var StackedBarChart_BaseBar_Example_1 = require("./StackedBarChart.BaseBar.Example");
var MultiStackedBarChartWithPlaceHolder_Example_1 = require("./MultiStackedBarChartWithPlaceHolder.Example");
var StackedBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx');
var StackedBarChartBenchmarkExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Benchmark.Example.tsx');
var StackedBarChartMultipleExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Multiple.Example.tsx');
var StackedBarChartDynamicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Dynamic.Example.tsx');
var MultiStackedBarChartExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx');
var StackedBarChartBaseBarExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.BaseBar.Example.tsx');
var MultiStackedBarChartWithPlaceholderExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx');
var StackedBarChartPage = /** @class */ (function (_super) {
    tslib_1.__extends(StackedBarChartPage, _super);
    function StackedBarChartPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    StackedBarChartPage.prototype.render = function () {
        return (React.createElement(react_docsite_components_1.ComponentPage, { title: "StackedBarChart", componentName: "StackedBarChartExample", exampleCards: React.createElement("div", null,
                React.createElement(react_docsite_components_1.ExampleCard, { title: "StackedBarChart basic", code: StackedBarChartBasicExampleCode },
                    React.createElement(StackedBarChart_Basic_Example_1.StackedBarChartBasicExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "StackedBarChart benchmark", code: StackedBarChartBenchmarkExampleCode },
                    React.createElement(StackedBarChart_Benchmark_Example_1.StackedBarChartBenchmarkExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "StackBarChart Empty", code: StackedBarChartBaseBarExampleCode },
                    React.createElement(StackedBarChart_BaseBar_Example_1.StackedBarChartBaseBarExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "StackedBarChart with multiple data points", code: StackedBarChartMultipleExampleCode },
                    React.createElement(StackedBarChart_Multiple_Example_1.StackedBarChartMultipleExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "StackedBarChart dynamic", code: StackedBarChartDynamicExampleCode },
                    React.createElement(StackedBarChart_Dynamic_Example_1.StackedBarChartDynamicExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "Multiple StackedBarCharts", code: MultiStackedBarChartExampleCode },
                    React.createElement(MultiStackedBarChart_Example_1.MultiStackedBarChartExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "Multiple StackedBarCharts with placeholder", code: MultiStackedBarChartWithPlaceholderExampleCode },
                    React.createElement(MultiStackedBarChartWithPlaceHolder_Example_1.MultiStackedBarChartWithPlaceholderExample, null))), propertiesTables: React.createElement(react_docsite_components_1.PropertiesTableSet, { sources: [
                    require('!raw-loader?esModule=false!@fluentui/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts'),
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "StackedBarChart shows the data in a bar format. It has two variations: single stacked and multi-stacked. Below are a few points that will help you understand the stacked bar chart better:"),
                React.createElement("ul", null,
                    React.createElement("li", null, "The stacked bar chart comes with a legends component built in."),
                    React.createElement("li", null, "Single stacked bar chart takes 'data' attribute which is of type IChartDataPoint[]"),
                    React.createElement("li", null, "Multi-stacked bar chart takes 'data' attribute which is of type IChartDataPoint[][]. It will render the chart based upon the values given to this attribute."),
                    React.createElement("li", null, "Ratio on top of the chart is shown if it has only two data points. For the rest of cases the ratio is not shown"),
                    React.createElement("li", null, "A number is displayed on the top of stacked bar chart if it has only one data point. This number shown is the data you pass"),
                    React.createElement("li", null, "MultiStackedBarChart has a option 'showRatio' this will help you hide the ratio for the chart. It is a boolean[], you can use the values to control displaying ratio for each chart in MultiStackedBarChart."),
                    React.createElement("li", null, "If a chart in MultiStackedBarChart shows ratio, legends are not displayed for that chart and vice-versa."))), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return StackedBarChartPage;
}(React.Component));
exports.StackedBarChartPage = StackedBarChartPage;
//# sourceMappingURL=StackedBarChartPage.js.map