Moving away from Azure Devops #1
4 changed files with 2266 additions and 141 deletions
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -10,7 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@novadi/core": "^0.6.0",
|
"@novadi/core": "^0.6.0",
|
||||||
"@rollup/rollup-win32-x64-msvc": "^4.52.2",
|
"@rollup/rollup-win32-x64-msvc": "^4.52.2",
|
||||||
"@sevenweirdpeople/swp-charting": "^0.1.0",
|
"@sevenweirdpeople/swp-charting": "^0.1.7",
|
||||||
"dayjs": "^1.11.19",
|
"dayjs": "^1.11.19",
|
||||||
"fuse.js": "^7.1.0",
|
"fuse.js": "^7.1.0",
|
||||||
"json-diff-ts": "^4.8.2",
|
"json-diff-ts": "^4.8.2",
|
||||||
|
|
@ -1175,9 +1175,9 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@sevenweirdpeople/swp-charting": {
|
"node_modules/@sevenweirdpeople/swp-charting": {
|
||||||
"version": "0.1.2",
|
"version": "0.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.7.tgz",
|
||||||
"integrity": "sha512-zvPLPWKxUg04yju3AtqoB0/Mom62NEyHhs0djhbd+IEKPpKG3VB1zDhY+t3kadoCMpleJbYvFnyAnLH8qHP5RQ==",
|
"integrity": "sha512-i3HEQMQmltmxykPGXCRcN8VMJZXD1sI8urb7rN8eTjB9EscDsACdkS+WyvxOEEEhyHj1hMdtULeX3BIZ1ZNrng==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@types/chai": {
|
"node_modules/@types/chai": {
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@novadi/core": "^0.6.0",
|
"@novadi/core": "^0.6.0",
|
||||||
"@rollup/rollup-win32-x64-msvc": "^4.52.2",
|
"@rollup/rollup-win32-x64-msvc": "^4.52.2",
|
||||||
"@sevenweirdpeople/swp-charting": "^0.1.0",
|
"@sevenweirdpeople/swp-charting": "^0.1.7",
|
||||||
"dayjs": "^1.11.19",
|
"dayjs": "^1.11.19",
|
||||||
"fuse.js": "^7.1.0",
|
"fuse.js": "^7.1.0",
|
||||||
"json-diff-ts": "^4.8.2",
|
"json-diff-ts": "^4.8.2",
|
||||||
|
|
|
||||||
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;
|
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
|
REPORT TABLE
|
||||||
========================================== */
|
========================================== */
|
||||||
|
|
@ -469,56 +380,12 @@
|
||||||
<swp-charts-grid>
|
<swp-charts-grid>
|
||||||
<swp-chart-card>
|
<swp-chart-card>
|
||||||
<swp-chart-title>Timer pr. uge</swp-chart-title>
|
<swp-chart-title>Timer pr. uge</swp-chart-title>
|
||||||
<swp-chart-container>
|
<swp-chart-container id="hoursChart"></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-card>
|
</swp-chart-card>
|
||||||
|
|
||||||
<swp-chart-card>
|
<swp-chart-card>
|
||||||
<swp-chart-title>Fraværsfordeling</swp-chart-title>
|
<swp-chart-title>Fraværsfordeling</swp-chart-title>
|
||||||
<swp-chart-container>
|
<swp-chart-container id="absenceChart"></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-card>
|
</swp-chart-card>
|
||||||
</swp-charts-grid>
|
</swp-charts-grid>
|
||||||
|
|
||||||
|
|
@ -583,7 +450,108 @@
|
||||||
</swp-report-table>
|
</swp-report-table>
|
||||||
</swp-page-container>
|
</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
|
// Period selector
|
||||||
document.querySelectorAll('swp-period-selector button').forEach(btn => {
|
document.querySelectorAll('swp-period-selector button').forEach(btn => {
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener('click', () => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue