Alex Basson
4 years ago
parent
5c352671da
commit
15ecf1db0d
@ -0,0 +1,45 @@
|
||||
module VarianceHelper
|
||||
def heading_gutter
|
||||
30
|
||||
end
|
||||
|
||||
def footer_gutter
|
||||
50
|
||||
end
|
||||
|
||||
def measure_row_height
|
||||
40
|
||||
end
|
||||
|
||||
def graph_height(number_of_rows)
|
||||
number_of_rows * measure_row_height + heading_gutter + footer_gutter
|
||||
end
|
||||
|
||||
def graph_background_height(number_of_rows:)
|
||||
graph_height(number_of_rows) - footer_gutter
|
||||
end
|
||||
|
||||
def measure_row_bar_height
|
||||
20
|
||||
end
|
||||
|
||||
def label_padding_right
|
||||
24
|
||||
end
|
||||
|
||||
def label_width_percentage
|
||||
25
|
||||
end
|
||||
|
||||
def graph_width_percentage
|
||||
100 - label_width_percentage
|
||||
end
|
||||
|
||||
def zones
|
||||
%w(warning watch growth approval ideal)
|
||||
end
|
||||
|
||||
def zone_width_percentage
|
||||
100.0/zones.size
|
||||
end
|
||||
end
|
||||
@ -1,72 +0,0 @@
|
||||
<div class="bg-white p-4 border-radius-8">
|
||||
|
||||
<% heading_gutter = 30 %>
|
||||
<% footer_gutter = 50 %>
|
||||
<% measure_row_height = 40 %>
|
||||
<% graph_height = measure_graph_row_presenters.length * measure_row_height + heading_gutter + footer_gutter %>
|
||||
<% graph_background_height = graph_height - footer_gutter %>
|
||||
<% measure_row_bar_height = 20 %>
|
||||
<% label_padding_right = 24 %>
|
||||
|
||||
<svg width="100%" height=<%= graph_height %> 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="5" result="offsetblur"/>
|
||||
<feFlood flood-color="rgb(0, 0, 0)" result="color"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feComposite in2="SourceAlpha" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
<feMergeNode/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>>
|
||||
<g id="scale-headings">
|
||||
<text class="graph-header" x="10%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
|
||||
<text class="graph-header" x="30%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
|
||||
<text class="graph-header" x="50%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth</text>
|
||||
<text class="graph-header" x="70%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval</text>
|
||||
<text class="graph-header" x="90%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
|
||||
</g>
|
||||
|
||||
<g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
|
||||
<rect id="warning-zone" class="fill-warning" x="0%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="watch-zone" class="fill-watch" x="20%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="growth-zone" class="fill-growth" x="40%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="approval-zone" class="fill-approval" x="60%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="ideal-zone" class="fill-ideal" x="80%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<g id="measure-rows">
|
||||
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
|
||||
<%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
|
||||
<text class="font-cabin" x="25%" 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="25%" y=<%= heading_gutter %> width="75%">
|
||||
<%= measure_graph_row_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 %>" />
|
||||
<% end %>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<svg id="key-benchmark" x="25%" y="0" width="75%" height="<%= graph_background_height %>">
|
||||
<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="key-benchmark" x="25%" y="0" width="75%">
|
||||
<g id="legend">
|
||||
<text class="graph-footer" x="60%" y="<%= graph_background_height + (footer_gutter / 2) %>" text-anchor="middle">Benchmark</text>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
@ -0,0 +1,128 @@
|
||||
<div class="bg-white p-4 border-radius-8">
|
||||
|
||||
<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="5" result="offsetblur"/>
|
||||
<feFlood flood-color="rgb(0, 0, 0)" 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) %>
|
||||
>
|
||||
<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 fill-<%= zone %>"
|
||||
x="<%= index * zone_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= zone_width_percentage %>%"
|
||||
height="100%"
|
||||
opacity="0.2"
|
||||
filter="url(#inset-shadow)"
|
||||
/>
|
||||
<% 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>
|
||||
</div>
|
||||
Loading…
Reference in new issue