Question

I want to embed some ruby code to adjust the width of a on my html page.

Basically I have a loop in the Html page which looks like this

<% pass_fail.each do |row| %>

<div class="bar bar-success" style="width: 70%;"></div>
<div class="bar bar-warning" style="width: 20%;"></div>
<div class="bar bar-danger" style="width: 10%;"></div>

<% end %>

I want the width of the divs to be something like

((row[1]/(row[1]+row[2]+row[3]))*100)%
((row[2]/(row[1]+row[2]+row[3]))*100)%
((row[3]/(row[1]+row[2]+row[3]))*100)%

Can someone please help me with the exact syntax to embed the code to set the width of the div.

Answer 1

Asuming row is a Array of three ints, use <%= %> to output:

<div style="width:<%= ((row[0].to_f / (row[0] + row[1] + row[2])) * 100) %>%">Div 1</div>
<div style="width:<%= ((row[1].to_f / (row[0] + row[1] + row[2])) * 100) %>%">Div 2</div>
<div style="width:<%= ((row[2].to_f / (row[0] + row[1] + row[2])) * 100) %>%">Div 3</div>

to_f must be used to capture the results since it is between 0 and 1. Can be simplified by summing the array using inject:

<div style="width:<%= ((row[0].to_f / row.inject(:+)) * 100) %>%">Div 1</div>
<div style="width:<%= ((row[1].to_f / row.inject(:+)) * 100) %>%">Div 2</div>
<div style="width:<%= ((row[2].to_f / row.inject(:+)) * 100) %>%">Div 3</div>

Not really see what you will use this for, but I understand it is spectacular.

Unless the sum of row is changing between each iteration, it is recommended to cache the sum where possible to speed up execution.