diff --git a/.changeset/empty-clouds-cry.md b/.changeset/empty-clouds-cry.md new file mode 100644 index 000000000..c513542f1 --- /dev/null +++ b/.changeset/empty-clouds-cry.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Apply correct dateFormat in Gantt chart to show only day when specified diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 979c27540..32dbcb4d9 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 dd4824d6b..9f899a40f 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -609,9 +609,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( @@ -663,7 +674,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];