denoland-deno/website/app.js

// Copyright 2018 the Deno authors. All rights reserved. MIT license.

export async function getJson(path) {
  return (await fetch(path)).json();
}

export async function getTravisData(
  url = "https://api.travis-ci.com/repos/denoland/deno/builds?event_type=pull_request"
) {
  const res = await fetch(url, {
    headers: {
      Accept: "application/vnd.travis-ci.2.1+json"
    }
  });
  const data = await res.json();
  return data.builds.reverse();
}

function getBenchmarkVarieties(data, benchmarkName) {
  // Look at last sha hash.
  const last = data[data.length - 1];
  return Object.keys(last[benchmarkName]);
}

export function createColumns(data, benchmarkName) {
  const varieties = getBenchmarkVarieties(data, benchmarkName);
  return varieties.map(variety => [
    variety,
    ...data.map(d => {
      if (d[benchmarkName] != null) {
        if (d[benchmarkName][variety] != null) {
          const v = d[benchmarkName][variety];
          if (benchmarkName == "benchmark") {
            const meanValue = v ? v.mean : 0;
            return meanValue || null;
          } else {
            return v;
          }
        }
      }
      return null;
    })
  ]);
}

export function createExecTimeColumns(data) {
  return createColumns(data, "benchmark");
}

export function createThroughputColumns(data) {
  return createColumns(data, "throughput");
}

export function createReqPerSecColumns(data) {
  return createColumns(data, "req_per_sec");
}

export function createBinarySizeColumns(data) {
  const propName = "binary_size";
  const binarySizeNames = Object.keys(data[data.length - 1][propName]);
  return binarySizeNames.map(name => [
    name,
    ...data.map(d => {
      const binarySizeData = d["binary_size"];
      switch (typeof binarySizeData) {
        case "number": // legacy implementation
          return name === "deno" ? binarySizeData : 0;
        default:
          if (!binarySizeData) {
            return null;
          }
          return binarySizeData[name] || null;
      }
    })
  ]);
}

export function createThreadCountColumns(data) {
  const propName = "thread_count";
  const threadCountNames = Object.keys(data[data.length - 1][propName]);
  return threadCountNames.map(name => [
    name,
    ...data.map(d => {
      const threadCountData = d[propName];
      if (!threadCountData) {
        return null;
      }
      return threadCountData[name] || null;
    })
  ]);
}

export function createSyscallCountColumns(data) {
  const propName = "syscall_count";
  const syscallCountNames = Object.keys(data[data.length - 1][propName]);
  return syscallCountNames.map(name => [
    name,
    ...data.map(d => {
      const syscallCountData = d[propName];
      if (!syscallCountData) {
        return null;
      }
      return syscallCountData[name] || null;
    })
  ]);
}

function createTravisCompileTimeColumns(data) {
  return [["duration_time", ...data.map(d => d.duration)]];
}

export function createSha1List(data) {
  return data.map(d => d.sha1);
}

// Formats the byte sizes e.g. 19000 -> 18.55 KB
// Copied from https://stackoverflow.com/a/18650828
export function formatBytes(a, b) {
  if (0 == a) return "0 Bytes";
  var c = 1024,
    d = b || 2,
    e = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
    f = Math.floor(Math.log(a) / Math.log(c));
  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + " " + e[f];
}

/**
 * @param {string} id The id of dom element
 * @param {string[]} categories categories for x-axis values
 * @param {any[][]} columns The columns data
 * @param {function} onclick action on clicking nodes of chart
 * @param {string} yLabel label of y axis
 * @param {function} yTickFormat formatter of y axis ticks
 */
function gen2(
  id,
  categories,
  columns,
  onclick,
  yLabel = "",
  yTickFormat = null
) {
  const xFormat = {
    type: "category",
    show: false,
    categories
  };
  const yFormat = {
    label: yLabel
  };
  if (yTickFormat) {
    yFormat.tick = {
      format: yTickFormat
    };
  }

  c3.generate({
    bindto: id,
    size: {
      height: 300,
      width: window.chartWidth || 375 // TODO: do not use global variable
    },
    data: {
      columns,
      onclick
    },
    axis: {
      x: xFormat,
      y: yFormat
    }
  });
}

export function formatSeconds(t) {
  const a = t % 60;
  const min = Math.floor(t / 60);
  return a < 30 ? `${min} min` : `${min + 1} min`;
}

/**
 * @param dataUrl The url of benchramk data json.
 */
export function drawCharts(dataUrl) {
  drawChartsFromBenchmarkData(dataUrl);
  drawChartsFromTravisData();
}

/**
 * Draws the charts from the benchmark data stored in gh-pages branch.
 */
export async function drawChartsFromBenchmarkData(dataUrl) {
  const data = await getJson(dataUrl);

  const execTimeColumns = createExecTimeColumns(data);
  const throughputColumns = createThroughputColumns(data);
  const reqPerSecColumns = createReqPerSecColumns(data);
  const binarySizeColumns = createBinarySizeColumns(data);
  const threadCountColumns = createThreadCountColumns(data);
  const syscallCountColumns = createSyscallCountColumns(data);
  const sha1List = createSha1List(data);
  const sha1ShortList = sha1List.map(sha1 => sha1.substring(0, 6));

  const viewCommitOnClick = _sha1List => d => {
    window.open(
      `https://github.com/denoland/deno/commit/${_sha1List[d["index"]]}`
    );
  };

  function gen(id, columns, yLabel = "", yTickFormat = null) {
    gen2(
      id,
      sha1ShortList,
      columns,
      viewCommitOnClick(sha1List),
      yLabel,
      yTickFormat
    );
  }

  gen("#exec-time-chart", execTimeColumns, "seconds");
  gen("#throughput-chart", throughputColumns, "seconds");
  gen("#req-per-sec-chart", reqPerSecColumns, "# req/sec");
  gen("#binary-size-chart", binarySizeColumns, "size", formatBytes);
  gen("#thread-count-chart", threadCountColumns, "# threads");
  gen("#syscall-count-chart", syscallCountColumns, "# syscalls");
}

/**
 * Draws the charts from travis' API data.
 */
export async function drawChartsFromTravisData() {
  const viewPullRequestOnClick = _prNumberList => d => {
    window.open(
      `https://github.com/denoland/deno/pull/${_prNumberList[d["index"]]}`
    );
  };

  const travisData = (await getTravisData()).filter(d => d.duration > 0);
  const travisCompileTimeColumns = createTravisCompileTimeColumns(travisData);
  const prNumberList = travisData.map(d => d.pull_request_number);

  gen2(
    "#travis-compile-time-chart",
    prNumberList,
    travisCompileTimeColumns,
    viewPullRequestOnClick(prNumberList),
    "time",
    formatSeconds
  );
}