1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../../../../../base-ui/BaseElement'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { GpuCounter } from '../../../../bean/BoxSelection'; 19import { GpuCounterStruct } from '../../../../database/ui-worker/ProcedureWorkerGpuCounter'; 20import { resizeObserver } from '../SheetUtils'; 21 22@element('tabpane-gpu-counter') 23export class TabPaneGpuCounter extends BaseElement { 24 private gpuCounterCounterTbl: LitTable | null | undefined; 25 private clockCounterSource: Array<GpuCounter> = []; 26 27 set data(clickData: GpuCounterStruct) { 28 //@ts-ignore 29 this.gpuCounterCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = 30 this.parentElement!.clientHeight - 45 + 'px'; 31 this.getCounterData(clickData).then(); 32 } 33 34 async getCounterData(clickData: GpuCounterStruct): Promise<void> { 35 let dataSource: Array<GpuCounter> = []; 36 let selectData = new GpuCounter(); 37 selectData.startNS = clickData.startNS!; 38 selectData.height = clickData.height!; 39 selectData.dur = clickData.dur!; 40 selectData.type = clickData.type!; 41 selectData.frame = clickData.frame!; 42 selectData.startTime = clickData.startTime!; 43 dataSource.push(selectData); 44 this.clockCounterSource = dataSource; 45 this.gpuCounterCounterTbl!.recycleDataSource = dataSource; 46 } 47 48 initElements(): void { 49 this.gpuCounterCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter'); 50 } 51 52 53 54 connectedCallback(): void { 55 super.connectedCallback(); 56 resizeObserver(this.parentElement!, this.gpuCounterCounterTbl!); 57 } 58 59 initHtml(): string { 60 return ` 61 <style> 62 .gpu-counter-label{ 63 margin-bottom: 5px; 64 } 65 :host{ 66 padding: 10px 10px; 67 display: flex; 68 flex-direction: column; 69 } 70 </style> 71 <lit-table id="tb-counter" style="height: auto"> 72 <lit-table-column order title="timestamp" data-index="startNS" key="startNS" align="flex-start" width="20%"> 73 </lit-table-column> 74 <lit-table-column data-index="height" order title="value" key="height" align="flex-start" width="1fr"> 75 </lit-table-column> 76 </lit-table> 77 `; 78 } 79} 80