DOCS: benchmarks ovino vs tf (#10654)

* benchmarks-ovino-vs-tf

* minor fixes

docs/_static/js/graphs_ov_tf.js

@@ -0,0 +1,109 @@
+$(document).ready(function () {
+    var chartBlock = $('.chart-block-tf-ov');
+    chartBlock.each(function () {
+        var url = $(this).data('loadcsv');
+        Papa.parse(url, {
+            download: true,
+            complete: renderData($(this))
+        })
+    });
+
+    function getLabels(data) {
+        return data
+            .map((item) => item[1]);
+    }
+
+    function getChartOptions(title, displayLabels) {
+        return {
+            responsive: false,
+            maintainAspectRatio: false,
+            legend: { display: true, position: 'bottom' },
+            title: {
+                display: true,
+                text: title
+            },
+            scales: {
+                xAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }],
+                yAxes: [{
+                    ticks: {
+                        display: displayLabels, //this will remove only the label
+                        beginAtZero: true
+                    }
+                }]
+            },
+            plugins: {
+                datalabels: {
+                    color: "#4A4A4A",
+                    anchor: "end",
+                    align: "end",
+                    clamp: false,
+                    offset: 0,
+                    display: true,
+                    font: {
+                        size: 8,
+                        family: 'Roboto'
+                    }
+                }
+            }
+        }
+    }
+
+    function getChartData(data) {
+        function getDataset(data, col, label, color) {
+            return {
+                label: label,
+                data: data.map(function (item) {
+                    return item[col]
+                }),
+                backgroundColor: color,
+                borderColor: 'rgba(170,170,170,0)',
+                barThickness: 12
+            }
+        }
+        return {
+            labels: getLabels(data),
+            datasets: [getDataset(data, 2, 'openvino', '#00C7FD'), getDataset(data, 3, 'TF', '#8F5DA2')]
+        };
+    }
+
+    function renderData(currentChart) {
+        return function (result) {
+            var data = result.data;
+            // remove col names
+            data.shift(0);
+            var chartName = data[1][0];
+            var chartSlug = chartName.replace(')', '').replace(' (', '-');
+            var graphContainer = $('<div>');
+            var chartContainer = $('<div>');
+            graphContainer.attr('id', 'ov-graph-container-' + chartSlug);
+            chartContainer.addClass('chart-container');
+            chartContainer.addClass('container');
+            var chartWrap = $('<div>');
+            chartWrap.addClass('chart-wrap');
+            chartWrap.addClass('container');
+            chartContainer.append(chartWrap);
+            var chart = $('<div>');
+            chart.addClass('chart');
+            chart.addClass('col-md-12');
+            var canvas = $('<canvas>');
+            chart.append(canvas);
+            var container = $('<div>');
+            container.addClass('row');
+            container.append(chart);
+            var context = canvas.get(0).getContext('2d');
+            context.canvas.width = context.canvas.width * 2.5;
+            var chartTitle = chartName + ', Throughput (FPS) Precision: FP32 (Higher is better)';
+            new Chart(context, {
+                type: 'horizontalBar',
+                data: getChartData(data),
+                options: getChartOptions(chartTitle, true)
+            });
+            chartContainer.append(container);
+            currentChart.append(chartContainer);
+        }
+    }
+});

docs/_templates/layout.html

@@ -12,7 +12,5 @@
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js"></script>
 <script src="{{ pathto('_static/js/viewer.min.js', 1) }}"></script>
-<script src="{{ pathto('_static/js/custom.js', 1) }}"></script>
-<script src="{{ pathto('_static/js/graphs.js', 1) }}"></script>
 <script src="/assets/versions_raw.js"></script>
 {% endblock %}

docs/conf.py

@@ -150,6 +150,7 @@ def setup(app):
     app.add_config_value('repositories', repositories, rebuild=True)
     app.add_js_file('js/custom.js')
     app.add_js_file('js/graphs.js')
+    app.add_js_file('js/graphs_ov_tf.js')
     try:
         shutil.copytree(os.path.join(app.srcdir, 'csv'), os.path.join(app.outdir, 'csv'), dirs_exist_ok=True)
     except FileNotFoundError: