define(["require", "exports", "tslib", "react", "@uifabric/charting", "office-ui-fabric-react/lib/Styling", "office-ui-fabric-react/lib/Button"], function (require, exports, tslib_1, React, charting_1, Styling_1, Button_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var StackedBarChartDynamicExample = /** @class */ (function (_super) {
        tslib_1.__extends(StackedBarChartDynamicExample, _super);
        function StackedBarChartDynamicExample(props) {
            var _this = _super.call(this, props) || this;
            _this._colors = [
                [
                    Styling_1.DefaultPalette.blueMid,
                    Styling_1.DefaultPalette.blue,
                    Styling_1.DefaultPalette.blueLight,
                    Styling_1.DefaultPalette.tealDark,
                    Styling_1.DefaultPalette.teal,
                    Styling_1.DefaultPalette.tealLight,
                ],
                [
                    Styling_1.DefaultPalette.redDark,
                    Styling_1.DefaultPalette.red,
                    Styling_1.DefaultPalette.orange,
                    Styling_1.DefaultPalette.orangeLight,
                    Styling_1.DefaultPalette.orangeLighter,
                    Styling_1.DefaultPalette.yellow,
                    Styling_1.DefaultPalette.yellowLight,
                ],
                [
                    Styling_1.DefaultPalette.greenDark,
                    Styling_1.DefaultPalette.green,
                    Styling_1.DefaultPalette.greenLight,
                    Styling_1.DefaultPalette.neutralPrimary,
                    Styling_1.DefaultPalette.neutralSecondary,
                    Styling_1.DefaultPalette.neutralTertiary,
                ],
                [
                    Styling_1.DefaultPalette.purpleDark,
                    Styling_1.DefaultPalette.purple,
                    Styling_1.DefaultPalette.purpleLight,
                    Styling_1.DefaultPalette.magentaDark,
                    Styling_1.DefaultPalette.magenta,
                    Styling_1.DefaultPalette.magentaLight,
                ],
            ];
            _this.state = {
                dynamicData: {
                    chartTitle: 'Stacked Bar chart',
                    chartData: [
                        { legend: 'first', data: 40, color: Styling_1.DefaultPalette.blueLight },
                        { legend: 'second', data: 23, color: Styling_1.DefaultPalette.yellow },
                        { legend: 'third', data: 35, color: Styling_1.DefaultPalette.neutralSecondary },
                        { legend: 'fourth', data: 87, color: Styling_1.DefaultPalette.greenLight },
                    ],
                },
            };
            _this._changeData = _this._changeData.bind(_this);
            _this._changeColors = _this._changeColors.bind(_this);
            return _this;
        }
        StackedBarChartDynamicExample.prototype.render = function () {
            return (React.createElement("div", null,
                React.createElement(charting_1.StackedBarChart, { data: this.state.dynamicData }),
                React.createElement(Button_1.DefaultButton, { text: "Change data", onClick: this._changeData }),
                React.createElement(Button_1.DefaultButton, { text: "Change colors", onClick: this._changeColors })));
        };
        StackedBarChartDynamicExample.prototype._changeData = function () {
            this.setState({
                dynamicData: {
                    chartTitle: 'Stacked Bar chart',
                    chartData: [
                        { legend: 'first', data: this._randomY() },
                        { legend: 'second', data: this._randomY() },
                        { legend: 'third', data: this._randomY() },
                        { legend: 'fourth', data: this._randomY() },
                    ],
                },
            });
        };
        StackedBarChartDynamicExample.prototype._changeColors = function () {
            this.setState({
                dynamicData: {
                    chartTitle: 'Stacked Bar chart',
                    chartData: [
                        { legend: 'first', data: 40, color: this._randomColor(0) },
                        { legend: 'second', data: 23, color: this._randomColor(1) },
                        { legend: 'third', data: 35, color: this._randomColor(2) },
                        { legend: 'fourth', data: 87, color: this._randomColor(3) },
                    ],
                },
            });
        };
        StackedBarChartDynamicExample.prototype._randomY = function () {
            return Math.random() * 45 + 5;
        };
        StackedBarChartDynamicExample.prototype._randomColor = function (index) {
            return this._colors[index][Math.floor(Math.random() * this._colors[index].length)];
        };
        return StackedBarChartDynamicExample;
    }(React.Component));
    exports.StackedBarChartDynamicExample = StackedBarChartDynamicExample;
});
//# sourceMappingURL=StackedBarChart.Dynamic.Example.js.map