import { __extends } from "tslib";
import * as React from 'react';
import { VerticalStackedBarChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { ChoiceGroup } from 'office-ui-fabric-react';
var options = [
    { key: 'WrapTickValues', text: 'Wrap X Axis Ticks' },
    { key: 'showTooltip', text: 'Show Tooltip at X axis ticks' },
];
var VerticalStackedBarChartTooltipExample = /** @class */ (function (_super) {
    __extends(VerticalStackedBarChartTooltipExample, _super);
    function VerticalStackedBarChartTooltipExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            selectedCallout: 'showTooltip',
        };
        return _this;
    }
    VerticalStackedBarChartTooltipExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalStackedBarChartTooltipExample.prototype._basicExample = function () {
        var _this = this;
        var firstChartPoints = [
            { legend: 'Metadata1', data: 2, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 0.5, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 0, 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: 'Simple Data' },
            { chartData: secondChartPoints, xAxisPoint: 'Long text will disaply all text' },
            { chartData: thirdChartPoints, xAxisPoint: 'Data' },
            { chartData: firstChartPoints, xAxisPoint: 'Meta data' },
        ];
        var rootStyle = { width: '650px', height: '350px' };
        return (React.createElement(React.Fragment, null,
            React.createElement("div", null,
                React.createElement(ChoiceGroup, { options: options, defaultSelectedKey: "showTooltip", 
                    // eslint-disable-next-line react/jsx-no-bind
                    onChange: function (_ev, option) { return option && _this.setState({ selectedCallout: option.key }); }, label: "Pick one" })),
            React.createElement("div", { style: rootStyle },
                React.createElement(VerticalStackedBarChart, { chartTitle: "Vertical stacked bar chart axis tooltip example", data: data, height: 350, width: 650, showXAxisLablesTooltip: this.state.selectedCallout === 'showTooltip' ? true : false, wrapXAxisLables: this.state.selectedCallout === 'WrapTickValues' ? true : false }))));
    };
    return VerticalStackedBarChartTooltipExample;
}(React.Component));
export { VerticalStackedBarChartTooltipExample };
//# sourceMappingURL=VerticalStackedBarChart.AxisTooltip.Example.js.map