GraphNG: Ignore string fields when building data for uPlot in GraphNG (#32150) (#32151)

(cherry picked from commit fb337e5c1d)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

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

@@ -7,6 +7,7 @@ import {
   DataFrameFieldIndex,
   FieldMatcherID,
   fieldMatchers,
+  FieldType,
   TimeRange,
   TimeZone,
 } from '@grafana/data';
@@ -89,7 +90,7 @@ class UnthemedGraphNG extends React.Component<GraphNGProps, GraphNGState> {
 
     return {
       ...state,
-      data: preparePlotData(frame),
+      data: preparePlotData(frame, [FieldType.string]),
       alignedDataFrame: frame,
       seriesToDataFrameFieldIndexMap: frame.fields.map((f) => f.state!.origin!),
       dimFields,

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

@@ -33,21 +33,31 @@ export function buildPlotConfig(props: PlotProps, plugins: Record<string, PlotPl
 }
 
 /** @internal */
-export function preparePlotData(frame: DataFrame): AlignedData {
+export function preparePlotData(frame: DataFrame, ignoreFieldTypes?: FieldType[]): AlignedData {
-  return frame.fields.map((f) => {
+  const result: any[] = [];
+
+  for (let i = 0; i < frame.fields.length; i++) {
+    const f = frame.fields[i];
+
     if (f.type === FieldType.time) {
       if (f.values.length > 0 && typeof f.values.get(0) === 'string') {
         const timestamps = [];
         for (let i = 0; i < f.values.length; i++) {
           timestamps.push(dateTime(f.values.get(i)).valueOf());
         }
-        return timestamps;
+        result.push(timestamps);
+        continue;
       }
-      return f.values.toArray();
+      result.push(f.values.toArray());
+      continue;
     }
 
-    return f.values.toArray();
+    if (ignoreFieldTypes && ignoreFieldTypes.indexOf(f.type) > -1) {
-  }) as AlignedData;
+      continue;
+    }
+    result.push(f.values.toArray());
+  }
+  return result as AlignedData;
 }
 
 // Dev helpers