import { __extends } from "tslib";
import * as React from 'react';
import { ChartHoverCard, GroupedVerticalBarChart, } from '@fluentui/react-charting';
import { DefaultPalette } from '@fluentui/react/lib/Styling';
var GroupedVerticalBarChartTruncatedExample = /** @class */ (function (_super) {
    __extends(GroupedVerticalBarChartTruncatedExample, _super);
    function GroupedVerticalBarChartTruncatedExample(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.state = {
            width: 700,
            height: 400,
        };
        return _this;
    }
    GroupedVerticalBarChartTruncatedExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    GroupedVerticalBarChartTruncatedExample.prototype._basicExample = function () {
        var data = [
            {
                name: 'Data (Text that exceeds the maximum number of characters is truncated)',
                series: [
                    {
                        key: 'series1',
                        data: 33000,
                        color: DefaultPalette.blueLight,
                        legend: 'MetaData1',
                        xAxisCalloutData: '2020/04/30',
                        yAxisCalloutData: '33%',
                    },
                    {
                        key: 'series2',
                        data: 44000,
                        color: DefaultPalette.blue,
                        legend: 'MetaData2',
                        xAxisCalloutData: '2020/04/30',
                        yAxisCalloutData: '44%',
                    },
                ],
            },
            {
                name: 'Data',
                series: [
                    {
                        key: 'series1',
                        data: 33000,
                        color: DefaultPalette.blueLight,
                        legend: 'MetaData1',
                        xAxisCalloutData: '2020/04/30',
                        yAxisCalloutData: '33%',
                    },
                    {
                        key: 'series2',
                        data: 3000,
                        color: DefaultPalette.blue,
                        legend: 'MetaData2',
                        xAxisCalloutData: '2020/04/30',
                        yAxisCalloutData: '3%',
                    },
                ],
            },
        ];
        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("div", { style: rootStyle },
                React.createElement(GroupedVerticalBarChart, { data: data, height: this.state.height, width: this.state.width, showYAxisGridLines: true, showXAxisLablesTooltip: true, noOfCharsToTruncate: 6, 
                    // eslint-disable-next-line react/jsx-no-bind
                    onRenderCalloutPerDataPoint: function (props) {
                        return props ? (React.createElement(ChartHoverCard, { XValue: props.xAxisCalloutData, Legend: 'Custom legend', YValue: props.data + " h", color: 'red' })) : null;
                    } }))));
    };
    return GroupedVerticalBarChartTruncatedExample;
}(React.Component));
export { GroupedVerticalBarChartTruncatedExample };
//# sourceMappingURL=GroupedVerticalBarChart.Truncated.Example.js.map