diff --git a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx index ae91df18434..3354e1eca3c 100755 --- a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx +++ b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx @@ -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 { 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 { } } + 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 { 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 { const pointsMode = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints; builder.addSeries({ + pxAlign: false, scaleKey, theme, drawStyle: customConfig.drawStyle!, diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts index 425cfd5efd4..1f7e5aee56b 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts @@ -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 { @@ -63,15 +62,6 @@ export class UPlotScaleBuilder extends PlotConfigBuilder { // 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];