* [Dashboards/Pie] On dashboards, pie chart widgets now show the cate…

…gory counts in the legend when enabled. Fixes #886
jstanden · Feb 5, 2019 · 4b61ea2 · 4b61ea2
1 parent f63eace
commit 4b61ea2
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 2 deletions.
diff --git a/features/cerberusweb.core/templates/internal/profiles/widgets/chart/pie/render.tpl b/features/cerberusweb.core/templates/internal/profiles/widgets/chart/pie/render.tpl
@@ -1,4 +1,5 @@
 <div id="widget{$widget->id}"></div>
+<div id="widget{$widget->id}Legend" style="text-align:center;line-height:1.5em;"></div>
 
 <script type="text/javascript">
 $(function() {
@@ -15,12 +16,62 @@ $(function() {
 			var $widget = $('#widget{$widget->id}');
 			
 			var config_json = {$config_json nofilter};
+			var chart = null;
 			
 			config_json.tooltip.format.value = function (value, ratio, id, index) {
 				return d3.format(',')(value) + ' (' + d3.format('.1%')(ratio) + ')';
 			}
 			
-			var chart = c3.generate(config_json);
+			if(config_json && config_json.legend && config_json.legend.show) {
+				config_json.legend.show = false;
+				
+				chart = c3.generate(config_json);
+				
+				d3.select('#widget{$widget->id}Legend').selectAll('div')
+					.data(chart.data())
+					.enter()
+						.append('div')
+						.attr('data-id', function (result) { return result.id; })
+						.each(function(result, i) {
+							var $this = d3.select(this)
+								.style('display', 'inline-block')
+								.style('cursor', 'pointer')
+								.on('mouseover', function (result) {
+									chart.focus(result.id);
+								})
+								.on('mouseout', function (result) {
+									chart.revert();
+								})
+								.on('click', function (result) {
+									//chart.toggle(result.id);
+								})
+								;
+							
+							var $badge = $this.append('div')
+								.style('display', 'inline-block')
+								.style('vertical-align', 'middle')
+								.style('width', '1em')
+								.style('height', '1em')
+								.style('background-color', chart.color(result.id))
+								;
+							
+							var $text = $this.append('span')
+								.style('vertical-align', 'middle')
+								.style('margin', '0px 0px 0px 5px')
+								.style('font-weight', 'bold')
+								.text(result.id)
+								;
+							
+							var $text = $this.append('span')
+								.style('vertical-align', 'middle')
+								.style('margin', '0px 1em 0px 2px')
+								.text('(' + d3.format(',')(result.values[0].value) + ')')
+								;
+						})
+						;
+			} else {
+				chart = c3.generate(config_json);
+			}
 			
 		} catch(e) {
 			console.error(e);

diff --git a/features/cerberusweb.core/templates/internal/workspaces/widgets/chart/pie/render.tpl b/features/cerberusweb.core/templates/internal/workspaces/widgets/chart/pie/render.tpl
@@ -1,4 +1,5 @@
 <div id="widget{$widget->id}"></div>
+<div id="widget{$widget->id}Legend" style="text-align:center;line-height:1.5em;"></div>
 
 <script type="text/javascript">
 $(function() {
@@ -15,12 +16,62 @@ $(function() {
 			var $widget = $('#widget{$widget->id}');
 			
 			var config_json = {$config_json nofilter};
+			var chart = null;
 			
 			config_json.tooltip.format.value = function (value, ratio, id, index) {
 				return d3.format(',')(value) + ' (' + d3.format('.1%')(ratio) + ')';
 			}
 			
-			var chart = c3.generate(config_json);
+			if(config_json && config_json.legend && config_json.legend.show) {
+				config_json.legend.show = false;
+				
+				chart = c3.generate(config_json);
+				
+				d3.select('#widget{$widget->id}Legend').selectAll('div')
+					.data(chart.data())
+					.enter()
+						.append('div')
+						.attr('data-id', function (result) { return result.id; })
+						.each(function(result, i) {
+							var $this = d3.select(this)
+								.style('display', 'inline-block')
+								.style('cursor', 'pointer')
+								.on('mouseover', function (result) {
+									chart.focus(result.id);
+								})
+								.on('mouseout', function (result) {
+									chart.revert();
+								})
+								.on('click', function (result) {
+									//chart.toggle(result.id);
+								})
+								;
+							
+							var $badge = $this.append('div')
+								.style('display', 'inline-block')
+								.style('vertical-align', 'middle')
+								.style('width', '1em')
+								.style('height', '1em')
+								.style('background-color', chart.color(result.id))
+								;
+							
+							var $text = $this.append('span')
+								.style('vertical-align', 'middle')
+								.style('margin', '0px 0px 0px 5px')
+								.style('font-weight', 'bold')
+								.text(result.id)
+								;
+							
+							var $text = $this.append('span')
+								.style('vertical-align', 'middle')
+								.style('margin', '0px 1em 0px 2px')
+								.text('(' + d3.format(',')(result.values[0].value) + ')')
+								;
+						})
+						;
+			} else {
+				chart = c3.generate(config_json);
+			}
 			
 		} catch(e) {
 			console.error(e);