npm - @hatiolab/things-scene - Versions diffs - 8.0.0-alpha.1 → 8.0.0-alpha.3 - Mend

@hatiolab/things-scene 8.0.0-alpha.1 → 8.0.0-alpha.3

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.

Files changed (15) hide show

package/db.sqlite +0 -0
package/monitor-extension/content.js +13 -7
package/monitor-extension/devtools.html +35 -4
package/monitor-extension/devtools.js +92 -106
package/monitor-extension/injected.js +12 -15
package/monitor-extension/libs/Chart.min.js +10129 -7
package/monitor-extension/manifest.json +3 -3
package/monitor-extension/popup.html +34 -1
package/monitor-extension/popup.js +53 -17
package/package.json +1 -1
package/things-scene-ie.js +1 -1
package/things-scene-min.js +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 Viewed

Binary file

package/monitor-extension/content.js CHANGED Viewed

@@ -5,7 +5,7 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
   if (response && response.tabId) {
     const tabId = response.tabId
-    function updateChart(data) {
+    function updateChart(data = {}) {
       chrome.runtime.sendMessage({ type: 'UPDATE_CHART', tabId, data })
     }
@@ -13,14 +13,20 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
       if (event.source !== window || !event.data.type) return
       if (event.data.type === 'RESIDENT_COUNT') {
-        const { timestamp, componentResidentsCount, sceneResidentsCount, referenceMapResidentsCount } = event.data
+        const { timestamp, componentResidentsCount, sceneResidentsCount, sceneResidents, referenceMapResidentsCount } =
+          event.data
         try {
           chrome.storage.local.get({ residentData: {} }, result => {
             const residentData = result.residentData || {}
-            residentData[tabId] = residentData[tabId] || []
+            const tabData = (residentData[tabId] = /* temporary condition */ Array.isArray(residentData[tabId])
+              ? {}
+              : residentData[tabId] || {})
-            residentData[tabId].push({
+            tabData.sceneResidents = sceneResidents
+            const history = (tabData.history = tabData.history || [])
+            history.push({
               timestamp,
               componentResidentsCount,
               sceneResidentsCount,
@@ -28,13 +34,13 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
             })
             // 데이터가 100개 이상일 경우 오래된 데이터 삭제
-            if (residentData[tabId].length > 100) {
-              residentData[tabId].shift()
+            if (history.length > 100) {
+              history.shift()
             }
             chrome.storage.local.set({ residentData }, () => {
               try {
-                updateChart(residentData[tabId])
+                updateChart(tabData)
               } catch (e) {
                 console.error('Error updating chart:', e)
               }

package/monitor-extension/devtools.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Component Residents Monitor</title>
-    <script src="libs/Chart.min.js"></script>
+    <script src="libs/chart.min.js"></script>
     <script src="devtools.js"></script>
     <style>
       body {
@@ -17,6 +17,7 @@
         min-height: 800px;
         box-sizing: border-box;
       }
       canvas {
         flex: 1;
         border: 1px solid #000;
@@ -24,15 +25,45 @@
         width: 100%;
         box-sizing: border-box;
       }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 20px;
+      }
+      th,
+      td {
+        padding: 8px;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+      }
+      th {
+        background-color: #f2f2f2;
+      }
     </style>
   </head>
   <body>
     <h1>Component Residents Monitor</h1>
-    <div id="resident-components"></div>
-    <div id="resident-scenes"></div>
-    <div id="resident-reference-maps"></div>
     <canvas id="residentChart1"></canvas>
     <canvas id="residentChart2"></canvas>
     <canvas id="residentChart3"></canvas>
+    <!-- sceneResidents 데이터를 보여줄 테이블 -->
+    <h2>Scene Residents Data</h2>
+    <table id="residentsTable">
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Up</th>
+          <th>Down</th>
+          <th>Difference (Up - Down)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- 데이터가 동적으로 추가됩니다 -->
+      </tbody>
+    </table>
   </body>
 </html>

package/monitor-extension/devtools.js CHANGED Viewed

@@ -1,126 +1,115 @@
-let panelCreated = false
-chrome.devtools.panels.create('Board Monitor', 'icons/icon48.png', 'devtools.html', function (panel) {
-  if (panelCreated) {
-    console.log('Panel already created, skipping creation.')
-    return
-  }
+chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', function (panel) {
   var residentChart1, residentChart2, residentChart3
   var listenerRegistered = false
+  var chartsInitialized = false
   // 차트 업데이트 함수
-  const updateCharts = data => {
-    console.log('Updating charts:', residentChart1, residentChart2, residentChart3)
-    if (residentChart1 && residentChart2 && residentChart3) {
-      residentChart1.data.labels = data.map(entry => entry.timestamp)
-      residentChart1.data.datasets[0].data = data.map(entry => entry.componentResidentsCount)
-      residentChart1.update()
-      residentChart2.data.labels = data.map(entry => entry.timestamp)
-      residentChart2.data.datasets[0].data = data.map(entry => entry.sceneResidentsCount)
-      residentChart2.update()
-      residentChart3.data.labels = data.map(entry => entry.timestamp)
-      residentChart3.data.datasets[0].data = data.map(entry => entry.referenceMapResidentsCount)
-      residentChart3.update()
-    } else {
-      const text1 = window.document.getElementById('resident-components')
-      const text2 = window.document.getElementById('resident-scenes')
-      const text3 = window.document.getElementById('resident-reference-maps')
-      text1.textContent = data.map(entry => entry.componentResidentsCount)
-      text2.textContent = data.map(entry => entry.sceneResidentsCount)
-      text3.textContent = data.map(entry => entry.referenceMapResidentsCount)
-      console.error('Charts are not initialized yet.')
+  const updateCharts = ({ sceneResidents, history }) => {
+    residentChart1.data.labels = history.map(entry => entry.timestamp)
+    residentChart1.data.datasets[0].data = history.map(entry => entry.componentResidentsCount)
+    residentChart1.update()
+    residentChart2.data.labels = history.map(entry => entry.timestamp)
+    residentChart2.data.datasets[0].data = history.map(entry => entry.sceneResidentsCount)
+    residentChart2.update()
+    residentChart3.data.labels = history.map(entry => entry.timestamp)
+    residentChart3.data.datasets[0].data = history.map(entry => entry.referenceMapResidentsCount)
+    residentChart3.update()
+    updateResidentsTable(sceneResidents)
+  }
+  // sceneResidents 테이블 업데이트 함수
+  const updateResidentsTable = sceneResidents => {
+    console.log('updateResidentesTable', sceneResidents)
+    if (typeof sceneResidents !== 'object') {
+      return
+    }
+    const table = document.getElementById('residentsTable')
+    table.innerHTML = '' // 기존 테이블 내용을 지움
+    // 테이블 헤더 생성
+    const headerRow = document.createElement('tr')
+    headerRow.innerHTML = '<th>Type</th><th>Up</th><th>Down</th><th>Difference (Up - Down)</th>'
+    table.appendChild(headerRow)
+    // sceneResidents 데이터로 테이블 행 생성
+    for (const [type, residents] of Object.entries(sceneResidents)) {
+      residents.forEach(({ up, down }) => {
+        const row = document.createElement('tr')
+        const difference = up - down
+        row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
+        table.appendChild(row)
+      })
     }
   }
   // 차트 초기화 함수
   const resetCharts = window => {
-    if (residentChart1 || residentChart2 || residentChart3) {
-      console.log('Charts already initialized, skipping reset.')
-      return // 이미 초기화된 경우 차트를 다시 초기화하지 않음
+    const createChart = (ctx, label) => {
+      return new Chart(ctx, {
+        type: 'bar', // Bar chart
+        data: {
+          labels: [], // X축 라벨을 비워둠으로써 시리즈명을 숨김
+          datasets: [
+            {
+              label: label, // 데이터셋의 레이블 (범례로 표시되지 않음)
+              data: [], // 실제 데이터
+              backgroundColor: 'rgba(75, 192, 192, 0.5)', // 막대의 색상
+              borderColor: 'rgba(75, 192, 192, 1)', // 막대의 테두리 색상
+              borderWidth: 1 // 막대의 테두리 두께
+            }
+          ]
+        },
+        options: {
+          animation: false, // 애니메이션 비활성화
+          scales: {
+            x: {
+              display: false, // X축 숨기기 (전체)
+              grid: {
+                display: false // X축의 격자선 숨기기
+              },
+              ticks: {
+                display: false // X축 틱 마크 숨기기
+              }
+            },
+            y: {
+              beginAtZero: true, // Y축이 0에서 시작되도록 설정
+              title: {
+                display: true,
+                text: label // Y축의 레이블
+              },
+              ticks: {
+                stepSize: 1
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              display: false // 범례 숨기기
+            }
+          }
+        }
+      })
     }
     const ctx1 = window.document.getElementById('residentChart1').getContext('2d')
     const ctx2 = window.document.getElementById('residentChart2').getContext('2d')
     const ctx3 = window.document.getElementById('residentChart3').getContext('2d')
-    console.log('Initializing charts:', ctx1, ctx2, ctx3)
-    residentChart1 = new Chart(ctx1, {
-      type: 'line',
-      data: {
-        labels: [],
-        datasets: [
-          {
-            label: 'Component Residents Count',
-            data: [],
-            borderColor: 'rgba(75, 192, 192, 1)',
-            borderWidth: 1,
-            fill: false
-          }
-        ]
-      },
-      options: {
-        scales: {
-          x: { display: false, ticks: { display: false } },
-          y: { title: { display: true, text: 'Component Residents Count' } }
-        }
-      }
-    })
-    residentChart2 = new Chart(ctx2, {
-      type: 'line',
-      data: {
-        labels: [],
-        datasets: [
-          {
-            label: 'Scene Residents Count',
-            data: [],
-            borderColor: 'rgba(75, 192, 192, 1)',
-            borderWidth: 1,
-            fill: false
-          }
-        ]
-      },
-      options: {
-        scales: {
-          x: { display: false, ticks: { display: false } },
-          y: { title: { display: true, text: 'Scene Residents Count' } }
-        }
-      }
-    })
+    residentChart1 = createChart(ctx1, 'Component Residents Count')
+    residentChart2 = createChart(ctx2, 'Scene Residents Count')
+    residentChart3 = createChart(ctx3, 'ReferenceMap Residents Count')
-    residentChart3 = new Chart(ctx3, {
-      type: 'line',
-      data: {
-        labels: [],
-        datasets: [
-          {
-            label: 'ReferenceMap Residents Count',
-            data: [],
-            borderColor: 'rgba(75, 192, 192, 1)',
-            borderWidth: 1,
-            fill: false
-          }
-        ]
-      },
-      options: {
-        scales: {
-          x: { display: false, ticks: { display: false } },
-          y: { title: { display: true, text: 'ReferenceMap Residents Count' } }
-        }
-      }
-    })
-    console.log('Charts initialized:', residentChart1, residentChart2, residentChart3)
+    chartsInitialized = true
   }
   // 패널이 처음 열리거나 다시 열릴 때마다 호출
   panel.onShown.addListener(function (window) {
     console.log('DevTools panel shown')
+    panelWindow = window
     resetCharts(window) // 패널이 열릴 때 차트를 초기화
     // 초기 로딩 시 저장된 데이터를 가져옴
@@ -140,9 +129,8 @@ chrome.devtools.panels.create('Board Monitor', 'icons/icon48.png', 'devtools.htm
       const tabId = chrome.devtools.inspectedWindow.tabId
       if (tabId && message.type === 'UPDATE_CHART' && message.tabId === tabId) {
-        console.log('Received UPDATE_CHART message:', tabId, message)
         chrome.storage.local.get({ residentData: {} }, result => {
-          if (result.residentData[tabId]) {
+          if (chartsInitialized && result.residentData[tabId]) {
             updateCharts(result.residentData[tabId])
           }
         })
@@ -150,6 +138,4 @@ chrome.devtools.panels.create('Board Monitor', 'icons/icon48.png', 'devtools.htm
     })
     listenerRegistered = true // 리스너가 중복 등록되지 않도록 설정
   }
-  panelCreated = true // 패널이 생성되었음을 표시
 })

package/monitor-extension/injected.js CHANGED Viewed

@@ -1,28 +1,25 @@
 function logComponentResidents() {
-  const componentResidentsCount = window.scene.Component?.residentsCount || 0;
-  const sceneResidentsCount = window.scene.Scene?.residentsCount || 0;
-  const referenceMapResidentsCount =
-    window.scene.ReferenceMap?.residentsCount || 0;
-  const timestamp = new Date().toISOString();
-  console.log(
-    `Component Residents Count: ${componentResidentsCount}, Scene Residents Count: ${sceneResidentsCount}, ReferenceMap Residents Count: ${referenceMapResidentsCount} at ${timestamp}`
-  );
+  const componentResidentsCount = window.scene.Component?.residentsCount || 0
+  const sceneResidentsCount = window.scene.Scene?.residentsCount || 0
+  const sceneResidents = window.scene.Scene?.residents || {}
+  const referenceMapResidentsCount = window.scene.ReferenceMap?.residentsCount || 0
+  const timestamp = new Date().toISOString()
   window.postMessage(
     {
-      type: "RESIDENT_COUNT",
+      type: 'RESIDENT_COUNT',
       timestamp,
       componentResidentsCount,
       sceneResidentsCount,
-      referenceMapResidentsCount,
+      sceneResidents,
+      referenceMapResidentsCount
     },
-    "*"
-  );
+    '*'
+  )
 }
 setTimeout(() => {
   if (window.scene) {
-    setInterval(logComponentResidents, 5000);
+    setInterval(logComponentResidents, 5000)
   }
-}, 5000);
+}, 5000)