"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var charting_1 = require("@uifabric/charting");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var VerticalStackedBarChartStyledExample = /** @class */ (function (_super) {
    tslib_1.__extends(VerticalStackedBarChartStyledExample, _super);
    function VerticalStackedBarChartStyledExample(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: 650,
            height: 350,
        };
        return _this;
    }
    VerticalStackedBarChartStyledExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalStackedBarChartStyledExample.prototype._basicExample = function () {
        var firstChartPoints = [
            { legend: 'Metadata1', data: 40, color: Styling_1.DefaultPalette.accent },
            { legend: 'Metadata2', data: 5, color: Styling_1.DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 15, 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: '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: Styling_1.DefaultPalette.black,
            fontSize: '10px',
            lineHeight: '14px',
        };
        var customStyles = function () {
            return {
                chart: {
                    paddingBottom: '45px',
                },
                chartLabel: tslib_1.__assign({ color: Styling_1.DefaultPalette.blueMid }, Styling_1.DefaultFontStyles.large),
                xAxisText: tslib_1.__assign({}, textStyle),
            };
        };
        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(charting_1.VerticalStackedBarChart, { data: data, height: this.state.height, width: this.state.width, yAxisTickCount: 10, href: 'www.google.com', 
                    // eslint-disable-next-line react/jsx-no-bind
                    styles: customStyles, yMaxValue: 120, yMinValue: 10, calloutProps: {
                        directionalHint: office_ui_fabric_react_1.DirectionalHint.topCenter,
                    }, 
                    // eslint-disable-next-line react/jsx-no-bind
                    yAxisTickFormat: function (x) { return x + " h"; }, margins: { left: 50 }, legendProps: {
                        allowFocusOnLegends: true,
                        styles: {
                            rect: {
                                borderRadius: '3px',
                            },
                        },
                    }, 
                    // eslint-disable-next-line react/jsx-no-bind
                    onRenderCalloutPerDataPoint: function (props) {
                        return props ? (React.createElement(charting_1.ChartHoverCard, { XValue: props.xAxisCalloutData, Legend: props.legend, YValue: (props.yAxisCalloutData || props.data) + " h", color: props.color })) : null;
                    } }))));
    };
    return VerticalStackedBarChartStyledExample;
}(React.Component));
exports.VerticalStackedBarChartStyledExample = VerticalStackedBarChartStyledExample;
//# sourceMappingURL=VerticalStackedBarChart.Styled.Example.js.map