[DOCS] upgrade chart js to v4 (#23020)

port to https://github.com/openvinotoolkit/openvino/pull/23008
This commit is contained in:
Andrzej Kopytko 2024-02-22 13:41:53 +01:00 committed by GitHub
parent 6758735364
commit 51055ef9e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 29 deletions

View File

@ -821,7 +821,7 @@ $(document).ready(function () {
// Text
const textContainer = document.createElement('p');
textContainer.style.color = item.fontColor;
textContainer.style.color = '#666';
textContainer.style.margin = 0;
textContainer.style.padding = 0;
textContainer.style.fontSize = '0.6rem';
@ -838,40 +838,39 @@ $(document).ready(function () {
}
};
// ====================================================
function getChartOptions(title, containerId) {
return {
responsive: true,
indexAxis: 'y',
maintainAspectRatio: false,
legend: {display: false},
title: {
display: false,
text: title
},
scales: {
xAxes: [{
x: {
ticks: {
beginAtZero: true
}
}],
yAxes: [{
},
y: {
ticks: {
display: false, //this will remove only the label
display: false,
beginAtZero: true
}
}]
}
},
plugins: {
legend: {
display: false
},
htmlLegend: {
// ID of the container to put the legend in
containerID: containerId,
}
}
}
}
// params: string[], Datasets[]
function getChartDataNew(labels, datasets) {
return {
labels: labels,
@ -948,24 +947,13 @@ $(document).ready(function () {
var graphConfigs = kpis.map((str) => {
var kpi = str.toLowerCase();
var groupUnit = model[0];
if (kpi === 'throughput') {
var throughputData = Graph.getDatabyKPI(model, kpi);
if (kpi === 'throughput' || kpi === 'latency') {
var kpiData = Graph.getDatabyKPI(model, kpi);
var config = Graph.getGraphConfig(kpi, groupUnit, precisions);
precisions.forEach((prec, index) => {
config.datasets[index].data = throughputData.map(tData => tData[prec]);
config.datasets[index].data = kpiData.map(tData => tData[prec]);
});
return config;
//to fix
// return removeEmptyLabel(config);
}
else if(kpi === 'latency'){
var latencyData = Graph.getDatabyKPI(model, kpi);
var config = Graph.getGraphConfig(kpi, groupUnit, precisions);
precisions.forEach((prec, index) => {
config.datasets[index].data = latencyData.map(tData => tData[prec]);
});
return config;
// return removeEmptyLabel(config);
return removeEmptyLabel(config);
}
var config = Graph.getGraphConfig(kpi, groupUnit);
config.datasets[0].data = Graph.getDatabyKPI(model, kpi);
@ -1040,7 +1028,6 @@ $(document).ready(function () {
sorted.forEach((index)=>{
config.datasets.splice(index,1);
})
console.log(config);
return config;
}
@ -1062,7 +1049,7 @@ $(document).ready(function () {
context.canvas.height = heightRatio;
window.setTimeout(() => {
new Chart(context, {
type: 'horizontalBar',
type: 'bar',
data: getChartDataNew(labels, datasets),
options: getChartOptions(chartTitle, containerId),
plugins: [htmlLegendPlugin]

View File

@ -12,7 +12,7 @@
<link rel="stylesheet" href="{{ pathto('_static/css/custom.css', 1) }}" type="text/css" />
<link rel="stylesheet" href="{{ pathto('_static/css/coveo_custom.css', 1) }}" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-barchart-background@1.3.0/build/Plugin.Barchart.Background.min.js"></script>