From b9ff8908d7c03ccb63623a806e2c10dfb8cdb826 Mon Sep 17 00:00:00 2001
From: devhong <popodaddy@gmail.com>
Date: Wed, 2 Apr 2025 16:11:59 +0900
Subject: [PATCH] =?UTF-8?q?points=20=EA=B7=B8=EB=9E=98=ED=94=84=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/core/components/GraphNG/GraphNG.tsx   |  1 +
 .../panel/timeseries/TimeSeriesPanel.tsx      |  1 -
 public/app/plugins/panel/timeseries/utils.ts  | 85 ++++++++++++++++++-
 3 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx
index 8a8904f2..a5201091 100644
--- a/public/app/core/components/GraphNG/GraphNG.tsx
+++ b/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;
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index 2e2d471e..147dc6ab 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/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.
diff --git a/public/app/plugins/panel/timeseries/utils.ts b/public/app/plugins/panel/timeseries/utils.ts
index 4d019f8e..9abf3e4f 100644
--- a/public/app/plugins/panel/timeseries/utils.ts
+++ b/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[] = [];