import { __extends } from "tslib";
import * as React from 'react';
import { LineChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
var LineChartBasicExample = /** @class */ (function (_super) {
    __extends(LineChartBasicExample, _super);
    function LineChartBasicExample(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._onShapeChange = function (ev, checked) {
            _this.setState({ allowMultipleShapes: checked });
        };
        _this.state = {
            width: 700,
            height: 300,
            allowMultipleShapes: false,
        };
        return _this;
    }
    LineChartBasicExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    LineChartBasicExample.prototype._basicExample = function () {
        var data = {
            chartTitle: 'Line Chart',
            lineChartData: [
                {
                    legend: 'From_Legacy_to_O365',
                    data: [
                        {
                            x: new Date('2020-03-03T00:00:00.000Z'),
                            y: 216000,
                            onDataPointClick: function () { return alert('click on 217000'); },
                        },
                        {
                            x: new Date('2020-03-03T10:00:00.000Z'),
                            y: 218123,
                            onDataPointClick: function () { return alert('click on 217123'); },
                        },
                        {
                            x: new Date('2020-03-03T11:00:00.000Z'),
                            y: 217124,
                            onDataPointClick: function () { return alert('click on 217124'); },
                        },
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 248000,
                            onDataPointClick: function () { return alert('click on 248000'); },
                        },
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 252000,
                            onDataPointClick: function () { return alert('click on 252000'); },
                        },
                        {
                            x: new Date('2020-03-06T00:00:00.000Z'),
                            y: 274000,
                            onDataPointClick: function () { return alert('click on 274000'); },
                        },
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 260000,
                            onDataPointClick: function () { return alert('click on 260000'); },
                        },
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 300000,
                            onDataPointClick: function () { return alert('click on 300000'); },
                        },
                        {
                            x: new Date('2020-03-09T00:00:00.000Z'),
                            y: 218000,
                            onDataPointClick: function () { return alert('click on 218000'); },
                        },
                    ],
                    color: DefaultPalette.blue,
                    onLineClick: function () { return console.log('From_Legacy_to_O365'); },
                },
                {
                    legend: 'All',
                    data: [
                        {
                            x: new Date('2020-03-03T00:00:00.000Z'),
                            y: 297000,
                        },
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 284000,
                        },
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 282000,
                        },
                        {
                            x: new Date('2020-03-06T00:00:00.000Z'),
                            y: 294000,
                        },
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 224000,
                        },
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 300000,
                        },
                        {
                            x: new Date('2020-03-09T00:00:00.000Z'),
                            y: 298000,
                        },
                    ],
                    color: DefaultPalette.green,
                },
                {
                    legend: 'single point',
                    data: [
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 282000,
                        },
                    ],
                    color: DefaultPalette.yellow,
                },
            ],
        };
        var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
        var margins = { left: 35, top: 20, bottom: 35, right: 20 };
        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(Toggle, { label: "Enabled  multiple shapes for each line", onText: "On", offText: "Off", onChange: this._onShapeChange, checked: this.state.allowMultipleShapes }),
            React.createElement("div", { style: rootStyle },
                React.createElement(LineChart, { data: data, legendsOverflowText: 'Overflow Items', yMinValue: 200, yMaxValue: 301, height: this.state.height, width: this.state.width, margins: margins, allowMultipleShapesForPoints: this.state.allowMultipleShapes }))));
    };
    return LineChartBasicExample;
}(React.Component));
export { LineChartBasicExample };
//# sourceMappingURL=LineChart.Basic.Example.js.map