<commit_before><div class="time-series-area"></div>

<div class="time-series-choices"></div>

<pre class="flot-json-data" style="display: none">
${flotJsonData}
</pre>

<script>
function evaluateUdf(data) {
    var userFunction = $("#user-function").val()
    if (userFunction) {
        var grouped = {}
        $.each(data, function(i, series) {
            grouped[series["metricName"]] = series
        })

        try {
            grouped = eval('(function(series) {' + userFunction + '})(grouped)')
        } catch (ex) {
            alert("Error evaluating user function")
            throw ex
        }

        data = []
        $.each(grouped, function(metricName, series) {
            data.push(series)
        })
    }
    return data
}

function plotTimeSeries(parentName, minSeries, maxSeries, comparator) {
    var timeSeriesArea = $("#" + parentName + " .time-series-area")

    var placeholder = $('<div id="' + parentName + '-time-series-plot"></div>')
        .css('width', timeSeriesArea.width() + 'px')
        .css('height', '400px')

    timeSeriesArea.append(placeholder)

    // Config
    var plotConfig = {
        xaxis: {
            mode: "time",
            minTickSize: [1, "day"],
            timeformat: "%m/%d/%y"
        },
        legend: {
            show: false
        },
        grid: {
            clickable: true,
            hoverable: true
        }
    }

    // Data
    var data = JSON.parse($("#" + parentName + " .flot-json-data").html())

    // Sort
    if (comparator) {
        data = data.sort(comparator)
    }

    // Filter
    if (minSeries != null && maxSeries != null) {
        var filteredData = []
        for (var i = minSeries; i < maxSeries; i++) {
            if (i < data.length) {
                filteredData.push(data[i])
            }
        }
        data = filteredData
    }

    // Fix colors
    var i = 0;
    $.each(data, function(i, elt) {
        elt.color = i;
        ++i;
    });

    // insert checkboxes
    var choiceContainer = $("#" + parentName + " .time-series-choices");
    $.each(data, function(i, elt) {
        choiceContainer.append("<br/><input type='checkbox' name='" + elt.label +
            "' id='id" + elt.label + "'></input>" +
            "<label for='id" + elt.label + "' id='label-id" + elt.label + "'>"
            + elt.label + "</label>");
    });

    var hashRoute = {}
    if (window.location.hash) {
        var hashKeyValuePairs = window.location.hash.substring(1).split("&")
        for (var i = 0; i < hashKeyValuePairs.length; i++) {
            var pair = hashKeyValuePairs[i].split("=")
            hashRoute[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1])
        }
    }

    var selectedMetrics = hashRoute["selectedMetrics"]
        ? $.map(hashRoute["selectedMetrics"].split(","), function (elt) { return parseInt(elt) })
        : null
    if (hashRoute["selectedMetrics"] && hashRoute["selectedMetrics"].length > 0) {
        choiceContainer.find("input").each(function(i, elt) {
            if (!selectedMetrics || $.inArray(i, selectedMetrics) > -1) {
                $(elt).attr('checked', 'checked')
            }
        })
    }

    choiceContainer.find("input").each(function(i, ele) {
        if ($(ele).attr('name').indexOf($("#input-primary-metric").val()) != -1) {
            $(ele).attr('checked', 'checked')
        }
    })

    choiceContainer.find("input").click(plotAccordingToChoices);

    function plotAccordingToChoices() {

        var plotData = []

        var checkedSeries = {}
        choiceContainer.find("input:checked").each(function() {
            checkedSeries[$(this).attr("name")] = true
        })

        var selectedMetrics = []
        choiceContainer.find("input").each(function(i, elt) {
            if (elt.checked) {
                selectedMetrics.push(i)
            }
        })

        // Set hash route
        var hashRoute = {}
        if (window.location.hash) {
            var hashKeyValuePairs = window.location.hash.substring(1).split("&")
            for (var i = 0; i < hashKeyValuePairs.length; i++) {
                var pair = hashKeyValuePairs[i].split("=")
                hashRoute[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1])
            }
        }
        hashRoute["selectedMetrics"] = selectedMetrics.join(",")
        delete hashRoute[""]
        window.location.hash = $.map(hashRoute, function(val, key) {
            return encodeURIComponent(key) + "=" + encodeURIComponent(val)
        }).join("&")

        $.each(data, function(i, elt) {
            if (checkedSeries[elt["label"]]) {
                plotData.push(elt)
            }
        })

        plotData = evaluateUdf(plotData)

        // Add end points
        var points = []
        $.each(plotData, function(i, series) {
            var start = series["data"][0]
            var end = series["data"][series["data"].length - 1]
            points.push({
                lines: { show: false },
                points: { show: true, radius: 3 },
                data: [start, end],
                color: series.color
            })
        })

        $.each(points, function(i, elt) {
            plotData.push(elt)
        })
<commit_msg>THIRDEYE-205 Baseline / current time series points have "undefined" as metricName in label<commit_after><div class="time-series-area"></div>

<div class="time-series-choices"></div>

<pre class="flot-json-data" style="display: none">
${flotJsonData}
</pre>

<script>
function evaluateUdf(data) {
    var userFunction = $("#user-function").val()
    if (userFunction) {
        var grouped = {}
        $.each(data, function(i, series) {
            grouped[series["metricName"]] = series
        })

        try {
            grouped = eval('(function(series) {' + userFunction + '})(grouped)')
        } catch (ex) {
            alert("Error evaluating user function")
            throw ex
        }

        data = []
        $.each(grouped, function(metricName, series) {
            data.push(series)
        })
    }
    return data
}

function plotTimeSeries(parentName, minSeries, maxSeries, comparator) {
    var timeSeriesArea = $("#" + parentName + " .time-series-area")

    var placeholder = $('<div id="' + parentName + '-time-series-plot"></div>')
        .css('width', timeSeriesArea.width() + 'px')
        .css('height', '400px')

    timeSeriesArea.append(placeholder)

    // Config
    var plotConfig = {
        xaxis: {
            mode: "time",
            minTickSize: [1, "day"],
            timeformat: "%m/%d/%y"
        },
        legend: {
            show: false
        },
        grid: {
            clickable: true,
            hoverable: true
        }
    }

    // Data
    var data = JSON.parse($("#" + parentName + " .flot-json-data").html())

    // Sort
    if (comparator) {
        data = data.sort(comparator)
    }

    // Filter
    if (minSeries != null && maxSeries != null) {
        var filteredData = []
        for (var i = minSeries; i < maxSeries; i++) {
            if (i < data.length) {
                filteredData.push(data[i])
            }
        }
        data = filteredData
    }

    // Fix colors
    var i = 0;
    $.each(data, function(i, elt) {
        elt.color = i;
        ++i;
    });

    // insert checkboxes
    var choiceContainer = $("#" + parentName + " .time-series-choices");
    $.each(data, function(i, elt) {
        choiceContainer.append("<br/><input type='checkbox' name='" + elt.label +
            "' id='id" + elt.label + "'></input>" +
            "<label for='id" + elt.label + "' id='label-id" + elt.label + "'>"
            + elt.label + "</label>");
    });

    var hashRoute = {}
    if (window.location.hash) {
        var hashKeyValuePairs = window.location.hash.substring(1).split("&")
        for (var i = 0; i < hashKeyValuePairs.length; i++) {
            var pair = hashKeyValuePairs[i].split("=")
            hashRoute[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1])
        }
    }

    var selectedMetrics = hashRoute["selectedMetrics"]
        ? $.map(hashRoute["selectedMetrics"].split(","), function (elt) { return parseInt(elt) })
        : null
    if (hashRoute["selectedMetrics"] && hashRoute["selectedMetrics"].length > 0) {
        choiceContainer.find("input").each(function(i, elt) {
            if (!selectedMetrics || $.inArray(i, selectedMetrics) > -1) {
                $(elt).attr('checked', 'checked')
            }
        })
    }

    choiceContainer.find("input").each(function(i, ele) {
        if ($(ele).attr('name').indexOf($("#input-primary-metric").val()) != -1) {
            $(ele).attr('checked', 'checked')
        }
    })

    choiceContainer.find("input").click(plotAccordingToChoices);

    function plotAccordingToChoices() {

        var plotData = []

        var checkedSeries = {}
        choiceContainer.find("input:checked").each(function() {
            checkedSeries[$(this).attr("name")] = true
        })

        var selectedMetrics = []
        choiceContainer.find("input").each(function(i, elt) {
            if (elt.checked) {
                selectedMetrics.push(i)
            }
        })

        // Set hash route
        var hashRoute = {}
        if (window.location.hash) {
            var hashKeyValuePairs = window.location.hash.substring(1).split("&")
            for (var i = 0; i < hashKeyValuePairs.length; i++) {
                var pair = hashKeyValuePairs[i].split("=")
                hashRoute[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1])
            }
        }
        hashRoute["selectedMetrics"] = selectedMetrics.join(",")
        delete hashRoute[""]
        window.location.hash = $.map(hashRoute, function(val, key) {
            return encodeURIComponent(key) + "=" + encodeURIComponent(val)
        }).join("&")

        $.each(data, function(i, elt) {
            if (checkedSeries[elt["label"]]) {
                plotData.push(elt)
            }
        })

        plotData = evaluateUdf(plotData)

        // Add end points
        var points = []
        $.each(plotData, function(i, series) {
            var start = series["data"][0]
            var end = series["data"][series["data"].length - 1]
            points.push({
                lines: { show: false },
                points: { show: true, radius: 3 },
                data: [start, end],
                color: series.color,
                metricName: series.metricName
            })
        })

        $.each(points, function(i, elt) {
            plotData.push(elt)
        })

{'fraction_non_alphanumeric': 0.16207806901753724, 'fraction_numerical': 0.0038657363756364324, 'mean_word_length': 1.9092155787164016, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6748938', 'n_tokens_mistral': 3178, 'n_tokens_neox': 3106, 'n_words': 595}