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 GroupedVerticalBarChartBasicExample = /** @class */ (function (_super) {
        tslib_1.__extends(GroupedVerticalBarChartBasicExample, _super);
        function GroupedVerticalBarChartBasicExample(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: 700,
                height: 400,
            };
            return _this;
        }
        GroupedVerticalBarChartBasicExample.prototype.render = function () {
            return React.createElement("div", null, this._basicExample());
        };
        GroupedVerticalBarChartBasicExample.prototype._basicExample = function () {
            var data = [
                {
                    name: 'Metadata info multi lines text Completed',
                    series: [
                        {
                            key: 'series1',
                            data: 33000,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData1',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '33%',
                        },
                        {
                            key: 'series2',
                            data: 44000,
                            color: Styling_1.DefaultPalette.blue,
                            legend: 'MetaData4',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '44%',
                        },
                    ],
                },
                {
                    name: 'Meta Data2',
                    series: [
                        {
                            key: 'series1',
                            data: 33000,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData1',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '33%',
                        },
                        {
                            key: 'series2',
                            data: 3000,
                            color: Styling_1.DefaultPalette.blue,
                            legend: 'MetaData4',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '3%',
                        },
                    ],
                },
                {
                    name: 'Single line text ',
                    series: [
                        {
                            key: 'series1',
                            data: 14000,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData1',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '14%',
                        },
                        {
                            key: 'series2',
                            data: 50000,
                            color: Styling_1.DefaultPalette.blue,
                            legend: 'MetaData4',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '50%',
                        },
                    ],
                },
                {
                    name: 'Hello World!!!',
                    series: [
                        {
                            key: 'series1',
                            data: 33000,
                            color: Styling_1.DefaultPalette.blueLight,
                            legend: 'MetaData1',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '33%',
                        },
                        {
                            key: 'series2',
                            data: 3000,
                            color: Styling_1.DefaultPalette.blue,
                            legend: 'MetaData4',
                            xAxisCalloutData: '2020/04/30',
                            yAxisCalloutData: '3%',
                        },
                    ],
                },
            ];
            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.GroupedVerticalBarChart, { data: data, height: this.state.height, width: this.state.width, showYAxisGridLines: true, wrapXAxisLables: true }))));
        };
        return GroupedVerticalBarChartBasicExample;
    }(React.Component));
    exports.GroupedVerticalBarChartBasicExample = GroupedVerticalBarChartBasicExample;
});
//# sourceMappingURL=GroupedVerticalBarChart.Basic.Example.js.map