"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AreaChartMultipleExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_charting_1 = require("@fluentui/react-charting");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var d3 = require("d3-format");
var AreaChartMultipleExample = /** @class */ (function (_super) {
    tslib_1.__extends(AreaChartMultipleExample, _super);
    function AreaChartMultipleExample(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: 700,
            height: 300,
        };
        return _this;
    }
    AreaChartMultipleExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    AreaChartMultipleExample.prototype._basicExample = function () {
        var chart1Points = [
            {
                x: 20,
                y: 9,
            },
            {
                x: 25,
                y: 14,
            },
            {
                x: 30,
                y: 14,
            },
            {
                x: 35,
                y: 23,
            },
            {
                x: 40,
                y: 20,
            },
            {
                x: 45,
                y: 31,
            },
            {
                x: 50,
                y: 29,
            },
            {
                x: 55,
                y: 27,
            },
            {
                x: 60,
                y: 37,
            },
            {
                x: 65,
                y: 51,
            },
        ];
        var chart2Points = [
            {
                x: 20,
                y: 21,
            },
            {
                x: 25,
                y: 25,
            },
            {
                x: 30,
                y: 10,
            },
            {
                x: 35,
                y: 10,
            },
            {
                x: 40,
                y: 14,
            },
            {
                x: 45,
                y: 18,
            },
            {
                x: 50,
                y: 9,
            },
            {
                x: 55,
                y: 23,
            },
            {
                x: 60,
                y: 7,
            },
            {
                x: 65,
                y: 55,
            },
        ];
        var chart3Points = [
            {
                x: 20,
                y: 30,
            },
            {
                x: 25,
                y: 35,
            },
            {
                x: 30,
                y: 33,
            },
            {
                x: 35,
                y: 40,
            },
            {
                x: 40,
                y: 10,
            },
            {
                x: 45,
                y: 40,
            },
            {
                x: 50,
                y: 34,
            },
            {
                x: 55,
                y: 40,
            },
            {
                x: 60,
                y: 60,
            },
            {
                x: 65,
                y: 40,
            },
        ];
        var chartPoints = [
            {
                legend: 'legend1',
                data: chart1Points,
                color: Styling_1.DefaultPalette.accent,
            },
            {
                legend: 'legend2',
                data: chart2Points,
                color: Styling_1.DefaultPalette.blueLight,
            },
            {
                legend: 'legend3',
                data: chart3Points,
                color: Styling_1.DefaultPalette.blueDark,
            },
        ];
        var chartData = {
            chartTitle: 'Area chart multiple 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(react_charting_1.AreaChart, { height: this.state.height, width: this.state.width, data: chartData, legendsOverflowText: 'Overflow Items', yAxisTickFormat: d3.format('$,'), legendProps: {
                        allowFocusOnLegends: true,
                    } }))));
    };
    return AreaChartMultipleExample;
}(React.Component));
exports.AreaChartMultipleExample = AreaChartMultipleExample;
//# sourceMappingURL=AreaChart.Multiple.Example.js.map