Differential D11760 Diff 39013 looper/templates/admin/looper/chart.html

Changeset View

Standalone View

looper/templates/admin/looper/chart.html

This file was added.

				{% load static %}
				<script src="{% static "looper/scripts/vendor/moment.min.js" %}"></script>
				<script src="{% static "looper/scripts/vendor/chart.min.js" %}"></script>
				<script src="{% static "looper/scripts/vendor/chartjs-adapter-moment.min.js" %}"></script>
				<div class="admin-chart-container">
				<canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="admin-chart-canvas"></canvas>
				</div>
				<script>
				document.addEventListener('DOMContentLoaded', () => {
				const ctx = document.getElementById('admin-chart-canvas').getContext('2d');
				const chartData = {{ chart.data \| safe }};

				// Parse the dates to JS
				chartData.forEach((d) => {
				d.x = new Date(d.date);
				});

				// Render the chart
				const chart = new Chart(ctx, {
				type: 'bar',
				data: {
				datasets: [
				{
				label: '{% firstof chart.label opts.verbose_name_plural %}',
				data: chartData,
				backgroundColor: 'rgba(220,20,20,0.5)',
				},
				],
				},
				indexAxis: 'x',
				options: {
				animation: false,
				responsive: true,
				scales: {
				x: {
				type: 'time',
				ticks: {
				source: 'auto',
				maxRotation: 0,
				autoSkip: true,
				},
				time: {
				unit: 'day',
				round: 'day',
				displayFormats: {
				day: 'MMM D',
				},
				},
				},
				y: {
				ticks: {
				beginAtZero: true,
				callback: function(value, index, values) {
				return '{{ chart.aggregate_by_prefix }}' + value;
				}
				},
				},
				},
				plugins: {
				tooltip: {
				enabled: true,
				callbacks: {
				title: function(context) {
				return moment(context[0].raw.x).format('MMM D, YYYY');
				},
				label: function(context) {
				var label = context.dataset.label \|\| '';

				if (context.raw.y !== null) {
				label += `: {{ chart.aggregate_by_prefix }}${context.raw.y}`;
				}
				return label;
				}
				}
				}
				}
				},
				});
				});
				</script>