<svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">

  <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
    <feComponentTransfer in=SourceAlpha>
      <feFuncA type="table" tableValues="1 0"/>
    </feComponentTransfer>
    <feGaussianBlur stdDeviation="4"/>
    <feOffset dx="0" dy="0" result="offsetblur"/>
    <feFlood flood-color="rgb(62, 58, 56, 0.25)" result="color"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feComposite in2="SourceAlpha" operator="in"/>
    <feMerge>
      <feMergeNode in="SourceGraphic"/>
      <feMergeNode/>
    </feMerge>
  </filter>

  <svg
    id="graph-background"
    x="<%= label_width_percentage %>%"
    y="0"
    width="<%= graph_width_percentage %>%"
    height=<%= graph_background_height(number_of_rows: presenters.size) %>
    filter="url(#inset-shadow)"
  >
    <g id="zone-headings">
      <%= zones.each_with_index do |zone, index| %>
        <text
          class="zone-header"
          x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
          y="<%= heading_gutter / 2 %>"
          text-anchor="middle"
          dominant-baseline="middle"
        >
          <%= zone.capitalize %>
        </text>
      <% end %>
    </g>

    <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
      <%= zones.each_with_index do |zone, index| %>
        <rect
          id="<%= zone %>-zone"
          class="zone-background bg-fill-<%= zone %>"
          x="<%= index * zone_width_percentage %>%"
          y="0"
          width="<%= zone_width_percentage %>%"
          height="100%"
          stroke="#CECECE"
          stroke-width="1"
          />
      <% end %>
    </g>
  </svg>

  <g id="measure-rows">
    <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
      <%= presenters.each_with_index do |presenter, index| %>
        <text
          class="font-cabin"
          x="<%= label_width_percentage %>%"
          dx="<%= -1 * label_padding_right %>"
          y="<%= index * measure_row_height + measure_row_height / 2 %>"
          text-anchor="end"
          dominant-baseline="middle"
        >
          <%= presenter.measure_name %>
        </text>
      <% end %>
    </svg>

    <svg
      id="measure-row-bars"
      x="<%= label_width_percentage %>%"
      y="<%= heading_gutter %>"
      width="<%= graph_width_percentage %>%"
    >
      <%= presenters.each_with_index do |presenter, index| %>
        <rect
          class="measure-row-bar <%= presenter.bar_color %>"
          x="<%= presenter.x_offset %>"
          y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
          width="<%= presenter.bar_width %>"
          height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
          stroke="none"
          />
      <% end %>
    </svg>
  </g>

  <svg
    id="key-benchmark"
    x="<%= label_width_percentage %>%"
    y="0"
    width="<%= graph_width_percentage %>%"
    height="<%= graph_background_height(number_of_rows: presenters.size) %>"
  >
    <g transform="translate(0, <%= heading_gutter %>)">
      <rect
        id="key-benchmark"
        x="60%"
        transform="translate(-1, 0)"
        y="0"
        width="4"
        height="100%"
        fill="black"
        />
    </g>
  </svg>

  <svg
    id="legend"
    x="<%= label_width_percentage %>%"
    y="0"
    width="<%= graph_width_percentage %>%"
  >
    <text
      class="graph-footer"
      x="60%"
      y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>"
      text-anchor="middle"
    >
      Benchmark
    </text>
  </svg>
</svg>
