Charts

/* Bar Chart */
var dataRevenue = {
	datasets: [{
		label: 'Revenue for April 2022',
		data: [
			{x: new Date('2022-03-01T00:00:00'), y: 150},
			{x: new Date('2022-03-02T00:00:00'), y: 500},
			{x: new Date('2022-03-03T00:00:00'), y: 350},
			{x: new Date('2022-03-04T00:00:00'), y: 100},
			{x: new Date('2022-03-05T00:00:00'), y: 330},
			{x: new Date('2022-03-06T00:00:00'), y: 420},
			{x: new Date('2022-03-07T00:00:00'), y: 700},
			{x: new Date('2022-03-08T00:00:00'), y: 1200},
			{x: new Date('2022-03-09T00:00:00'), y: 100},
			{x: new Date('2022-03-10T00:00:00'), y: 500},
			{x: new Date('2022-03-11T00:00:00'), y: 390},
			{x: new Date('2022-03-12T00:00:00'), y: 100},
			{x: new Date('2022-03-13T00:00:00'), y: 370},
			{x: new Date('2022-03-14T00:00:00'), y: 400},
			{x: new Date('2022-03-15T00:00:00'), y: 700},
			{x: new Date('2022-03-16T00:00:00'), y: 1200},
			{x: new Date('2022-03-17T00:00:00'), y: 100},
			{x: new Date('2022-03-18T00:00:00'), y: 550},
			{x: new Date('2022-03-19T00:00:00'), y: 390},
			{x: new Date('2022-03-20T00:00:00'), y: 150},
			{x: new Date('2022-03-21T00:00:00'), y: 360},
			{x: new Date('2022-03-22T00:00:00'), y: 420},
			{x: new Date('2022-03-23T00:00:00'), y: 650},
			{x: new Date('2022-03-24T00:00:00'), y: 1200},
			{x: new Date('2022-03-25T00:00:00'), y: 100},
			{x: new Date('2022-03-26T00:00:00'), y: 520},
			{x: new Date('2022-03-27T00:00:00'), y: 370},
			{x: new Date('2022-03-28T00:00:00'), y: 100},
			{x: new Date('2022-03-29T00:00:00'), y: 350},
			{x: new Date('2022-03-30T00:00:00'), y: 430},
			{x: new Date('2022-03-31T00:00:00'), y: 550}
		],
		backgroundColor: [
			'rgba(9, 165, 190, 1)'
		],
		borderColor: [
			'rgba(9, 165, 190, 1)'
		],
		borderWidth: 1
	}]
};

var configRevenue = {
	type: 'bar',
	data: dataRevenue,
	options: {
		plugins: {
			legend: {
				display: true
			},
			title: {
				display: true,
				text: 'Chart.js Bar Chart',
				color: 'rgba(49, 52, 75, 1)',
				font: {
					size: 24,
					family: 'Nunito Sans',
					weight: 'bold'
				},
				padding: {
					bottom: 10
				}
			}
		},
		scales: {
			x: {
				type: 'time',
				min: {x: new Date('2022-03-01T00:00:00'), y: 150},
				max: {x: new Date('2022-03-31T00:00:00'), y: 550},
				time: {
					unit: 'day',
					displayFormats: {
						'day': 'dd'
					}
				}
			},
			y: {
				beginAtZero: true
			}
		}
	}
};

var revenueChart = new Chart(
	document.getElementById('revenueChart'),
	configRevenue
);

/* Doughnut Chart */
var dataSales = {
	labels: ['Quotes', 'Orders', 'Completed Orders'],
	datasets: [{
		label: 'Monthly Sales',
		data: [180, 120, 600],
		backgroundColor: [
			'rgba(8, 189, 219, 1)',
			'rgba(241, 141, 33, 1)',
			'rgba(166, 206, 147, 1)'
		],
		borderWidth: 1
	}]
};

var getTotal = function() {
	var sum = dataSales.datasets[0].data.reduce((a, b) => a + b, 0);
	return `Total: ${sum}`;
}

var totalValue = getTotal();

var centerText = {
	id: 'centerText',
	afterDatasetsDraw(chart, args, options) {
		var {ctx, chartArea: {left, right, top, bottom, width, height} } = chart;
		ctx.save();
		
		switch (true) {
			case canvasHeight <= 255:
				ctx.font = 'bold 9px Nunito Sans';
				break;
			case canvasHeight <= 310:
				ctx.font = 'bold 11px Nunito Sans';
				break;
			case canvasHeight <= 350:
				ctx.font = 'bold 13px Nunito Sans';
				break;
			case canvasHeight <= 465:
				ctx.font = 'bold 16px Nunito Sans';
				break;
			case canvasHeight <= 485:
				ctx.font = 'bold 18px Nunito Sans';
				break;
			default:
				ctx.font = 'bold 21px Nunito Sans';
		}
		
		ctx.fillStyle = 'rgba(49, 52, 75, 1)';
		ctx.textAlign = 'center';
		ctx.fillText(totalValue, width / 2, height / 2 + top + 2);
		ctx.restore();
	}
}

var configSales = {
	type: 'doughnut',
	data: dataSales,
	options: {
		plugins: {
			legend: {
				display: true
			},
			title: {
				display: true,
				text: 'Chart.js Doughnut Chart',
				color: 'rgba(49, 52, 75, 1)',
				font: {
					size: 24,
					family: 'Nunito Sans',
					weight: 'bold'
				},
				padding: {
					bottom: 10
				}
			}
		}
	},
	plugins: [centerText]
};

var salesChart = new Chart(
	document.getElementById('salesChart'),
	configSales
);

var chart = document.getElementById('salesChart');
var canvasHeight = parseInt(chart.style.height);