diff options
Diffstat (limited to 'openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js')
| -rw-r--r-- | openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js b/openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js new file mode 100644 index 00000000..01aff1e1 --- /dev/null +++ b/openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js @@ -0,0 +1,181 @@ +// draw the chart by performance datas +function drawPerformanceChart() { + var chartType = ""; + var titleText = document.getElementById("tableTitleText").innerHTML; + var subTitleText = "subTitleText"; + var chartDataList = []; + var resourceNameList = []; + var timeList = []; + + // get table datas + var tableObj = document.getElementById("ict_pm_data"); + if (tableObj == null || tableObj.rows.length < 1) { + return; + } + + // distinguish between chart types + var ratioType = tableObj.rows[0].cells[5].innerText; + if (ratioType.indexOf("CPU") > -1) { + chartType = "CPU"; + subTitleText = "CPU USE RATIO"; + } else if (ratioType.indexOf("RAM") > -1) { + chartType = "RAM"; + subTitleText = "RAM USE RATIO"; + } else if (ratioType.indexOf("VOLUME") > -1) { + chartType = "FILESYSTEM"; + subTitleText = "LOGIC VOLUME FILESYSTEM USE RATIO"; + } else if (ratioType.indexOf("NIC") > -1) { + chartType = "NIC"; + subTitleText = "ERROR PACKET RATIO BY ONE COLLECT-PERIOD (SEND AND RECEIVED)"; + } else { + return; + } + + // collect datas for chart horizontal axis + for (var i = 1; i < tableObj.rows.length; i++) { + var strTime = tableObj.rows[i].cells[0].innerText; + + if (timeList.length == 0) { + // push the first start time into the x-axis + timeList.push(strTime); + } else { + // push the start times into the x-axis and sort them + for (var j = 0; j < timeList.length; j++) { + if (timeList[j] == strTime) { + break; + } else if (timeList[j] > strTime) { + timeList.splice(j, 0, strTime); + break; + } else if (j + 1 == timeList.length && timeList[j] < strTime) { + timeList.push(strTime); + break; + } + } + } + } + + // create chart resources + for (var i = 1; i < tableObj.rows.length; i++) { + var strTime = tableObj.rows[i].cells[0].innerText; + var ratioIndex = getListIndex(timeList, strTime); + var strName = ""; + var strRatio = ""; + + if (chartType == "CPU" || chartType == "RAM") { + strName = tableObj.rows[i].cells[4].innerText; + strRatio = tableObj.rows[i].cells[5].innerText; + } else if (chartType == "FILESYSTEM") { + strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[6].innerText + ")"; + strRatio = tableObj.rows[i].cells[9].innerText; + } else if (chartType == "NIC") { + strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[5].innerText + ")"; + strRatio = parseFloat(tableObj.rows[i].cells[10].innerText) + parseFloat(tableObj.rows[i].cells[11].innerText); + } + + if (chartDataList.length == 0) { + // create the first chart resource and push it into the chartlist + insertChartDataList(chartDataList, strName, strRatio, ratioIndex); + } else { + // update the chart resources which exist in chartlist + var existFlg = false; + for (var j = 0; j < chartDataList.length; j++) { + if (chartDataList[j].name == strName) { + chartDataList[j].data[ratioIndex] = strRatio; + existFlg = true; + break; + } + } + + // create a new chart resource and push it into the chartlist + if (!existFlg) { + insertChartDataList(chartDataList, strName, strRatio, ratioIndex); + } + } + } + + for (var i = 0; i < chartDataList.length; i++) { + // complete length of datalist for each chart resource + if (chartDataList[i].data.length < timeList.length) { + chartDataList[i].data[timeList.length - 1] = ""; + } + + // create the name list of chart resources + resourceNameList.push(chartDataList[i].name); + } + + // initialize the chart + var dom = document.getElementById("chartCanvasDiv"); + var myChart = echarts.init(dom); + option = null; + + // set the chart by collected chart resources + option = { + title: { + text: titleText, + subtext: subTitleText, + x: 'center' + }, + tooltip: { + trigger: 'axis' + }, + legend: { + data:resourceNameList, + top: '10%' + }, + grid: { + top: '20%' + }, + toolbox: { + show: true, + feature: { + magicType: {type: ['line', 'bar']}, + restore: {}, + saveAsImage: {} + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + data : timeList.map(function (str) { + return str.replace(' ', '\n') + }) + }, + yAxis: { + name : 'percentage(%)', + type: 'value' + }, + series: chartDataList + }; + + // draw the performance chart of all resources + if (option && typeof option === "object") { + myChart.setOption(option, true); + }; +}; + +// define the struct of chart resource +function chartData() { + this.name = ""; + this.type = "line"; + this.smooth = true; + this.data = []; +}; + +// create a new chart resource and push it into the chartlist +function insertChartDataList(chartDataList, name, data, dataIndex) { + var cd = new chartData(); + cd.name = name; + cd.data[dataIndex] = data; + chartDataList.push(cd); +}; + +// return the index of the specified element in the list +function getListIndex(list, data) { + var dataIndex = 0; + for (var i = 0; i < list.length; i++) { + if (list[i] == data) { + return i; + } + } + return dataIndex; +}; |