define(["require", "exports", "tslib", "react", "@fluentui/react-charting", "@fluentui/react/lib/Styling", "@fluentui/react/lib/Toggle"], function (require, exports, tslib_1, React, react_charting_1, Styling_1, Toggle_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.LineChartMultipleExample = void 0;
    var LineChartMultipleExample = /** @class */ (function (_super) {
        tslib_1.__extends(LineChartMultipleExample, _super);
        function LineChartMultipleExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onShapeChange = function (ev, checked) {
                _this.setState({ allowMultipleShapes: checked });
            };
            _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,
                allowMultipleShapes: false,
            };
            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(Toggle_1.Toggle, { label: "Enabled  multiple shapes for each line", onText: "On", offText: "Off", onChange: this._onShapeChange, checked: this.state.allowMultipleShapes }),
                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/02/01'), y: 30, xAxisCalloutData: '2018/01/15', yAxisCalloutData: '18%' },
                        { x: new Date('2018/03/01'), y: 10, xAxisCalloutData: '2018/01/28', yAxisCalloutData: '24%' },
                        { x: new Date('2018/04/01'), y: 30, xAxisCalloutData: '2018/02/01', yAxisCalloutData: '25%' },
                        { x: new Date('2018/05/01'), y: 10, xAxisCalloutData: '2018/03/01', yAxisCalloutData: '15%' },
                        { x: new Date('2018/06/01'), y: 30, xAxisCalloutData: '2018/03/15', yAxisCalloutData: '30%' },
                    ],
                    legend: 'First',
                    color: Styling_1.DefaultPalette.blue,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 30 },
                        { x: new Date('2018/02/01'), y: 50 },
                        { x: new Date('2018/03/01'), y: 30 },
                        { x: new Date('2018/04/01'), y: 50 },
                        { x: new Date('2018/05/01'), y: 30 },
                        { x: new Date('2018/06/01'), y: 50 },
                    ],
                    legend: 'Second',
                    color: Styling_1.DefaultPalette.green,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 50 },
                        { x: new Date('2018/02/01'), y: 70 },
                        { x: new Date('2018/03/01'), y: 50 },
                        { x: new Date('2018/04/01'), y: 70 },
                        { x: new Date('2018/05/01'), y: 50 },
                        { x: new Date('2018/06/01'), y: 70 },
                    ],
                    legend: 'Third',
                    color: Styling_1.DefaultPalette.red,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 70 },
                        { x: new Date('2018/02/01'), y: 90 },
                        { x: new Date('2018/03/01'), y: 70 },
                        { x: new Date('2018/04/01'), y: 90 },
                        { x: new Date('2018/05/01'), y: 70 },
                        { x: new Date('2018/06/01'), y: 90 },
                    ],
                    legend: 'Fourth',
                    color: Styling_1.DefaultPalette.black,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 90 },
                        { x: new Date('2018/02/01'), y: 110 },
                        { x: new Date('2018/03/01'), y: 90 },
                        { x: new Date('2018/04/01'), y: 110 },
                        { x: new Date('2018/05/01'), y: 90 },
                        { x: new Date('2018/06/01'), y: 110 },
                    ],
                    legend: 'Fifth',
                    color: Styling_1.DefaultPalette.magentaDark,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 110 },
                        { x: new Date('2018/02/01'), y: 130 },
                        { x: new Date('2018/03/01'), y: 110 },
                        { x: new Date('2018/04/01'), y: 130 },
                        { x: new Date('2018/05/01'), y: 110 },
                        { x: new Date('2018/06/01'), y: 130 },
                    ],
                    legend: 'Sixth',
                    color: Styling_1.DefaultPalette.purple,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 130 },
                        { x: new Date('2018/02/01'), y: 150 },
                        { x: new Date('2018/03/01'), y: 130 },
                        { x: new Date('2018/04/01'), y: 150 },
                        { x: new Date('2018/05/01'), y: 130 },
                        { x: new Date('2018/06/01'), y: 150 },
                    ],
                    legend: 'Seventh',
                    color: Styling_1.DefaultPalette.yellow,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 150 },
                        { x: new Date('2018/02/01'), y: 170 },
                        { x: new Date('2018/03/01'), y: 150 },
                        { x: new Date('2018/04/01'), y: 170 },
                        { x: new Date('2018/05/01'), y: 150 },
                        { x: new Date('2018/06/01'), y: 170 },
                    ],
                    legend: 'Eight',
                    color: Styling_1.DefaultPalette.teal,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 170 },
                        { x: new Date('2018/02/01'), y: 190 },
                        { x: new Date('2018/03/01'), y: 170 },
                        { x: new Date('2018/04/01'), y: 190 },
                        { x: new Date('2018/05/01'), y: 170 },
                        { x: new Date('2018/06/01'), y: 190 },
                    ],
                    legend: 'Ninth',
                    color: 'cyan',
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 190 },
                        { x: new Date('2018/02/01'), y: 210 },
                        { x: new Date('2018/03/01'), y: 190 },
                        { x: new Date('2018/04/01'), y: 210 },
                        { x: new Date('2018/05/01'), y: 190 },
                        { x: new Date('2018/06/01'), y: 210 },
                    ],
                    legend: 'Tenth',
                    color: Styling_1.DefaultPalette.orangeLighter,
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 210 },
                        { x: new Date('2018/02/01'), y: 230 },
                        { x: new Date('2018/03/01'), y: 210 },
                        { x: new Date('2018/04/01'), y: 230 },
                        { x: new Date('2018/05/01'), y: 210 },
                        { x: new Date('2018/06/01'), y: 230 },
                    ],
                    legend: 'Eleventh',
                    color: 'magenta',
                    onLegendClick: this._onLegendClickHandler,
                },
                {
                    data: [
                        { x: new Date('2018/01/01'), y: 230 },
                        { x: new Date('2018/02/01'), y: 250 },
                        { x: new Date('2018/03/01'), y: 230 },
                        { x: new Date('2018/04/01'), y: 250 },
                        { x: new Date('2018/05/01'), y: 230 },
                        { x: new Date('2018/06/01'), y: 250 },
                    ],
                    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'),
            ];
            var colorFillBarData = [
                {
                    legend: 'Time range 1',
                    color: 'blue',
                    data: [
                        {
                            startX: new Date('2018/01/06'),
                            endX: new Date('2018/01/25'),
                        },
                    ],
                },
                {
                    legend: 'Time range 2',
                    color: 'red',
                    data: [
                        {
                            startX: new Date('2018/01/18'),
                            endX: new Date('2018/02/20'),
                        },
                        {
                            startX: new Date('2018/04/17'),
                            endX: new Date('2018/05/10'),
                        },
                    ],
                    applyPattern: true,
                },
            ];
            return (React.createElement("div", { style: rootStyle },
                React.createElement(react_charting_1.LineChart, { data: data, strokeWidth: 4, tickFormat: timeFormat, tickValues: tickValues, height: this.state.height, width: this.state.width, legendProps: { canSelectMultipleLegends: true, allowFocusOnLegends: true }, colorFillBars: colorFillBarData, allowMultipleShapesForPoints: this.state.allowMultipleShapes })));
        };
        return LineChartMultipleExample;
    }(React.Component));
    exports.LineChartMultipleExample = LineChartMultipleExample;
});
//# sourceMappingURL=LineChart.Multiple.Example.js.map