2c:null 2d:["$","title",null,{"children":"Project timeline calendar-o-matic | Grant Custer | Observable"}] 32:T56d,viewof source = { const textarea = html`

prototype, 20, 2018-08-20
 frontend write-up, 5
 figures, 10
  editing, 5
   layout, 5
    marketing prep, 5
     launch, 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;
}33:T550,{
  let weeks = calendar_weekdays.length/5
  let $container = div()
  $container.style.border = "solid 1px #000"
  for (let i=0; i<weeks; i++) {
    let $week = div()
    $week.style = "display: grid; grid-template-columns: repeat(5, 1fr); font-family: monospace;"
    $container.appendChild($week)
    for (let j=0; j<5; j++) {
      let $day = div()
      $day.style.minHeight = 33 * 5 + 'px'
      $day.style.border = "solid 1px #000"
      let weekday = calendar_weekdays[i * 5 + j]
      let $date = div(`${months[weekday.getMonth()]} ${weekday.getDate().toString().padStart(2,0)}`)
      $date.style = "padding: 4px 8px; background: #ddd; color: #000;"
      $day.appendChild($date)
      for (let k=0; k<ranges.length; k++) {
        let range = ranges[k]
        if (df.isWithinRange(weekday, 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: 4px 8px;`
          $day.appendChild($event)
        }
      }
      if (df.isToday(weekday)) {
        $day.style.background = "yellow"
        let $today = div('today')
        $today.style.padding = "4px 8px"
        $day.appendChild($today)
      }
      $week.appendChild($day)
    }
  }
  return $container
}34:T52f,function getStages(root) {
  let ranges = []
  function traverse(node, start_date) {
    let end_date
    if (node.name !== undefined) {
      let processed = processNode(node.name)
      if (processed[2] !== undefined) {
        // make sure it's got 2 hyphens, else set to today
        if (processed[2].split('-').length-1 === 2) {
          if (df.isValid(new Date(processed[2]))) {
            start_date = processed[2]
          } else {
            start_date = today
          }
        } else {
          start_date = today
        }
      } else {
        // if the root node has no date, set to today
        if (node.name === root.name) start_date = today
      }
      let days = processed[1]
      if (days === undefined || days.length === 0 || parseInt(days) < 1) {
        days = 1
      }
      end_date = df.addDays(start_date, weekToRaw(start_date, days))
      let range = { name: processed[0], start: start_date, end: df.subDays(end_date, 1) } 
      ranges.push(range)
    } else {
      end_date = today
    }
    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], end_date);
      }
      return result;
    }
  }
  traverse(root, null)
  return ranges
}35:[]
30:{"id":"05bde3505bc7584d","slug":"project-timeline-calendar-o-matic","title":"Project timeline calendar-o-matic","thumbnail":"bb9724a6d2dbbbb3b43949f7452136b5a1a2a88c030a37b12fb17e6189baeaab","access_level":"public","create_time":"$D2018-07-23T19:19:18.196Z","update_time":"$D2021-09-28T14:55:10.063Z","view_time":null,"first_public_time":"$D2018-08-08T18:54:31.239Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":990,"publish_version":990,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"60c25796bffe3cee","slug":"calendars","title":"Calendars","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"titling":"auto","title":"Project timeline calendar-o-matic","cells":[{"id":0,"value":"md`# Project timeline calendar-o-matic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"md`This is an editable project timeline calendar. The events are controlled by the textarea below. For each line, the first value is the stage name, the second is the number of WEEKDAYS (5 is one week) it is expected to take. The optional third value is the start date (must be in format YYYY-MM-DD). You can nest stages by indenting using a space. Nesting means that stage will start once its parent stage is completed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`The editable tree textarea is from Mike Bostock's <a href=\"https://beta.observablehq.com/@mbostock/tree-o-matic\" target=\"_blank\">Tree-o-Matic</a>.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md`## Timeline Stages`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"md`For a start date of ${df.format(start_date, 'MMMM Do, YYYY')}, the projected end date is ${df.format(end_date, 'MMMM Do, YYYY')}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"md`<span style=\"background: yellow\">Today is ${df.format(today, 'MMMM Do, YYYY')}.</span>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"{\n  let active_stages = 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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"ranges = getStages(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"start_date = ranges.reduce((earliest, range) => {\n  return df.min(range.start, earliest)\n}, ranges[0].start)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"end_date = ranges.reduce((earliest, range) => {\n  return df.max(range.end, earliest)\n}, today)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"today = df.startOfToday()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"calendar_rawdays = df.eachDay(df.startOfWeek(df.min(today, start_date)), df.endOfWeek(end_date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"calendar_weekdays = filterWeekends(calendar_rawdays)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"function filterWeekends(raw_days) { return raw_days.filter(day => !df.isWeekend(day))} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"function div(content) { let divver = document.createElement('div'); content ? divver.innerHTML = content : ''; return divver; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"function weekToRaw(start_date, weekdays) {\n  weekdays = parseInt(weekdays)\n  let start = start_date\n  if (typeof start_date === 'string') {\n    start = setDate(start_date)\n  }\n  let day = start.getDay() - 1\n  let offset_length = day + weekdays\n  let weeks = Math.floor(offset_length/5)\n  let remainder = offset_length % 5\n  return weeks * 7 - day + remainder\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"df = require('https://bundle.run/date-fns@1.29.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"_  = require('lodash@4.17.10/lodash.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}}
31:"$30:body"
</article></body></html>