"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 VerticalBarChartDynamicExample = /** @class */ (function (_super) {
    tslib_1.__extends(VerticalBarChartDynamicExample, _super);
    function VerticalBarChartDynamicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._colors = [
            [Styling_1.DefaultPalette.blueLight, Styling_1.DefaultPalette.blue, Styling_1.DefaultPalette.blueDark],
            [Styling_1.DefaultPalette.orangeLighter, Styling_1.DefaultPalette.orangeLight, Styling_1.DefaultPalette.orange],
            [Styling_1.DefaultPalette.greenLight, Styling_1.DefaultPalette.green, Styling_1.DefaultPalette.greenDark],
            [Styling_1.DefaultPalette.magentaLight, Styling_1.DefaultPalette.magenta, Styling_1.DefaultPalette.magentaDark],
        ];
        _this._colorIndex = 0;
        _this.state = {
            dynamicData: [
                { x: 0, y: 10 },
                { x: 12, y: 36 },
                { x: 21, y: 20 },
                { x: 29, y: 46 },
                { x: 40, y: 13 },
                { x: 50, y: 43 },
                { x: 57, y: 30 },
                { x: 64, y: 45 },
                { x: 78, y: 50 },
                { x: 90, y: 43 },
                { x: 100, y: 19 },
            ],
            colors: _this._colors[0],
        };
        _this._changeData = _this._changeData.bind(_this);
        _this._changeColors = _this._changeColors.bind(_this);
        return _this;
    }
    VerticalBarChartDynamicExample.prototype.render = function () {
        return (React.createElement("div", { style: { width: '650px', height: '400px' } },
            React.createElement(charting_1.VerticalBarChart, { chartTitle: "Vertical bar chart dynamic example ", data: this.state.dynamicData, colors: this.state.colors, hideLegend: true, hideTooltip: true, yMaxValue: 50, yAxisTickCount: 5, height: 400, width: 650 }),
            React.createElement(Button_1.DefaultButton, { text: "Change data", onClick: this._changeData }),
            React.createElement(Button_1.DefaultButton, { text: "Change colors", onClick: this._changeColors })));
    };
    VerticalBarChartDynamicExample.prototype._changeData = function () {
        this.setState({
            dynamicData: [
                { x: 0, y: this._randomY() },
                { x: 12, y: this._randomY() },
                { x: 21, y: this._randomY() },
                { x: 29, y: this._randomY() },
                { x: 40, y: this._randomY() },
                { x: 48, y: this._randomY() },
                { x: 57, y: this._randomY() },
                { x: 64, y: this._randomY() },
                { x: 78, y: this._randomY() },
                { x: 90, y: this._randomY() },
                { x: 100, y: this._randomY() },
            ],
        });
    };
    VerticalBarChartDynamicExample.prototype._changeColors = function () {
        this._colorIndex = (this._colorIndex + 1) % this._colors.length;
        this.setState({ colors: this._colors[this._colorIndex] });
    };
    VerticalBarChartDynamicExample.prototype._randomY = function () {
        return Math.random() * 45 + 5;
    };
    return VerticalBarChartDynamicExample;
}(React.Component));
exports.VerticalBarChartDynamicExample = VerticalBarChartDynamicExample;
//# sourceMappingURL=VerticalBarChart.Dynamic.Example.js.map