diff --git a/tools/distribute/devkit_distribute/bin/report/template/perf_report.html b/tools/distribute/devkit_distribute/bin/report/template/perf_report.html index 2f7ee9a4604151ca6477521f6d6cf780ed8c7b4a..2d00bdc79bbf9e5d8cc469fdf8ab85260987cf26 100644 --- a/tools/distribute/devkit_distribute/bin/report/template/perf_report.html +++ b/tools/distribute/devkit_distribute/bin/report/template/perf_report.html @@ -5,6 +5,8 @@ Kunpeng DevKit - + @@ -94,9 +97,17 @@ }; const trendHtml = () => { return ` -

DevKit Performance Summary

-
+

+ DevKit Performance Summary + +

+
+
+
+
+ +
`; }; @@ -119,7 +130,7 @@
`; }; - const consumeTableData = (target) => { + const consumeTableData = (target, collect = false) => { const dataCopy = structuredClone(pipelineData[target]?.[`${target}_tb_data`]); const colsCount = pipelineData[target]?.[`${target}_tb_cols`]; const originDataRef = pipelineData[target]?.[`${target}_tb_data`]; @@ -147,18 +158,41 @@ new DataTable('#example', { columns, data: dataSet, - searching: false, + searching: true, lengthChange: false, info: false, - paging: false, + paging: true, }); + if (collect) { + const labels = pipelineData[target]?.[`${target}_chart_labels`]; + const chartData = {}; + for (const label of labels) { + const idx = originDataRef.indexOf(label); + const singleCol = []; + for (let i = idx + colsCount; i < originDataRef.length; i += colsCount) { + singleCol.push(Number(originDataRef[i])); + } + chartData[label] = singleCol; + } + return chartData; + } } } const reportScript = (target) => { consumeTableData(target); } const trendScript = (target) => { - consumeTableData(target); + const chartData = consumeTableData(target, true); + const canvasContainer = document.getElementById('chart-container'); + const canvas = document.getElementById('cvs'); + canvasContainer.removeChild(canvas); + const newCanvas = document.createElement('canvas'); + newCanvas.id = 'cvs'; + canvasContainer.appendChild(newCanvas); + newCanvas.width = newCanvas.clientWidth * devicePixelRatio; + newCanvas.height = newCanvas.clientHeight * devicePixelRatio; + processData(chartData, pipelineData[target]?.[`${target}_chart_labels`][0]); + }; const gitScript = (target) => { consumeTableData(target); @@ -191,44 +225,72 @@ } } }); + }; + const completeCallable = {reportHtml, trendHtml, gitHtml, chartHtml, reportScript, trendScript, gitScript, chartScript}; + const callable = {}; + for (const page of valid_pages) { + if (full_pages.includes(page)) { + callable[`${page}Html`] = completeCallable[`${page}Html`]; + callable[`${page}Script`] = completeCallable[`${page}Script`]; + } + } + for (const page of full_pages) { + if (!valid_pages.includes(page)) { + $(`#nav-${page}`).css('display', 'none'); + } + } + if (valid_pages?.[0] && full_pages.includes(valid_pages[0])) { + navigation(valid_pages[0]); + } - function processData(jsonData) { - const categories = Object.keys(jsonData); - const data = {}; - const labels = Array.from({length: jsonData[categories[0]].length}, (_, i) => i); - for (const category of categories) { + function switchContent(target) { + const focused = $('.sw-fc'); + const backgrounded = $('.sw-bg'); + focused.removeClass('sw-fc'); + focused.addClass('sw-bg'); + backgrounded.removeClass('sw-bg'); + backgrounded.addClass('sw-fc'); + } + + function processData(jsonData, keyOfX = undefined) { + const categories = Object.keys(jsonData); + const data = {}; + let labels = Array.from({length: jsonData[categories[0]].length}, (_, i) => i); + if (keyOfX) { + labels = jsonData[keyOfX]; + } + for (const category of categories) { + if (category !== keyOfX) { data[category] = jsonData[category]; } - createLineChart('cvs', labels, data); } + createLineChart('cvs', labels, data); + } - function createLineChart(chartId, labels, data) { - const ctx = document.getElementById(chartId).getContext('2d'); - const datasets = Object.keys(data).map((label, index) => ({ - label, - data: data[label], - borderColor: getRandomColor(), - fill: false - })); - const chartData = { - labels, - datasets - }; - new Chart(ctx, { - type: 'line', - data: chartData - }) - } - function getRandomColor() { - const letters = '0123456789ABCDEF'; - let color = '#'; - for (let i = 0; i < 6; ++i) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; + function createLineChart(chartId, labels, data) { + const ctx = document.getElementById(chartId).getContext('2d'); + const datasets = Object.keys(data).map((label, index) => ({ + label, + data: data[label], + borderColor: getRandomColor(), + fill: false + })); + const chartData = { + labels, + datasets + }; + new Chart(ctx, { + type: 'line', + data: chartData + }) + } + function getRandomColor() { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; ++i) { + color += letters[Math.floor(Math.random() * 16)]; } - }; - const callable = {reportHtml, trendHtml, gitHtml, chartHtml, reportScript, trendScript, gitScript, chartScript}; - navigation('report'); + return color; + } \ No newline at end of file