Skip to content

N
nexpie-grafana-theme
Commit 44b7a261 by Torkel Ödegaard
Options

fix(graph): fix for table legend and scroll, fixes #7204, fixes #6628

parent f4e9bd50
Showing with 562 additions and 106 deletions
public/app/plugins/app/testdata/dashboards/graph_last_1h.json
{ {
"revision": 6,
"title": "TestData - Graph Panel Last 1h",
"tags": [
"grafana-test"
],
"style": "dark",
"timezone": "browser",
"editable": true,
"sharedCrosshair": false,
"hideControls": false,
"time": {
"from": "2016-11-16T16:59:38.294Z",
"to": "2016-11-16T17:09:01.532Z"
},
"timepicker": {
"refresh_intervals": [
"5s",
"10s",
"30s",
"1m",
"5m",
"15m",
"30m",
"1h",
"2h",
"1d"
],
"time_options": [
"5m",
"15m",
"1h",
"6h",
"12h",
"24h",
"2d",
"7d",
"30d"
]
},
"templating": {
"list": []
},
"annotations": { "annotations": {
"list": [] "list": []
}, },
"refresh": false, "editable": true,
"schemaVersion": 13,
"version": 4,
"links": [],
"gnetId": null, "gnetId": null,
"graphTooltip": 0,
"hideControls": false,
"links": [],
"refresh": false,
"revision": 7,
"rows": [ "rows": [
{ {
"collapse": false, "collapse": false,
"editable": true,
"height": "250px", "height": "250px",
"panels": [ "panels": [
{ {
...@@ -63,7 +22,6 @@ ...@@ -63,7 +22,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 1, "id": 1,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -137,7 +95,6 @@ ...@@ -137,7 +95,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 2, "id": 2,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -211,7 +168,6 @@ ...@@ -211,7 +168,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 3, "id": 3,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -278,17 +234,15 @@ ...@@ -278,17 +234,15 @@
] ]
} }
], ],
"title": "New row",
"showTitle": false,
"titleSize": "h6",
"isNew": false,
"repeat": null, "repeat": null,
"repeatIteration": null,
"repeatRowId": null, "repeatRowId": null,
"repeatIteration": null "showTitle": false,
"title": "New row",
"titleSize": "h6"
}, },
{ {
"collapse": false, "collapse": false,
"editable": true,
"height": "250px", "height": "250px",
"panels": [ "panels": [
{ {
...@@ -299,7 +253,6 @@ ...@@ -299,7 +253,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 4, "id": 4,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -370,7 +323,6 @@ ...@@ -370,7 +323,6 @@
"editable": true, "editable": true,
"error": false, "error": false,
"id": 6, "id": 6,
"isNew": true,
"links": [], "links": [],
"mode": "markdown", "mode": "markdown",
"span": 4, "span": 4,
...@@ -378,17 +330,15 @@ ...@@ -378,17 +330,15 @@
"type": "text" "type": "text"
} }
], ],
"title": "New row",
"showTitle": false,
"titleSize": "h6",
"isNew": false,
"repeat": null, "repeat": null,
"repeatIteration": null,
"repeatRowId": null, "repeatRowId": null,
"repeatIteration": null "showTitle": false,
"title": "New row",
"titleSize": "h6"
}, },
{ {
"collapse": false, "collapse": false,
"editable": true,
"height": 336, "height": 336,
"panels": [ "panels": [
{ {
...@@ -399,7 +349,6 @@ ...@@ -399,7 +349,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 5, "id": 5,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -481,7 +430,6 @@ ...@@ -481,7 +430,6 @@
"editable": true, "editable": true,
"error": false, "error": false,
"id": 7, "id": 7,
"isNew": true,
"links": [], "links": [],
"mode": "markdown", "mode": "markdown",
"span": 4, "span": 4,
...@@ -489,17 +437,15 @@ ...@@ -489,17 +437,15 @@
"type": "text" "type": "text"
} }
], ],
"title": "New row",
"showTitle": false,
"titleSize": "h6",
"isNew": false,
"repeat": null, "repeat": null,
"repeatIteration": null,
"repeatRowId": null, "repeatRowId": null,
"repeatIteration": null "showTitle": false,
"title": "New row",
"titleSize": "h6"
}, },
{ {
"collapse": false, "collapse": false,
"editable": true,
"height": "250px", "height": "250px",
"panels": [ "panels": [
{ {
...@@ -510,7 +456,6 @@ ...@@ -510,7 +456,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 8, "id": 8,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -584,7 +529,6 @@ ...@@ -584,7 +529,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 10, "id": 10,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -655,7 +599,6 @@ ...@@ -655,7 +599,6 @@
"editable": true, "editable": true,
"error": false, "error": false,
"id": 13, "id": 13,
"isNew": true,
"links": [], "links": [],
"mode": "markdown", "mode": "markdown",
"span": 4, "span": 4,
...@@ -663,17 +606,16 @@ ...@@ -663,17 +606,16 @@
"type": "text" "type": "text"
} }
], ],
"title": "New row",
"showTitle": false,
"titleSize": "h6",
"isNew": false,
"repeat": null, "repeat": null,
"repeatIteration": null,
"repeatRowId": null, "repeatRowId": null,
"repeatIteration": null "showTitle": false,
"title": "New row",
"titleSize": "h6"
}, },
{ {
"isNew": false, "collapse": false,
"title": "Dashboard Row", "height": 250,
"panels": [ "panels": [
{ {
"aliasColors": {}, "aliasColors": {},
...@@ -683,7 +625,6 @@ ...@@ -683,7 +625,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 9, "id": 9,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -776,7 +717,6 @@ ...@@ -776,7 +717,6 @@
"editable": true, "editable": true,
"error": false, "error": false,
"id": 14, "id": 14,
"isNew": true,
"links": [], "links": [],
"mode": "markdown", "mode": "markdown",
"span": 4, "span": 4,
...@@ -784,17 +724,16 @@ ...@@ -784,17 +724,16 @@
"type": "text" "type": "text"
} }
], ],
"showTitle": false,
"titleSize": "h6",
"height": 250,
"repeat": null, "repeat": null,
"repeatRowId": null,
"repeatIteration": null, "repeatIteration": null,
"collapse": false "repeatRowId": null,
"showTitle": false,
"title": "Dashboard Row",
"titleSize": "h6"
}, },
{ {
"isNew": false, "collapse": false,
"title": "Dashboard Row", "height": 250,
"panels": [ "panels": [
{ {
"aliasColors": {}, "aliasColors": {},
...@@ -804,7 +743,6 @@ ...@@ -804,7 +743,6 @@
"error": false, "error": false,
"fill": 1, "fill": 1,
"id": 12, "id": 12,
"isNew": true,
"legend": { "legend": {
"avg": false, "avg": false,
"current": false, "current": false,
...@@ -833,12 +771,12 @@ ...@@ -833,12 +771,12 @@
"steppedLine": false, "steppedLine": false,
"targets": [ "targets": [
{ {
"alias": "",
"hide": false, "hide": false,
"refId": "B", "refId": "B",
"scenarioId": "csv_metric_values", "scenarioId": "csv_metric_values",
"stringInput": "1,20,40,null,null,null,null,null,null,100,10,10,20,30,40,10", "stringInput": "1,20,40,null,null,null,null,null,null,100,10,10,20,30,40,10",
"target": "", "target": ""
"alias": ""
}, },
{ {
"alias": "", "alias": "",
...@@ -898,7 +836,6 @@ ...@@ -898,7 +836,6 @@
"editable": true, "editable": true,
"error": false, "error": false,
"id": 15, "id": 15,
"isNew": true,
"links": [], "links": [],
"mode": "markdown", "mode": "markdown",
"span": 4, "span": 4,
...@@ -906,13 +843,522 @@ ...@@ -906,13 +843,522 @@
"type": "text" "type": "text"
} }
], ],
"showTitle": false,
"titleSize": "h6",
"height": 250,
"repeat": null, "repeat": null,
"repeatRowId": null,
"repeatIteration": null, "repeatIteration": null,
"collapse": false "repeatRowId": null,
"showTitle": false,
"title": "Dashboard Row",
"titleSize": "h6"
},
{
"collapse": false,
"height": 250,
"panels": [
{
"aliasColors": {},
"bars": false,
"datasource": "Grafana TestData",
"decimals": 3,
"fill": 1,
"id": 16,
"legend": {
"alignAsTable": true,
"avg": true,
"current": true,
"max": true,
"min": true,
"show": true,
"total": true,
"values": true
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"span": 6,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "D",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeShift": null,
"title": "Legend Table No Scroll Visible",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
} }
] ]
},
{
"aliasColors": {},
"bars": false,
"datasource": "Grafana TestData",
"decimals": 3,
"fill": 1,
"id": 17,
"legend": {
"alignAsTable": true,
"avg": true,
"current": true,
"max": true,
"min": true,
"show": true,
"total": true,
"values": true
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"span": 6,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "D",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "E",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "F",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "G",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "I",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "J",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeShift": null,
"title": "Legend Table Should Scroll",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
]
}
],
"repeat": null,
"repeatIteration": null,
"repeatRowId": null,
"showTitle": false,
"title": "Dashboard Row",
"titleSize": "h6"
},
{
"collapse": false,
"height": 250,
"panels": [
{
"aliasColors": {},
"bars": false,
"datasource": "Grafana TestData",
"decimals": 3,
"fill": 1,
"id": 18,
"legend": {
"alignAsTable": true,
"avg": true,
"current": true,
"max": true,
"min": true,
"rightSide": true,
"show": true,
"total": true,
"values": true
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"span": 6,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "D",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeShift": null,
"title": "Legend Table No Scroll Visible",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
]
},
{
"aliasColors": {},
"bars": false,
"datasource": "Grafana TestData",
"decimals": 3,
"fill": 1,
"id": 19,
"legend": {
"alignAsTable": true,
"avg": true,
"current": true,
"max": true,
"min": true,
"rightSide": true,
"show": true,
"total": true,
"values": true
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"span": 6,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "D",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "E",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "F",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "G",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "I",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "J",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "K",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "L",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeShift": null,
"title": "Legend Table No Scroll Visible",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
]
}
],
"repeat": null,
"repeatIteration": null,
"repeatRowId": null,
"showTitle": false,
"title": "Dashboard Row",
"titleSize": "h6"
}
],
"schemaVersion": 14,
"style": "dark",
"tags": [
"grafana-test"
],
"templating": {
"list": []
},
"time": {
"from": "now-1h",
"to": "now"
},
"timepicker": {
"refresh_intervals": [
"5s",
"10s",
"30s",
"1m",
"5m",
"15m",
"30m",
"1h",
"2h",
"1d"
],
"time_options": [
"5m",
"15m",
"1h",
"6h",
"12h",
"24h",
"2d",
"7d",
"30d"
]
},
"timezone": "browser",
"title": "TestData - Graph Panel Last 1h",
"version": 6
} }
public/app/plugins/app/testdata/plugin.json
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
"name": "Grafana Project", "name": "Grafana Project",
"url": "http://grafana.org" "url": "http://grafana.org"
}, },
"version": "1.0.15", "version": "1.0.16",
"updated": "2016-09-26" "updated": "2016-09-26"
}, },
......
public/app/plugins/panel/graph/legend.js
...@@ -124,6 +124,7 @@ function (angular, _, $) { ...@@ -124,6 +124,7 @@ function (angular, _, $) {
$container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
var tableHeaderElem;
if (panel.legend.alignAsTable) { if (panel.legend.alignAsTable) {
var header = '<tr>'; var header = '<tr>';
header += '<th colspan="2" style="text-align:left"></th>'; header += '<th colspan="2" style="text-align:left"></th>';
...@@ -135,7 +136,7 @@ function (angular, _, $) { ...@@ -135,7 +136,7 @@ function (angular, _, $) {
header += getTableHeaderHtml('total'); header += getTableHeaderHtml('total');
} }
header += '</tr>'; header += '</tr>';
$container.append($(header)); tableHeaderElem = $(header);
} }
if (panel.legend.sort) { if (panel.legend.sort) {
...@@ -148,6 +149,8 @@ function (angular, _, $) { ...@@ -148,6 +149,8 @@ function (angular, _, $) {
} }
var seriesShown = 0; var seriesShown = 0;
var seriesElements = [];
for (i = 0; i < seriesList.length; i++) { for (i = 0; i < seriesList.length; i++) {
var series = seriesList[i]; var series = seriesList[i];
...@@ -156,6 +159,7 @@ function (angular, _, $) { ...@@ -156,6 +159,7 @@ function (angular, _, $) {
} }
var html = '<div class="graph-legend-series'; var html = '<div class="graph-legend-series';
if (series.yaxis === 2) { html += ' graph-legend-series--right-y'; } if (series.yaxis === 2) { html += ' graph-legend-series--right-y'; }
if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; } if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
html += '" data-series-index="' + i + '">'; html += '" data-series-index="' + i + '">';
...@@ -180,7 +184,7 @@ function (angular, _, $) { ...@@ -180,7 +184,7 @@ function (angular, _, $) {
} }
html += '</div>'; html += '</div>';
$container.append($(html)); seriesElements.push($(html));
seriesShown++; seriesShown++;
} }
...@@ -193,9 +197,13 @@ function (angular, _, $) { ...@@ -193,9 +197,13 @@ function (angular, _, $) {
} }
var topPadding = 6; var topPadding = 6;
$container.css("max-height", maxHeight - topPadding); var tbodyElem = $('<tbody></tbody>');
tbodyElem.css("height", maxHeight - topPadding);
tbodyElem.append(tableHeaderElem);
tbodyElem.append(seriesElements);
$container.append(tbodyElem);
} else { } else {
$container.css("max-height", ""); $container.append(seriesElements);
} }
} }
} }
......
public/sass/components/_panel_graph.scss
...@@ -85,9 +85,11 @@ ...@@ -85,9 +85,11 @@
} }
.graph-legend-table { .graph-legend-table {
tbody {
display: block;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
display: table; }
.graph-legend-series { .graph-legend-series {
display: table-row; display: table-row;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment