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

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 }),
};
}