TS-316

app.js

function setColClass(e) {
    var t, a = e.find(".col-sm-4").length,
        i = e.find(".col-sm-4").last().index();
    if (3 !== a) {
        if (a > 3)
            for (; a > 3;) a -= 3;
        for (t = 12 / a; a;) --a, e.find($("[class*='col-sm-']")).eq(i - a).removeClass("col-sm-4").addClass("col-sm-" + t)
    }
}

function getInputLabelText(e) {
    var t = "",
        a = [];
    return e.split(/(?=[A-Z])/).filter(function(e) {
        1 === e.length ? t += e : (t += " ", t += e)
    }), t = t.trim(), t = t[0].toUpperCase() + t.substr(1), t.split(" ").filter(function(e, i) {
        1 === e.length && i !== t.split(" ").length - 1 ? a.push(e + "-") : a.push(e)
    }), a.join(" ").replace(/-\s/, "-")
}

function updateTextForIndicatorTypeSelect(e) {
    e.val() && (e.val().length > 1 ? e.find("option:selected").each(function() {
        $(this).text($(this).attr("data-abbr"))
    }) : e.find("option:selected").each(function() {
        $(this).text($(this).attr("data-full-text"))
    }), e.selectpicker("refresh").closest(".bootstrap-select").find(".dropdown-menu.inner").find("span.text").each(function(t) {
        $(this).text(e.find("option").eq(t).attr("data-full-text"))
    }))
}

var chart = anychart.stock();
var annotationsColor;

function createPageColorPicker() {
    var colorPicker = $('.color-picker');
    var strokeWidth;
    var STROKE_WIDTH = 1;
    colorPicker.colorpickerplus();
    colorPicker.on('changeColor', function(e, color) {
        var annotation = chart.annotations().getSelectedAnnotation();

        if (annotation) {
            switch ($(this).data('color')) {
                case 'fill':
                    annotation.fill(color);
                    break;
                case 'stroke':
                    strokeWidth = annotation.stroke().thickness || STROKE_WIDTH;
                    strokeDash = annotation.stroke().dash || '';
                    var settings = {
                        thickness: strokeWidth,
                        color: color,
                        dash: strokeDash
                    };
                    annotation.stroke(settings);
                    annotation.hoverStroke(settings);
                    annotation.selectStroke(settings);
            }
        }

        if (color == null) {
            $('.color-fill-icon', $(this)).addClass('colorpicker-color');
        } else {
            $('.color-fill-icon', $(this)).removeClass('colorpicker-color');
            $('.color-fill-icon', $(this)).css('background-color', color);
        }
    });
}

function onAnnotationDrawingFinish() {
    setToolbarButtonActive(null);
}

function onAnnotationSelect(evt) {
    var annotation = evt.annotation;
    var colorFill;
    var colorStroke;
    var strokeWidth;
    var strokeDash;
    var strokeType;
    var markerSize;
    var STROKE_WIDTH = 1;
    // val 6 in select = 'solid'
    var STROKE_TYPE = '6';
    var $strokeSettings = $('#select-stroke-settings');
    var $markerSize = $('#select-marker-size');
    var $markerSizeBtn = $('.select-marker-size');
    var $colorPickerFill = $('.color-picker[data-color="fill"]');
    var $colorPickerStroke = $('.color-picker[data-color="stroke"]');

    if (annotation.fill !== undefined) {
        $colorPickerFill.removeAttr('disabled');
        colorFill = annotation.fill();
    } else {
        $colorPickerFill.attr('disabled', 'disabled');
    }
    if (typeof annotation.stroke() === 'function') {
        colorStroke = $colorPickerStroke.find('.color-fill-icon').css('background-color');
        colorFill = $colorPickerFill.find('.color-fill-icon').css('background-color');

        if (colorFill.indexOf('a') === -1) {
            colorFill = colorFill.replace('rgb', 'rgba').replace(')', ', 0.5)');
        }

        if ($strokeSettings.val()) {
            switch ($strokeSettings.val()[0]) {
                case '6':
                case '7':
                case '8':
                    strokeType = $strokeSettings.val()[0];
                    strokeWidth = $strokeSettings.val()[1] || STROKE_WIDTH;
                    break;
                default:
                    strokeWidth = $strokeSettings.val()[0];
                    strokeType = $strokeSettings.val()[1];
                    break;
            }
        } else {
            strokeWidth = STROKE_WIDTH;
            strokeType = STROKE_TYPE;
        }

    } else {
        colorStroke = annotation.stroke().color;
        strokeWidth = annotation.stroke().thickness;
        strokeDash = annotation.stroke().dash;
    }

    switch (strokeType) {
        case '6':
            strokeType = null;
            break;
        case '7':
            strokeType = '1 1';
            break;
        case '8':
            strokeType = '10 5';
            break;
    }

    if (strokeType === undefined) {
        strokeType = strokeDash;
    }

    if (annotation.type === 'marker') {
        markerSize = annotation.size();

        if ($('.choose-marker').hasClass('open')) {
            $markerSize.val($markerSize.val()).selectpicker('refresh');
            annotation.size($markerSize.val());
            $markerSizeBtn.removeAttr('disabled')
        } else {
            $markerSize.removeAttr('disabled').val(markerSize).selectpicker('refresh');
            annotation.size(markerSize);
            $markerSizeBtn.removeAttr('disabled')
        }
        $markerSizeBtn.removeAttr('disabled');

    } else {
        $markerSizeBtn.attr('disabled', 'disabled');
    }

    var settings = {
        thickness: strokeWidth,
        color: colorStroke,
        dash: strokeType
    };
    annotation.stroke(settings);
    annotation.hoverStroke(settings);
    annotation.selectStroke(settings);

    if (annotation.fill !== undefined) {
        annotation.fill(colorFill);
    }

    switch (strokeType) {
        case '1 1':
            strokeDash = 7;
            break;
        case '10 5':
            strokeDash = 8;
            break;
        default:
            strokeDash = 6;
            break;
    }

    $colorPickerFill.find('.color-fill-icon').css('background-color', colorFill);
    $colorPickerStroke.find('.color-fill-icon').css('background-color', colorStroke);
    $strokeSettings.val([strokeWidth, strokeDash]).selectpicker('refresh');
}

function contextMenuItemsFormatter(items) {
    // insert context menu item on 0 position
    items.splice(0, 0, {
        text: "Remove selected annotation",
        action: removeSelectedAnnotation
    });

    // insert context menu item on 1 position
    items.splice(1, 0, {
        text: "Remove all annotations",
        action: removeAllAnnotation
    });

    // insert context menu separator
    items.splice(2, 0, undefined);

    return items;
}

function setToolbarButtonActive(type, markerType) {
    var $buttons = $('.btn[data-annotation-type]');
    $buttons.removeClass('active');
    $buttons.blur();

    if (type) {
        var selector = '.btn[data-annotation-type="' + type + '"]';
        if (markerType) selector += '[data-marker-type="' + markerType + '"]';
        $(selector).addClass('active');
    }
}

function updatePropertiesBySelectedAnnotation(strokeWidth, strokeType) {
    var strokeColor;
    var annotation = chart.annotations().getSelectedAnnotation();
    if (annotation == null) return;

    if (typeof annotation.stroke() === 'function') {
        strokeColor = annotation.color();
    } else {
        strokeColor = annotation.stroke().color;
    }

    switch (strokeType) {
        case '6':
            strokeType = null;
            break;
        case '7':
            strokeType = '1 1';
            break;
        case '8':
            strokeType = '10 5';
            break;
    }

    var settings = {
        thickness: strokeWidth,
        color: strokeColor,
        dash: strokeType
    };

    annotation.stroke(settings);
    annotation.hoverStroke(settings);
    annotation.selectStroke(settings);
}


! function() {
    function e() {
        $("#chart-container").height($(window).height() - f.outerHeight() - 10)

    }

    var $html = $('html');
    $('#select-stroke-settings').val([1, 6]).selectpicker('refresh');
    function t(t, a) {
        var i = o.find("option:selected").text().trim(),
            n = r.val();
        x = anychart.data.table();
        var l, s = x.mapAs({
            value: 1,
            volume: 1,
            open: 1,
            high: 2,
            low: 3,
            close: 4
        });

        chart = anychart.stock();

        //-------------------------------
        var d = chart.plot(0);

        if (x.addData(u.data[i.toLowerCase()]), a) {
            var c, p, f = [];
            l = d[u.chartType](s), l.name(i.toUpperCase()), d.yScale(u.scale);
            for (var h in u.indicators) c = h, u.indicators.hasOwnProperty(h) && (f = u.indicators[h].settings, f[0] = s), ~c.toLowerCase().indexOf("stochastic") && (c = "stochastic"), u.indicators.hasOwnProperty(h) && (p = chart.plot(u.indicators[h].plotIndex), p[c].apply(p, f), p.yAxis(1).orientation("right"))
        } else l = d[n](s), l.name(i.toUpperCase());
        l.stroke("2px #64b5f6"), d.yAxis(1).orientation("right"), chart.padding(10, 50, 20, 50), chart.scroller().line(s), chart.selectRange("2004-11-14", "2007-11-15"), chart.container(t), chart.draw(), anychart.ui.rangePicker().render(chart), anychart.ui.rangeSelector().render(chart), chart.listen("chartDraw", function() {
            e(), setTimeout(function() {
                v.hide()
            }, 100)
        })

        ////Drawing Activity
        //alert("first");
        alert("1");
        createPageColorPicker();
        chart.contextMenu().itemsFormatter(contextMenuItemsFormatter);
        chart.listen("annotationDrawingFinish", onAnnotationDrawingFinish);
        chart.listen("annotationSelect", onAnnotationSelect);
        chart.listen("annotationUnSelect", function() {
            $('.color-picker[data-color="fill"]').removeAttr('disabled');
            $('.select-marker-size').removeAttr('disabled');
            $('.drawing-tools-solo').find('.bootstrap-select').each(function() {
                $(this).removeClass('open');
            })
        });
    }

    function a() {
        chart && (chart.dispose(), chart = null)
    }

    function i() {
        var e, t, a = g.defaultSettings[g.name],
            i = 0;
        $("#indicatorSettingsModalTitle").text(g.defaultSettings[g.name].overview.title), h.empty(), h.append('<div class="row"></div>');
        var n = h.find(".row");
        for (var o in a)
            if (a.hasOwnProperty(o) && "overview" !== o && "plotIndex" !== o)
                if ("string" == typeof a[o]) {
                    for (n.append(w), e = $("#indicatorFormGroup"), e.find("select").attr("id", o), e.find("label").attr("for", o).text(getInputLabelText(o)), i = 0; i < g.seriesType.length; i++) t = $("<option></option>"), t.val(g.seriesType[i].toLowerCase()), t.text(getInputLabelText(g.seriesType[i])), e.find("select").append(t);
                    e.removeAttr("id")
                } else if ("number" == typeof a[o]) n.append(y), e = $("#indicatorFormGroup"), e.find("input").attr("id", o), e.removeAttr("id").find("label").attr("for", o).text(getInputLabelText(o));
                else if ("object" == typeof a[o]) {
                    for (n.append(w), e = $("#indicatorFormGroup"), e.find("select").attr("id", o), e.find("label").attr("for", o).text(getInputLabelText(o)), i = 0; i < a[o].length; i++) t = $("<option></option>"), t.val(a[o][i].toLowerCase()), t.text(a[o][i]), e.find("select").append(t);
                    e.removeAttr("id")
                }
        setColClass(h), h.find($("[class*='col-sm-']")).last().after('<div class="col-xs-12" id="overviewText"></div>'), h.find("#overviewText").append(g.defaultSettings[g.name].overview.description)
    }

    function n() {
        var e = g.defaultSettings[g.name];
        for (var t in e) e.hasOwnProperty(t) && "overview" !== t && "plotIndex" !== t && $("#" + t).val(e[t])
    }
    var o = $("#chartDataSelect"),
        r = $("#seriesTypeSelect"),
        l = $("#scaleTypeSelect"),
        s = $("#indicatorTypeSelect"),
        d = $("#indicatorSettingsModal"),
        c = $("#resetButton"),
        p = $("#addIndicatorButton"),
        f = $("#indicatorNavPanel"),
        h = $("#indicatorForm"),
        v = $("#loader"),
        u = {};
    u.data = {}, u.chartType = r.val(), u.scale = l.val(), u.indicators = {};
    var chart, x, g = {
            name: "",
            plotIndex: 0,
            defaultSettings: {},
            seriesType: ["area", "column", "jumpLine", "line", "marker", "spline", "splineArea", "stepArea", "stepLine", "stick"]
        },
        y = '<div class="col-sm-4"><div class="form-group" id="indicatorFormGroup"><label for="" class="control-label"></label><input type="number" class="form-control" id=""></div></div>',
        w = '<div class="col-sm-4"><div class="form-group" id="indicatorFormGroup"><label for="" class="control-label"></label><select class="form-control select show-tick" id=""></select></div></div>',
        b = {
            createChart: t,
            removeChart: a
        };
    "file:" === window.location.protocol && (v.hide(), $(".wrapper").hide(), $("#warning").modal({
        backdrop: "static",
        keyboard: !1
    })), $.get("indicators.xml", function(e) {
        $(e).find("indicator").each(function(e, t) {
            var a, i = $(this).attr("type"),
                n = $("<option></option>");
            n.attr({
                value: i,
                "data-abbr": $(this).find("abbreviation").text(),
                "data-full-text": $(this).find("title").text()
            }).text($(this).find("title").text()), $(this).find('[name="plotIndex"]').length && n.attr("data-plot-index", $(this).find('[name="plotIndex"]').attr("value")), s.append(n), g.defaultSettings[i] = {}, $(t).find("defaults").children().each(function() {
                var e = $(this).attr("name"),
                    t = $(this).attr("value");
                switch ($(this).attr("type")) {
                    case "number":
                        t = +t;
                        break;
                    case "array":
                        t = JSON.parse(t)
                }
                g.defaultSettings[i][e] = t
            }), a = $(t).find("description").text(), g.defaultSettings[i].overview = {}, g.defaultSettings[i].overview.title = $(t).find("title").text(), g.defaultSettings[i].overview.description = a
        });
        var t = s.find("option").sort(function(e, t) {
            return e.value.toUpperCase().localeCompare(t.value.toUpperCase())
        });
        s.append(t), s.selectpicker()
    }),
        $(window).on("resize", e),

        anychart.onDocumentReady(function()
        {
            anychart.data.loadJsonFile(o.find("option:selected").data().json, function(e)
            {
                u.data[o.find("option:selected").text().toLowerCase().trim()] = e, b.createChart("chart-container")
            }),

                o.on("change", function() {
                    var e = $(this).find("option:selected").text().toLowerCase().trim();
                    ~Object.keys(u.data).indexOf(e) ? (x.addData(u.data[e]), chart.plot().getSeries(0).name(e.toUpperCase())) :

                        anychart.data.loadJsonFile($(this).find("option:selected").data().json, function(t)
                        {
                            u.data[e] = t, x.addData(t), chart.plot().getSeries(0).name(e.toUpperCase())
                        })
                }),

                r.on("change", function() {
                    var e = $(this).val();
                    chart.plot().getSeries(0).seriesType(e), u.chartType = e
                }),

                s.on("change", function() {
                    if ($(this).val() && 1 === $(this).val().length && updateTextForIndicatorTypeSelect(s), null === $(this).val() || $(this).val().length < Object.keys(u.indicators).length) {
                        if (b.removeChart(), null !== $(this).val())
                            for (var e in u.indicators) ~$(this).val().indexOf(e) || delete u.indicators[e];
                        else u.indicators = {};
                        return void b.createChart("chart-container", !0)
                    }
                    for (var t = 0; t < $(this).val().length; t++)
                        if (!~Object.keys(u.indicators).indexOf($(this).val()[t])) {
                            g.name = $(this).val()[t];
                            break
                        }
                    g.plotIndex = $(this).find('option[value="' + g.name + '"]').data().plotIndex, 0 !== g.plotIndex && (g.plotIndex = chart.getPlotsCount()), i(), n(), d.modal("show"), f.find(".select.open").removeClass("open")
                }),
                l.on("change", function() {
                    b.removeChart(), u.scale = $(this).val(), b.createChart("chart-container", !0)
                }),
                d.on("hidden.bs.modal", function() {
                    for (var e, t = 0; t < s.val().length; t++)
                        if (!~Object.keys(u.indicators).indexOf(s.val()[t])) {
                            e = s.val()[t];
                            break
                        }
                    if (!e) return updateTextForIndicatorTypeSelect(s), !1;
                    var a = s.find('[value="' + e + '"]').index();
                    s.find('[value="' + e + '"]').removeAttr("selected"), s.prev(".dropdown-menu").find('li[data-original-index="' + a + '"]').removeClass("selected"), updateTextForIndicatorTypeSelect(s)
                }),
                d.on("show.bs.modal", function() {
                    h.find(".select").selectpicker()
                }),
                c.on("click", function(e) {
                    e.preventDefault(), b.removeChart(), u.indicators = {}, u.scale = "linear", u.chartType = "line", o.val(1).selectpicker("refresh"), r.val("candlestick").selectpicker("refresh"), s.val("").selectpicker("refresh"), l.val("linear").selectpicker("refresh"), b.createChart("chart-container")
                }),
                p.on("click", function() {
                    var e = x.mapAs({
                            value: 1,
                            volume: 1,
                            open: 1,
                            high: 2,
                            low: 3,
                            close: 4
                        }),
                        t = g.defaultSettings[g.name],
                        a = [e],
                        i = g.name;
                    ~i.toLowerCase().indexOf("stochastic") && (i = "stochastic");
                    for (key in t)
                        if ("overview" !== key && "plotIndex" !== key) {
                            var n = $("#" + key).val();
                            n = "true" == n || "false" == n ? "true" == n : n, a.push(n)
                        }
                    u.indicators[g.name] = {}, u.indicators[g.name].settings = a, u.indicators[g.name].plotIndex = g.plotIndex;
                    var o = chart.plot(g.plotIndex);
                    o[i].apply(o, a), o.yAxis(1).orientation("right"), d.modal("hide")
                })

            //alert("dsd");
            //alert("2");
            //////////Drawing on chart initialisation
            $('select.choose-drawing-tools').on('change', changeAnnotations);
            $('select.choose-marker').on('change', changeAnnotations);
            $('[data-annotation-type]').on('click', changeAnnotations);
            //----------------------------

            function changeAnnotations() {
                var $that = $(this);
                //alert($that);
                //	alert(chart.plot(0));
                setTimeout(function()
                    {
                        var $target = $that;
                        var active = $target.hasClass('active');
                        var $markerSize = $('#select-marker-size');
                        var markerSize = $markerSize.val();
                        //alert($target);
                        if (active) {
                            chart.annotations().cancelDrawing();
                            setToolbarButtonActive(null);
                        } else {
                            var type = $target.data().annotationType || $target.find('option:selected').data().annotationType;
                            //alert(type);
                            if (!$target.data().annotationType)
                            {
                                var markerType = $target.find('option:selected').data().markerType;
                                //alert(markerType);
                            }

                            setToolbarButtonActive(type, markerType);

                            if (type) {
                                if (!$target.data().annotationType) {
                                    var markerAnchor = $target.find('option:selected').data().markerAnchor;

                                }

                                var drawingSettings = {
                                    type: type,
                                    size: markerSize,
                                    color: annotationsColor,
                                    markerType: markerType,
                                    anchor: markerAnchor
                                };
                                chart.annotations().startDrawing(drawingSettings);
                            }
                        }
                        //alert(chart.plot(0));
                        var annotation = chart.annotations().getSelectedAnnotation();
                        //alert(annotation.fill);
                        //alert(chart.annotations().getSelectedAnnotation());
                        if (annotation.fill === undefined) {
                            $('.color-picker[data-color="fill"]').attr('disabled', 'disabled');
                        } else {
                            $('.color-picker[data-color="fill"]').removeAttr('disabled');
                        }

                        $target.val('');
                    }
                    , 1);
            }

            function removeAllAnnotation() {
                chart.annotations().removeAllAnnotations();
            }

            function removeSelectedAnnotation() {
                var annotation = chart.annotations().getSelectedAnnotation();
                if (annotation) chart.annotations().removeAnnotation(annotation);
                return !!annotation;
            }

            $('.btn[data-action-type]').click(function(evt) {
                var annotation = chart.annotations().getSelectedAnnotation();
                var $target = $(evt.currentTarget);
                $target.blur();
                var type = $target.attr('data-action-type');

                switch (type) {
                    case 'removeAllAnnotations':
                        removeAllAnnotation();
                        break;
                    case 'removeSelectedAnnotation':
                        removeSelectedAnnotation();
                        break;
                    case 'unSelectedAnnotation':
                        chart.annotations().unselect(annotation).cancelDrawing();
                        setToolbarButtonActive(null);
                        break;
                }

            });

            // alert("debug");

            $('#select-stroke-settings').on('change', function() {
                var strokeWidth;
                var strokeType;
                var STROKE_WIDTH = 1;

                if ($(this).val()) {
                    switch ($(this).val()[0]) {
                        case '6':
                        case '7':
                        case '8':
                            strokeType = $(this).val()[0];
                            strokeWidth = $(this).val()[1] || STROKE_WIDTH;
                            break;
                        default:
                            strokeType = $(this).val()[1];
                            strokeWidth = $(this).val()[0];
                            break;
                    }
                    updatePropertiesBySelectedAnnotation(strokeWidth, strokeType);
                }
            });

            $('#select-marker-size').on('change', function() {
                var annotation = chart.annotations().getSelectedAnnotation();

                if (annotation == null) return;

                if (annotation.type === 'marker') {
                    annotation.size($(this).val());
                }
            });

            $('html').keyup(function(e) {
                if (e.keyCode == 8 || e.keyCode == 46) {
                    removeSelectedAnnotation();
                }
            })

        })
}();