GraphNG: only initialize path builders once (#29863)

packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts

@@ -3,9 +3,6 @@ import uPlot, { Series } from 'uplot';
 import { DrawStyle, LineConfig, AreaConfig, PointsConfig, PointVisibility, LineInterpolation } from '../config';
 import { PlotConfigBuilder } from '../types';
 
-const barWidthFactor = 0.6;
-const barMaxWidth = Infinity;
-
 export interface SeriesProps extends LineConfig, AreaConfig, PointsConfig {
   drawStyle: DrawStyle;
   scaleKey: string;
@@ -35,19 +32,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       lineConfig.stroke = lineColor;
       lineConfig.width = lineWidth;
       lineConfig.paths = (self: uPlot, seriesIdx: number, idx0: number, idx1: number) => {
-        let builderConfig;
-
-        if (drawStyle === DrawStyle.Bars) {
-          builderConfig = { size: [barWidthFactor, barMaxWidth] };
-        } else if (drawStyle === DrawStyle.Line) {
-          if (lineInterpolation === LineInterpolation.StepBefore) {
-            builderConfig = { align: -1 };
-          } else if (lineInterpolation === LineInterpolation.StepAfter) {
-            builderConfig = { align: 1 };
-          }
-        }
-
-        let pathsBuilder = mapDrawStyleToPathBuilder(drawStyle, lineInterpolation, builderConfig);
+        let pathsBuilder = mapDrawStyleToPathBuilder(drawStyle, lineInterpolation);
         return pathsBuilder(self, seriesIdx, idx0, idx1);
       };
     }
@@ -98,44 +83,50 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
   }
 }
 
-enum PathBuilder {
-  Linear,
-  Bars,
-  Spline,
-  Stepped,
+interface PathBuilders {
+  bars: Series.PathBuilder;
+  linear: Series.PathBuilder;
+  smooth: Series.PathBuilder;
+  stepBefore: Series.PathBuilder;
+  stepAfter: Series.PathBuilder;
 }
 
-function getPathBuilder(builder: PathBuilder): (opts: any) => Series.PathBuilder {
-  const pathBuilders = uPlot.paths;
-
-  switch (builder) {
-    case PathBuilder.Bars:
-      return pathBuilders.bars!;
-    case PathBuilder.Linear:
-      return pathBuilders.linear!;
-    case PathBuilder.Spline:
-      return pathBuilders.spline!;
-    case PathBuilder.Stepped:
-      return pathBuilders.stepped!;
-    default:
-      return pathBuilders.linear!;
+let builders: PathBuilders | undefined = undefined;
+
+function mapDrawStyleToPathBuilder(
+  style: DrawStyle,
+  lineInterpolation?: LineInterpolation,
+  opts?: any
+): Series.PathBuilder {
+  // This should be global static, but Jest initalization was failing so we lazy load to avoid the issue
+  if (!builders) {
+    const pathBuilders = uPlot.paths;
+    const barWidthFactor = 0.6;
+    const barMaxWidth = Infinity;
+
+    builders = {
+      bars: pathBuilders.bars!({ size: [barWidthFactor, barMaxWidth] }),
+      linear: pathBuilders.linear!(),
+      smooth: pathBuilders.spline!(),
+      stepBefore: pathBuilders.stepped!({ align: -1 }),
+      stepAfter: pathBuilders.stepped!({ align: 1 }),
+    };
   }
-}
-
-function mapDrawStyleToPathBuilder(style: DrawStyle, lineInterpolation?: LineInterpolation, opts?: any) {
-  let builder = getPathBuilder(PathBuilder.Linear);
 
   if (style === DrawStyle.Bars) {
-    builder = getPathBuilder(PathBuilder.Bars);
-  } else if (style === DrawStyle.Line) {
+    return builders.bars;
+  }
+  if (style === DrawStyle.Line) {
     if (lineInterpolation === LineInterpolation.StepBefore) {
-      builder = getPathBuilder(PathBuilder.Stepped);
-    } else if (lineInterpolation === LineInterpolation.StepAfter) {
-      builder = getPathBuilder(PathBuilder.Stepped);
-    } else if (lineInterpolation === LineInterpolation.Smooth) {
-      builder = getPathBuilder(PathBuilder.Spline);
+      return builders.stepBefore;
+    }
+    if (lineInterpolation === LineInterpolation.StepAfter) {
+      return builders.stepAfter;
+    }
+    if (lineInterpolation === LineInterpolation.Smooth) {
+      return builders.smooth;
     }
   }
 
-  return builder(opts);
+  return builders.linear; // the default
 }