From 87ef5598e68c73d107a614ad48ecc0f45b4e821c Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Thu, 21 Jan 2021 16:10:50 -0600 Subject: [PATCH] GraphNG: uPlot 1.6.2 (#30521) --- packages/grafana-ui/package.json | 2 +- .../src/components/GraphNG/utils.ts | 3 +-- .../src/components/Sparkline/Sparkline.tsx | 1 - .../src/components/uPlot/Plot.test.tsx | 1 - .../grafana-ui/src/components/uPlot/Plot.tsx | 26 +++++++------------ .../grafana-ui/src/components/uPlot/types.ts | 3 +-- yarn.lock | 8 +++--- 7 files changed, 16 insertions(+), 28 deletions(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 37e0f16aed7..599290adaf9 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -72,7 +72,7 @@ "react-transition-group": "4.4.1", "slate": "0.47.8", "tinycolor2": "1.4.1", - "uplot": "1.6.1" + "uplot": "1.6.2" }, "devDependencies": { "@rollup/plugin-commonjs": "16.0.0", diff --git a/packages/grafana-ui/src/components/GraphNG/utils.ts b/packages/grafana-ui/src/components/GraphNG/utils.ts index d6ee0a3dbb1..3e2416a00cc 100755 --- a/packages/grafana-ui/src/components/GraphNG/utils.ts +++ b/packages/grafana-ui/src/components/GraphNG/utils.ts @@ -118,7 +118,7 @@ export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers): } // do the actual alignment (outerJoin on the first arrays) - let { data: alignedData, isGap } = uPlot.join(valuesFromFrames, nullModes); + let alignedData = uPlot.join(valuesFromFrames, nullModes); if (alignedData!.length !== sourceFields.length) { throw new Error('outerJoinValues lost a field?'); @@ -144,7 +144,6 @@ export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers): }; }), }, - isGap, getDataFrameFieldIndex: (alignedFieldIndex: number) => { const index = sourceFieldsRefs[alignedFieldIndex]; if (!index) { diff --git a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx index 746d2cf3b37..cd4e1c6c78d 100755 --- a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx +++ b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx @@ -162,7 +162,6 @@ export class Sparkline extends PureComponent { true, // any null is a gap getDataFrameFieldIndex: () => undefined, }} config={configBuilder} diff --git a/packages/grafana-ui/src/components/uPlot/Plot.test.tsx b/packages/grafana-ui/src/components/uPlot/Plot.test.tsx index 04c9ab68995..03f5dc2df94 100644 --- a/packages/grafana-ui/src/components/uPlot/Plot.test.tsx +++ b/packages/grafana-ui/src/components/uPlot/Plot.test.tsx @@ -224,7 +224,6 @@ describe('UPlotChart', () => { const createPlotData = (frame: DataFrame): AlignedFrameWithGapTest => { return { frame, - isGap: () => false, getDataFrameFieldIndex: () => undefined, }; }; diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx index 36f7fbb9ada..7edd5dd5ac0 100755 --- a/packages/grafana-ui/src/components/uPlot/Plot.tsx +++ b/packages/grafana-ui/src/components/uPlot/Plot.tsx @@ -1,9 +1,9 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; -import uPlot, { AlignedData, AlignedDataWithGapTest, Options } from 'uplot'; +import uPlot, { AlignedData, Options } from 'uplot'; import { buildPlotContext, PlotContext } from './context'; import { pluginLog } from './utils'; import { usePlotConfig } from './hooks'; -import { AlignedFrameWithGapTest, PlotProps } from './types'; +import { PlotProps } from './types'; import { DataFrame } from '@grafana/data'; import { UPlotConfigBuilder } from './config/UPlotConfigBuilder'; import usePrevious from 'react-use/lib/usePrevious'; @@ -39,7 +39,7 @@ export const UPlotChart: React.FC = (props) => { // 1. When config is ready and there is no uPlot instance, create new uPlot and return if (isConfigReady && !plotInstance.current) { - plotInstance.current = initializePlot(prepareData(props.data), currentConfig.current, canvasRef.current); + plotInstance.current = initializePlot(prepareData(props.data.frame), currentConfig.current, canvasRef.current); setIsPlotReady(true); return; } @@ -60,12 +60,12 @@ export const UPlotChart: React.FC = (props) => { pluginLog('uPlot core', false, 'destroying instance'); plotInstance.current.destroy(); } - plotInstance.current = initializePlot(prepareData(props.data), currentConfig.current, canvasRef.current); + plotInstance.current = initializePlot(prepareData(props.data.frame), currentConfig.current, canvasRef.current); return; } // 4. Otherwise, assume only data has changed and update uPlot data - updateData(props.data.frame, props.config, plotInstance.current, prepareData(props.data)); + updateData(props.data.frame, props.config, plotInstance.current, prepareData(props.data.frame)); }, [props, isConfigReady]); // When component unmounts, clean the existing uPlot instance @@ -86,24 +86,16 @@ export const UPlotChart: React.FC = (props) => { ); }; -function prepareData(data: AlignedFrameWithGapTest) { - return { - data: data.frame.fields.map((f) => f.values.toArray()) as AlignedData, - isGap: data.isGap, - }; +function prepareData(frame: DataFrame) { + return frame.fields.map((f) => f.values.toArray()) as AlignedData; } -function initializePlot(data: AlignedDataWithGapTest, config: Options, el: HTMLDivElement) { +function initializePlot(data: AlignedData, config: Options, el: HTMLDivElement) { pluginLog('UPlotChart: init uPlot', false, 'initialized with', data, config); return new uPlot(config, data, el); } -function updateData( - frame: DataFrame, - config: UPlotConfigBuilder, - plotInstance?: uPlot, - data?: AlignedDataWithGapTest | null -) { +function updateData(frame: DataFrame, config: UPlotConfigBuilder, plotInstance?: uPlot, data?: AlignedData | null) { if (!plotInstance || !data) { return; } diff --git a/packages/grafana-ui/src/components/uPlot/types.ts b/packages/grafana-ui/src/components/uPlot/types.ts index b7fb7d8a82c..1985ecade1a 100755 --- a/packages/grafana-ui/src/components/uPlot/types.ts +++ b/packages/grafana-ui/src/components/uPlot/types.ts @@ -1,5 +1,5 @@ import React from 'react'; -import uPlot, { Options, Series, Hooks } from 'uplot'; +import uPlot, { Options, Hooks } from 'uplot'; import { DataFrame, DataFrameFieldIndex, TimeRange, TimeZone } from '@grafana/data'; import { UPlotConfigBuilder } from './config/UPlotConfigBuilder'; @@ -32,6 +32,5 @@ export abstract class PlotConfigBuilder { export interface AlignedFrameWithGapTest { frame: DataFrame; - isGap: Series.isGap; getDataFrameFieldIndex: (alignedFieldIndex: number) => DataFrameFieldIndex | undefined; } diff --git a/yarn.lock b/yarn.lock index 972add0c0f7..ec0b1ab10e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25891,10 +25891,10 @@ update-notifier@^2.5.0: semver-diff "^2.0.0" xdg-basedir "^3.0.0" -uplot@1.6.1: - version "1.6.1" - resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.1.tgz#68f2e5118c2b66490ba097155e0a753331fc2e4d" - integrity sha512-wg6CVWEq9WDHssw3jd0jMmJ7dWSVmfaYazcuad4d3cyiJoTxcSjUEp5Q9TiDzmPhJASjk77orh2+r/6WS9Uz7A== +uplot@1.6.2: + version "1.6.2" + resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.2.tgz#9dc8e9ff6e35e1ed05e4623ba56db6f5e050bf01" + integrity sha512-4GMn3ecJJetC5SGvLWK3h4uOerx+ayRzByWk5xg0HgaqnFI/MqGIJup7GVngF51so6Adyco/EN6z2oenSgoXkg== upper-case@^1.1.1: version "1.1.3"