mirror of
https://github.com/pa11y/pa11y-dashboard.git
synced 2025-09-24 14:21:13 +00:00
Custom legend and hide to flot one
This commit is contained in:
Alex Kilgour
2
public/css/site.min.css
vendored
2
public/css/site.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
2
public/js/site.min.js
vendored
2
public/js/site.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user