reduce dom updates

cityssm · Nov 20, 2023 · 4974df3 · 4974df3
1 parent c74047a
commit 4974df3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/public-typescript/dashboard.js b/public-typescript/dashboard.js
@@ -97,6 +97,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             <p class="message-body">There is no energy data that meets your search criteria.</p>
             </div>`;
             }
+            const panelContainerElement = document.createElement('div');
             for (const dataItem of responseJSON.energyData) {
                 const chartKey = getChartKey(dataItem.assetId, dataItem.dataTypeId);
                 const dataValue = (dataItem.dataValue * Math.pow(10, dataItem.powerOfTenMultiplier)) /
@@ -166,7 +167,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
               </div>`;
                     panelElement.querySelector('[data-field="assetName"]').textContent = (_e = dataItem.assetName) !== null && _e !== void 0 ? _e : '';
                     panelElement.querySelector('[data-field="serviceCategory"]').textContent = (_f = dataItem.serviceCategory) !== null && _f !== void 0 ? _f : '';
-                    dashboardContainer.append(panelElement);
+                    panelContainerElement.append(panelElement);
                     const chart = new Chart(panelElement.querySelector('canvas'), {
                         type: 'bar',
                         data: {
@@ -198,6 +199,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     charts[chartKey].timeSecondsMax = Math.max(charts[chartKey].timeSecondsMax, dataItem.timeSeconds);
                 }
             }
+            dashboardContainer.append(panelContainerElement);
             for (const chart of Object.values(charts)) {
                 chart.chart.update();
                 chart.exportLink.href = `${Emile.urlPrefix}/reports/energyData-formatted-filtered/?assetId=${chart.assetId}&dataTypeId=${chart.dataTypeId}&timeSecondsMin=${chart.timeSecondsMin}&timeSecondsMax=${chart.timeSecondsMax}`;

diff --git a/public-typescript/dashboard.ts b/public-typescript/dashboard.ts
@@ -179,6 +179,8 @@ declare const Chart: ChartJS
             </div>`
         }
 
+        const panelContainerElement = document.createElement('div')
+
         for (const dataItem of responseJSON.energyData) {
           const chartKey = getChartKey(
             dataItem.assetId as number,
@@ -269,7 +271,7 @@ declare const Chart: ChartJS
               ) as HTMLElement
             ).textContent = dataItem.serviceCategory ?? ''
 
-            dashboardContainer.append(panelElement)
+            panelContainerElement.append(panelElement)
 
             const chart = new Chart(
               panelElement.querySelector('canvas') as HTMLCanvasElement,
@@ -324,6 +326,8 @@ declare const Chart: ChartJS
           }
         }
 
+        dashboardContainer.append(panelContainerElement)
+
         for (const chart of Object.values(charts)) {
           chart.chart.update()
           chart.exportLink.href = `${Emile.urlPrefix}/reports/energyData-formatted-filtered/?assetId=${chart.assetId}&dataTypeId=${chart.dataTypeId}&timeSecondsMin=${chart.timeSecondsMin}&timeSecondsMax=${chart.timeSecondsMax}`

diff --git a/public/javascripts/dashboard.min.js b/public/javascripts/dashboard.min.js