Adjusted dashboard bar chart to fit within block no matter the size and to not squash the bars as more content types are added

tripal/theme/js/tripal.dashboard.js

@@ -1,5 +1,6 @@
-Drupal.behaviors.tripalDashboard = {
-  attach: function (context, settings) {
+(function ($) {
+  Drupal.behaviors.tripalDashboard = {
+    attach: function (context, settings) {
 
 
     /**
@@ -9,13 +10,18 @@ Drupal.behaviors.tripalDashboard = {
      * fData: The data to be rendered in graphs.
      */
 
-    function barchart2(id, data) {
+    function barchart2(id, parent, data) {
         // Set aside 10 colors
         var c10 = d3.scale.category10();
-
-        var m = [30, 100, 10, 120],
-            w = 960 - m[1] - m[3],
-            h = 930 - m[0] - m[2];
+        
+        // Set some default margins.
+        var m = [30, 100, 10, 120];
+        
+        // Set the width of the viewport to fit inside the block.
+        var w = $(parent).width() - m[1] - m[3] - 50;
+        // Set the height to be tall enough to read each legend and surrounding
+        // margins.
+        var h = (data.length * 30) - m[0] - m[2]
 
         var format = d3.format(",.0f");
 
@@ -31,8 +37,6 @@ Drupal.behaviors.tripalDashboard = {
             .append("g")
             .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
-
-
             // Parse numbers, and sort by count.
             data.forEach(function(d) { d.count = +d.count; });
             data.sort(function(a, b) { return b.count - a.count; });
@@ -56,7 +60,7 @@ Drupal.behaviors.tripalDashboard = {
                 .attr("class", "count")
                 .attr("x", function(d) { return x(d.count); })
                 .attr("y", y.rangeBand() / 2)
-                .attr("dx", 35)
+                .attr("dx", 50)
                 .attr("dy", ".35em")
                 .attr("text-anchor", "end")
                 .text(function(d) { return format(d.count); });
@@ -68,8 +72,10 @@ Drupal.behaviors.tripalDashboard = {
             svg.append("g")
                 .attr("class", "y axis")
                 .call(yAxis);
-    }
+      }
 
-    barchart2('#tripal-entity-type-chart', entityCountListing);
-  }
-};
+      // Now insert the bar chart.
+      barchart2('#tripal-entity-type-chart', '#block-tripal-content-type-barchart', entityCountListing);
+    }
+  };
+}) (jQuery);

tripal/tripal.module

@@ -671,7 +671,7 @@ function tripal_block_info() {
     ),
   );
   $blocks['content_type_barchart'] = array(
-    'info' => t('Tripal Content Type Count'),
+    'info' => t('Published Tripal Content'),
     'visibility' => BLOCK_VISIBILITY_LISTED,
     'pages' => 'admin/dashboard',
     'status' => TRUE,
@@ -725,9 +725,10 @@ function tripal_block_view($delta = ''){
         ->fetchAll();
 
       $entity_count_listing = array();
+
       // The number of entities per content type.
       foreach($entity_types as $entity_types => $entity_type){
-        $result = db_select('chado_'.$entity_type->name, 'et')
+        $result = db_select('chado_' . $entity_type->name, 'et')
           ->fields('et')
           ->execute();
         $number_of_entities = $result->rowCount();
@@ -735,7 +736,6 @@ function tripal_block_view($delta = ''){
           'name' => $entity_type->label,
           'count' => $number_of_entities,
         );
-
       }
       tripal_add_d3js();
       drupal_add_js(drupal_get_path ('module', 'tripal') . '/theme/js/tripal.dashboard.js');
@@ -744,7 +744,7 @@ function tripal_block_view($delta = ''){
       drupal_add_js("var entityCountListing = " . json_encode($entity_count_listing) . ";", array('type' => 'inline'));
 
       $output = "<div id=\"tripal-entity-types\" class=\"tripal-entity-types-pane\">
-            <p>A list of the Tripal Content Types and the number of each.</p>
+            <p>A list of the published Tripal content types and the number of each.</p>
             <div id=\"tripal-entity-type-chart\"></div>
           </div>";