Omphaloskepsis-2/assets/js/roles-chart.js

const display = {
  "past-unpaid": false,
  "past-paid": true,
  "current-unpaid": true,
  "current-paid": true,
}

Object.keys(display).forEach(key => {
  if (!display[key]) document.getElementById(key).classList.add("legend__button--disabled")
});

google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);

Array.from(document.getElementsByClassName("legend__button")).forEach(
  el => el.addEventListener('click', toggleView, false)
);

/**
 * Changes the filters to apply to the timeline chart.
 */
function toggleView() {
  if (this.classList.contains("legend__button--disabled")) {
    this.classList.remove("legend__button--disabled");
  } else {
    this.classList.add("legend__button--disabled");
  }

  display[this.id] = !display[this.id];

  drawChart();
}

/**
 * Updates the roles displayed within the timeline chart.
 */
function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var rolesTable = new google.visualization.DataTable();

  {{- $past_unpaid := "#FFFFF0" -}}
  {{- $past_paid := "#FCFCA6" -}}
  {{- $current_unpaid := "#BBBBB0" -}}
  {{- $current_paid := "#BCBC7E" -}}

  rolesTable.addColumn({ type: 'string', id: 'Type' });
  rolesTable.addColumn({ type: 'string', id: 'Job Title' });
  rolesTable.addColumn({ type: 'string', id: 'style', role: 'style' });
  rolesTable.addColumn({ type: 'date', id: 'Start' });
  rolesTable.addColumn({ type: 'date', id: 'End' });

  rolesTable.addRows([
  {{ $cvPages := ( where $.Site.Pages "Type" "cv" ) -}}
  {{- range .Pages -}}
    {{- $site_show_redacted := eq $.Site.Params.redact "show" -}}
    {{- $.Scratch.Set "parents" ( slice ) -}}

    {{- /* Concatenates all role parent(s) and organisations(s) */ -}}
    {{- with .Params.organisations -}}
      {{- range . -}}
        {{- range ( where $cvPages "Title" . ) -}}
          {{- $add_redacted := and ( and ( .Params.redact ) ( not $site_show_redacted ) ) ( eq $.Site.Params.redact "black" ) -}}
          {{- if $add_redacted -}}
              {{- $.Scratch.Set "parents" ( $.Scratch.Get "parents" | append "███████████████" ) -}}
          {{- else -}}
            {{- $.Scratch.Set "parents" ( $.Scratch.Get "parents" | append ( ( partial "cv/organisation/get_top_level_ancestor.html" . ) | plainify ) ) -}}
          {{- end -}}
        {{- else -}}
          {{ erroridf "missing-organisation" "Could not find organisation %q (%q)" . $.File.Path }}
        {{- end -}}
      {{- end -}}
      {{- $.Scratch.Set "parents_string" ( delimit ( ( $.Scratch.Get "parents" ) | uniq | sort ) " & " ) -}}
      {{- $.Scratch.Set "organisations_string" ( delimit . " & " ) -}}
    {{- end -}}


    {{- /* Prints a `dataRow` for each role, redacting organisations if necessary */ -}}
    {{- $has_no_parents := le ( len ( $.Scratch.Get "parents" ) ) 0 -}}
    {{- $show_role := not ( and ( or .Params.redact $has_no_parents ) ( not $site_show_redacted ) ) -}}
    {{- $show_role_organisations := not ( eq ( $.Scratch.Get "parents_string" ) ( $.Scratch.Get "organisations_string" ) ) -}}
  
    {{- if $show_role -}}
    [
      {{- /* Top-level parent organisation(s) */ -}}
      "
      {{- with .Params.organisations -}}
        {{- $.Scratch.Get "parents_string" -}}
      {{- end -}}
      ",

      {{- /* Role and (optional) organisation string */ -}}
      "
      {{- if ( and ( .Params.redact ) ( not $site_show_redacted ) ) -}}
        {{- if ( eq $.Site.Params.redact "black" ) -}}
          ███████████████
        {{- end -}}
      {{- else -}}
        {{- .Title | plainify -}}
        {{- if $show_role_organisations -}}
          , {{ $.Scratch.Get "organisations_string" -}}
        {{- end -}}
      {{- end -}}
      ",

      {{- /* Role type (paid/unpaid) */ -}}
      "{{ if .Params.end_date -}}
        {{- if .Params.paid -}}
          {{- $past_paid -}}
        {{- else -}}
          {{- $past_unpaid -}}
        {{- end -}}
      {{- else -}}
        {{- if .Params.paid -}}
          {{- $current_paid -}}
        {{- else -}}
          {{- $current_unpaid -}}
        {{- end -}}
      {{- end }}",

      {{- /* Role start date */ -}}
      new Date("{{ .Date.Format "2006-01-02" }}"), 

      {{- /* Role end date */ -}}
      new Date("
        {{- if .Params.end_date -}}
          {{- .Params.end_date -}}
        {{- else -}}
          {{- now.Format "2006-01-02" -}}
        {{- end -}}
      ")
    ],
    {{- end -}}

    {{- $.Scratch.Delete "parents" -}}
  {{ end -}}
  ]);

  var rolesFilteredView = new google.visualization.DataView(rolesTable);

  var toShow = [];
  if (display["past-unpaid"]) toShow.push("{{ $past_unpaid }}");
  if (display['past-paid']) toShow.push("{{ $past_paid }}");
  if (display['current-unpaid']) toShow.push("{{ $current_unpaid }}");
  if (display['current-paid']) toShow.push("{{ $current_paid }}");

  rolesFilteredView.setRows(rolesFilteredView.getFilteredRows([{ column: 2, test: (value, rowId, columnId, datatable) => {
    return toShow.includes(value);
  }}]));

  var options = {
    title: 'Roles Timeline',
    height: '100%',
    chartArea: {
      width: '94%'
    },
    width: '100%',
  }

  chart.draw(rolesFilteredView, options);
  container.setAttribute("style",`height:${document.querySelector("#timeline > div > div > div > div").offsetHeight}px`);
}