module Spoom::Coverage::D3

def header_script(palette)
  <<~JS
    var parseDate = d3.timeParse("%s");
    function strictnessColor(strictness) {
      switch(strictness) {
        case "ignore":
          return "#{palette.ignore}";
        case "false":
          return "#{palette.false}";
        case "true":
          return "#{palette.true}";
        case "strict":
          return "#{palette.strict}";
        case "strong":
          return "#{palette.strong}";
      }
      return "#{palette.false}";
    }
    function toPercent(value, sum) {
      return value ? Math.round(value * 100 / sum) : 0;
    }
    var tooltip = d3.select("body")
      .append("div")
        .append("div")
          .attr("class", "tooltip");
    function moveTooltip(d) {
      return tooltip
        .style("left", (d3.event.pageX + 20) + "px")
        .style("top", (d3.event.pageY) + "px")
    }
    #{Pie.header_script}
    #{CircleMap.header_script}
    #{Timeline.header_script}
  JS
end

def header_style
  <<~CSS
    svg {
      width: 100%;
      height: 100%;
    }
    .tooltip {
      font: 12px Arial, sans-serif;
      color: #fff;
      text-align: center;
      background: rgba(0, 0, 0, 0.6);
      padding: 5px;
      border: 0px;
      border-radius: 4px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    .label {
      font: 14px Arial, sans-serif;
      font-weight: bold;
      fill: #fff;
      text-anchor: middle;
      pointer-events: none;
    }
    .label .small {
      font-size: 10px;
    }
    #{Pie.header_style}
    #{CircleMap.header_style}
    #{Timeline.header_style}
  CSS
end