jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

chore: update demo, defaults

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-12-12 17:27:27 +05:30
parent dae014d009
commit c15cc3197d
2 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
index.html
View File

@ -213,7 +213,7 @@
id="column-width" id="column-width"
class="form-range align-items-end" class="form-range align-items-end"
type="range" type="range"
min="15" min="30"
max="70" max="70"
value="30" value="30"
/> />
@ -276,23 +276,44 @@
</div> </div>
</div> </div>
<!-- <div id="advanced"> <div class="row my-4">
<h2>So much configuration</h2> <div class="col-md-3">
<h4>Frappe Gantt - <em>for you</em>.</h4> <h2>Frappe Gantt - <em>for you</em>.</h2>
<p>Change the duration at which to snap changes to the Gantt</p> <p>
<input id="snap-at-qty" type="number" value="1" /> Insane levels of customizability - change anything,
<select id="snap-at-scale"> everything.
<option value="s">Second</option> </p>
<option value="min">Minute</option> <div class="input-group">
<option value="h">Hour</option> <label class="input-group-text">Snap By: </label>
<option value="d" selected>Day</option> <input
<option value="m">Month</option> class="form-control"
<option value="y">Year</option> id="snap-at-qty"
</select> type="number"
<button id="snap-by">Snap By</button> value="1"
<p>Make the label to move with you</p> />
<button id="auto-move-label">Toggle auto-moving label</button> <select class="form-select" id="snap-at-scale">
</div> --> <option value="s">Second</option>
<option value="min">Minute</option>
<option value="h">Hour</option>
<option value="d" selected>Day</option>
<option value="m">Month</option>
<option value="y">Year</option>
</select>
</div>
<div class="form-check form-switch my-2">
<label class="form-check-label" for="auto-move-label"
>Toggle auto-moving label</label
>
<input
class="form-check-input"
type="checkbox"
role="switch"
id="auto-move-label"
/>
</div>
</div>
<div class="col-md-9 chart" id="advanced"></div>
</div>
</div> </div>
<script type="module"> <script type="module">
const rawToday = new Date(); const rawToday = new Date();
@ -509,9 +530,7 @@
{ name: 'Christmas', date: '2024-12-25' }, { name: 'Christmas', date: '2024-12-25' },
]; ];
const mutablity = new Gantt('#mutability', tasks, { const mutablity = new Gantt('#mutability', tasks);
scroll_to: daysSince(-7),
});
const sideheader = new Gantt('#sideheader', tasksSpread, { const sideheader = new Gantt('#sideheader', tasksSpread, {
today_button: true, today_button: true,
view_mode_select: true, view_mode_select: true,
@ -523,29 +542,26 @@
'#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 styling = new Gantt('#styling', tasksMany, { const styling = new Gantt('#styling', tasksMany, {
holidays: null, holidays: null,
infinite_padding: false,
scroll_to: daysSince(-10), scroll_to: daysSince(-10),
}); });
// const advanced = new Gantt('#advanced', tasksSpread, { const advanced = new Gantt('#advanced', tasksSpread, {
// holidays: null, holidays: null,
// view_mode: 'Month', view_mode_select: true,
// view_mode_select: true, snap_at: '1d',
// snap_at: '1d', auto_move_label: false,
// auto_move_label: false, scroll_to: 'today',
// }); });
const UPDATES = [ const UPDATES = [
[ [
@ -599,6 +615,22 @@
padding: 'padding', padding: 'padding',
}, },
], ],
[
advanced,
{
'auto-move-label': 'auto_move_label',
'snap-at-qty': (val) => ({
snap_at:
val +
document.getElementById('snap-at-scale').value,
}),
'snap-at-scale': (val) => ({
snap_at:
document.getElementById('snap-at-qty').value +
val,
}),
},
],
]; ];
for (let [chart, details, after] of UPDATES) { for (let [chart, details, after] of UPDATES) {
@ -625,10 +657,22 @@
let store = chart.options.scroll_to; let store = chart.options.scroll_to;
let scroll = chart.$container.scrollLeft; let scroll = chart.$container.scrollLeft;
chart.update_options({ if (typeof label === 'function') {
[label]: val, console.log('k', {
scroll_to: null, ...label(val),
}); scroll_to: null,
});
chart.update_options({
...label(val),
scroll_to: null,
});
} else {
chart.update_options({
[label]: val,
scroll_to: null,
});
}
chart.options.scroll_to = store; chart.options.scroll_to = store;
chart.$container.scrollLeft = scroll; chart.$container.scrollLeft = scroll;
after && after(id, val, chart); after && after(id, val, chart);

4
src/defaults.js
View File

@ -103,7 +103,7 @@ const DEFAULT_OPTIONS = {
column_width: null, column_width: null,
date_format: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
snap_at: null, snap_at: null,
infinite_padding: true, infinite_padding: false,
header_height: 65, header_height: 65,
holidays: { '#fff7ed': 'weekend' }, holidays: { '#fff7ed': 'weekend' },
ignore: [], ignore: [],
@ -116,7 +116,7 @@ const DEFAULT_OPTIONS = {
readonly_progress: false, readonly_progress: false,
readonly_dates: false, readonly_dates: false,
readonly: false, readonly: false,
scroll_to: 'start', scroll_to: 'today',
show_expected_progress: false, show_expected_progress: false,
today_button: true, today_button: true,
view_mode: 'Day', view_mode: 'Day',