quick_search-core 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 945a512b7b05c32916eac69f31ae23e60cfd8234
-  data.tar.gz: 59e982a4f144a577864dc288d76f9540126da661
+  metadata.gz: 9207dd409ceea89a6d272bda5ddf20c09bdcc778
+  data.tar.gz: ef41de760151b03afd8c87f68ca2ef76a5064eaa
 SHA512:
-  metadata.gz: 375061e582cdd20159480052993b435759274b0bb2cf25c36deeb5bc48b6eb19e169fbd690b75e7a1b2a70362665c496b76ba4b1c65fae730952acf5fbbf78d8
-  data.tar.gz: 37bf50794ae589a11245b7490b99e50d14514a5e97acfa6d468adbea0cb91e050322956bcb0f468b67e481c9be96ee82c8760b3fb7df013daf98097faac901e8
+  metadata.gz: c2a877cddf63641e6a4c4b82bc6727f2f795ba4019d5e1a5d0af10f63257bac07711fcc6d9ea9740b6a30152046cec0433060e21c33ad5d7ff0ce4f9723cfa78
+  data.tar.gz: f55f5a7b5b5184ace5305ed41c0f0b5f528876ca52224864fb049f530d589409fa364a817971e6c4f71aa1de83e3e09fbd8beecf835796143516be0e785236a2

data/README.md

@@ -9,7 +9,7 @@
 
 QuickSearch is a customized federated search tool designed to connect people to a variety of library resources, services, and tools. QuickSearch is designed to complement and increase use of existing dedicated library resource discovery tools, such as the catalog, electronic resource search, and subject guides/portals, by directing people to them via an intuitive search interface. The aim of QuickSearch is to provide people with a quick and easy way to find the information they need.
 
-For more information about NCSU Libraries' QuickSearch and the history of the project, see: http://www.lib.ncsu.edu/reports/quicksearch
+For more information about NCSU Libraries' QuickSearch and the history of the project, see: http://www.lib.ncsu.edu/projects/quicksearch
 
 For NCSU Libraries' implementation of QuickSearch, see:
 http://search.lib.ncsu.edu
@@ -39,8 +39,8 @@ development.
 
 - Rails 5.0
 - Ruby 2.2.2+ or 2.3.x
-- MySQL development headers (mysql-devel package on CentOS)
-- qtwebkit development headers (qtwebkit-devel package on CentOS)
+- MySQL development headers (mysql-devel package on CentOS, libmysqlclient-dev on Ubuntu)
+- qtwebkit development headers (qtwebkit-devel package on CentOS, libqtwebkit-dev on Ubuntu)
 
 #### Instructions
 
@@ -70,7 +70,7 @@ configuring QuickSearch, see: [Configuring QuickSearch](docs/configuration.md)
 
 ##### Start the server:
 
-    bundle exec rails s
+    rails s
 
 ##### QuickSearch will be available at http://localhost:3000/
 
@@ -98,9 +98,9 @@ far. Feel free to submit a pull request to add to this list.
 |wikipedia               |gem 'quick_search-wikipedia_searcher'          |[quick_search-wikipedia_searcher](https://www.github.com/ncsu-libraries/quick_search-wikipedia_searcher)       |
 |OpenLibrary             |gem 'quick_search-open_library_searcher'       |[quick_search-open_library_searcher](https://www.github.com/ncsu-libraries/quick_search-open_library_searcher) |
 |Placeholder           |gem 'quick_search-placeholder_searcher'       |[quick_search-placeholder_searcher](https://www.github.com/ncsu-libraries/quick_search-placeholder_searcher) |
-|Summon                  |Coming soon                                    |                                   |
+|Summon                  |gem 'quick_search-summon_searcher'               |[quick_search-summon_searcher](https://www.github.com/ncsu-libraries/quick_search-summon_searcher) |
 |NCSU Libraries' Catalog |Coming soon                                    |                                   |
-
+|ContentDM               |gem 'quick_search-contentdm'                   | [quick_search-contentdm](https://github.com/tulibraries/quick_search-contentdm)                       |
 
 
 ### Themes
@@ -150,6 +150,7 @@ QuickSearch (listed in alphabetical order)
 - Nushrat Khan
 - Cory Lown
 - Jason Ronallo
+- Ryan West
 
 ## License
 

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

@@ -12,9 +12,18 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require d3.min
+//= require lodash.min
 //= require quick_search/google_analytics
 //= require quick_search/event_tracking
 //= require quick_search/xhr_search
 //= require quick_search/quicksearch
 //= require quick_search/appstats
+//= require quick_search/appstats_clicks_overview
+//= require quick_search/appstats_general_statistics
+//= require quick_search/appstats_top_searches
+//= require quick_search/appstats_spelling_suggestions
+//= require quick_search/appstats_best_bets
+//= require quick_search/appstats_sessions_overview
+//= require quick_search/appstats_sessions_details
 <%= require_asset(QuickSearch::Engine::APP_CONFIG['theme']) %>

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

@@ -0,0 +1,73 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+(function() {
+
+	$(function() {
+		$("#appstats-date-showhide").click(function() {
+			$("#appstats-date-filter").toggle();
+		});
+	});
+
+})();
+
+$(document).on("turbolinks:load", function() {
+	var dateFormat = "mm/dd/yy",
+		from = $("#from").datepicker({
+			defaultDate: "-180d",
+			maxDate: 0,
+			changeMonth: true,
+			changeYear: true,
+			numberOfMonths: 1
+		})
+		.on("change", function() {
+			to.datepicker("option", "minDate", getDate(this));
+		}),
+		to = $("#to").datepicker({
+			defaultDate: "+0",
+			maxDate: 0,
+			changeMonth: true,
+			changeYear: true,
+			numberOfMonths: 1
+		})
+		.on("change", function() {
+			from.datepicker("option", "maxDate", getDate(this));
+		});
+
+		$("#from").datepicker('setDate', new Date(new Date() - 180*24*60*60*1000));
+		$("#to").datepicker('setDate', new Date());
+		var number = document.getElementById("num");
+		if (number) { 
+			number.onkeydown = function(e) {
+				console.log(e.keyCode);
+			    if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8)) {
+			        return false;
+			    }
+			};
+			number.value = "20"; 
+		}
+
+	function getDate(element) {
+		var date;
+		try {
+			date = $.datepicker.parseDate(dateFormat, element.value);
+		} catch (error) {
+			date = null;
+		}
+
+		return date;
+	}
+});
+
+function lighten() {
+	var id = "#" + event.target.id;
+	if (id != "#") {
+		d3.select(id).select(".areaMini").style("fill", "lightsteelblue");
+	}
+}
+
+function darken() {
+	var id = "#" + event.target.id;
+	if (id != "#") {
+		d3.select(id).select(".areaMini").style("fill", "steelblue");
+	}
+}

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

@@ -0,0 +1,905 @@
+<% url_helper = QuickSearch::Engine.routes.url_helpers %>
+
+(function() {
+    var Globals = {};
+
+    $(document).on("turbolinks:load", function() {
+        if ($("#graph_best_bets").length) {
+            d3.select("#bbIconContainer").append("i")
+                .attr("class", "fa fa-spinner fa-spin fa-5x fa-fw big-icon")
+                .attr("id", "bbIcon");
+            // 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));
+                if (document.getElementById("num").value>200) { document.getElementById("num").value = "20"; } 
+                $.ajax({
+                    type: "GET",
+                    contentType: "application/json; charset=utf-8",
+                    url: '<%= url_helper.data_best_bets_path %>',
+                    dataType: "json",
+                    data: {
+                        "start_date": from,
+                        "end_date": to,
+                        "num_results": (document.getElementById("num").value>200) ? Globals.Data.length : document.getElementById("num").value
+                    },
+                    success: function(bestBetDataSet) {
+                        var bestBetData = _.cloneDeep(bestBetDataSet);
+                        Globals.OriginalData = bestBetData;
+                        Globals.Data = bestBetData;
+                        sort_search_data(Globals.Sort);
+                    },
+                    error: function(result) {
+                        error();
+                    }
+                });
+            });
+            $.ajax({
+                type: "GET",
+                contentType: "application/json; charset=utf-8",
+                url: '<%= url_helper.data_best_bets_path %>',
+                dataType: "json",
+                success: function(bestBetDataSet) {
+                    d3.select("#bbIcon").transition().duration(250)
+                        .style("opacity", .000001)
+                        .remove();
+                    var bestBetData = _.cloneDeep(bestBetDataSet);
+                    Globals.OriginalData = bestBetData;
+                    Globals.Data = bestBetData;
+                    Globals.Sort = 0;
+                    Globals.Height = 450;
+                    draw_graph_best_bets(false);
+                },
+                error: function(result) {
+                    error();
+                }
+            });
+        }
+    });
+
+    function error() {
+        console.log("Error retrieving data");
+    }
+
+    function draw_graph_best_bets(resetExpanded) {
+        if ($("#graph_best_bets").length) {
+            // General Variables
+            var svg;            // SVG to contain graph
+            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 serveWidth;     // Width of serves column
+            var clickWidth;     // Width of click column
+            var ratioWidth;     // Width of ratio column
+            var childOffset;    // Horizontal offset for child elements drawn on element expansion
+            var serveBarStart;  // Beginning x for serves data bar
+            var clickBarStart;  // Beginning x for click data bar
+            var ratioBarStart;  // Beginning x for ratio data bar
+            var triangleSpacing;// Space around triangular sort buttons
+            // Scale Variables
+            var serveScale;     // Scale for serve count data bar
+            var clickScale;     // Scale for click count data bar
+            var ratioScale;     // Scale for ratio 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 dataServes;     // Serve text
+            var dataClicks;     // Click text
+            var dataRatios;     // Ratio text
+            var serveBar;       // Serve count data bar
+            var clickBar;       // Click count data bar
+            var ratioBar;       // Ratio data bar
+            var lightBorder;    // Light border (surrounds all elements)
+            var darkBorder;     // Dark border (surrounds data elements)
+
+            // Initialize General Variables ///////////////////////////////////////////////////////////
+            svg = d3.select("#graph_best_bets");
+
+            dataInt = Globals.Data;
+
+            sortStates = [0, 0, 0, 0, 0, 0, 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 = 2 * width / 20;
+            categoryWidth = 5 * width / 20;
+            serveWidth = 4 * width / 20;
+            clickWidth = 4 * width / 20;
+            ratioWidth = 5 * width / 20;
+            childOffset = 20;
+            serveBarStart = rankWidth + categoryWidth + 4 * textPadding + 13 * d3.max(dataInt, function(d) {
+                return d.serves.toString().length;
+            });
+            clickBarStart = rankWidth + categoryWidth + serveWidth + 4 * textPadding + 13 * d3.max(dataInt, function(d) {
+                return d.clicks.toString().length;
+            });
+            ratioBarStart = rankWidth + categoryWidth + serveWidth + clickWidth + 4 * textPadding + 13 * d3.max(dataInt, function(d) {
+                return d.ratio.toString().length;
+            });
+            triangleSpacing = 15;
+            
+            // Initialize Scale Variables /////////////////////////////////////////////////////////////
+            serveScale = d3.scaleLinear().rangeRound([0, rankWidth + categoryWidth + serveWidth - serveBarStart - triangleSpacing]);
+            serveScale.domain([0, d3.max(dataInt, function(d) {
+                return d.serves;
+            })]);
+
+            clickScale = d3.scaleLinear().rangeRound([0, rankWidth + categoryWidth + serveWidth + clickWidth - clickBarStart - triangleSpacing]);
+            clickScale.domain([0, d3.max(dataInt, function(d) {
+                return d.clicks;
+            })]);
+
+            ratioScale = d3.scaleLinear().rangeRound([0, rankWidth + categoryWidth + serveWidth + clickWidth + ratioWidth - ratioBarStart - triangleSpacing]);
+            ratioScale.domain([0, d3.max(dataInt, function(d) {
+                return d.ratio;
+            })]);
+
+            // 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_search_data(1);
+                    } else {
+                        sort_search_data(0);
+                    }
+                });
+
+            // Make category text & sort rect
+            headEnter.append("text")
+                .text("Best-Bet")
+                .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_search_data(3);
+                    } else {
+                        sort_search_data(2);
+                    }
+                });
+
+            // Make serve text & sort rect
+            headEnter.append("text")
+                .text("Serve Count")
+                .attr("class", "headText")
+                .attr("transform", "translate(" + (rankWidth + categoryWidth + textPadding) + "," + (rowHeight / 2 + textPadding) + ")");
+
+            headEnter.append("rect")
+                .attr("class", "sortRect")
+                .attr("x", (rankWidth + categoryWidth + serveWidth - 2 * triangleSpacing))
+                .attr("y", 0)
+                .attr("width", 2 * triangleSpacing)
+                .attr("height", rowHeight)
+                .on("click", function(d) {
+                    if (Globals.Sort == 4) {
+                        sort_search_data(5);
+                    } else {
+                        sort_search_data(4);
+                    }
+                });
+
+            // Make click text & sort rect
+            headEnter.append("text")
+                .text("Click Count")
+                .attr("class", "headText")
+                .attr("transform", "translate(" + (rankWidth + categoryWidth + serveWidth + textPadding) + "," + (rowHeight / 2 + textPadding) + ")");
+
+            headEnter.append("rect")
+                .attr("class", "sortRect")
+                .attr("x", (rankWidth + categoryWidth + serveWidth + clickWidth - 2 * triangleSpacing))
+                .attr("y", 0)
+                .attr("width", 2 * triangleSpacing)
+                .attr("height", rowHeight)
+                .on("click", function(d) {
+                    if (Globals.Sort == 6) {
+                        sort_search_data(7);
+                    } else {
+                        sort_search_data(6);
+                    }
+                });
+
+            // Make ratio text & sort rect
+            headEnter.append("text")
+                .text("Click/Serve")
+                .attr("class", "headText")
+                .attr("transform", "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + textPadding) + "," + (rowHeight / 2 + textPadding) + ")");
+
+            headEnter.append("rect")
+                .attr("class", "sortRect")
+                .attr("x", (rankWidth + categoryWidth + serveWidth + clickWidth + ratioWidth - 2 * triangleSpacing))
+                .attr("y", 0)
+                .attr("width", 2 * triangleSpacing)
+                .attr("height", rowHeight)
+                .on("click", function(d) {
+                    if (Globals.Sort == 8) {
+                        sort_search_data(9);
+                    } else {
+                        sort_search_data(8);
+                    }
+                });
+
+            // 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)";
+                    } else if (i == 4) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth - triangleSpacing) + "," + (rowHeight / 2 - textPadding) + ")";
+                    } else if (i == 5) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth - triangleSpacing) + "," + (rowHeight / 2 + textPadding) + ") rotate(180)";
+                    } else if (i == 6) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth - triangleSpacing) + "," + (rowHeight / 2 - textPadding) + ")";
+                    } else if (i == 7) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth - triangleSpacing) + "," + (rowHeight / 2 + textPadding) + ") rotate(180)";
+                    } else if (i == 8) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + ratioWidth - triangleSpacing) + "," + (rowHeight / 2 - textPadding) + ")";
+                    } else if (i == 9) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + ratioWidth - 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(750)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight;
+                });
+            dataRects.exit().remove();
+            dataRects.enter().append("rect")
+                .style("opacity", .000001)
+                .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)
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make rank text
+            dataRanks = dataRows.selectAll(".dataRank").data(dataInt, key);
+
+            dataRanks.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .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) + ")"; 
+                    }
+                });
+            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(750)
+                .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) + ")";
+                    }
+                })
+                .text(function(d) {
+                    if (d.label.length > 25) {
+                        return d.label.slice(0, 20) + "...";
+                    } else {
+                        return d.label;
+                    }
+                });
+            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 serve text
+            dataServes = dataRows.selectAll(".dataServe").data(dataInt, key);
+
+            dataServes.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .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.serves;
+                });
+            dataServes.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataServes.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    return d.serves;
+                })
+                .attr("class", "dataServe")
+                .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 click text
+            dataClicks = dataRows.selectAll(".dataClick").data(dataInt, key);
+
+            dataClicks.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .text(function(d) {
+                    return d.clicks;
+                });
+            dataClicks.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataClicks.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    return d.clicks;
+                })
+                .attr("class", "dataClick")
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make ratio text
+            dataRatios = dataRows.selectAll(".dataRatio").data(dataInt, key);
+
+            dataRatios.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .text(function(d) {
+                    return d.ratio + "%";
+                });
+            dataRatios.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            dataRatios.enter().append("text")
+                .style("opacity", .000001)
+                .text(function(d) {
+                    return d.ratio + "%";
+                })
+                .attr("class", "dataRatio")
+                .attr("transform", function(d, i) {
+                    if (!d.parent) {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + textPadding) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    } else {
+                        return "translate(" + (rankWidth + categoryWidth + serveWidth + clickWidth + textPadding + childOffset) + "," + Math.floor((i + 1) * rowHeight + rowHeight / 2 + textPadding) + ")";
+                    }
+                })
+                .transition().delay(750).duration(500)
+                .style("opacity", 1);
+
+            // Make serve bars
+            serveBar = dataRows.selectAll(".serveBar, .lightServeBar").data(dataInt, key);
+
+            serveBar.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return serveScale(d.serves);
+                })
+                .attr("x", function(d) {
+                    return serveBarStart;
+                });
+            serveBar.exit().transition().duration(500)
+                .attr("width", 0)
+                .remove();
+            serveBar.enter().append("rect")
+                .attr("class", function(d) {
+                    if (!d.parent) {
+                        return "serveBar";
+                    } else {
+                        return "lightServeBar";
+                    }
+                })
+                .style("cursor", function(d) {
+                    if (!d.parent) {
+                        return "pointer";
+                    } else {
+                        return "auto";
+                    }
+                })
+                .attr("x", function(d) {
+                    return serveBarStart;
+                })
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return 0;
+                })
+                .attr("height", barHeight)
+                .on("click", function(d) { expand(d) })
+                .transition().delay(750).duration(500)
+                .attr("width", function(d) {
+                    return serveScale(d.serves);
+                });
+
+            // Make click bars
+            clickBar = dataRows.selectAll(".clickBar, .lightClickBar").data(dataInt, key);
+
+            clickBar.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return clickScale(d.clicks);
+                })
+                .attr("x", function(d) {
+                    return clickBarStart;
+                });
+            clickBar.exit().transition().duration(500)
+                .attr("width", 0)
+                .remove();
+            clickBar.enter().append("rect")
+                .attr("class", function(d) {
+                    if (!d.parent) {
+                        return "clickBar";
+                    } else {
+                        return "lightClickBar";
+                    }
+                })
+                .style("cursor", function(d) {
+                    if (!d.parent) {
+                        return "pointer";
+                    } else {
+                        return "auto";
+                    }
+                })
+                .attr("x", function(d) {
+                    return clickBarStart;
+                })
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return 0;
+                })
+                .attr("height", barHeight)
+                .on("click", function(d) { expand(d) })
+                .transition().delay(750).duration(500)
+                .attr("width", function(d) {
+                    return clickScale(d.clicks);
+                });
+
+            // Make ratio bars
+            ratioBar = dataRows.selectAll(".ratioBar , .lightRatioBar").data(dataInt, key);
+
+            ratioBar.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return ratioScale(d.ratio);
+                })
+                .attr("x", function(d) {
+                    return ratioBarStart;
+                });
+            ratioBar.exit().transition().duration(500)
+                .attr("width", 0)
+                .remove();
+            ratioBar.enter().append("rect")
+                .attr("class", function(d) {
+                    if (!d.parent) {
+                        return "ratioBar";
+                    } else {
+                        return "lightRatioBar";
+                    }
+                })
+                .style("cursor", function(d) {
+                    if (!d.parent) {
+                        return "pointer";
+                    } else {
+                        return "auto";
+                    }
+                })
+                .attr("x", function(d) {
+                    return ratioBarStart;
+                })
+                .attr("y", function(d, i) {
+                    return (i + 1) * rowHeight + (rowHeight - barHeight) / 2;
+                })
+                .attr("width", function(d) {
+                    return 0;
+                })
+                .attr("height", barHeight)
+                .on("click", function(d) { expand(d) })
+                .transition().delay(750).duration(500)
+                .attr("width", function(d) {
+                    return ratioScale(d.ratio);
+                });
+
+            // Add borders ////////////////////////////////////////////////////////////////////////////
+            lightBorder = gAll.selectAll(".lightBorder").data([dataInt]);
+
+            lightBorder.transition().delay(function(d) {
+                    if (oldHeight > height) {
+                        return 500;
+                    } else {
+                        return 0;
+                    }
+                })
+                .duration(750)
+                .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(750)
+                .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) {
+        if (!d.expanded && !d.parent) {
+            d.expanded = 1;
+            load_details(d.label);
+        } else if (d.expanded && !d.parent) {
+            d.expanded = 0;
+            remove_details(d.label);
+        }
+    }
+
+    function sort_search_data(sort) {
+        if (Globals.Data.length != Globals.OriginalData.length) { // If details are present, those must be removed before resort
+            // Go back to original data set (no details)
+            Globals.Data = Globals.OriginalData.sort(function(a,b) { return determine_sort(Globals.Sort, a, b) });
+
+            // Resort data after delay
+            setTimeout(function() {
+                Globals.Data = Globals.OriginalData.sort(function(a,b) { return determine_sort(sort, a, b) });
+                draw_graph_best_bets(true);
+            }, 750);
+        } else { // Otherwise, you can just resort the data
+            Globals.Data = Globals.OriginalData.sort(function(a,b) { return determine_sort(sort, a, b) });
+        }
+
+        // Update global sort
+        Globals.Sort = sort;
+        draw_graph_best_bets(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);
+                case 4: return d3.ascending(a.serves,b.serves);
+                case 5: return d3.ascending(b.serves,a.serves);
+                case 6: return d3.ascending(a.clicks,b.clicks);
+                case 7: return d3.ascending(b.clicks,a.clicks);
+                case 8: return d3.ascending(a.ratio,b.ratio);
+                case 9: return d3.ascending(b.ratio,a.ratio);
+            }
+    }
+
+    function load_details(item) {
+        var updateData = _.cloneDeep(Globals.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_best_bets_details_path %>',
+            dataType: "json",
+            data: {
+                "item": item,
+                "start_date": from,
+                "end_date": to
+            },
+            success: function(detailSet) {
+                var detailData = _.cloneDeep(detailSet);
+                var index = _.findIndex(updateData, {
+                    "label": item
+                });
+                updateData = _.concat(_.slice(updateData, 0, index + 1), detailData, _.slice(updateData, index + 1, updateData.length));
+
+                Globals.Data = updateData;
+                draw_graph_best_bets(false);
+            },
+            error: function(result) {
+                error();
+            }
+        });
+    }
+
+    function remove_details(item) {
+        var updateData = _.cloneDeep(Globals.Data);
+        var startIndex = _.findIndex(updateData, {
+            "label": item
+        });
+        var endIndex = startIndex + 1;
+
+        while (endIndex < updateData.length && updateData[endIndex].parent) {
+            endIndex++;
+        }
+        updateData = _.concat(_.slice(updateData, 0, startIndex + 1), _.slice(updateData, endIndex, updateData.length));
+
+        Globals.Data = updateData;
+        draw_graph_best_bets(false);
+    }
+
+})();