import { __extends } from "tslib";
import * as React from 'react';
import { VerticalBarChart } from '@fluentui/react-charting';
import { DefaultPalette } from '@fluentui/react/lib/Styling';
import { DefaultButton } from '@fluentui/react/lib/Button';
var VerticalBarChartDynamicExample = /** @class */ (function (_super) {
    __extends(VerticalBarChartDynamicExample, _super);
    function VerticalBarChartDynamicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._colors = [
            [DefaultPalette.blueLight, DefaultPalette.blue, DefaultPalette.blueDark],
            [DefaultPalette.orangeLighter, DefaultPalette.orangeLight, DefaultPalette.orange],
            [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark],
            [DefaultPalette.magentaLight, DefaultPalette.magenta, 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(VerticalBarChart, { data: this.state.dynamicData, colors: this.state.colors, chartLabel: 'Chart with Dynamic Data', hideLegend: true, hideTooltip: true, yMaxValue: 50, yAxisTickCount: 5, height: 400, width: 650 }),
            React.createElement(DefaultButton, { text: "Change data", onClick: this._changeData }),
            React.createElement(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));
export { VerticalBarChartDynamicExample };
//# sourceMappingURL=VerticalBarChart.Dynamic.Example.js.map