mirror of https://github.com/grafana/grafana
GraphNG: Color series from by value scheme & change to fillGradient to gradientMode (#29893)
Torkel Ödegaard
5 years ago
committed by
GitHub
parent
f004655b7d
commit
93a59561ba
@ -0,0 +1,892 @@ |
||||
{ |
||||
"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, |
||||
"id": 391, |
||||
"links": [], |
||||
"panels": [ |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "bars", |
||||
"fillOpacity": 100, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "smooth", |
||||
"lineWidth": 0, |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "red", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 0, |
||||
"y": 0 |
||||
}, |
||||
"id": 2, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 9, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "bars", |
||||
"fillOpacity": 72, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "smooth", |
||||
"lineWidth": 1, |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "green", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 8, |
||||
"y": 0 |
||||
}, |
||||
"id": 3, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 9, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode (line + opacity)", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "bars", |
||||
"fillOpacity": 78, |
||||
"gradientMode": "hue", |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "orange", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 16, |
||||
"y": 0 |
||||
}, |
||||
"id": 5, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 9, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode (line + opacity)", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "bars", |
||||
"fillOpacity": 100, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "smooth", |
||||
"lineWidth": 0, |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "purple", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 0, |
||||
"y": 9 |
||||
}, |
||||
"id": 4, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 9, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "bars", |
||||
"fillOpacity": 100, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "smooth", |
||||
"lineWidth": 0, |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "yellow", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 8, |
||||
"y": 9 |
||||
}, |
||||
"id": 6, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 9, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "bars", |
||||
"fillOpacity": 100, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "smooth", |
||||
"lineWidth": 0, |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "rgb(12, 187, 242)", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 16, |
||||
"y": 9 |
||||
}, |
||||
"id": 7, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 9, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "line", |
||||
"fillOpacity": 78, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "linear", |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "orange", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 0, |
||||
"y": 18 |
||||
}, |
||||
"id": 8, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 100, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode (line + opacity)", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "line", |
||||
"fillOpacity": 78, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "linear", |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "blue", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 8, |
||||
"y": 18 |
||||
}, |
||||
"id": 9, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 100, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode (line + opacity)", |
||||
"type": "timeseries" |
||||
}, |
||||
{ |
||||
"datasource": null, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"drawStyle": "line", |
||||
"fillOpacity": 78, |
||||
"gradientMode": "hue", |
||||
"hideFrom": { |
||||
"graph": false, |
||||
"legend": false, |
||||
"tooltip": false |
||||
}, |
||||
"lineInterpolation": "linear", |
||||
"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": "A-series" |
||||
}, |
||||
"properties": [ |
||||
{ |
||||
"id": "color", |
||||
"value": { |
||||
"fixedColor": "green", |
||||
"mode": "fixed" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 8, |
||||
"x": 16, |
||||
"y": 18 |
||||
}, |
||||
"id": 10, |
||||
"interval": "1m", |
||||
"links": [], |
||||
"maxDataPoints": 100, |
||||
"options": { |
||||
"graph": {}, |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "hidden", |
||||
"placement": "bottom" |
||||
}, |
||||
"tooltipOptions": { |
||||
"mode": "single" |
||||
} |
||||
}, |
||||
"pluginVersion": "7.4.0-pre", |
||||
"targets": [ |
||||
{ |
||||
"refId": "A", |
||||
"scenarioId": "random_walk" |
||||
} |
||||
], |
||||
"timeFrom": null, |
||||
"timeShift": null, |
||||
"title": "Hue gradient mode (line + opacity)", |
||||
"type": "timeseries" |
||||
} |
||||
], |
||||
"schemaVersion": 27, |
||||
"style": "dark", |
||||
"tags": ["gdev", "panel-tests", "graph-ng"], |
||||
"templating": { |
||||
"list": [] |
||||
}, |
||||
"time": { |
||||
"from": "now-6h", |
||||
"to": "now" |
||||
}, |
||||
"timepicker": {}, |
||||
"timezone": "", |
||||
"title": "Panel Tests - GraphNG - Hue Gradients", |
||||
"uid": "k3XQFOBMk", |
||||
"version": 3 |
||||
} |
||||
@ -0,0 +1,125 @@ |
||||
import { FieldColorMode, getColorForTheme, GrafanaTheme, ThresholdsConfig } from '@grafana/data'; |
||||
import tinycolor from 'tinycolor2'; |
||||
import uPlot from 'uplot'; |
||||
import darkTheme from '../../../themes/dark'; |
||||
import { getCanvasContext } from '../../../utils/measureText'; |
||||
|
||||
export function getOpacityGradientFn( |
||||
color: string, |
||||
opacity: number |
||||
): (self: uPlot, seriesIdx: number) => CanvasGradient { |
||||
return (plot: uPlot, seriesIdx: number) => { |
||||
const ctx = getCanvasContext(); |
||||
const gradient = ctx.createLinearGradient(0, plot.bbox.top, 0, plot.bbox.top + plot.bbox.height); |
||||
|
||||
gradient.addColorStop( |
||||
0, |
||||
tinycolor(color) |
||||
.setAlpha(opacity) |
||||
.toRgbString() |
||||
); |
||||
gradient.addColorStop( |
||||
1, |
||||
tinycolor(color) |
||||
.setAlpha(0) |
||||
.toRgbString() |
||||
); |
||||
|
||||
return gradient; |
||||
}; |
||||
} |
||||
export function getHueGradientFn( |
||||
color: string, |
||||
opacity: number, |
||||
theme: GrafanaTheme |
||||
): (self: uPlot, seriesIdx: number) => CanvasGradient { |
||||
return (plot: uPlot, seriesIdx: number) => { |
||||
const ctx = getCanvasContext(); |
||||
const gradient = ctx.createLinearGradient(0, plot.bbox.top, 0, plot.bbox.top + plot.bbox.height); |
||||
const color1 = tinycolor(color).spin(-15); |
||||
const color2 = tinycolor(color).spin(15); |
||||
|
||||
if (theme.isDark) { |
||||
gradient.addColorStop( |
||||
0, |
||||
color2 |
||||
.lighten(10) |
||||
.setAlpha(opacity) |
||||
.toString() |
||||
); |
||||
gradient.addColorStop( |
||||
1, |
||||
color1 |
||||
.darken(10) |
||||
.setAlpha(opacity) |
||||
.toString() |
||||
); |
||||
} else { |
||||
gradient.addColorStop( |
||||
0, |
||||
color2 |
||||
.lighten(10) |
||||
.setAlpha(opacity) |
||||
.toString() |
||||
); |
||||
gradient.addColorStop(1, color1.setAlpha(opacity).toString()); |
||||
} |
||||
|
||||
return gradient; |
||||
}; |
||||
} |
||||
/** |
||||
* Experimental & quick and dirty test |
||||
* Not being used |
||||
*/ |
||||
export function getScaleGradientFn( |
||||
opacity: number, |
||||
colorMode?: FieldColorMode, |
||||
thresholds?: ThresholdsConfig |
||||
): (self: uPlot, seriesIdx: number) => CanvasGradient { |
||||
if (!colorMode) { |
||||
throw Error('Missing colorMode required for color scheme gradients'); |
||||
} |
||||
|
||||
if (!thresholds) { |
||||
throw Error('Missing thresholds required for color scheme gradients'); |
||||
} |
||||
|
||||
return (plot: uPlot, seriesIdx: number) => { |
||||
const ctx = getCanvasContext(); |
||||
const gradient = ctx.createLinearGradient(0, plot.bbox.top, 0, plot.bbox.top + plot.bbox.height); |
||||
const series = plot.series[seriesIdx]; |
||||
const scale = plot.scales[series.scale!]; |
||||
const range = plot.bbox.height; |
||||
|
||||
console.log('scale', scale); |
||||
console.log('series.min', series.min); |
||||
console.log('series.max', series.max); |
||||
|
||||
const getColorWithAlpha = (color: string) => { |
||||
return tinycolor(getColorForTheme(color, darkTheme)) |
||||
.setAlpha(opacity) |
||||
.toString(); |
||||
}; |
||||
|
||||
const addColorStop = (value: number, color: string) => { |
||||
const pos = plot.valToPos(value, series.scale!); |
||||
const percent = pos / range; |
||||
console.log(`addColorStop(value = ${value}, xPos=${pos})`); |
||||
gradient.addColorStop(Math.min(percent, 1), getColorWithAlpha(color)); |
||||
}; |
||||
|
||||
for (let idx = 0; idx < thresholds.steps.length; idx++) { |
||||
const step = thresholds.steps[idx]; |
||||
const value = step.value === -Infinity ? 0 : step.value; |
||||
addColorStop(value, step.color); |
||||
|
||||
// to make the gradient discrete
|
||||
if (thresholds.steps.length > idx + 1) { |
||||
addColorStop(thresholds.steps[idx + 1].value - 0.0000001, step.color); |
||||
} |
||||
} |
||||
|
||||
return gradient; |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue