@hatiolab/things-scene 8.0.0-alpha.1 → 8.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/db.sqlite +0 -0
- package/monitor-extension/devtools.html +1 -4
- package/monitor-extension/devtools.js +62 -104
- package/monitor-extension/libs/Chart.min.js +10129 -7
- package/monitor-extension/manifest.json +3 -3
- package/monitor-extension/popup.html +1 -1
- package/monitor-extension/popup.js +23 -10
- package/package.json +1 -1
- package/things-scene.mjs +1 -1
- package/monitor-extension/libs/apexchart.min.js +0 -24151
- package/schema.graphql +0 -4455
package/db.sqlite
CHANGED
|
Binary file
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Component Residents Monitor</title>
|
|
7
|
-
<script src="libs/
|
|
7
|
+
<script src="libs/chart.min.js"></script>
|
|
8
8
|
<script src="devtools.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
body {
|
|
@@ -28,9 +28,6 @@
|
|
|
28
28
|
</head>
|
|
29
29
|
<body>
|
|
30
30
|
<h1>Component Residents Monitor</h1>
|
|
31
|
-
<div id="resident-components"></div>
|
|
32
|
-
<div id="resident-scenes"></div>
|
|
33
|
-
<div id="resident-reference-maps"></div>
|
|
34
31
|
<canvas id="residentChart1"></canvas>
|
|
35
32
|
<canvas id="residentChart2"></canvas>
|
|
36
33
|
<canvas id="residentChart3"></canvas>
|
|
@@ -1,126 +1,87 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
chrome.devtools.panels.create('Board Monitor', 'icons/icon48.png', 'devtools.html', function (panel) {
|
|
4
|
-
if (panelCreated) {
|
|
5
|
-
console.log('Panel already created, skipping creation.')
|
|
6
|
-
return
|
|
7
|
-
}
|
|
8
|
-
|
|
1
|
+
chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', function (panel) {
|
|
9
2
|
var residentChart1, residentChart2, residentChart3
|
|
10
3
|
var listenerRegistered = false
|
|
4
|
+
var chartsInitialized = false
|
|
11
5
|
|
|
12
6
|
// 차트 업데이트 함수
|
|
13
7
|
const updateCharts = data => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
residentChart1.data.datasets[0].data = data.map(entry => entry.componentResidentsCount)
|
|
18
|
-
residentChart1.update()
|
|
8
|
+
residentChart1.data.labels = data.map(entry => entry.timestamp)
|
|
9
|
+
residentChart1.data.datasets[0].data = data.map(entry => entry.componentResidentsCount)
|
|
10
|
+
residentChart1.update()
|
|
19
11
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
12
|
+
residentChart2.data.labels = data.map(entry => entry.timestamp)
|
|
13
|
+
residentChart2.data.datasets[0].data = data.map(entry => entry.sceneResidentsCount)
|
|
14
|
+
residentChart2.update()
|
|
23
15
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} else {
|
|
28
|
-
const text1 = window.document.getElementById('resident-components')
|
|
29
|
-
const text2 = window.document.getElementById('resident-scenes')
|
|
30
|
-
const text3 = window.document.getElementById('resident-reference-maps')
|
|
31
|
-
|
|
32
|
-
text1.textContent = data.map(entry => entry.componentResidentsCount)
|
|
33
|
-
text2.textContent = data.map(entry => entry.sceneResidentsCount)
|
|
34
|
-
text3.textContent = data.map(entry => entry.referenceMapResidentsCount)
|
|
35
|
-
|
|
36
|
-
console.error('Charts are not initialized yet.')
|
|
37
|
-
}
|
|
16
|
+
residentChart3.data.labels = data.map(entry => entry.timestamp)
|
|
17
|
+
residentChart3.data.datasets[0].data = data.map(entry => entry.referenceMapResidentsCount)
|
|
18
|
+
residentChart3.update()
|
|
38
19
|
}
|
|
39
20
|
|
|
40
21
|
// 차트 초기화 함수
|
|
41
22
|
const resetCharts = window => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
23
|
+
const createChart = (ctx, label) => {
|
|
24
|
+
return new Chart(ctx, {
|
|
25
|
+
type: 'bar', // Bar chart
|
|
26
|
+
data: {
|
|
27
|
+
labels: [], // X축 라벨을 비워둠으로써 시리즈명을 숨김
|
|
28
|
+
datasets: [
|
|
29
|
+
{
|
|
30
|
+
label: label, // 데이터셋의 레이블 (범례로 표시되지 않음)
|
|
31
|
+
data: [], // 실제 데이터
|
|
32
|
+
backgroundColor: 'rgba(75, 192, 192, 0.5)', // 막대의 색상
|
|
33
|
+
borderColor: 'rgba(75, 192, 192, 1)', // 막대의 테두리 색상
|
|
34
|
+
borderWidth: 1 // 막대의 테두리 두께
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
options: {
|
|
39
|
+
animation: false, // 애니메이션 비활성화
|
|
40
|
+
scales: {
|
|
41
|
+
x: {
|
|
42
|
+
display: false, // X축 숨기기 (전체)
|
|
43
|
+
grid: {
|
|
44
|
+
display: false // X축의 격자선 숨기기
|
|
45
|
+
},
|
|
46
|
+
ticks: {
|
|
47
|
+
display: false // X축 틱 마크 숨기기
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
y: {
|
|
51
|
+
beginAtZero: true, // Y축이 0에서 시작되도록 설정
|
|
52
|
+
title: {
|
|
53
|
+
display: true,
|
|
54
|
+
text: label // Y축의 레이블
|
|
55
|
+
},
|
|
56
|
+
ticks: {
|
|
57
|
+
stepSize: 1
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
plugins: {
|
|
62
|
+
legend: {
|
|
63
|
+
display: false // 범례 숨기기
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
})
|
|
45
68
|
}
|
|
46
69
|
|
|
47
70
|
const ctx1 = window.document.getElementById('residentChart1').getContext('2d')
|
|
48
71
|
const ctx2 = window.document.getElementById('residentChart2').getContext('2d')
|
|
49
72
|
const ctx3 = window.document.getElementById('residentChart3').getContext('2d')
|
|
50
|
-
console.log('Initializing charts:', ctx1, ctx2, ctx3)
|
|
51
73
|
|
|
52
|
-
residentChart1 =
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
labels: [],
|
|
56
|
-
datasets: [
|
|
57
|
-
{
|
|
58
|
-
label: 'Component Residents Count',
|
|
59
|
-
data: [],
|
|
60
|
-
borderColor: 'rgba(75, 192, 192, 1)',
|
|
61
|
-
borderWidth: 1,
|
|
62
|
-
fill: false
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
|
-
options: {
|
|
67
|
-
scales: {
|
|
68
|
-
x: { display: false, ticks: { display: false } },
|
|
69
|
-
y: { title: { display: true, text: 'Component Residents Count' } }
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
})
|
|
74
|
+
residentChart1 = createChart(ctx1, 'Component Residents Count')
|
|
75
|
+
residentChart2 = createChart(ctx2, 'Scene Residents Count')
|
|
76
|
+
residentChart3 = createChart(ctx3, 'ReferenceMap Residents Count')
|
|
73
77
|
|
|
74
|
-
|
|
75
|
-
type: 'line',
|
|
76
|
-
data: {
|
|
77
|
-
labels: [],
|
|
78
|
-
datasets: [
|
|
79
|
-
{
|
|
80
|
-
label: 'Scene Residents Count',
|
|
81
|
-
data: [],
|
|
82
|
-
borderColor: 'rgba(75, 192, 192, 1)',
|
|
83
|
-
borderWidth: 1,
|
|
84
|
-
fill: false
|
|
85
|
-
}
|
|
86
|
-
]
|
|
87
|
-
},
|
|
88
|
-
options: {
|
|
89
|
-
scales: {
|
|
90
|
-
x: { display: false, ticks: { display: false } },
|
|
91
|
-
y: { title: { display: true, text: 'Scene Residents Count' } }
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
})
|
|
95
|
-
|
|
96
|
-
residentChart3 = new Chart(ctx3, {
|
|
97
|
-
type: 'line',
|
|
98
|
-
data: {
|
|
99
|
-
labels: [],
|
|
100
|
-
datasets: [
|
|
101
|
-
{
|
|
102
|
-
label: 'ReferenceMap Residents Count',
|
|
103
|
-
data: [],
|
|
104
|
-
borderColor: 'rgba(75, 192, 192, 1)',
|
|
105
|
-
borderWidth: 1,
|
|
106
|
-
fill: false
|
|
107
|
-
}
|
|
108
|
-
]
|
|
109
|
-
},
|
|
110
|
-
options: {
|
|
111
|
-
scales: {
|
|
112
|
-
x: { display: false, ticks: { display: false } },
|
|
113
|
-
y: { title: { display: true, text: 'ReferenceMap Residents Count' } }
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
})
|
|
117
|
-
|
|
118
|
-
console.log('Charts initialized:', residentChart1, residentChart2, residentChart3)
|
|
78
|
+
chartsInitialized = true
|
|
119
79
|
}
|
|
120
80
|
|
|
121
81
|
// 패널이 처음 열리거나 다시 열릴 때마다 호출
|
|
122
82
|
panel.onShown.addListener(function (window) {
|
|
123
83
|
console.log('DevTools panel shown')
|
|
84
|
+
panelWindow = window
|
|
124
85
|
resetCharts(window) // 패널이 열릴 때 차트를 초기화
|
|
125
86
|
|
|
126
87
|
// 초기 로딩 시 저장된 데이터를 가져옴
|
|
@@ -140,9 +101,8 @@ chrome.devtools.panels.create('Board Monitor', 'icons/icon48.png', 'devtools.htm
|
|
|
140
101
|
const tabId = chrome.devtools.inspectedWindow.tabId
|
|
141
102
|
|
|
142
103
|
if (tabId && message.type === 'UPDATE_CHART' && message.tabId === tabId) {
|
|
143
|
-
console.log('Received UPDATE_CHART message:', tabId, message)
|
|
144
104
|
chrome.storage.local.get({ residentData: {} }, result => {
|
|
145
|
-
if (result.residentData[tabId]) {
|
|
105
|
+
if (chartsInitialized && result.residentData[tabId]) {
|
|
146
106
|
updateCharts(result.residentData[tabId])
|
|
147
107
|
}
|
|
148
108
|
})
|
|
@@ -150,6 +110,4 @@ chrome.devtools.panels.create('Board Monitor', 'icons/icon48.png', 'devtools.htm
|
|
|
150
110
|
})
|
|
151
111
|
listenerRegistered = true // 리스너가 중복 등록되지 않도록 설정
|
|
152
112
|
}
|
|
153
|
-
|
|
154
|
-
panelCreated = true // 패널이 생성되었음을 표시
|
|
155
113
|
})
|