nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gantt days

Browse Source
This commit is contained in:
STEINNI
2026-08-29 14:43:51 +00:00
parent 5a8f93e376
commit 4625067352
3 changed files with 57 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
buildoz.css
+21 -1
View File
@@ -374,9 +374,11 @@ bz-grafloweditor .inner-console section .cols-2 input{
bz-gantt{
display: block;
position: relative;
--row: 25px;
--bar-gap: 4px; /* space above & below each bar inside its row */
--chart-left: calc(var(--tasks-width, 7em) + 1em); /* where the chart area starts */
}
bz-gantt ul.tasks{
list-style: none;
@@ -394,6 +396,24 @@ bz-gantt ul.tasks li{
bz-gantt.gantt bz-graflow{
position: absolute;
left: calc(var(--tasks-width, 7em) + 1em);
left: var(--chart-left);
top: calc(var(--row) + var(--bar-gap)); /* one header row (days grid) + bar centering gap */
right: 0;
bottom: 0;
width: auto; /* cancel the global bz-graflow 100vw/100vh defaults, */
height: auto; /* so the box stretches between its anchored edges */
}
bz-gantt li.header div.day:first-of-type{ border-left: 1px dotted #555; }
bz-gantt li.header div.day{
position: absolute;
/* anchored to bz-gantt (nearest positioned ancestor): spans all rows */
top: var(--bar-gap);
bottom: 0;
border-right: 1px dotted #555;
font-size: .8em;
}
bz-gantt li.header div.day.today{
background: #AD8;
z-index: 999;
opacity: .3;
}
bzGantt.js
+27 -3
View File
@@ -142,9 +142,10 @@ class BZgantt extends Buildoz {
const flow = { "nodes": [], "links": [] }
let curY = 0
let endIdx = 0
for(const task of this.tasks){
const startIdx = this.getDayIndex(firstDate, new Date(task.start))
const endIdx = this.getDayIndex(firstDate, new Date(task.end))
endIdx = this.getDayIndex(firstDate, new Date(task.end))
flow.nodes.push({
"nodeType": "bar",
"id": task.id,
@@ -163,11 +164,15 @@ class BZgantt extends Buildoz {
}
curY += this.rowHeight
}
return flow
return([flow, endIdx])
}
refresh(){
this.ul.innerHTML = ''
this.headerLi = document.createElement('li')
this.headerLi.classList.add('header')
this.ul.appendChild(this.headerLi)
for(const task of this.tasks){
const li = document.createElement('li')
li.textContent = task.name
@@ -183,7 +188,26 @@ class BZgantt extends Buildoz {
}
this.style.setProperty('--tasks-width', Math.ceil(maxWidth) + 'px')
const flow = this.buildFlow()
const [flow, endIdx] = this.buildFlow()
let dayDate = new Date(this.tasks[0].start)
for(let idx=0; idx<=endIdx; idx++){
const dayDiv = document.createElement('div')
dayDiv.classList.add('day')
dayDiv.style.left = `calc(var(--chart-left) + ${idx * this.dayWidth}px)`
dayDiv.style.width = this.dayWidth + 'px'
dayDiv.innerHTML = '&nbsp;' + dayDate.getDate()
if(dayDate.toISOString().substring(0,10) == (new Date()).toISOString().substring(0,10)) dayDiv.classList.add('today')
dayDiv.setAttribute('title', new Intl.DateTimeFormat('fr-FR', {
timeZone: 'Europe/Paris',
day: '2-digit',
month: '2-digit',
year: '2-digit'
}).format(dayDate))
dayDate.setDate(dayDate.getDate() + 1)
this.headerLi.appendChild(dayDiv)
}
this.graflow.loadFlow({
"nodesFile": this.nodesfile,
"flow": flow
graflow_examples/test8.html
+9 -9
View File
@@ -29,15 +29,15 @@
<script>
const ganttData = {
"tasks": [
{ "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05", "color": "#8F8" },
{ "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "color": "#F8F", "dependsOn": ["t8"] },
{ "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "color": "#FF8", "dependsOn": ["t9"] },
{ "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10", "color": "#F88" },
{ "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "color": "#88F", "dependsOn": ["t4", "t7"] },
{ "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "color": "#8F8", "dependsOn": ["t5"] },
{ "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "color": "#88F", "dependsOn": ["t1"] },
{ "id": "t8", "name": "Task 8 which is quite long", "start": "2026-09-08", "end":"2026-09-15", "color": "#8F8", "dependsOn": ["t6"] },
{ "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "color": "#F8F", "dependsOn": ["t8"] },
{ "id": "t1", "name": "Task 1", "start": "2026-08-25", "end":"2026-08-29", "color": "#8F8" },
{ "id": "t2", "name": "Task 2", "start": "2026-09-08", "end":"2026-09-13", "color": "#F8F", "dependsOn": ["t8"] },
{ "id": "t3", "name": "Task 3", "start": "2026-09-13", "end":"2026-09-18", "color": "#FF8", "dependsOn": ["t9"] },
{ "id": "t4", "name": "Task 4", "start": "2026-08-25", "end":"2026-09-03", "color": "#F88" },
{ "id": "t5", "name": "Task 5", "start": "2026-08-29", "end":"2026-08-31", "color": "#88F", "dependsOn": ["t4", "t7"] },
{ "id": "t6", "name": "Task 6", "start": "2026-08-31", "end":"2026-09-01", "color": "#8F8", "dependsOn": ["t5"] },
{ "id": "t7", "name": "Task 7", "start": "2026-08-29", "end":"2026-09-01", "color": "#88F", "dependsOn": ["t1"] },
{ "id": "t8", "name": "Task 8 which is quite long", "start": "2026-09-01", "end":"2026-09-08", "color": "#8F8", "dependsOn": ["t6"] },
{ "id": "t9", "name": "Task 9", "start": "2026-09-08", "end":"2026-09-11", "color": "#F8F", "dependsOn": ["t8"] },
], "color": "#8F8"
}