GraphNG: uPlot 1.6.10 (#34759)

packages/grafana-data/src/transformations/transformers/joinDataFrames.ts

@@ -217,7 +217,7 @@ export function outerJoinDataFrames(options: JoinOptions): DataFrame | undefined
 //--------------------------------------------------------------------------------
 
 // Copied from uplot
-export type AlignedData = [number[], ...Array<Array<number | null>>];
+export type AlignedData = [number[], ...Array<Array<number | null | undefined>>];
 
 // nullModes
 const NULL_REMOVE = 0; // nulls are converted to undefined (e.g. for spanGaps: true)

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.9"
+    "uplot": "1.6.10"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "16.0.0",

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

@@ -51,7 +51,7 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
       return;
     }
     this.props.config.addHook('setSize', (u) => {
-      const canvas = u.root.querySelector<HTMLDivElement>('.u-over');
+      const canvas = u.over;
       if (!canvas) {
         return;
       }

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx

@@ -53,12 +53,12 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
     };
 
     if (plotCtx && plotCtx.plot) {
-      plotCtx.plot.root.querySelector('.u-over')!.addEventListener('mouseleave', plotMouseLeave);
+      plotCtx.plot.over.addEventListener('mouseleave', plotMouseLeave);
     }
 
     return () => {
       if (plotCtx && plotCtx.plot) {
-        plotCtx.plot.root.querySelector('.u-over')!.removeEventListener('mouseleave', plotMouseLeave);
+        plotCtx.plot.over.removeEventListener('mouseleave', plotMouseLeave);
       }
     };
   }, [plotCtx.plot?.root, setCoords]);

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

@@ -119,8 +119,8 @@ export function findMidPointYPosition(u: uPlot, idx: number) {
   for (let i = 1; i < u.data.length; i++) {
     const sData = u.data[i];
     const sVal = sData[idx];
-    if (sVal !== null) {
-      if (max === null) {
+    if (sVal != null) {
+      if (max == null) {
         max = sVal;
       } else {
         if (sVal > max) {
@@ -128,7 +128,7 @@ export function findMidPointYPosition(u: uPlot, idx: number) {
           sMaxIdx = i;
         }
       }
-      if (min === null) {
+      if (min == null) {
         min = sVal;
       } else {
         if (sVal < min) {
@@ -139,10 +139,10 @@ export function findMidPointYPosition(u: uPlot, idx: number) {
     }
   }
 
-  if (min === null && max === null) {
+  if (min == null && max == null) {
     // no tooltip to show
     y = undefined;
-  } else if (min !== null && max !== null) {
+  } else if (min != null && max != null) {
     // find median position
     y = (u.valToPos(min, u.series[sMinIdx].scale!) + u.valToPos(max, u.series[sMaxIdx].scale!)) / 2;
   } else {

public/app/plugins/panel/barchart/bars.ts

@@ -72,7 +72,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
         walkTwo(groupWidth, barWidth, sidx - 1, numGroups, barsPerGroup, xDim, null, (ix, x0, wid) => {
           let left = Math.round(xOff + (_dir === 1 ? x0 : xDim - x0 - wid));
           let barWid = Math.round(wid);
-          const canvas = u.root.querySelector<HTMLDivElement>('.u-over');
+          const canvas = u.over;
           const bbox = canvas?.getBoundingClientRect();
 
           if (dataY[ix] != null) {
@@ -291,7 +291,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
   barMark.style.background = 'rgba(255,255,255,0.4)';
 
   const init = (u: uPlot) => {
-    let over = u.root.querySelector('.u-over')! as HTMLElement;
+    let over = u.over;
     over.style.overflow = 'hidden';
     over.appendChild(barMark);
   };

public/app/plugins/panel/state-timeline/timeline.ts

@@ -348,7 +348,7 @@ export function getConfig(opts: TimelineCoreOptions) {
         };
 
   const init = (u: uPlot) => {
-    let over = u.root.querySelector('.u-over')! as HTMLElement;
+    let over = u.over;
     over.style.overflow = 'hidden';
     hoverMarks.forEach((m) => {
       over.appendChild(m);

public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx

@@ -75,7 +75,7 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
     };
 
     config.addHook('init', (u) => {
-      const canvas = u.root.querySelector<HTMLDivElement>('.u-over');
+      const canvas = u.over;
       plotCanvas.current = canvas || undefined;
       plotCanvas.current?.addEventListener('mousedown', onMouseCapture);
       plotCanvas.current?.addEventListener('mouseleave', () => {});

yarn.lock

@@ -22041,10 +22041,10 @@ update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-uplot@1.6.9:
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.9.tgz#0f10e10b5882cb80eb58d63f870b8a77e8d95962"
-  integrity sha512-uWIegRdqbqJwnB5SDBt29lyJIgHLIqt5AnwlLGxuA3gKKXGtY7d68RR6oDF2u5pK9jpIb1djrQnm5n0BiAnUgA==
+uplot@1.6.10:
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.10.tgz#6dd1adf3180203777f5c369ef6f6aab312661943"
+  integrity sha512-9MIscZoF+gA6Y6EAFTZl3zBU4MDaSbJ9Qy4nQ3LaXifGuluAhq4UuQOADKC6qZJjC9QoepeZ2eh7LpJn2xbLSQ==
 
 upper-case@^1.1.1:
   version "1.1.3"