Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor frontend build and chart initialization

Browse source 
Moves chart data to JSON file for better separation of concerns
Implements lazy chart initialization in reports module
Updates build script and npm dependencies
Removes hardcoded chart scripts from Razor page
This commit is contained in:
Janus C. H. Knudsen 2026-01-22 16:32:46 +01:00
parent 097fe7f912
commit b921e26e48
12 changed files with 249 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

157
PlanTempus.Application/Features/Reports/Pages/Index.cshtml
View file

@ -496,160 +496,3 @@
</swp-card>
</swp-page-container>
</swp-tab-content>
@section Scripts {
<script type="module">
import { createChart } from '/lib/swp-charting/dist/swp-charting.js';
// Revenue bar chart
createChart(document.getElementById('revenueChart'), {
height: 240,
xAxis: {
categories: ['Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec', 'Jan']
},
yAxis: {
format: (v) => `${Math.round(v / 1000)}k`
},
series: [{
name: 'Omsætning',
color: '#00897b',
type: 'bar',
unit: ' kr',
data: [
{ x: 'Feb', y: 142500 },
{ x: 'Mar', y: 168200 },
{ x: 'Apr', y: 155800 },
{ x: 'Maj', y: 178400 },
{ x: 'Jun', y: 145600 },
{ x: 'Jul', y: 98200 },
{ x: 'Aug', y: 134500 },
{ x: 'Sep', y: 189300 },
{ x: 'Okt', y: 201400 },
{ x: 'Nov', y: 178900 },
{ x: 'Dec', y: 245600 },
{ x: 'Jan', y: 187230 }
]
}]
});
// Payment methods pie chart
createChart(document.getElementById('paymentChart'), {
height: 240,
series: [
{ name: 'Kort', color: '#1976d2', type: 'pie', data: [{ x: '', y: 892400 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
{ name: 'MobilePay', color: '#5C6BC0', type: 'pie', data: [{ x: '', y: 445200 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
{ name: 'Kontant', color: '#43a047', type: 'pie', data: [{ x: '', y: 234800 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
{ name: 'Faktura', color: '#f59e0b', type: 'pie', data: [{ x: '', y: 178500 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
{ name: 'Fordelskort', color: '#8b5cf6', type: 'pie', data: [{ x: '', y: 74700 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } }
],
tooltip: true,
legend: { position: 'right', align: 'center' }
});
// Hours per week grouped bar chart (Timerapport)
createChart(document.getElementById('hoursChart'), {
height: 240,
xAxis: { categories: ['Uge 48', 'Uge 49', 'Uge 50', 'Uge 51', 'Uge 52'] },
yAxis: { format: (v) => v + ' t' },
series: [
{
name: 'Anna Jensen',
color: '#00897b',
type: 'bar',
data: [
{ x: 'Uge 48', y: 32 },
{ x: 'Uge 49', y: 40 },
{ x: 'Uge 50', y: 38 },
{ x: 'Uge 51', y: 40 },
{ x: 'Uge 52', y: 20 }
]
},
{
name: 'Martin Nielsen',
color: '#3b82f6',
type: 'bar',
data: [
{ x: 'Uge 48', y: 30 },
{ x: 'Uge 49', y: 40 },
{ x: 'Uge 50', y: 35 },
{ x: 'Uge 51', y: 40 },
{ x: 'Uge 52', y: 16 }
]
},
{
name: 'Sofie Larsen',
color: '#8b5cf6',
type: 'bar',
data: [
{ x: 'Uge 48', y: 28 },
{ x: 'Uge 49', y: 36 },
{ x: 'Uge 50', y: 40 },
{ x: 'Uge 51', y: 40 },
{ x: 'Uge 52', y: 18 }
]
},
{
name: 'Peter Hansen',
color: '#f59e0b',
type: 'bar',
data: [
{ x: 'Uge 48', y: 34 },
{ x: 'Uge 49', y: 38 },
{ x: 'Uge 50', y: 32 },
{ x: 'Uge 51', y: 40 },
{ x: 'Uge 52', y: 14 }
]
}
],
legend: { position: 'bottom', align: 'center', gap: 0 }
});
// Absence distribution pie chart (Timerapport)
createChart(document.getElementById('absenceChart'), {
height: 240,
series: [
{
name: 'Syg',
color: '#e53935',
type: 'pie',
unit: ' t',
data: [
{ x: 'Martin Nielsen', y: 8 },
{ x: 'Peter Hansen', y: 4 }
],
pie: { innerRadius: 25, outerRadius: 90 }
},
{
name: 'Ferie',
color: '#f59e0b',
type: 'pie',
unit: ' t',
data: [
{ x: 'Anna Jensen', y: 4 },
{ x: 'Peter Hansen', y: 4 }
],
pie: { innerRadius: 25, outerRadius: 90 }
},
{
name: 'Fri',
color: '#8b5cf6',
type: 'pie',
unit: ' t',
data: [
{ x: 'Sofie Larsen', y: 4 }
],
pie: { innerRadius: 25, outerRadius: 90 }
}
],
legend: { position: 'right', align: 'center' }
});
// Period selector functionality
document.querySelectorAll('swp-period-selector button').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('swp-period-selector button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
</script>
}