"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//Wijmo
var wjFinancialChart = require("wijmo/wijmo.react.chart.finance");
var wjcChart = require("wijmo/wijmo.chart");
var wjcCore = require("wijmo/wijmo");
var Marker = /** @class */ (function (_super) {
    __extends(Marker, _super);
    function Marker(props) {
        var _this = _super.call(this, props) || this;
        _this.pt = new wjcCore.Point();
        return _this;
    }
    Marker.prototype.initializedChart = function (s) {
        var _this = this;
        this.chart = s;
        var chart = this.chart, markcontent, midMarker = new wjcChart.LineMarker(chart, {
            lines: wjcChart.LineMarkerLines.Both,
            interaction: wjcChart.LineMarkerInteraction.Move,
            alignment: wjcChart.LineMarkerAlignment.Top | wjcChart.LineMarkerAlignment.Left,
            content: function () {
                _this.markcontents = _this.getMarkerContents(new wjcCore.Point(_this.pt.x, _this.pt.y));
                return _this.markcontents ? _this.markcontents.content : '';
            }
        }), hMarker = new wjcChart.LineMarker(chart, {
            lines: wjcChart.LineMarkerLines.None,
            interaction: wjcChart.LineMarkerInteraction.Move,
            horizontalPosition: 1,
            content: function () {
                return _this.markcontents && _this.markcontents.y ? _this.markcontents.y.toString() : '';
            }
        }), vMarker = new wjcChart.LineMarker(chart, {
            lines: wjcChart.LineMarkerLines.None,
            interaction: wjcChart.LineMarkerInteraction.Move,
            verticalPosition: 1,
            content: function () {
                return _this.markcontents && _this.markcontents.x ? _this.markcontents.x.toString() : '';
            }
        });
        chart.tooltip.content = '';
        chart.axisY.position = 3;
        midMarker.positionChanged.addHandler(function (s, e) {
            _this.pt = e;
        });
        var lineMarkers = chart.hostElement.querySelectorAll('.wj-chart-linemarker-container');
        this.markershowing(lineMarkers, 'hidden');
        chart.hostElement.onmouseenter = function (e) {
            _this.markershowing(lineMarkers, 'visible');
        };
        if ('ontouchstart' in window) {
            chart.hostElement.ontouchstart = function (e) {
                _this.markershowing(lineMarkers, 'visible');
            };
        }
        chart.hostElement.onmouseleave = function (e) {
            _this.markershowing(lineMarkers, 'hidden');
        };
    };
    Marker.prototype.chartRendered = function (s) {
        var chartHostEle = s.hostElement, pa = chartHostEle.querySelector('.wj-plot-area');
        this.pOffset = wjcCore.getElementRect(pa);
    };
    //get line marker content
    Marker.prototype.getMarkerContents = function (pt) {
        var chart = this.chart, newHitPoint = new wjcCore.Point(pt.x, NaN), ht, xContent, yContent, axisYMax, axisYMin, content = '';
        if (!chart || chart.series.length < 1) {
            return;
        }
        axisYMax = chart.axisY.actualMax;
        axisYMin = chart.axisY.actualMin;
        //calculate the y value
        if (this.pOffset == null) {
            yContent = 0;
        }
        else {
            yContent = axisYMax - ((pt.y - this.pOffset.top) / this.pOffset.height) * (axisYMax - axisYMin);
            yContent = yContent.toFixed(2);
        }
        ht = chart.series[0].hitTest(newHitPoint);
        if (ht.x && ht.y !== null) {
            xContent = ht.x;
        }
        return { content: '', x: xContent, y: yContent };
    };
    Marker.prototype.markershowing = function (lineMarkers, visible) {
        for (var i = 0; i < lineMarkers.length; i++) {
            lineMarkers[i].style.visibility = visible;
        }
    };
    Marker.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "marker" }, "Marker"),
            React.createElement("p", null, "The marker on FinancialChart consists of a text area with content reflecting data point values, and an optional vertical or horizontal line (or both for a cross-hair effect) positioned over the plot area."),
            React.createElement("p", null, "In the example below, the vertical and horizontal lines, both get displayed when mouse is hovered over the plot area. The data values corresponding to the marker position are displayed next to x and y axes."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#mkJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#mkJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "mkJsx" },
                            ' <wjFinancialChart.FinancialChart\n',
                            '     initialized={this.initializedChart.bind(this)}\n',
                            '     rendered={this.chartRendered.bind(this)}\n',
                            '     itemsSource={this.props.data}\n',
                            '     header="Facebook, Inc. (FB)"\n',
                            '     chartType="Candlestick"\n',
                            '     bindingX="date"\n',
                            '     symbolSize={4}\n',
                            '     series={[\n',
                            '         { binding: "high,low,open,close" }\n',
                            '     ]} />\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "mkJs" },
                            ' chart: wjcFinanceChart.FinancialChart;\n',
                            ' pt: wjcCore.Point;\n',
                            ' pOffset: wjcCore.Rect;\n',
                            ' markcontents: any;\n',
                            ' constructor(props) {\n',
                            '     super(props);\n',
                            '     this.pt = new wjcCore.Point();\n',
                            ' }\n',
                            '\n',
                            ' initializedChart(s: wjcFinanceChart.FinancialChart) {\n',
                            '     this.chart = s;\n',
                            '\n',
                            '     var chart = this.chart, markcontent,\n',
                            '     midMarker = new wjcChart.LineMarker(chart, {\n',
                            '         lines: wjcChart.LineMarkerLines.Both,\n',
                            '         interaction: wjcChart.LineMarkerInteraction.Move,\n',
                            '         alignment: wjcChart.LineMarkerAlignment.Top | wjcChart.LineMarkerAlignment.Left,\n',
                            '         content: () => {\n',
                            '             this.markcontents = this.getMarkerContents(new wjcCore.Point(this.pt.x, this.pt.y));\n',
                            '            return this.markcontents ? this.markcontents.content : \'\';\n',
                            '         }\n',
                            '     }),\n',
                            '     hMarker = new wjcChart.LineMarker(chart, {\n',
                            '         lines: wjcChart.LineMarkerLines.None,\n',
                            '         interaction: wjcChart.LineMarkerInteraction.Move,\n',
                            '             horizontalPosition: 1,\n',
                            '             content: () => {\n',
                            '                 return this.markcontents && this.markcontents.y ? this.markcontents.y.toString() : \'\';\n',
                            '             }\n',
                            '\n',
                            '         }),\n',
                            '     vMarker = new wjcChart.LineMarker(chart, {\n',
                            '         lines: wjcChart.LineMarkerLines.None,\n',
                            '         interaction: wjcChart.LineMarkerInteraction.Move,\n',
                            '             verticalPosition: 1,\n',
                            '             content: () => {\n',
                            '                 return this.markcontents && this.markcontents.x ? this.markcontents.x.toString() : \'\';\n',
                            '             }\n',
                            '     });\n',
                            '\n',
                            '     chart.tooltip.content = \'\';\n',
                            '     chart.axisY.position = 3;\n',
                            '\n',
                            '     midMarker.positionChanged.addHandler((s, e:any)=> {\n',
                            '         this.pt = e;\n',
                            '     });\n',
                            '\n',
                            '     var lineMarkers = chart.hostElement.querySelectorAll(\'.wj-chart-linemarker-container\');\n',
                            '     this.markershowing(lineMarkers, \'hidden\');\n',
                            '     chart.hostElement.onmouseenter = e => {\n',
                            '         this.markershowing(lineMarkers, \'visible\');\n',
                            '     }\n',
                            '     if (\'ontouchstart\' in window) {\n',
                            '         chart.hostElement.ontouchstart = e => {\n',
                            '             this.markershowing(lineMarkers, \'visible\');\n',
                            '         }\n',
                            '     }\n',
                            '     chart.hostElement.onmouseleave = e => {\n',
                            '         this.markershowing(lineMarkers, \'hidden\');\n',
                            '     }\n',
                            ' }\n',
                            '\n',
                            ' chartRendered(s) {\n',
                            '     var chartHostEle = s.hostElement,\n',
                            '         pa = chartHostEle.querySelector(\'.wj-plot-area\');\n',
                            '     this.pOffset = wjcCore.getElementRect(pa);\n',
                            ' }\n',
                            '\n',
                            ' //get line marker content\n',
                            ' private getMarkerContents(pt) {\n',
                            '     var chart = this.chart,\n',
                            '         newHitPoint = new wjcCore.Point(pt.x, NaN),\n',
                            '         ht, xContent, yContent, axisYMax, axisYMin,\n',
                            '         content = \'\';\n',
                            '\n',
                            '     if (!chart || chart.series.length < 1) {\n',
                            '         return;\n',
                            '     }\n',
                            '     axisYMax = chart.axisY.actualMax;\n',
                            '     axisYMin = chart.axisY.actualMin;\n',
                            '     //calculate the y value\n',
                            '     if (this.pOffset == null) {\n',
                            '         yContent = 0;\n',
                            '     } else {\n',
                            '         yContent = axisYMax - ((pt.y - this.pOffset.top) / this.pOffset.height) * (axisYMax - axisYMin);\n',
                            '         yContent = yContent.toFixed(2);\n',
                            '     }\n',
                            '     ht = chart.series[0].hitTest(newHitPoint);\n',
                            '\n',
                            '     if (ht.x && ht.y !== null) {\n',
                            '         xContent = ht.x;\n',
                            '     }\n',
                            '     return { content: \'\', x: xContent, y: yContent };\n',
                            ' }\n',
                            '\n',
                            ' private markershowing(lineMarkers, visible) {\n',
                            '     for (var i = 0; i < lineMarkers.length; i++) {\n',
                            '         lineMarkers[i].style.visibility = visible;\n',
                            '     }\n',
                            ' }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjFinancialChart.FinancialChart, { initialized: this.initializedChart.bind(this), rendered: this.chartRendered.bind(this), itemsSource: this.props.data, header: "Facebook, Inc. (FB)", chartType: "Candlestick", bindingX: "date", symbolSize: 4, series: [
                            { binding: "high,low,open,close" }
                        ] }))));
    };
    return Marker;
}(React.Component));
exports.Marker = Marker;
//# sourceMappingURL=Marker.js.map