Upgrades charting library and adds employee details page
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
parent
2fcdbf3bc3
commit
e86948a984
4 changed files with 2266 additions and 141 deletions
2157
wwwroot/poc-employee.html
Normal file
2157
wwwroot/poc-employee.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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', () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue