chart.js
86 lines
| 1 | jQuery(document).ready(function(){ |
| 2 | jQuery('.matomo-table[data-chart]').each(function() { |
| 3 | var LABEL_EVERY_N_TICKS = 2; |
| 4 | var colors = [ |
| 5 | "#55bae7", |
| 6 | "#ddb745", |
| 7 | "#4c2a9c", |
| 8 | "#3e7b2d" |
| 9 | ]; |
| 10 | var currentColorIndex = 0; |
| 11 | var $this = jQuery(this); |
| 12 | var $postbox = $this.parents('div.postbox'); |
| 13 | var $table = $postbox.find('table'); |
| 14 | $table.hide(); |
| 15 | var $canvas = jQuery('<canvas/>',{'id':$this.attr('data-chart')}); |
| 16 | $canvas.insertAfter($table); |
| 17 | var labels = []; |
| 18 | var metrics = JSON.parse($table.attr('data-metrics')); |
| 19 | var datasets = {}; |
| 20 | $table.find('tr').each(function() { |
| 21 | var $row = jQuery(this); |
| 22 | |
| 23 | var labelCell = $row.find('td:nth-child(1)'); |
| 24 | labels.unshift(labelCell.attr('data-label') || labelCell.text()); |
| 25 | |
| 26 | Object.keys(metrics).forEach((metricName, i) => { |
| 27 | var metricTitle = metrics[metricName]; |
| 28 | |
| 29 | if (!datasets[metricName]) { |
| 30 | var color = colors[currentColorIndex]; |
| 31 | currentColorIndex = (currentColorIndex + 1) % colors.length; |
| 32 | |
| 33 | datasets[metricName] = { |
| 34 | label: metricTitle, |
| 35 | data: [], |
| 36 | borderColor: color, |
| 37 | pointBackgroundColor: color, |
| 38 | pointBorderColor: color, |
| 39 | pointHoverBackgroundColor: color, |
| 40 | pointHoverBorderColor: color, |
| 41 | }; |
| 42 | } |
| 43 | |
| 44 | var value = $row.find('td:nth-child(' + (i + 2) + ')').text(); |
| 45 | if ( '-' === value ) { |
| 46 | value = 0; |
| 47 | } |
| 48 | |
| 49 | datasets[metricName].data.unshift(value); |
| 50 | }); |
| 51 | }); |
| 52 | |
| 53 | var myChart = new Chart($canvas, { |
| 54 | type: 'line', |
| 55 | data: { |
| 56 | labels: labels, |
| 57 | datasets: Object.values(datasets) |
| 58 | }, |
| 59 | options: { |
| 60 | plugins: { |
| 61 | legend: { |
| 62 | display: false |
| 63 | } |
| 64 | }, |
| 65 | scales: { |
| 66 | x: { |
| 67 | ticks: { |
| 68 | callback: function (value, index, values) { |
| 69 | if ( index % LABEL_EVERY_N_TICKS !== 0 ) { |
| 70 | return ''; |
| 71 | } |
| 72 | |
| 73 | return labels[index]; |
| 74 | }, |
| 75 | maxRotation: 0, |
| 76 | } |
| 77 | }, |
| 78 | y: { |
| 79 | beginAtZero: true |
| 80 | } |
| 81 | } |
| 82 | } |
| 83 | }); |
| 84 | }); |
| 85 | }); |
| 86 |