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

Upgrades charting library and adds employee details page

Browse source 
Updates @sevenweirdpeople/swp-charting package to latest version (0.1.7)

Adds comprehensive employee details page with multiple tabs and interactive components including:
- Detailed employee profile information
- Work schedule and availability tracking
- Services and specialties management
- Salary and performance statistics

Integrates advanced charting capabilities for visualizing employee data
This commit is contained in:
Janus C. H. Knudsen 2025-12-26 14:05:56 +01:00
parent 2fcdbf3bc3
commit e86948a984
4 changed files with 2266 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

240
wwwroot/poc-rapport.html
View file

@ -188,95 +188,6 @@
position: relative;
}
/* Bar chart (simple CSS implementation) */
swp-bar-chart {
display: flex;
align-items: flex-end;
justify-content: space-around;
height: 100%;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border);
}
swp-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
max-width: 60px;
}
swp-bar-fill {
width: 32px;
background: var(--color-teal);
border-radius: 4px 4px 0 0;
transition: height 300ms ease;
}
swp-bar-label {
font-size: 11px;
color: var(--color-text-secondary);
}
/* Pie chart (simple CSS implementation) */
swp-pie-chart {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
height: 100%;
}
swp-pie {
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(
var(--color-red) 0deg 120deg,
var(--color-amber) 120deg 200deg,
var(--color-purple) 200deg 360deg
);
position: relative;
}
swp-pie::after {
content: '';
position: absolute;
inset: 40px;
background: var(--color-surface);
border-radius: 50%;
}
swp-pie-legend {
display: flex;
flex-direction: column;
gap: 12px;
}
swp-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
swp-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
swp-legend-dot.red { background: var(--color-red); }
swp-legend-dot.amber { background: var(--color-amber); }
swp-legend-dot.purple { background: var(--color-purple); }
swp-legend-value {
font-family: var(--font-mono);
font-weight: 500;
margin-left: auto;
}
/* ==========================================
REPORT TABLE
========================================== */
@ -469,56 +380,12 @@
<swp-charts-grid>
<swp-chart-card>
<swp-chart-title>Timer pr. uge</swp-chart-title>
<swp-chart-container>
<swp-bar-chart>
<swp-bar>
<swp-bar-fill style="height: 65%"></swp-bar-fill>
<swp-bar-label>Uge 48</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 80%"></swp-bar-fill>
<swp-bar-label>Uge 49</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 75%"></swp-bar-fill>
<swp-bar-label>Uge 50</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 90%"></swp-bar-fill>
<swp-bar-label>Uge 51</swp-bar-label>
</swp-bar>
<swp-bar>
<swp-bar-fill style="height: 45%"></swp-bar-fill>
<swp-bar-label>Uge 52</swp-bar-label>
</swp-bar>
</swp-bar-chart>
</swp-chart-container>
<swp-chart-container id="hoursChart"></swp-chart-container>
</swp-chart-card>
<swp-chart-card>
<swp-chart-title>Fraværsfordeling</swp-chart-title>
<swp-chart-container>
<swp-pie-chart>
<swp-pie></swp-pie>
<swp-pie-legend>
<swp-legend-item>
<swp-legend-dot class="red"></swp-legend-dot>
<span>Syg</span>
<swp-legend-value>12 t</swp-legend-value>
</swp-legend-item>
<swp-legend-item>
<swp-legend-dot class="amber"></swp-legend-dot>
<span>Ferie</span>
<swp-legend-value>8 t</swp-legend-value>
</swp-legend-item>
<swp-legend-item>
<swp-legend-dot class="purple"></swp-legend-dot>
<span>Fri</span>
<swp-legend-value>4 t</swp-legend-value>
</swp-legend-item>
</swp-pie-legend>
</swp-pie-chart>
</swp-chart-container>
<swp-chart-container id="absenceChart"></swp-chart-container>
</swp-chart-card>
</swp-charts-grid>
@ -583,7 +450,108 @@
</swp-report-table>
</swp-page-container>
<script>
<script type="module">
// Import charting library
import { createChart } from 'https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js';
// Initialize pie chart with breakdown
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: 100 }
},
{
name: 'Ferie',
color: '#f59e0b',
type: 'pie',
unit: 't',
data: [
{ x: 'Anna Jensen', y: 4 },
{ x: 'Peter Hansen', y: 4 },
],
pie: { innerRadius: 25, outerRadius: 100 }
},
{
name: 'Fri',
color: '#8b5cf6',
type: 'pie',
unit: 't',
data: [
{ x: 'Sofie Larsen', y: 4 },
],
pie: { innerRadius: 25, outerRadius: 100 }
}
],
legend: { position: 'right', align: 'center' }
});
// Initialize grouped bar chart
createChart(document.getElementById('hoursChart'), {
xAxis: { categories: ['Uge 48', 'Uge 49', 'Uge 50', 'Uge 51', 'Uge 52'] },
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 },
]
}
],
yAxis: { format: (v) => v + ' t' },
legend: { position: 'bottom', align: 'center', gap: 0 },
height: 240
});
// Period selector
document.querySelectorAll('swp-period-selector button').forEach(btn => {
btn.addEventListener('click', () => {