chartkick 3.4.0 → 5.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5afacd4c10d0cfddc6a2a660efead206ee042e80d48dd749f9de79feb365c1fd
-  data.tar.gz: c7fc99b0b2b467a6326df99f5832de2b3674f5f80415749cf57177142eecfc45
+  metadata.gz: 9ac4b71bb9edbf35b307e350adf2fc5ebfed0e23618ca5e079f37e3ce548f68c
+  data.tar.gz: b5a6a2499a5e9835d3dcc7b002a881d60d85a66efc45c79931cc9897cdeca6de
 SHA512:
-  metadata.gz: 75b1793b427c5d9d4604b813773253adb864b6134fad48f952c72377f75da40c8daa19eaf06fd7ce0b2da31a1ba436cfe54bde318ac849ec2080652582ac7076
-  data.tar.gz: 8f47e12f6e9c746871d02f0d5bd3093da1017c5a222837696b5b0d7b7e4008c400c8556e4f85ec7b0ccd79c15a9cb510a91a7d9ecf896d1a106b7c82e68ddc36
+  metadata.gz: 709e242eff3d7c82c2c78dee8f0693f055819e3a0e24db1d5d58fe4d3564d1309a2477d45fc2b261685a6d60f81d6a2b6ace5a7c03dce48db1fea4cdb7bce4ae
+  data.tar.gz: c866cf49a27a03a16fdaa276b5b002b5eb36378b8f16ce062a3d2a08a56c67b47d286035f5e47cea8bf549e33174d6581a0024f4c8e96ca32849ef236c91e24d

data/CHANGELOG.md

@@ -1,6 +1,94 @@
+## 5.0.1 (2023-01-19)
+
+- Updated Chartkick.js to 5.0.1
+
+## 5.0.0 (2023-01-18)
+
+- Added support for Chart.js 4
+- Changed `chart_json` to be defined on `Hash` and `Array` instead of `Enumerable`
+- Updated Chartkick.js to 5.0.0
+- Removed support for Chart.js 3
+- Removed support for Ruby < 2.7 and Rails < 6
+
+## 4.2.1 (2022-08-02)
+
+- Updated Chart.js to 3.9.0
+
+## 4.2.0 (2022-06-12)
+
+- Updated Chartkick.js to 4.2.0
+- Updated Chart.js to 3.8.0
+
+## 4.1.3 (2022-01-15)
+
+- Support for `importmap-rails` is no longer experimental
+- Updated Chart.js to 3.7.0
+- Fixed asset precompilation error with `importmap-rails`
+
+## 4.1.2 (2021-11-06)
+
+- Removed automatic pinning for `importmap-rails` (still experimental)
+
+## 4.1.1 (2021-11-06)
+
+- Updated Chartkick.js to 4.1.1
+- Updated Chart.js to 3.6.0
+
+## 4.1.0 (2021-10-23)
+
+- Added support for Turbo
+- Added experimental support for `importmap-rails`
+- Updated Chartkick.js to 4.1.0
+
+## 4.0.5 (2021-07-07)
+
+- Updated Chartkick.js to 4.0.5
+- Updated Chart.js to 3.4.1
+
+## 4.0.4 (2021-05-01)
+
+- Updated Chartkick.js to 4.0.4
+- Updated Chart.js to 3.2.1
+
+## 4.0.3 (2021-04-10)
+
+- Updated Chartkick.js to 4.0.3
+- Updated Chart.js to 3.1.0
+
+## 4.0.2 (2021-04-06)
+
+- Updated Chartkick.js to 4.0.2
+
+## 4.0.1 (2021-04-06)
+
+- Fixed error with Uglifier
+- Updated Chartkick.js to 4.0.1
+
+## 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
+- Updated Chartkick.js to 4.0.0
+
+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
+- Fixed CSS injection with `width` and `height` options - [more info](https://github.com/ankane/chartkick/issues/546)
 
 ## 3.3.2 (2020-07-23)
 
@@ -9,7 +97,7 @@
 ## 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)
 
@@ -27,7 +115,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-2023 Andrew Kane
 
 MIT License
 

data/README.md

@@ -4,21 +4,66 @@ 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 5.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://travis-ci.org/ankane/chartkick.svg?branch=master)](https://travis-ci.org/ankane/chartkick)
+[![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"
 ```
 
-For Rails 6 / Webpacker, run:
+Then follow the instructions for your JavaScript setup:
+
+- [Importmap](#importmap) (Rails 7 default)
+- [esbuild, rollup.js, or Webpack](#esbuild-rollupjs-or-webpack)
+- [Webpacker](#webpacker) (Rails 6 default)
+- [Sprockets](#sprockets)
+
+This sets up Chartkick with [Chart.js](https://www.chartjs.org/). For other charting libraries and frameworks, see [detailed instructions](#installation).
+
+### Importmap
+
+In `config/importmap.rb`, add:
+
+```ruby
+pin "chartkick", to: "chartkick.js"
+pin "Chart.bundle", to: "Chart.bundle.js"
+```
+
+And in `app/javascript/application.js`, add:
+
+```js
+import "chartkick"
+import "Chart.bundle"
+```
+
+### esbuild, rollup.js, or Webpack
+
+Run:
+
+```sh
+yarn add chartkick chart.js
+```
+
+And in `app/javascript/application.js`, add:
+
+```js
+import "chartkick/chart.js"
+```
+
+Note: For rollup.js, this requires `format: "iife"` in `rollup.config.js`.
+
+### Webpacker
+
+Run:
 
 ```sh
 yarn add chartkick chart.js
@@ -27,19 +72,18 @@ yarn add chartkick chart.js
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick")
-require("chart.js")
+import "chartkick/chart.js"
 ```
 
-For Rails 5 / Sprockets, in `app/assets/javascripts/application.js`, add:
+### Sprockets
+
+In `app/assets/javascripts/application.js`, add:
 
 ```js
 //= require chartkick
 //= require Chart.bundle
 ```
 
-This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
-
 ## Charts
 
 Line chart
@@ -97,9 +141,10 @@ Timeline - *Google Charts*
 Multiple series
 
 ```erb
-<%= line_chart @goals.map { |goal|
-    {name: goal.name, data: goal.feats.group_by_week(:created_at).count}
-} %>
+<%= line_chart [
+  {name: "Workout", data: {"2021-01-01" => 3, "2021-01-02" => 4}},
+  {name: "Call parents", data: {"2021-01-01" => 5, "2021-01-02" => 3}}
+] %>
 ```
 
 or
@@ -108,7 +153,23 @@ or
 <%= line_chart Feat.group(:goal_id).group_by_week(:created_at).count %>
 ```
 
-### Say Goodbye To Timeouts
+## Data
+
+Data can be a hash, array, or URL.
+
+#### Hash
+
+```erb
+<%= line_chart({"2021-01-01" => 2, "2021-01-02" => 3}) %>
+```
+
+#### Array
+
+```erb
+<%= line_chart [["2021-01-01", 2], ["2021-01-02", 3]] %>
+```
+
+#### URL
 
 Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
 
@@ -132,7 +193,7 @@ For multiple series, add `chart_json` at the end.
 render json: Task.group(:goal_id).group_by_day(:completed_at).count.chart_json
 ```
 
-### Options
+## Options
 
 Id, width, and height
 
@@ -151,7 +212,7 @@ Min and max values
 Min and max for x-axis - *Chart.js*
 
 ```erb
-<%= line_chart data, xmin: "2018-01-01", xmax: "2019-01-01" %>
+<%= line_chart data, xmin: "2021-01-01", xmax: "2022-01-01" %>
 ```
 
 Colors
@@ -208,12 +269,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
@@ -262,16 +317,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 - *Chart.js*
 
 ```erb
 <%= line_chart data, bytes: true %>
 ```
 
-Show a message when data is empty
+Specify the message when data is loading
+
+```erb
+<%= line_chart data, loading: "Loading..." %>
+```
+
+Specify the 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
@@ -310,7 +371,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:
@@ -329,30 +390,6 @@ For Padrino, use `yield_content` instead of `yield`.
 
 This is great for including all of your JavaScript at the bottom of the page.
 
-### Data
-
-Pass data as a hash or array
-
-```erb
-<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
-<%= pie_chart [["Football", 10], ["Basketball", 5]] %>
-```
-
-For multiple series, use the format
-
-```erb
-<%= line_chart [
-  {name: "Series A", data: series_a},
-  {name: "Series B", data: series_b}
-] %>
-```
-
-Times can be a time or a string (strings are parsed)
-
-```erb
-<%= line_chart({20.day.ago => 5, "2013-05-07 00:00:00 UTC" => 7}) %>
-```
-
 ### Multiple Series
 
 You can pass a few options with a series:
@@ -414,14 +451,26 @@ gem "chartkick"
 
 Next, choose your charting library.
 
-- [Chart.js](#chart-js)
+- [Chart.js](#chartjs)
 - [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.
-
 ### Chart.js
 
+For Rails 7 / Importmap, in `config/importmap.rb`, add:
+
+```ruby
+pin "chartkick", to: "chartkick.js"
+pin "Chart.bundle", to: "Chart.bundle.js"
+```
+
+And in `app/javascript/application.js`, add:
+
+```js
+import "chartkick"
+import "Chart.bundle"
+```
+
 For Rails 6 / Webpacker, run:
 
 ```sh
@@ -431,8 +480,7 @@ yarn add chartkick chart.js
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick")
-require("chart.js")
+import "chartkick/chart.js"
 ```
 
 For Rails 5 / Sprockets, in `app/assets/javascripts/application.js`, add:
@@ -450,6 +498,18 @@ In your layout or views, add:
 <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
 ```
 
+For Rails 7 / Importmap, in `config/importmap.rb`, add:
+
+```ruby
+pin "chartkick", to: "chartkick.js"
+```
+
+And in `app/javascript/application.js`, add:
+
+```js
+import "chartkick"
+```
+
 For Rails 6 / Webpacker, run:
 
 ```sh
@@ -459,7 +519,7 @@ yarn add chartkick
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick")
+import "chartkick"
 ```
 
 For Rails 5 / Sprockets, in `app/assets/javascripts/application.js`, add:
@@ -478,6 +538,27 @@ before your charts.
 
 ### Highcharts
 
+For Rails 7 / Importmap, run:
+
+```sh
+bin/importmap pin highcharts --download
+```
+
+And in `config/importmap.rb`, add:
+
+```ruby
+pin "chartkick", to: "chartkick.js"
+```
+
+And in `app/javascript/application.js`, add:
+
+```js
+import "chartkick"
+import Highcharts from "highcharts"
+
+window.Highcharts = Highcharts
+```
+
 For Rails 6 / Webpacker, run:
 
 ```sh
@@ -487,7 +568,7 @@ yarn add chartkick highcharts
 And in `app/javascript/packs/application.js`, add:
 
 ```js
-require("chartkick").use(require("highcharts"))
+import "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 +586,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@4/dist/chart.umd.js) and the [date-fns adapter bundle](https://unpkg.com/chartjs-adapter-date-fns@3/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:
@@ -593,19 +695,21 @@ Check out [chartkick.js](https://github.com/ankane/chartkick.js)
 
 ## Upgrading
 
-### 3.0
+### 5.0
 
-Breaking changes
+If you use Importmaps or 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 esbuild, Webpack, or Webpacker, run:
 
-## Credits
+```sh
+yarn upgrade chartkick --latest
+```
 
-Chartkick uses [iso8601.js](https://github.com/Do/iso8601.js) to parse dates and times.
+If you use Chart.js with esbuild, Webpack, or Webpacker, also run:
+
+```sh
+yarn upgrade chart.js --latest
+```
 
 ## History
 

data/lib/chartkick/core_ext.rb

@@ -0,0 +1,26 @@
+# for both multiple series and
+# making sure hash order is preserved in JavaScript
+
+class Array
+  def chart_json
+    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.to_json
+  end
+end
+
+class Hash
+  def chart_json
+    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.to_json
+  end
+end

data/lib/chartkick/engine.rb

@@ -1,5 +1,13 @@
 module Chartkick
   class Engine < ::Rails::Engine
     # for assets
+
+    # for importmap
+    initializer "chartkick.importmap" do |app|
+      if defined?(Importmap)
+        app.config.assets.precompile << "chartkick.js"
+        app.config.assets.precompile << "Chart.bundle.js"
+      end
+    end
   end
 end