import { __extends } from "tslib";
import * as React from 'react';
import { PieChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
var PieChartDynamicExample = /** @class */ (function (_super) {
    __extends(PieChartDynamicExample, _super);
    function PieChartDynamicExample(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.neutralLight, DefaultPalette.neutralQuaternary, DefaultPalette.neutralTertiary],
        ];
        _this.state = {
            dynamicData: [
                { x: 'A', y: 25 },
                { x: 'B', y: 10 },
                { x: 'C', y: 60 },
                { x: 'D', y: 5 },
            ],
            colors: [
                DefaultPalette.blueLight,
                DefaultPalette.purpleLight,
                DefaultPalette.yellowLight,
                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(PieChart, { data: this.state.dynamicData, chartTitle: "Pie Chart", colors: this.state.colors }),
            React.createElement(DefaultButton, { text: "Change data", onClick: this._changeData }),
            React.createElement(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));
export { PieChartDynamicExample };
//# sourceMappingURL=PieChart.Dynamic.Example.js.map