31:T620,viewof source = { const textarea = html`

dataset decision, 1, 2018-08-24
 prototype back-end, 15
  report writing, 15
  prototype front-end, 20, offset: -5
   front-end write-up, 5
   figures, 10
    editing, 5
     layout, 5
      marketing prep, 10, offset: -5
       web launch to clients, 1, offset: 1
       marketing launch, 1, offset: 1`;
  textarea.style.display = "block";
  textarea.style.boxSizing = "border-box";
  textarea.style.width = "calc(100% + 28px)";
  textarea.style.font = "var(--mono_fonts)";
  textarea.style.minHeight = "60px";
  textarea.style.border = "none";
  textarea.style.padding = "4px 10px";
  textarea.style.margin = "0 -14px";
  textarea.style.background = "rgb(247,247,249)";
  textarea.style.tabSize = 2;
  textarea.onkeypress = event => {
    if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
    let i = textarea.selectionStart;
    let j = textarea.selectionEnd;
    let v = textarea.value;
    if (i === j) {
      let k = 0;
      while (i > 0 && v[--i - 1] !== "\n");
      while (i < j && v[i] === " ") ++i, ++k;
      textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j);
      textarea.selectionStart = textarea.selectionEnd = j + k + 1;
      textarea.dispatchEvent(new CustomEvent("input"));
      event.preventDefault();
    }
  };
  textarea.oninput = () => {
    textarea.style.height = "auto";
    textarea.style.height = `${textarea.scrollHeight}px`;
  };
  yield textarea;
  textarea.oninput();
  yield textarea;
}32:T6ac,{
  let full_container = div()
  full_container.style = "position: relative"
  let calendar_container = div()
  calendar_container.style = `position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(${full_length}, 1fr); box-sizing: border-box;`
  for (let i=0; i<weekdays.length; i++) {
    let day = weekdays[i]
    let day_div = div()
    day_div.style = `grid-column: ${i+1} / span 1; border-right: solid 1px rgba(0,0,0,0.125); border-right: none; height: 100%; box-sizing: border-box; ${i===0&&false ? `border-left: solid 1px rgba(0,0,0,0.125)` : ``}; ${df.isEqual(day, today) ? `background: yellow;` : ``}`
    day_div.title = day;
    calendar_container.appendChild(day_div)
  }
  full_container.appendChild(calendar_container);
  let stages_container = div()
  stages_container.style = `position: relative; display: grid; grid-template-columns: repeat(${full_length}, 1fr);`
  for (let i=0; i<stages.length; i++) {
    let stage = stages[i]
    let day = weekdays[i]
    let stage_div = div()
    let content_div = div(stage.name)
    content_div.style = `white-space: nowrap;`
    stage_div.appendChild(content_div)
    stage_div.style = `grid-column: ${stage.root_offset + 1} / span ${stage.days}; background: ${stringToColour(stage.name)}; font-size: 14px; font-family: monospace; padding: 0 0; word-break: break-word; line-height: 1; height: 36px; box-sizing: border-box; overflow: auto; color: ${colorCheck(stringToColour(stage.name))};`
    stage_div.title = stage.name;
    stage_div.setAttribute('data-day', day)
    stages_container.appendChild(stage_div)
  }
  full_container.appendChild(stages_container)
  return html`${full_container}`
}33:T4fd,calendar = {
  let font_size = 14
  let line_height = 20;
  let padding_y = 2;
  let padding_x = 4;
  let $container = div()
  $container.style = `display: grid; grid-template-columns: repeat(5, 1fr); font-family: monospace; font-size: ${font_size}px; line-height: ${line_height}px; border: solid 1px #000`
  for (let i=0; i<fullweek_weekdays.length; i++) {
    let day = fullweek_weekdays[i]
    let $day = div()
    $day.style = `border: solid 1px black; height: ${(line_height + padding_y * 2) * 5}px`;
    let $date = div(`${months[day.getMonth()]} ${day.getDate().toString().padStart(2,0)}`)
    $date.style = `padding: ${padding_y}px ${padding_x}px; text-transform: uppercase;`;
    $day.appendChild($date)
    for (let j=0; j<stage_ranges.length; j++) {
      let range = stage_ranges[j]
      if (df.isWithinRange(day, range.start, range.end)) {
        let $event = div(range.name)
        let background = stringToColour(range.name)
        let color = "#000"
        $event.style = `background: ${background}; color: ${colorCheck(background)}; padding: ${padding_y}px ${padding_x}px;`
        $day.appendChild($event)
      }
    }
    if (df.isToday(day)) {
      $day.style.background = "yellow"
    }
    $container.append($day)
  }
  return html`${$container}`
}34:T4d5,function getStages(root) {
  let ranges = []
  function traverse(node, prev_end) {
    let next_end
    if (node.name !== undefined) {
      let processed = processNode(node.name)
      let days = parseInt(processed[1])
      if (days === undefined || days.length === 0 || days < 1) {
        days = 1
      }
      if (prev_end === null) { 
        // if it is a root note
        if (processed[2]) {
          // if there is no declared start date set to today
          if (!processed[2].startsWith("offset:")) {
            prev_end = df.differenceInCalendarDays(processed[2], earliest_date)
          }
        }
      }
      if (processed[2] && processed[2].startsWith("offset:")) {
        let offset = parseInt(processed[2].substring("offset:".length));
        prev_end = prev_end + offset
      }
      next_end = prev_end + days
      let range = { name: processed[0], days, root_offset: prev_end } 
      ranges.push(range)
    }
    if (node.children && node.children.length > 0){
      let i;
      let result = null;
      for (let i=0; result == null && i < node.children.length; i++){
        result = traverse(node.children[i], next_end);
      }
      return result;
    }
  }
  traverse(root, null)
  return ranges
}35:[]
2f:{"title":"FF09 Calendar refactor","cells":[{"id":0,"value":"md`# FF09 Calendar refactor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"just_end_date = md`Projected end date: ${df.format(end_date, 'dddd, MMMM Do, YYYY')}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"active_stages = {\n  let active_stages = stage_ranges.filter(range => df.isWithinRange(today, range.start, range.end))\n  if (active_stages.length > 0) {\n    return md`Currently active stages: ${active_stages.map(r => `<span style=\"background: ${stringToColour(r.name)}; color: ${colorCheck(stringToColour(r.name))}\"> ${r.name} </span>`).join(', ')}`\n  } else {\n    return md`There are no currently active stages.`\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`## Source`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`## Waterfall`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`## Calendar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = {\n  const parents = [];\n  const nodes = source.trim().split(/\\n/g);\n  parents.push({children: []});\n  for (let i = 0, n = nodes.length; i < n; ++i) {\n    let parent, depth = nodes[i].match(/^\\s*/)[0].length;\n    while (!(parent = parents[depth])) --depth;\n    if (!parent.children) parent.children = [];\n    parent.children.push(parents[depth + 1] = {name: nodes[i].slice(depth)});\n  }\n  return parents[0].children.length === 1 ? parents[0].children[0] : parents[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"full_length = stages.reduce((max, stage) => { \n  let end = stage.days + stage.root_offset;\n  return Math.max(max, end);\n},0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"raw_days_overshoot = overshoot_full_days(full_length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"raw_days_eachday = df.eachDay(earliest_date, df.addDays(earliest_date, raw_days_overshoot))","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"weekdays = raw_days_eachday.filter(day => !df.isWeekend(day)).slice(0, full_length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"end_date = weekdays[weekdays.length-1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"fullweek_weekdays = {\n  let start = df.addDays(df.startOfWeek(weekdays[0]), 1)\n  let end = df.subDays(df.endOfWeek(weekdays[weekdays.length-1]), 1)\n  return df.eachDay(start, end).filter(date => !df.isWeekend(date))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"function overshoot_full_days(weekdays) { return Math.ceil(weekdays/5) * 7; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"earliest_date = {\n  let root_dates = data.children.map(root => {\n    let date_string = processNode(root.name)[2]\n    if (date_string) {\n      date_string = setDate(date_string)\n    } else {\n      date_string = today;\n    }\n    return date_string\n  })\n  return df.min(...root_dates)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"today = df.startOfDay(now)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"now = {\n  while (true) {\n    const date = new Date(Math.ceil((Date.now() + 1) / 1000) * 1000);\n    yield Promises.when(date, date);\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"function setDate(string) {\n  let values = string.split('-')\n  return new Date(values[0], values[1]-1, values[2], 0, 0, 0, 0)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"stages = getStages(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"stage_ranges = stages.map(stage => {\n  let start_date = weekdays[stage.root_offset]\n  let end_date = weekdays[stage.root_offset + stage.days - 1]\n  return { name: stage.name, start: start_date, end: end_date }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"function processNode(string) {\n  let values = string.split(',')\n  let trimmed = values.map(v => v.trim())\n  return trimmed\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"function randomHex() { return '#'+Math.floor(Math.random()*16777215).toString(16); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"// from https://stackoverflow.com/a/16348977\nstringToColour = function(str) {\n  var hash = 0;\n  for (var i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  var colour = '#';\n  for (var i = 0; i < 3; i++) {\n    var value = (hash >> (i * 8)) & 0xFF;\n    colour += ('00' + value.toString(16)).substr(-2);\n  }\n  return colour;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"function colorCheck(background) { \n  if (chroma(background).luminance() < 0.5) {\n    return \"#fff\"\n  } else {\n    return\"#000\"\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"function div(content) { let divver = document.createElement('div'); content ? divver.innerHTML = content : ''; return divver; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"df = require('https://bundle.run/date-fns@1.29.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}
</article></body></html>