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

Stat: fix shared y scale range, reduce plot re-inits (#37324)

Browse Source
This commit is contained in:
Leon Sorokin 2021-07-29 00:42:18 -05:00 committed by GitHub
parent ced26bc624
commit 78f46e28c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
View File

@ -1,8 +1,9 @@
import React, { PureComponent } from 'react';
import { AlignedData } from 'uplot';
import { AlignedData, Range } from 'uplot';
import {
compareDataFrameStructures,
DataFrame,
Field,
FieldConfig,
FieldSparkline,
FieldType,
@ -21,6 +22,7 @@ import { UPlotChart } from '../uPlot/Plot';
import { Themeable2 } from '../../types';
import { preparePlotData } from '../uPlot/utils';
import { preparePlotFrame } from './utils';
import { isEqual } from 'lodash';
export interface SparklineProps extends Themeable2 {
width: number;
@ -78,8 +80,8 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
if (prevProps.sparkline !== this.props.sparkline) {
rebuildConfig = !compareDataFrameStructures(this.state.alignedDataFrame, prevState.alignedDataFrame);
} else if (prevProps.config !== this.props.config) {
rebuildConfig = true;
} else {
rebuildConfig = !isEqual(prevProps.config, this.props.config);
}
if (rebuildConfig) {
@ -87,6 +89,15 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
}
}
getYRange(field: Field) {
let { min, max } = this.state.alignedDataFrame.fields[1].state?.range!;
return [
Math.max(min!, field.config.min ?? -Infinity),
Math.min(max!, field.config.max ?? Infinity),
] as Range.MinMax;
}
prepareConfig(data: DataFrame) {
const { theme } = this.props;
const builder = new UPlotConfigBuilder();
@ -140,9 +151,7 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
scaleKey,
orientation: ScaleOrientation.Vertical,
direction: ScaleDirection.Up,
min: field.config.min,
max: field.config.max,
getDataMinMax: () => field.state?.range,
range: () => this.getYRange(field),
});
builder.addAxis({
@ -156,6 +165,7 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
const pointsMode = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
builder.addSeries({
pxAlign: false,
scaleKey,
theme,
drawStyle: customConfig.drawStyle!,

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

@ -2,7 +2,7 @@ import uPlot, { Scale, Range } from 'uplot';
import { PlotConfigBuilder } from '../types';
import { ScaleOrientation, ScaleDirection } from '../config';
import { ScaleDistribution } from '../models.gen';
import { isBooleanUnit, NumericRange } from '@grafana/data';
import { isBooleanUnit } from '@grafana/data';
export interface ScaleProps {
scaleKey: string;
@ -16,7 +16,6 @@ export interface ScaleProps {
orientation: ScaleOrientation;
direction: ScaleDirection;
log?: number;
getDataMinMax?: () => NumericRange | undefined;
}
export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
@ -63,15 +62,6 @@ export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
// uPlot range function
const rangeFn = (u: uPlot, dataMin: number, dataMax: number, scaleKey: string) => {
let { getDataMinMax } = this.props;
// cumulative data min/max across multiple charts, usually via VizRepeater
if (getDataMinMax) {
let dataRange = getDataMinMax()!;
dataMin = dataRange.min!;
dataMax = dataRange.max!;
}
const scale = u.scales[scaleKey];
let minMax: uPlot.Range.MinMax = [dataMin, dataMax];