define(["require", "exports", "tslib", "react", "@uifabric/charting", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, charting_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var VerticalStackedBarChartBasicExample = /** @class */ (function (_super) {
        tslib_1.__extends(VerticalStackedBarChartBasicExample, _super);
        function VerticalStackedBarChartBasicExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onWidthChange = function (e) {
                _this.setState({ width: parseInt(e.target.value, 10) });
            };
            _this._onHeightChange = function (e) {
                _this.setState({ height: parseInt(e.target.value, 10) });
            };
            _this.state = {
                width: 650,
                height: 350,
            };
            return _this;
        }
        VerticalStackedBarChartBasicExample.prototype.render = function () {
            return React.createElement("div", null, this._basicExample());
        };
        VerticalStackedBarChartBasicExample.prototype._basicExample = function () {
            var firstChartPoints = [
                {
                    legend: 'Metadata1',
                    data: 40,
                    color: Styling_1.DefaultPalette.accent,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '40%',
                },
                {
                    legend: 'Metadata2',
                    data: 5,
                    color: Styling_1.DefaultPalette.blueMid,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '5%',
                },
                {
                    legend: 'Metadata3',
                    data: 20,
                    color: Styling_1.DefaultPalette.blueLight,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '20%',
                },
            ];
            var secondChartPoints = [
                {
                    legend: 'Metadata1',
                    data: 30,
                    color: Styling_1.DefaultPalette.accent,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '30%',
                },
                {
                    legend: 'Metadata2',
                    data: 20,
                    color: Styling_1.DefaultPalette.blueMid,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '20%',
                },
                {
                    legend: 'Metadata3',
                    data: 40,
                    color: Styling_1.DefaultPalette.blueLight,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '40%',
                },
            ];
            var thirdChartPoints = [
                {
                    legend: 'Metadata1',
                    data: 44,
                    color: Styling_1.DefaultPalette.accent,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '44%',
                },
                {
                    legend: 'Metadata2',
                    data: 28,
                    color: Styling_1.DefaultPalette.blueMid,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '28%',
                },
                {
                    legend: 'Metadata3',
                    data: 30,
                    color: Styling_1.DefaultPalette.blueLight,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '30%',
                },
            ];
            var fourthChartPoints = [
                {
                    legend: 'Metadata1',
                    data: 88,
                    color: Styling_1.DefaultPalette.accent,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '88%',
                },
                {
                    legend: 'Metadata2',
                    data: 22,
                    color: Styling_1.DefaultPalette.blueMid,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '22%',
                },
                {
                    legend: 'Metadata3',
                    data: 30,
                    color: Styling_1.DefaultPalette.blueLight,
                    xAxisCalloutData: '2020/04/30',
                    yAxisCalloutData: '30%',
                },
            ];
            var data = [
                { chartData: firstChartPoints, xAxisPoint: 0 },
                { chartData: secondChartPoints, xAxisPoint: 20 },
                { chartData: thirdChartPoints, xAxisPoint: 40 },
                { chartData: firstChartPoints, xAxisPoint: 60 },
                { chartData: fourthChartPoints, xAxisPoint: 80 },
                { chartData: firstChartPoints, xAxisPoint: 100 },
            ];
            var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
            return (React.createElement(React.Fragment, null,
                React.createElement("label", null, "change Width:"),
                React.createElement("input", { type: "range", value: this.state.width, min: 200, max: 1000, onChange: this._onWidthChange }),
                React.createElement("label", null, "change Height:"),
                React.createElement("input", { type: "range", value: this.state.height, min: 200, max: 1000, onChange: this._onHeightChange }),
                React.createElement("div", { style: rootStyle },
                    React.createElement(charting_1.VerticalStackedBarChart, { data: data, height: this.state.height, width: this.state.width, chartLabel: "Card title", legendProps: {
                            overflowProps: {
                                focusZoneProps: {
                                    'aria-label': 'Legends container',
                                },
                            },
                            allowFocusOnLegends: true,
                        } }))));
        };
        return VerticalStackedBarChartBasicExample;
    }(React.Component));
    exports.VerticalStackedBarChartBasicExample = VerticalStackedBarChartBasicExample;
});
//# sourceMappingURL=VerticalStackedBarChart.Basic.Example.js.map