define(["require", "exports", "tslib", "react", "@fluentui/react-charting", "@fluentui/react/lib/Styling", "@fluentui/react/lib/Button"], function (require, exports, tslib_1, React, react_charting_1, Styling_1, Button_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.DonutChartDynamicExample = void 0;
    var DonutChartDynamicExample = /** @class */ (function (_super) {
        tslib_1.__extends(DonutChartDynamicExample, _super);
        function DonutChartDynamicExample(props) {
            var _this = _super.call(this, props) || this;
            _this._colors = [
                [
                    Styling_1.DefaultPalette.blueLight,
                    Styling_1.DefaultPalette.blue,
                    Styling_1.DefaultPalette.tealLight,
                    Styling_1.DefaultPalette.teal,
                    Styling_1.DefaultPalette.greenLight,
                ],
                [Styling_1.DefaultPalette.purpleLight, Styling_1.DefaultPalette.purple, Styling_1.DefaultPalette.magentaLight, Styling_1.DefaultPalette.magenta],
                [Styling_1.DefaultPalette.yellowLight, Styling_1.DefaultPalette.yellow, Styling_1.DefaultPalette.orangeLighter, Styling_1.DefaultPalette.orangeLight],
                [Styling_1.DefaultPalette.neutralTertiary, Styling_1.DefaultPalette.neutralSecondary, Styling_1.DefaultPalette.neutralPrimary],
            ];
            _this.state = {
                dynamicData: [
                    { legend: 'first', data: 40, color: Styling_1.DefaultPalette.blueLight },
                    { legend: 'second', data: 20, color: Styling_1.DefaultPalette.purpleLight },
                    { legend: 'third', data: 30, color: Styling_1.DefaultPalette.yellowLight },
                    { legend: 'fourth', data: 10, color: Styling_1.DefaultPalette.neutralSecondary },
                ],
            };
            _this._changeData = _this._changeData.bind(_this);
            _this._changeColors = _this._changeColors.bind(_this);
            return _this;
        }
        DonutChartDynamicExample.prototype.render = function () {
            var chartTitle = 'Stacked Bar chart example';
            var data = {
                chartTitle: chartTitle,
                chartData: this.state.dynamicData,
            };
            return (React.createElement("div", null,
                React.createElement(react_charting_1.DonutChart, { data: data, innerRadius: 55, legendProps: {
                        allowFocusOnLegends: true,
                    } }),
                React.createElement(Button_1.DefaultButton, { text: "Change data", onClick: this._changeData }),
                React.createElement(Button_1.DefaultButton, { text: "Change colors", onClick: this._changeColors })));
        };
        DonutChartDynamicExample.prototype._changeData = function () {
            var a = this._randomY(40);
            var b = this._randomY(100 - a - 20);
            var c = this._randomY(100 - a - b - 10);
            var d = 100 - a - b - c;
            this.setState({
                dynamicData: [
                    { legend: 'first', data: a, color: Styling_1.DefaultPalette.blueLight },
                    { legend: 'second', data: b, color: Styling_1.DefaultPalette.purpleLight },
                    { legend: 'third', data: c, color: Styling_1.DefaultPalette.yellowLight },
                    { legend: 'fourth', data: d, color: Styling_1.DefaultPalette.neutralSecondary },
                ],
            });
        };
        DonutChartDynamicExample.prototype._changeColors = function () {
            this.setState({
                dynamicData: [
                    { legend: 'first', data: 40, color: this._randomColor(0) },
                    { legend: 'second', data: 20, color: this._randomColor(1) },
                    { legend: 'third', data: 30, color: this._randomColor(2) },
                    { legend: 'fourth', data: 10, color: this._randomColor(3) },
                ],
            });
        };
        DonutChartDynamicExample.prototype._randomY = function (max) {
            return Math.floor(Math.random() * max + 5);
        };
        DonutChartDynamicExample.prototype._randomColor = function (index) {
            return this._colors[index][Math.floor(Math.random() * this._colors[index].length)];
        };
        return DonutChartDynamicExample;
    }(React.Component));
    exports.DonutChartDynamicExample = DonutChartDynamicExample;
});
//# sourceMappingURL=DonutChart.Dynamic.Example.js.map