"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 ChoiceGroup_1 = require("office-ui-fabric-react/lib-commonjs/ChoiceGroup");
var Checkbox_1 = require("office-ui-fabric-react/lib-commonjs/Checkbox");
var options = [
    { key: 'basicExample', text: 'Basic Example' },
    { key: 'calloutExample', text: 'Custom Callout Example' },
];
var VerticalBarChartBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(VerticalBarChartBasicExample, _super);
    function VerticalBarChartBasicExample(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._onChange = function (ev, option) {
            if (_this.state.isCalloutselected) {
                _this.setState({ isCalloutselected: false });
            }
            else {
                _this.setState({ isCalloutselected: true });
            }
        };
        _this._onCheckChange = function (ev, checked) {
            _this.setState({ useSingleColor: checked });
        };
        _this.state = {
            width: 650,
            height: 350,
            isCalloutselected: false,
            useSingleColor: false,
        };
        return _this;
    }
    VerticalBarChartBasicExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalBarChartBasicExample.prototype._basicExample = function () {
        var points = [
            {
                x: 0,
                y: 10000,
                legend: 'First',
                color: Styling_1.DefaultPalette.accent,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '10%',
                lineData: {
                    y: 7000,
                    yAxisCalloutData: '34%',
                },
            },
            {
                x: 10000,
                y: 50000,
                legend: 'Second',
                color: Styling_1.DefaultPalette.blueDark,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '20%',
                lineData: {
                    y: 30000,
                },
            },
            {
                x: 25000,
                y: 30000,
                legend: 'Third',
                color: Styling_1.DefaultPalette.blueMid,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '37%',
            },
            {
                x: 40000,
                y: 13000,
                legend: 'seventh',
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '88%',
                lineData: {
                    y: 3000,
                    yAxisCalloutData: '43%',
                },
            },
            {
                x: 52000,
                y: 43000,
                legend: 'Eighith',
                color: Styling_1.DefaultPalette.blue,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '71%',
                lineData: {
                    y: 30000,
                },
            },
            {
                x: 68000,
                y: 30000,
                legend: 'Nighth',
                color: Styling_1.DefaultPalette.blueDark,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '40%',
                lineData: {
                    y: 5000,
                },
            },
            {
                x: 80000,
                y: 20000,
                legend: 'Fourth',
                color: Styling_1.DefaultPalette.blue,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                lineData: {
                    y: 16000,
                },
            },
            {
                x: 92000,
                y: 45000,
                legend: 'tenth',
                color: Styling_1.DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '33%',
                lineData: {
                    y: 40000,
                    yAxisCalloutData: '45%',
                },
            },
        ];
        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(ChoiceGroup_1.ChoiceGroup, { options: options, defaultSelectedKey: "basicExample", onChange: this._onChange, label: "Pick one" }),
            React.createElement(Checkbox_1.Checkbox, { label: "use single color(This will have only one color)", checked: this.state.useSingleColor, onChange: this._onCheckChange, styles: { root: { marginTop: '20px' } } }),
            React.createElement("div", { style: rootStyle },
                React.createElement(charting_1.VerticalBarChart, tslib_1.__assign({ data: points, width: this.state.width, useSingleColor: this.state.useSingleColor, height: this.state.height, chartLabel: 'Basic Chart with Numeric Axes', lineLegendText: 'just line', lineLegendColor: 'brown' }, (this.state.isCalloutselected && {
                    onRenderCalloutPerDataPoint: function (props, defaultRender) { return (props ? defaultRender(props) : null); },
                }))))));
    };
    return VerticalBarChartBasicExample;
}(React.Component));
exports.VerticalBarChartBasicExample = VerticalBarChartBasicExample;
//# sourceMappingURL=VerticalBarChart.Basic.Example.js.map