define(["require", "exports", "tslib", "react", "@fluentui/react-charting", "@fluentui/react/lib/Styling", "@fluentui/react/lib/Checkbox"], function (require, exports, tslib_1, React, react_charting_1, Styling_1, Checkbox_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.VerticalStackedBarChartBasicExample = void 0;
    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._onShowLineChange = function (ev, checked) {
                _this.setState({ showLine: checked });
            };
            _this.state = {
                width: 650,
                height: 350,
                showLine: true,
                barGapMax: 2,
            };
            return _this;
        }
        VerticalStackedBarChartBasicExample.prototype.render = function () {
            return React.createElement("div", null, this._basicExample());
        };
        VerticalStackedBarChartBasicExample.prototype._basicExample = function () {
            var _this = this;
            var showLine = this.state.showLine;
            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 = [
                tslib_1.__assign({ chartData: firstChartPoints, xAxisPoint: 0 }, (showLine && {
                    lineData: [
                        { y: 42, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta },
                        { y: 10, legend: 'Recommended Builds', color: Styling_1.DefaultPalette.redDark },
                    ],
                })),
                tslib_1.__assign({ chartData: secondChartPoints, xAxisPoint: 20 }, (showLine && {
                    lineData: [{ y: 33, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta }],
                })),
                tslib_1.__assign({ chartData: thirdChartPoints, xAxisPoint: 40 }, (showLine && {
                    lineData: [
                        { y: 60, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta },
                        { y: 20, legend: 'Recommended Builds', color: Styling_1.DefaultPalette.redDark },
                    ],
                })),
                tslib_1.__assign({ chartData: firstChartPoints, xAxisPoint: 60 }, (showLine && {
                    lineData: [
                        { y: 41, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta },
                        { y: 10, legend: 'Recommended Builds', color: Styling_1.DefaultPalette.redDark },
                    ],
                })),
                tslib_1.__assign({ chartData: fourthChartPoints, xAxisPoint: 80 }, (showLine && {
                    lineData: [
                        { y: 100, legend: 'Supported Builds', color: Styling_1.DefaultPalette.magenta },
                        { y: 70, legend: 'Recommended Builds', color: Styling_1.DefaultPalette.redDark },
                    ],
                })),
                {
                    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("label", null, "BarGapMax:"),
                React.createElement("input", { type: "range", value: this.state.barGapMax, min: 0, max: 10, onChange: function (e) { return _this.setState({ barGapMax: +e.target.value }); } }),
                React.createElement(Checkbox_1.Checkbox, { label: "show the lines (hide or show the lines)", checked: this.state.showLine, onChange: this._onShowLineChange, styles: { root: { marginTop: '20px' } } }),
                React.createElement("div", { style: rootStyle },
                    React.createElement(react_charting_1.VerticalStackedBarChart, { barGapMax: this.state.barGapMax, data: data, height: this.state.height, width: this.state.width, chartLabel: "Card title", legendProps: {
                            allowFocusOnLegends: true,
                        } }))));
        };
        return VerticalStackedBarChartBasicExample;
    }(React.Component));
    exports.VerticalStackedBarChartBasicExample = VerticalStackedBarChartBasicExample;
});
//# sourceMappingURL=VerticalStackedBarChart.Basic.Example.js.map