chartkick 3.3.1 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d2deed8ea6acea7a2d4e68d7a0adfb2a396ff685ddd4763a6e7dc7cc9f981b5
-  data.tar.gz: 8c1502d6b8a5b2feda3727c23d0a39e14c1c667b4bc3856f3f106e662490517d
+  metadata.gz: d9ca3fe125f71ef5a1a21a191a03244b9235396f4c72f4d8e742f7d1a3feaa98
+  data.tar.gz: d7da49117fa84b8525bf76acc421b22e71a0a38a2f2e798c182f96f0d6780a60
 SHA512:
-  metadata.gz: 6b662ba0dea0a3c8e116fa6428bc52bd4288a301d20395f9671a3e478199c30278db020043c534f2edd62f0971fb5a7f4fa3608136d23b40103930afa59032d2
-  data.tar.gz: 78d2f5473da5ce6b60a68eea76bb848339f4a77981595d9bc693e6e2fd83f9010f2ce6628570c7d034140e2c1416eda246d85fcae533a7d177d3ab4ef01e8281
+  metadata.gz: b00a3accac3e738dc1d0fa7480d162002f5302a8e725d28bfcd3c455514fa79080559b01cfc8a897c44a8d551fdfad3b80fb39a98a9b69671ec8dfa9c2d082e4
+  data.tar.gz: 5a1ccaf63c5bbd240e6ef7a14e240992387cc16c7ce43e6c1b3eab8cb1b632046adbea632db17a96194a21e6e7ce2427d1997ca5734541d51b3c6d2e506a3a8f

data/CHANGELOG.md

@@ -1,7 +1,36 @@
+## 4.0.0 (2021-04-04)
+
+- Added support for Chart.js 3
+- Added `loading` option
+- Made charts deferrable by default
+- Set `nonce` automatically when present
+- Prefer `empty` over `messages: {empty: ...}`
+- Removed support for Ruby < 2.6 and Rails < 5.2
+
+Breaking changes
+
+- Removed support for Chart.js 2
+
+## 3.4.2 (2020-10-20)
+
+- Updated Chart.js to 2.9.4
+
+## 3.4.1 (2020-10-06)
+
+- Relaxed validation for `width` and `height` options
+
+## 3.4.0 (2020-08-04)
+
+- Fixed CSS injection with `width` and `height` options - [more info](https://github.com/ankane/chartkick/issues/546)
+
+## 3.3.2 (2020-07-23)
+
+- Updated Chartkick.js to 3.2.1
+
 ## 3.3.1 (2019-12-26)
 
 - Updated Chart.js to 2.9.3
-- Fixed deprecating warnings in Ruby 2.7
+- Fixed deprecation warnings in Ruby 2.7
 
 ## 3.3.0 (2019-11-09)
 
@@ -19,7 +48,7 @@
 
 ## 3.2.0 (2019-06-04)
 
-- Fixed XSS vulnerability - see [#488](https://github.com/ankane/chartkick/issues/488)
+- Fixed XSS vulnerability - [more info](https://github.com/ankane/chartkick/issues/488)
 
 ## 3.1.0 (2019-05-26)
 

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2013-2019 Andrew Kane
+Copyright (c) 2013-2021 Andrew Kane
 
 MIT License
 

data/README.md

@@ -4,13 +4,17 @@ Create beautiful JavaScript charts with one line of Ruby. No more fighting with
 
 [See it in action](https://chartkick.com)
 
-:fire: For admin charts and dashboards, check out [Blazer](https://github.com/ankane/blazer/)
+**Chartkick 4.0 was recently released** - see [how to upgrade](#upgrading)
+
+:fire: For admin charts and dashboards, check out [Blazer](https://github.com/ankane/blazer/), and for advanced visualizations, check out [Vega](https://github.com/ankane/vega)
 
 :two_hearts: A perfect companion to [Groupdate](https://github.com/ankane/groupdate), [Hightop](https://github.com/ankane/hightop), and [ActiveMedian](https://github.com/ankane/active_median)
 
+[![Build Status](https://github.com/ankane/chartkick/workflows/build/badge.svg?branch=master)](https://github.com/ankane/chartkick/actions)
+
 ## Quick Start
 
-Add this line to your application's Gemfile:
+Add this line to your application’s Gemfile:
 
 ```ruby
 gem "chartkick"
@@ -19,14 +23,13 @@ gem "chartkick"
 For Rails 6 / Webpacker, run:
 
 ```sh
-yarn add chartkick chart.js
+yarn add chartkick
 ```
 
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick")
-require("chart.js")
+require("chartkick/chart.js")
 ```
 
 For Rails 5 / Sprockets, in `app/assets/javascripts/application.js`, add:
@@ -36,7 +39,7 @@ For Rails 5 / Sprockets, in `app/assets/javascripts/application.js`, add:
 //= require Chart.bundle
 ```
 
-This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
+This sets up Chartkick with [Chart.js](https://www.chartjs.org/). For other charting libraries, see [detailed instructions](#installation).
 
 ## Charts
 
@@ -206,12 +209,6 @@ Specify legend position
 <%= line_chart data, legend: "bottom" %>
 ```
 
-Defer chart creation until after the page loads
-
-```erb
-<%= line_chart data, defer: true %>
-```
-
 Donut chart
 
 ```erb
@@ -260,16 +257,22 @@ Show insignificant zeros, useful for currency - *Chart.js, Highcharts*
 <%= line_chart data, round: 2, zeros: true %>
 ```
 
-Friendly byte sizes - *Chart.js 2.8+*
+Friendly byte sizes
 
 ```erb
 <%= line_chart data, bytes: true %>
 ```
 
+Show a message when data is loading
+
+```erb
+<%= line_chart data, loading: "Loading..." %>
+```
+
 Show a message when data is empty
 
 ```erb
-<%= line_chart data, messages: {empty: "No data"} %>
+<%= line_chart data, empty: "No data" %>
 ```
 
 Refresh data from a remote source every `n` seconds
@@ -308,7 +311,7 @@ Chartkick.options = {
 Customize the html
 
 ```ruby
-Chartkick.options[:html] = '<div id="%{id}" style="height: %{height};">Loading...</div>'
+Chartkick.options[:html] = '<div id="%{id}" style="height: %{height};">%{loading}</div>'
 ```
 
 You capture the JavaScript in a content block with:
@@ -323,7 +326,7 @@ Then, in your layout, use:
 <%= yield :charts_js %>
 ```
 
-> For Padrino, use `yield_content` instead of `yield`
+For Padrino, use `yield_content` instead of `yield`.
 
 This is great for including all of your JavaScript at the bottom of the page.
 
@@ -370,9 +373,7 @@ If you want to use the charting library directly, get the code with:
 <%= line_chart data, code: true %>
 ```
 
-The code will be logged to the JavaScript console.
-
-> JavaScript functions cannot be logged, so it may not be identical.
+The code will be logged to the JavaScript console. JavaScript functions cannot be logged, so it may not be identical.
 
 ### Download Charts
 
@@ -384,7 +385,7 @@ Give users the ability to download charts. It all happens in the browser - no se
 <%= line_chart data, download: true %>
 ```
 
-> Safari will open the image in a new window instead of downloading.
+Safari will open the image in a new window instead of downloading.
 
 Set the filename
 
@@ -418,21 +419,20 @@ Next, choose your charting library.
 - [Google Charts](#google-charts)
 - [Highcharts](#highcharts)
 
-> In the instructions below, `application.js` must be included **before** the charts in your views, unless using the `:content_for` option.
+In the instructions below, `application.js` must be included **before** the charts in your views, unless using the `:content_for` option.
 
 ### Chart.js
 
 For Rails 6 / Webpacker, run:
 
 ```sh
-yarn add chartkick chart.js
+yarn add chartkick
 ```
 
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick")
-require("chart.js")
+require("chartkick/chart.js")
 ```
 
 For Rails 5 / Sprockets, in `app/assets/javascripts/application.js`, add:
@@ -487,7 +487,7 @@ yarn add chartkick highcharts
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick").use(require("highcharts"))
+require("chartkick/highcharts")
 ```
 
 For Rails 5 / Sprockets, download [highcharts.js](https://code.highcharts.com/highcharts.js) into `vendor/assets/javascripts` (or use `yarn add highcharts` in Rails 5.1+), and in `app/assets/javascripts/application.js`, add:
@@ -505,6 +505,27 @@ Download [chartkick.js](https://raw.githubusercontent.com/ankane/chartkick/maste
 <script src="chartkick.js"></script>
 ```
 
+Then include the charting library.
+
+Chart.js - download [Chart.js](https://unpkg.com/chart.js@3/dist/chart.js) and the [date-fns adapter bundle](https://unpkg.com/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.js)
+
+```html
+<script src="chart.js"></script>
+<script src="chartjs-adapter-date-fns.bundle.js"></script>
+```
+
+Google Charts
+
+```html
+<script src="https://www.gstatic.com/charts/loader.js"></script>
+```
+
+Highcharts - download [highcharts.js](https://code.highcharts.com/highcharts.js)
+
+```html
+<script src="highcharts.js"></script>
+```
+
 ### Multiple Libraries
 
 If more than one charting library is loaded, choose between them with:
@@ -562,6 +583,12 @@ Redraw the chart with:
 chart.redraw()
 ```
 
+Destroy the chart with:
+
+```javascript
+chart.destroy()
+```
+
 Loop over charts with:
 
 ```javascript
@@ -587,23 +614,28 @@ Check out [chartkick.js](https://github.com/ankane/chartkick.js)
 
 ## Upgrading
 
-### 3.0
+### 4.0
 
-Breaking changes
+If you use Sprockets, update the gem and you’re good to go!
 
-- Removed support for Rails < 4.2
-- Removed chartkick.js from asset precompile (no longer needed)
-- Removed `xtype` option - numeric axes are automatically detected
-- Removed `window.Chartkick = {...}` way to set config - use `Chartkick.configure` instead
-- Removed support for the Google Charts jsapi loader - use loader.js instead
+If you use Webpacker, run:
 
-### 2.0
+```sh
+yarn upgrade chartkick --latest
+```
 
-Breaking changes
+If you use Chart.js with Webpacker, in `app/javascript/packs/application.js`, change:
 
-- Chart.js is now the default adapter if multiple are loaded - yay open source!
-- Axis types are automatically detected - no need for `discrete: true`
-- Better date support - dates are no longer treated as UTC
+```js
+require("chartkick")
+require("chart.js")
+```
+
+to:
+
+```js
+require("chartkick/chart.js")
+```
 
 ## Credits
 
@@ -613,8 +645,6 @@ Chartkick uses [iso8601.js](https://github.com/Do/iso8601.js) to parse dates and
 
 View the [changelog](https://github.com/ankane/chartkick/blob/master/CHANGELOG.md)
 
-Chartkick follows [Semantic Versioning](https://semver.org/)
-
 ## Contributing
 
 Everyone is encouraged to help improve this project. Here are a few ways you can help:
@@ -623,3 +653,12 @@ Everyone is encouraged to help improve this project. Here are a few ways you can
 - Fix bugs and [submit pull requests](https://github.com/ankane/chartkick/pulls)
 - Write, clarify, or fix documentation
 - Suggest or add new features
+
+To get started with development:
+
+```sh
+git clone https://github.com/ankane/chartkick.git
+cd chartkick
+bundle install
+bundle exec rake test
+```

data/lib/chartkick.rb

@@ -1,3 +1,5 @@
+# modules
+require "chartkick/enumerable"
 require "chartkick/helper"
 require "chartkick/version"
 
@@ -18,29 +20,3 @@ module Chartkick
   end
   self.options = {}
 end
-
-# for multiple series
-# use Enumerable so it can be called on arrays
-module Enumerable
-  def chart_json
-    if is_a?(Hash)
-      if (key = keys.first) && key.is_a?(Array) && key.size == 2
-        group_by { |k, _v| k[0] }.map do |name, data|
-          {name: name, data: data.map { |k, v| [k[1], v] }}
-        end
-      else
-        to_a
-      end
-    elsif is_a?(Array)
-      map do |v|
-        if v.is_a?(Hash) && v[:data].is_a?(Hash)
-          v = v.dup
-          v[:data] = v[:data].to_a
-        end
-        v
-      end
-    else
-      self
-    end.to_json
-  end
-end

data/lib/chartkick/enumerable.rb

@@ -0,0 +1,25 @@
+# for both multiple series and
+# making sure hash order is preserved in JavaScript
+module Enumerable
+  def chart_json
+    if is_a?(Hash)
+      if (key = keys.first) && key.is_a?(Array) && key.size == 2
+        group_by { |k, _v| k[0] }.map do |name, data|
+          {name: name, data: data.map { |k, v| [k[1], v] }}
+        end
+      else
+        to_a
+      end
+    elsif is_a?(Array)
+      map do |v|
+        if v.is_a?(Hash) && v[:data].is_a?(Hash)
+          v = v.dup
+          v[:data] = v[:data].to_a
+        end
+        v
+      end
+    else
+      self
+    end.to_json
+  end
+end

data/lib/chartkick/helper.rb

@@ -37,17 +37,16 @@ module Chartkick
 
     private
 
-    def chartkick_chart(klass, data_source, **options)
+    def chartkick_chart(klass, data_source, nonce: true, **options)
       @chartkick_chart_id ||= 0
       options = chartkick_deep_merge(Chartkick.options, options)
       element_id = options.delete(:id) || "chart-#{@chartkick_chart_id += 1}"
-      height = options.delete(:height) || "300px"
-      width = options.delete(:width) || "100%"
+      height = (options.delete(:height) || "300px").to_s
+      width = (options.delete(:width) || "100%").to_s
       defer = !!options.delete(:defer)
       # content_for: nil must override default
       content_for = options.key?(:content_for) ? options.delete(:content_for) : Chartkick.content_for
 
-      nonce = options.delete(:nonce)
       if nonce == true
         # Secure Headers also defines content_security_policy_nonce but it takes an argument
         # Rails 5.2 overrides this method, but earlier versions do not
@@ -57,6 +56,8 @@ module Chartkick
         elsif respond_to?(:content_security_policy_script_nonce)
           # Secure Headers
           nonce = content_security_policy_script_nonce
+        else
+          nonce = nil
         end
       end
       nonce_html = nonce ? " nonce=\"#{ERB::Util.html_escape(nonce)}\"" : nil
@@ -65,12 +66,26 @@ module Chartkick
       html_vars = {
         id: element_id,
         height: height,
-        width: width
+        width: width,
+        # don't delete loading option since it needs to be passed to JS
+        loading: options[:loading] || "Loading..."
       }
+
+      [:height, :width].each do |k|
+        # limit to alphanumeric and % for simplicity
+        # this prevents things like calc() but safety is the priority
+        # dot does not need escaped in square brackets
+        raise ArgumentError, "Invalid #{k}" unless html_vars[k] =~ /\A[a-zA-Z0-9%.]*\z/
+      end
+
       html_vars.each_key do |k|
+        # escape all variables
+        # we already limit height and width above, but escape for safety as fail-safe
+        # to prevent XSS injection in worse-case scenario
         html_vars[k] = ERB::Util.html_escape(html_vars[k])
       end
-      html = (options.delete(:html) || %(<div id="%{id}" style="height: %{height}; width: %{width}; text-align: center; color: #999; line-height: %{height}; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div>)) % html_vars
+
+      html = (options.delete(:html) || %(<div id="%{id}" style="height: %{height}; width: %{width}; text-align: center; color: #999; line-height: %{height}; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">%{loading}</div>)) % html_vars
 
       # js vars
       js_vars = {
@@ -84,28 +99,28 @@ module Chartkick
       end
       createjs = "new Chartkick[%{type}](%{id}, %{data}, %{options});" % js_vars
 
-      if defer
-        js = <<JS
-<script type="text/javascript"#{nonce_html}>
-  (function() {
-    var createChart = function() { #{createjs} };
-    if (window.addEventListener) {
-      window.addEventListener("load", createChart, true);
-    } else if (window.attachEvent) {
-      window.attachEvent("onload", createChart);
-    } else {
-      createChart();
-    }
-  })();
-</script>
-JS
-      else
-        js = <<JS
-<script type="text/javascript"#{nonce_html}>
-  #{createjs}
-</script>
-JS
-      end
+      warn "[chartkick] The defer option is no longer needed and can be removed" if defer
+
+      # Turbolinks preview restores the DOM except for painted <canvas>
+      # since it uses cloneNode(true) - https://developer.mozilla.org/en-US/docs/Web/API/Node/
+      #
+      # don't rerun JS on preview to prevent
+      # 1. animation
+      # 2. loading data from URL
+      js = <<~JS
+        <script#{nonce_html}>
+          (function() {
+            if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;
+
+            var createChart = function() { #{createjs} };
+            if ("Chartkick" in window) {
+              createChart();
+            } else {
+              window.addEventListener("chartkick:load", createChart, true);
+            }
+          })();
+        </script>
+      JS
 
       if content_for
         content_for(content_for) { js.respond_to?(:html_safe) ? js.html_safe : js }