Skip to content

Commit 22034c9

Browse files
Xeyos88Xeyos88
committed
Merge branch 'release/4.2.0'
2 parents 3303c79 + 9d843be commit 22034c9

File tree

20 files changed

+760
-60
lines changed

20 files changed

+760
-60
lines changed

‎docs/.vitepress/theme/components/AdvancedGanttDemo.vue‎

Lines changed: 126 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,13 @@ const labelColumnWidth = ref(100)
4949
const commands = ref(true)
5050
const width = ref('100%')
5151
const showLabel = ref(true)
52+
const showGroupLabel = ref(true)
5253
const barLabelEditable = ref(true)
5354
const showProgress = ref(true)
5455
const showEventsAxis = ref(true)
5556
const eventsAxisHeight = ref(30)
5657
const tick = ref(10)
58+
const showPlannedBars = ref(true)
5759
5860
5961
// Time Highlight Configuration
@@ -250,13 +252,16 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
250252
{
251253
id: 'group1',
252254
label: 'Frontend Development',
255+
style: { background: '#42b883' },
253256
children: [
254257
{
255258
id: 'task1',
256259
label: 'Setup Project',
257260
bars: [{
258261
start: `${year}-${month}-02`,
259262
end: `${year}-${month}-10`,
263+
start_planned: `${year}-${month}-01`,
264+
end_planned: `${year}-${month}-12`,
260265
ganttBarConfig: {
261266
id: 'bar1',
262267
label: 'Initial Setup',
@@ -283,11 +288,17 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
283288
bars: [{
284289
start: `${year}-${month}-11`,
285290
end: `${year}-${month}-20`,
291+
start_planned: `${year}-${month}-08`,
292+
end_planned: `${year}-${month}-18`,
286293
ganttBarConfig: {
287294
id: 'bar2',
288295
label: 'Development',
289296
style: { background: '#35495e' },
290297
progress: 75,
298+
plannedStyle: {
299+
background: '#ff6b35',
300+
opacity: 0.6
301+
},
291302
connections: [{
292303
targetId: 'bar3',
293304
pattern: 'dash'
@@ -300,19 +311,27 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
300311
{
301312
id: 'group2',
302313
label: 'Backend Development',
314+
style: { background: '#ff7e67' },
303315
children: [
304316
{
305317
id: 'task3',
306318
label: 'API Design',
307319
bars: [{
308320
start: `${year}-${month}-21`,
309321
end: `${year}-${month}-28`,
322+
start_planned: `${year}-${month}-19`,
323+
end_planned: `${year}-${month+1}-02`,
310324
ganttBarConfig: {
311325
id: 'bar3',
312326
label: 'API Planning',
313327
style: { background: '#ff7e67' },
314328
hasHandles: true,
315329
progress: 60,
330+
plannedStyle: {
331+
background: '#3498db',
332+
opacity: 0.8,
333+
borderRadius: '2px'
334+
},
316335
connections: [{
317336
targetId: 'bar4',
318337
}]
@@ -326,12 +345,18 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
326345
{
327346
start: `${year}-${month+1}-01`,
328347
end: `${year}-${month+1}-10`,
348+
start_planned: `${year}-${month+1}-03`,
349+
end_planned: `${year}-${month+1}-15`,
329350
ganttBarConfig: {
330351
id: 'bar4',
331352
label: 'DB Implementation',
332353
style: { background: '#4dc9ff' },
333354
hasHandles: true,
334355
progress: 30,
356+
plannedStyle: {
357+
background: '#e74c3c',
358+
opacity: 0.7
359+
},
335360
connections: [{
336361
targetId: 'bar7',
337362
type: 'squared'
@@ -355,6 +380,7 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
355380
{
356381
id: 'group3',
357382
label: 'Progress Examples',
383+
style: { background: '#e67e22' },
358384
children: [
359385
{
360386
id: 'progress1',
@@ -363,12 +389,19 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
363389
{
364390
start: `${year}-${month+1}-21`,
365391
end: `${year}-${month+1}-25`,
392+
start_planned: `${year}-${month+1}-18`,
393+
end_planned: `${year}-${month+1}-23`,
366394
ganttBarConfig: {
367395
id: 'bar7',
368396
label: 'In Progress',
369397
style: { background: '#e67e22' },
370398
progress: 50,
371399
progressResizable: true,
400+
plannedStyle: {
401+
background: '#f39c12',
402+
opacity: 0.5,
403+
borderRadius: '8px'
404+
},
372405
connections: [{
373406
targetId: 'bar9',
374407
type: 'bezier'
@@ -393,6 +426,7 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
393426
{
394427
id: 'group4',
395428
label: 'Bundle Example',
429+
style: { background: '#8e44ad' },
396430
children: [
397431
{
398432
id: 'bundle1',
@@ -442,6 +476,7 @@ const sampleData = ref<ChartRowWithOptionalBars[]>([
442476
{
443477
id: 'group5',
444478
label: 'Final Milestone',
479+
style: { background: '#2ecc71' },
445480
children: [
446481
{
447482
id: 'milestone',
@@ -842,6 +877,12 @@ const formattedEventLog = computed(() => {
842877
<input type="checkbox" v-model="showLabel">
843878
</label>
844879
</div>
880+
<div class="setting-item">
881+
<label>
882+
Show Group Label:
883+
<input type="checkbox" v-model="showGroupLabel">
884+
</label>
885+
</div>
845886
<div class="setting-item">
846887
<label>
847888
Edit Bar Label:
@@ -854,6 +895,12 @@ const formattedEventLog = computed(() => {
854895
<input type="checkbox" v-model="showProgress">
855896
</label>
856897
</div>
898+
<div class="setting-item">
899+
<label>
900+
Show Planned Bars:
901+
<input type="checkbox" v-model="showPlannedBars">
902+
</label>
903+
</div>
857904
<div class="setting-item">
858905
<label>
859906
Show Event Axis:
@@ -1140,6 +1187,7 @@ const formattedEventLog = computed(() => {
11401187
:default-progress-resizable="defaultProgressResizable"
11411188
:show-progress="showProgress"
11421189
:showLabel="showLabel"
1190+
:show-group-label="showGroupLabel"
11431191
:barLabelEditable="barLabelEditable"
11441192
:milestones="milestones"
11451193
:enableConnectionCreation="enableConnectionCreation"
@@ -1155,6 +1203,7 @@ const formattedEventLog = computed(() => {
11551203
:importer-default-format="'csv'"
11561204
:importer-allowed-formats="['jira', 'csv']"
11571205
:tick="tick"
1206+
:show-planned-bars="showPlannedBars"
11581207
@click-bar="handleEvent($event, 'Bar Click')"
11591208
@drag-bar="handleEvent($event, 'Bar Drag')"
11601209
@sort="handleEvent($event, 'Sort Change')"
@@ -1268,7 +1317,9 @@ const formattedEventLog = computed(() => {
12681317
handleToStart, handleBack, handleForward, handleToEnd,
12691318
expandAllGroups, collapseAllGroups,
12701319
undo, redo, canUndo, canRedo,
1271-
isAtTop, isAtBottom, zoomLevel
1320+
isAtTop, isAtBottom, zoomLevel,
1321+
scrollPosition, areAllGroupsExpanded, areAllGroupsCollapsed,
1322+
export: exportFunction
12721323
}">
12731324
<div class="custom-commands" :style="customCommandStyle">
12741325
<div class="command-group">
@@ -1282,10 +1333,26 @@ const formattedEventLog = computed(() => {
12821333

12831334
<div class="command-group">
12841335
<span class="command-label">Navigation</span>
1285-
<button class="command-button" @click="handleToStart">⟪</button>
1286-
<button class="command-button" @click="handleBack">⟨</button>
1287-
<button class="command-button" @click="handleForward">⟩</button>
1288-
<button class="command-button" @click="handleToEnd">⟫</button>
1336+
<button class="command-button" @click="handleToStart"
1337+
:disabled="scrollPosition <= 0"
1338+
title="Go to start">
1339+
⟪
1340+
</button>
1341+
<button class="command-button" @click="handleBack"
1342+
:disabled="scrollPosition <= 0"
1343+
title="Go back">
1344+
⟨
1345+
</button>
1346+
<button class="command-button" @click="handleForward"
1347+
:disabled="scrollPosition >= 100"
1348+
title="Go forward">
1349+
⟩
1350+
</button>
1351+
<button class="command-button" @click="handleToEnd"
1352+
:disabled="scrollPosition >= 100"
1353+
title="Go forward">
1354+
⟫
1355+
</button>
12891356
</div>
12901357

12911358
<div class="command-group">
@@ -1296,8 +1363,16 @@ const formattedEventLog = computed(() => {
12961363

12971364
<div class="command-group">
12981365
<span class="command-label">Groups</span>
1299-
<button class="command-button" @click="expandAllGroups">Expand</button>
1300-
<button class="command-button" @click="collapseAllGroups">Collapse</button>
1366+
<button class="command-button" @click="expandAllGroups"
1367+
:disabled="areAllGroupsExpanded.value"
1368+
title="Expand all groups">
1369+
Expand
1370+
</button>
1371+
<button class="command-button" @click="collapseAllGroups"
1372+
:disabled="areAllGroupsCollapsed.value"
1373+
title="Collapse all groups">
1374+
Collapse
1375+
</button>
13011376
</div>
13021377

13031378
<div class="command-group">
@@ -1306,6 +1381,28 @@ const formattedEventLog = computed(() => {
13061381
<button class="command-button" @click="redo" :disabled="!canRedo">Redo</button>
13071382
</div>
13081383

1384+
<div class="command-group" v-if="exportEnabled">
1385+
<span class="command-label">Export</span>
1386+
<select
1387+
v-model="exportFormat"
1388+
class="export-select"
1389+
:disabled="!exportEnabled"
1390+
>
1391+
<option value="" disabled>Format</option>
1392+
<option value="pdf">PDF</option>
1393+
<option value="png">PNG</option>
1394+
<option value="svg">SVG</option>
1395+
<option value="excel">Excel</option>
1396+
</select>
1397+
<button
1398+
class="command-button export-button"
1399+
@click="() => exportFunction(exportFormat)"
1400+
:disabled="!exportFormat || !exportEnabled"
1401+
title="Export Gantt Chart"
1402+
>
1403+
Export
1404+
</button>
1405+
</div>
13091406
</div>
13101407
</template>
13111408

@@ -1626,6 +1723,28 @@ const formattedEventLog = computed(() => {
16261723
font-weight: 600;
16271724
}
16281725
1726+
.export-select {
1727+
padding: 2px 4px;
1728+
border: 1px solid #ddd;
1729+
border-radius: 4px;
1730+
background: #222;
1731+
color: white;
1732+
font-size: 10px;
1733+
min-width: 60px;
1734+
}
1735+
1736+
.export-select:disabled {
1737+
opacity: 0.5;
1738+
cursor: not-allowed;
1739+
}
1740+
1741+
.export-button {
1742+
background: #42b883 !important;
1743+
color: white !important;
1744+
font-weight: 500;
1745+
}
1746+
1747+
16291748
.custom-bar-label {
16301749
display: flex;
16311750
align-items: center;

‎docs/.vitepress/theme/components/GroupingGanttDemo.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@ const rows = ref([
2626
{
2727
id: 'frontend',
2828
label: 'Frontend Development',
29+
style: { background: '#3498DB' },
2930
children: [
3031
{
3132
id: 'fe-core',
3233
label: 'Core Features',
34+
style: { background: '#2980B9' },
3335
children: [
3436
{
3537
id: 'fe-setup',
@@ -78,6 +80,7 @@ const rows = ref([
7880
{
7981
id: 'fe-ui',
8082
label: 'UI Components',
83+
style: { background: '#8E44AD' },
8184
children: [
8285
{
8386
id: 'fe-comp-base',
@@ -158,6 +161,7 @@ const rows = ref([
158161
{
159162
id: 'backend',
160163
label: 'Backend Development',
164+
style: { background: '#27AE60' },
161165
children: [
162166
{
163167
id: 'be-core',
@@ -243,6 +247,7 @@ const rows = ref([
243247
{
244248
id: 'mobile',
245249
label: 'Mobile Development',
250+
style: { background: '#E74C3C' },
246251
children: [
247252
{
248253
id: 'mob-ios',
@@ -532,6 +537,8 @@ onMounted(() => {
532537
:color-scheme="customColorScheme"
533538
label-column-title="Project Structure"
534539
:multi-column-label="multiColumnLabel"
540+
:show-label="true"
541+
:show-group-label="true"
535542

536543
>
537544
<g-gantt-row

‎docs/api/props.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ interface VisualProps {
5050
markConnection?: MarkConnection; // Type of marker in connections
5151
showLabel?: boolean; // Show bar labels
5252
showProgress?: boolean; // Show progress indicators
53+
showPlannedBars?: boolean; // Show planned bars alongside actual bars
5354
showEventsAxis?: boolean; // Show events axis
5455
eventsAxisHeight?: number; // Height of events axis
5556
timeaxisEvents?: TimeaxisEvent[]; // Events to display on time axis

0 commit comments

Comments
 (0)