import { __extends } from "tslib";
import * as React from 'react';
import { ChartHoverCard, StackedBarChart, } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
var StackedBarChartDynamicExample = /** @class */ (function (_super) {
    __extends(StackedBarChartDynamicExample, _super);
    function StackedBarChartDynamicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._colors = [
            [
                DefaultPalette.blueMid,
                DefaultPalette.blue,
                DefaultPalette.blueLight,
                DefaultPalette.tealDark,
                DefaultPalette.teal,
                DefaultPalette.tealLight,
            ],
            [
                DefaultPalette.redDark,
                DefaultPalette.red,
                DefaultPalette.orange,
                DefaultPalette.orangeLight,
                DefaultPalette.orangeLighter,
                DefaultPalette.yellow,
                DefaultPalette.yellowLight,
            ],
            [
                DefaultPalette.greenDark,
                DefaultPalette.green,
                DefaultPalette.greenLight,
                DefaultPalette.neutralPrimary,
                DefaultPalette.neutralSecondary,
                DefaultPalette.neutralTertiary,
            ],
            [
                DefaultPalette.purpleDark,
                DefaultPalette.purple,
                DefaultPalette.purpleLight,
                DefaultPalette.magentaDark,
                DefaultPalette.magenta,
                DefaultPalette.magentaLight,
            ],
        ];
        _this.state = {
            dynamicData: {
                chartTitle: 'Stacked Bar chart',
                chartData: [
                    { legend: 'first', data: 40, color: DefaultPalette.blueLight },
                    { legend: 'second', data: 23, color: DefaultPalette.yellow },
                    { legend: 'third', data: 35, color: DefaultPalette.neutralSecondary },
                    { legend: 'fourth', data: 87, color: DefaultPalette.greenLight },
                ],
            },
        };
        _this._changeData = _this._changeData.bind(_this);
        _this._changeColors = _this._changeColors.bind(_this);
        return _this;
    }
    StackedBarChartDynamicExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(StackedBarChart, { data: this.state.dynamicData, 
                // eslint-disable-next-line react/jsx-no-bind
                onRenderCalloutPerDataPoint: function (props) {
                    return props ? (React.createElement(ChartHoverCard, { XValue: props.legend, YValue: props.yAxisCalloutData || props.data, color: props.color })) : null;
                } }),
            React.createElement(DefaultButton, { text: "Change data", onClick: this._changeData }),
            React.createElement(DefaultButton, { text: "Change colors", onClick: this._changeColors })));
    };
    StackedBarChartDynamicExample.prototype._changeData = function () {
        this.setState({
            dynamicData: {
                chartTitle: 'Stacked Bar chart',
                chartData: [
                    { legend: 'first', data: this._randomY() },
                    { legend: 'second', data: this._randomY() },
                    { legend: 'third', data: this._randomY() },
                    { legend: 'fourth', data: this._randomY() },
                ],
            },
        });
    };
    StackedBarChartDynamicExample.prototype._changeColors = function () {
        this.setState({
            dynamicData: {
                chartTitle: 'Stacked Bar chart',
                chartData: [
                    { legend: 'first', data: 40, color: this._randomColor(0) },
                    { legend: 'second', data: 23, color: this._randomColor(1) },
                    { legend: 'third', data: 35, color: this._randomColor(2) },
                    { legend: 'fourth', data: 87, color: this._randomColor(3) },
                ],
            },
        });
    };
    StackedBarChartDynamicExample.prototype._randomY = function () {
        return Math.random() * 45 + 5;
    };
    StackedBarChartDynamicExample.prototype._randomColor = function (index) {
        return this._colors[index][Math.floor(Math.random() * this._colors[index].length)];
    };
    return StackedBarChartDynamicExample;
}(React.Component));
export { StackedBarChartDynamicExample };
//# sourceMappingURL=StackedBarChart.Dynamic.Example.js.map