Merge pull request #1954 from nacc/gantt-top-xaxis

Gantt: add top xaxis

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
   },
 

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,

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) {

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);}

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);