Tabulator와 Chart.js 활용시, Chart.js 데이터를 Tabulator에 넣는 방법.

Chart.js를 활용하여 차트를 먼저 만들어 놨는데, Tabulator를 추가할 일이 생겼다. 데이터를 처음부터 다시 가공하기 보다는 만들어 놓은 chart 데이터를 조금만 변형하면 되겠다.

---

Chart.js에서 사용중인 데이터는 다음과 같다.

ChartData : {"date":["2023-10-05 12:45:00","2023-10-05 13:00:00","2023-10-05 13:15:00","2023-10-05 13:30:00"],"TRF":[253,256,274,249],"WD_TRF":[268,261,275,274],"YD_TRF":[268,261,275,274],"PDST":[54,45,96,101],"WD_PDST":[58,25,74,101],"YD_PDST":[58,25,74,101],"LOSSOL":[114.8,39.8,140.6,20],"WD_LOSSOL":[151.8,156.5,25.4,94.4],"YD_LOSSOL":[151.8,156.5,25.4,94.4]}

이 데이터는 Tabulator에 그대로 넣을수가 없다.

---

 

Tabulator에 넣을 데이터 만들기 : map 함수를 사용하여 date 배열의 각 항목에 대해 새로운 객체를 생성하고 원하는 프로퍼티를 추가합니다. Object.keys(ChartData)를 사용하여 ChartData 객체의 프로퍼티를 반복하고, date를 제외한 각 프로퍼티의 값을 해당 인덱스에서 가져와서 새로운 객체에 추가합니다.

const gridData = ChartData.date.map(function(label, index) {
	const newObj = { "date": label };
	Object.keys(ChartData).forEach(function(key) {
		if (key !== "date") {
			newObj[key] = ChartData[key][index];
		}
	});
	return newObj;
});

자세한 설명 :

 

1. "Object.keys(ChartData)":
   - "Object.keys()" 함수는 객체의 키(프로퍼티)들을 배열로 반환합니다. 
   - "ChartData" 객체의 경우, "date", "TRF", "WD_TRF", ..., "LOSSOL" ", "YD_ LOSSOL "와 같은 키들을 가지고 있습니다.

2. ".forEach(function(key) { ... })":
   - 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드입니다. 
   - 이 부분은 "Object.keys(ChartData)"로 얻은 키 배열의 각 요소에 대해 반복하는 부분입니다.

3. "if (key !== "date") { ... }":
   - 키가 "date"가 아닌 경우에만 실행되는 조건문입니다.
   - 왜냐하면 "date"는 이미 newObj에 추가되었기 때문에 다른 키들만 남깁니다.

4. "newObj[key] = ChartData[key][index];":
   - "newObj" 객체에 새로운 프로퍼티를 추가하는 부분입니다.
   - "key"는 "TRF", "WD_TRF", ..., "YD_LOSSOL"와 같은 현재 반복 중인 키를 나타냅니다.
   - "ChartData[key][index]"는 현재 키에 해당하는 배열에서 "index" 위치에 있는 값을 가져옵니다.
   - 따라서 "newObj"에는 "date"와 각 키에 해당하는 값이 추가되어 새로운 객체가 생성됩니다.

이러한 과정을 통해 "date"와 각 키에 대응하는 값들이 있는 새로운 배열 gridData가 생성됩니다.

 

---

이렇게 만들면 다음과 같이 데이터가 만들어짐.

gridData[{"date":"2023-10-05 12:15:00","TRF ":267,"WD_TRF ":266,"YD_TRF ":266,"PDST ":91,"WD_PDST ":20,"YD_PDST ":20," LOSSOL":187.2,"WD_ LOSSOL":82.1,"YD_ LOSSOL":82.1},{"date":"2023-10-05 12:30:00","TRF ":246,"WD_TRF ":267,"YD_TRF ":267,"PDST ":59,"WD_PDST ":70,"YD_PDST ":70," LOSSOL":100.8,"WD_ LOSSOL":38,"YD_ LOSSOL":38},{"date":"2023-10-05 12:45:00","TRF ":258,"WD_TRF ":260,"YD_TRF ":260,"PDST ":27,"WD_PDST ":25,"YD_PDST ":25," LOSSOL":52.5,"WD_ LOSSOL":166.6,"YD_ LOSSOL":166.6},{"date":"2023-10-05 13:00:00","TRF ":265,"WD_TRF ":268,"YD_TRF ":268,"PDST ":67,"WD_PDST ":29,"YD_PDST ":29," LOSSOL":76.9,"WD_ LOSSOL":144,"YD_ LOSSOL":144}]

---

만든 데이터를 Tabulator에 업데이트 하기. replaceData 사용.

grid4.replaceData(gridData);

 

Tabulator 테이블 생성은 이런식으로. ( 일부를 가져 왔기 때문에 참고용으로만 보기 )

grid4 = new Tabulator('#trfGrid', {
	placeholder:"데이터를 불러오는 중입니다.",
	columns: [ 
		{ field: "date",  title: "TIME", resizable:true,  headerHozAlign:"center",
			formatter:(cell) => { 
				return cell.getValue().split(',')[0].substring(11, 16);
			}},
		{title:"TRF",
			columns: [ 
				{ field: "TRF", title: "TODAY",resizable:true,  hozAlign:"right", headerHozAlign:"center"},
				{ field: "WD_TRF", title: "AVG",resizable:true,  hozAlign:"right", headerHozAlign:"center"},
			],
		},
		{title:"PDST",
			columns: [ 
				{ field: "PDST", title: "TODAY", resizable:true, headerHozAlign:"right"},
				{ field: "WD_PDST", title: "AVG", resizable:true, headerHozAlign:"right"},
			],
		},
		{title:"LOSSOL",
			columns: [ 
				{ field: "LOSSOL", title: "TODAY", resizable:true,  headerHozAlign:"right" },  
				{ field: "WD_LOSSOL", title: "AVG", resizable:true, headerHozAlign:"right" },  
			],
		},
	],
});