diff --git a/src/defaultConfig.js b/src/defaultConfig.js index 634a43eb0..43e6a3f23 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -611,6 +611,18 @@ const config = { */ useMaxWidth: true, + /** + *| Parameter | Description |Type | Required | Values| + *| --- | --- | --- | --- | --- | + *| topAxis | See notes | Boolean | 4 | True, False | + * + ***Notes:**when this flag is set date labels will be added to the +top of the chart + * + ***Default value false**. + */ + topAxis: false, + useWidth: undefined }, diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index d64498374..8fd100e0c 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -16,6 +16,7 @@ let currentSection = ''; const tags = ['active', 'done', 'crit', 'milestone']; let funs = []; let inclusiveEndDates = false; +let topAxis = false; // The serial order of the task in the script let lastOrder = 0; @@ -39,6 +40,7 @@ export const clear = function() { todayMarker = ''; excludes = []; inclusiveEndDates = false; + topAxis = false; lastOrder = 0; }; @@ -70,6 +72,14 @@ export const endDatesAreInclusive = function() { return inclusiveEndDates; }; +export const enableTopAxis = function() { + topAxis = true; +}; + +export const topAxisEnabled = function() { + return topAxis; +}; + export const getDateFormat = function() { return dateFormat; }; @@ -594,6 +604,8 @@ export default { getDateFormat, enableInclusiveEndDates, endDatesAreInclusive, + enableTopAxis, + topAxisEnabled, setAxisFormat, getAxisFormat, setTodayMarker, diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index d2eb621c7..90234c581 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -6,6 +6,7 @@ import { scaleLinear, interpolateHcl, axisBottom, + axisTop, timeFormat } from 'd3'; import { parser } from './parser/gantt'; @@ -346,7 +347,7 @@ export const draw = function(text, id) { } function makeGrid(theSidePad, theTopPad, w, h) { - let xAxis = axisBottom(timeScale) + let bottomXAxis = axisBottom(timeScale) .tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); @@ -354,13 +355,31 @@ export const draw = function(text, id) { .append('g') .attr('class', 'grid') .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')') - .call(xAxis) + .call(bottomXAxis) .selectAll('text') .style('text-anchor', 'middle') .attr('fill', '#000') .attr('stroke', 'none') .attr('font-size', 10) .attr('dy', '1em'); + + if (ganttDb.topAxisEnabled() || conf.topAxis) { + let topXAxis = axisTop(timeScale) + .tickSize(-h + theTopPad + conf.gridLineStartPadding) + .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + + svg + .append('g') + .attr('class', 'grid') + .attr('transform', 'translate(' + theSidePad + ', ' + theTopPad + ')') + .call(topXAxis) + .selectAll('text') + .style('text-anchor', 'middle') + .attr('fill', '#000') + .attr('stroke', 'none') + .attr('font-size', 10) + .attr('dy', '1em'); + } } function vertLabels(theGap, theTopPad) { diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index f63e367ef..f5746a32f 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -68,6 +68,7 @@ that id. "gantt" return 'gantt'; "dateFormat"\s[^#\n;]+ return 'dateFormat'; "inclusiveEndDates" return 'inclusiveEndDates'; +"topAxis" return 'topAxis'; "axisFormat"\s[^#\n;]+ return 'axisFormat'; "excludes"\s[^#\n;]+ return 'excludes'; "todayMarker"\s[^\n;]+ return 'todayMarker'; @@ -108,6 +109,7 @@ line statement : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} + | topAxis {yy.TopAxis();$$=$1.substr(8);} | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);} | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index a6b5a0602..aa3949f68 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -708,6 +708,7 @@ export default mermaidAPI; * fontFamily:'"Open-Sans", "sans-serif"', * numberSectionStyles:4, * axisFormat:'%Y-%m-%d', + * topAxis:false, * } * }; * mermaid.initialize(config);