IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeSeries: Fix rendering when zooming to time ranges between datapoints (#59444)

Browse Source
This commit is contained in:
Leon Sorokin
2022-12-01 17:01:35 -06:00
committed by GitHub
parent 7d043e1930
commit e1e858323a
13 changed files with 600 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.betterer.results
View File

@@ -7490,9 +7490,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "16"],
[0, 0, 0, "Do not use any type assertions.", "17"],
[0, 0, 0, "Do not use any type assertions.", "18"],
[0, 0, 0, "Do not use any type assertions.", "19"],
[0, 0, 0, "Do not use any type assertions.", "20"],
[0, 0, 0, "Do not use any type assertions.", "21"]
[0, 0, 0, "Do not use any type assertions.", "19"]
],
"public/app/plugins/panel/histogram/Histogram.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],

598
devenv/dev-dashboards/panel-timeseries/timeseries-nulls.json
View File

@@ -24,7 +24,6 @@
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 61,
"links": [
{
"asDropdown": true,
@@ -49,6 +48,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -105,7 +106,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -157,6 +159,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -214,7 +218,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -274,6 +279,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -331,7 +338,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -410,6 +418,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -466,7 +476,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -518,6 +529,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -575,7 +588,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -635,6 +649,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -692,7 +708,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -771,6 +788,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -859,7 +878,8 @@
"calcs": [],
"displayMode": "list",
"isVisible": true,
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -914,6 +934,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -1002,7 +1024,8 @@
"calcs": [],
"displayMode": "list",
"isVisible": true,
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -1058,6 +1081,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -1113,7 +1138,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -1163,6 +1189,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -1220,7 +1248,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -1248,6 +1277,8 @@
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
@@ -1305,7 +1336,8 @@
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
@@ -1325,9 +1357,549 @@
],
"title": "Always show points between gaps",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"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
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 24,
"x": 0,
"y": 30
},
"id": 18,
"maxDataPoints": 150,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "100,52,82,50,93,117,97,139,172,152,177,213,237,248,249,275,272,295,339,317,274,272,225,240,214,179,170,161,117,99,79,100,107,147,195,153,144,143,117,76,88,43,65,114,155,170,187,236,214,245,255,260,262,264,268,287,297,310,332,339,303,316,317,330,323,352,383,367,334,306,289,311,269,319,313,350,374,346,391,348,386,352,328,303,298,305,346,323,313,296,274,252,301,337,357,360,383,384,339,332,346,394,428,463,461,476,478,491,522,487,536,547,593,595,614,632,588,594,584,566,529,541,586,621,618,635,682,684,693,648,658,659,628,618,662,638,652,665,673,651,653,675,685,709,749,721,707,750,712,724,734,753,716,694,732,741,694,702,732,746,748,700,707,690,668,659,646,677,688,701,670,625,628,611,587,570,589,621,598,604"
}
],
"schemaVersion": 36,
"title": "Low density (wide)",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"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
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 12,
"x": 0,
"y": 41
},
"id": 20,
"maxDataPoints": 150,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "100,52,82,50,93,117,97,139,172,152,177,213,237,248,249,275,272,295,339,317,274,272,225,240,214,179,170,161,117,99,79,100,107,147,195,153,144,143,117,76,88,43,65,114,155,170,187,236,214,245,255,260,262,264,268,287,297,310,332,339,303,316,317,330,323,352,383,367,334,306,289,311,269,319,313,350,374,346,391,348,386,352,328,303,298,305,346,323,313,296,274,252,301,337,357,360,383,384,339,332,346,394,428,463,461,476,478,491,522,487,536,547,593,595,614,632,588,594,584,566,529,541,586,621,618,635,682,684,693,648,658,659,628,618,662,638,652,665,673,651,653,675,685,709,749,721,707,750,712,724,734,753,716,694,732,741,694,702,732,746,748,700,707,690,668,659,646,677,688,701,670,625,628,611,587,570,589,621,598,604"
}
],
"title": "Higher density (narrow)",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"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
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 12,
"x": 12,
"y": 41
},
"id": 22,
"maxDataPoints": 150,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "100,52,82,50,93,117,97,139,172,152,177,213,237,248,249,275,272,295,339,317,274,272,225,240,214,179,170,161,117,99,79,100,107,147,195,153,144,143,117,76,88,43,65,114,155,170,187,236,214,245,255,260,262,264,268,287,297,310,332,339,303,316,317,330,323,352,383,367,334,306,289,311,269,,,350,,,391,348,386,352,328,303,298,,346,,313,,274,252,301,337,357,360,383,384,339,332,346,394,428,463,461,476,478,491,522,487,536,547,593,595,614,632,588,594,584,566,529,541,586,621,618,635,682,684,693,648,658,659,628,618,,,652,665,673,,,675,,,749,721,707,750,712,724,734,753,716,694,732,741,694,702,732,746,748,700,707,690,668,659,646,677,688,701,670,625,628,611,587,570,589,621,598,604"
}
],
"title": "Higher density (with gap-point-gap)",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"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
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 8,
"x": 0,
"y": 51
},
"id": 24,
"maxDataPoints": 150,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": ",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"
}
],
"title": "Higher density (mostly nulls)",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"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
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 8,
"x": 8,
"y": 51
},
"id": 26,
"maxDataPoints": 150,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": ",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"
}
],
"title": "Higher density (mostly nulls, one point)",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"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
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 10,
"w": 8,
"x": 16,
"y": 51
},
"id": 28,
"maxDataPoints": 150,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8"
}
],
"title": "Higher density (mostly nulls, no leading/trailing)",
"type": "timeseries"
}
],
"schemaVersion": 37,
"style": "dark",
"tags": [
"gdev",

2
package.json
View File

@@ -397,7 +397,7 @@
"tether-drop": "https://github.com/torkelo/drop",
"tinycolor2": "1.4.2",
"tslib": "2.4.1",
"uplot": "1.6.22",
"uplot": "1.6.23",
"uuid": "9.0.0",
"vendor": "link:./public/vendor",
"visjs-network": "4.25.0",

2
packages/grafana-data/package.json
View File

@@ -53,7 +53,7 @@
"rxjs": "7.5.7",
"tinycolor2": "1.4.2",
"tslib": "2.4.1",
"uplot": "1.6.22",
"uplot": "1.6.23",
"xss": "1.0.14"
},
"devDependencies": {

2
packages/grafana-ui/package.json
View File

@@ -109,7 +109,7 @@
"slate-react": "0.22.10",
"tinycolor2": "1.4.2",
"tslib": "2.4.1",
"uplot": "1.6.22",
"uplot": "1.6.23",
"uuid": "9.0.0"
},
"devDependencies": {

5
packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
View File

@@ -129,7 +129,6 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
],
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#ff0000",
@@ -153,7 +152,6 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
],
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#ff0000",
@@ -177,7 +175,6 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
],
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#ff0000",
@@ -201,7 +198,6 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
],
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#ff0000",
@@ -225,7 +221,6 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
],
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#ff0000",

35
packages/grafana-ui/src/components/TimeSeries/utils.ts
View File

@@ -296,7 +296,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
let pointsFilter: uPlot.Series.Points.Filter = () => null;
if (customConfig.spanNulls !== true && showPoints !== VisibilityMode.Always) {
if (customConfig.spanNulls !== true) {
pointsFilter = (u, seriesIdx, show, gaps) => {
let filtered = [];
@@ -434,40 +434,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
dynamicSeriesColor = (seriesIdx) => getFieldSeriesColor(alignedFrame.fields[seriesIdx], theme).color;
}
// this adds leading and trailing gaps when datasets have leading and trailing nulls
// it will cause additional unnecessary clips, but we also use adjacent gaps to show single points
// when not connecting across gaps, e.g. null,100,null,null,50,50,50,null,50,null,null
const gapsRefiner: uPlot.Series.GapsRefiner = (u, seriesIdx, idx0, idx1, gaps) => {
let yData = u.data[seriesIdx];
// @ts-ignore
let xData = u._data[0];
// scan to first and last non-null vals
let first = idx0,
last = idx1;
while (first <= last && yData[first] == null) {
first++;
}
while (last > first && yData[last] == null) {
last--;
}
if (first !== idx0) {
gaps.unshift([u.bbox.left, Math.round(u.valToPos(xData[first]!, 'x', true))]);
}
if (last !== idx1) {
gaps.push([Math.round(u.valToPos(xData[last]!, 'x', true)), u.bbox.left + u.bbox.width]);
}
return gaps;
};
builder.addSeries({
gapsRefiner,
pathBuilder,
pointsBuilder,
scaleKey,

4
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
View File

@@ -613,7 +613,6 @@ describe('UPlotConfigBuilder', () => {
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#0000ff",
@@ -741,7 +740,6 @@ describe('UPlotConfigBuilder', () => {
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#0000ff",
@@ -760,7 +758,6 @@ describe('UPlotConfigBuilder', () => {
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#00ff00",
@@ -779,7 +776,6 @@ describe('UPlotConfigBuilder', () => {
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#ff0000",

4
packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts
View File

@@ -110,9 +110,7 @@ export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
}
if (scale.distr === 4) {
// TODO: switch to `, true)` after updating uPlot to 1.6.23+
// see https://github.com/leeoniya/uPlot/issues/749
minMax = uPlot.rangeAsinh(dataMin!, dataMax!, logBase, false);
minMax = uPlot.rangeAsinh(dataMin!, dataMax!, logBase, true);
} else {
// @ts-ignore here we may use hardMin / hardMax to make sure any extra padding is computed from a more accurate delta
minMax = uPlot.rangeNum(hardMinOnly ? hardMin : dataMin, hardMaxOnly ? hardMax : dataMax, rangeConfig);

8
packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
View File

@@ -49,8 +49,6 @@ export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsCo
dataFrameFieldIndex?: DataFrameFieldIndex;
theme: GrafanaTheme2;
value?: uPlot.Series.Value;
gapsRefiner?: uPlot.Series.GapsRefiner;
}
export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
@@ -73,7 +71,6 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
pxAlign,
spanNulls,
show = true,
gapsRefiner,
} = this.props;
let lineConfig: Partial<Series> = {};
@@ -148,7 +145,6 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
pxAlign,
show,
fill: this.getFill(),
gaps: gapsRefiner ?? ((u, seriesIdx, idx0, idx1, gaps) => gaps),
...lineConfig,
...pointsConfig,
};
@@ -254,8 +250,8 @@ function mapDrawStyleToPathBuilder(
builders = {
linear: pathBuilders.linear!(),
smooth: pathBuilders.spline!(),
stepBefore: pathBuilders.stepped!({ align: -1 }),
stepAfter: pathBuilders.stepped!({ align: 1 }),
stepBefore: pathBuilders.stepped!({ align: -1, extend: true }),
stepAfter: pathBuilders.stepped!({ align: 1, extend: true }),
};
}

8
public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
View File

@@ -133,7 +133,6 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 1`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -287,7 +286,6 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 2`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -441,7 +439,6 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 3`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -595,7 +592,6 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 1`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -749,7 +745,6 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 2`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -903,7 +898,6 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 3`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -1057,7 +1051,6 @@ exports[`BarChart utils preparePlotConfigBuilder value visibility 1`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",
@@ -1211,7 +1204,6 @@ exports[`BarChart utils preparePlotConfigBuilder value visibility 2`] = `
{
"facets": undefined,
"fill": [Function],
"gaps": [Function],
"paths": [Function],
"points": {
"fill": "#808080",

2
public/app/plugins/panel/heatmap/utils.ts
View File

@@ -749,8 +749,6 @@ export function heatmapPathsPoints(opts: PointsBuilderOpts, exemplarColor: strin
) => {
//console.time('heatmapPathsSparse');
[dataX, dataY] = dataY as unknown as number[][];
let points = new Path2D();
let fillPaths = [points];
let fillPalette = [exemplarColor ?? 'rgba(255,0,255,0.7)'];

14
yarn.lock
View File

@@ -4354,7 +4354,7 @@ __metadata:
tinycolor2: 1.4.2
tslib: 2.4.1
typescript: 4.8.4
uplot: 1.6.22
uplot: 1.6.23
xss: 1.0.14
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -4819,7 +4819,7 @@ __metadata:
tinycolor2: 1.4.2
tslib: 2.4.1
typescript: 4.8.4
uplot: 1.6.22
uplot: 1.6.23
uuid: 9.0.0
webpack: 5.74.0
peerDependencies:
@@ -21795,7 +21795,7 @@ __metadata:
ts-node: 10.9.1
tslib: 2.4.1
typescript: 4.8.4
uplot: 1.6.22
uplot: 1.6.23
uuid: 9.0.0
vendor: "link:./public/vendor"
visjs-network: 4.25.0
@@ -37905,10 +37905,10 @@ __metadata:
languageName: node
linkType: hard
"uplot@npm:1.6.22":
version: 1.6.22
resolution: "uplot@npm:1.6.22"
checksum: 4a73835b93fcbd0f62d99c062aac75d0d9d2e3f383fcc77b022abbecd936cd989188ed60da756e45d4306353c6d0e38baaac73b372a674d9e2f47bff7f7d11a6
"uplot@npm:1.6.23":
version: 1.6.23
resolution: "uplot@npm:1.6.23"
checksum: 4fd2b6340b09f8cbff5c136238962c4e31621267a17c321e0183d021c72338973ba16fd943858248983edc4cf9307e352f99e806b6ffb5eaff7a132adaff2bff
languageName: node
linkType: hard