"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VerticalStackedBarChartTooltipExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_charting_1 = require("@fluentui/react-charting");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var react_1 = require("@fluentui/react");
var options = [
    { key: 'WrapTickValues', text: 'Wrap X Axis Ticks' },
    { key: 'showTooltip', text: 'Show Tooltip at X axis ticks' },
];
var VerticalStackedBarChartTooltipExample = /** @class */ (function (_super) {
    tslib_1.__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: Styling_1.DefaultPalette.accent },
            { legend: 'Metadata2', data: 0.5, color: Styling_1.DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 0, color: Styling_1.DefaultPalette.blueLight },
        ];
        var secondChartPoints = [
            { legend: 'Metadata1', data: 30, color: Styling_1.DefaultPalette.accent },
            { legend: 'Metadata2', data: 3, color: Styling_1.DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 40, color: Styling_1.DefaultPalette.blueLight },
        ];
        var thirdChartPoints = [
            { legend: 'Metadata1', data: 10, color: Styling_1.DefaultPalette.accent },
            { legend: 'Metadata2', data: 60, color: Styling_1.DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 30, color: Styling_1.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(react_1.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(react_charting_1.VerticalStackedBarChart, { data: data, height: 350, width: 650, showXAxisLablesTooltip: this.state.selectedCallout === 'showTooltip' ? true : false, wrapXAxisLables: this.state.selectedCallout === 'WrapTickValues' ? true : false }))));
    };
    return VerticalStackedBarChartTooltipExample;
}(React.Component));
exports.VerticalStackedBarChartTooltipExample = VerticalStackedBarChartTooltipExample;
//# sourceMappingURL=VerticalStackedBarChart.AxisTooltip.Example.js.map