"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 wjFlexChart = require("wijmo/wijmo.react.chart");
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();
        _this.initializedChart = _this.initializedChart.bind(_this);
        _this.changeContent = _this.changeContent.bind(_this);
        _this.midPosChanged = _this.midPosChanged.bind(_this);
        _this.changeXContent = _this.changeXContent.bind(_this);
        _this.changeYContent = _this.changeYContent.bind(_this);
        _this.chartRendered = _this.chartRendered.bind(_this);
        return _this;
    }
    Marker.prototype.initializedChart = function (s) {
        var _this = this;
        this.chart = s;
        var chart = this.chart, markcontent;
        chart.tooltip.content = '';
        chart.axisY.position = 3;
        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.changeContent = function () {
        this.markcontents = this.getMarkerContents(new wjcCore.Point(this.pt.x, this.pt.y));
        return this.markcontents ? this.markcontents.content : '';
    };
    ;
    Marker.prototype.midPosChanged = function (s, p) {
        this.pt = p;
    };
    Marker.prototype.changeXContent = function () {
        return this.markcontents && this.markcontents.x ? this.markcontents.x.toString() : '';
    };
    ;
    Marker.prototype.changeYContent = function () {
        return this.markcontents && this.markcontents.y ? this.markcontents.y.toString() : '';
    };
    ;
    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}\n',
                            '    rendered={this.chartRendered}\n',
                            '    itemsSource={this.props.data}\n',
                            '    header="Facebook, Inc. (FB)"\n',
                            '    chartType="Candlestick"\n',
                            '    bindingX="date"\n',
                            '    symbolSize={4}>\n',
                            '    <wjFinancialChart.FinancialChartSeries binding="high,low,open,close" />\n',
                            '    <wjFlexChart.FlexChartLineMarker\n',
                            '        lines={wjcChart.LineMarkerLines.Both}\n',
                            '        interaction={wjcChart.LineMarkerInteraction.Move}\n',
                            '        alignment={wjcChart.LineMarkerAlignment.Top | wjcChart.LineMarkerAlignment.Left}\n',
                            '        content={this.changeContent}\n',
                            '        positionChanged={this.midPosChanged}>\n',
                            '    </wjFlexChart.FlexChartLineMarker>\n',
                            '    <wjFlexChart.FlexChartLineMarker\n',
                            '        lines={wjcChart.LineMarkerLines.None}\n',
                            '        interaction={wjcChart.LineMarkerInteraction.Move} \n',
                            '        horizontalPosition={1}\n',
                            '        content={this.changeYContent}>\n',
                            '    </wjFlexChart.FlexChartLineMarker>\n',
                            '    <wjFlexChart.FlexChartLineMarker\n',
                            '        lines={wjcChart.LineMarkerLines.None}\n',
                            '        interaction={wjcChart.LineMarkerInteraction.Move} \n',
                            '        verticalPosition={1}\n',
                            '        content={this.changeXContent}>\n',
                            '    </wjFlexChart.FlexChartLineMarker>\n',
                            '</wjFinancialChart.FinancialChart>\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',
                            '     this.initializedChart = this.initializedChart.bind(this);\n',
                            '     this.changeContent = this.changeContent.bind(this);\n',
                            '     this.midPosChanged = this.midPosChanged.bind(this);\n',
                            '     this.changeXContent = this.changeXContent.bind(this);\n',
                            '     this.changeYContent = this.changeYContent.bind(this);\n',
                            '     this.chartRendered = this.chartRendered.bind(this);\n',
                            ' }\n',
                            ' \n',
                            ' initializedChart (s: wjcFinanceChart.FinancialChart) {\n',
                            '     this.chart = s;\n',
                            ' \n',
                            '     var chart = this.chart, markcontent;\n',
                            '     chart.tooltip.content = \'\';\n',
                            '     chart.axisY.position = 3;\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',
                            ' changeContent() {\n',
                            '     this.markcontents = this.getMarkerContents(new wjcCore.Point(this.pt.x, this.pt.y));\n',
                            '     return this.markcontents ? this.markcontents.content : \'\';\n',
                            ' };\n',
                            ' \n',
                            ' midPosChanged(s, p: wjcCore.Point) {\n',
                            '     this.pt = p;\n',
                            ' }\n',
                            ' \n',
                            ' changeXContent() {\n',
                            '     return this.markcontents && this.markcontents.x ? this.markcontents.x.toString() : \'\';\n',
                            ' };\n',
                            ' \n',
                            ' changeYContent() {\n',
                            '     return this.markcontents && this.markcontents.y ? this.markcontents.y.toString() : \'\';\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, rendered: this.chartRendered, itemsSource: this.props.data, header: "Facebook, Inc. (FB)", chartType: "Candlestick", bindingX: "date", symbolSize: 4 },
                        React.createElement(wjFinancialChart.FinancialChartSeries, { binding: "high,low,open,close" }),
                        React.createElement(wjFlexChart.FlexChartLineMarker, { lines: wjcChart.LineMarkerLines.Both, interaction: wjcChart.LineMarkerInteraction.Move, alignment: wjcChart.LineMarkerAlignment.Top | wjcChart.LineMarkerAlignment.Left, content: this.changeContent, positionChanged: this.midPosChanged }),
                        React.createElement(wjFlexChart.FlexChartLineMarker, { lines: wjcChart.LineMarkerLines.None, interaction: wjcChart.LineMarkerInteraction.Move, horizontalPosition: 1, content: this.changeYContent }),
                        React.createElement(wjFlexChart.FlexChartLineMarker, { lines: wjcChart.LineMarkerLines.None, interaction: wjcChart.LineMarkerInteraction.Move, verticalPosition: 1, content: this.changeXContent })))));
    };
    return Marker;
}(React.Component));
exports.Marker = Marker;
//# sourceMappingURL=Marker.js.map