• 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 { XpowerGpuFreqStruct } from '../../../../database/ui-worker/ProcedureWorkerXpowerGpuFreq';
19import { SortDetail, resizeObserver } from '../SheetUtils';
20
21@element('tabpane-xpower-gpu-freq-selection')
22export class TabPaneXpowerGpuFreqSelection extends BaseElement {
23  private TableEl: LitTable | undefined | null;
24  private gpuFreqData: Array<XpowerGpuFreqStruct> = [];
25  private tabTitle: HTMLDivElement | undefined | null;
26
27  setGpuFreqData(dataList: Array<XpowerGpuFreqStruct>): void {
28    this.TableEl!.recycleDataSource = [];
29    this.init();
30    dataList.forEach((data) => {
31      data.startMS = data.startNS / 1_000_000;
32    });
33    this.gpuFreqData = dataList;
34    this.TableEl!.recycleDataSource = this.gpuFreqData;
35  }
36
37  initElements(): void {
38    this.TableEl = this.shadowRoot!.querySelector<LitTable>('.tb-gpu-freq-selection') as LitTable;
39    this.tabTitle = this.TableEl!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
40    this.TableEl!.addEventListener('column-click', (evt) => {
41      // @ts-ignore
42      this.sortByColumn(evt.detail);
43    });
44  }
45
46  connectedCallback(): void {
47    super.connectedCallback();
48    resizeObserver(this.parentElement!, this.TableEl!);
49  }
50
51  private init(): void {
52    const thTable = this.tabTitle!.querySelector('.th');
53    const list = thTable!.querySelectorAll('div');
54    if (this.tabTitle!.hasAttribute('sort')) {
55      this.tabTitle!.removeAttribute('sort');
56      list.forEach((item) => {
57        item.querySelectorAll('svg').forEach((svg) => {
58          svg.style.display = 'none';
59        });
60      });
61    }
62  }
63
64  private sortByColumn(detail: SortDetail): void {
65    function compare(property: string, sort: number, type: string) {
66      return function (
67        XpowerGpuFreqLeftData: XpowerGpuFreqStruct,
68        XpowerGpuFreqRightData: XpowerGpuFreqStruct
69      ): number {
70        if (type === 'number') {
71          return sort === 2 // @ts-ignore
72            ? parseFloat(XpowerGpuFreqRightData[property]) - parseFloat(XpowerGpuFreqLeftData[property]) // @ts-ignore
73            : parseFloat(XpowerGpuFreqLeftData[property]) - parseFloat(XpowerGpuFreqRightData[property]);
74        } else {
75          // @ts-ignore
76          if (XpowerGpuFreqRightData[property] > XpowerGpuFreqLeftData[property]) {
77            return sort === 2 ? 1 : -1;
78          } else {
79            // @ts-ignore
80            if (XpowerGpuFreqRightData[property] === XpowerGpuFreqLeftData[property]) {
81              return 0;
82            } else {
83              return sort === 2 ? -1 : 1;
84            }
85          }
86        }
87      };
88    }
89    this.gpuFreqData.sort(compare(detail.key, detail.sort, 'number'));
90    this.TableEl!.recycleDataSource = this.gpuFreqData;
91  }
92
93  initHtml(): string {
94    return `<style>
95    :host{
96        padding: 10px 10px;
97        display: flex;
98        flex-direction: column;
99    }
100    </style>
101    <lit-table class="tb-gpu-freq-selection" style="height: auto">
102        <lit-table-column width="1fr" title="Frequency" data-index="frequency" key="frequency" align="flex-start" order>
103        </lit-table-column>
104        <lit-table-column width="1fr" title="TimeStamp(ms)" data-index="startMS" key="startMS"  align="flex-start" order>
105        </lit-table-column>
106        <lit-table-column width="1fr" title="RunTime(ms)" data-index="runTime" key="runTime" align="flex-start" order>
107        </lit-table-column>
108        <lit-table-column width="1fr" title="IdleTime(ms)" data-index="idleTime" key="idleTime" align="flex-start" order>
109        </lit-table-column>
110    </lit-table>
111    `;
112  }
113}
114