quick_search-core 0.1.1 → 0.2.0

data/app/assets/javascripts/quick_search/appstats_clicks_overview.js.erb

@@ -0,0 +1,719 @@
+<% url_helper = QuickSearch::Engine.routes.url_helpers %>
+
+(function() {
+    var AppStatsGlobals = {};
+    AppStatsGlobals["#graph_module_clicks"] = {};
+    AppStatsGlobals["#graph_result_clicks"] = {};
+
+    $(document).on("turbolinks:load", function() {
+        if ($("#graph_module_clicks").length) {
+            d3.select("#moduleIconContainer").append("i")
+                .attr("class", "fa fa-spinner fa-spin fa-5x fa-fw big-icon")
+                .attr("id", "moduleIcon");
+            d3.select("#resultIconContainer").append("i")
+                .attr("class", "fa fa-spinner fa-spin fa-5x fa-fw big-icon")
+                .attr("id", "resultIcon");
+            // Redraw graph if the date range is changed
+            document.getElementById("dateButton").addEventListener("click", function() {
+                var from = $("#from").datepicker("getDate");
+                var to = new Date($("#to").datepicker("getDate").getTime() + 1000 * 60 * 60 * 24);
+                document.getElementById("numDays").innerHTML = "" + parseInt((to - from) / (1000 * 60 * 60 * 24));
+                $.ajax({
+                    type: "GET",
+                    contentType: "application/json; charset=utf-8",
+                    url: '<%= url_helper.data_module_clicks_path %>',
+                    dataType: "json",
+                    data: {
+                        "start_date": from,
+                        "end_date": to
+                    },
+                    success: function(moduleDataSet) {
+                        var moduleData = _.cloneDeep(moduleDataSet);
+                        AppStatsGlobals["#graph_module_clicks"].OriginalData = moduleData;
+                        AppStatsGlobals["#graph_module_clicks"].Data = moduleData;
+                        sort_clicks_overview("#graph_module_clicks", AppStatsGlobals["#graph_module_clicks"].Sort);
+                    },
+                    error: function(result) {
+                        error();
+                    }
+                });
+                $.ajax({
+                    type: "GET",
+                    contentType: "application/json; charset=utf-8",
+                    url: '<%= url_helper.data_result_clicks_path %>',
+                    dataType: "json",
+                    data: {
+                        "start_date": from,
+                        "end_date": to
+                    },
+                    success: function(resultDataSet) {
+                        var resultData = _.cloneDeep(resultDataSet);
+                        AppStatsGlobals["#graph_result_clicks"].OriginalData = resultData;
+                        AppStatsGlobals["#graph_result_clicks"].Data = resultData;
+                        sort_clicks_overview("#graph_result_clicks", AppStatsGlobals["#graph_result_clicks"].Sort);
+                    },
+                    error: function(result) {
+                        error();
+                    }
+                });
+            });
+            $.ajax({
+                type: "GET",
+                contentType: "application/json; charset=utf-8",
+                url: '<%= url_helper.data_module_clicks_path %>',
+                dataType: "json",
+                success: function(moduleDataSet) {
+                    d3.select("#moduleIcon").transition().duration(250)
+                        .style("opacity", .000001)
+                        .remove();
+                    var moduleData = _.cloneDeep(moduleDataSet);
+                    AppStatsGlobals["#graph_module_clicks"].OriginalData = moduleData;
+                    AppStatsGlobals["#graph_module_clicks"].Data = moduleData;
+                    AppStatsGlobals["#graph_module_clicks"].Height = 450;
+                    AppStatsGlobals["#graph_module_clicks"].Sort = 0;
+                    draw_graph_clicks_overview("#graph_module_clicks", false);
+                },
+                error: function(result) {
+                    error();
+                }
+            });
+            $.ajax({
+                type: "GET",
+                contentType: "application/json; charset=utf-8",
+                url: '<%= url_helper.data_result_clicks_path %>',
+                dataType: "json",
+                success: function(resultDataSet) {
+                    d3.select("#resultIcon").transition().duration(250)
+                        .style("opacity", .000001)
+                        .remove();
+                    var resultData = _.cloneDeep(resultDataSet);
+                    AppStatsGlobals["#graph_result_clicks"].OriginalData = resultData;
+                    AppStatsGlobals["#graph_result_clicks"].Data = resultData;
+                    AppStatsGlobals["#graph_result_clicks"].Sort = 0;
+                    AppStatsGlobals["#graph_result_clicks"].Height = 450;
+                    draw_graph_clicks_overview("#graph_result_clicks", false);
+                },
+                error: function(result) {
+                    error();
+                }
+            });
+        }
+    });
+
+    function error() {
+        console.log("Error retrieving data");
+    }
+
+    function draw_graph_clicks_overview(id, resetExpanded) {
+        if ($("#graph_module_clicks").length) {
+            // General Variables
+            var svg;            // SVG to contain graph
+            var Globals;        // Shortened reference to graphs globals (depends on id)
+            var dataInt;        // Internal reference to graph dataset
+            var sortStates;     // Array indicating the currently selected sort state
+            var key;            // Key function to maintain object constancy
+            var triangle;       // Triangle object for sort buttons
+            // Dimension Variables
+            var margin;         // Blank space around edge of SVG left as margin
+            var rowHeight;      // Height of each row of data
+            var width;          // Drawable width of SVG (not including margins)
+            var height;         // Drawable height of SVG (not including margins)
+            var oldHeight;      // Previous height of SVG
+            var textPadding;    // Padding around text elements
+            var barHeight;      // Height of data bars
+            var rankWidth;      // Width of rank column
+            var categoryWidth;  // Width of category column
+            var countWidth;     // Width of count column
+            var percentWidth;   // Width of percent column
+            var childOffset;    // Horizontal offset for child elements drawn on element expansion
+            var barCenter;      // Center x for data bar
+            var triangleSpacing;// Space around triangular sort buttons
+            // Scale Variables
+            var x;              // Scale for data bar
+            // Selection Variables
+            var groupEnter;     // Entry selection for gAll
+            var gAll;           // Group containing all elements
+            var headGroupEnter; // Entry selection for headRow
+            var headRow;        // Group containing all head elements
+            var headEnter;      // Entry selection for all head elements
+            var triangles;      // Sort triangles
+            var dataGroupEnter; // Entry selection for dataRows
+            var dataRows;       // Group containing all data elements
+            var dataRects;      // Background rectangles
+            var dataRanks;      // Rank text
+            var dataLabels;     // Label text
+            var dataClicks;     // Click text
+            var dataPercents;   // Percent text
+            var dataBars;       // Data bar
+            var lightBorder;    // Light border (surrounds all elements)
+            var darkBorder;     // Dark border (surrounds data elements)
+
+            // Initialize General Variables ///////////////////////////////////////////////////////////
+            svg = d3.select(id);
+
+            Globals = AppStatsGlobals[id];
+
+            dataInt = Globals.Data;
+
+            sortStates = [0, 0, 0, 0];
+            sortStates[Globals.Sort] = 1;
+
+            key = function(d) {
+                return d.key;
+            };
+
+            triangle = d3.symbol().type(d3.symbolTriangle).size(20);
+
+            // Initialize Dimension Variables /////////////////////////////////////////////////////////
+            margin = {
+                top: 20,
+                right: 20,
+                bottom: 20,
+                left: 20
+            };
+            rowHeight = 35;
+            width = +svg.attr("width") - margin.left - margin.right;
+            height = (dataInt.length + 1) * rowHeight;
+            oldHeight = Globals.Height;
+            textPadding = 5;
+            barHeight = 25;
+            rankWidth = width / 8;
+            categoryWidth = width / 4;
+            countWidth = 5 * width / 16;
+            percentWidth = 5 * width / 16;
+            childOffset = 25;
+            barCenter = rankWidth + categoryWidth + countWidth;
+            triangleSpacing = 15;
+
+            // Initialize Scale Variables /////////////////////////////////////////////////////////////
+            var x = d3.scaleLinear().rangeRound([0, countWidth + percentWidth - 200]);
+
+            x.domain([0, d3.max(dataInt, function(d) {
+                return d.clickcount
+            })]);
+
+            // Misc ///////////////////////////////////////////////////////////////////////////////////
+            // Transition the svg height depending on previous height
+            svg.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .attr("height", height + margin.top + margin.bottom)
+                .on("end", function(d) {
+                    Globals.Height = height;
+                });
+
+            // Reset expanded categories when after a resort
+            if (resetExpanded) {
+                dataInt.forEach(function(d) {
+                    d.expanded = 0;
+                });
+            }
+
+            // Make overarching group /////////////////////////////////////////////////////////////////
+            groupEnter = svg.selectAll("g").data([dataInt]).enter();
+
+            groupEnter.append("g")
+                .attr("class", "gAll");
+
+            gAll = svg.select(".gAll")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+            // Make header row ////////////////////////////////////////////////////////////////////////
+            headGroupEnter = gAll.selectAll(".headRow").data([dataInt]).enter();
+
+            headGroupEnter.append("g")
+                .attr("class", "headRow");
+
+            headRow = gAll.select(".headRow")
+                .attr("transform", "translate(0,0)");
+
+            headEnter = headRow.selectAll("rect").data([dataInt]).enter();
+
+            // Make background rect
+            headEnter.append("rect")
+                .attr("class", "darkBar")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", width)
+                .attr("height", rowHeight);
+
+            // Make rank text & sort rect
+            headEnter.append("text")
+                .text("Rank")
+                .attr("class", "headText")
+                .attr("transform", "translate(" + textPadding + "," + (rowHeight / 2 + textPadding) + ")");
+
+            headEnter.append("rect")
+                .attr("class", "sortRect")
+                .attr("x", (rankWidth - 2 * triangleSpacing))
+                .attr("y", 0)
+                .attr("width", 2 * triangleSpacing)
+                .attr("height", rowHeight)
+                .on("click", function(d) {
+                    if (Globals.Sort == 0) {
+                        sort_clicks_overview(id, 1);
+                    } else {
+                        sort_clicks_overview(id, 0);
+                    }
+                });
+
+            // Make category text & sort rect
+            headEnter.append("text")
+                .text(function(d) {
+                    if (id == "#graph_module_clicks") {
+                        return "Module Clicked";
+                    } else {
+                        return "Result Clicked";
+                    }
+                })
+                .attr("class", "headText")
+                .attr("transform", "translate(" + (rankWidth + textPadding) + "," + (rowHeight / 2 + textPadding) + ")");
+
+            headEnter.append("rect")
+                .attr("class", "sortRect")
+                .attr("x", (rankWidth + categoryWidth - 2 * triangleSpacing))
+                .attr("y", 0)
+                .attr("width", 2 * triangleSpacing)
+                .attr("height", rowHeight)
+                .on("click", function(d) {
+                    if (Globals.Sort == 2) {
+                        sort_clicks_overview(id, 3);
+                    } else {
+                        sort_clicks_overview(id, 2);
+                    }
+                });
+
+            // Make count text
+            headEnter.append("text")
+                .text("Count")
+                .attr("class", "headText")
+                .attr("transform", "translate(" + (rankWidth + categoryWidth + textPadding) + "," + (rowHeight / 2 + textPadding) + ")");
+
+            // Make percent text
+            headEnter.append("text")
+                .text("Percent")
+                .attr("class", "percentText")
+                .attr("transform", "translate(" + (rankWidth + categoryWidth + countWidth + percentWidth - textPadding) + "," + (rowHeight / 2 + textPadding) + ")");
+
+            // Make sort triangles
+            triangles = headRow.selectAll("path").data(sortStates);
+
+            triangles.enter().append("path")
+                .attr("d", triangle)
+                .attr("pointer-events", "none")
+                .attr("transform", function(d, i) {
+                    if (i == 0) {
+                        return "translate(" + (rankWidth - triangleSpacing) + "," + (rowHeight / 2 - textPadding) + ")";
+                    } else if (i == 1) {
+                        return "translate(" + (rankWidth - triangleSpacing) + "," + (rowHeight / 2 + textPadding) + ") rotate(180)";
+                    } else if (i == 2) {
+                        return "translate(" + (rankWidth + categoryWidth - triangleSpacing) + "," + (rowHeight / 2 - textPadding) + ")";
+                    } else if (i == 3) {
+                        return "translate(" + (rankWidth + categoryWidth - triangleSpacing) + "," + (rowHeight / 2 + textPadding) + ") rotate(180)";
+                    }
+                })
+                .merge(triangles)
+                .transition().duration(500)
+                .attr("fill", function(d, i) {
+                    if (d) {
+                        return "steelblue";
+                    } else {
+                        return "lightsteelblue";
+                    }
+                });
+
+            // Make data rows /////////////////////////////////////////////////////////////////////////
+            dataGroupEnter = gAll.selectAll(".dataRows").data([dataInt]).enter();
+
+            dataGroupEnter.append("g")
+                .attr("class", "dataRows");
+
+            dataRows = gAll.select(".dataRows")
+                .attr("transform", "translate(0,0)");
+
+            // Make background rects
+            dataRects = dataRows.selectAll(".darkBar, .lightBar").data(dataInt, key);
+
+            dataRects.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight;
+                });
+            dataRects.exit().remove();
+            dataRects.enter().append("rect")
+                .attr("class", function(d, i) {
+                    if (d.parent) {
+                        return "lightBar";
+                    } else {
+                        return "darkBar";
+                    }
+                })
+                .attr("x", 0)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight;
+                })
+                .attr("width", width)
+                .attr("height", rowHeight);
+
+            // Make rank text
+            dataRanks = dataRows.selectAll(".dataRank").data(dataInt, key);
+
+            dataRanks.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + textPadding + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .text(function(d) {
+                    return d.rank;
+                });
+            dataRanks.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataRanks.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    return d.rank;
+                })
+                .attr("class", "dataRank")
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + textPadding + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make label text
+            dataLabels = dataRows.selectAll(".dataLabel").data(dataInt, key);
+
+            dataLabels.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                });
+            dataLabels.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataLabels.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    if (d.label.length > 25) {
+                        return d.label.slice(0, 20) + "...";
+                    } else {
+                        return d.label;
+                    }
+                })
+                .attr("class", "dataLabel")
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make click text
+            dataClicks = dataRows.selectAll(".dataClick").data(dataInt, key);
+
+            dataClicks.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .text(function(d) {
+                    return d.clickcount;
+                });
+            dataClicks.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataClicks.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    return d.clickcount;
+                })
+                .attr("class", "dataClick")
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make percent text
+            dataPercents = dataRows.selectAll(".dataPercent").data(dataInt, key);
+
+            dataPercents.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + countWidth + percentWidth - textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + countWidth + percentWidth - textPadding - childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .text(function(d) {
+                    return d.percentage + "%";
+                });
+            dataPercents.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataPercents.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    return d.percentage + "%";
+                })
+                .attr("class", "dataPercent")
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + countWidth + percentWidth - textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + countWidth + percentWidth - textPadding - childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make data bars
+            dataBars = dataRows.selectAll(".dataBar, .lightDataBar").data(dataInt, key);
+
+            dataBars.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("x", function(d) {
+                    return barCenter - x(d.clickcount) / 2;
+                })
+                .attr("width", function(d) {
+                    return x(d.clickcount);
+                });
+            dataBars.exit().transition().duration(500)
+                .attr("x", barCenter)
+                .attr("width", 0)
+                .remove();
+            dataBars.enter().append("rect")
+                .attr("class", function(d) {
+                    if (!d.parent) {
+                        return "dataBar";
+                    } else {
+                        return "lightDataBar";
+                    }
+                })
+                .attr("x", function(d) {
+                    return barCenter;
+                })
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return 0;
+                })
+                .attr("height", barHeight)
+                .style("cursor", function(d) {
+                    if (id == "#graph_module_clicks" && !d.parent) {
+                        return "pointer";
+                    } else {
+                        return "auto";
+                    }
+                })
+                .on("click", function(d) { expand(d,id) })
+                .transition().delay(750).duration(500)
+                .attr("x", function(d) {
+                    return barCenter - x(d.clickcount) / 2;
+                })
+                .attr("width", function(d) {
+                    return x(d.clickcount);
+                });
+
+            // Add borders ////////////////////////////////////////////////////////////////////////////
+            lightBorder = gAll.selectAll(".lightBorder").data([dataInt]);
+
+            lightBorder.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("height", height);
+            lightBorder.exit().remove();
+            lightBorder.enter().append("rect")
+                .attr("class", "lightBorder")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", width)
+                .attr("height", height);;
+
+            darkBorder = gAll.selectAll(".darkBorder").data([dataInt]);
+
+            darkBorder.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(500)
+                .attr("height", height - rowHeight);
+            darkBorder.exit().remove();
+            darkBorder.enter().append("rect")
+                .attr("class", "darkBorder")
+                .attr("x", 0)
+                .attr("y", rowHeight)
+                .attr("width", width)
+                .attr("height", height - rowHeight);
+        }
+    }
+
+    function expand(d, id) {
+        if (id == "#graph_module_clicks" && !d.expanded && !d.parent) {
+            d.expanded = 1;
+            load_details(d.label, id);
+        } else if (id == "#graph_module_clicks" && d.expanded && !d.parent) {
+            d.expanded = 0;
+            remove_details(d.label, id);
+        }
+    }
+
+    function sort_clicks_overview(id, sort) {
+        if (AppStatsGlobals[id].Data.length != AppStatsGlobals[id].OriginalData.length) { // If details are present, those must be removed before resort
+            // Go back to original data set (no details)
+            AppStatsGlobals[id].Data = AppStatsGlobals[id].OriginalData.sort(function(a, b) {
+                return determine_sort(AppStatsGlobals[id].Sort, a, b)
+            });
+
+            // Resort data after delay
+            setTimeout(function() {
+                AppStatsGlobals[id].Data = AppStatsGlobals[id].OriginalData.sort(function(a, b) {
+                    return determine_sort(sort, a, b)
+                });
+                draw_graph_clicks_overview(id, true);
+            }, 750);
+        } else { // Otherwise, you can just resort the data
+            AppStatsGlobals[id].Data = AppStatsGlobals[id].OriginalData.sort(function(a, b) {
+                return determine_sort(sort, a, b)
+            });
+        }
+
+        // Update global sort
+        AppStatsGlobals[id].Sort = sort;
+        draw_graph_clicks_overview(id, true);
+    }
+
+    function determine_sort(sort, a, b) {
+        switch (sort) {
+            case 0: return d3.ascending(a.rank, b.rank);
+            case 1: return d3.ascending(b.rank, a.rank);
+            
+            case 2: return d3.ascending(a.label, b.label);
+            case 3: return d3.ascending(b.label, a.label);
+        }
+    }
+
+    function load_details(category, id) {
+        var updateData = _.cloneDeep(AppStatsGlobals[id].Data);
+        var from = $("#from").datepicker("getDate");
+        var to = new Date($("#to").datepicker("getDate").getTime() + 1000 * 60 * 60 * 24);
+        $.ajax({
+            type: "GET",
+            contentType: "application/json; charset=utf-8",
+            url: '<%= url_helper.data_module_details_path %>',
+            dataType: "json",
+            data: {
+                "category": category,
+                "start_date": from,
+                "end_date": to
+            },
+            success: function(detailSet) {
+                var detailData = _.cloneDeep(detailSet);
+                var index = _.findIndex(updateData, {
+                    "label": category
+                });
+                updateData = _.concat(_.slice(updateData, 0, index + 1), detailData, _.slice(updateData, index + 1, updateData.length));
+
+                AppStatsGlobals[id].Data = updateData;
+                draw_graph_clicks_overview(id, false);
+            },
+            error: function(result) {
+                error();
+            }
+        });
+    }
+
+    function remove_details(category, id) {
+        var updateData = _.cloneDeep(AppStatsGlobals[id].Data);
+        var startIndex = _.findIndex(updateData, {
+            "label": category
+        });
+        var endIndex = startIndex + 1;
+        while (endIndex < updateData.length && updateData[endIndex].parent) {
+            endIndex++;
+        }
+        updateData = _.concat(_.slice(updateData, 0, startIndex + 1), _.slice(updateData, endIndex, updateData.length));
+
+        AppStatsGlobals[id].Data = updateData;
+        draw_graph_clicks_overview(id, false);
+    }
+
+})();