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 LineChartMultipleExample = /** @class */ (function (_super) {
        tslib_1.__extends(LineChartMultipleExample, _super);
        function LineChartMultipleExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onLegendClickHandler = function (selectedLegend) {
                if (selectedLegend !== null) {
                    console.log("Selected legend - " + selectedLegend);
                }
            };
            _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;
        }
        LineChartMultipleExample.prototype.render = function () {
            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", null, this._styledExample())));
        };
        LineChartMultipleExample.prototype._styledExample = function () {
            var points = [
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 10, xAxisCalloutData: '2018/01/01', yAxisCalloutData: '10%' },
                        { x: new Date('2018/01/15'), y: 18, xAxisCalloutData: '2018/01/15', yAxisCalloutData: '18%' },
                        { x: new Date('2018/01/28'), y: 24, xAxisCalloutData: '2018/01/28', yAxisCalloutData: '24%' },
                        { x: new Date('2018/02/01'), y: 25, xAxisCalloutData: '2018/02/01', yAxisCalloutData: '25%' },
                        { x: new Date('2018/03/01'), y: 15, xAxisCalloutData: '2018/03/01', yAxisCalloutData: '15%' },
                        { x: new Date('2018/03/15'), y: 30, xAxisCalloutData: '2018/03/15', yAxisCalloutData: '30%' },
                        { x: new Date('2018/03/28'), y: 18, xAxisCalloutData: '2018/03/28', yAxisCalloutData: '18%' },
                        { x: new Date('2018/04/04'), y: 32, xAxisCalloutData: '2018/04/04', yAxisCalloutData: '32%' },
                        { x: new Date('2018/04/15'), y: 29, xAxisCalloutData: '2018/04/15', yAxisCalloutData: '29%' },
                        { x: new Date('2018/05/05'), y: 43, xAxisCalloutData: '2018/05/05', yAxisCalloutData: '43%' },
                        { x: new Date('2018/06/01'), y: 45, xAxisCalloutData: '2018/06/01', yAxisCalloutData: '45%' },
                    ],
                    legend: 'First',
                    color: Styling_1.DefaultPalette.blue,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 10 },
                        { x: new Date('2018/01/07'), y: 18 },
                        { x: new Date('2018/01/15'), y: 24 },
                        { x: new Date('2018/02/01'), y: 25 },
                        { x: new Date('2018/03/10'), y: 15 },
                        { x: new Date('2018/03/15'), y: 30 },
                        { x: new Date('2018/03/20'), y: 18 },
                        { x: new Date('2018/04/10'), y: 32 },
                        { x: new Date('2018/04/20'), y: 29 },
                        { x: new Date('2018/05/16'), y: 43 },
                        { x: new Date('2018/06/01'), y: 45 },
                    ],
                    legend: 'Second',
                    color: Styling_1.DefaultPalette.green,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 10 },
                        { x: new Date('2018/01/18'), y: 18 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 25 },
                        { x: new Date('2018/03/03'), y: 15 },
                        { x: new Date('2018/03/07'), y: 30 },
                        { x: new Date('2018/03/15'), y: 18 },
                        { x: new Date('2018/04/10'), y: 32 },
                        { x: new Date('2018/04/17'), y: 29 },
                        { x: new Date('2018/05/10'), y: 43 },
                        { x: new Date('2018/06/01'), y: 123 },
                    ],
                    legend: 'Third',
                    color: Styling_1.DefaultPalette.red,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 130 },
                        { x: new Date('2018/01/18'), y: 8 },
                        { x: new Date('2018/01/25'), y: 124 },
                        { x: new Date('2018/02/10'), y: 95 },
                        { x: new Date('2018/04/17'), y: 19 },
                        { x: new Date('2018/05/10'), y: 43 },
                        { x: new Date('2018/06/01'), y: 5 },
                    ],
                    legend: 'Fourth',
                    color: Styling_1.DefaultPalette.black,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 10 },
                        { x: new Date('2018/01/18'), y: 58 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 5 },
                        { x: new Date('2018/04/17'), y: 109 },
                        { x: new Date('2018/05/10'), y: 43 },
                        { x: new Date('2018/06/01'), y: 87 },
                    ],
                    legend: 'Fifth',
                    color: Styling_1.DefaultPalette.magentaDark,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 30 },
                        { x: new Date('2018/01/18'), y: 18 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 95 },
                        { x: new Date('2018/04/17'), y: 59 },
                        { x: new Date('2018/05/10'), y: 143 },
                        { x: new Date('2018/06/01'), y: 65 },
                    ],
                    legend: 'Sixth',
                    color: Styling_1.DefaultPalette.purple,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 80 },
                        { x: new Date('2018/01/18'), y: 58 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 65 },
                        { x: new Date('2018/04/17'), y: 19 },
                        { x: new Date('2018/05/10'), y: 43 },
                        { x: new Date('2018/06/01'), y: 165 },
                    ],
                    legend: 'Seventh',
                    color: Styling_1.DefaultPalette.yellow,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 130 },
                        { x: new Date('2018/01/18'), y: 48 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 95 },
                        { x: new Date('2018/04/17'), y: 19 },
                        { x: new Date('2018/05/10'), y: 1 },
                        { x: new Date('2018/06/01'), y: 5 },
                    ],
                    legend: 'Eight',
                    color: Styling_1.DefaultPalette.teal,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 10 },
                        { x: new Date('2018/01/18'), y: 88 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 5 },
                        { x: new Date('2018/04/17'), y: 19 },
                        { x: new Date('2018/05/10'), y: 43 },
                        { x: new Date('2018/06/01'), y: 145 },
                    ],
                    legend: 'Ninth',
                    color: Styling_1.DefaultPalette.neutralLight,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 130 },
                        { x: new Date('2018/01/18'), y: 78 },
                        { x: new Date('2018/01/25'), y: 24 },
                        { x: new Date('2018/02/10'), y: 55 },
                        { x: new Date('2018/04/17'), y: 19 },
                        { x: new Date('2018/05/10'), y: 163 },
                        { x: new Date('2018/06/01'), y: 4 },
                    ],
                    legend: 'Tenth',
                    color: Styling_1.DefaultPalette.orangeLighter,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 30 },
                        { x: new Date('2018/01/18'), y: 108 },
                        { x: new Date('2018/01/25'), y: 4 },
                        { x: new Date('2018/02/10'), y: 65 },
                        { x: new Date('2018/04/17'), y: 19 },
                        { x: new Date('2018/05/10'), y: 13 },
                        { x: new Date('2018/06/01'), y: 45 },
                        { x: new Date('2018/07/01'), y: 45 },
                    ],
                    legend: 'Eleventh',
                    color: Styling_1.DefaultPalette.neutralQuaternaryAlt,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/06'), y: 70 },
                        { x: new Date('2018/01/18'), y: 78 },
                        { x: new Date('2018/01/25'), y: 94 },
                        { x: new Date('2018/02/10'), y: 65 },
                        { x: new Date('2018/04/17'), y: 9 },
                        { x: new Date('2018/05/10'), y: 5 },
                        { x: new Date('2018/06/01'), y: 65 },
                    ],
                    legend: 'Tweleth',
                    color: Styling_1.DefaultPalette.redDark,
                    onLegendClick: this._onLegendClickHandler,
                },
            ];
            var data = {
                chartTitle: 'Line Chart',
                lineChartData: points,
            };
            var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
            var timeFormat = '%m/%d';
            // Passing tick values is optional, for more control.
            // If you do not pass them the line chart will render them for you based on D3's standard.
            var tickValues = [
                new Date('01-01-2018'),
                new Date('02-01-2018'),
                new Date('03-01-2018'),
                new Date('04-01-2018'),
                new Date('05-01-2018'),
                new Date('06-01-2018'),
                new Date('07-01-2018'),
            ];
            return (React.createElement("div", { style: rootStyle },
                React.createElement(charting_1.LineChart, { data: data, strokeWidth: 4, tickFormat: timeFormat, tickValues: tickValues, height: this.state.height, width: this.state.width, legendProps: { canSelectMultipleLegends: true, allowFocusOnLegends: true } })));
        };
        return LineChartMultipleExample;
    }(React.Component));
    exports.LineChartMultipleExample = LineChartMultipleExample;
});
//# sourceMappingURL=LineChart.Multiple.Example.js.map