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 { ColorUtils } from '../../base/ColorUtils'; 19import { Utils } from '../../base/Utils'; 20import { resizeObserver } from '../SheetUtils'; 21 22@element('tabpane-freq') 23export class TabPaneFreq extends BaseElement { 24 private freqTbl: LitTable | null | undefined; 25 26 set data(freqData: any) { 27 if (freqData) { 28 this.freqTbl!.recycleDataSource = [ 29 { 30 startNS: Utils.getTimeString(freqData.startNS >= 0 ? freqData.startNS : 0), 31 absoluteTime: (freqData.startNS + (window as any).recordStartNS) / 1000000000 + 's', 32 dur: Utils.getProbablyTime(freqData.dur), 33 freq: `${ColorUtils.formatNumberComma(freqData.value!)} kHz`, 34 cpu: `Cpu ${freqData.cpu}`, 35 }, 36 ]; 37 } 38 } 39 40 initElements(): void { 41 this.freqTbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq'); 42 } 43 44 connectedCallback() { 45 super.connectedCallback(); 46 resizeObserver(this.parentElement!, this.freqTbl!); 47 } 48 49 initHtml(): string { 50 return ` 51 <style> 52 .freq-table{ 53 height: auto; 54 } 55 :host{ 56 padding: 10px 10px; 57 display: flex; 58 flex-direction: column; 59 } 60 </style> 61 <lit-table id="tb-freq" class="freq-table"> 62 <lit-table-column class="freq-column" width="1fr" title="StartTime(Relative)" data-index="startNS" key="startNS" align="flex-start"> 63 </lit-table-column> 64 <lit-table-column class="freq-column" width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start"> 65 </lit-table-column> 66 <lit-table-column class="freq-column" width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" > 67 </lit-table-column> 68 <lit-table-column class="freq-column" width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" > 69 </lit-table-column> 70 <lit-table-column class="freq-column" width="1fr" title="Freq" data-index="freq" key="freq" align="flex-start" > 71 </lit-table-column> 72 </lit-table> 73 `; 74 } 75} 76