index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="shortcut icon" href="rh.png">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Github Actions Data</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> -->

  <style>
    body {
      min-width: 1024px
    }

    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }

    .grid-container {
      display: inline-grid;
      grid-template-columns: repeat(auto-fit, minmax(512px, 1fr));
      grid-auto-flow: row dense;
      padding: 1px;
      width: 100%;
    }

    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 10px;
      text-align: center;
    }

    .wide {
      grid-column: auto / span 2;
      grid-row: auto / span;
    }
  </style>
</head>

<body>
  <h1> Github Actions Stats </h1>

  <div id="show_top_n_text"> Show top actions </div>
  <input type="range" min="1" max="20" value="20" step="1" class="slider" id="show_top_n_trimmer">

  <div id="show_n_months_text"> Number of months to show </div>
  <input type="range" min="1" max="20" value="12" step="1" class="slider" id="show_n_month_trimmer">

  <div id='outer_grid_holder' class="grid-container"> </div>

  <div id="select_actions"> </div>
  <div id="legend"> </div>

  <a href="#">Goto top</a>
  <h4>Data Definitions </h4>
  For each action:
  <ul>
    <li>Name - the owner/repo path to action</li>
    <li>Total - number of times action was referenced in all workflows</li>
    <li>UniqueOwners - number of unique Users or Organizations with workflows using action</li>
    <li>UniqueRepos - number of unique repos with workflows using action</li>
    <li>WorkflowRuns - number of overall workflow runs using action</li>
    <li>UniqueJobs - number of unique workflow jobs using action, eg. multiple jobs per workflow or matrix build</li>
    <li><em>UniqueRepos/UniqueOwners</em> - computed metric which represents the average number of repos a single action
      is used per user.</li>
    <li><em>WorkflowRuns/UniqueRepos</em> - computed metric which represents the average number of runs per repo. </li>
  </ul>

  <div id="debug_raw_json" style="height:300;width:800px;border:2px solid #ccc;"></div>
  <div id="debug_processed_text" style="height:300;width:800px;border:2px solid #ccc;"></div>

  <script type="module">
    import {
      getTextAndUpdate, setInnerHtml,
      parse_csv
    } from './modules/common.js';

    var globalAppConfig = {
      "debug": false,
      "default_months_to_show": 12,
      "months_to_show": 12,
      "default_top_n_actions_to_show": null,
      "top_n_actions_to_show": null,
      "actions_to_show": null
    }
    const params = new URLSearchParams(window.location.search)

   // Chart.register(ChartDataLabels);
    if (params.has("debug")) {
      globalAppConfig.debug = params.get("debug")
    }
    if (params.has("months")) {
      var val = params.get("months")
      globalAppConfig.months_to_show = val
      document.getElementById("show_n_month_trimmer").value = val;
    }
    if (params.has("top")) {
      var val = params.get("top")
      globalAppConfig.top_n_actions_to_show = val
      document.getElementById("show_top_n_trimmer").value = val;

    }
    if (params.has("show")) {
      var val = params.get("show")
      globalAppConfig.actions_to_show = val
    }

    globalAppConfig.initialUrl = window.location;
    globalAppConfig.initialQuery = "";

    function updateWindowsLocation() {
      var prefix = "?"
      var query = ""
      if (globalAppConfig.default_months_to_show !=
        globalAppConfig.months_to_show) {
        query += prefix + "months=" + globalAppConfig.months_to_show
        prefix = "&"
      }
      if (globalAppConfig.default_top_n_actions_to_show !=
        globalAppConfig.top_n_actions_to_show) {
        query += prefix + "top=" + globalAppConfig.top_n_actions_to_show
        prefix = "&"
      }
      if (globalAppConfig.actions_to_show != null && globalAppConfig.actions_to_show.length != 0) {
        query += prefix + "show=" + globalAppConfig.actions_to_show
        prefix = "&"
      }
      history.replaceState({ foo: "bar" }, "Ignored", "index.html" + query)
    }
    //updateWindowsLocation ()

    function createCanvasFor(data, tag, stacked) {
      var id = (stacked ? 'canvas_stack_' : 'canvas_') + tag;
      var title = (stacked ? 'Combined Actions: ' : 'Individual Actions: ') + tag;
      var ctx = document.getElementById(id).getContext('2d');
      var bar = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
          plugins: {
            title: { 
                display: true,
                text: title
            },
            datalabels: { 
              display: true,
            //   formatter: (value, ctx) => { 
            //     if (!stacked) return "" 
            //     // Array of visible datasets :
            //     let datasets = ctx.dataset   
            //     if (ctx.dataIndex > 0) { 
            //         var current= datasets.data[ctx.dataIndex]
            //         var prev= datasets.data[ctx.dataIndex-1] 
            //         var initial= datasets.data[0] 
            //         var m2m = ((current/prev*100) - 100).toFixed(2);
            //         var since0 = ((current/initial*100) - 100).toFixed(2);
            //         if (m2m>0) m2m= "+"+m2m
            //         if (since0>0) since0= "+"+since0
            //         return "m2m:"+m2m+ "% s0"+since0+"%"
            //     } else {
            //       return "0%"
            //     }  
            //   },
            //   anchor: 'end',
              align: 'bottom'
            }, 
            tooltip: {
              callbacks: {
                label: function (context) {
                  var label = context.dataset.label || '';  
                  var thisAction = 0;
                  if (context.parsed.y !== null) {
                    thisAction= context.parsed.y;
                  } 
                  if (!stacked) return label + " : " + thisAction; 
                  var total = 0;
                  for (var stack = 0; stack < context.parsed._stacks.y["_top"]; stack++) {
                    total += context.parsed._stacks.y[stack]
                  }  
                  var pcent = ((thisAction/total*100)).toFixed(2);
                  var labels = []
                  labels.push(tag)
                  labels.push("Total " + tag + " " + total.toFixed(0) + " across all actions") 
                  labels.push(label + " is " + thisAction.toFixed(0) + " or " + pcent + "% of combined totals")
                  return labels;
                },
                footer: function (ctx) {
                  var context = ctx[0]
                  var total = 0;
                  if (stacked) {
                    for (var stack = 0; stack < context.parsed._stacks.y["_top"]; stack++) {
                      total += context.parsed._stacks.y[stack]
                    }
                  }
                  var labels=[] 
                  let datasets = context.dataset   
                  if (context.dataIndex > 0) { 
                    var current= datasets.data[context.dataIndex]
                    var prev= datasets.data[context.dataIndex-1]
                    var initial= datasets.data[0] 
                    
                    console.log ("prev", prev)
                    console.log ("initial", initial)
                    
                    if (prev == 0) prev=current 
                    if (initial == 0) initial=current 

                    var m2m = ((current/prev*100) - 100).toFixed(2);
                    var since0 = ((current/initial*100) - 100).toFixed(2);
                    if (m2m>0) m2m= "+"+m2m
                    if (since0>0) since0= "+"+since0
                    labels.push("Change:")
                    labels.push("From Prev Month: "+ m2m + "%")
                    labels.push("Over " + context.dataIndex + " months " + since0 + "%") 
                  } else {  
                    labels.push("baseline data point")
                  }
                  return labels
                }
              },
            },
          },
          scales: {
            x: {
              stacked: stacked
            },
            y: {
              stacked: stacked
            }
          },
          responsive: true,
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: title
          }
        }
      });
      return bar
    }

    function update_graph(text) {
      var jsondata = parse_csv(text);

      if (globalAppConfig.debug) {
        setInnerHtml("debug_raw_json", '<h4>Raw Data</h4>' + '<pre>' + text + '</pre>');
        setInnerHtml("debug_processed_text", '<h4>JSON Processed</h4>' + '<pre>' + JSON.stringify(jsondata, null, 4) + '</pre>');
      }

      document.title = "Metrics "
        + (jsondata.data[0].Date) + " - " + (jsondata.data[jsondata.data.length - 1].Date)

      jsondata.selectedActions = {}
      var selected = ' <fieldset> <legend>Select Actions to Display</legend>'
      jsondata.action_names.forEach(function (label) {
        var isEnabled = globalAppConfig.actions_to_show == null || globalAppConfig.actions_to_show.includes(label)
        jsondata.selectedActions[label] = isEnabled
        selected +=
          '<input type="checkbox" name="action" checked="'
          + isEnabled
          + '" id="select_label_'
          + label
          + '" value="'
          + label
          + '"/><label for="track">'
          + label + '</label><br />'
      })
      selected += '<hr> <button id="select_all">Select All</button>'
      selected += '<button id="select_none">Select None</button>'
      selected += '</fieldset>'

      setInnerHtml("select_actions", selected);
      var trimmer = document.getElementById("show_top_n_trimmer");
      trimmer.max = jsondata.action_names.length
      jsondata.action_names.forEach(function (label) {
        var input = document.getElementById('select_label_' + label);
        input.checked = jsondata.selectedActions[label]
        input.oninput = function () {
          jsondata.selectedActions[label] = !jsondata.selectedActions[label]
          if (jsondata.selectedActions[label]) {
            trimmer.value++
          } else {
            trimmer.value--
          }
          var total = Object.keys(jsondata.selectedActions).length;
          var totalEnabled = (Object.values(jsondata.selectedActions).filter(function (enabled) { return enabled; })).length;

          trimmer.value = totalEnabled;
          trimmer.max = total;
          jsondata.labels.forEach(function (l) {
            show_graphs(jsondata, l);
          })
          // 
        }
      })


      var delayed_refresh_location = function () {
        updateWindowsLocation()
      }
      var select_all = document.getElementById("select_all");
      select_all.onclick = function () {
        jsondata.action_names.forEach(function (label) {
          var input = document.getElementById('select_label_' + label);
          if (!jsondata.selectedActions[label]) {
            input.checked = true;
            input.oninput()
          }
        })

        setTimeout(delayed_refresh_location, 2000);
      }

      var select_none = document.getElementById("select_none");
      select_none.onclick = function () {
        jsondata.action_names.forEach(function (label) {
          var input = document.getElementById('select_label_' + label);
          if (jsondata.selectedActions[label]) {
            input.checked = false;
            input.oninput()
          }
        })

        setTimeout(delayed_refresh_location, 2000);
      }


      var totalEnabled = (Object.values(jsondata.selectedActions).filter(function (enabled) { return enabled; })).length;
      var canvas_grid = ''
      jsondata.labels.forEach(function (label) {
        canvas_grid += '<div class="grid-item  wide"><canvas class="grid-item " id="canvas_' + label + '" ></canvas></div>';
        if (totalEnabled > 1 && jsondata.skipCombinedForLabel[label] != true ) { 
          canvas_grid += '<div class="grid-item  wide"><canvas class="grid-item " id="canvas_stack_' + label + '" ></canvas></div>';
        }
      })
      setInnerHtml("outer_grid_holder", canvas_grid);
      globalAppConfig.bars = [];
      jsondata.labels.forEach(function (label) {
        globalAppConfig[label] = { labels: [label], datasets: [] };
        globalAppConfig.bars.push(createCanvasFor(globalAppConfig[label], label, false))
        if (totalEnabled > 1 && jsondata.skipCombinedForLabel[label] != true ) {
          globalAppConfig.bars.push(createCanvasFor(globalAppConfig[label], label, true))
        }
      })
      jsondata.labels.forEach(function (label) {
        show_graphs(jsondata, label);
      })
      var trimmer = document.getElementById("show_top_n_trimmer");
      trimmer.oninput = function () {
        showTrimText(jsondata)
        jsondata.labels.forEach(function (l) {
          show_graphs(jsondata, l);
        })
      }
      trimmer.onchange = trimmer.oninput;
      var choosemonths = document.getElementById("show_n_month_trimmer");
      choosemonths.oninput = function () {
        showMonthText(jsondata)
        jsondata.labels.forEach(function (l) {
          show_graphs(jsondata, l);
        })
      }
      choosemonths.onchange = choosemonths.oninput;
    }
    var trimmer = document.getElementById("show_top_n_trimmer");

    function showTrimText(json) {
      var total = Object.keys(json.selectedActions).length;
      var totalEnabled = (Object.values(json.selectedActions).filter(function (enabled) { return enabled; })).length;

      if (trimmer.value > totalEnabled) {
        trimmer.value = totalEnabled;
      }


      var selectedText;
      if (totalEnabled == total) {
        selectedText = total + ' actions (<a href="#legend">Select Subset</a>)';
      } else {
        selectedText = totalEnabled + ' (<a href="#legend">subset selected from ' + total + ' actions </a>)';
      }
      setInnerHtml("show_top_n_text", "Showing top " + trimmer.value + ' of ' + selectedText);
      globalAppConfig.top_n_actions_to_show = trimmer.value
      if (total == totalEnabled) {
        globalAppConfig.actions_to_show = null
      } else {
        var enabled = Object.keys(json.selectedActions).filter(function (action) {
          return json.selectedActions[action];
        })

        var prefix = "";
        var query = ""
        enabled.forEach(function (name) {
          query += prefix + name
          prefix = ','
        })
        if (enabled.length == 0) {
          globalAppConfig.actions_to_show = null
        } else {
          globalAppConfig.actions_to_show = query
        }

      }
      updateWindowsLocation();
    }

    var choosemonths = document.getElementById("show_n_month_trimmer");
    function showMonthText(json) {
      setInnerHtml("show_n_months_text", "Showing last " + choosemonths.value + ' of '
        + choosemonths.max + ' months of data');
      globalAppConfig.months_to_show = choosemonths.value
      updateWindowsLocation();
    }
    function show_graphs(json, columnToShow) {
      var map = {};
      showTrimText(json)
      showMonthText(json)
      var sortMapIdx = trimmer.value - 1; // show all  
      json.action_names.forEach(function (name) {
        if (!json.selectedActions[name]) {
          sortMapIdx++
        }
      })
      var namesToShow = json.action_names.filter(function (name) {
        return json.selectedActions[name]
          && json.sortMap[name] <= sortMapIdx
      });
      var dataToShow = json.data.filter(function (e) {
        return json.selectedActions[e.Name]
          && json.sortMap[e.Name] <= sortMapIdx
      });

      var cindex = 0;
      var colours = {}
      json.action_names.forEach(function (name) {
        colours[name] = json.graph_colours[cindex++ % json.graph_colours.length]
      })
      namesToShow.forEach(function (name) {
        map[name] = {};
        json.action_dates.forEach(function (date) { map[name][date] = 0; })
      })
      dataToShow.forEach(function (element) {
        map[element.Name][element.Date] = element[columnToShow]
      })
      var choosemonths = document.getElementById("show_n_month_trimmer");
      var monthstoshow = choosemonths.value;
      if (choosemonths.max > json.action_dates.length) {
        choosemonths.max = json.action_dates.length;
      }
      var sliceOff = 0;
      if (monthstoshow < json.action_dates.length) {
        sliceOff = json.action_dates.length - monthstoshow
      }
      var barChartData = globalAppConfig[columnToShow];
      barChartData.labels = json.action_dates.slice(sliceOff);
      barChartData.datasets.length = 0;
      namesToShow.forEach(function (name) {
        var data = Object.values(map[name])
        var trimmed_data = data.slice(sliceOff)
        var colour = colours[name]
        barChartData.datasets.push({
          label: name,
          backgroundColor: Chart.helpers.color(colour).alpha(0.7).rgbString(),
          borderColor: colour,
          borderWidth: 1,
          data: trimmed_data
        })
      })
      globalAppConfig.bars.forEach(function (bar) {
        bar.update();
      })
    }

    window.onload = function () {
      getTextAndUpdate('data.csv', update_graph, function () {
        alert("error happened fetching data")
      });
    };


  </script>
</body>

</html>