Skip to content

Commit

Permalink
GraphNG: support fill below to (bands) (#30268)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryantxu
ryantxu committed Jan 15, 2021
1 parent 6248589 commit 8aba480
Show file tree
Hide file tree
Showing 8 changed files with 303 additions and 26 deletions.
190 changes: 169 additions & 21 deletions devenv/dev-dashboards/panel-graph/graph-ng.json
View file
Expand Up @@ -1175,8 +1175,8 @@
]
},
"gridPos": {
"h": 5,
"w": 24,
"h": 7,
"w": 12,
"x": 0,
"y": 13
},
Expand Down Expand Up @@ -1359,14 +1359,162 @@
"title": "Dashed lines",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": "hue",
"fillOpacity": 25,
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 2,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "Max"
},
"properties": [
{
"id": "custom.fillBelowTo",
"value": "Min"
},
{
"id": "custom.lineWidth",
"value": 0
},
{
"id": "color",
"value": {
"fixedColor": "red",
"mode": "fixed"
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "Min"
},
"properties": [
{
"id": "custom.lineWidth",
"value": 0
}
]
},
{
"matcher": {
"id": "byName",
"options": "Value"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "blue",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 7,
"w": 12,
"x": 12,
"y": 13
},
"id": 70,
"interval": null,
"maxDataPoints": 100,
"options": {
"graph": {},
"legend": {
"displayMode": "list",
"placement": "right"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"alias": "",
"csvWave": {
"timeStep": 60,
"valuesCSV": "0,0,2,2,1,1"
},
"lines": 10,
"points": [],
"pulseWave": {
"offCount": 3,
"offValue": 1,
"onCount": 3,
"onValue": 2,
"timeStep": 60
},
"refId": "A",
"scenarioId": "random_walk_table",
"stream": {
"bands": 1,
"noise": 2.2,
"speed": 250,
"spread": 3.5,
"type": "signal"
},
"stringInput": ""
}
],
"title": "Fill below to",
"type": "timeseries"
},
{
"collapsed": false,
"datasource": null,
"gridPos": {
"h": 1,
"w": 24,
"x": 0,
"y": 18
"y": 20
},
"id": 62,
"panels": [],
Expand Down Expand Up @@ -1444,7 +1592,7 @@
"h": 6,
"w": 6,
"x": 0,
"y": 19
"y": 21
},
"id": 63,
"maxDataPoints": 10,
Expand Down Expand Up @@ -1582,7 +1730,7 @@
"h": 6,
"w": 6,
"x": 6,
"y": 19
"y": 21
},
"id": 64,
"maxDataPoints": 10,
Expand Down Expand Up @@ -1720,7 +1868,7 @@
"h": 6,
"w": 6,
"x": 12,
"y": 19
"y": 21
},
"id": 65,
"maxDataPoints": 10,
Expand Down Expand Up @@ -1858,7 +2006,7 @@
"h": 6,
"w": 6,
"x": 18,
"y": 19
"y": 21
},
"id": 66,
"maxDataPoints": 100,
Expand Down Expand Up @@ -1918,7 +2066,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 25
"y": 27
},
"id": 34,
"panels": [],
Expand Down Expand Up @@ -2024,7 +2172,7 @@
"h": 8,
"w": 6,
"x": 0,
"y": 26
"y": 28
},
"id": 32,
"maxDataPoints": 100,
Expand Down Expand Up @@ -2164,7 +2312,7 @@
"h": 8,
"w": 6,
"x": 6,
"y": 26
"y": 28
},
"id": 35,
"maxDataPoints": 100,
Expand Down Expand Up @@ -2318,7 +2466,7 @@
"h": 8,
"w": 6,
"x": 12,
"y": 26
"y": 28
},
"id": 31,
"maxDataPoints": 200,
Expand Down Expand Up @@ -2471,7 +2619,7 @@
"h": 8,
"w": 6,
"x": 18,
"y": 26
"y": 28
},
"id": 51,
"maxDataPoints": 200,
Expand Down Expand Up @@ -2532,7 +2680,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 34
"y": 36
},
"id": 17,
"panels": [],
Expand Down Expand Up @@ -2614,7 +2762,7 @@
"h": 7,
"w": 6,
"x": 0,
"y": 35
"y": 37
},
"id": 19,
"options": {
Expand Down Expand Up @@ -2722,7 +2870,7 @@
"h": 7,
"w": 6,
"x": 6,
"y": 35
"y": 37
},
"id": 20,
"options": {
Expand Down Expand Up @@ -2829,7 +2977,7 @@
"h": 7,
"w": 6,
"x": 12,
"y": 35
"y": 37
},
"id": 21,
"options": {
Expand Down Expand Up @@ -2937,7 +3085,7 @@
"h": 7,
"w": 6,
"x": 18,
"y": 35
"y": 37
},
"id": 9,
"options": {
Expand Down Expand Up @@ -2980,7 +3128,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 42
"y": 44
},
"id": 45,
"panels": [],
Expand Down Expand Up @@ -3061,7 +3209,7 @@
"h": 10,
"w": 12,
"x": 0,
"y": 43
"y": 45
},
"id": 46,
"options": {
Expand Down Expand Up @@ -3204,7 +3352,7 @@
"h": 10,
"w": 12,
"x": 12,
"y": 43
"y": 45
},
"id": 68,
"options": {
Expand Down Expand Up @@ -3269,5 +3417,5 @@
"timezone": "",
"title": "Panel Tests - Graph NG",
"uid": "TkZXxlNG3",
"version": 27
"version": 34
}
30 changes: 29 additions & 1 deletion packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
View file
Expand Up @@ -24,6 +24,7 @@ import { VizLegend } from '../VizLegend/VizLegend';
import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
import { useRevision } from '../uPlot/hooks';
import { GraphNGLegendEvent, GraphNGLegendEventMode } from './types';
import { isNumber } from 'lodash';

const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));

Expand Down Expand Up @@ -135,6 +136,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
theme,
});
}
let indexByName: Map<string, number> | undefined = undefined;

for (let i = 0; i < alignedFrame.fields.length; i++) {
const field = alignedFrame.fields[i];
Expand Down Expand Up @@ -176,6 +178,24 @@ export const GraphNG: React.FC<GraphNGProps> = ({
const showPoints = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
const dataFrameFieldIndex = getDataFrameFieldIndex ? getDataFrameFieldIndex(i) : undefined;

let { fillOpacity } = customConfig;
if (customConfig.fillBelowTo) {
if (!indexByName) {
indexByName = getNamesToFieldIndex(alignedFrame);
}
const t = indexByName.get(getFieldDisplayName(field, alignedFrame));
const b = indexByName.get(customConfig.fillBelowTo);
if (isNumber(b) && isNumber(t)) {
builder.addBand({
series: [t, b],
fill: null as any, // using null will have the band use fill options from `t`
});
}
if (!fillOpacity) {
fillOpacity = 35; // default from flot
}
}

builder.addSeries({
scaleKey,
drawStyle: customConfig.drawStyle!,
Expand All @@ -186,7 +206,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
showPoints,
pointSize: customConfig.pointSize,
pointColor: customConfig.pointColor ?? seriesColor,
fillOpacity: customConfig.fillOpacity,
fillOpacity,
spanNulls: customConfig.spanNulls || false,
show: !customConfig.hideFrom?.graph,
fillGradient: customConfig.fillGradient,
Expand Down Expand Up @@ -291,3 +311,11 @@ const mapMouseEventToMode = (event: React.MouseEvent): GraphNGLegendEventMode =>
}
return GraphNGLegendEventMode.ToggleSelection;
};

function getNamesToFieldIndex(frame: DataFrame): Map<string, number> {
const names = new Map<string, number>();
for (let i = 0; i < frame.fields.length; i++) {
names.set(getFieldDisplayName(frame.fields[i], frame), i);
}
return names;
}

0 comments on commit 8aba480

Please sign in to comment.