Started bs-gantt
This commit is contained in:
STEINNI
@@ -0,0 +1,62 @@
|
||||
{
|
||||
"nodesFile": "./nodesLib/nodesGantt.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "bar",
|
||||
"id": "t1",
|
||||
"coords": { "x": 20, "y": 0},
|
||||
"markup": { "task": "Task 1", "color": "#0F0", "width": 160 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t2",
|
||||
"coords": { "x": 510, "y": 180},
|
||||
"markup": { "task": "Task 2", "color": "#CCF", "width": 60 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t3",
|
||||
"coords": { "x": 570, "y": 240},
|
||||
"markup": { "task": "Task 3", "color": "#FFC", "width": 100 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t4",
|
||||
"coords": { "x": 20, "y": 60},
|
||||
"markup": { "task": "Task 4", "color": "#FCF", "width": 260 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t5",
|
||||
"coords": { "x": 280, "y": 90},
|
||||
"markup": { "task": "Task 5", "color": "#CFF", "width": 30 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t6",
|
||||
"coords": { "x": 310, "y": 120},
|
||||
"markup": { "task": "Task 6", "color": "#FFC", "width": 40 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t7",
|
||||
"coords": { "x": 180, "y": 30},
|
||||
"markup": { "task": "Task 7", "color": "#FCF", "width": 80 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t8",
|
||||
"coords": { "x": 350, "y": 150},
|
||||
"markup": { "task": "Task 8", "color": "#CFF", "width": 160 }
|
||||
},
|
||||
{ "nodeType": "bar",
|
||||
"id": "t9",
|
||||
"coords": { "x": 510, "y": 210},
|
||||
"markup": { "task": "Task 9", "color": "#FFC", "width": 60 }
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{ "from": ["t1", "out1"], "to": ["t7", "inp1"] },
|
||||
{ "from": ["t7", "out1"], "to": ["t5", "inp1"] },
|
||||
{ "from": ["t8", "out1"], "to": ["t2", "inp1"] },
|
||||
{ "from": ["t9", "out1"], "to": ["t3", "inp1"] },
|
||||
{ "from": ["t4", "out1"], "to": ["t5", "inp1"] },
|
||||
{ "from": ["t5", "out1"], "to": ["t6", "inp1"] },
|
||||
{ "from": ["t6", "out1"], "to": ["t8", "inp1"] },
|
||||
{ "from": ["t8", "out1"], "to": ["t9", "inp1"] }
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bzgf-node .body{
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
height: 1.2em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: .9em;
|
||||
padding: 0 2px 0 2px;
|
||||
}
|
||||
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; }
|
||||
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; }
|
||||
|
||||
.bzgf-wire{ stroke: #AAA; stroke-width: 1; }
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="bar">
|
||||
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body" style="background-color:{color};width:{width}px;" title="{task}">{task}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -126,6 +126,18 @@
|
||||
<td>X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test6" href="./test7.html">test7</a></td>
|
||||
<td>Gantt chart 1</td>
|
||||
<td>YES</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Bezier</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>graflow</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="../buildoz.css">
|
||||
<script src="../buildoz.js"></script>
|
||||
<script src="../bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
body{
|
||||
background:#888;
|
||||
font-size: 16px;
|
||||
}
|
||||
.gantt-wrap{
|
||||
position: relative;
|
||||
--row: 30px;
|
||||
}
|
||||
ul.tasks{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
ul.tasks li{
|
||||
box-sizing: border-box;
|
||||
text-wrap: nowrap;
|
||||
height: var(--row);
|
||||
line-height: calc(var(--row) - 1px);
|
||||
border-bottom: 1px dotted #555;
|
||||
}
|
||||
bz-graflow.gantt{
|
||||
position: absolute;
|
||||
left: 10em;
|
||||
top: 6px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load',()=>{
|
||||
let grflw1 = document.querySelector('bz-graflow.gantt')
|
||||
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="gantt-wrap">
|
||||
<ul class="tasks">
|
||||
<li>Task 1</li>
|
||||
<li>Task 7</li>
|
||||
<li>Task 4</li>
|
||||
<li>Task 5</li>
|
||||
<li>Task 6</li>
|
||||
<li>Task 8</li>
|
||||
<li>Task 2</li>
|
||||
<li>Task 9</li>
|
||||
<li>Task 3</li>
|
||||
</ul>
|
||||
<bz-graflow class="gantt" flow="./flows/gantt.json" tension="60" isolated></bz-graflow>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>graflow</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="../buildoz.css">
|
||||
<script src="../buildoz.js"></script>
|
||||
<script src="../bzGraflow.js"></script>
|
||||
<script src="../bzGantt.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
body{
|
||||
background:#888;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const ganttData = {
|
||||
"tasks": [
|
||||
{ "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05" },
|
||||
{ "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "dependsOn": ["t8"] },
|
||||
{ "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "dependsOn": ["t9"] },
|
||||
{ "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10" },
|
||||
{ "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "dependsOn": ["t4", "t7"] },
|
||||
{ "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "dependsOn": ["t5"] },
|
||||
{ "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "dependsOn": ["t1"] },
|
||||
{ "id": "t8", "name": "Task 8", "start": "2026-09-08", "end":"2026-09-15", "dependsOn": ["t6"] },
|
||||
{ "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "dependsOn": ["t8"] },
|
||||
]
|
||||
}
|
||||
|
||||
window.addEventListener('load',()=>{
|
||||
let gantt = document.querySelector('bz-gantt.gantt')
|
||||
gantt.loadData(ganttData)
|
||||
gantt.refresh()
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<bz-gantt class="gantt" nodesfile="./nodesLib/nodesGantt.html" tension="60" isolated></bz-gantt>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user