Ubuntu
jQuery(document).ready(function(){
jQuery('.matomo-table[data-chart]').each(function() {
var LABEL_EVERY_N_TICKS = 2;
var colors = [
"#55bae7",
"#ddb745",
"#4c2a9c",
"#3e7b2d"
];
var currentColorIndex = 0;
var $this = jQuery(this);
var $postbox = $this.parents('div.postbox');
var $table = $postbox.find('table');
$table.hide();
var $canvas = jQuery('',{'id':$this.attr('data-chart')});
$canvas.insertAfter($table);
var labels = [];
var metrics = JSON.parse($table.attr('data-metrics'));
var datasets = {};
$table.find('tr').each(function() {
var $row = jQuery(this);
var labelCell = $row.find('td:nth-child(1)');
labels.unshift(labelCell.attr('data-label') || labelCell.text());
Object.keys(metrics).forEach((metricName, i) => {
var metricTitle = metrics[metricName];
if (!datasets[metricName]) {
var color = colors[currentColorIndex];
currentColorIndex = (currentColorIndex + 1) % colors.length;
datasets[metricName] = {
label: metricTitle,
data: [],
borderColor: color,
pointBackgroundColor: color,
pointBorderColor: color,
pointHoverBackgroundColor: color,
pointHoverBorderColor: color,
};
}
var value = $row.find('td:nth-child(' + (i + 2) + ')').text();
if ( '-' === value ) {
value = 0;
}
datasets[metricName].data.unshift(value);
});
});
var myChart = new Chart($canvas, {
type: 'line',
data: {
labels: labels,
datasets: Object.values(datasets)
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
x: {
ticks: {
callback: function (value, index, values) {
if ( index % LABEL_EVERY_N_TICKS !== 0 ) {
return '';
}
return labels[index];
},
maxRotation: 0,
}
},
y: {
beginAtZero: true
}
}
}
});
});
});