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 { SelectionData, SelectionParam } from '../../../../bean/BoxSelection'; 19import { resizeObserver } from '../SheetUtils'; 20 21@element('tabpane-xpower-counter') 22export class TabPaneXpowerCounter extends BaseElement { 23 private xpowerCounterTbl: LitTable | null | undefined; 24 private xpowerCounterRange: HTMLLabelElement | null | undefined; 25 private xpowerCounterSource: Array<SelectionData> = []; 26 27 set data(xpowerCounterValue: SelectionParam) { 28 //@ts-ignore 29 this.xpowerCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = `${ 30 this.parentElement!.clientHeight - 45 31 }px`; 32 this.xpowerCounterRange!.textContent = `Selected range: ${parseFloat( 33 ((xpowerCounterValue.rightNs - xpowerCounterValue.leftNs) / 1000000.0).toFixed(5) 34 )} ms`; 35 this.getCounterData(xpowerCounterValue).then(); 36 } 37 38 async getCounterData(xpowerCounterValue: SelectionParam): Promise<void> { 39 let dataSource: Array<SelectionData> = []; 40 let collect = xpowerCounterValue.xpowerMapData; 41 let sumCount = 0; 42 this.xpowerCounterTbl!.loading = true; 43 for (let key of collect.keys()) { 44 let counters = collect.get(key); 45 let res = await counters?.({ 46 startNS: xpowerCounterValue.leftNs, 47 endNS: xpowerCounterValue.rightNs, 48 queryAll: true, 49 }); 50 let sd = this.createSelectCounterData(key, res || [], xpowerCounterValue.leftNs, xpowerCounterValue.rightNs); 51 sumCount += Number.parseInt(sd.count || '0'); 52 dataSource.push(sd); 53 } 54 this.xpowerCounterTbl!.loading = false; 55 this.xpowerCounterSource = dataSource; 56 this.xpowerCounterTbl!.recycleDataSource = dataSource; 57 } 58 59 initElements(): void { 60 this.xpowerCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter'); 61 this.xpowerCounterRange = this.shadowRoot?.querySelector('#time-range'); 62 this.xpowerCounterTbl!.addEventListener('column-click', (evt): void => { 63 // @ts-ignore 64 this.sortByColumn(evt.detail); 65 }); 66 } 67 68 connectedCallback(): void { 69 super.connectedCallback(); 70 resizeObserver(this.parentElement!, this.xpowerCounterTbl!); 71 } 72 73 initHtml(): string { 74 return ` 75 <style> 76 .xpower-counter-label{ 77 margin-bottom: 5px; 78 } 79 :host{ 80 padding: 10px 10px; 81 display: flex; 82 flex-direction: column; 83 } 84 </style> 85 <label id="time-range" class="xpower-counter-label" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label> 86 <lit-table id="tb-counter" style="height: auto"> 87 <lit-table-column order title="Name" data-index="name" key="name" align="flex-start" width="25%"> 88 </lit-table-column> 89 <lit-table-column data-index="delta" order title="Delta value" key="delta" align="flex-start" width="1fr"> 90 </lit-table-column> 91 <lit-table-column title="Rate /s" key="rate" order data-index="rate" align="flex-start" width="1fr"> 92 </lit-table-column> 93 <lit-table-column title="Weighted avg value" order data-index="avgWeight" key="avgWeight" align="flex-start" width="1fr"> 94 </lit-table-column> 95 <lit-table-column data-index="count" title="Count" order key="count" align="flex-start" width="1fr"> 96 </lit-table-column> 97 <lit-table-column title="First value" data-index="first" order key="first" align="flex-start" width="1fr"> 98 </lit-table-column> 99 <lit-table-column title="Last value" align="flex-start" order data-index="last" key="last" width="1fr"> 100 </lit-table-column> 101 <lit-table-column title="Min value" key="min" data-index="min" order align="flex-start" width="1fr"> 102 </lit-table-column> 103 <lit-table-column data-index="max" title="Max value" key="max" order align="flex-start" width="1fr"> 104 </lit-table-column> 105 </lit-table> 106 `; 107 } 108 109 createSelectCounterData(name: string, list: Array<unknown>, leftNs: number, rightNs: number): SelectionData { 110 let selectCounterData = new SelectionData(); 111 if (list.length > 0) { 112 let range = rightNs - leftNs; 113 let first = list[0]; 114 // @ts-ignore 115 selectCounterData.trackId = first.filterId; 116 selectCounterData.name = name; 117 // @ts-ignore 118 selectCounterData.first = `${first.value}`; 119 selectCounterData.count = `${list.length}`; 120 // @ts-ignore 121 selectCounterData.last = `${list[list.length - 1].value}`; 122 selectCounterData.delta = `${(Number(selectCounterData.last) - Number(selectCounterData.first)).toFixed(4)}`; 123 selectCounterData.rate = (Number(selectCounterData.delta) / ((range * 1.0) / 1000000000)).toFixed(4); 124 // @ts-ignore 125 selectCounterData.min = `${first.value}`; 126 // @ts-ignore 127 selectCounterData.max = `${first.value}`; 128 let weightAvg = 0.0; 129 for (let i = 0; i < list.length; i++) { 130 let counter = list[i]; 131 // @ts-ignore 132 if (counter.value < Number(selectCounterData.min)) { 133 // @ts-ignore 134 selectCounterData.min = counter.value.toString(); 135 } 136 // @ts-ignore 137 if (counter.value > Number(selectCounterData.max)) { 138 // @ts-ignore 139 selectCounterData.max = counter.value.toString(); 140 } 141 // @ts-ignore 142 let start = i === 0 ? leftNs : counter.startNS; 143 // @ts-ignore 144 let end = i === list.length - 1 ? rightNs : list[i + 1].startNS; 145 // @ts-ignore 146 weightAvg += counter.value * (((end - start) * 1.0) / range); 147 } 148 selectCounterData.avgWeight = weightAvg.toFixed(2); 149 } 150 return selectCounterData; 151 } 152 153 sortByColumn(detail: unknown): void { 154 // @ts-ignore 155 function compare(property, sort, type) { 156 return function (xpowerCounterLeftData: SelectionData, xpowerCounterRightData: SelectionData): number { 157 if (xpowerCounterLeftData.process === ' ' || xpowerCounterRightData.process === ' ') { 158 return 0; 159 } 160 if (type === 'number') { 161 return sort === 2 // @ts-ignore 162 ? parseFloat(xpowerCounterRightData[property]) - parseFloat(xpowerCounterLeftData[property]) // @ts-ignore 163 : parseFloat(xpowerCounterLeftData[property]) - parseFloat(xpowerCounterRightData[property]); 164 } else { 165 // @ts-ignore 166 if (xpowerCounterRightData[property] > xpowerCounterLeftData[property]) { 167 return sort === 2 ? 1 : -1; 168 } else { 169 // @ts-ignore 170 if (xpowerCounterRightData[property] === xpowerCounterLeftData[property]) { 171 return 0; 172 } else { 173 return sort === 2 ? -1 : 1; 174 } 175 } 176 } 177 }; 178 } 179 // @ts-ignore 180 if (detail.key === 'name') { 181 // @ts-ignore 182 this.xpowerCounterSource.sort(compare(detail.key, detail.sort, 'string')); 183 } else { 184 // @ts-ignore 185 this.xpowerCounterSource.sort(compare(detail.key, detail.sort, 'number')); 186 } 187 this.xpowerCounterTbl!.recycleDataSource = this.xpowerCounterSource; 188 } 189} 190