2 * Copyright 2016-2017, CMCC Technologies Co., Ltd.
\r
4 * Licensed under the Apache License, Version 2.0 (the "License");
\r
5 * you may not use this file except in compliance with the License.
\r
6 * You may obtain a copy of the License at
\r
8 * http://www.apache.org/licenses/LICENSE-2.0
\r
10 * Unless required by applicable law or agreed to in writing, software
\r
11 * distributed under the License is distributed on an "AS IS" BASIS,
\r
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
\r
13 * See the License for the specific language governing permissions and
\r
14 * limitations under the License.
\r
16 // draw the chart by performance datas
\r
17 function drawPerformanceChart() {
\r
19 var titleText = document.getElementById("tableTitleText").innerHTML;
\r
20 var subTitleText = "subTitleText";
\r
21 var chartDataList = [];
\r
22 var resourceNameList = [];
\r
26 var tableObj = document.getElementById("ict_pm_data");
\r
27 if (tableObj == null || tableObj.rows.length < 1) {
\r
31 // distinguish between chart types
\r
32 var ratioType = tableObj.rows[0].cells[5].innerText;
\r
33 if (ratioType.indexOf("CPU") > -1) {
\r
35 subTitleText = "CPU USE RATIO";
\r
36 } else if (ratioType.indexOf("RAM") > -1) {
\r
38 subTitleText = "RAM USE RATIO";
\r
39 } else if (ratioType.indexOf("VOLUME") > -1) {
\r
40 chartType = "FILESYSTEM";
\r
41 subTitleText = "LOGIC VOLUME FILESYSTEM USE RATIO";
\r
42 } else if (ratioType.indexOf("NIC") > -1) {
\r
44 subTitleText = "ERROR PACKET RATIO BY ONE COLLECT-PERIOD (SEND AND RECEIVED)";
\r
49 // collect datas for chart horizontal axis
\r
50 for (var i = 1; i < tableObj.rows.length; i++) {
\r
51 var strTime = tableObj.rows[i].cells[0].innerText;
\r
53 if (timeList.length == 0) {
\r
54 // push the first start time into the x-axis
\r
55 timeList.push(strTime);
\r
57 // push the start times into the x-axis and sort them
\r
58 for (var j = 0; j < timeList.length; j++) {
\r
59 if (timeList[j] == strTime) {
\r
61 } else if (timeList[j] > strTime) {
\r
62 timeList.splice(j, 0, strTime);
\r
64 } else if (j + 1 == timeList.length && timeList[j] < strTime) {
\r
65 timeList.push(strTime);
\r
72 // create chart resources
\r
73 for (var i = 1; i < tableObj.rows.length; i++) {
\r
74 var strTime = tableObj.rows[i].cells[0].innerText;
\r
75 var ratioIndex = getListIndex(timeList, strTime);
\r
79 if (chartType == "CPU" || chartType == "RAM") {
\r
80 strName = tableObj.rows[i].cells[4].innerText;
\r
81 strRatio = tableObj.rows[i].cells[5].innerText;
\r
82 } else if (chartType == "FILESYSTEM") {
\r
83 strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[6].innerText + ")";
\r
84 strRatio = tableObj.rows[i].cells[9].innerText;
\r
85 } else if (chartType == "NIC") {
\r
86 strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[5].innerText + ")";
\r
87 strRatio = parseFloat(tableObj.rows[i].cells[10].innerText) + parseFloat(tableObj.rows[i].cells[11].innerText);
\r
90 if (chartDataList.length == 0) {
\r
91 // create the first chart resource and push it into the chartlist
\r
92 insertChartDataList(chartDataList, strName, strRatio, ratioIndex);
\r
94 // update the chart resources which exist in chartlist
\r
95 var existFlg = false;
\r
96 for (var j = 0; j < chartDataList.length; j++) {
\r
97 if (chartDataList[j].name == strName) {
\r
98 chartDataList[j].data[ratioIndex] = strRatio;
\r
104 // create a new chart resource and push it into the chartlist
\r
106 insertChartDataList(chartDataList, strName, strRatio, ratioIndex);
\r
111 for (var i = 0; i < chartDataList.length; i++) {
\r
112 // complete length of datalist for each chart resource
\r
113 if (chartDataList[i].data.length < timeList.length) {
\r
114 chartDataList[i].data[timeList.length - 1] = "";
\r
117 // create the name list of chart resources
\r
118 resourceNameList.push(chartDataList[i].name);
\r
121 // initialize the chart
\r
122 var dom = document.getElementById("chartCanvasDiv");
\r
123 var myChart = echarts.init(dom);
\r
126 // set the chart by collected chart resources
\r
130 subtext: subTitleText,
\r
137 data:resourceNameList,
\r
146 magicType: {type: ['line', 'bar']},
\r
153 boundaryGap: false,
\r
154 data : timeList.map(function (str) {
\r
155 return str.replace(' ', '\n')
\r
159 name : 'percentage(%)',
\r
162 series: chartDataList
\r
165 // draw the performance chart of all resources
\r
166 if (option && typeof option === "object") {
\r
167 myChart.setOption(option, true);
\r
171 // define the struct of chart resource
\r
172 function chartData() {
\r
174 this.type = "line";
\r
175 this.smooth = true;
\r
179 // create a new chart resource and push it into the chartlist
\r
180 function insertChartDataList(chartDataList, name, data, dataIndex) {
\r
181 var cd = new chartData();
\r
183 cd.data[dataIndex] = data;
\r
184 chartDataList.push(cd);
\r
187 // return the index of the specified element in the list
\r
188 function getListIndex(list, data) {
\r
190 for (var i = 0; i < list.length; i++) {
\r
191 if (list[i] == data) {
\r