function populateTable()

in channels_diff.js [44:158]

• 97 lines of code
• 8 McCabe index (conditional complexity)

function populateTable() {
  let property = getOption("property");
  let value = getOption("value");
  if (!property || !value) {
    return;
  }

  let channels = ["nightly", "beta", "release"];

  let results = {};

  Promise.all(
    channels.map((channel, index) =>
      correlations
        .getChannelsPercentage("Firefox", channel, property, value)
        .then((result) => (results[channel] = result))
    )
  ).then(() => {
    let table = document.getElementById("table");
    while (table.rows.length > 1) {
      table.deleteRow(table.rows.length - 1);
    }

    let row = table.insertRow(table.rows.length);

    channels.forEach((channel, index) => {
      let cell = row.insertCell(index);
      cell.appendChild(
        document.createTextNode(
          correlations.toPercentage(
            (results[channel] && results[channel].p) || 0
          ) + " %"
        )
      );
    });

    let svgElem = document.getElementById("image");

    d3.select(svgElem).selectAll("*").remove();

    let margin = { top: 20, right: 300, bottom: 70, left: 300 };
    let width = svgElem.getAttribute("width") - margin.left - margin.right;
    let height = svgElem.getAttribute("height") - margin.top - margin.bottom;

    let x = d3.scale.ordinal().rangeRoundBands([0, width], 0.05);
    let y = d3.scale.linear().range([height, 0]);

    let color = d3.scale.ordinal().range(["black", "blue", "red", "orange"]);

    let xAxis = d3.svg.axis().scale(x).orient("bottom");

    let yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);

    var svg = d3
      .select(svgElem)
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    let data = channels.map((channel) => {
      return {
        channel: channel,
        value: ((results[channel] && results[channel].p) || 0) * 100,
      };
    });

    x.domain(channels);
    y.domain([
      0,
      d3.max(data, function (d) {
        return d.value;
      }),
    ]);

    svg
      .append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(27," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)");

    svg
      .append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 3)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Percentage of users (%)");

    svg
      .selectAll("bar")
      .data(data)
      .enter()
      .append("rect")
      .style("fill", (d) => color(d.channel))
      .attr("x", function (d) {
        return 27 + x(d.channel);
      })
      .attr("width", x.rangeBand())
      .attr("y", function (d) {
        return y(d.value);
      })
      .attr("height", function (d) {
        return height - y(d.value);
      });
  });
}