Support global config of gantt axisFormat

dist/index.html

@@ -101,7 +101,7 @@ Class08 <--> C2: Cool label
   </div>
   <script src="./mermaid.js"></script>
   <script>
-    mermaid.initialize({ theme: 'forest', logLevel: 3 });
+    mermaid.initialize({ theme: 'forest', logLevel: 3, gantt: { axisFormat: '%m/%d/%Y' } });
   </script>
   <script>
     function testClick(nodeId) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [

src/diagrams/gantt/ganttRenderer.js

@@ -1,13 +1,10 @@
-import moment from 'moment'
 import * as d3 from 'd3'
 
 import { parser } from './parser/gantt'
 import ganttDb from './ganttDb'
-import { logger } from '../../logger'
 
 parser.yy = ganttDb
 
-let daysInChart
 const conf = {
   titleTopMargin: 25,
   barHeight: 20,
@@ -52,13 +49,6 @@ export const draw = function (text, id) {
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
   const svg = d3.select('#' + id)
 
-  const startDate = d3.min(taskArray, function (d) {
-    return d.startTime
-  })
-  const endDate = d3.max(taskArray, function (d) {
-    return d.endTime
-  })
-
   // Set timescale
   const timeScale = d3.scaleTime()
     .domain([d3.min(taskArray, function (d) {
@@ -71,8 +61,6 @@ export const draw = function (text, id) {
 
   let categories = []
 
-  daysInChart = moment.duration(endDate - startDate).asDays()
-
   for (let i = 0; i < taskArray.length; i++) {
     categories.push(taskArray[i].type)
   }
@@ -254,32 +242,9 @@ export const draw = function (text, id) {
   }
 
   function makeGrid (theSidePad, theTopPad, w, h) {
-    const formatMillisecond = d3.timeFormat('.%L')
-    const formatSecond = d3.timeFormat(':%S')
-    const formatMinute = d3.timeFormat('%I:%M')
-    const formatHour = d3.timeFormat('%I %p')
-    const formatDay = d3.timeFormat('%Y-%m-%d')
-    const formatWeek = d3.timeFormat('%Y-%m-%d')
-    const formatMonth = d3.timeFormat('%b-%Y')
-    const formatYear = d3.timeFormat('%Y')
-
-    const multiFormat = date => {
-      return (d3.timeSecond(date) < date ? formatMillisecond
-        : d3.timeMinute(date) < date ? formatSecond
-          : d3.timeHour(date) < date ? formatMinute
-            : d3.timeDay(date) < date ? formatHour
-              : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)
-                : d3.timeYear(date) < date ? formatMonth
-                  : formatYear)(date)
-    }
-
-    // todo: if (typeof conf.axisFormatter !== 'undefined')
-
     let xAxis = d3.axisBottom(timeScale)
       .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-      .tickFormat(multiFormat)
+      .tickFormat(d3.timeFormat(conf.axisFormat || '%Y-%m-%d'))
-
-    logger.debug(daysInChart) // just to pass lint
 
     svg.append('g')
       .attr('class', 'grid')

src/mermaidAPI.js

@@ -219,30 +219,9 @@ const config = {
     numberSectionStyles: 3,
 
     /**
-     * **axisFormatter** - formatting of the axis, this might need adjustment to match your locale and preferences
+     * **axisFormat** - datetime format of the axis, this might need adjustment to match your locale and preferences
      */
-    axisFormatter: [
+    axisFormat: '%Y-%m-%d'
-      // Within a day
-      ['%I:%M', function (d) {
-        return d.getHours()
-      }],
-      // Monday a week
-      ['w. %U', function (d) {
-        return d.getDay() === 1
-      }],
-      // Day within a week (not monday)
-      ['%a %d', function (d) {
-        return d.getDay() && d.getDate() !== 1
-      }],
-      // within a month
-      ['%b %d', function (d) {
-        return d.getDate() !== 1
-      }],
-      // Month
-      ['%m-%y', function (d) {
-        return d.getMonth()
-      }]
-    ]
   },
   class: {},
   git: {},