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 */ 15import { BaseElement, element } from '../../../../../base-ui/BaseElement'; 16import { LitTable } from '../../../../../base-ui/table/lit-table'; 17import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection'; 18import '../../../../../base-ui/chart/pie/LitChartPie'; 19import { resizeObserver } from '../SheetUtils'; 20import { XpowerStatisticStruct } from '../../../../database/ui-worker/ProcedureWorkerXpowerStatistic'; 21 22@element('tabpane-xpower-statistic-current-data') 23export class TabPaneXpowerStatisticCurrentData extends BaseElement { 24 private xpowerCounterTbl: LitTable | null | undefined; 25 private xpowerStatisticSource: Array<SelectionData> = []; 26 private tabTitle: HTMLDivElement | undefined | null; 27 28 setXpowerStatisticCurrentData(data: XpowerStatisticStruct): void { 29 this.init(); 30 //@ts-ignore 31 this.xpowerCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = `${ 32 this.parentElement!.clientHeight - 45 33 }px`; 34 this.xpowerCounterTbl!.loading = true; 35 let dataSource: Array<SelectionData> = []; 36 let list = [ 37 'audio', 38 'bluetooth', 39 'camera', 40 'cpu', 41 'display', 42 'flashlight', 43 'gpu', 44 'location', 45 'wifiscan', 46 'wifi', 47 'modem', 48 ]; 49 let dataMap = new Map<string, { dur: number; energy: number; startStamp: number }>(); 50 list.forEach((item) => { 51 // @ts-ignore 52 if (data[item] !== 0) { 53 // @ts-ignore 54 dataMap.set(item, { dur: data[item + 'Dur'], energy: data[item], startStamp: data.startTime }); 55 } 56 }); 57 dataMap.forEach((value, key) => { 58 let tableRow = this.createSelectCounterData(value, key); 59 dataSource.push(tableRow); 60 }); 61 this.xpowerCounterTbl!.loading = false; 62 dataSource.sort(this.compare('energy', 2, 'number')); 63 this.xpowerStatisticSource = dataSource; 64 this.xpowerCounterTbl!.recycleDataSource = dataSource; 65 } 66 67 initElements(): void { 68 this.xpowerCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter'); 69 this.tabTitle = this.xpowerCounterTbl!.shadowRoot?.querySelector('.thead') as HTMLDivElement; 70 this.xpowerCounterTbl!.addEventListener('column-click', (evt): void => { 71 // @ts-ignore 72 this.sortByColumn(evt.detail); 73 }); 74 } 75 76 connectedCallback(): void { 77 super.connectedCallback(); 78 resizeObserver(this.parentElement!, this.xpowerCounterTbl!); 79 } 80 81 initHtml(): string { 82 return ` 83 <style> 84 .xpower-counter-label{ 85 margin-bottom: 5px; 86 } 87 :host{ 88 padding: 10px 10px; 89 display: flex; 90 flex-direction: column; 91 } 92 </style> 93 <lit-table id="tb-counter" style="height: auto"> 94 <lit-table-column order title="Name" data-index="name" key="name" align="flex-start" width="25%"> 95 </lit-table-column> 96 <lit-table-column data-index="timeStamp" order title="TimeStamp(ms)" key="timeStamp" align="flex-start" width="1fr"> 97 </lit-table-column> 98 <lit-table-column data-index="dur" title="Duration(ms)" order key="dur" align="flex-start" width="1fr"> 99 </lit-table-column> 100 <lit-table-column title="Energy(mAh)" order data-index="energy" key="energy" align="flex-start" width="1fr"> 101 </lit-table-column> 102 </lit-table> 103 `; 104 } 105 106 createSelectCounterData(data: { dur: number; energy: number; startStamp: number }, key: string): SelectionData { 107 let selectCounterData = new SelectionData(); 108 selectCounterData.name = key; 109 selectCounterData.timeStamp = (data.startStamp / 1000000).toString(); 110 selectCounterData.energy = data.energy.toString(); 111 selectCounterData.dur = data.dur; 112 return selectCounterData; 113 } 114 115 compare(property: string, sort: number, type: string) { 116 return function (xpowerStatisticLeftData: SelectionData, xpowerStatisticRightData: SelectionData): number { 117 if (xpowerStatisticLeftData.process === ' ' || xpowerStatisticRightData.process === ' ') { 118 return 0; 119 } 120 if (type === 'number') { 121 return sort === 2 // @ts-ignore 122 ? parseFloat(xpowerStatisticRightData[property]) - parseFloat(xpowerStatisticLeftData[property]) // @ts-ignore 123 : parseFloat(xpowerStatisticLeftData[property]) - parseFloat(xpowerStatisticRightData[property]); 124 } else { 125 // @ts-ignore 126 if (xpowerStatisticRightData[property] > xpowerStatisticLeftData[property]) { 127 return sort === 2 ? 1 : -1; 128 } else { 129 // @ts-ignore 130 if (xpowerStatisticRightData[property] === xpowerStatisticLeftData[property]) { 131 return 0; 132 } else { 133 return sort === 2 ? -1 : 1; 134 } 135 } 136 } 137 }; 138 } 139 sortByColumn(detail: { key: string; sort: number }): void { 140 // @ts-ignore 141 if (detail.key === 'name') { 142 // @ts-ignore 143 this.xpowerStatisticSource.sort(this.compare(detail.key, detail.sort, 'string')); 144 } else { 145 this.xpowerStatisticSource.sort(this.compare(detail.key, detail.sort, 'number')); 146 } 147 this.xpowerCounterTbl!.recycleDataSource = this.xpowerStatisticSource; 148 } 149 150 private init(): void { 151 const thTable = this.tabTitle!.querySelector('.th'); 152 const list = thTable!.querySelectorAll('div'); 153 if (this.tabTitle!.hasAttribute('sort')) { 154 this.tabTitle!.removeAttribute('sort'); 155 list.forEach((item) => { 156 item.querySelectorAll('svg').forEach((svg) => { 157 svg.style.display = 'none'; 158 }); 159 }); 160 } 161 } 162} 163