Custom legend and hide to flot one

public/js/site.js

@@ -24,6 +24,7 @@ $(document).ready(function(){
     var zoomResetButton = $('[data-role="zoom-reset"]');
     var graphContainer = $('[data-role="graph"]');
     var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]');
+    var legend = graphContainer.parent('.graph-container').find('.dashedLegend');
 
     var graphOptions = {
         series: {
@@ -61,16 +62,16 @@ $(document).ready(function(){
                 left: 1
             }
         },
-        legend: {
-            labelFormatter: function(label, series) {
-                return '<span id="' + label +'Legend">' + label + '</span>';
-            }
-        },
         selection: {
             mode: 'x'
         }
     };
 
+    // have we declared a custom legend
+    if (legend.length === 1) {
+        $('body').addClass('custom-legend');
+    }
+
     // Toggle appearance of lists of error/warnings/notices
     expandLink.click( function(){
 		$(this).next().slideToggle('slow', function(){});
@@ -173,76 +174,8 @@ $(document).ready(function(){
         });
     }
 
-    function newLegend () {
-        var errors = graphContainer.find('.legend #ErrorsLegend');
-        var warnings = graphContainer.find('.legend #WarningsLegend');
-        var notices = graphContainer.find('.legend #NoticesLegend');
-        var legend = graphContainer.find('.legend');
-        var table = graphContainer.find('table');
-
-        var tableStyle = table.attr('style');
-        legend.attr('style', tableStyle);
-        table.removeAttr('style');
-        table.prev('div').remove();
-
-        if (errors.length) {
-            var errorIcon = errors.parent().prev().children('div');
-            errorIcon.css({
-                padding: 3
-            });
-            errorIcon.find('div').css({
-                width: '25px',
-                borderWidth: 3,
-                borderBottom: 0,
-                borderLeft: 0,
-                borderRight: 0,
-            });
-        }
-
-        if (warnings.length) {
-            var warningIcon = warnings.parent().prev().children('div');
-            warningIcon.addClass('clearfix').css({
-                padding: 3
-            });
-            warningIcon.find('div').clone().appendTo(warningIcon[0]);
-            warningIcon.find('div').css({
-                float: 'left',
-                width: '10px',
-                borderWidth: 3,
-                borderBottom: 0,
-                borderLeft: 0,
-                borderRight: 0,
-            });
-            warningIcon.find('div:first-child').css({
-                marginRight: '5px'
-            });
-        }
-
-        if (notices.length) {
-            var noticeIcon = notices.parent().prev().children('div');
-            noticeIcon.addClass('clearfix').css({
-                padding: 3
-            });
-            noticeIcon.find('div').clone().appendTo(noticeIcon[0]).end()
-                .clone().appendTo(noticeIcon[0]);
-            noticeIcon.find('div').css({
-                float: 'left',
-                width: '5px',
-                marginRight: '5px',
-                borderWidth: 3,
-                borderBottom: 0,
-                borderLeft: 0,
-                borderRight: 0,
-            });
-            noticeIcon.find('div:last-child').css({
-                marginRight: '0'
-            });
-        }
-    }
-
     function plotGraphData () {
         $.plot(graphContainer, getData(), graphOptions);
-        newLegend();
     }
 
     function getData() {
@@ -320,16 +253,27 @@ $(document).ready(function(){
 
     function plotAccordingToChoices() {
         var data = [];
+        var labels = [];
         choiceContainer.find('input:checked').each(function () {
             var key = $(this).attr('name');
             if (key && datasets[key]) {
+                labels.push(datasets[key].label);
                 data.push(datasets[key]);
             }
         });
 
+        if (labels.length && legend.length === 1) {
+            legend.find('tr').hide();
+            $.each(labels, function (index, value) {
+                $('.legend' + value).parents('tr').show();
+            });
+            legend.show();
+        } else {
+            legend.hide();
+        }
+
         if (data.length > -1) {
             $.plot(graphContainer, data, graphOptions);
-            newLegend();
         }
     }
 

public/less/site.less

@@ -439,26 +439,66 @@ ul.date-links {
 .tooltip-graph {
 	font-size:12px;
 }
-.legend {
+.custom-legend .legend {
+	display:none !important;
+}
+.dashedLegend {
+	position:absolute;
+	top:14px;
+	right:39px;
+	font-size:smaller;
+	color:#545454;
 	background-color: #fff;
 	background-color: rgba(255, 255, 255, 0.75);
+	display:none;
 }
-.legend table {
+.dashedContainer {
 	background: #fff;
 	border: 1px solid #808080;
 	margin: 5px;
-}
-.legend tr > td:first-child {
-	padding-left: 10px;
-	padding-right: 5px;
-}
-.legend tr > td:last-child {
-	padding-right: 10px;
-}
-.legend tr:first-child > td {
 	padding-top: 5px;
 }
-.legend tr:last-child > td {
+.dashedLegend tr {
+	display: none;
+}
+.dashedLegend .legendColorBox > div:first-child {
+	border: 1px solid rgb(204, 204, 204);
+	padding: 3px;
+}
+.dashedLegend .legendIcon div {
+	height: 0px;
+	border-width: 3px 0px 0px;
+	border-top-style: solid;
+	overflow: hidden;
+}
+.dashedLegend .legendErrors div {
+	width: 25px;
+	border-top-color: rgb(216, 61, 45);
+}
+.dashedLegend .legendWarnings div {
+	width: 10px;
+	border-top-color: rgb(168, 103, 0);
+	float: left;
+}
+.dashedLegend .legendWarnings div:first-child {
+	margin-right: 5px;
+}
+.dashedLegend .legendNotices div {
+	width: 5px;
+	border-top-color: rgb(23, 123, 190);
+	float: left;
+	margin-left: 5px;
+}
+.dashedLegend .legendNotices div:first-child {
+	margin-left: 0;
+}
+.dashedLegend td.legendColorBox {
+	padding-right: 5px;
+	padding-bottom: 5px;
+	padding-left: 10px;
+}
+.dashedLegend td.legendLabel {
+	padding-right: 10px;
 	padding-bottom: 5px;
 }
 

view/partial/graph.html

@@ -20,6 +20,38 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
 		</div>
+		<div class="dashedLegend">
+			<div class="dashedContainer">
+			    <table>
+			        <tbody>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendErrors">
+			                        <div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Errors</td>
+			            </tr>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendWarnings">
+			                        <div></div><div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Warnings</td>
+			            </tr>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendNotices">
+			                        <div></div><div></div><div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Notices</td>
+			            </tr>
+			        </tbody>
+			    </table>
+			</div>
+		</div>
 		<button data-role='zoom-reset' class="btn btn-xs btn-primary pull-right btn-reset hidden">Reset Zoom <i class="glyphicon glyphicon-zoom-out"></i></button>
 	</div>
 </div>