Skip to content

N
nexpie-grafana-theme
Commit 2c5c3338 by Torkel Ödegaard Committed by GitHub
Options

Graph: Added new fill gradient option (#17528) 

* Graph: Added new fill gradient option

* Graph: changed gradient area fill option, added test dashboard
parent 375dc333
Showing with 408 additions and 1 deletions
devenv/dev-dashboards/panel-graph/graph-gradient-area-fills.json 0 → 100644
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"gnetId": null,
"graphTooltip": 0,
"links": [],
"panels": [
{
"aliasColors": {
"A-series": "rgb(48, 139, 237)"
},
"bars": false,
"dashLength": 10,
"dashes": false,
"fill": 1,
"fillGradient": 5,
"gridPos": {
"h": 8,
"w": 11,
"x": 0,
"y": 0
},
"id": 2,
"interval": "1m",
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": false,
"total": false,
"values": false
},
"lines": true,
"linewidth": 2,
"links": [],
"nullPointMode": "null",
"options": {},
"percentage": false,
"pointradius": 2,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Req/s",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"buckets": null,
"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
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {
"A-series": "rgb(87, 186, 242)"
},
"bars": false,
"dashLength": 10,
"dashes": false,
"fill": 4,
"fillGradient": 4,
"gridPos": {
"h": 15,
"w": 13,
"x": 11,
"y": 0
},
"id": 11,
"interval": "1m",
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": true,
"total": false,
"values": false
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"options": {},
"percentage": false,
"pointradius": 2,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Req/s",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"buckets": null,
"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
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {
"A-series": "red"
},
"bars": false,
"dashLength": 10,
"dashes": false,
"fill": 1,
"fillGradient": 5,
"gridPos": {
"h": 7,
"w": 11,
"x": 0,
"y": 8
},
"id": 7,
"interval": "1m",
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": false,
"total": false,
"values": false
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"options": {},
"percentage": false,
"pointradius": 2,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Memory",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "decgbytes",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {
"A-series": "green"
},
"bars": false,
"dashLength": 10,
"dashes": false,
"fill": 2,
"fillGradient": 10,
"gridPos": {
"h": 8,
"w": 24,
"x": 0,
"y": 15
},
"id": 10,
"interval": "1m",
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": false,
"total": false,
"values": false
},
"lines": true,
"linewidth": 0,
"links": [],
"nullPointMode": "null",
"options": {},
"percentage": false,
"pointradius": 2,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Req/s",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"buckets": null,
"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
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
}
],
"schemaVersion": 18,
"style": "dark",
"tags": ["gdev", "panel-tests", "graph"],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"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": "",
"title": "Panel Tests - Graph - Gradient Area Fills",
"uid": "37Dq903mk",
"version": 25
}
public/app/plugins/panel/graph/graph.ts
......@@ -411,6 +411,7 @@ class GraphElement {
show: panel.lines,
zero: false,
fill: this.translateFillOption(panel.fill),
fillColor: this.getFillGradient(panel.fillGradient),
lineWidth: panel.dashes ? 0 : panel.linewidth,
steps: panel.steppedLine,
},
......@@ -473,7 +474,17 @@ class GraphElement {
}
}
translateFillOption(fill) {
getFillGradient(amount: number) {
if (!amount) {
return null;
}
return {
colors: [{ opacity: 0.0 }, { opacity: amount / 10 }],
};
}
translateFillOption(fill: number) {
if (this.panel.percentage && this.panel.stack) {
return fill === 0 ? 0.001 : fill / 10;
} else {
......
public/app/plugins/panel/graph/module.ts
......@@ -69,6 +69,8 @@ class GraphCtrl extends MetricsPanelCtrl {
lines: true,
// fill factor
fill: 1,
// fill factor
fillGradient: 0,
// line width in pixels
linewidth: 1,
// show/hide dashed line
......
public/app/plugins/panel/graph/tab_display.html
......@@ -37,6 +37,17 @@
></select>
</div>
</div>
<div class="gf-form" ng-if="ctrl.panel.lines && ctrl.panel.fill">
<label class="gf-form-label width-8">Fill Gradient</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.fillGradient"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Line Width</label>
<div class="gf-form-select-wrapper max-width-5">
......
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