IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-30 10:47:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Candlestick: fix auto field mapping & includeAllFields (#42020)

Browse Source
This commit is contained in:
Leon Sorokin 2021-11-24 13:02:53 -06:00 committed by GitHub
parent 782d5a27fd
commit 24053d83d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 681 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json
View File

@ -2054,6 +2054,18 @@
"value": 0
}
]
},
{
"matcher": {
"id": "byName",
"options": "value"
},
"properties": [
{
"id": "custom.fillOpacity",
"value": 0
}
]
}
]
},

991
devenv/dev-dashboards/panel-candlestick/candlestick.json
View File

@ -1,522 +1,481 @@
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 2,
"id": 319,
"links": [],
"liveNow": false,
"panels": [
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineStyle": {
"dash": [
10,
10
],
"fill": "dash"
},
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "sma"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "orange",
"mode": "fixed"
}
},
{
"id": "custom.lineWidth",
"value": 5
},
{
"id": "custom.lineStyle",
"value": {
"dash": [
0,
20
],
"fill": "dot"
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "bolup"
},
"properties": [
{
"id": "custom.fillBelowTo",
"value": "boldn"
},
{
"id": "custom.fillOpacity",
"value": 8
},
{
"id": "color",
"value": {
"fixedColor": "blue",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 16,
"w": 12,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"colorStrategy": "open-close",
"colors": {
"down": "red",
"up": "green"
},
"fields": {},
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "candles+volume",
"candleStyle": "candles"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Price & Volume",
"type": "candlestick"
},
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": []
},
"gridPos": {
"h": 20,
"w": 12,
"x": 12,
"y": 0
},
"id": 7,
"options": {
"colorStrategy": "close-close",
"colors": {
"down": "red",
"up": "green"
},
"fields": {},
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "candles",
"candleStyle": "candles"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Price Only, Hollow Candles",
"transformations": [
{
"id": "filterFieldsByName",
"options": {
"include": {
"names": [
"time",
"open",
"high",
"low",
"close"
]
}
}
}
],
"type": "candlestick"
},
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 12,
"x": 0,
"y": 16
},
"id": 6,
"options": {
"colorStrategy": "open-close",
"colors": {
"down": "red",
"up": "blue"
},
"fields": { },
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "candles",
"candleStyle": "ohlcbars"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Price Only, OHLC Bars",
"transformations": [
{
"id": "filterFieldsByName",
"options": {
"include": {
"names": [
"time",
"open",
"high",
"low",
"close"
]
}
}
}
],
"type": "candlestick"
},
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 100,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "open"
},
"properties": [
{
"id": "custom.hideFrom",
"value": {
"legend": true,
"tooltip": true,
"viz": true
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "close"
},
"properties": [
{
"id": "custom.hideFrom",
"value": {
"legend": true,
"tooltip": true,
"viz": true
}
}
]
}
]
},
"gridPos": {
"h": 6,
"w": 12,
"x": 12,
"y": 20
},
"id": 4,
"options": {
"colorStrategy": "open-close",
"colors": {
"down": "red",
"up": "yellow"
},
"fields": {},
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "volume",
"candleStyle": "candles"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Volume Only, Alt Colors, 100% Opacity",
"transformations": [
{
"id": "filterFieldsByName",
"options": {
"include": {
"names": [
"time",
"volume",
"open",
"close"
]
}
}
}
],
"type": "candlestick"
"type": "dashboard"
}
],
"refresh": false,
"schemaVersion": 33,
"style": "dark",
"tags": [
"gdev",
"panel-tests",
"graph-ng"
],
"templating": {
"list": []
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 2,
"links": [],
"liveNow": false,
"panels": [
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineStyle": {
"dash": [
10,
10
],
"fill": "dash"
},
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "sma"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "orange",
"mode": "fixed"
}
},
{
"id": "custom.lineWidth",
"value": 5
},
{
"id": "custom.lineStyle",
"value": {
"dash": [
0,
20
],
"fill": "dot"
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "bolup"
},
"properties": [
{
"id": "custom.fillBelowTo",
"value": "boldn"
},
{
"id": "custom.fillOpacity",
"value": 8
},
{
"id": "color",
"value": {
"fixedColor": "blue",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 16,
"w": 12,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"candleStyle": "candles",
"colorStrategy": "open-close",
"colors": {
"down": "red",
"up": "green"
},
"fields": {},
"includeAllFields": true,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "candles+volume"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Price & Volume",
"type": "candlestick"
},
"time": {
"from": "2021-07-13T22:13:30.740Z",
"to": "2021-07-13T22:46:18.921Z"
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": []
},
"gridPos": {
"h": 20,
"w": 12,
"x": 12,
"y": 0
},
"id": 7,
"options": {
"candleStyle": "candles",
"colorStrategy": "close-close",
"colors": {
"down": "red",
"up": "green"
},
"fields": {},
"includeAllFields": false,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "candles"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Price Only, Hollow Candles",
"transformations": [],
"type": "candlestick"
},
"timepicker": {},
"timezone": "",
"title": "Candlestick",
"uid": "MP-Di9F7k",
"version": 7,
"weekStart": ""
}
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 12,
"x": 0,
"y": 16
},
"id": 6,
"options": {
"candleStyle": "ohlcbars",
"colorStrategy": "open-close",
"colors": {
"down": "red",
"up": "blue"
},
"fields": {},
"includeAllFields": false,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "candles"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Price Only, OHLC Bars",
"transformations": [],
"type": "candlestick"
},
{
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 100,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
},
"unit": "currencyUSD"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "open"
},
"properties": [
{
"id": "custom.hideFrom",
"value": {
"legend": true,
"tooltip": true,
"viz": true
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "close"
},
"properties": [
{
"id": "custom.hideFrom",
"value": {
"legend": true,
"tooltip": true,
"viz": true
}
}
]
}
]
},
"gridPos": {
"h": 6,
"w": 12,
"x": 12,
"y": 20
},
"id": 4,
"options": {
"candleStyle": "candles",
"colorStrategy": "open-close",
"colors": {
"down": "red",
"up": "yellow"
},
"fields": {},
"includeAllFields": false,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "volume"
},
"targets": [
{
"csvFileName": "ohlc_dogecoin.csv",
"refId": "A",
"scenarioId": "csv_file"
}
],
"title": "Volume Only, Alt Colors, 100% Opacity",
"transformations": [],
"type": "candlestick"
}
],
"refresh": false,
"schemaVersion": 33,
"style": "dark",
"tags": [
"gdev",
"panel-tests",
"graph-ng"
],
"templating": {
"list": []
},
"time": {
"from": "2021-07-13T22:13:30.740Z",
"to": "2021-07-13T22:46:18.921Z"
},
"timepicker": {},
"timezone": "",
"title": "Candlestick",
"uid": "MP-Di9F7k",
"version": 2,
"weekStart": ""
}

4
devenv/dev-dashboards/panel-graph/graph-ng.json
View File

@ -1426,6 +1426,10 @@
"fixedColor": "blue",
"mode": "fixed"
}
},
{
"id": "custom.fillOpacity",
"value": 0
}
]
}

175
public/app/plugins/panel/candlestick/fields.test.ts
View File

@ -1,6 +1,6 @@
import { createTheme, toDataFrame } from '@grafana/data';
import { prepareCandlestickFields } from './fields';
import { CandlestickOptions } from './models.gen';
import { CandlestickOptions, VizDisplayMode } from './models.gen';
const theme = createTheme();
@ -118,4 +118,177 @@ describe('Candlestick data', () => {
expect(info.open!.values.toArray()).toEqual([1, 1, 2, 3, 4]);
expect(info.close!.values.toArray()).toEqual([1, 2, 3, 4, 5]);
});
it('will unmap high & low fields in volume-only mode', () => {
const options: CandlestickOptions = {
mode: VizDisplayMode.Volume,
includeAllFields: true,
} as CandlestickOptions;
const info = prepareCandlestickFields(
[
toDataFrame({
fields: [
{
name: 'time',
values: [1, 2, 3],
},
{
name: 'low',
values: [4, 5, 6],
},
{
name: 'high',
values: [7, 8, 9],
},
{
name: 'open',
values: [4, 5, 6],
},
{
name: 'close',
values: [7, 8, 9],
},
{
name: 'volume',
values: [70, 80, 90],
},
{
name: 'extra',
values: [10, 20, 30],
},
],
}),
],
options,
theme
);
expect(info.open).toBeDefined();
expect(info.close).toBeDefined();
expect(info.volume).toBeDefined();
expect(info.frame.fields).toContain(info.open);
expect(info.frame.fields).toContain(info.close);
expect(info.frame.fields).toContain(info.volume);
expect(info.high).toBeUndefined();
expect(info.low).toBeUndefined();
// includeAllFields: true
expect(info.frame.fields.find((f) => f.name === 'high')).toBeDefined();
expect(info.frame.fields.find((f) => f.name === 'low')).toBeDefined();
expect(info.frame.fields.find((f) => f.name === 'extra')).toBeDefined();
});
it('will unmap volume field in candles-only mode', () => {
const options: CandlestickOptions = {
mode: VizDisplayMode.Candles,
includeAllFields: false,
} as CandlestickOptions;
const info = prepareCandlestickFields(
[
toDataFrame({
fields: [
{
name: 'time',
values: [1, 2, 3],
},
{
name: 'low',
values: [4, 5, 6],
},
{
name: 'high',
values: [7, 8, 9],
},
{
name: 'open',
values: [4, 5, 6],
},
{
name: 'close',
values: [7, 8, 9],
},
{
name: 'volume',
values: [70, 80, 90],
},
{
name: 'extra',
values: [10, 20, 30],
},
],
}),
],
options,
theme
);
expect(info.open).toBeDefined();
expect(info.close).toBeDefined();
expect(info.high).toBeDefined();
expect(info.low).toBeDefined();
expect(info.volume).toBeUndefined();
expect(info.frame.fields).toContain(info.open);
expect(info.frame.fields).toContain(info.close);
expect(info.frame.fields).toContain(info.high);
expect(info.frame.fields).toContain(info.low);
// includeAllFields: false
expect(info.frame.fields.find((f) => f.name === 'volume')).toBeUndefined();
expect(info.frame.fields.find((f) => f.name === 'extra')).toBeUndefined();
});
it("will not remove open field from frame when it's also mapped to high in volume-only mode", () => {
const options: CandlestickOptions = {
mode: VizDisplayMode.Volume,
includeAllFields: false,
} as CandlestickOptions;
const info = prepareCandlestickFields(
[
toDataFrame({
fields: [
{
name: 'time',
values: [1, 2, 3],
},
{
name: 'open',
values: [4, 5, 6],
},
{
name: 'close',
values: [7, 8, 9],
},
{
name: 'volume',
values: [70, 80, 90],
},
{
name: 'extra',
values: [10, 20, 30],
},
],
}),
],
options,
theme
);
expect(info.open).toBeDefined();
expect(info.close).toBeDefined();
expect(info.volume).toBeDefined();
expect(info.frame.fields).toContain(info.open);
expect(info.frame.fields).toContain(info.close);
expect(info.frame.fields).toContain(info.volume);
// includeAllFields: false
expect(info.frame.fields.find((f) => f.name === 'extra')).toBeUndefined();
});
});

24
public/app/plugins/panel/candlestick/fields.ts
View File

@ -184,11 +184,15 @@ export function prepareCandlestickFields(
// so they fall through to unmapped fields and get appropriate includeAllFields treatment
if (options.mode === VizDisplayMode.Volume) {
if (data.high) {
used.delete(data.high);
if (data.high !== data.open) {
used.delete(data.high);
}
data.high = undefined;
}
if (data.low) {
used.delete(data.low);
if (data.low !== data.open) {
used.delete(data.low);
}
data.low = undefined;
}
} else if (options.mode === VizDisplayMode.Candles) {
@ -213,7 +217,7 @@ export function prepareCandlestickFields(
if (!options.includeAllFields) {
fields.push(...used);
} else if (timeIndex > 0) {
} else {
fields.push(...frame.fields.filter((f) => f !== timeField));
}
@ -226,12 +230,16 @@ export function prepareCandlestickFields(
for (let i = 0; i < data.frame.fields.length; i++) {
const field = data.frame.fields[i];
// time is unused (-1), y series enumerate from 0
field.state!.seriesIndex = i - 1;
field.state = {
...field.state,
field.state!.origin = {
fieldIndex: i,
frameIndex: 0,
// time is unused (-1), y series enumerate from 0
seriesIndex: i - 1,
origin: {
fieldIndex: i,
frameIndex: 0,
},
};
}