chore: update demo file
This commit is contained in:
Safwan Samsudeen
parent
0b1c6c9efb
commit
610da9d2e2
673
index.html
673
index.html
@ -3,57 +3,280 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Simple Gantt</title>
|
<title>Simple Gantt</title>
|
||||||
|
<link rel="stylesheet" href="dist/frappe-gantt.css" />
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
<style>
|
<style>
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
background: #ccc;
|
|
||||||
}
|
|
||||||
.container {
|
.container {
|
||||||
width: 80%;
|
width: 90%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
border: 1px dotted black;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart.active {
|
||||||
|
filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.6));
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.775em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="dist/frappe-gantt.css" />
|
|
||||||
<script src="dist/frappe-gantt.umd.js"></script>
|
<script src="dist/frappe-gantt.umd.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="heading">
|
<h1 class="text-center pt-3 pb-2 font-serif">Frappe Gantt</h1>
|
||||||
Interactive Gantt Chart entirely made in SVG!
|
<hr />
|
||||||
</h2>
|
<div class="row my-5">
|
||||||
<div id="mutability">
|
<div class="col-md-3 px-5 py-1">
|
||||||
<h3>Control edit access with ease</h3>
|
<h3 class="text-center">Set edit access</h3>
|
||||||
<p>Allow your employees to change only what they need to.</p>
|
<p>
|
||||||
<button id="mutable-general">Make uneditable</button>
|
Easy make sure your employees change <em>only</em> what
|
||||||
<button id="mutable-progress">Make progress uneditable</button>
|
they need to.
|
||||||
<button id="mutable-dates">Make dates uneditable</button>
|
</p>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
id="mutable-general"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="mutable-general"
|
||||||
|
>Editable</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
id="mutable-progress"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="mutable-general"
|
||||||
|
>Progress editable</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
id="mutable-dates"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="mutable-general"
|
||||||
|
>Dates editable</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart col-md-9" id="mutability"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row my-5">
|
||||||
|
<div class="chart col-md-9" id="sideheader"></div>
|
||||||
|
<div class="col-md-3 px-5 py-1">
|
||||||
|
<h3 class="text-center">Versatile Actions</h3>
|
||||||
|
<p>
|
||||||
|
Change the view mode, or scroll to today, or add
|
||||||
|
anything you like <sup>β</sup>.
|
||||||
|
</p>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
id="toggle-today"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="mutable-general"
|
||||||
|
>Scroll to Today</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
id="toggle-view-mode"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="mutable-general"
|
||||||
|
>Change View Mode</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="sideheader">
|
<div class="row my-5">
|
||||||
<h3>Versatile sidebar</h3>
|
<div class="col-md-3 px-5 py-1">
|
||||||
<p>Change the view mode or scroll to today with you.</p>
|
<h3 class="text-center">Mark Holidays</h3>
|
||||||
<button id="toggle-today">Hide <em>Today</em> button</button>
|
<p>
|
||||||
<button id="toggle-view-mode">Hide View Mode Selector</button>
|
Be it public holidays, company milestones, or just
|
||||||
</div>
|
weekends, you can see it all.
|
||||||
<div id="holidays">
|
</p>
|
||||||
<h3>Mark holidays</h3>
|
<div class="form-check form-switch">
|
||||||
<p>
|
<input
|
||||||
Be it public holidays, company milestones, or just weekends,
|
class="form-check-input"
|
||||||
Frappe Gantt enables you to see it all.
|
type="checkbox"
|
||||||
</p>
|
role="switch"
|
||||||
<button id="toggle-weekends">Toggle weekends</button>
|
id="toggle-weekends"
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="toggle-weekends"
|
||||||
|
>Show weekends</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart col-md-9" id="holidays"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="ignore">
|
<div class="row my-5">
|
||||||
<h3>...or <em>ignore</em> them</h3>
|
<div class="col-md-3 px-5 py-1">
|
||||||
<p>
|
<h3 class="text-center">...or <em>ignore</em> them</h3>
|
||||||
Remove specific dates from your Gantt chart - it's now
|
<p>
|
||||||
completely ignored.
|
Remove time periods from your Gantt - they're now
|
||||||
</p>
|
completely ignored.
|
||||||
<button id="ignore-weekends">Toggle weekends</button>
|
</p>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
id="ignore-weekends"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="toggle-weekends"
|
||||||
|
>Ignore weekends</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart col-md-9" id="ignore"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row my-4">
|
||||||
|
<div class="col-md-9 chart" id="styling"></div>
|
||||||
|
<div class="col-md-3 px-4">
|
||||||
|
<h3 class="text-center">Control the styles completely.</h3>
|
||||||
|
<strong>Modify Grid</strong>
|
||||||
|
<div class="input-group row">
|
||||||
|
<label
|
||||||
|
for="grid-height"
|
||||||
|
class="form-label col-sm-5 col-form-label"
|
||||||
|
><small>Grid Height:</small></label
|
||||||
|
>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<input
|
||||||
|
id="grid-height"
|
||||||
|
class="form-range align-items-end"
|
||||||
|
type="range"
|
||||||
|
min="150"
|
||||||
|
max="600"
|
||||||
|
value="300"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row">
|
||||||
|
<label
|
||||||
|
for="padding"
|
||||||
|
class="form-label col-sm-5 col-form-label"
|
||||||
|
><small>Padding:</small></label
|
||||||
|
>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<input
|
||||||
|
id="padding"
|
||||||
|
class="form-range align-items-end"
|
||||||
|
type="range"
|
||||||
|
min="3"
|
||||||
|
max="50"
|
||||||
|
value="18"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row">
|
||||||
|
<label
|
||||||
|
for="column-width"
|
||||||
|
class="form-label col-sm-5 col-form-label"
|
||||||
|
><small>Column Width:</small></label
|
||||||
|
>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<input
|
||||||
|
id="column-width"
|
||||||
|
class="form-range align-items-end"
|
||||||
|
type="range"
|
||||||
|
min="15"
|
||||||
|
max="70"
|
||||||
|
value="30"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-3">
|
||||||
|
<strong>Modify Bar</strong>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row">
|
||||||
|
<label
|
||||||
|
for="bar-height"
|
||||||
|
class="form-label col-sm-5 col-form-label"
|
||||||
|
><small>Height:</small></label
|
||||||
|
>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<input
|
||||||
|
id="bar-height"
|
||||||
|
class="form-range align-items-end"
|
||||||
|
type="range"
|
||||||
|
min="10"
|
||||||
|
max="100"
|
||||||
|
value="30"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row">
|
||||||
|
<label
|
||||||
|
for="bar-radius"
|
||||||
|
class="form-label col-sm-5 col-form-label"
|
||||||
|
><small>Radius:</small></label
|
||||||
|
>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<input
|
||||||
|
id="bar-radius"
|
||||||
|
class="form-range align-items-end"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="50"
|
||||||
|
value="3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row">
|
||||||
|
<label
|
||||||
|
for="arrow-curve"
|
||||||
|
class="form-label col-sm-5 col-form-label"
|
||||||
|
><small>Arrow curving:</small></label
|
||||||
|
>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<input
|
||||||
|
id="arrow-curve"
|
||||||
|
class="form-range align-items-end"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="50"
|
||||||
|
value="3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="advanced">
|
<!-- <div id="advanced">
|
||||||
<h2>So much configuration</h2>
|
<h2>So much configuration</h2>
|
||||||
<h4>Frappe Gantt - <em>for you</em>.</h4>
|
<h4>Frappe Gantt - <em>for you</em>.</h4>
|
||||||
<p>Change the duration at which to snap changes to the Gantt</p>
|
<p>Change the duration at which to snap changes to the Gantt</p>
|
||||||
@ -69,7 +292,7 @@
|
|||||||
<button id="snap-by">Snap By</button>
|
<button id="snap-by">Snap By</button>
|
||||||
<p>Make the label to move with you</p>
|
<p>Make the label to move with you</p>
|
||||||
<button id="auto-move-label">Toggle auto-moving label</button>
|
<button id="auto-move-label">Toggle auto-moving label</button>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
const rawToday = new Date();
|
const rawToday = new Date();
|
||||||
@ -118,10 +341,10 @@
|
|||||||
end: daysSince(0),
|
end: daysSince(0),
|
||||||
name: 'Review',
|
name: 'Review',
|
||||||
id: 'Task 3',
|
id: 'Task 3',
|
||||||
custom_class: 'readonly',
|
|
||||||
progress: random(),
|
progress: random(),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const tasksSpread = [
|
const tasksSpread = [
|
||||||
{
|
{
|
||||||
start: daysSince(-30),
|
start: daysSince(-30),
|
||||||
@ -143,7 +366,6 @@
|
|||||||
duration: '14d',
|
duration: '14d',
|
||||||
name: 'Review',
|
name: 'Review',
|
||||||
id: 'Task 3',
|
id: 'Task 3',
|
||||||
custom_class: 'readonly',
|
|
||||||
progress: random(),
|
progress: random(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -151,10 +373,122 @@
|
|||||||
duration: '4d',
|
duration: '4d',
|
||||||
name: 'Publish',
|
name: 'Publish',
|
||||||
id: 'Task 4',
|
id: 'Task 4',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const tasksDependencies = [
|
||||||
|
{
|
||||||
|
start: daysSince(-2),
|
||||||
|
end: daysSince(2),
|
||||||
|
name: 'Redesign website',
|
||||||
|
id: 'Task 0',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(3),
|
||||||
|
duration: '6d',
|
||||||
|
name: 'Write new content',
|
||||||
|
id: 'Task 1',
|
||||||
|
progress: random(),
|
||||||
|
dependencies: 'Task 0',
|
||||||
|
important: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(4),
|
||||||
|
duration: '2d',
|
||||||
|
name: 'Apply new styles',
|
||||||
|
id: 'Task 2',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(-4),
|
||||||
|
end: daysSince(0),
|
||||||
|
name: 'Review',
|
||||||
|
id: 'Task 3',
|
||||||
custom_class: 'readonly',
|
custom_class: 'readonly',
|
||||||
progress: random(),
|
progress: random(),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
let tasksMany = [
|
||||||
|
{
|
||||||
|
start: daysSince(-7),
|
||||||
|
end: daysSince(-5),
|
||||||
|
name: 'Initial brainstorming',
|
||||||
|
id: 'Task 0',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(-3),
|
||||||
|
end: daysSince(1),
|
||||||
|
name: 'Develop wireframe',
|
||||||
|
id: 'Task 1',
|
||||||
|
progress: random(),
|
||||||
|
dependencies: 'Task 0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(-1),
|
||||||
|
duration: '4d',
|
||||||
|
name: 'Client meeting',
|
||||||
|
id: 'Task 2',
|
||||||
|
progress: random(),
|
||||||
|
important: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(1),
|
||||||
|
duration: '7d',
|
||||||
|
name: 'Create prototype',
|
||||||
|
id: 'Task 3',
|
||||||
|
dependencies: 'Task 2',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(3),
|
||||||
|
duration: '5d',
|
||||||
|
name: 'Test design with users',
|
||||||
|
dependencies: 'Task 2',
|
||||||
|
id: 'Task 4',
|
||||||
|
progress: random(),
|
||||||
|
important: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(5),
|
||||||
|
end: daysSince(10),
|
||||||
|
name: 'Write technical documentation',
|
||||||
|
id: 'Task 5',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(8),
|
||||||
|
duration: '3d',
|
||||||
|
name: 'Prepare demo',
|
||||||
|
id: 'Task 6',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(10),
|
||||||
|
end: daysSince(12),
|
||||||
|
name: 'Final client review',
|
||||||
|
id: 'Task 7',
|
||||||
|
progress: random(),
|
||||||
|
important: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(14),
|
||||||
|
duration: '6d',
|
||||||
|
name: 'Implement feedback',
|
||||||
|
id: 'Task 8',
|
||||||
|
progress: random(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: daysSince(16),
|
||||||
|
duration: '4d',
|
||||||
|
name: 'Launch website',
|
||||||
|
id: 'Task 9',
|
||||||
|
progress: random(),
|
||||||
|
important: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const HOLIDAYS = [
|
const HOLIDAYS = [
|
||||||
{ name: 'Republic Day', date: '2024-01-26' },
|
{ name: 'Republic Day', date: '2024-01-26' },
|
||||||
@ -189,139 +523,222 @@
|
|||||||
'#bfdbfe': [],
|
'#bfdbfe': [],
|
||||||
'#a3e635': HOLIDAYS,
|
'#a3e635': HOLIDAYS,
|
||||||
},
|
},
|
||||||
|
infinite_padding: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const ignore = new Gantt('#ignore', tasks, {
|
const ignore = new Gantt('#ignore', tasks, {
|
||||||
ignore: ['weekend', ...HOLIDAYS.map((k) => k.date)],
|
ignore: ['weekend', ...HOLIDAYS.map((k) => k.date)],
|
||||||
holidays: null,
|
holidays: null,
|
||||||
scroll_to: daysSince(-10),
|
scroll_to: daysSince(-10),
|
||||||
|
infinite_padding: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const advanced = new Gantt('#advanced', tasksSpread, {
|
const styling = new Gantt('#styling', tasksMany, {
|
||||||
holidays: null,
|
holidays: null,
|
||||||
view_mode: 'Month',
|
infinite_padding: false,
|
||||||
view_mode_select: true,
|
scroll_to: daysSince(-10),
|
||||||
extend_by_units: 0,
|
|
||||||
snap_at: '1d',
|
|
||||||
auto_move_label: false,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const OPTIONS_UPDATE = [
|
// const advanced = new Gantt('#advanced', tasksSpread, {
|
||||||
|
// holidays: null,
|
||||||
|
// view_mode: 'Month',
|
||||||
|
// view_mode_select: true,
|
||||||
|
// snap_at: '1d',
|
||||||
|
// auto_move_label: false,
|
||||||
|
// });
|
||||||
|
|
||||||
|
const UPDATES = [
|
||||||
[
|
[
|
||||||
mutablity,
|
mutablity,
|
||||||
{
|
{
|
||||||
'mutable-general': { readonly: true },
|
'mutable-general': 'opp__readonly',
|
||||||
'mutable-dates': { readonly_dates: true },
|
'mutable-dates': 'opp__readonly_dates',
|
||||||
'mutable-progress': { readonly_progress: true },
|
'mutable-progress': 'opp__readonly_progress',
|
||||||
|
},
|
||||||
|
(id, val) => {
|
||||||
|
if (id === 'mutable-general') {
|
||||||
|
document.getElementById('mutable-dates').checked =
|
||||||
|
!val;
|
||||||
|
document.getElementById(
|
||||||
|
'mutable-progress',
|
||||||
|
).checked = !val;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
sideheader,
|
sideheader,
|
||||||
{
|
{
|
||||||
'toggle-today': { today_button: 'opp' },
|
'toggle-today': 'today_button',
|
||||||
'toggle-view-mode': { view_mode_select: 'opp' },
|
'toggle-view-mode': 'view_mode_select',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
holidays,
|
holidays,
|
||||||
{
|
{
|
||||||
'toggle-weekends': {
|
'toggle-weekends': [
|
||||||
holidays: [
|
'holidays',
|
||||||
'config',
|
{ '#a3e635': HOLIDAYS, '#bfdbfe': 'weekend' },
|
||||||
(opts) =>
|
{ '#a3e635': HOLIDAYS, '#bfdbfe': [] },
|
||||||
opts['#bfdbfe'].length !== 0
|
],
|
||||||
? { ...opts, '#bfdbfe': [] }
|
|
||||||
: { ...opts, '#bfdbfe': 'weekend' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
ignore,
|
ignore,
|
||||||
{
|
{
|
||||||
'ignore-weekends': {
|
'ignore-weekends': ['ignore', ['weekend'], []],
|
||||||
ignore: [
|
|
||||||
'config',
|
|
||||||
(opts) =>
|
|
||||||
opts.includes('weekend')
|
|
||||||
? opts.filter((k) => k !== 'weekend')
|
|
||||||
: [...opts, 'weekend'],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
advanced,
|
styling,
|
||||||
{
|
{
|
||||||
'snap-by': {
|
'bar-radius': 'bar_corner_radius',
|
||||||
BEFORE: (chart) => chart.$container.scrollLeft,
|
'bar-height': 'bar_height',
|
||||||
snap_at: [
|
'arrow-curve': 'arrow_curve',
|
||||||
'config',
|
'column-width': 'column_width',
|
||||||
(scale) => {
|
'grid-height': 'container_height',
|
||||||
return (
|
padding: 'padding',
|
||||||
document.getElementById('snap-at-qty')
|
|
||||||
.value +
|
|
||||||
document.getElementById('snap-at-scale')
|
|
||||||
.value
|
|
||||||
);
|
|
||||||
},
|
|
||||||
],
|
|
||||||
view_mode: ['config', (k) => k],
|
|
||||||
scroll_to: ['config', (_) => false],
|
|
||||||
AFTER: (before, chart) =>
|
|
||||||
(chart.$container.scrollLeft = before),
|
|
||||||
},
|
|
||||||
'auto-move-label': {
|
|
||||||
BEFORE: (chart) =>
|
|
||||||
chart.change_view_mode('Day') ||
|
|
||||||
chart.$container.scrollLeft,
|
|
||||||
view_mode: ['config', (k) => k],
|
|
||||||
auto_move_label: 'opp',
|
|
||||||
scroll_to: ['config', (_) => false],
|
|
||||||
AFTER: (before, chart) =>
|
|
||||||
(chart.$container.scrollLeft = before),
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
for (let [chart, options] of OPTIONS_UPDATE) {
|
for (let [chart, details, after] of UPDATES) {
|
||||||
for (let id in options) {
|
for (let id in details) {
|
||||||
let el = document.getElementById(id);
|
let el = document.getElementById(id);
|
||||||
el.onclick = () => {
|
el.onchange = (e) => {
|
||||||
const before =
|
let label = details[id];
|
||||||
options[id].BEFORE && options[id].BEFORE(chart);
|
let val;
|
||||||
let newOptions = {};
|
|
||||||
for (let k in options[id]) {
|
if (e.currentTarget.type === 'switch') {
|
||||||
if (k === 'AFTER' || k === 'BEFORE') continue;
|
if (typeof label === 'string') {
|
||||||
if (options[id][k] === 'opp') {
|
let opposite = label.slice(0, 5) === 'opp__';
|
||||||
newOptions[k] = !chart.options[k];
|
if (opposite) label = label.slice(5);
|
||||||
if (chart.options[k]) {
|
val = opposite
|
||||||
el.innerHTML = el.innerHTML.replace(
|
? !e.currentTarget.checked
|
||||||
'Hide',
|
: e.currentTarget.checked;
|
||||||
'Show',
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
el.innerHTML = el.innerHTML.replace(
|
|
||||||
'Show',
|
|
||||||
'Hide',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else if (options[id][k][0] === 'config') {
|
|
||||||
newOptions[k] = options[id][k][1](
|
|
||||||
chart.options[k],
|
|
||||||
chart,
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
newOptions[k] = options[id][k];
|
val = label[e.currentTarget.checked ? 1 : 2];
|
||||||
|
label = label[0];
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
val = +e.currentTarget.value;
|
||||||
}
|
}
|
||||||
chart.update_options(newOptions);
|
|
||||||
console.log(chart.options.view_mode);
|
let store = chart.options.scroll_to;
|
||||||
options[id].AFTER && options[id].AFTER(before, chart);
|
let scroll = chart.$container.scrollLeft;
|
||||||
|
chart.update_options({
|
||||||
|
[label]: val,
|
||||||
|
scroll_to: null,
|
||||||
|
});
|
||||||
|
chart.options.scroll_to = store;
|
||||||
|
chart.$container.scrollLeft = scroll;
|
||||||
|
after && after(id, val, chart);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// const OPTIONS_UPDATE = [
|
||||||
|
// // [
|
||||||
|
// // styling,
|
||||||
|
// // {
|
||||||
|
// // 'bar-spacing': {
|
||||||
|
// // bar_corner_radius: [
|
||||||
|
// // 'config',
|
||||||
|
// // () =>
|
||||||
|
// // +document.getElementById('bar-radius')
|
||||||
|
// // .value,
|
||||||
|
// // ,
|
||||||
|
// // ],
|
||||||
|
// // bar_height: [
|
||||||
|
// // 'config',
|
||||||
|
// // () =>
|
||||||
|
// // +document.getElementById('bar-height')
|
||||||
|
// // .value,
|
||||||
|
// // ],
|
||||||
|
// // arrow_curve: [
|
||||||
|
// // 'config',
|
||||||
|
// // () =>
|
||||||
|
// // +document.getElementById('arrow-curve')
|
||||||
|
// // .value,
|
||||||
|
// // ],
|
||||||
|
// // },
|
||||||
|
// // },
|
||||||
|
// // ],
|
||||||
|
// [
|
||||||
|
// advanced,
|
||||||
|
// {
|
||||||
|
// 'snap-by': {
|
||||||
|
// BEFORE: (chart) => chart.$container.scrollLeft,
|
||||||
|
// snap_at: [
|
||||||
|
// 'config',
|
||||||
|
// (scale) => {
|
||||||
|
// return (
|
||||||
|
// document.getElementById('snap-at-qty')
|
||||||
|
// .value +
|
||||||
|
// document.getElementById('snap-at-scale')
|
||||||
|
// .value
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// view_mode: ['config', (k) => k],
|
||||||
|
// scroll_to: ['config', (_) => false],
|
||||||
|
// AFTER: (before, chart) =>
|
||||||
|
// (chart.$container.scrollLeft = before),
|
||||||
|
// },
|
||||||
|
// 'auto-move-label': {
|
||||||
|
// BEFORE: (chart) =>
|
||||||
|
// chart.change_view_mode('Day') ||
|
||||||
|
// chart.$container.scrollLeft,
|
||||||
|
// view_mode: ['config', (k) => k],
|
||||||
|
// auto_move_label: 'opp',
|
||||||
|
// scroll_to: ['config', (_) => false],
|
||||||
|
// AFTER: (before, chart) =>
|
||||||
|
// (chart.$container.scrollLeft = before),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// for (let [chart, options] of OPTIONS_UPDATE) {
|
||||||
|
// for (let id in options) {
|
||||||
|
// let el = document.getElementById(id);
|
||||||
|
// el.onclick = () => {
|
||||||
|
// const before =
|
||||||
|
// options[id].BEFORE && options[id].BEFORE(chart);
|
||||||
|
// let newOptions = {};
|
||||||
|
// for (let k in options[id]) {
|
||||||
|
// if (k === 'AFTER' || k === 'BEFORE') continue;
|
||||||
|
// if (options[id][k] === 'opp') {
|
||||||
|
// newOptions[k] = !chart.options[k];
|
||||||
|
// if (chart.options[k]) {
|
||||||
|
// el.innerHTML = el.innerHTML.replace(
|
||||||
|
// 'Hide',
|
||||||
|
// 'Show',
|
||||||
|
// );
|
||||||
|
// } else {
|
||||||
|
// el.innerHTML = el.innerHTML.replace(
|
||||||
|
// 'Show',
|
||||||
|
// 'Hide',
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// } else if (options[id][k][0] === 'config') {
|
||||||
|
// newOptions[k] = options[id][k][1](
|
||||||
|
// chart.options[k],
|
||||||
|
// chart,
|
||||||
|
// );
|
||||||
|
// } else {
|
||||||
|
// newOptions[k] = options[id][k];
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// chart.update_options(newOptions);
|
||||||
|
// options[id].AFTER && options[id].AFTER(before, chart);
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -273,8 +273,8 @@ export default class Bar {
|
|||||||
y: bar.getY() + 1,
|
y: bar.getY() + 1,
|
||||||
width: handle_width,
|
width: handle_width,
|
||||||
height: this.height - 2,
|
height: this.height - 2,
|
||||||
rx: this.corner_radius,
|
rx: 3,
|
||||||
ry: this.corner_radius,
|
ry: 3,
|
||||||
class: 'handle right',
|
class: 'handle right',
|
||||||
append_to: this.handle_group,
|
append_to: this.handle_group,
|
||||||
});
|
});
|
||||||
@ -284,8 +284,8 @@ export default class Bar {
|
|||||||
y: bar.getY() + 1,
|
y: bar.getY() + 1,
|
||||||
width: handle_width,
|
width: handle_width,
|
||||||
height: this.height - 2,
|
height: this.height - 2,
|
||||||
rx: this.corner_radius,
|
rx: 3,
|
||||||
ry: this.corner_radius,
|
ry: 3,
|
||||||
class: 'handle left',
|
class: 'handle left',
|
||||||
append_to: this.handle_group,
|
append_to: this.handle_group,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -100,7 +100,7 @@ const DEFAULT_OPTIONS = {
|
|||||||
bar_corner_radius: 3,
|
bar_corner_radius: 3,
|
||||||
bar_height: 30,
|
bar_height: 30,
|
||||||
container_height: 300,
|
container_height: 300,
|
||||||
column_width: 30,
|
column_width: null,
|
||||||
date_format: 'YYYY-MM-DD',
|
date_format: 'YYYY-MM-DD',
|
||||||
snap_at: null,
|
snap_at: null,
|
||||||
infinite_padding: true,
|
infinite_padding: true,
|
||||||
|
|||||||
@ -67,7 +67,7 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .lower-text,
|
& .lower-text,
|
||||||
@ -153,7 +153,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
background: var(--dark-blue);
|
background: var(--dark-blue);
|
||||||
width: 1px;
|
width: 1px;
|
||||||
z-index: 1000;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .current-date-highlight {
|
& .current-date-highlight {
|
||||||
@ -300,8 +300,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& .bar {
|
& .bar {
|
||||||
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
|
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.9));
|
||||||
filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
|
filter: drop-shadow(3px 3px 2px rgba(17, 43, 66, 0.26));
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
24
src/index.js
24
src/index.js
@ -223,7 +223,7 @@ export default class Gantt {
|
|||||||
this.config.step = duration;
|
this.config.step = duration;
|
||||||
this.config.unit = scale;
|
this.config.unit = scale;
|
||||||
this.config.column_width =
|
this.config.column_width =
|
||||||
mode.column_width || this.options.column_width;
|
this.options.column_width || mode.column_width || 30;
|
||||||
}
|
}
|
||||||
|
|
||||||
setup_dates() {
|
setup_dates() {
|
||||||
@ -282,12 +282,6 @@ export default class Gantt {
|
|||||||
this.config.unit,
|
this.config.unit,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
console.log(
|
|
||||||
gantt_start,
|
|
||||||
gantt_end,
|
|
||||||
this.config.extend_by_units * 3,
|
|
||||||
this.config.unit,
|
|
||||||
);
|
|
||||||
|
|
||||||
let format_string =
|
let format_string =
|
||||||
this.config.view_mode.format_string || 'YYYY-MM-DD HH';
|
this.config.view_mode.format_string || 'YYYY-MM-DD HH';
|
||||||
@ -661,7 +655,8 @@ export default class Gantt {
|
|||||||
classes: 'current-highlight',
|
classes: 'current-highlight',
|
||||||
append_to: this.$extras,
|
append_to: this.$extras,
|
||||||
});
|
});
|
||||||
let $today = this.$extras.querySelector(
|
|
||||||
|
let $today = this.$container.querySelector(
|
||||||
'.date_' + date.replaceAll(' ', '_'),
|
'.date_' + date.replaceAll(' ', '_'),
|
||||||
);
|
);
|
||||||
if ($today) {
|
if ($today) {
|
||||||
@ -905,7 +900,7 @@ export default class Gantt {
|
|||||||
const scroll_pos =
|
const scroll_pos =
|
||||||
(units_since_first_task / this.config.step) *
|
(units_since_first_task / this.config.step) *
|
||||||
this.config.column_width;
|
this.config.column_width;
|
||||||
parent_element.scrollTo({ left: scroll_pos - 2, behavior: 'smooth' });
|
parent_element.scrollTo({ left: scroll_pos - 4, behavior: 'smooth' });
|
||||||
|
|
||||||
this.$side_header.style.left =
|
this.$side_header.style.left =
|
||||||
this.$container.clientWidth +
|
this.$container.clientWidth +
|
||||||
@ -947,15 +942,8 @@ export default class Gantt {
|
|||||||
|
|
||||||
scroll_today() {
|
scroll_today() {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
this.set_scroll_position(
|
today.setHours(0, 0, 0, 0);
|
||||||
new Date(
|
this.set_scroll_position(today);
|
||||||
today.getFullYear() +
|
|
||||||
'-' +
|
|
||||||
(today.getMonth() + 1) +
|
|
||||||
'-' +
|
|
||||||
today.getDate(),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
bind_grid_click() {
|
bind_grid_click() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user