points 그래프 데이터 처리

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

@@ -109,6 +109,7 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
 
   constructor(props: GraphNGProps) {
     super(props);
+    // console.log(props);
     let state = this.prepState(props);
     state.alignedData = state.config!.prepData!([state.alignedFrame]) as AlignedData;
     this.state = state;

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

@@ -28,7 +28,6 @@ export const TimeSeriesPanel = ({
   const preparePlotFrame =
     fieldConfig.defaults.custom.drawStyle === DrawStyle.Points ? preparePlotFramePoints : undefined;
   if (fieldConfig.defaults.custom.drawStyle === DrawStyle.Points) {
-    console.log('points');
   }
 
   // Vertical orientation is not available for users through config.

public/app/plugins/panel/timeseries/utils.ts

@@ -7,6 +7,8 @@ import {
   isBooleanUnit,
   TimeRange,
   cacheFieldDisplayNames,
+  fieldMatchers,
+  FieldMatcherID,
 } from '@grafana/data';
 import { convertFieldType } from '@grafana/data/src/transformations/transformers/convertFieldType';
 import { applyNullInsertThreshold } from '@grafana/data/src/transformations/transformers/nulls/nullInsertThreshold';
@@ -68,12 +70,83 @@ function reEnumFields(frames: DataFrame[]): DataFrame[] {
   return frames2;
 }
 
+// 그룹화 되어 있는 값들을 풀어주는 함수(포인트 그래프에 제한적)
+function assembleData(series: DataFrame[]): DataFrame[] | null {
+  let timeField: Field | null = null; // 시간 필드
+  const matchTimefn = fieldMatchers.get(FieldMatcherID.firstTimeField).get({});
+  for (let frame of series) {
+    for (let field of frame.fields) {
+      if (matchTimefn(field, frame, series)) {
+        timeField = field;
+        break;
+      }
+    }
+  }
+
+  if (!timeField) {
+    return null;
+  }
+
+  const fields = series[0].fields.filter((f) => f.type === FieldType.string);
+  if (fields.length === 0) {
+    return null;
+  }
+
+  const alignedFieldTimes: number[] = [];
+  const alignedFieldValues: number[] = [];
+  const alignedFieldIDs: number[] = [];
+
+  timeField.values.forEach((v, vi) => {
+    const arrValues = JSON.parse(fields[0].values[vi]);
+    const arrIDs = JSON.parse(fields[1].values[vi]);
+    arrValues.forEach((f: number, i: number) => {
+      alignedFieldTimes.push(v);
+      alignedFieldValues.push(f);
+      alignedFieldIDs.push(arrIDs[i]);
+    });
+  });
+
+  const newFieldTime: Field = {
+    values: alignedFieldTimes,
+    name: timeField.name,
+    type: timeField.type,
+    config: timeField.config,
+    state: timeField.state,
+    display: timeField.display,
+  };
+
+  const newFieldValues: Field = {
+    values: alignedFieldValues,
+    name: fields[0].name,
+    type: FieldType.number,
+    config: fields[0].config,
+    state: fields[0].state,
+    display: fields[0].display,
+  };
+
+  const newFieldIDs: Field = {
+    values: alignedFieldIDs,
+    name: fields[1].name,
+    type: FieldType.number,
+    config: fields[1].config,
+    state: fields[1].state,
+    display: fields[1].display,
+  };
+
+  const newFrame: DataFrame = {
+    //length: series[0].length,
+    fields: [newFieldTime, newFieldValues, newFieldIDs],
+    length: 3,
+  };
+
+  return [newFrame];
+}
+
 export function preparePlotFramePoints(frames: DataFrame[], dimFields: XYFieldMatchers, timeRange?: TimeRange | null) {
   const dataFrame: DataFrame = {
-    ...frames[0],
-    fields: frames[0].fields.filter((f) => f.type === FieldType.number),
+    length: frames[0].length,
+    fields: frames[0].fields,
   };
-  console.log(dataFrame);
   return dataFrame;
 }
 
@@ -91,6 +164,11 @@ export function prepareGraphableFields(
     return null;
   }
 
+  const pointSeries = assembleData(series)!;
+  if (pointSeries) {
+    series = pointSeries;
+  }
+
   cacheFieldDisplayNames(series);
 
   let useNumericX = xNumFieldIdx != null;
@@ -130,7 +208,6 @@ export function prepareGraphableFields(
   let copy: Field;
 
   const frames: DataFrame[] = [];
-
   for (let frame of series) {
     const fields: Field[] = [];