From 197671960d65e2e05fb603b380bdc71821f39c10 Mon Sep 17 00:00:00 2001 From: Tyler Long Date: Wed, 7 Mar 2018 22:05:54 +0800 Subject: [PATCH] Fix gantt diagram xAxis format --- src/diagrams/gantt/ganttRenderer.js | 71 +++++++++-------------------- todo.md | 8 +++- 2 files changed, 28 insertions(+), 51 deletions(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index c66a669b2..c5c6f9950 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -1,9 +1,9 @@ - import moment from 'moment' import { parser } from './parser/gantt' import ganttDb from './ganttDb' import d3 from '../../d3' +import { logger } from '../../logger' parser.yy = ganttDb @@ -254,59 +254,32 @@ export const draw = function (text, id) { } function makeGrid (theSidePad, theTopPad, w, h) { - const pre = [ - ['.%L', function (d) { - return d.getMilliseconds() - }], - [':%S', function (d) { - return d.getSeconds() - }], - // Within a hour - ['h1 %I:%M', function (d) { - return d.getMinutes() - }]] - const post = [ - ['%Y', function () { - return true - }]] + 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') - let mid = [ - // Within a day - ['%I:%M', function (d) { - return d.getHours() - }], - // 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 - ['%B', function (d) { - return d.getMonth() - }] - ] - let formatter - if (typeof conf.axisFormatter !== 'undefined') { - mid = [] - conf.axisFormatter.forEach(function (item) { - const n = [] - n[0] = item[0] - n[1] = item[1] - mid.push(n) - }) + 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) } - formatter = pre.concat(mid).concat(post) + + // todo: if (typeof conf.axisFormatter !== 'undefined') let xAxis = d3.axisBottom(timeScale) - .tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0) - // .tickFormat(d3.time.format.multi(formatter)) + .tickSize(-h + theTopPad + conf.gridLineStartPadding) + .tickFormat(multiFormat) - // if (daysInChart > 7 && daysInChart < 230) { - // xAxis = xAxis.ticks(d3.timeMonday.range) - // } + logger.debug(daysInChart) // just to pass lint svg.append('g') .attr('class', 'grid') diff --git a/todo.md b/todo.md index 505a80853..0dd040568 100644 --- a/todo.md +++ b/todo.md @@ -1,4 +1,3 @@ -- Fix d3-textwrap code - Replace CodeClimate with coveralls ? - Get familar with jison - git graph requires a blank line at the end. why? @@ -7,6 +6,11 @@ - rewrite less code - Setup code coverage - Create a desktop client -- fix gantt diagram xAxis issue - Fix sequence diagram node label position issue + - caused by d3-textwrap? + - remove textwrap feature? - Fix flowchart interpolate/curve issue + - not a common feature so dist/index.html cannot reproduce this issue +- Support customization of gantt diagram xAxis format + - https://github.com/d3/d3-time-format#api-reference + - https://bl.ocks.org/wboykinm/34627426d84f3242e0e6ecb2339e9065