[GLT-4261] TAT trend report table metrics (#232)

oicr-gsi · Nov 15, 2024 · b47d32c · b47d32c
1 parent f823bfa
commit b47d32c
Show file tree

Hide file tree

Showing 5 changed files with 381 additions and 16 deletions.
diff --git a/changes/add_GLT-4261 b/changes/add_GLT-4261
@@ -0,0 +1 @@
+TAT trend report table metrics
diff --git a/src/main/resources/templates/tat-trend.html b/src/main/resources/templates/tat-trend.html
@@ -36,6 +36,12 @@ <h1 class="text-green-200 font-sarabun font-light text-32">TAT Trend Report</h1>
             <option value="DataRelease">Data Release (DR)</option>
             <option value="All">All</option>
           </select>
+          <button id="metricsButton"
+            class="noprint bg-green-200 rounded-md hover:ring-2 ring-offset-1 ring-green-200 text-white font-inter font-medium text-12 px-2 py-1">Show
+            Metrics</button>
+          <button id="metricsDownload"
+            class="noprint bg-green-200 rounded-md hover:ring-2 ring-offset-1 ring-green-200 text-white font-inter font-medium text-12 px-2 py-1">Download
+            Metrics</button>
         </div>
       </div>
       <div id="gatesCheckboxes" class="flex gap-2 mt-2 font-inter font-medium text-12 items-center">
@@ -55,6 +61,7 @@ <h1 class="text-green-200 font-sarabun font-light text-32">TAT Trend Report</h1>
       </div>
 
       <div id="plotContainer"></div>
+      <div id="metricContainer"></div>
     </div>
     <script src="/js/tatTrend.js"></script>
   </div>

diff --git a/ts/component/table-builder.ts b/ts/component/table-builder.ts
@@ -82,6 +82,7 @@ export interface TableDefinition<ParentType, ChildType> {
   // when a parent object has no children, noChildrenWarning is displayed with warning highlight.
   // if noChildrenWarning is not provided, 'N/A' is displayed instead
   noChildrenWarning?: string;
+  parentHeaders?: Array<{ title: string; colspan: number }>;
 }
 
 class AcceptedFilter {
@@ -690,19 +691,46 @@ export class TableBuilder<ParentType, ChildType> {
   private addTableHead(table: HTMLTableElement) {
     this.thead = table.createTHead();
     this.thead.className = "relative";
-    const row = this.thead.insertRow();
+    const addHeaderRow = (isParent: boolean) => {
+      if (!this.thead) {
+        throw new Error("Table head (thead) is not defined");
+      }
+      const row = this.thead.insertRow();
+      if (isParent && this.definition.bulkActions) {
+        // add a blank header cell for alignment
+        const th = document.createElement("th");
+        th.className = "p-4 bg-grey-300";
+        row.appendChild(th);
+      }
+      return row;
+    };
+    if (this.definition.parentHeaders) {
+      // create the first row with parent headers
+      const parentRow = addHeaderRow(true);
+      this.definition.parentHeaders.forEach((parentHeader) => {
+        addColumnHeader(
+          parentRow,
+          parentHeader.title,
+          false,
+          undefined,
+          "bg-grey-300",
+          parentHeader.colspan
+        );
+      });
+    }
+    // create child or single row headers
+    const row = addHeaderRow(false);
     if (this.definition.bulkActions) {
       this.addSelectAllHeader(row);
-    } else {
-      this.selectAllCheckbox = undefined;
     }
     this.columns.forEach((column, i) => {
-      addColumnHeader(
-        row,
-        column.title,
-        i == 0 && !this.definition.bulkActions,
-        column.headingClass
-      );
+      const isFirstColumn = i === 0 && !this.definition.bulkActions;
+      const isChildHeader = !!this.definition.parentHeaders;
+      const combinedClass = isChildHeader
+        ? `text-black ${column.headingClass || ""}`.trim()
+        : `text-white ${column.headingClass || ""}`.trim();
+      const bgColor = isChildHeader ? "bg-grey-100" : "bg-grey-300";
+      addColumnHeader(row, column.title, isFirstColumn, combinedClass, bgColor);
     });
   }