servala/website
1
0
Fork 0
Code Issues 10 Pull requests Projects 1 Packages 1 Activity Actions

add charts to pricelist

Browse source
This commit is contained in:
Tobias Brunner 2025-05-26 14:55:45 +02:00
parent 99f4edc209
commit 60e083b5bb
No known key found for this signature in database
2 changed files with 117 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
hub/services/static/js/chart.js Normal file
View file

File diff suppressed because one or more lines are too long

97
hub/services/templates/services/pricelist.html
View file

@ -1,7 +1,12 @@
{% extends 'base.html' %}
{% load static %}
{% block title %}Complete Price List{% endblock %}
{% block extra_js %}
<script src="{% static "js/chart.js" %}"></script>
{% endblock %}
{% block content %}
<div class="container-fluid mt-4">
<div class="row">
@ -108,6 +113,15 @@
</tbody>
</table>
</div>
{# Price Chart #}
<div class="mt-3">
<h5 class="text-muted">Price Chart - Units vs Final Price</h5>
<div style="height: 400px;">
<canvas id="chart-{{ group_name|slugify }}-{{ service_level|slugify }}" width="400" height="200"></canvas>
</div>
</div>
<p class="text-muted"><strong>{{ pricing_data|length }}</strong> variants for {{ service_level }} in {{ group_name }}</p>
{% else %}
<p class="text-muted">No pricing variants available for {{ service_level }} in {{ group_name }}.</p>
@ -127,4 +141,87 @@
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Chart data for each service level
{% for group_name, service_levels in pricing_data_by_group_and_service_level.items %}
{% for service_level, pricing_data in service_levels.items %}
{% if pricing_data %}
// Prepare data for {{ group_name }} - {{ service_level }}
const chartData{{ forloop.parentloop.counter }}{{ forloop.counter }} = {
labels: [{% for row in pricing_data %}{{ row.units }}{% if not forloop.last %}, {% endif %}{% endfor %}],
datasets: [
{
label: 'Final Price',
data: [{% for row in pricing_data %}{{ row.final_price|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.1,
fill: false
},
{
label: 'SLA Price',
data: [{% for row in pricing_data %}{{ row.sla_price|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
tension: 0.1,
fill: false
},
{
label: 'Compute Plan Price',
data: [{% for row in pricing_data %}{{ row.compute_plan_price|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
tension: 0.1,
fill: false
}
]
};
// Create chart for {{ group_name }} - {{ service_level }}
const ctx{{ forloop.parentloop.counter }}{{ forloop.counter }} = document.getElementById('chart-{{ group_name|slugify }}-{{ service_level|slugify }}').getContext('2d');
new Chart(ctx{{ forloop.parentloop.counter }}{{ forloop.counter }}, {
type: 'line',
data: chartData{{ forloop.parentloop.counter }}{{ forloop.counter }},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: 'Units'
}
},
y: {
title: {
display: true,
text: 'Price ({{ pricing_data.0.currency|default:"CHF" }})'
},
beginAtZero: true
}
},
plugins: {
title: {
display: true,
text: '{{ group_name }} - {{ service_level }} Pricing'
},
legend: {
display: true
}
},
elements: {
point: {
radius: 4,
hoverRadius: 6
}
}
}
});
{% endif %}
{% endfor %}
{% endfor %}
});
</script>
{% endblock %}