From bfa0eefa32a46628d97a4f5bc3f86e9d07764a53 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Fri, 27 Jun 2025 15:01:45 +0530 Subject: [PATCH 1/3] fix gantt chart date format issue --- cypress/integration/rendering/gantt.spec.js | 12 ++++++++++++ .../mermaid/src/diagrams/gantt/ganttRenderer.js | 15 +++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 2cc67918c..fed4151ec 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -565,6 +565,18 @@ describe('Gantt diagram', () => { ); }); + it('should render only the day when using dateFormat D', () => { + imgSnapshotTest( + ` + gantt + title Test + dateFormat D + A :a, 1, 1d + `, + {} + ); + }); + // TODO: fix it // // This test is skipped deliberately diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index f5c8c2e38..66ada61c8 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -615,9 +615,20 @@ export const draw = function (text, id, version, diagObj) { * @param h */ function makeGrid(theSidePad, theTopPad, w, h) { + const dateFormat = diagObj.db.getDateFormat(); + const userAxisFormat = diagObj.db.getAxisFormat(); + let axisFormat; + if (userAxisFormat) { + axisFormat = userAxisFormat; + } else if (dateFormat === 'D') { + axisFormat = '%d'; + } else { + axisFormat = conf.axisFormat ?? '%Y-%m-%d'; + } + let bottomXAxis = axisBottom(timeScale) .tickSize(-h + theTopPad + conf.gridLineStartPadding) - .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + .tickFormat(timeFormat(axisFormat)); const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/; const resultTickInterval = reTickInterval.exec( @@ -669,7 +680,7 @@ export const draw = function (text, id, version, diagObj) { if (diagObj.db.topAxisEnabled() || conf.topAxis) { let topXAxis = axisTop(timeScale) .tickSize(-h + theTopPad + conf.gridLineStartPadding) - .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + .tickFormat(timeFormat(axisFormat)); if (resultTickInterval !== null) { const every = resultTickInterval[1]; From 814b68b4a94813f7c6b3d7fb4559532a7bab2652 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Fri, 27 Jun 2025 15:16:20 +0530 Subject: [PATCH 2/3] added changeset --- .changeset/empty-clouds-cry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/empty-clouds-cry.md diff --git a/.changeset/empty-clouds-cry.md b/.changeset/empty-clouds-cry.md new file mode 100644 index 000000000..87ba93c6d --- /dev/null +++ b/.changeset/empty-clouds-cry.md @@ -0,0 +1,5 @@ +--- +'mermaid': major +--- + +fix: apply correct dateFormat in Gantt chart to show only day when specified From 34e7f9704b5d3c8a4ac22833cc2aa58db9a8c9d3 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 16 Jul 2025 13:20:47 +0530 Subject: [PATCH 3/3] fix: update changeset on-behalf-of: @Mermaid-Chart --- .changeset/empty-clouds-cry.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/empty-clouds-cry.md b/.changeset/empty-clouds-cry.md index 87ba93c6d..c513542f1 100644 --- a/.changeset/empty-clouds-cry.md +++ b/.changeset/empty-clouds-cry.md @@ -1,5 +1,5 @@ --- -'mermaid': major +'mermaid': patch --- -fix: apply correct dateFormat in Gantt chart to show only day when specified +fix: Apply correct dateFormat in Gantt chart to show only day when specified