UNPKG

mermaid

Version:

Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.

github.com/knsv/mermaid

knsv/mermaid

700 lines • 74.6 kB
<!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">
      <span class="tree">Files</span>
      <span class="headings">Headings</span>
    </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">&#182;</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">&#182;</a>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">gantt</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./parser/gantt&#39;</span><span class="p">).</span><span class="nx">parser</span><span class="p">;</span>
<span class="nx">gantt</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./ganttDb&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">d3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../d3&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">moment</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;moment&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">log</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../logger&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span>

<span class="kd">var</span> <span class="nx">daysInChart</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">conf</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">titleTopMargin</span><span class="o">:</span> <span class="mi">25</span><span class="p">,</span>
    <span class="nx">barHeight</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
    <span class="nx">barGap</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span>
    <span class="nx">topPadding</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span>
    <span class="nx">sidePadding</span><span class="o">:</span> <span class="mi">75</span><span class="p">,</span>
    <span class="nx">gridLineStartPadding</span><span class="o">:</span> <span class="mi">35</span><span class="p">,</span>
    <span class="nx">fontSize</span><span class="o">:</span> <span class="mi">11</span><span class="p">,</span>
    <span class="nx">fontFamily</span><span class="o">:</span> <span class="s1">&#39;&quot;Open-Sans&quot;, &quot;sans-serif&quot;&#39;</span>
<span class="p">};</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">setConf</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">cnf</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">cnf</span><span class="p">);</span>

    <span class="nx">keys</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">conf</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">cnf</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
    <span class="p">});</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">w</span><span class="p">;</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">draw</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">text</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">gantt</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
    <span class="nx">gantt</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
    <span class="nx">w</span> <span class="o">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">w</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">w</span> <span class="o">=</span> <span class="mi">1200</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">useWidth</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
        <span class="nx">w</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">useWidth</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">taskArray</span> <span class="o">=</span> <span class="nx">gantt</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">getTasks</span><span class="p">();</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-2" id="section-2">&#182;</a>
</div>
<p>Set height based on number of tasks</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">taskArray</span><span class="p">.</span><span class="nx">length</span> <span class="o">*</span> <span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">barHeight</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">barGap</span><span class="p">)</span> <span class="o">+</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">topPadding</span><span class="p">;</span>

    <span class="nx">elem</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;height&#39;</span><span class="p">,</span> <span class="s2">&quot;100%&quot;</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-3" id="section-3">&#182;</a>
</div>
<p>Set viewBox</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">elem</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;viewBox&#39;</span><span class="p">,</span><span class="s1">&#39;0 0 &#39;</span><span class="o">+</span><span class="nx">w</span><span class="o">+</span><span class="s1">&#39; &#39;</span><span class="o">+</span><span class="nx">h</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">svg</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">id</span><span class="p">);</span>

    
    
    
    <span class="kd">var</span> <span class="nx">dateFormat</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">time</span><span class="p">.</span><span class="nx">format</span><span class="p">(</span><span class="s2">&quot;%Y-%m-%d&quot;</span><span class="p">);</span>
    
    <span class="kd">var</span> <span class="nx">startDate</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">taskArray</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">startTime</span><span class="p">;</span>
    <span class="p">});</span>
    <span class="kd">var</span> <span class="nx">endDate</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">taskArray</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">endTime</span><span class="p">;</span>
    <span class="p">});</span>
    

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-4" id="section-4">&#182;</a>
</div>
<p>Set timescale</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">timeScale</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">time</span><span class="p">.</span><span class="nx">scale</span><span class="p">()</span>
        <span class="p">.</span><span class="nx">domain</span><span class="p">([</span><span class="nx">d3</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">taskArray</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">startTime</span><span class="p">;</span>
        <span class="p">}),</span>
            <span class="nx">d3</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">taskArray</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">endTime</span><span class="p">;</span>
            <span class="p">})])</span>
        <span class="p">.</span><span class="nx">rangeRound</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="nx">w</span> <span class="o">-</span> <span class="mi">150</span><span class="p">]);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-5" id="section-5">&#182;</a>
</div>
<p>.nice(d3.time.monday);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>

    <span class="kd">var</span> <span class="nx">categories</span> <span class="o">=</span> <span class="p">[];</span>
    
    <span class="nx">daysInChart</span> <span class="o">=</span> <span class="nx">moment</span><span class="p">.</span><span class="nx">duration</span><span class="p">(</span><span class="nx">endDate</span><span class="o">-</span><span class="nx">startDate</span><span class="p">).</span><span class="nx">asDays</span><span class="p">();</span>

    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">taskArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">categories</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">taskArray</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">type</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">catsUnfiltered</span> <span class="o">=</span> <span class="nx">categories</span><span class="p">;</span> <span class="c1">//for vert labels</span>

    <span class="nx">categories</span> <span class="o">=</span> <span class="nx">checkUnique</span><span class="p">(</span><span class="nx">categories</span><span class="p">);</span>


    <span class="nx">makeGant</span><span class="p">(</span><span class="nx">taskArray</span><span class="p">,</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">h</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">useWidth</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
        <span class="nx">elem</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span> <span class="nx">w</span><span class="p">);</span>

    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;text&quot;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">gantt</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">getTitle</span><span class="p">())</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="nx">w</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y&quot;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">titleTopMargin</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="s1">&#39;titleText&#39;</span><span class="p">);</span>


    <span class="kd">function</span> <span class="nx">makeGant</span><span class="p">(</span><span class="nx">tasks</span><span class="p">,</span> <span class="nx">pageWidth</span><span class="p">,</span> <span class="nx">pageHeight</span><span class="p">)</span> <span class="p">{</span>

        <span class="kd">var</span> <span class="nx">barHeight</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">barHeight</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">gap</span> <span class="o">=</span> <span class="nx">barHeight</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">barGap</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">topPadding</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">topPadding</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">sidePadding</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">sidePadding</span><span class="p">;</span>

        <span class="kd">var</span> <span class="nx">colorScale</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">scale</span><span class="p">.</span><span class="nx">linear</span><span class="p">()</span>
            <span class="p">.</span><span class="nx">domain</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="nx">categories</span><span class="p">.</span><span class="nx">length</span><span class="p">])</span>
            <span class="p">.</span><span class="nx">range</span><span class="p">([</span><span class="s2">&quot;#00B9FA&quot;</span><span class="p">,</span> <span class="s2">&quot;#F95002&quot;</span><span class="p">])</span>
            <span class="p">.</span><span class="nx">interpolate</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">interpolateHcl</span><span class="p">);</span>

        <span class="nx">makeGrid</span><span class="p">(</span><span class="nx">sidePadding</span><span class="p">,</span> <span class="nx">topPadding</span><span class="p">,</span> <span class="nx">pageWidth</span><span class="p">,</span> <span class="nx">pageHeight</span><span class="p">);</span>
        <span class="nx">drawRects</span><span class="p">(</span><span class="nx">tasks</span><span class="p">,</span> <span class="nx">gap</span><span class="p">,</span> <span class="nx">topPadding</span><span class="p">,</span> <span class="nx">sidePadding</span><span class="p">,</span> <span class="nx">barHeight</span><span class="p">,</span> <span class="nx">colorScale</span><span class="p">,</span> <span class="nx">pageWidth</span><span class="p">,</span> <span class="nx">pageHeight</span><span class="p">);</span>
        <span class="nx">vertLabels</span><span class="p">(</span><span class="nx">gap</span><span class="p">,</span> <span class="nx">topPadding</span><span class="p">,</span> <span class="nx">sidePadding</span><span class="p">,</span> <span class="nx">barHeight</span><span class="p">,</span> <span class="nx">colorScale</span><span class="p">);</span>
        <span class="nx">drawToday</span><span class="p">(</span><span class="nx">sidePadding</span><span class="p">,</span> <span class="nx">topPadding</span><span class="p">,</span> <span class="nx">pageWidth</span><span class="p">,</span> <span class="nx">pageHeight</span><span class="p">);</span>

    <span class="p">}</span>


    <span class="kd">function</span> <span class="nx">drawRects</span><span class="p">(</span><span class="nx">theArray</span><span class="p">,</span> <span class="nx">theGap</span><span class="p">,</span> <span class="nx">theTopPad</span><span class="p">,</span> <span class="nx">theSidePad</span><span class="p">,</span> <span class="nx">theBarHeight</span><span class="p">,</span> <span class="nx">theColorScale</span><span class="p">,</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">h</span><span class="p">)</span> <span class="p">{</span>

        <span class="kd">var</span> <span class="nx">bigRects</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;g&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">&quot;rect&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">theArray</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">enter</span><span class="p">()</span>
            <span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;rect&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">i</span> <span class="o">*</span> <span class="nx">theGap</span> <span class="o">+</span> <span class="nx">theTopPad</span> <span class="o">-</span> <span class="mi">2</span><span class="p">;</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">w</span> <span class="o">-</span> <span class="nx">theSidePad</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;height&quot;</span><span class="p">,</span> <span class="nx">theGap</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">categories</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">categories</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="s1">&#39;section section&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">i</span> <span class="o">%</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">numberSectionStyles</span><span class="p">);</span>
                    <span class="p">}</span>
                <span class="p">}</span>
                <span class="k">return</span> <span class="s1">&#39;section section0&#39;</span><span class="p">;</span>
            <span class="p">});</span>


        <span class="kd">var</span> <span class="nx">rectangles</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;g&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">&quot;rect&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">theArray</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">enter</span><span class="p">();</span>


        <span class="kd">var</span> <span class="nx">innerRects</span> <span class="o">=</span> <span class="nx">rectangles</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;rect&quot;</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;rx&quot;</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;ry&quot;</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">startTime</span><span class="p">)</span> <span class="o">+</span> <span class="nx">theSidePad</span><span class="p">;</span>
                <span class="p">})</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="nx">i</span> <span class="o">*</span> <span class="nx">theGap</span> <span class="o">+</span> <span class="nx">theTopPad</span><span class="p">;</span>
                <span class="p">})</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="p">(</span><span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">endTime</span><span class="p">)</span> <span class="o">-</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">startTime</span><span class="p">));</span>
                <span class="p">})</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;height&quot;</span><span class="p">,</span> <span class="nx">theBarHeight</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">res</span> <span class="o">=</span> <span class="s1">&#39;task &#39;</span><span class="p">;</span>
                    
                    
                    <span class="kd">var</span> <span class="nx">secNum</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">categories</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">categories</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
                            <span class="nx">secNum</span> <span class="o">=</span> <span class="p">(</span><span class="nx">i</span> <span class="o">%</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">numberSectionStyles</span><span class="p">);</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                    
                    <span class="k">if</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">active</span><span class="p">){</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">crit</span><span class="p">)</span> <span class="p">{</span>
                            <span class="k">return</span> <span class="nx">res</span> <span class="o">+</span> <span class="s1">&#39; activeCrit&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                            <span class="k">return</span> <span class="nx">res</span> <span class="o">+</span> <span class="s1">&#39; active&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>

                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">crit</span><span class="p">)</span> <span class="p">{</span>
                            <span class="k">return</span> <span class="nx">res</span> <span class="o">+</span> <span class="s1">&#39; doneCrit&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                            <span class="k">return</span> <span class="nx">res</span> <span class="o">+</span> <span class="s1">&#39; done&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>

                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">crit</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="nx">res</span> <span class="o">+</span> <span class="s1">&#39; crit&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                    <span class="p">}</span>


                    <span class="k">return</span> <span class="nx">res</span> <span class="o">+</span> <span class="s1">&#39; task&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                <span class="p">})</span>
            <span class="p">;</span>


        <span class="kd">var</span> <span class="nx">rectText</span> <span class="o">=</span> <span class="nx">rectangles</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;text&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">task</span><span class="p">;</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;font-size&quot;</span><span class="p">,</span><span class="nx">conf</span><span class="p">.</span><span class="nx">fontSize</span><span class="p">)</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-6" id="section-6">&#182;</a>
</div>
<p>.attr(&quot;font-family&quot;,conf.fontFamily)</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">startX</span> <span class="o">=</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">startTime</span><span class="p">),</span>
                    <span class="nx">endX</span> <span class="o">=</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">endTime</span><span class="p">),</span>
                    <span class="nx">textWidth</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">width</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-7" id="section-7">&#182;</a>
</div>
<p>Check id text width &gt; width of rectangle</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="k">if</span> <span class="p">(</span><span class="nx">textWidth</span> <span class="o">&gt;</span> <span class="p">(</span><span class="nx">endX</span> <span class="o">-</span> <span class="nx">startX</span><span class="p">))</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">endX</span> <span class="o">+</span> <span class="nx">textWidth</span>  <span class="o">+</span> <span class="mf">1.5</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">sidePadding</span><span class="o">&gt;</span> <span class="nx">w</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="nx">startX</span> <span class="o">+</span> <span class="nx">theSidePad</span> <span class="o">-</span> <span class="mi">5</span><span class="p">;</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="nx">endX</span> <span class="o">+</span> <span class="nx">theSidePad</span> <span class="o">+</span> <span class="mi">5</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="p">(</span><span class="nx">endX</span> <span class="o">-</span> <span class="nx">startX</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span> <span class="o">+</span> <span class="nx">startX</span> <span class="o">+</span> <span class="nx">theSidePad</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">i</span> <span class="o">*</span> <span class="nx">theGap</span> <span class="o">+</span> <span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">barHeight</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">+</span> <span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">/</span> <span class="mi">2</span> <span class="o">-</span> <span class="mi">2</span><span class="p">)</span> <span class="o">+</span> <span class="nx">theTopPad</span><span class="p">;</span>
            <span class="p">})</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-8" id="section-8">&#182;</a>
</div>
<p>.attr(&quot;text-anchor&quot;, &quot;middle&quot;)</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;text-height&quot;</span><span class="p">,</span> <span class="nx">theBarHeight</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;class&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">startX</span> <span class="o">=</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">startTime</span><span class="p">),</span>
                    <span class="nx">endX</span> <span class="o">=</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">endTime</span><span class="p">),</span>
                    <span class="nx">textWidth</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">width</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">secNum</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">categories</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">categories</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
                        <span class="nx">secNum</span> <span class="o">=</span> <span class="p">(</span><span class="nx">i</span> <span class="o">%</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">numberSectionStyles</span><span class="p">);</span>
                    <span class="p">}</span>
                <span class="p">}</span>

                <span class="kd">var</span> <span class="nx">taskType</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
                <span class="k">if</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">active</span><span class="p">){</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">crit</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">taskType</span> <span class="o">=</span> <span class="s1">&#39;activeCritText&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                        <span class="nx">taskType</span> <span class="o">=</span> <span class="s1">&#39;activeText&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span>

                <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">crit</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">taskType</span> <span class="o">=</span> <span class="nx">taskType</span> <span class="o">+</span> <span class="s1">&#39; doneCritText&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                        <span class="nx">taskType</span> <span class="o">=</span> <span class="nx">taskType</span> <span class="o">+</span> <span class="s1">&#39; doneText&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">crit</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">taskType</span> <span class="o">=</span> <span class="nx">taskType</span> <span class="o">+</span> <span class="s1">&#39; critText&#39;</span><span class="o">+</span><span class="nx">secNum</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-9" id="section-9">&#182;</a>
</div>
<p>Check id text width &gt; width of rectangle</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="k">if</span> <span class="p">(</span><span class="nx">textWidth</span> <span class="o">&gt;</span> <span class="p">(</span><span class="nx">endX</span> <span class="o">-</span> <span class="nx">startX</span><span class="p">))</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">endX</span> <span class="o">+</span> <span class="nx">textWidth</span> <span class="o">+</span> <span class="mf">1.5</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">sidePadding</span> <span class="o">&gt;</span> <span class="nx">w</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="s1">&#39;taskTextOutsideLeft taskTextOutside&#39;</span> <span class="o">+</span> <span class="nx">secNum</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="nx">taskType</span><span class="p">;</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="s1">&#39;taskTextOutsideRight taskTextOutside&#39;</span> <span class="o">+</span> <span class="nx">secNum</span><span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="nx">taskType</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="s1">&#39;taskText taskText&#39;</span> <span class="o">+</span> <span class="nx">secNum</span><span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="nx">taskType</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">});</span>

    <span class="p">}</span>


    <span class="kd">function</span> <span class="nx">makeGrid</span><span class="p">(</span><span class="nx">theSidePad</span><span class="p">,</span> <span class="nx">theTopPad</span><span class="p">,</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">h</span><span class="p">)</span> <span class="p">{</span>

        <span class="kd">var</span> <span class="nx">pre</span> <span class="o">=</span> <span class="p">[</span>
            <span class="p">[</span><span class="s2">&quot;.%L&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getMilliseconds</span><span class="p">();</span>
            <span class="p">}],</span>
            <span class="p">[</span><span class="s2">&quot;:%S&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getSeconds</span><span class="p">();</span>
            <span class="p">}],</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-10" id="section-10">&#182;</a>
</div>
<p>Within a hour</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">[</span><span class="s2">&quot;h1 %I:%M&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">();</span>
            <span class="p">}]];</span>
        <span class="kd">var</span> <span class="nx">post</span> <span class="o">=</span> <span class="p">[</span>
            <span class="p">[</span><span class="s2">&quot;%Y&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
            <span class="p">}]];</span>
        
        <span class="kd">var</span> <span class="nx">mid</span> <span class="o">=</span> <span class="p">[</span>                    

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-11" id="section-11">&#182;</a>
</div>
<p>Within a day</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">[</span><span class="s2">&quot;%I:%M&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">();</span>
            <span class="p">}],</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-12" id="section-12">&#182;</a>
</div>
<p>Day within a week (not monday)</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">[</span><span class="s2">&quot;%a %d&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-13" id="section-13">&#182;</a>
</div>
<p>return d.getDay() ==1;</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDay</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">!=</span> <span class="mi">1</span><span class="p">;</span>
            <span class="p">}],</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-14" id="section-14">&#182;</a>
</div>
<p>within a month</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">[</span><span class="s2">&quot;%b %d&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">!=</span> <span class="mi">1</span><span class="p">;</span>
            <span class="p">}],</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-15" id="section-15">&#182;</a>
</div>
<p>Month</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="p">[</span><span class="s2">&quot;%B&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span>
            <span class="p">}]</span>
        <span class="p">];</span>
        <span class="kd">var</span> <span class="nx">formatter</span><span class="p">;</span>
        <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">axisFormatter</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
            <span class="nx">mid</span> <span class="o">=</span> <span class="p">[];</span>
            <span class="nx">conf</span><span class="p">.</span><span class="nx">axisFormatter</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">){</span>
                <span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="p">[];</span>
                <span class="nx">n</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="nx">item</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
                <span class="nx">n</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="nx">item</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
                <span class="nx">mid</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">n</span><span class="p">);</span>
            <span class="p">});</span>
        <span class="p">}</span>
        <span class="nx">formatter</span> <span class="o">=</span> <span class="nx">pre</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">mid</span><span class="p">).</span><span class="nx">concat</span><span class="p">(</span><span class="nx">post</span><span class="p">);</span>

        <span class="kd">var</span> <span class="nx">xAxis</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">svg</span><span class="p">.</span><span class="nx">axis</span><span class="p">()</span>
                <span class="p">.</span><span class="nx">scale</span><span class="p">(</span><span class="nx">timeScale</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">orient</span><span class="p">(</span><span class="s1">&#39;bottom&#39;</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">tickSize</span><span class="p">(</span><span class="o">-</span><span class="nx">h</span> <span class="o">+</span> <span class="nx">theTopPad</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">gridLineStartPadding</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">tickFormat</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">time</span><span class="p">.</span><span class="nx">format</span><span class="p">.</span><span class="nx">multi</span><span class="p">(</span><span class="nx">formatter</span><span class="p">))</span>
            <span class="p">;</span>

        <span class="k">if</span><span class="p">(</span><span class="nx">daysInChart</span> <span class="o">&gt;</span><span class="mi">7</span> <span class="o">&amp;&amp;</span> <span class="nx">daysInChart</span><span class="o">&lt;</span><span class="mi">230</span><span class="p">){</span>
            <span class="nx">xAxis</span> <span class="o">=</span> <span class="nx">xAxis</span><span class="p">.</span><span class="nx">ticks</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">time</span><span class="p">.</span><span class="nx">monday</span><span class="p">.</span><span class="nx">range</span><span class="p">);</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">grid</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;g&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="s1">&#39;grid&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;transform&#39;</span><span class="p">,</span> <span class="s1">&#39;translate(&#39;</span> <span class="o">+</span> <span class="nx">theSidePad</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">h</span> <span class="o">-</span> <span class="mi">50</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;)&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">xAxis</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">&quot;text&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s2">&quot;text-anchor&quot;</span><span class="p">,</span> <span class="s2">&quot;middle&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;fill&quot;</span><span class="p">,</span> <span class="s2">&quot;#000&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;stroke&quot;</span><span class="p">,</span> <span class="s2">&quot;none&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;font-size&quot;</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;dy&quot;</span><span class="p">,</span> <span class="s2">&quot;1em&quot;</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nx">vertLabels</span><span class="p">(</span><span class="nx">theGap</span><span class="p">,</span> <span class="nx">theTopPad</span><span class="p">,</span> <span class="nx">theSidePad</span><span class="p">,</span> <span class="nx">theBarHeight</span><span class="p">,</span> <span class="nx">theColorScale</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">numOccurances</span> <span class="o">=</span> <span class="p">[];</span>
        <span class="kd">var</span> <span class="nx">prevGap</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">categories</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">numOccurances</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">categories</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">getCount</span><span class="p">(</span><span class="nx">categories</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">catsUnfiltered</span><span class="p">)];</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">axisText</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;g&quot;</span><span class="p">)</span> <span class="c1">//without doing this, impossible to put grid lines behind text</span>
            <span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s2">&quot;text&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">numOccurances</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">enter</span><span class="p">()</span>
            <span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;text&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">d</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="nx">i</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">prevGap</span> <span class="o">+=</span> <span class="nx">numOccurances</span><span class="p">[</span><span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">][</span><span class="mi">1</span><span class="p">];</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-16" id="section-16">&#182;</a>
</div>
<p>log.debug(prevGap);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                        <span class="k">return</span> <span class="nx">d</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">*</span> <span class="nx">theGap</span> <span class="o">/</span> <span class="mi">2</span> <span class="o">+</span> <span class="nx">prevGap</span> <span class="o">*</span> <span class="nx">theGap</span> <span class="o">+</span> <span class="nx">theTopPad</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="nx">d</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">*</span> <span class="nx">theGap</span> <span class="o">/</span> <span class="mi">2</span> <span class="o">+</span> <span class="nx">theTopPad</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">categories</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="nx">categories</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="s1">&#39;sectionTitle sectionTitle&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">i</span> <span class="o">%</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">numberSectionStyles</span><span class="p">);</span>
                    <span class="p">}</span>
                <span class="p">}</span>
                <span class="k">return</span> <span class="s1">&#39;sectionTitle&#39;</span><span class="p">;</span>
            <span class="p">});</span>

    <span class="p">}</span>

    <span class="kd">function</span> <span class="nx">drawToday</span><span class="p">(</span><span class="nx">theSidePad</span><span class="p">,</span> <span class="nx">theTopPad</span><span class="p">,</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">h</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">todayG</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;g&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="s1">&#39;today&#39;</span><span class="p">);</span>

        <span class="kd">var</span> <span class="nx">today</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>

        <span class="kd">var</span> <span class="nx">todayLine</span> <span class="o">=</span> <span class="nx">todayG</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;line&quot;</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x1&quot;</span><span class="p">,</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">today</span><span class="p">)</span> <span class="o">+</span> <span class="nx">theSidePad</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x2&quot;</span><span class="p">,</span> <span class="nx">timeScale</span><span class="p">(</span><span class="nx">today</span><span class="p">)</span> <span class="o">+</span> <span class="nx">theSidePad</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y1&quot;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">titleTopMargin</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y2&quot;</span><span class="p">,</span> <span class="nx">h</span><span class="o">-</span><span class="nx">conf</span><span class="p">.</span><span class="nx">titleTopMargin</span><span class="p">)</span>
                <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span> <span class="s1">&#39;today&#39;</span><span class="p">)</span>
            <span class="p">;</span>
    <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-17" id="section-17">&#182;</a>
</div>
<p>from this stackexchange question: <a href="http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript">http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript</a></p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">function</span> <span class="nx">checkUnique</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">hash</span> <span class="o">=</span> <span class="p">{},</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">l</span><span class="p">;</span> <span class="o">++</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">hash</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]))</span> <span class="p">{</span> <span class="c1">//it works with objects! in FF, at least</span>
                <span class="nx">hash</span><span class="p">[</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
                <span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
    <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-18" id="section-18">&#182;</a>
</div>
<p>from this stackexchange question: <a href="http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array">http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array</a></p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">function</span> <span class="nx">getCounts</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="c1">// var to loop over</span>
            <span class="nx">obj</span> <span class="o">=</span> <span class="p">{};</span> <span class="c1">// obj to store results</span>
        <span class="k">while</span> <span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">obj</span><span class="p">[</span><span class="nx">arr</span><span class="p">[</span><span class="o">--</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">obj</span><span class="p">[</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">||</span> <span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// count occurrences</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">obj</span><span class="p">;</span>
    <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-19" id="section-19">&#182;</a>
</div>
<p>get specific from everything</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">function</span> <span class="nx">getCount</span><span class="p">(</span><span class="nx">word</span><span class="p">,</span> <span class="nx">arr</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">getCounts</span><span class="p">(</span><span class="nx">arr</span><span class="p">)[</span><span class="nx">word</span><span class="p">]</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>
</pre></div>
        </td>
      </tr>
  </tbody>
</table>
  </div>
</body>
</html>