Update charts when sorting a column from the HTML table.

kknet · Mar 4, 2017 · ccd08e9 · ccd08e9
1 parent 5ade5e4
commit ccd08e9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 25 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -986,18 +986,24 @@ GoAccess.Charts = {
 		}
 	},
 
+	// Reload the given chart data
+	reloadChart: function (chart, panel) {
+		var subItems = GoAccess.Tables.getSubItemsData(panel);
+		var data = (subItems.length ? subItems : GoAccess.getPanelData(panel).data).slice(0);
+
+		d3.select("#chart-" + panel)
+			.datum(this.processChartData(this.getPanelData(panel, data)))
+			.call(chart.width($("#chart-" + panel).offsetWidth));
+	},
+
 	reloadCharts: function () {
 		this.iter(function (chart, panel) {
-			var subItems = GoAccess.Tables.getSubItemsData(panel);
-			var data = (subItems.length ? subItems : GoAccess.getPanelData(panel).data).slice(0);
-
-			d3.select("#chart-" + panel)
-				.datum(this.processChartData(this.getPanelData(panel, data)))
-				.call(chart.width($("#chart-" + panel).offsetWidth));
+			this.reloadChart(chart, panel);
 		}.bind(this));
 		GoAccess.AppState.updated = false;
 	},
 
+	// Only redraw charts with current data
 	redrawCharts: function () {
 		this.iter(function (chart, panel) {
 			d3.select("#chart-" + panel).call(chart.width($("#chart-" + panel).offsetWidth));
@@ -1007,7 +1013,7 @@ GoAccess.Charts = {
 	initialize: function () {
 		this.renderCharts(GoAccess.getPanelUI());
 
-		// redraw on scroll & resize
+		// reload on scroll & redraw on resize
 		d3.select(window).on('scroll.charts', debounce(function () {
 			this.reloadCharts();
 		}, 250, false).bind(this)).on('resize.charts', function () {
@@ -1085,6 +1091,8 @@ GoAccess.Tables = {
 		});
 		this.renderThead(panel, GoAccess.getPanelUI(panel));
 		this.renderTable(panel, this.getCurPage(panel));
+
+		GoAccess.Charts.reloadChart(GoAccess.AppCharts[panel], panel);
 	},
 
 	getDataByKey: function (panel, key) {

diff --git a/resources/js/charts.js b/resources/js/charts.js
@@ -1,3 +1,14 @@
+/**
+ *    ______      ___
+ *   / ____/___  /   | _____________  __________
+ *  / / __/ __ \/ /| |/ ___/ ___/ _ \/ ___/ ___/
+ * / /_/ / /_/ / ___ / /__/ /__/  __(__  |__  )
+ * \____/\____/_/  |_\___/\___/\___/____/____/
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2009-2017 Gerardo Orellana <hello @ goaccess.io>
+ */
+
 'use strict';
 
 // This is faster than calculating the exact length of each label.
@@ -832,19 +843,19 @@ function BarChart(dualYaxis) {
 			.enter()
 			.append('svg:rect')
 			.attr('class', 'bar')
-			.attr('x', function (d, i) { return xScale(d[0]); })
-			.attr('y', function (d, i) { return innerH(); })
-			.attr('width', function (d, i) { return xScale.rangeBand() / 2; })
 			.attr('height', 0)
-			.transition()
-			.delay(function (d, i) { return i / data.length * 1000; })
-			.duration(500)
-			.attr('y', function (d, i) { return yScale0(d[1]); })
-			.attr('height', function (d, i) { return innerH() - yScale0(d[1]); });
+			.attr('width', function (d, i) { return xScale.rangeBand() / 2; })
+			.attr('x', function (d, i) { return xScale(d[0]); })
+			.attr('y', function (d, i) { return innerH(); });
 		// update
 		bars
 			.attr('width', xScale.rangeBand() / 2)
-			.attr('x', function (d) { return xScale(d[0]) });
+			.attr('x', function (d) { return xScale(d[0]) })
+			.transition()
+			.delay(function (d, i) { return i / data.length * 1000; })
+			.duration(500)
+			.attr('height', function (d, i) { return innerH() - yScale0(d[1]); })
+			.attr('y', function (d, i) { return yScale0(d[1]); });
 		// remove elements
 		bars.exit().remove();
 
@@ -858,19 +869,19 @@ function BarChart(dualYaxis) {
 			.enter()
 			.append('svg:rect')
 			.attr('class', 'bar')
-			.attr('x', function (d) { return (xScale(d[0]) + xScale.rangeBand() / 2) })
-			.attr('y', function (d, i) { return innerH(); })
-			.attr('width', function (d, i) { return xScale.rangeBand() / 2; })
 			.attr('height', 0)
-			.transition()
-			.delay(function (d, i) { return i / data.length * 1000; })
-			.duration(500)
-			.attr('y', function (d, i) { return yScale1(d[2]); })
-			.attr('height', function (d, i) { return innerH() - yScale1(d[2]); });
+			.attr('width', function (d, i) { return xScale.rangeBand() / 2; })
+			.attr('x', function (d) { return (xScale(d[0]) + xScale.rangeBand() / 2) })
+			.attr('y', function (d, i) { return innerH(); });
 		// update
 		bars
 			.attr('width', xScale.rangeBand() / 2)
-			.attr('x', function (d) { return (xScale(d[0]) + xScale.rangeBand() / 2) });
+			.attr('x', function (d) { return (xScale(d[0]) + xScale.rangeBand() / 2) })
+			.transition()
+			.delay(function (d, i) { return i / data.length * 1000; })
+			.duration(500)
+			.attr('height', function (d, i) { return innerH() - yScale1(d[2]); })
+			.attr('y', function (d, i) { return yScale1(d[2]); });
 		// remove elements
 		bars.exit().remove();
 	}