TimeSeries: Fix series rendering with data links and extra fields (#8…

…6007)

public/app/core/components/GraphNG/GraphNG.tsx

@@ -83,6 +83,11 @@ export interface GraphNGState {
   config?: UPlotConfigBuilder;
 }
 
+const defaultMatchers = {
+  x: fieldMatchers.get(FieldMatcherID.firstTimeField).get({}),
+  y: fieldMatchers.get(FieldMatcherID.byTypes).get(new Set([FieldType.number, FieldType.enum])),
+};
+
 /**
  * "Time as X" core component, expects ascending x
  */
@@ -102,21 +107,21 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
   prepState(props: GraphNGProps, withConfig = true) {
     let state: GraphNGState = null as any;
 
-    const { frames, fields, preparePlotFrame, replaceVariables, dataLinkPostProcessor } = props;
+    const { frames, fields = defaultMatchers, preparePlotFrame, replaceVariables, dataLinkPostProcessor } = props;
 
     const preparePlotFrameFn = preparePlotFrame ?? defaultPreparePlotFrame;
 
-    const matchYDefault = fieldMatchers.get(FieldMatcherID.byTypes).get(new Set([FieldType.number, FieldType.enum]));
-
-    // if there are data links, we have to keep all fields so they're index-matched, then filter out dimFields.y
     const withLinks = frames.some((frame) => frame.fields.some((field) => (field.config.links?.length ?? 0) > 0));
 
-    const dimFields = fields ?? {
-      x: fieldMatchers.get(FieldMatcherID.firstTimeField).get({}),
-      y: withLinks ? () => true : matchYDefault,
-    };
-
-    const alignedFrame = preparePlotFrameFn(frames, dimFields, props.timeRange);
+    const alignedFrame = preparePlotFrameFn(
+      frames,
+      {
+        ...fields,
+        // if there are data links, keep all fields during join so they're index-matched
+        y: withLinks ? () => true : fields.y,
+      },
+      props.timeRange
+    );
 
     pluginLog('GraphNG', false, 'data aligned', alignedFrame);
 
@@ -147,10 +152,10 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
           );
         });
 
-        // filter join field and dimFields.y
+        // filter join field and fields.y
         alignedFrameFinal = {
           ...alignedFrame,
-          fields: alignedFrame.fields.filter((field, i) => i === 0 || dimFields.y(field, alignedFrame, [alignedFrame])),
+          fields: alignedFrame.fields.filter((field, i) => i === 0 || fields.y(field, alignedFrame, [alignedFrame])),
         };
       }