"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineChartEventsExample = 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 Styling_2 = require("@fluentui/react/lib-commonjs/Styling");
var d3 = require("d3-format");
var Toggle_1 = require("@fluentui/react/lib-commonjs/Toggle");
var calloutItemStyle = Styling_2.mergeStyles({
    borderBottom: '1px solid #D9D9D9',
    padding: '3px',
});
var LineChartEventsExample = /** @class */ (function (_super) {
    tslib_1.__extends(LineChartEventsExample, _super);
    function LineChartEventsExample(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: 330,
            allowMultipleShapes: false,
        };
        return _this;
    }
    LineChartEventsExample.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._basicExample())));
    };
    LineChartEventsExample.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: 297,
                        },
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 284,
                        },
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 282,
                        },
                        {
                            x: new Date('2020-03-06T00:00:00.000Z'),
                            y: 294,
                        },
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 294,
                        },
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 300,
                        },
                        {
                            x: new Date('2020-03-09T00:00:00.000Z'),
                            y: 298,
                        },
                    ],
                    color: Styling_1.DefaultPalette.blue,
                },
                {
                    legend: 'All',
                    data: [
                        {
                            x: new Date('2020-03-03T00:00:00.000Z'),
                            y: 292,
                        },
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 287,
                        },
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 287,
                        },
                        {
                            x: new Date('2020-03-06T00:00:00.000Z'),
                            y: 292,
                        },
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 287,
                        },
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 297,
                        },
                        {
                            x: new Date('2020-03-09T00:00:00.000Z'),
                            y: 292,
                        },
                    ],
                    color: Styling_1.DefaultPalette.green,
                },
            ],
        };
        var rootStyle = {
            width: this.state.width + "px",
            height: this.state.height + "px",
        };
        return (React.createElement("div", { style: rootStyle },
            React.createElement(react_charting_1.LineChart, { data: data, legendsOverflowText: 'Overflow Items', yMinValue: 282, yMaxValue: 301, yAxisTickFormat: d3.format('$,'), tickFormat: '%m/%d', allowMultipleShapesForPoints: this.state.allowMultipleShapes, tickValues: [
                    new Date('2020-03-03'),
                    new Date('2020-03-04'),
                    new Date('2020-03-05'),
                    new Date('2020-03-06'),
                    new Date('2020-03-07'),
                    new Date('2020-03-08'),
                    new Date('2020-03-09'),
                ], eventAnnotationProps: {
                    events: [
                        {
                            event: 'event 1',
                            date: new Date('2020-03-04T00:00:00.000Z'),
                            onRenderCard: function () { return React.createElement("div", { className: calloutItemStyle }, "event 1 message"); },
                        },
                        {
                            event: 'event 2',
                            date: new Date('2020-03-04T00:00:00.000Z'),
                            onRenderCard: function () { return React.createElement("div", { className: calloutItemStyle }, "event 2 message"); },
                        },
                        {
                            event: 'event 3',
                            date: new Date('2020-03-04T00:00:00.000Z'),
                            onRenderCard: function () { return React.createElement("div", { className: calloutItemStyle }, "event 3 message"); },
                        },
                        {
                            event: 'event 4',
                            date: new Date('2020-03-06T00:00:00.000Z'),
                            onRenderCard: function () { return React.createElement("div", { className: calloutItemStyle }, "event 4 message"); },
                        },
                        {
                            event: 'event 5',
                            date: new Date('2020-03-08T00:00:00.000Z'),
                            onRenderCard: function () { return React.createElement("div", { className: calloutItemStyle }, "event 5 message"); },
                        },
                    ],
                    strokeColor: '#111111',
                    labelColor: '#111111',
                    labelHeight: 18,
                    labelWidth: 50,
                    mergedLabel: function (count) { return count + " events"; },
                }, height: this.state.height, width: this.state.width })));
    };
    return LineChartEventsExample;
}(React.Component));
exports.LineChartEventsExample = LineChartEventsExample;
//# sourceMappingURL=LineChart.Events.Example.js.map