define(["require", "exports", "tslib", "react", "@uifabric/charting", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, charting_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var AreaChartStyledExample = /** @class */ (function (_super) {
        tslib_1.__extends(AreaChartStyledExample, _super);
        function AreaChartStyledExample(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;
        }
        AreaChartStyledExample.prototype.render = function () {
            return React.createElement("div", null, this._basicExample());
        };
        AreaChartStyledExample.prototype._basicExample = function () {
            var chart1Points = [
                {
                    x: new Date('2018/01/06'),
                    y: 5,
                },
                {
                    x: new Date('2018/01/08'),
                    y: 16,
                },
                {
                    x: new Date('2018/01/16'),
                    y: 6,
                },
                {
                    x: new Date('2018/02/06'),
                    y: 30,
                },
                {
                    x: new Date('2018/02/16'),
                    y: 10,
                },
            ];
            var chart2Points = [
                {
                    x: new Date('2018/01/06'),
                    y: 10,
                },
                {
                    x: new Date('2018/01/08'),
                    y: 33,
                },
                {
                    x: new Date('2018/01/16'),
                    y: 21,
                },
                {
                    x: new Date('2018/02/06'),
                    y: 44,
                },
                {
                    x: new Date('2018/02/16'),
                    y: 22,
                },
            ];
            var chartPoints = [
                {
                    legend: 'legend1',
                    data: chart1Points,
                    color: Styling_1.DefaultPalette.accent,
                },
                {
                    legend: 'legend2',
                    data: chart2Points,
                    color: Styling_1.DefaultPalette.blueLight,
                },
            ];
            var chartData = {
                chartTtitle: 'Area chart styled 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, { showXAxisLablesTooltip: true, height: this.state.height, width: this.state.width, data: chartData, showYAxisGridLines: false }))));
        };
        return AreaChartStyledExample;
    }(React.Component));
    exports.AreaChartStyledExample = AreaChartStyledExample;
});
//# sourceMappingURL=AreaChart.Styled.Example.js.map