| @@ -1,7 +1,7 @@ | ||
| 1 | 1 | /* eslint-disable no-new */ |
| 2 | 2 | |
| 3 | -import Chart from 'chart.js'; | |
| 3 | +import Chart from 'chart.js/auto'; | |
| 4 | 4 | |
| 5 | 5 | const { epChartData } = window; |
| 6 | 6 | |
| 7 | 7 | /** |
| @@ -24,10 +24,8 @@ | ||
| 24 | 24 | const barLabels = []; |
| 25 | 25 | const barDocs = []; |
| 26 | 26 | const barColors = []; |
| 27 | 27 | |
| 28 | -Chart.defaults.global.legend.labels.usePointStyle = true; | |
| 29 | - | |
| 30 | 28 | barData.forEach(function (data) { |
| 31 | 29 | barLabels.push(data[1].name); |
| 32 | 30 | barDocs.push(data[1].docs); |
| 33 | 31 | barColors.push(getRandomColor()); |
| @@ -35,9 +33,9 @@ | ||
| 35 | 33 | |
| 36 | 34 | const documentChart = document.getElementById('documentChart'); |
| 37 | 35 | if (documentChart) { |
| 38 | 36 | new Chart(documentChart, { |
| 39 | - type: 'horizontalBar', | |
| 37 | + type: 'bar', | |
| 40 | 38 | data: { |
| 41 | 39 | labels: barLabels, |
| 42 | 40 | datasets: [ |
| 43 | 41 | { |
| @@ -47,10 +45,13 @@ | ||
| 47 | 45 | }, |
| 48 | 46 | ], |
| 49 | 47 | }, |
| 50 | 48 | options: { |
| 51 | - legend: { | |
| 52 | - display: false, | |
| 49 | + indexAxis: 'y', | |
| 50 | + plugins: { | |
| 51 | + legend: { | |
| 52 | + display: false, | |
| 53 | + }, | |
| 53 | 54 | }, |
| 54 | 55 | title: { |
| 55 | 56 | display: true, |
| 56 | 57 | }, |
| @@ -76,10 +77,15 @@ | ||
| 76 | 77 | responsive: false, |
| 77 | 78 | title: { |
| 78 | 79 | display: true, |
| 79 | 80 | }, |
| 80 | - legend: { | |
| 81 | - position: 'right', | |
| 81 | + plugins: { | |
| 82 | + legend: { | |
| 83 | + position: 'right', | |
| 84 | + labels: { | |
| 85 | + usePointStyle: true, | |
| 86 | + }, | |
| 87 | + }, | |
| 82 | 88 | }, |
| 83 | 89 | tooltips: { |
| 84 | 90 | callbacks: { |
| 85 | 91 | /** |
| @@ -93,51 +99,8 @@ | ||
| 93 | 99 | const dataset = data.datasets[item.datasetIndex]; |
| 94 | 100 | const currentValue = dataset.data[item.index]; |
| 95 | 101 | |
| 96 | 102 | return `Operations: ${currentValue}`; |
| 97 | - }, | |
| 98 | - }, | |
| 99 | - }, | |
| 100 | - }, | |
| 101 | - }); | |
| 102 | -} | |
| 103 | - | |
| 104 | -const queriesTimeChart = document.getElementById('queriesTimeChart'); | |
| 105 | -if (queriesTimeChart) { | |
| 106 | - new Chart(queriesTimeChart, { | |
| 107 | - type: 'pie', | |
| 108 | - data: { | |
| 109 | - labels: ['Avg indexing time in ms', 'Avg query time in ms'], | |
| 110 | - datasets: [ | |
| 111 | - { | |
| 112 | - label: '', | |
| 113 | - backgroundColor: ['#9ea6c7', '#93b3d5'], | |
| 114 | - data: [epChartData.index_time_in_millis, epChartData.query_time_in_millis], | |
| 115 | - }, | |
| 116 | - ], | |
| 117 | - }, | |
| 118 | - options: { | |
| 119 | - responsive: false, | |
| 120 | - title: { | |
| 121 | - display: true, | |
| 122 | - }, | |
| 123 | - legend: { | |
| 124 | - position: 'right', | |
| 125 | - }, | |
| 126 | - tooltips: { | |
| 127 | - callbacks: { | |
| 128 | - /** | |
| 129 | - * Appends the string milliseconds after tooltip value | |
| 130 | - * | |
| 131 | - * @param {object} item Tooltip item | |
| 132 | - * @param {object} data Tooltip data | |
| 133 | - * @returns {string} current value in milliseconds | |
| 134 | - */ | |
| 135 | - label(item, data) { | |
| 136 | - const dataset = data.datasets[item.datasetIndex]; | |
| 137 | - const currentValue = dataset.data[item.index]; | |
| 138 | - | |
| 139 | - return `${+currentValue} milliseconds`; | |
| 140 | 103 | }, |
| 141 | 104 | }, |
| 142 | 105 | }, |
| 143 | 106 | }, |
