import { __assign, __extends } from "tslib";
import * as React from 'react';
import { ChartHoverCard, VerticalStackedBarChart, } from '@fluentui/react-charting';
import { DefaultPalette, DefaultFontStyles } from '@fluentui/react/lib/Styling';
import { ChoiceGroup, DirectionalHint } from '@fluentui/react';
var options = [
    { key: 'singleCallout', text: 'Single callout' },
    { key: 'MultiCallout', text: 'Stack callout' },
];
var VerticalStackedBarChartStyledExample = /** @class */ (function (_super) {
    __extends(VerticalStackedBarChartStyledExample, _super);
    function VerticalStackedBarChartStyledExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            width: 650,
            height: 350,
            barGapMax: 2,
            barCornerRadius: 2,
            barMinimumHeight: 1,
            selectedCallout: 'MultiCallout',
        };
        return _this;
    }
    VerticalStackedBarChartStyledExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalStackedBarChartStyledExample.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: '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" };
        var textStyle = {
            fill: DefaultPalette.black,
            fontSize: '10px',
            lineHeight: '14px',
        };
        var customStyles = function () {
            return {
                xAxis: {
                    selectors: {
                        text: { fill: 'black', fontSize: '10px' },
                    },
                },
                chart: {
                    paddingBottom: '45px',
                },
                chartLabel: __assign({ color: DefaultPalette.blueMid }, DefaultFontStyles.large),
                xAxisText: __assign({}, textStyle),
            };
        };
        return (React.createElement(React.Fragment, null,
            React.createElement("div", null,
                React.createElement("label", null, "Width:"),
                React.createElement("input", { type: "range", value: this.state.width, min: 200, max: 1000, onChange: function (e) { return _this.setState({ width: +e.target.value }); } }),
                React.createElement("label", null, "Height:"),
                React.createElement("input", { type: "range", value: this.state.height, min: 200, max: 1000, onChange: function (e) { return _this.setState({ height: +e.target.value }); } })),
            React.createElement("div", null,
                React.createElement("label", null, "BarGapMax:"),
                React.createElement("input", { type: "range", value: this.state.barGapMax, min: 0, max: 10, onChange: function (e) { return _this.setState({ barGapMax: +e.target.value }); } }),
                React.createElement("label", null, "BarCornerRadius:"),
                React.createElement("input", { type: "range", value: this.state.barCornerRadius, min: 0, max: 10, onChange: function (e) { return _this.setState({ barCornerRadius: +e.target.value }); } }),
                React.createElement("label", null, "BarMinimumHeight:"),
                React.createElement("input", { type: "range", value: this.state.barMinimumHeight, min: 0, max: 10, onChange: function (e) { return _this.setState({ barMinimumHeight: +e.target.value }); } }),
                React.createElement(ChoiceGroup, { options: options, defaultSelectedKey: "MultiCallout", 
                    // 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, __assign({ data: data }, this.state, { yAxisTickCount: 10, 
                    // eslint-disable-next-line react/jsx-no-bind
                    onBarClick: function (event, clickData) { return console.log('clicked', event, clickData); }, 
                    // eslint-disable-next-line react/jsx-no-bind
                    styles: customStyles, yMaxValue: 120, isCalloutForStack: this.state.selectedCallout === 'MultiCallout', calloutProps: {
                        directionalHint: DirectionalHint.topCenter,
                    }, 
                    // eslint-disable-next-line react/jsx-no-bind
                    yAxisTickFormat: function (x) { return x + " h"; }, margins: {
                        bottom: 35,
                        top: 10,
                        left: 35,
                        right: 0,
                    }, legendProps: {
                        allowFocusOnLegends: true,
                        styles: {
                            rect: {
                                borderRadius: '3px',
                            },
                        },
                    }, 
                    // eslint-disable-next-line react/jsx-no-bind
                    onRenderCalloutPerDataPoint: function (props) {
                        return props ? (React.createElement(ChartHoverCard, { XValue: props.xAxisCalloutData, Legend: props.legend, YValue: (props.yAxisCalloutData || props.data) + " h", color: props.color })) : null;
                    }, svgProps: {
                        'aria-label': 'Example chart with metadata per month',
                    } })))));
    };
    return VerticalStackedBarChartStyledExample;
}(React.Component));
export { VerticalStackedBarChartStyledExample };
//# sourceMappingURL=VerticalStackedBarChart.Styled.Example.js.map