• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 { XpowerThreadInfoStruct } from '../../../../database/ui-worker/ProcedureWorkerXpowerThreadInfo';
19import { THREAD_ENERGY } from '../../../chart/SpXpowerChart';
20import { SortDetail, resizeObserver } from '../SheetUtils';
21
22@element('tabpane-xpower-thread-info-selection')
23export class TabPaneXpowerThreadInfoSelection extends BaseElement {
24  private tableEl: LitTable | undefined | null;
25  private threadInfoData: Array<XpowerThreadInfoStruct> = [];
26  private tabTitle: HTMLDivElement | undefined | null;
27  private valueType: string = '';
28
29  setThreadInfoData(dataList: Array<XpowerThreadInfoStruct>): void {
30    this.tableEl!.recycleDataSource = [];
31    this.init();
32    if (dataList.length >= 1) {
33      dataList[0].valueType === THREAD_ENERGY ? (this.valueType = 'Energy(mAh)') : (this.valueType = 'Load(%)');
34    }
35    dataList.forEach((data) => {
36      data.startMS = data.startNS / 1_000_000;
37    });
38    if (this.tabTitle && this.tabTitle!.querySelectorAll('.td')[2]) {
39      this.tabTitle!.querySelectorAll('.td')[2]!.querySelector('label')!.innerHTML = this.valueType;
40    }
41    this.threadInfoData = dataList;
42    this.tableEl!.recycleDataSource = this.threadInfoData;
43  }
44
45  initElements(): void {
46    this.tableEl = this.shadowRoot!.querySelector<LitTable>('.tb-thread-info-selection') as LitTable;
47    this.tabTitle = this.tableEl!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
48    this.tableEl!.addEventListener('column-click', (evt) => {
49      // @ts-ignore
50      this.sortByColumn(evt.detail);
51    });
52  }
53
54  connectedCallback(): void {
55    super.connectedCallback();
56    resizeObserver(this.parentElement!, this.tableEl!);
57  }
58
59  private init(): void {
60    const thTable = this.tabTitle!.querySelector('.th');
61    const list = thTable!.querySelectorAll('div');
62    if (this.tabTitle!.hasAttribute('sort')) {
63      this.tabTitle!.removeAttribute('sort');
64      list.forEach((item) => {
65        item.querySelectorAll('svg').forEach((svg) => {
66          svg.style.display = 'none';
67        });
68      });
69    }
70  }
71
72  private sortByColumn(detail: SortDetail): void {
73    function compare(property: string, sort: number, type: string) {
74      return function (
75        XpowerThreadInfoLeftData: XpowerThreadInfoStruct,
76        XpowerThreadInfoRightData: XpowerThreadInfoStruct
77      ): number {
78        if (type === 'number') {
79          return sort === 2 // @ts-ignore
80            ? parseFloat(XpowerThreadInfoRightData[property]) - parseFloat(XpowerThreadInfoLeftData[property]) // @ts-ignore
81            : parseFloat(XpowerThreadInfoLeftData[property]) - parseFloat(XpowerThreadInfoRightData[property]);
82        } else {
83          // @ts-ignore
84          if (XpowerThreadInfoRightData[property] > XpowerThreadInfoLeftData[property]) {
85            return sort === 2 ? 1 : -1;
86          } else {
87            // @ts-ignore
88            if (XpowerThreadInfoRightData[property] === XpowerThreadInfoLeftData[property]) {
89              return 0;
90            } else {
91              return sort === 2 ? -1 : 1;
92            }
93          }
94        }
95      };
96    }
97    if (detail.key === 'threadName') {
98      this.threadInfoData.sort(compare(detail.key, detail.sort, 'string'));
99    } else {
100      this.threadInfoData.sort(compare(detail.key, detail.sort, 'number'));
101    }
102    this.tableEl!.recycleDataSource = this.threadInfoData;
103  }
104
105  initHtml(): string {
106    return `<style>
107    :host{
108        padding: 10px 10px;
109        display: flex;
110        flex-direction: column;
111    }
112    </style>
113    <lit-table class="tb-thread-info-selection" style="height: auto">
114        <lit-table-column width="1fr" title="ThreadName" data-index="threadName" key="threadName" align="flex-start" order>
115        </lit-table-column>
116        <lit-table-column width="1fr" title="TimeStamp(ms)" data-index="startMS" key="startMS"  align="flex-start" order>
117        </lit-table-column>
118        <lit-table-column width="1fr" title=${this.valueType} data-index="value" key="value" align="flex-start" order>
119        </lit-table-column>
120        <lit-table-column width="1fr" title="Duration(ms)" data-index="threadTime" key="threadTime" align="flex-start" order>
121        </lit-table-column>
122    </lit-table>
123    `;
124  }
125}
126