cur_script = """
<style class="js-load-remove-tag">
.cs-loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: cs-ellipsis steps(3,end) 3250ms infinite;
animation: cs-ellipsis steps(3,end) 3250ms infinite;
content: "\\2026";
width: 0px;
}
@keyframes cs-ellipsis { to { width: 0.9em; } }
@-webkit-keyframes cs-ellipsis { to { width: 0.9em; } }
</style>
<script class="js-load-remove-tag">
\$(".js-load-remove-tag").parent(".output_subarea").css("padding", "0");
</script>
"""
display(HTML(cur_script))
using HTTP
using JSON
get_data(cur_report::AbstractString, cur_api="api.juliatetris.com") =
JSON.parse(String(
HTTP.get("http://$(cur_api)/reports/$(cur_report)").body
))
cur_score_data = get_data("score")
cur_round_data = get_data("round")
@assert cur_score_data["days"] == cur_round_data["days"]
cur_days = cur_score_data["days"]
num_days = length(cur_days)
return
using WebIO
using JSExpr
cur_scope = Scope(imports=[
"https://fonts.googleapis.com/css?family=Roboto",
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"
])
cur_set_types = ["scores", "counts"]
cur_scale_types = ["lin", "log"]
cur_set_observer = Observable(cur_scope, "data-set", first(cur_set_types))
cur_scale_observer = Observable(cur_scope, "data-scale", first(cur_scale_types))
return
function make_buttons(cur_observer::Observable, cur_types::Vector)
cur_buttons = []
for (cur_index, cur_type) in enumerate(cur_types)
cur_class = "btn btn-default"
( cur_index == 1 ) && ( cur_class *= " active" )
push!(cur_buttons,
Node(
:div, cur_type,
attributes=Dict(:class => cur_class, :style => "border-radius: 0;"),
events=Dict("click" => @js (cur_event) -> $cur_observer[] = cur_event.target.innerText)
)
)
end
cur_buttons
end
cur_left_buttons = make_buttons(cur_set_observer, cur_set_types)
cur_right_buttons = make_buttons(cur_scale_observer, cur_scale_types)
return
function toggle_button(cur_action::AbstractString, cur_selector::AbstractString)
cur_js = """
\$("#js-julia-dash $(cur_selector) .btn").removeClass("active");
\$("#js-julia-dash $(cur_selector) .btn:contains('$(cur_action)')").addClass("active");
"""
evaljs(cur_scope, JSString(cur_js))
end
return
function get_cur_data_sets()
cur_data_sets = []
if cur_set_observer.val == "scores"
cur_headers = ["Max Score", "Leaderboard Average"]
push!(cur_data_sets, cur_score_data["max"])
push!(cur_data_sets, cur_score_data["mean"])
elseif cur_set_observer.val =="counts"
cur_headers = ["Round Counts", "Saved Scores"]
push!(cur_data_sets, cur_round_data["count"])
push!(cur_data_sets, cur_score_data["count"])
else
error("Invalid data set selection.")
end
return cur_headers, cur_data_sets
end
return
function get_cur_scale()
if cur_scale_observer.val == "lin"
cur_scale = "linear"
elseif cur_scale_observer.val == "log"
cur_scale = "logarithmic"
else
error("Invalid data scale selection.")
end
cur_scale
end
return
function run_javascript(cur_headers, cur_data_sets, cur_scale)
cur_js = ""
for (cur_index, cur_data) in enumerate(cur_data_sets)
cur_js *= """
var curChart = \$("#js-tetris-chart-$(cur_index)");
var myLineChart = new Chart(curChart, {
type: 'line',
data: {
labels: $(JSON.json(cur_days)),
datasets: [{
data: $(JSON.json(cur_data)),
backgroundColor: [[
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
][$(cur_index-1)]],
borderColor: [[
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)'
][$(cur_index-1)]]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: { unit: 'day' }
}],
yAxes: [{
type: '$(cur_scale)'
}]
},
title: {
display: true,
text: "$(cur_headers[cur_index])"
},
legend: {
display: false
}
}
});
"""
end
evaljs(cur_scope, JSString(cur_js))
end
return
function update_plot()
cur_headers, cur_data_sets = get_cur_data_sets()
cur_scale = get_cur_scale()
run_javascript(cur_headers, cur_data_sets, cur_scale)
end
return
on(cur_set_observer) do cur_action
toggle_button(cur_action, ".js-left-buttons")
update_plot()
end
on(cur_scale_observer) do cur_action
toggle_button(cur_action, ".js-right-buttons")
update_plot()
end
return
cur_script = """
<script class="js-load-remove-tag">
\$(".js-load-message").remove();
\$("#appmode-busy").css("opacity","0");
\$('pre:contains("WebIO: setting up")').parent(".output_subarea").remove();
\$(".js-load-remove-tag").parent(".output_subarea").remove();
</script>
"""
display(HTML(cur_script))
main_node = Node(
:div,
Node(
:div,
Node(
:canvas,
attributes=Dict(:id => "js-tetris-chart-1")
),
attributes=Dict(:class => "col-sm-6", :style => "height: 45vmin;")
),
Node(
:div,
Node(
:canvas,
attributes=Dict(:id => "js-tetris-chart-2")
),
attributes=Dict(:class => "col-sm-6", :style => "height: 45vmin;")
),
attributes=Dict(:class => "row", :style => "margin-top: 3vh;")
)
cur_scope(
Node(
:div,
Node(
:div,
cur_right_buttons...,
attributes=Dict(:class => "js-right-buttons", :style => "float: right;")
),
Node(
:div,
cur_left_buttons...,
attributes=Dict(:class => "js-left-buttons")
),
main_node,
attributes=Dict(:id => "js-julia-dash")
)
)
update_plot()