{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Julia Dash Binder\n",
"\n",
"A binder example demonstrating how to make a Julia notebook in appmode\n",
"\n",
"-------\n",
"\n",
"This should only take a minute."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"cur_script = \"\"\"\n",
" \n",
"\n",
" \n",
"\"\"\"\n",
"\n",
"display(HTML(cur_script))"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"using HTTP\n",
"using JSON"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"get_data(cur_report::AbstractString, cur_api=\"api.juliatetris.com\") = \n",
" JSON.parse(String(\n",
" HTTP.get(\"http://$(cur_api)/reports/$(cur_report)\").body\n",
" ))\n",
"\n",
"cur_score_data = get_data(\"score\")\n",
"cur_round_data = get_data(\"round\")\n",
"\n",
"@assert cur_score_data[\"days\"] == cur_round_data[\"days\"]\n",
"\n",
"cur_days = cur_score_data[\"days\"]\n",
"num_days = length(cur_days)\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"using WebIO\n",
"using JSExpr"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"cur_scope = Scope(imports=[\n",
" \"https://fonts.googleapis.com/css?family=Roboto\",\n",
" \"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js\"\n",
"])\n",
"\n",
"cur_set_types = [\"scores\", \"counts\"]\n",
"\n",
"cur_scale_types = [\"lin\", \"log\"]\n",
"\n",
"cur_set_observer = Observable(cur_scope, \"data-set\", first(cur_set_types))\n",
"\n",
"cur_scale_observer = Observable(cur_scope, \"data-scale\", first(cur_scale_types))\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"function make_buttons(cur_observer::Observable, cur_types::Vector)\n",
" cur_buttons = []\n",
" \n",
" for (cur_index, cur_type) in enumerate(cur_types)\n",
" cur_class = \"btn btn-default\"\n",
" ( cur_index == 1 ) && ( cur_class *= \" active\" )\n",
" \n",
" push!(cur_buttons,\n",
" Node(\n",
" :div, cur_type, \n",
" attributes=Dict(:class => cur_class, :style => \"border-radius: 0;\"),\n",
" events=Dict(\"click\" => @js (cur_event) -> $cur_observer[] = cur_event.target.innerText)\n",
" )\n",
" )\n",
" end\n",
" \n",
" cur_buttons\n",
"end\n",
"\n",
"cur_left_buttons = make_buttons(cur_set_observer, cur_set_types)\n",
"cur_right_buttons = make_buttons(cur_scale_observer, cur_scale_types)\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"function toggle_button(cur_action::AbstractString, cur_selector::AbstractString)\n",
" cur_js = \"\"\"\n",
" \\$(\"#js-julia-dash $(cur_selector) .btn\").removeClass(\"active\");\n",
" \\$(\"#js-julia-dash $(cur_selector) .btn:contains('$(cur_action)')\").addClass(\"active\"); \n",
" \"\"\"\n",
" \n",
" evaljs(cur_scope, JSString(cur_js))\n",
"end\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"function get_cur_data_sets()\n",
" cur_data_sets = []\n",
" \n",
" if cur_set_observer.val == \"scores\"\n",
" cur_headers = [\"Max Score\", \"Leaderboard Average\"]\n",
" push!(cur_data_sets, cur_score_data[\"max\"])\n",
" push!(cur_data_sets, cur_score_data[\"mean\"])\n",
" elseif cur_set_observer.val ==\"counts\"\n",
" cur_headers = [\"Round Counts\", \"Saved Scores\"]\n",
" push!(cur_data_sets, cur_round_data[\"count\"])\n",
" push!(cur_data_sets, cur_score_data[\"count\"])\n",
" else\n",
" error(\"Invalid data set selection.\")\n",
" end\n",
" \n",
" return cur_headers, cur_data_sets\n",
"end\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"function get_cur_scale()\n",
" if cur_scale_observer.val == \"lin\"\n",
" cur_scale = \"linear\"\n",
" elseif cur_scale_observer.val == \"log\"\n",
" cur_scale = \"logarithmic\"\n",
" else\n",
" error(\"Invalid data scale selection.\")\n",
" end \n",
" \n",
" cur_scale\n",
"end\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"function run_javascript(cur_headers, cur_data_sets, cur_scale)\n",
" cur_js = \"\"\n",
" \n",
" for (cur_index, cur_data) in enumerate(cur_data_sets)\n",
" cur_js *= \"\"\"\n",
" var curChart = \\$(\"#js-tetris-chart-$(cur_index)\");\n",
" \n",
" var myLineChart = new Chart(curChart, {\n",
" type: 'line',\n",
" data: {\n",
" labels: $(JSON.json(cur_days)),\n",
" datasets: [{\n",
" data: $(JSON.json(cur_data)),\n",
" backgroundColor: [[\n",
" 'rgba(255, 99, 132, 0.2)',\n",
" 'rgba(54, 162, 235, 0.2)'\n",
" ][$(cur_index-1)]],\n",
" borderColor: [[\n",
" 'rgba(255,99,132,1)',\n",
" 'rgba(54, 162, 235, 1)'\n",
" ][$(cur_index-1)]]\n",
" }]\n",
" },\n",
" options: {\n",
" scales: {\n",
" xAxes: [{\n",
" type: 'time',\n",
" time: { unit: 'day' }\n",
" }],\n",
" yAxes: [{\n",
" type: '$(cur_scale)'\n",
" }]\n",
" },\n",
" title: {\n",
" display: true,\n",
" text: \"$(cur_headers[cur_index])\"\n",
" },\n",
" legend: {\n",
" display: false\n",
" }\n",
" }\n",
" });\n",
" \"\"\"\n",
" end\n",
" \n",
" evaljs(cur_scope, JSString(cur_js))\n",
"end\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"function update_plot()\n",
" cur_headers, cur_data_sets = get_cur_data_sets()\n",
" \n",
" cur_scale = get_cur_scale()\n",
" \n",
" run_javascript(cur_headers, cur_data_sets, cur_scale)\n",
"end\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"on(cur_set_observer) do cur_action\n",
" toggle_button(cur_action, \".js-left-buttons\")\n",
" update_plot()\n",
"end\n",
"\n",
"on(cur_scale_observer) do cur_action\n",
" toggle_button(cur_action, \".js-right-buttons\")\n",
" update_plot()\n",
"end\n",
"\n",
"return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"cur_script = \"\"\"\n",
" \n",
"\"\"\"\n",
"\n",
"display(HTML(cur_script))"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"main_node = Node(\n",
" :div,\n",
" Node(\n",
" :div,\n",
" Node(\n",
" :canvas,\n",
" attributes=Dict(:id => \"js-tetris-chart-1\")\n",
" ),\n",
" attributes=Dict(:class => \"col-sm-6\", :style => \"height: 45vmin;\")\n",
" ),\n",
" Node(\n",
" :div,\n",
" Node(\n",
" :canvas,\n",
" attributes=Dict(:id => \"js-tetris-chart-2\")\n",
" ),\n",
" attributes=Dict(:class => \"col-sm-6\", :style => \"height: 45vmin;\")\n",
" ),\n",
" attributes=Dict(:class => \"row\", :style => \"margin-top: 3vh;\")\n",
")\n",
"\n",
"cur_scope(\n",
" Node(\n",
" :div,\n",
" Node(\n",
" :div,\n",
" cur_right_buttons...,\n",
" attributes=Dict(:class => \"js-right-buttons\", :style => \"float: right;\")\n",
" ),\n",
" Node(\n",
" :div,\n",
" cur_left_buttons...,\n",
" attributes=Dict(:class => \"js-left-buttons\")\n",
" ),\n",
" main_node,\n",
" attributes=Dict(:id => \"js-julia-dash\")\n",
" )\n",
")"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"update_plot()"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Julia 0.6.2",
"language": "julia",
"name": "julia-0.6"
},
"language_info": {
"file_extension": ".jl",
"mimetype": "application/julia",
"name": "julia",
"version": "0.6.2"
}
},
"nbformat": 4,
"nbformat_minor": 2
}