apexcharts 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 691f5a61767a709faa0a664940bd1c3fd151ce3704bc4e8d611e0be89b24867b
-  data.tar.gz: e7a6816de1ad3ac93511aee84f0b2217f98f9ebf1c57e5c4e00bf51b21c4ee73
+  metadata.gz: 54ad80f2d5b534d005e140000f3accfb846be669b5ead95ba608a7bf98b31561
+  data.tar.gz: 5f26699fcd55813b799a5834ffae901a12f25fd768aadb814599715bd030afaa
 SHA512:
-  metadata.gz: 2cc56083d7c1a92157f27836ffdeec621951f67c4cc979850f4482a028a1433983f18d6fcd80a2ab847e1af34033c78b8a43fb32aff9a9bdefd4f0b7aa0305f2
-  data.tar.gz: 79363b03e25c694ddba264375ca41a08853510fd27ef5d7533c73c99442cdd8d3aab68015016d5dfe597938189354493ecdb9ad44f582098b6add1197a913e9d
+  metadata.gz: 1f9bb66bf223bbc14f2b00789968324940488a860abdaa8a4128dc416b60110da4fcf9148d16845ca86c02c9835b3abb73d5071d38075eab2890f6f4d21aec48
+  data.tar.gz: ce976c0c8a8ac057f92ef0680cdfd3e5ab79af6b2d00f52d482704efc1146dbcb3bad8a0fcc330d89fa97d9618442dc6f78361b570e71835fbc9df96be43d445

data/README.md

@@ -1,23 +1,55 @@
 <p align="center">
-  <img src="images/placeholder.png" height="120">
+  <img src="images/placeholder.png" height="80">
 </p>
 
 <p align="center">
-  <a href="https://rubygems.org/gems/apexcharts"><img src="https://img.shields.io/gem/v/apexcharts.svg?label=apexcharts" alt="Gem Version" /></a>
-  <a href="https://travis-ci.org/styd/apexcharts.rb"><img src="https://travis-ci.org/styd/apexcharts.rb.svg?branch=master" alt="Build Status" /></a>
-  <a href="https://rubygems.org/gems/apexcharts"><img alt="Downloads" src="https://img.shields.io/gem/dt/apexcharts"></a>
+  <a href="https://rubygems.org/gems/apexcharts">
+    <img src="https://img.shields.io/gem/v/apexcharts.svg?label=apexcharts" alt="Gem Version" />
+  </a>
+  <a href="https://travis-ci.org/styd/apexcharts.rb">
+    <img src="https://travis-ci.org/styd/apexcharts.rb.svg?branch=master" alt="Build Status" />
+  </a>
+  <a href="https://rubygems.org/gems/apexcharts">
+    <img alt="Downloads" src="https://img.shields.io/gem/dt/apexcharts">
+  </a>
   <img src="https://img.shields.io/github/commit-activity/m/styd/apexcharts.rb.svg?label=commits" alt="Commits" />
-  <a href="https://github.com/styd/apexcharts.rb/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a>
-  <a href="https://codeclimate.com/github/styd/apexcharts.rb/maintainability"><img src="https://api.codeclimate.com/v1/badges/07a4f59e67abfeae21cb/maintainability" /></a>
-  <a href='https://coveralls.io/github/styd/apexcharts.rb?branch=master'><img src='https://coveralls.io/repos/github/styd/apexcharts.rb/badge.svg?branch=master' alt='Coverage Status' /></a>
+  <a href="https://github.com/styd/apexcharts.rb/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License">
+  </a>
+  <a href="https://codeclimate.com/github/styd/apexcharts.rb/maintainability">
+    <img src="https://api.codeclimate.com/v1/badges/07a4f59e67abfeae21cb/maintainability" />
+  </a>
+  <a href='https://coveralls.io/github/styd/apexcharts.rb?branch=master'>
+    <img src='https://coveralls.io/repos/github/styd/apexcharts.rb/badge.svg?branch=master' alt='Coverage Status' />
+  </a>
+  <a href='http://clayallsopp.github.io/readme-score/?url=styd/apexcharts.rb'>
+    <img src='http://readme-score-api.herokuapp.com/score.svg?url=styd/apexcharts.rb' alt='README Score' />
+  </a>
 </p>
 
 
-## What is this?
+## About 
 
-ApexCharts.RB is a ruby gem that wraps a JavaScript charting library called with the same name,
-[ApexCharts.JS](https://github.com/apexcharts/apexcharts.js), that's going to give you
-beautiful, interactive, and responsive charts for your ruby app.
+> ApexCharts.RB is a ruby charting library that's going to give your ruby app beautiful,
+> interactive, and responsive charts powered by [ApexCharts.JS]. On top of those sweet
+> advantages, you'll also get extra features that you can't get by just including ApexCharts.JS
+> to your ruby app, namely **view/template helpers for creating charts**, **options shortcuts**,
+> **application wide default options**, **reusable custom theme palette**, and so on.
+
+
+## Trusted By
+
+<img src="images/users/ventrata.png" title="Use case: ticket sales for clients (visitor attractions and tour operators)" width="180" height="40" />
+
+> If your organization/company uses ApexCharts.RB in production, please comment on
+> [this issue](https://github.com/styd/apexcharts.rb/issues/34).
+
+
+## Supported By
+
+<a href="https://www.jetbrains.com/?from=ApexCharts.RB">
+  <img src="images/supporters/jetbrains.svg" title="Grants 1 License for All Products Pack (worth US$649.00/year)" width="120" height="120" />
+</a>
 
 
 ## README Versions
@@ -25,15 +57,15 @@ beautiful, interactive, and responsive charts for your ruby app.
 This README might not be for the version you use.  
 Choose the right README:
 
-- [v0.1.6](https://github.com/styd/apexcharts.rb/blob/v0.1.6/README.md)
-- [v0.1.5](https://github.com/styd/apexcharts.rb/blob/v0.1.5/README.md)
-- [v0.1.4](https://github.com/styd/apexcharts.rb/blob/v0.1.4/README.md)
-- [v0.1.3](https://github.com/styd/apexcharts.rb/blob/v0.1.3/README.md)
-- [v0.1.2](https://github.com/styd/apexcharts.rb/blob/v0.1.2/README.md)
-- [v0.1.1](https://github.com/styd/apexcharts.rb/blob/v0.1.1/README.md)
+> [v0.1.7] | [v0.1.6] | [v0.1.5] | [v0.1.4] | [v0.1.3] | [v0.1.2] | [v0.1.1]
 
 ## Table of Contents
 
+- [About](#about)
+- [Trusted By](#trusted-by)
+- [Supported By](#supported-by)
+- [README Versions](#readme-versions)
+- [Table of Contents](#table-of-contents)
 - [Usage](#usage)
   - [Cartesian Charts](#cartesian-charts)
     - [Line Chart](#line-chart)
@@ -64,12 +96,19 @@ Choose the right README:
   - [Polar Charts](#polar-charts-1)
 - [Options](#options)
   - [Global Options](#global-options)
-- [Installation](#installation)
+  - [Formatter Function](#formatter-function)
 - [Reusable Custom Palette](#reusable-custom-palette)
   - [Global Palette](#global-palette)
   - [Local Palette](#local-palette)
+- [Use Alongside Other Charting Libraries](#use-alongside-other-charting-libraries)
+  - [Alongside Chartkick](#alongside-chartkick)
+    - [Chartkick (Chart.js) and ApexCharts](#chartkick-chartjs-and-apexcharts)
+    - [Chartkick (Google Charts) and ApexCharts](#chartkick-google-charts-and-apexcharts)
+    - [Chartkick (Highcharts) and ApexCharts](#chartkick-highcharts-and-apexcharts)
+- [Installation](#installation)
 - [Web Support](#web-support)
   - [Rails](#rails)
+  - [Sinatra](#sinatra)
   - [Plain HTML+ERB (Without Framework)](#plain-htmlerb-without-framework)
 - [Roadmap](#roadmap)
 - [Contributing](#contributing)
@@ -265,7 +304,8 @@ you can do this:
 
 #### Syncing Charts
 
-You can synchronize charts by using `syncing_charts` or `synchronized_charts` methods. For example:
+You can synchronize charts by using `syncing_charts` or `synchronized_charts` methods. For
+example:
 ```erb
 <%= syncing_charts(chart: {toolbar: false}, height: 250, style: 'display: inline-block; width: 32%;') do %>
   <% mixed_charts(theme: 'palette4', data_labels: false) do %>
@@ -513,10 +553,29 @@ just any single value of type Numeric.
 
 ## Options
 
-ApexCharts.RB supports [all options from apexcharts.js](https://apexcharts.com/docs/options/), but instead of camelCase, you can write them in snake_case.
+ApexCharts.RB supports [all options from ApexCharts.JS](https://apexcharts.com/docs/options/),
+but instead of *camelCase*, you can write them in *snake_case*.
+
+ApexCharts.RB also provides shortcuts to some ApexCharts.JS options, such as `title`. In
+ApexCharts.JS you would have to write
+
+```ruby
+title: { text: "Some title" }
+```
+In ApexCharts.RB you can write
+```ruby
+title: "Some title"
+```
+if you just want to add the text.
 
-ApexCharts.RB also provides shortcuts to some ApexCharts.js options, such as `title`. In ApexCharts.js you would have to write `title: { text: "Some title" }`. In ApexCharts.rb you can write `title: "Some title"` if you just want to add the text.
-`xtitle` and `ytitle` are even greater shortcuts. Instead of `xaxis: { title: { text: "x title" } }` you can write `xtitle: "x title"`."
+`xtitle` and `ytitle` are even greater shortcuts. Instead of
+```ruby
+xaxis: { title: { text: "x title" } }
+```
+you can write
+```ruby
+xtitle: "x title"
+```
 
 ```ruby
 options = {
@@ -540,35 +599,30 @@ These options can be passed to any chart helper like `<%= line_chart(series, opt
 
 ### Global Options
 
-To change options globally, you can manipulate the `Apex` JavaScript object directly:
+To use default options globally, you can specify config for default options before calling
+your charts. In Rails, put it in `initializers` directory. For example:
 
-```javascript
-require("apexcharts")
+```ruby
+# config/initializers/apexcharts.rb
 
-const apexGlobalOptions = {
-  chart: {
-    …
-  },
-  …
+ApexCharts.config.default_options = {
+  data_labels: false,
+  tootip: true,
+  theme: 'my-theme'
 }
-
-Object.assign(Apex, apexGlobalOptions)
 ```
 
-All charts will then be created with these global options, which can be overwritten individually by any ApexCharts.RB helper method.
+All charts will then automatically pick up these global options, which can be overwritten
+individually by any options passed to the relevant chart helper.
 
+### Formatter Function
 
-## Installation
-Add this line to your application's Gemfile:
+To use a _simple_ formatter function (e.g. formatter in `tooltip`, `data_labels`, and `labels`),
+you can add [functionable-json](https://github.com/styd/functionable-json) to your Gemfile and
+use it like so:
 
-```ruby
-gem 'groupdate' # optional
-gem 'apexcharts'
-```
-
-And then execute:
-```bash
-$ bundle
+```erb
+<%= area_chart series, tooltip: {y: {formatter: function(val) { return '$' + parseFloat(val).toLocaleString() }}} %>
 ```
 
 
@@ -624,11 +678,112 @@ destroy_palette "ephemeral"
 on the same page or in its partials. Otherwise, nothing will happen.
 
 
+## Use Alongside Other Charting Libraries
+
+You can prefix the helper methods name with your chosen words to avoid name clashing with
+other charting libraries (e.g. chartkick, google_charts, etc.) you already use. Just set
+the `APEXCHARTS_PREFIX` environment variable to a string before you start your app server,
+say, 'awesome\_' and then on your views/templates use the chart helpers as `awesome_line_chart`,
+`awesome_area_chart`, and so on. `create_palette` and `destroy_palette` are left as is (not
+prefixed) as other libraries don't seem to have anything similar to them.
+
+Besides setting the environtment variable, if you just want a quick prefix, you can instead
+do this on your _Gemfile_:
+
+```ruby
+gem 'apexcharts', require: 'apexcharts/prefix_with_apex'
+```
+
+and you'll get `apex_line_chart`, `apex_area_chart`, etc.
+
+The prefix you set only applies to the outer chart helpers. The inner chart helpers is not
+prefixed. For example:
+
+```erb
+<%= awesome_syncing_chart(syncing_options) do %>
+  <% combo_chart(mixed_options) do %>
+    <% line_chart(line_series) %>
+    <% area_chart(area_series) %>
+  <% end %>
+<% end %>
+```
+
+### Alongside Chartkick
+
+Given:
+
+```erb
+<% series = [
+  {name: 'Verified', data: @verified_users},
+  {name: 'Unverified', data: @unverified_users}
+] %>
+<% options = {
+  legend: 'bottom', title: 'Users Grouped By Week For The Last 1 Year',
+  ytitle: 'Users', width: '100%', height: '300px'
+} %>
+```
+
+#### Chartkick (Chart.js) and ApexCharts
+
+```erb
+<div style="display: inline-block; width: 48%;">
+  <%= area_chart(series, {**options, adapter: 'chartjs'}) %>
+</div>
+<div style="display: inline-block; width: 48%;">
+  <%= apex_area_chart(series, options) %>
+</div>
+```
+
+![Chartkick (Chart.js) And ApexCharts](images/chartkick-chartjs-and-apexcharts.gif)
+
+#### Chartkick (Google Charts) and ApexCharts
+
+```erb
+<div style="display: inline-block; width: 48%;">
+  <%= area_chart(series, {**options, adapter: 'google'}) %>
+</div>
+
+<div style="display: inline-block; width: 48%;">
+  <%= apex_area_chart(series, options) %>
+</div>
+```
+
+![Chartkick (Google Charts) And ApexCharts](images/chartkick-google-and-apexcharts.gif)
+
+#### Chartkick (Highcharts) and ApexCharts
+
+```erb
+<div style="display: inline-block; width: 48%;">
+  <%= area_chart(series, {**options, adapter: 'highcharts'}) %>
+</div>
+
+<div style="display: inline-block; width: 48%;">
+  <%= apex_area_chart(series, options) %>
+</div>
+```
+
+![Chartkick (Highcharts) And ApexCharts](images/chartkick-highcharts-and-apexcharts.gif)
+
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'groupdate' # optional
+gem 'apexcharts'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+
 ## Web Support
 
 ### Rails
 
-After installing the gem, require it in your `app/assets/javascripts/application.js`.
+Require it in your `app/assets/javascripts/application.js`.
 ```js
 //= require apexcharts
 ```
@@ -642,20 +797,48 @@ and then require it in your `app/javascript/packs/application.js`.
 require("apexcharts")
 ```
 
+### Sinatra
+
+Require it after you `require 'sinatra/base'` and add helper `Sinatra::ApexCharts` in the
+class that inherits from `Sinatra::Base`.
+
+```ruby
+require 'sinatra/base'
+require 'apexcharts'
+
+class SimpleApp < Sinatra::Base
+  helpers Sinatra::ApexCharts
+end
+```
+
+To add the asset (ApexCharts.JS), include a script tag in your template
+as follows:
+
+```ruby
+template :index do
+  <<~INDEX
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    <% series = {...} %>
+    <%= pie_chart(series, legend: "left") %>
+  INDEX
+end
+```
+
+For more details, [see example](examples/sinatra/sample.rb).
+
+
 ### Plain HTML+ERB (Without Framework)
 
-After installing the gem, insert this to the top of your .html.erb files:
+Insert this to the top of your .html.erb files:
 
-```html+erb
+```erb
 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-<% require 'set' %>
 <% require 'apexcharts' %>
 <% include ApexCharts::Helper %>
 ```
-`require 'set'` is needed because of an issue in the dependency used, but not needed
-in v0.2.x release of ApexCharts.RB.
 
 You can then generate the static html page with e.g.
+
 ```bash
 $ erb sample.html.erb > sample.html
 ```
@@ -663,7 +846,7 @@ $ erb sample.html.erb > sample.html
 
 ## Roadmap
 
-- Support other ruby frameworks (sinatra, hanami, etc.)
+- Support other ruby frameworks (hanami, roda, cuba, middleman, etc.)
 - v0.1.x
   - Add more features (e.g. gradient line, background image, etc.)
 - v0.2.x
@@ -684,13 +867,26 @@ Everyone is encouraged to help improve this project by:
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the
+[MIT License](https://opensource.org/licenses/MIT).
 
 
 ## Like the charts?
 
-Consider donating to the author of ApexCharts.JS to support his awesome library.
+Consider donating to the author of [ApexCharts.JS] to support his awesome library.
 This project wouldn't be possible without it.
 
 Become a sponsor on [Patreon](https://patreon.com/junedchhipa).  
 One time donation on [PayPal](https://paypal.me/junedchhipa)
+
+
+[ApexCharts.JS]: https://github.com/apexcharts/apexcharts.js
+
+
+[v0.1.7]: https://github.com/styd/apexcharts.rb/blob/v0.1.7/README.md
+[v0.1.6]: https://github.com/styd/apexcharts.rb/blob/v0.1.6/README.md
+[v0.1.5]: https://github.com/styd/apexcharts.rb/blob/v0.1.5/README.md
+[v0.1.4]: https://github.com/styd/apexcharts.rb/blob/v0.1.4/README.md
+[v0.1.3]: https://github.com/styd/apexcharts.rb/blob/v0.1.3/README.md
+[v0.1.2]: https://github.com/styd/apexcharts.rb/blob/v0.1.2/README.md
+[v0.1.1]: https://github.com/styd/apexcharts.rb/blob/v0.1.1/README.md

data/lib/apexcharts.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
 
-require 'apexcharts/support/rails' if defined? Rails
 require 'apexcharts/helper'
+require 'apexcharts/support/rails' if defined? Rails
+require 'apexcharts/support/sinatra' if defined? Sinatra

data/lib/apexcharts/charts.rb

@@ -1,20 +1,13 @@
 # frozen_string_literal: true
 
-require_relative 'charts/base'
-require_relative 'charts/cartesian'
-require_relative 'charts/line'
-require_relative 'charts/area'
-require_relative 'charts/bar'
-require_relative 'charts/column'
-require_relative 'charts/scatter'
-require_relative 'charts/candlestick'
-require_relative 'charts/range_bar'
-require_relative 'charts/heatmap'
-require_relative 'charts/bubble'
-require_relative 'charts/radar'
-require_relative 'charts/mixed'
-require_relative 'charts/syncing'
-require_relative 'charts/polar'
-require_relative 'charts/pie'
-require_relative 'charts/donut'
-require_relative 'charts/radial_bar'
+module ApexCharts
+  %w(
+    base cartesian line area bar column scatter candlestick
+    heatmap bubble radar mixed syncing polar pie donut
+  ).each do |type|
+    autoload :"#{type.capitalize}Chart", "apexcharts/charts/#{type}.rb"
+  end
+
+  autoload :RangeBarChart, 'apexcharts/charts/range_bar.rb'
+  autoload :RadialBarChart, 'apexcharts/charts/radial_bar.rb'
+end