import { __extends } from "tslib";
import * as React from 'react';
import { VerticalStackedBarChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { DirectionalHint } from 'office-ui-fabric-react';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
var options = [
    { key: 'singleCallout', text: 'Single callout' },
    { key: 'MultiCallout', text: 'Stack callout' },
];
var VerticalStackedBarChartCalloutExample = /** @class */ (function (_super) {
    __extends(VerticalStackedBarChartCalloutExample, _super);
    function VerticalStackedBarChartCalloutExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onWidthChange = function (e) {
            _this.setState({ width: parseInt(e.target.value, 10) });
        };
        _this._onHeightChange = function (e) {
            _this.setState({ height: parseInt(e.target.value, 10) });
        };
        _this._onChange = function (ev, option) {
            _this.setState({ selectedCallout: option.key });
        };
        _this.state = {
            width: 650,
            height: 350,
            selectedCallout: 'MultiCallout',
        };
        return _this;
    }
    VerticalStackedBarChartCalloutExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalStackedBarChartCalloutExample.prototype._basicExample = function () {
        var firstChartPoints = [
            { legend: 'Metadata1', data: 40, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 5, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 15, color: DefaultPalette.blueLight },
        ];
        var secondChartPoints = [
            { legend: 'Metadata1', data: 30, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 3, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
        ];
        var thirdChartPoints = [
            { legend: 'Metadata1', data: 10, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 60, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight },
        ];
        var data = [
            { chartData: firstChartPoints, xAxisPoint: 'Jan' },
            { chartData: secondChartPoints, xAxisPoint: 'Feb' },
            { chartData: thirdChartPoints, xAxisPoint: 'March' },
            { chartData: firstChartPoints, xAxisPoint: 'April' },
            { chartData: thirdChartPoints, xAxisPoint: 'May' },
            { chartData: firstChartPoints, xAxisPoint: 'June' },
            { chartData: secondChartPoints, xAxisPoint: 'July' },
            { chartData: thirdChartPoints, xAxisPoint: 'August' },
            { chartData: firstChartPoints, xAxisPoint: 'September' },
        ];
        var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
        return (React.createElement(React.Fragment, null,
            React.createElement("label", null, "change Width:"),
            React.createElement("input", { type: "range", value: this.state.width, min: 200, max: 1000, onChange: this._onWidthChange }),
            React.createElement("label", null, "change Height:"),
            React.createElement("input", { type: "range", value: this.state.height, min: 200, max: 1000, onChange: this._onHeightChange }),
            React.createElement(ChoiceGroup, { options: options, defaultSelectedKey: "MultiCallout", onChange: this._onChange, label: "Pick one" }),
            React.createElement("div", { style: rootStyle },
                React.createElement(VerticalStackedBarChart, { data: data, height: this.state.height, width: this.state.width, yAxisTickCount: 10, chartLabel: "Card title", isCalloutForStack: this.state.selectedCallout === 'MultiCallout', yMaxValue: 120, yMinValue: 10, calloutProps: {
                        directionalHint: DirectionalHint.topCenter,
                    }, margins: { left: 50 }, colors: ['red', 'white', 'green', 'black'] }))));
    };
    return VerticalStackedBarChartCalloutExample;
}(React.Component));
export { VerticalStackedBarChartCalloutExample };
//# sourceMappingURL=VerticalStackedBarChart.Callout.Example.js.map