"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var charting_1 = require("@uifabric/charting");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var Button_1 = require("office-ui-fabric-react/lib-commonjs/Button");
var PieChartDynamicExample = /** @class */ (function (_super) {
    tslib_1.__extends(PieChartDynamicExample, _super);
    function PieChartDynamicExample(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.neutralLight, Styling_1.DefaultPalette.neutralQuaternary, Styling_1.DefaultPalette.neutralTertiary],
        ];
        _this.state = {
            dynamicData: [
                { x: 'A', y: 25 },
                { x: 'B', y: 10 },
                { x: 'C', y: 60 },
                { x: 'D', y: 5 },
            ],
            colors: [
                Styling_1.DefaultPalette.blueLight,
                Styling_1.DefaultPalette.purpleLight,
                Styling_1.DefaultPalette.yellowLight,
                Styling_1.DefaultPalette.neutralLight,
            ],
        };
        _this._changeData = _this._changeData.bind(_this);
        _this._changeColors = _this._changeColors.bind(_this);
        return _this;
    }
    PieChartDynamicExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(charting_1.PieChart, { data: this.state.dynamicData, chartTitle: "Pie Chart", colors: this.state.colors }),
            React.createElement(Button_1.DefaultButton, { text: "Change data", onClick: this._changeData }),
            React.createElement(Button_1.DefaultButton, { text: "Change colors", onClick: this._changeColors })));
    };
    PieChartDynamicExample.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: [
                { x: 'A', y: a },
                { x: 'B', y: b },
                { x: 'C', y: c },
                { x: 'D', y: d },
            ],
        });
    };
    PieChartDynamicExample.prototype._changeColors = function () {
        this.setState({
            colors: [this._randomColor(0), this._randomColor(1), this._randomColor(2), this._randomColor(3)],
        });
    };
    PieChartDynamicExample.prototype._randomY = function (max) {
        return Math.floor(Math.random() * max + 5);
    };
    PieChartDynamicExample.prototype._randomColor = function (index) {
        return this._colors[index][Math.floor(Math.random() * this._colors[index].length)];
    };
    return PieChartDynamicExample;
}(React.Component));
exports.PieChartDynamicExample = PieChartDynamicExample;
//# sourceMappingURL=PieChart.Dynamic.Example.js.map