From 2bc3a0f97c1fcc49929c4814c22f28756846836e Mon Sep 17 00:00:00 2001 From: megantriplett Date: Fri, 21 Mar 2025 15:28:34 -0400 Subject: [PATCH 1/8] vert is now a copy of milestone tag --- .../src/diagrams/gantt/ganttRenderer.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index a10eb100f..7ef58f9c2 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -284,6 +284,14 @@ export const draw = function (text, id, version, diagObj) { 0.5 * theBarHeight ); } + if (d.vert) { + return ( + timeScale(d.startTime) + + theSidePad + + 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - + 0.5 * theBarHeight + ); + } return timeScale(d.startTime) + theSidePad; }) .attr('y', function (d, i) { @@ -295,6 +303,9 @@ export const draw = function (text, id, version, diagObj) { if (d.milestone) { return theBarHeight; } + if (d.vert) { + return theBarHeight; + } return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime); }) .attr('height', theBarHeight) @@ -354,6 +365,9 @@ export const draw = function (text, id, version, diagObj) { if (d.milestone) { taskClass = ' milestone ' + taskClass; } + if (d.vert) { + taskClass = ' vert ' + taskClass; + } taskClass += secNum; @@ -381,6 +395,13 @@ export const draw = function (text, id, version, diagObj) { if (d.milestone) { endX = startX + theBarHeight; } + + if (d.vert) { + startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight; + } + if (d.vert) { + endX = startX + theBarHeight; + } const textWidth = this.getBBox().width; // Check id text width > width of rectangle @@ -406,6 +427,9 @@ export const draw = function (text, id, version, diagObj) { if (d.milestone) { endX = startX + theBarHeight; } + if (d.vert) { + endX = startX + theBarHeight; + } const textWidth = this.getBBox().width; let classStr = ''; @@ -445,6 +469,10 @@ export const draw = function (text, id, version, diagObj) { taskType += ' milestoneText'; } + if (d.vert) { + taskType += ' vertText'; + } + // Check id text width > width of rectangle if (textWidth > endX - startX) { if (endX + textWidth + 1.5 * conf.leftPadding > w) { From a401a4ab4924786cafee752cd47c22e9231dbe38 Mon Sep 17 00:00:00 2001 From: megantriplett Date: Fri, 21 Mar 2025 15:39:38 -0400 Subject: [PATCH 2/8] Made vert render a vertical line --- .../mermaid/src/diagrams/gantt/ganttRenderer.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 7ef58f9c2..cb5590fd1 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -297,6 +297,9 @@ export const draw = function (text, id, version, diagObj) { .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead i = d.order; + if (d.vert) { + return 0; + } return i * theGap + theTopPad; }) .attr('width', function (d) { @@ -304,11 +307,17 @@ export const draw = function (text, id, version, diagObj) { return theBarHeight; } if (d.vert) { - return theBarHeight; + return 0.005 * theBarHeight; } return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime); }) - .attr('height', theBarHeight) + // .attr('height', theBarHeight) + .attr('height', function (d) { + if (d.vert) { + return 1000.5 * theBarHeight; + } + return theBarHeight; + }) .attr('transform-origin', function (d, i) { // Ignore the incoming i value and use our order instead i = d.order; From e8986eb54672e04d60778670dfbd01fb325e93bc Mon Sep 17 00:00:00 2001 From: megantriplett Date: Wed, 26 Mar 2025 18:37:09 -0400 Subject: [PATCH 3/8] Removed previous x movement for vert and moved text down (not exactly at bottom yet) --- .../src/diagrams/gantt/ganttRenderer.js | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index cb5590fd1..8fe77d36d 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -284,14 +284,14 @@ export const draw = function (text, id, version, diagObj) { 0.5 * theBarHeight ); } - if (d.vert) { - return ( - timeScale(d.startTime) + - theSidePad + - 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - - 0.5 * theBarHeight - ); - } + // if (d.vert) { + // return ( + // timeScale(d.startTime) + + // theSidePad + + // 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - + // 0.5 * theBarHeight + // ); + // } return timeScale(d.startTime) + theSidePad; }) .attr('y', function (d, i) { @@ -405,12 +405,6 @@ export const draw = function (text, id, version, diagObj) { endX = startX + theBarHeight; } - if (d.vert) { - startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight; - } - if (d.vert) { - endX = startX + theBarHeight; - } const textWidth = this.getBBox().width; // Check id text width > width of rectangle @@ -427,6 +421,9 @@ export const draw = function (text, id, version, diagObj) { .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead i = d.order; + if (d.vert) { + return conf.barHeight * 8 + (conf.fontSize / 2 - 2) + theTopPad; + } return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad; }) .attr('text-height', theBarHeight) From c1db4f2ed088af4d680137bde550cbae9662ac91 Mon Sep 17 00:00:00 2001 From: megantriplett Date: Fri, 28 Mar 2025 16:08:44 -0400 Subject: [PATCH 4/8] Moved text to bottom of graph, even when rows are added/deleted --- .../mermaid/src/diagrams/gantt/ganttRenderer.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 8fe77d36d..bb30fed99 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -234,7 +234,7 @@ export const draw = function (text, id, version, diagObj) { // Get unique task orders. Required to draw the background rects when display mode is compact. const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))]; const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id)); - + const numOccurrences = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]); // Draw background rects covering the entire width of the graph, these form the section rows. svg .append('g') @@ -243,6 +243,8 @@ export const draw = function (text, id, version, diagObj) { .enter() .append('rect') .attr('x', 0) + .data(numOccurrences) + .enter() .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead i = d.order; @@ -420,10 +422,16 @@ export const draw = function (text, id, version, diagObj) { }) .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead - i = d.order; if (d.vert) { - return conf.barHeight * 8 + (conf.fontSize / 2 - 2) + theTopPad; + // console.log(d); + // console.log(numOccurrences); + // console.log((numOccurrences.at(0)).at(1)); + return ( + conf.barHeight * numOccurrences.at(0).at(1) * 1.3 + (conf.fontSize / 2 - 2) + theTopPad + ); + // return conf.gridLineStartPadding; } + i = d.order; return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad; }) .attr('text-height', theBarHeight) From ec2c76a703765cabe3652b9a86f334a093bc76c3 Mon Sep 17 00:00:00 2001 From: megantriplett Date: Fri, 4 Apr 2025 15:02:54 -0400 Subject: [PATCH 5/8] deleted some old commented out code --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index bb30fed99..381e78a70 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -423,13 +423,9 @@ export const draw = function (text, id, version, diagObj) { .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead if (d.vert) { - // console.log(d); - // console.log(numOccurrences); - // console.log((numOccurrences.at(0)).at(1)); return ( conf.barHeight * numOccurrences.at(0).at(1) * 1.3 + (conf.fontSize / 2 - 2) + theTopPad ); - // return conf.gridLineStartPadding; } i = d.order; return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad; From 7e1cec95ef4d6cc720c7dc5bb4206a2f1d7593da Mon Sep 17 00:00:00 2001 From: megantriplett Date: Fri, 4 Apr 2025 15:17:02 -0400 Subject: [PATCH 6/8] fixed bug where background is removed @monicanguyen25 @udvale --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 381e78a70..e275f6f93 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -243,8 +243,6 @@ export const draw = function (text, id, version, diagObj) { .enter() .append('rect') .attr('x', 0) - .data(numOccurrences) - .enter() .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead i = d.order; @@ -261,7 +259,9 @@ export const draw = function (text, id, version, diagObj) { } } return 'section section0'; - }); + }) + .data(numOccurrences) + .enter(); // Draw the rects representing the tasks const rectangles = svg.append('g').selectAll('rect').data(theArray).enter(); From 8eb2000b988ba985ef2033ba11c1535a1a1d29e6 Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Fri, 4 Apr 2025 15:44:09 -0400 Subject: [PATCH 7/8] Adjusted label calculation for x and y values --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index e275f6f93..33b2a8020 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -406,6 +406,9 @@ export const draw = function (text, id, version, diagObj) { if (d.milestone) { endX = startX + theBarHeight; } + if (d.vert) { + return startX + theSidePad + (endX - startX) / 2 - this.getBBox().width / 2; + } const textWidth = this.getBBox().width; @@ -423,9 +426,7 @@ export const draw = function (text, id, version, diagObj) { .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead if (d.vert) { - return ( - conf.barHeight * numOccurrences.at(0).at(1) * 1.3 + (conf.fontSize / 2 - 2) + theTopPad - ); + return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 50; } i = d.order; return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad; From a43965ac2c747c769820e6b4f3bf247fc36dd843 Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Fri, 4 Apr 2025 15:57:55 -0400 Subject: [PATCH 8/8] Put label right down the vert line --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 8 ++++++-- packages/mermaid/src/diagrams/gantt/styles.js | 4 ++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 33b2a8020..cdfe20916 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -316,7 +316,11 @@ export const draw = function (text, id, version, diagObj) { // .attr('height', theBarHeight) .attr('height', function (d) { if (d.vert) { - return 1000.5 * theBarHeight; + return ( + conf.gridLineStartPadding + + taskArray.length * (conf.barHeight + conf.barGap) + + conf.barHeight * 2 + ); } return theBarHeight; }) @@ -426,7 +430,7 @@ export const draw = function (text, id, version, diagObj) { .attr('y', function (d, i) { // Ignore the incoming i value and use our order instead if (d.vert) { - return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 50; + return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 60; } i = d.order; return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad; diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js index 5b53a1b07..c8a9c1660 100644 --- a/packages/mermaid/src/diagrams/gantt/styles.js +++ b/packages/mermaid/src/diagrams/gantt/styles.js @@ -237,6 +237,10 @@ const getStyles = (options) => fill: ${options.taskTextDarkColor} !important; } + .vertText { + font-size: 15px; + } + .activeCritText0, .activeCritText1, .activeCritText2,