Permalink
Browse files

Add option to defer chart creation until after page load

  • Loading branch information...
buren committed Sep 30, 2018
1 parent 99b6940 commit a643b78916bc26a3c8ac5af21beb1e0879f75b11
Showing with 65 additions and 8 deletions.
  1. +37 −4 lib/chartkick.ex
  2. +28 −4 test/chartkick_test.exs
@@ -21,21 +21,29 @@ defmodule Chartkick do
height = Keyword.get(options, :height, "300px")
width = Keyword.get(options, :width, "100%")
only = Keyword.get(options, :only)
defer = Keyword.get(options, :defer, false)
case only do
:html -> chartkick_tag(id, height, width)
:script -> chartkick_script(klass, id, data_source, options_json(options))
:script -> chartkick_script(klass, id, data_source, options_json(options), defer)
_ -> """
#{ chartkick_tag(id, height, width) }
#{ chartkick_script(klass, id, data_source, options_json(options)) }
#{ chartkick_script(klass, id, data_source, options_json(options), defer) }
"""
end
end
EEx.function_from_string(
:def,
:chartkick_script,
~s[<script type="text/javascript">new Chartkick.<%= klass %>('<%= id %>', <%= data_source %>, <%= options_json %>);</script>],
~w(klass id data_source options_json)a
~s[<script type="text/javascript">
<%= if defer do
chartkick_defer_create_js(klass, id, data_source, options_json)
else
chartkick_create_js(klass, id, data_source, options_json)
end
%>
</script>],
~w(klass id data_source options_json defer)a
)
EEx.function_from_string(
@@ -45,6 +53,31 @@ defmodule Chartkick do
~w(id height width)a
)
EEx.function_from_string(
:def,
:chartkick_create_js,
~s[new Chartkick.<%= klass %>('<%= id %>', <%= data_source %>, <%= options_json %>);],
~w(klass id data_source options_json)a
)
EEx.function_from_string(
:def,
:chartkick_defer_create_js,
~s[
(function() {
var createChart = function() { <%= chartkick_create_js(klass, id, data_source, options_json) %> };
if (window.addEventListener) {
window.addEventListener("load", createChart, true);
} else if (window.attachEvent) {
window.attachEvent("onload", createChart);
} else {
createChart();
}
})();
],
~w(klass id data_source options_json)a
)
@options ~w(colors curve dataset decimal discrete donut download label legend library max messages min points prefix refresh stacked suffix thousands title xtitle xtype ytitle)a
defp options_json(opts) do
opts
@@ -94,26 +94,44 @@ defmodule ChartkickTest do
end
test "chartkick_script contains script open tag" do
script = Chartkick.chartkick_script("", "", "{}", "{}")
script = Chartkick.chartkick_script("", "", "{}", "{}", false)
expected = "<script type=\"text/javascript\">"
assert String.contains?(script, expected)
end
test "chartkick_script ends with closing script tag" do
script = Chartkick.chartkick_script("", "", "{}", "{}")
script = Chartkick.chartkick_script("", "", "{}", "{}", false)
expected = "</script>"
assert String.ends_with?(script, expected)
end
test "chartkick_script defer adds event listener JS code" do
script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", true)
expected = "window.addEventListener(\"load\", createChart, true);"
assert String.contains?(script, expected)
end
test "chartkick_script defer adds createChart JS function" do
script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", true)
expected = "var createChart = function() { new Chartkick.LineChart('', {}, {}); };"
assert String.contains?(script, expected)
end
test "chartkick_script defer returns script with correct chart class" do
script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", true)
expected = "new Chartkick.LineChart"
assert String.contains?(script, expected)
end
test "chartkick_script returns script with correct chart class" do
script = Chartkick.chartkick_script("LineChart", "", "{}", "{}")
script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", false)
expected = "new Chartkick.LineChart"
assert String.contains?(script, expected)
end
test "chartkick_script returns script with custom id set" do
id = "my-chart-id"
script = Chartkick.chartkick_script("klass", id, "{}", "{}")
script = Chartkick.chartkick_script("klass", id, "{}", "{}", false)
expected = "new Chartkick.klass('#{id}"
assert String.contains?(script, expected)
end
@@ -124,6 +142,12 @@ defmodule ChartkickTest do
assert String.contains?(script, expected)
end
test "chartkick_chart with chart defer option" do
script = Chartkick.chartkick_chart("", "{}", defer: true)
expected = "window.addEventListener(\"load\", createChart, true);"
assert String.contains?(script, expected)
end
test "chartkick_chart with chart library option" do
script = Chartkick.chartkick_chart("", "{}", library: %{ backgroundColor: "#eee" })
expected = "{\"library\":{\"backgroundColor\":\"#eee\"}}"

0 comments on commit a643b78

Please sign in to comment.