marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #353 from zeroyonichihachi/gantt-width

Browse Source 
The option of gantt for the spaces for the section names.
This commit is contained in:
Knut Sveidqvist
2016-05-25 13:59:27 +02:00
parent 23105211f8 f2e4b922a9
commit 0ab0be01c2
8 changed files with 49 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/diagrams/gantt/ganttRenderer.js
View File

@@ -10,7 +10,8 @@ var conf = {
barHeight: 20, barHeight: 20,
barGap: 4, barGap: 4,
topPadding: 50, topPadding: 50,
sidePadding: 75, rightPadding: 75,
leftPadding: 75,
gridLineStartPadding: 35, gridLineStartPadding: 35,
fontSize: 11, fontSize: 11,
fontFamily: '"Open-Sans", "sans-serif"' fontFamily: '"Open-Sans", "sans-serif"'
@@ -68,7 +69,7 @@ module.exports.draw = function (text, id) {
d3.max(taskArray, function (d) { d3.max(taskArray, function (d) {
return d.endTime; return d.endTime;
})]) })])
.rangeRound([0, w - 150]); .rangeRound([0, w - conf.leftPadding - conf.rightPadding]);
//.nice(d3.time.monday); //.nice(d3.time.monday);
var categories = []; var categories = [];
@@ -102,17 +103,17 @@ module.exports.draw = function (text, id) {
var barHeight = conf.barHeight; var barHeight = conf.barHeight;
var gap = barHeight + conf.barGap; var gap = barHeight + conf.barGap;
var topPadding = conf.topPadding; var topPadding = conf.topPadding;
var sidePadding = conf.sidePadding; var leftPadding = conf.leftPadding;
var colorScale = d3.scale.linear() var colorScale = d3.scale.linear()
.domain([0, categories.length]) .domain([0, categories.length])
.range(['#00B9FA', '#F95002']) .range(['#00B9FA', '#F95002'])
.interpolate(d3.interpolateHcl); .interpolate(d3.interpolateHcl);
makeGrid(sidePadding, topPadding, pageWidth, pageHeight); makeGrid(leftPadding, topPadding, pageWidth, pageHeight);
drawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight); drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);
vertLabels(gap, topPadding, sidePadding, barHeight, colorScale); vertLabels(gap, topPadding, leftPadding, barHeight, colorScale);
drawToday(sidePadding, topPadding, pageWidth, pageHeight); drawToday(leftPadding, topPadding, pageWidth, pageHeight);
} }
@@ -129,7 +130,7 @@ module.exports.draw = function (text, id) {
return i * theGap + theTopPad - 2; return i * theGap + theTopPad - 2;
}) })
.attr('width', function () { .attr('width', function () {
return w - theSidePad / 2; return w - conf.rightPadding / 2;
}) })
.attr('height', theGap) .attr('height', theGap)
.attr('class', function (d) { //eslint-disable-line no-unused-vars .attr('class', function (d) { //eslint-disable-line no-unused-vars
@@ -211,7 +212,7 @@ module.exports.draw = function (text, id) {
// Check id text width > width of rectangle // Check id text width > width of rectangle
if (textWidth > (endX - startX)) { if (textWidth > (endX - startX)) {
if (endX + textWidth + 1.5*conf.sidePadding> w) { if (endX + textWidth + 1.5*conf.leftPadding> w) {
return startX + theSidePad - 5; return startX + theSidePad - 5;
} else { } else {
return endX + theSidePad + 5; return endX + theSidePad + 5;
@@ -259,7 +260,7 @@ module.exports.draw = function (text, id) {
// Check id text width > width of rectangle // Check id text width > width of rectangle
if (textWidth > (endX - startX)) { if (textWidth > (endX - startX)) {
if (endX + textWidth + 1.5*conf.sidePadding > w) { if (endX + textWidth + 1.5*conf.leftPadding > w) {
return 'taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType; return 'taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType;
} else { } else {
return 'taskTextOutsideRight taskTextOutside' + secNum+ ' ' + taskType; return 'taskTextOutsideRight taskTextOutside' + secNum+ ' ' + taskType;

4
src/mermaidAPI.js
View File

@@ -187,9 +187,9 @@ var config = {
topPadding: 50, topPadding: 50,
/** /**
* **sidePadding** - the space allocated for the section name to the left of the activities. * **leftPadding** - the space allocated for the section name to the left of the activities.
*/ */
sidePadding: 75, leftPadding: 75,
/** /**
* **gridLineStartPadding** - Vertical starting position of the grid lines * **gridLineStartPadding** - Vertical starting position of the grid lines

29
test/examples/ganttSideSpan.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/mermaid.css"/>
<script src="dist/mermaid.js"></script>
<script>
mermaid.initialize({
gantt: {
leftPadding: 400
}
});
</script>
</head>
<body>
<div class="mermaid" id="i211">
gantt
dateFormat YYYY-MM-DD
title My Project
section Long Long Long Long Task Name
Completed task :done, des1, 2016-04-25, 2016-05-21
Active task :active, des1, 2016-04-25, 2016-04-30
Future task : des1, 2016-04-25, 2016-05-30
</div>
</body>
</html>

2
test/gantt.html
View File

@@ -12,7 +12,7 @@
barHeight:20, barHeight:20,
barGap:4, barGap:4,
topPadding:50, topPadding:50,
sidePadding:75, leftPadding:75,
gridLineStartPadding:5, gridLineStartPadding:5,
fontSize:11, fontSize:11,
numberSectionStyles:3, numberSectionStyles:3,

2
test/gconf.json
View File

@@ -3,7 +3,7 @@
"barHeight":20, "barHeight":20,
"barGap":4, "barGap":4,
"topPadding":50, "topPadding":50,
"sidePadding":75, "leftPadding":75,
"gridLineStartPadding":35, "gridLineStartPadding":35,
"fontSize":11, "fontSize":11,
"numberSectionStyles":3 "numberSectionStyles":3

2
test/mix-dark-theme.html
View File

@@ -25,7 +25,7 @@
barHeight:20, barHeight:20,
barGap:4, barGap:4,
topPadding:50, topPadding:50,
sidePadding:100, leftPadding:100,
gridLineStartPadding:35, gridLineStartPadding:35,
fontSize:11, fontSize:11,
numberSectionStyles:4, numberSectionStyles:4,

2
test/mix.html
View File

@@ -25,7 +25,7 @@
barHeight:20, barHeight:20,
barGap:4, barGap:4,
topPadding:50, topPadding:50,
sidePadding:100, leftPadding:100,
gridLineStartPadding:35, gridLineStartPadding:35,
fontSize:11, fontSize:11,
numberSectionStyles:4, numberSectionStyles:4,

2
test/web_render.html
View File

@@ -24,7 +24,7 @@ html {
barHeight:20, barHeight:20,
barGap:4, barGap:4,
topPadding:50, topPadding:50,
sidePadding:75, leftPadding:75,
gridLineStartPadding:35, gridLineStartPadding:35,
fontSize:11, fontSize:11,
numberSectionStyles:3, numberSectionStyles:3,