/* global d3 */

/**
 * Adjust SVG size.
 *
 * @param {Selection} svg
 *   An SVG D3 selection.
 *
 * @return {void}
 */
function responsivefy(svg) {
  // get container + svg aspect ratio.
  // node() returns the raw DOM node -> parentNode returns the div.chart.
  const container = d3.select(svg.node().parentNode);
  const width = parseInt(svg.style("width"), 10);
  const height = parseInt(svg.style("height"), 10);
  const aspect = width / height;

  // Get width of container and resize SVG to fit it.
  function resize() {
    let targetWidth = parseInt(container.style("width"), 10);
    svg.attr("width", targetWidth);
    svg.attr("height", Math.round(targetWidth / aspect));
  }

  // Add viewBox and preserveAspectRatio properties,
  // and call resize to that svg resizes on initial page load
  svg.attr("viewBox", "0 0 " + width + " " + height)
    .attr("preserveAspectRatio", "xMinYMid")
    .call(resize);

  // To register multiple listeners for the same event type,
  // you need to add namespace, i.e. 'click.foo'
  // necessary if you call invoke this function for multiples SVGs
  // api docs: https://github.com/mbostock/d3/wiki/Selections#on
  d3.select(window)
    .on("resize." + container.attr("id"), resize);
}