import { __extends } from "tslib";
import * as React from 'react';
import { DonutChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
var DonutChartDynamicExample = /** @class */ (function (_super) {
    __extends(DonutChartDynamicExample, _super);
    function DonutChartDynamicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._colors = [
            [
                DefaultPalette.blueLight,
                DefaultPalette.blue,
                DefaultPalette.tealLight,
                DefaultPalette.teal,
                DefaultPalette.greenLight,
            ],
            [DefaultPalette.purpleLight, DefaultPalette.purple, DefaultPalette.magentaLight, DefaultPalette.magenta],
            [DefaultPalette.yellowLight, DefaultPalette.yellow, DefaultPalette.orangeLighter, DefaultPalette.orangeLight],
            [DefaultPalette.neutralTertiary, DefaultPalette.neutralSecondary, DefaultPalette.neutralPrimary],
        ];
        _this.state = {
            dynamicData: [
                { legend: 'first', data: 40, color: DefaultPalette.blueLight },
                { legend: 'second', data: 20, color: DefaultPalette.purpleLight },
                { legend: 'third', data: 30, color: DefaultPalette.yellowLight },
                { legend: 'fourth', data: 10, color: 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(DonutChart, { data: data, innerRadius: 55, legendProps: {
                    overflowProps: {
                        focusZoneProps: {
                            'aria-label': 'Legends container',
                        },
                    },
                    allowFocusOnLegends: true,
                } }),
            React.createElement(DefaultButton, { text: "Change data", onClick: this._changeData }),
            React.createElement(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: DefaultPalette.blueLight },
                { legend: 'second', data: b, color: DefaultPalette.purpleLight },
                { legend: 'third', data: c, color: DefaultPalette.yellowLight },
                { legend: 'fourth', data: d, color: 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));
export { DonutChartDynamicExample };
//# sourceMappingURL=DonutChart.Dynamic.Example.js.map