GraphNG: uPlot 1.6.2 (#30521)

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",

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) {

packages/grafana-ui/src/components/Sparkline/Sparkline.tsx

@@ -162,7 +162,6 @@ export class Sparkline extends PureComponent<Props, State> {
       <UPlotChart
         data={{
           frame: data,
-          isGap: () => true, // any null is a gap
           getDataFrameFieldIndex: () => undefined,
         }}
         config={configBuilder}

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

packages/grafana-ui/src/components/uPlot/Plot.tsx

 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<PlotProps> = (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<PlotProps> = (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<PlotProps> = (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;
   }

packages/grafana-ui/src/components/uPlot/types.ts

 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<P, T> {
 
 export interface AlignedFrameWithGapTest {
   frame: DataFrame;
-  isGap: Series.isGap;
   getDataFrameFieldIndex: (alignedFieldIndex: number) => DataFrameFieldIndex | undefined;
 }

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"