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

GraphNG: Load uPlot path builders lazily (#29813)

Browse Source
This commit is contained in:
Dominik Prokop 2020-12-14 15:45:03 +01:00 committed by GitHub
parent 93649e1fb5
commit e33c7cfbd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/grafana-ui/src/components/uPlot/Plot.test_skip.tsx → packages/grafana-ui/src/components/uPlot/Plot.test.tsx
View File

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

@ -3,17 +3,9 @@ import uPlot, { Series } from 'uplot';
import { DrawStyle, LineConfig, AreaConfig, PointsConfig, PointVisibility, LineInterpolation } from '../config';
import { PlotConfigBuilder } from '../types';
const pathBuilders = uPlot.paths;
const barWidthFactor = 0.6;
const barMaxWidth = Infinity;
const barsBuilder = pathBuilders.bars!({ size: [barWidthFactor, barMaxWidth] });
const linearBuilder = pathBuilders.linear!();
const smoothBuilder = pathBuilders.spline!();
const stepBeforeBuilder = pathBuilders.stepped!({ align: -1 });
const stepAfterBuilder = pathBuilders.stepped!({ align: 1 });
export interface SeriesProps extends LineConfig, AreaConfig, PointsConfig {
drawStyle: DrawStyle;
scaleKey: string;
@ -43,20 +35,19 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
lineConfig.stroke = lineColor;
lineConfig.width = lineWidth;
lineConfig.paths = (self: uPlot, seriesIdx: number, idx0: number, idx1: number) => {
let pathsBuilder = linearBuilder;
let builderConfig;
if (drawStyle === DrawStyle.Bars) {
pathsBuilder = barsBuilder;
builderConfig = { size: [barWidthFactor, barMaxWidth] };
} else if (drawStyle === DrawStyle.Line) {
if (lineInterpolation === LineInterpolation.StepBefore) {
pathsBuilder = stepBeforeBuilder;
builderConfig = { align: -1 };
} else if (lineInterpolation === LineInterpolation.StepAfter) {
pathsBuilder = stepAfterBuilder;
} else if (lineInterpolation === LineInterpolation.Smooth) {
pathsBuilder = smoothBuilder;
builderConfig = { align: 1 };
}
}
let pathsBuilder = mapDrawStyleToPathBuilder(drawStyle, lineInterpolation, builderConfig);
return pathsBuilder(self, seriesIdx, idx0, idx1);
};
}
@ -99,3 +90,45 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
};
}
}
enum PathBuilder {
Linear,
Bars,
Spline,
Stepped,
}
function getPathBuilder(builder: PathBuilder): (opts: any) => Series.PathBuilder {
const pathBuilders = uPlot.paths;
switch (builder) {
case PathBuilder.Bars:
return pathBuilders.bars!;
case PathBuilder.Linear:
return pathBuilders.linear!;
case PathBuilder.Spline:
return pathBuilders.spline!;
case PathBuilder.Stepped:
return pathBuilders.stepped!;
default:
return pathBuilders.linear!;
}
}
function mapDrawStyleToPathBuilder(style: DrawStyle, lineInterpolation?: LineInterpolation, opts?: any) {
let builder = getPathBuilder(PathBuilder.Linear);
if (style === DrawStyle.Bars) {
builder = getPathBuilder(PathBuilder.Bars);
} else if (style === DrawStyle.Line) {
if (lineInterpolation === LineInterpolation.StepBefore) {
builder = getPathBuilder(PathBuilder.Stepped);
} else if (lineInterpolation === LineInterpolation.StepAfter) {
builder = getPathBuilder(PathBuilder.Stepped);
} else if (lineInterpolation === LineInterpolation.Smooth) {
builder = getPathBuilder(PathBuilder.Spline);
}
}
return builder(opts);
}