"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 AreaChartBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(AreaChartBasicExample, _super);
    function AreaChartBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onWidthChange = function (e) {
            _this.setState({ width: parseInt(e.target.value, 10) });
        };
        _this._onHeightChange = function (e) {
            console.log('height change');
            _this.setState({ height: parseInt(e.target.value, 10) });
        };
        _this.state = {
            width: 700,
            height: 300,
        };
        return _this;
    }
    AreaChartBasicExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    AreaChartBasicExample.prototype._basicExample = function () {
        var chart1Points = [
            {
                x: 20,
                y: 7000,
                xAxisCalloutData: '2018/01/01',
                yAxisCalloutData: '10%',
            },
            {
                x: 25,
                y: 9000,
                xAxisCalloutData: '2018/01/15',
                yAxisCalloutData: '18%',
            },
            {
                x: 30,
                y: 13000,
                xAxisCalloutData: '2018/01/28',
                yAxisCalloutData: '24%',
            },
            {
                x: 35,
                y: 15000,
                xAxisCalloutData: '2018/02/01',
                yAxisCalloutData: '25%',
            },
            {
                x: 40,
                y: 11000,
                xAxisCalloutData: '2018/03/01',
                yAxisCalloutData: '15%',
            },
            {
                x: 45,
                y: 8760,
                xAxisCalloutData: '2018/03/15',
                yAxisCalloutData: '30%',
            },
            {
                x: 50,
                y: 3500,
                xAxisCalloutData: '2018/03/28',
                yAxisCalloutData: '18%',
            },
            {
                x: 55,
                y: 20000,
                xAxisCalloutData: '2018/04/04',
                yAxisCalloutData: '32%',
            },
            {
                x: 60,
                y: 17000,
                xAxisCalloutData: '2018/04/15',
                yAxisCalloutData: '29%',
            },
            {
                x: 65,
                y: 1000,
                xAxisCalloutData: '2018/05/05',
                yAxisCalloutData: '43%',
            },
            {
                x: 70,
                y: 12000,
                xAxisCalloutData: '2018/06/01',
                yAxisCalloutData: '45%',
            },
            {
                x: 75,
                y: 6876,
                xAxisCalloutData: '2018/01/15',
                yAxisCalloutData: '18%',
            },
            {
                x: 80,
                y: 12000,
                xAxisCalloutData: '2018/04/30',
                yAxisCalloutData: '55%',
            },
            {
                x: 85,
                y: 7000,
                xAxisCalloutData: '2018/05/04',
                yAxisCalloutData: '12%',
            },
            {
                x: 90,
                y: 10000,
                xAxisCalloutData: '2018/06/01',
                yAxisCalloutData: '45%',
            },
        ];
        var chartPoints = [
            {
                legend: 'legend1',
                data: chart1Points,
                color: Styling_1.DefaultPalette.accent,
            },
        ];
        var chartData = {
            chartTtitle: 'Area chart basic example',
            lineChartData: chartPoints,
        };
        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(charting_1.AreaChart, { height: this.state.height, width: this.state.width, data: chartData, showYAxisGridLines: true }))));
    };
    return AreaChartBasicExample;
}(React.Component));
exports.AreaChartBasicExample = AreaChartBasicExample;
//# sourceMappingURL=AreaChart.Basic.Example.js.map