Features to control display of graph colors

application/views/office_list.php

@@ -90,23 +90,56 @@
       if ($show_qa_fields) {
         $weighted_measures = array('accessURL_working','accessURL_format','accessURL_html','accessURL_pdf');
 
-        echo '<h3>Percentage Weighting</h3>';
-
+
+
+?>
+
+
+        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseGraph" aria-expanded="false" aria-controls="collapseGraph">
+          Advanced
+        </button>
+        <div class="collapse" id="collapseGraph">
+          <div class="well">
+          <h3>Percentage Weighting</h3>
+
+<?php 
+
         foreach($weighted_measures as $weighted_measure) {
 
+          $color_graph_class = ($weighted_measure == 'accessURL_working') ? 'show-graph' : 'hide-graph';
+
+          echo '<div class="' . $color_graph_class . '">';
           echo '<h4 style="margin-top:2em">' . $section_breakdown->{$weighted_measure}->label . '</h4>';
           echo '<table><tr><td>0%</td>';
 
           for ($count = 0; $count <= 100; $count++) {
             $count = ($count === 0) ? '0.0' : $count;
           ?>
-            <td style="<?php echo metric_status_color($count, $section_breakdown->{$weighted_measure}->success_basis, $section_breakdown->{$weighted_measure}->success_weight); ?>; width:1%"></td>
+            <td style="<?php echo metric_status_color($count, $section_breakdown->{$weighted_measure}->success_basis, $section_breakdown->{$weighted_measure}->success_weight, true); ?>; width:1%"></td>
           <?
           }
-          echo '<td> 100%</td></tr></table>';
+          echo '<td> 100%</td></tr></table></div>';
         }
        ?>
 
+       <button style="margin-top : 1em" id="showcolors">Show all colors</button>
+
+       <script>
+          $( "#showcolors" ).click(function() {
+              $( ".hidden-color" ).each(function( index ) {
+                  $(this).css( "background-color", $(this).data("color") );
+                })
+              $( ".hide-graph" ).each(function( index ) {
+                  $(this).css( "display", "block" );
+                })
+              }
+            )
+
+
+       </script>
+     </div>
+   </div>
+
       <?php   
       }
 

application/views/office_table_inc_view.php

@@ -343,11 +343,19 @@ function status_table_qa($title, $rows, $tracker, $config = null, $sections_brea
 						} else {
 							$metric = $qa_field->value; 	
 						}
+
+						if ($qa_field_name == 'accessURL_html' OR $qa_field_name == 'accessURL_pdf' OR $qa_field_name == 'accessURL_format') {
+							$attribute_open = 'data-color="';
+							$element_class = 'hidden-color';
+						} else {
+							$attribute_open = 'style="background-color : ';
+							$element_class = 'normal-color';
+						}
 
 				?>
 
 
-				<td style="<?php echo metric_status_color($metric, $qa_field->success_basis, $qa_field->success_weight); ?>">
+				<td class="<?php echo $element_class; ?>" <?php echo $attribute_open . metric_status_color($metric, $qa_field->success_basis, $qa_field->success_weight) . '"' ?>>
 					<a href="<?php echo site_url('offices/detail') ?>/<?php echo $office->id . $milestone_url;?><?php echo '#metrics_' . $qa_field_name; ?>">
 						<span>
 							<?php 
@@ -443,7 +451,7 @@ function page_status($data_status, $status_color = null) {
 	return $icon;
 }
 
-function metric_status_color($metric, $success_basis, $weight) {
+function metric_status_color($metric, $success_basis, $weight, $return_property = false) {
 
 	if(empty($metric)) return '';
 
@@ -478,9 +486,10 @@ function metric_status_color($metric, $success_basis, $weight) {
 		}
 
 
+		$hue = round(($value) * 120);
 
-		$hue = round(($value) * 120);		
-		$status_color = "background-color : hsl($hue, $saturation, $lightness);";
+		$return_property = ($return_property) ? 'background-color : ' : '';
+		$status_color = $return_property . "hsl($hue, $saturation, $lightness)";
 	} else {
 		$status_color = '';
 	}

css/main.css

@@ -305,6 +305,10 @@ a.info-icon span {
 	height : .25em;
 }
 
+.hide-graph {
+	display : none;
+}
+
 p+h4, p+h5 {
 	margin-top : 2em;
 }