mermaid

<!DOCTYPE html> <html> <head> <title>ganttRenderer.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../../../doc-style.css" /> <script src="../../../doc-filelist.js"></script> <script> var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/src/diagrams/gantt/ganttRenderer.js", defaultSidebar = true; </script> <script src="../../../doc-script.js"></script> <script src="../../../mermaid.js"></script> <link rel="stylesheet" href="../../../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#ganttRenderer.js">ganttRenderer.js</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="ganttRenderer.js"> <h1> <a href="#ganttRenderer.js" name="ganttRenderer.js" class="pilcrow">¶</a>ganttRenderer.js </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> </td> <td class="code highlight"><div class="highlight"><pre>var gantt = require('./parser/gantt').parser; gantt.yy = require('./ganttDb'); var d3 = require('../../d3'); var moment = require('moment'); var log = require('../../logger').create(); var daysInChart; var conf = { titleTopMargin: 25, barHeight: 20, barGap: 4, topPadding: 50, sidePadding: 75, gridLineStartPadding: 35, fontSize: 11, fontFamily: '"Open-Sans", "sans-serif"' }; module.exports.setConf = function (cnf) { var keys = Object.keys(cnf); keys.forEach(function (key) { conf[key] = cnf[key]; }); }; var w; module.exports.draw = function (text, id) { gantt.yy.clear(); gantt.parse(text); var elem = document.getElementById(id); w = elem.parentElement.offsetWidth; if (typeof w === 'undefined') { w = 1200; } if(typeof conf.useWidth !== 'undefined'){ w = conf.useWidth; } var taskArray = gantt.yy.getTasks(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2" id="section-2">¶</a> </div> Set height based on number of tasks </td> <td class="code highlight"><div class="highlight"><pre> var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding; elem.setAttribute('height', "100%"); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> Set viewBox </td> <td class="code highlight"><div class="highlight"><pre> elem.setAttribute('viewBox','0 0 '+w+' '+h); var svg = d3.select('#' + id); var dateFormat = d3.time.format("%Y-%m-%d"); var startDate = d3.min(taskArray, function (d) { return d.startTime; }); var endDate = d3.max(taskArray, function (d) { return d.endTime; }); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> Set timescale </td> <td class="code highlight"><div class="highlight"><pre> var timeScale = d3.time.scale() .domain([d3.min(taskArray, function (d) { return d.startTime; }), d3.max(taskArray, function (d) { return d.endTime; })]) .rangeRound([0, w - 150]); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> .nice(d3.time.monday); </td> <td class="code highlight"><div class="highlight"><pre> var categories = []; daysInChart = moment.duration(endDate-startDate).asDays(); for (var i = 0; i < taskArray.length; i++) { categories.push(taskArray[i].type); } var catsUnfiltered = categories; //for vert labels categories = checkUnique(categories); makeGant(taskArray, w, h); if(typeof conf.useWidth !== 'undefined'){ elem.setAttribute('width', w); } var title = svg.append("text") .text(gantt.yy.getTitle()) .attr("x", w / 2) .attr("y", conf.titleTopMargin) .attr('class', 'titleText'); function makeGant(tasks, pageWidth, pageHeight) { var barHeight = conf.barHeight; var gap = barHeight + conf.barGap; var topPadding = conf.topPadding; var sidePadding = conf.sidePadding; var colorScale = d3.scale.linear() .domain([0, categories.length]) .range(["#00B9FA", "#F95002"]) .interpolate(d3.interpolateHcl); makeGrid(sidePadding, topPadding, pageWidth, pageHeight); drawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight); vertLabels(gap, topPadding, sidePadding, barHeight, colorScale); drawToday(sidePadding, topPadding, pageWidth, pageHeight); } function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) { var bigRects = svg.append("g") .selectAll("rect") .data(theArray) .enter() .append("rect") .attr("x", 0) .attr("y", function (d, i) { return i * theGap + theTopPad - 2; }) .attr("width", function (d) { return w - theSidePad / 2; }) .attr("height", theGap) .attr('class', function (d) { for (var i = 0; i < categories.length; i++) { if (d.type === categories[i]) { return 'section section' + (i % conf.numberSectionStyles); } } return 'section section0'; }); var rectangles = svg.append('g') .selectAll("rect") .data(theArray) .enter(); var innerRects = rectangles.append("rect") .attr("rx", 3) .attr("ry", 3) .attr("x", function (d) { return timeScale(d.startTime) + theSidePad; }) .attr("y", function (d, i) { return i * theGap + theTopPad; }) .attr("width", function (d) { return (timeScale(d.endTime) - timeScale(d.startTime)); }) .attr("height", theBarHeight) .attr('class', function (d) { var res = 'task '; var secNum = 0; for (var i = 0; i < categories.length; i++) { if (d.type === categories[i]) { secNum = (i % conf.numberSectionStyles); } } if(d.active){ if (d.crit) { return res + ' activeCrit'+secNum; }else{ return res + ' active'+secNum; } } if (d.done) { if (d.crit) { return res + ' doneCrit'+secNum; }else{ return res + ' done'+secNum; } } if (d.crit) { return res + ' crit'+secNum; } return res + ' task'+secNum; }) ; var rectText = rectangles.append("text") .text(function (d) { return d.task; }) .attr("font-size",conf.fontSize) </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> .attr("font-family",conf.fontFamily) </td> <td class="code highlight"><div class="highlight"><pre> .attr("x", function (d) { var startX = timeScale(d.startTime), endX = timeScale(d.endTime), textWidth = this.getBBox().width; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7" id="section-7">¶</a> </div> Check id text width > width of rectangle </td> <td class="code highlight"><div class="highlight"><pre> if (textWidth > (endX - startX)) { if (endX + textWidth + 1.5*conf.sidePadding> w) { return startX + theSidePad - 5; } else { return endX + theSidePad + 5; } } else { return (endX - startX) / 2 + startX + theSidePad; } }) .attr("y", function (d, i) { return i * theGap + (conf.barHeight / 2) + (conf.fontSize / 2 - 2) + theTopPad; }) </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</a> </div> .attr("text-anchor", "middle") </td> <td class="code highlight"><div class="highlight"><pre> .attr("text-height", theBarHeight) .attr("class", function (d) { var startX = timeScale(d.startTime), endX = timeScale(d.endTime), textWidth = this.getBBox().width; var secNum = 0; for (var i = 0; i < categories.length; i++) { if (d.type === categories[i]) { secNum = (i % conf.numberSectionStyles); } } var taskType = ''; if(d.active){ if (d.crit) { taskType = 'activeCritText'+secNum; }else{ taskType = 'activeText'+secNum; } } if (d.done) { if (d.crit) { taskType = taskType + ' doneCritText'+secNum; }else{ taskType = taskType + ' doneText'+secNum; } }else{ if (d.crit) { taskType = taskType + ' critText'+secNum; } } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</a> </div> Check id text width > width of rectangle </td> <td class="code highlight"><div class="highlight"><pre> if (textWidth > (endX - startX)) { if (endX + textWidth + 1.5*conf.sidePadding > w) { return 'taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType; } else { return 'taskTextOutsideRight taskTextOutside' + secNum+ ' ' + taskType; } } else { return 'taskText taskText' + secNum+ ' ' + taskType; } }); } function makeGrid(theSidePad, theTopPad, w, h) { var pre = [ [".%L", function (d) { return d.getMilliseconds(); }], [":%S", function (d) { return d.getSeconds(); }], </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10" id="section-10">¶</a> </div> Within a hour </td> <td class="code highlight"><div class="highlight"><pre> ["h1 %I:%M", function (d) { return d.getMinutes(); }]]; var post = [ ["%Y", function () { return true; }]]; var mid = [ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11" id="section-11">¶</a> </div> Within a day </td> <td class="code highlight"><div class="highlight"><pre> ["%I:%M", function (d) { return d.getHours(); }], </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12" id="section-12">¶</a> </div> Day within a week (not monday)</p