IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph: changed style of legend table mode to full width table and with headers, #1030

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-11-07 14:20:58 +01:00
parent cd21fa7016
commit aa87d8eb22
3 changed files with 36 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/panels/graph/axisEditor.html
View File

@ -43,7 +43,6 @@
<editor-opt-bool text="Show legend" model="panel.legend.show" change="get_data();"></editor-opt-bool> <editor-opt-bool text="Show legend" model="panel.legend.show" change="get_data();"></editor-opt-bool>
<editor-opt-bool text="Include values" model="panel.legend.values" change="render()"></editor-opt-bool> <editor-opt-bool text="Include values" model="panel.legend.values" change="render()"></editor-opt-bool>
<editor-opt-bool text="Align as table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool> <editor-opt-bool text="Align as table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool>
<editor-opt-bool text="Big table mode" model="panel.legend.bigTableMode" change="render()"></editor-opt-bool>
<editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool> <editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool>
</div> </div>

15
src/app/panels/graph/legend.js
View File

@ -65,16 +65,17 @@ function (angular, app, _, kbn, $) {
$container.toggleClass('graph-legend-table', panel.legend.alignAsTable); $container.toggleClass('graph-legend-table', panel.legend.alignAsTable);
if (panel.legend.bigTableMode) { if (panel.legend.alignAsTable) {
$container.toggleClass('graph-legend-big-table', true);
var header = '<tr>'; var header = '<tr>';
header += '<th></th>'; header += '<th></th>';
header += '<th></th>'; header += '<th></th>';
header += '<th>min</th>'; if (panel.legend.values) {
header += '<th>max</th>'; if (panel.legend.min) { header += '<th>min</div>'; }
header += '<th>avg</th>'; if (panel.legend.max) { header += '<th>max</div>'; }
header += '<th>current</th>'; if (panel.legend.avg) { header += '<th>avg</div>'; }
header += '<th>total</th>'; if (panel.legend.current) { header += '<th>current</div>'; }
if (panel.legend.total) { header += '<th>total</div>'; }
}
header += '</tr>'; header += '</tr>';
$container.append($(header)); $container.append($(header));
} }

74
src/css/less/graph.less
View File

@ -53,6 +53,8 @@
.graph-legend-table { .graph-legend-table {
display: table; display: table;
width: 100%;
margin: 0;
.graph-legend-series { .graph-legend-series {
display: table-row; display: table-row;
@ -63,73 +65,53 @@
} }
} }
.graph-legend-alias {
float: none;
display: table-cell;
white-space: nowrap;
}
.graph-legend-icon {
display: table-cell;
float: none;
white-space: nowrap;
padding: 0 4px;
top: 2px;
}
.graph-legend-value {
float: none;
display: table-cell;
white-space: nowrap;
padding-left: 15px;
}
}
.graph-legend-big-table {
width: 100%;
margin: 0;
td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value { td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
padding: 2px 10px; float: none;
display: table-cell;
white-space: nowrap; white-space: nowrap;
padding: 2px 10px;
text-align: right; text-align: right;
border-bottom: 1px solid @grafanaListBorderBottom; border-bottom: 1px solid @grafanaListBorderBottom;
&:first-child {
text-align: left;
}
&:last-child td {
border: none;
}
} }
.graph-legend-icon { .graph-legend-icon {
width: 5px; width: 5px;
padding-right: 0; padding: 0;
top: 0;
.icon-minus {
position: relative;
top: 2px;
}
}
.graph-legend-value {
padding-left: 15px;
} }
.graph-legend-alias { .graph-legend-alias {
padding-left: 7px;
text-align: left; text-align: left;
width: 95%; width: 95%;
} }
.graph-legend-series:nth-child(odd) {
background-color: @grafanaListAccent;
}
.graph-legend-value {
&.current, &.max, &.min, &.total, &.avg {
&:before {
content: '';
}
}
}
th { th {
text-align: right; text-align: right;
padding: 5px 10px; padding: 5px 10px;
font-weight: bold; font-weight: bold;
color: @blue color: @blue
} }
.graph-legend-series:nth-child(odd) {
background-color: @grafanaListAccent;
}
.graph-legend-value {
&.current, &.max, &.min, &.total, &.avg {
&:before {
content: '';
}
}
}
} }
.graph-legend-rightside { .graph-legend-rightside {