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 16export const TabPaneJsCpuStatisticsHtml = ` 17<style> 18:host{ 19 height: 100%; 20 background-color: var(--dark-background,#FFFFFF); 21 display: flex; 22 flex-direction: column; 23} 24.d-box{ 25 display: flex; 26 margin: 20px; 27 height: calc(100vh - 165px); 28} 29.chart-box{ 30 width: 40%; 31} 32.table-box{ 33 width: 60%; 34 max-height: calc(100vh - 165px); 35 border-left: solid 1px var(--dark-border1,#e0e0e0); 36 border-radius: 5px; 37 padding: 10px; 38} 39#chart-pie{ 40 height: 360px; 41} 42.js-cpu-statistics-tbl { 43 height: auto 44} 45.statistics-column{ 46 min-width: 130px; 47} 48</style> 49<lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar> 50<div class="d-box"> 51 <div class="chart-box"> 52 <div style="text-align: center">Statistics By Total</div> 53 <lit-chart-pie id="chart-pie"></lit-chart-pie> 54 </div> 55 <div class="table-box"> 56 <lit-table id="statistics-table" class="js-cpu-statistics-tbl"> 57 <lit-table-column class="statistics-column" width="1fr" title="Type" 58 data-index="type" key="type" align="flex-start" order></lit-table-column> 59 <lit-table-column class="statistics-column" width="1fr" title="Total" 60 data-index="timeStr" key="timeStr" align="flex-start" order></lit-table-column> 61 <lit-table-column class="statistics-column" width="1fr" title="%" 62 data-index="percentage" key="percentage" align="flex-start" order></lit-table-column> 63 </lit-table> 64 </div> 65</div> 66`; 67