apexcharts 0.1.9 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 737afc5c5ce435bfa18cfe6b7d00f51ffd74c040f8f5f51728dec1711a2514fc
-  data.tar.gz: e46f31763675b25c6cf0f010a16423aa2e6249240302af88e793f65277c7a816
+  metadata.gz: e97e5e996cb05991f345e7cf9c6591aab1405925b2b92643f518687017923170
+  data.tar.gz: 5a64c5b2a09074483ab53abcbcaed281efe8241ae83978d04e48e0486c1bf5b5
 SHA512:
-  metadata.gz: a4d469bb0d6ccb22595939a9e5305ce8cfb75db59c2e54db786d937c10cf1f07d0cfe342238ab3289fbebad2149b7e3eee0df5c20fcea17230c9eb45fb8b0cee
-  data.tar.gz: 67de41d4a272ee5ed1cfd200c20e9d2b2a95300c00d03463a9561000481655af329f6629f1a6a3d1443ef92bffbc33f4593247f983943faa58eae78cbd3e559f
+  metadata.gz: 438e96dcecf8766666b1b1d48bfa7f0a134ee3ee70d14a6309850ef9e47ea28633bf68101b3c11a90f92cabdece41da05e3e599b3523a2de3295470133c980e1
+  data.tar.gz: 1677bef319ca1190860641f188e0914f29400709f96d9afc42a3f4cb833671865227c61ae9d22cfec7c2ae14af88cfa78f47a0328e91f4c60809d1bbdcf7db46

data/README.md

@@ -6,8 +6,8 @@
   <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 href="https://github.com/styd/apexcharts.rb/actions">
+    <img src="https://github.com/styd/apexcharts.rb/workflows/build-test/badge.svg?branch=master" alt="Build Test Status" />
   </a>
   <a href="https://rubygems.org/gems/apexcharts">
     <img alt="Downloads" src="https://img.shields.io/gem/dt/apexcharts">
@@ -19,12 +19,16 @@
   <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 href="https://codebeat.co/projects/github-com-styd-apexcharts-rb-master">
+    <img alt="codebeat badge" src="https://codebeat.co/badges/7be581d6-e74a-406b-ae76-65605a2bff78" />
   </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>
+  <br />
+  <a href='https://ko-fi.com/setyadi' target='_blank'>
+    <img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' />
+  </a>
 </p>
 
 
@@ -46,14 +50,7 @@ Organization/Company                                                   | Use Cas
 <img src="/images/users/ventrata.png" width="180" height="40" />       | Ticket sales for clients (visitor attractions and tour operators)
 
 > 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" width="120" height="120" />
-</a>
+> [this discussion](https://github.com/styd/apexcharts.rb/discussions/34).
 
 
 ## README Versions
@@ -61,13 +58,13 @@ Organization/Company                                                   | Use Cas
 This README might not be for the version you use.  
 Choose the right README:
 
-> [v0.1.9] | [v0.1.8] | [v0.1.7] | [v0.1.6] | [v0.1.5] | [v0.1.4] | [v0.1.3] | [v0.1.2] | [v0.1.1]
+> [v0.2.0] | [v0.1.11] | [v0.1.10] | [v0.1.9] | [v0.1.8] | [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)
@@ -80,10 +77,12 @@ Choose the right README:
     - [Range Bar Chart](#range-bar-chart)
     - [Scatter Chart](#scatter-chart)
     - [Candlestick Chart](#candlestick-chart)
+    - [Box Plot Chart](#box-plot-chart)
     - [Mixed Charts](#mixed-charts)
     - [Syncing Charts](#syncing-charts)
     - [Brush Chart](#brush-chart)
     - [Annotations](#annotations)
+    - [Multiple Y-Axes](#multiple-y-axes)
   - [Heatmap Chart](#heatmap-chart)
   - [Radar Chart](#radar-chart)
   - [Bubble Chart](#bubble-chart)
@@ -94,6 +93,7 @@ Choose the right README:
 - [Data Formats](#data-formats)
   - [Cartesian Charts](#cartesian-charts-1)
     - [Candlestick Chart](#candlestick-chart-1)
+    - [Box Plot Chart](#box-plot-chart-1)
   - [Heatmap Chart](#heatmap-chart-1)
   - [Radar Chart](#radar-chart-1)
   - [Bubble Chart](#bubble-chart-1)
@@ -101,9 +101,9 @@ Choose the right README:
 - [Options](#options)
   - [Global Options](#global-options)
   - [Formatter Function](#formatter-function)
+  - [Defer Chart Rendering](#defer-chart-rendering)
+  - [Render with a script whose type is module](#render-with-a-script-whose-type-is-module)
 - [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)
@@ -114,10 +114,9 @@ Choose the right README:
   - [Rails](#rails)
   - [Sinatra](#sinatra)
   - [Plain HTML+ERB (Without Framework)](#plain-htmlerb-without-framework)
-- [Roadmap](#roadmap)
 - [Contributing](#contributing)
 - [License](#license)
-- [Like the charts?](#like-the-charts)
+- [Articles](#articles)
 
 
 ## Usage
@@ -284,6 +283,46 @@ You can make candlestick chart with this:
 ![Example Candlestick Chart](images/candlestick_chart.gif)
 
 
+#### Box Plot Chart
+
+Given:
+```erb
+<%
+  require 'date'
+
+  def box_plot_data
+    20.times.map {|i| [Date.today - 20 + i, box_plot_datum] }.to_h
+  end
+
+  def box_plot_datum
+    level = 1000
+    max = level + rand(50..300)
+    min = level - rand(50..300)
+    q1 = min + rand(10..50)
+    q3 = max - rand(10..50)
+    median = (min + q1 + q3 + max)/4
+    [min, q1, median, q3, max]
+  end
+
+  box_plot_options = {
+    plot_options: {
+      boxPlot: {
+        colors: {
+          upper: '#aaffaa',
+          lower: '#ffaaFF'
+        }
+      }
+    }
+  }
+%>
+```
+You can make box plot chart with this:
+```erb
+<%= box_plot_chart(box_plot_data, box_plot_options) %>
+```
+![Example Box Plot Chart](images/box_plot_chart.gif)
+
+
 #### Mixed Charts
 
 You can mix charts by using `mixed_charts` or `combo_charts` methods.
@@ -353,6 +392,52 @@ All cartesian charts can have annotations, for example:
 ![Example Area Chart with Annotations](images/chart_with_annotations.gif)
 
 
+#### Multiple Y-Axes
+
+There's no fancy shortcut for multiple Y axes yet, but it is allowed. Here is an example
+for that.
+
+```erb
+<% series = [
+    {
+      name: 'Income',
+      type: 'column',
+      data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
+    },
+    {
+      name: 'Cashflow',
+      type: 'column',
+      data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
+    },
+    {
+      name: 'Revenue',
+      data: [20, 29, 37, 36, 44, 45, 50, 58]
+    }
+  ]
+
+  xaxis = {
+    title: {text: 'Year'},
+    categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]
+  }
+
+  yaxis = [
+    {title: {text: "Income"}},
+    {
+      title: {text: "Operating Cashflow"},
+      opposite: true,
+      seriesName: 'Cashflow'
+    },
+    {
+      title: {text: "Revenue"},
+      opposite: true,
+      seriesName: 'Revenue'
+    }
+  ]
+%>
+<%= line_chart(series, xaxis: xaxis, yaxis: yaxis) %>
+```
+![Example Chart with multiple Y-Axes](images/chart_with_multiple_y-axes.gif)
+
 ### Heatmap Chart
 
 ```erb
@@ -489,6 +574,29 @@ or this:
 ]
 ```
 
+#### Box Plot Chart
+
+Box plot chart is similar to candlestick chart, only the y value is
+an array of 5 members (Minimum-First Quartile-Median-Third Quartile-Maximum):
+
+```ruby
+{
+  <x value> => [<Min>, <Q1>, <Median>, <Q3>, <Max>],
+  <x value> => [<Min>, <Q1>, <Median>, <Q3>, <Max>],
+  ...
+}
+```
+
+or this:
+
+```ruby
+[
+  [<x value>, [<Min>, <Q1>, <Median>, <Q3>, <Max>]],
+  [<x value>, [<Min>, <Q1>, <Median>, <Q3>, <Max>]],
+  ...
+]
+```
+
 ### Heatmap Chart
 
 The data format for heatmap chart **per-series** is similar to cartesian
@@ -638,13 +746,28 @@ Or, without the _functionable-json_ gem, use function as object as follows:
 ```
 
 
-## Reusable Custom Palette
+### Defer Chart Rendering
 
-You can create custom palette that works globally or locally.
+It's possible to defer chart rendering by passing the argument `defer: true` as option.
 
-### Global Palette
+```erb
+<%= line_chart series, defer: true %>
+```
+
+### Render with a script whose type is module
 
-To create global palettes to be used anywhere on your any parts of your app, you can use
+The charts are rendered by inserting a <script> block in the HTML. 
+In order to generate this <script> with `type="module"` use the
+option `module: true`.
+
+```erb
+<%= line_chart series, module: true %>
+```
+
+
+## Reusable Custom Palette
+
+To create palettes to be used anywhere on your any parts of your app, you can use
 `ApexCharts::Theme.create`.
 
 For example, in rails app, you would write it in initializers:
@@ -669,26 +792,6 @@ If later for some reason I don't know you want to destroy the palette you can us
 ApexCharts::Theme.destroy "rainbow"
 ```
 
-### Local Palette
-
-To create local palettes to be used only for current thread (usually for the duration
-of a request), you can use the `create_palette` helper. The theme will only be available
-on that page and inside its partials after the palette created.
-
-For example:
-
-```ruby
-create_palette "ephemeral", ["#ab356d", "#12cdf3", "#665572", "#ababac"]
-```
-
-To destroy the palette:
-
-```ruby
-destroy_palette "ephemeral"
-```
-
-on the same page or in its partials. Otherwise, nothing will happen.
-
 
 ## Use Alongside Other Charting Libraries
 
@@ -696,8 +799,7 @@ You can prefix the helper methods name with your chosen words to avoid name clas
 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.
+`awesome_area_chart`, and so on.
 
 Besides setting the environtment variable, if you just want a quick prefix, you can instead
 do this on your _Gemfile_:
@@ -862,17 +964,6 @@ $ erb sample.html.erb > sample.html
 ```
 
 
-## Roadmap
-
-- 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
-  - Replace dependency `smart_kv` with `dry-schema`
-  - Display warnings on browser console on development instead of error page when
-    schema doesn't meet
-
-
 ## Contributing
 
 Everyone is encouraged to help improve this project by:
@@ -880,7 +971,6 @@ Everyone is encouraged to help improve this project by:
 - Fixing bugs and submiting pull requests
 - Fixing documentation
 - Suggesting new features
-- Implementing todos on Roadmap above
 
 
 ## License
@@ -898,6 +988,9 @@ The gem is available as open source under the terms of the
 [ApexCharts.JS]: https://github.com/apexcharts/apexcharts.js
 
 
+[v0.2.0]: https://github.com/styd/apexcharts.rb/blob/v0.2.0/README.md
+[v0.1.11]: https://github.com/styd/apexcharts.rb/blob/v0.1.11/README.md
+[v0.1.10]: https://github.com/styd/apexcharts.rb/blob/v0.1.10/README.md
 [v0.1.9]: https://github.com/styd/apexcharts.rb/blob/v0.1.9/README.md
 [v0.1.8]: https://github.com/styd/apexcharts.rb/blob/v0.1.8/README.md
 [v0.1.7]: https://github.com/styd/apexcharts.rb/blob/v0.1.7/README.md

data/lib/apex_charts/charts/base_chart.rb

@@ -12,7 +12,7 @@ module ApexCharts::Charts
     end
 
     def render
-      ApexCharts::Renderer.render_default(options)
+      ApexCharts::Renderer.render(options)
     end
 
     def chart_type; end

data/lib/apex_charts/charts/box_plot_chart.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ApexCharts::Charts
+  class BoxPlotChart < CartesianChart
+    def chart_type
+      'boxPlot'
+    end
+  end
+end

data/lib/apex_charts/charts.rb

@@ -8,6 +8,7 @@ module ApexCharts::Charts
     autoload :"#{type.capitalize}Chart", "apex_charts/charts/#{type}_chart.rb"
   end
 
+  autoload :BoxPlotChart, 'apex_charts/charts/box_plot_chart.rb'
   autoload :RangeBarChart, 'apex_charts/charts/range_bar_chart.rb'
   autoload :RadialBarChart, 'apex_charts/charts/radial_bar_chart.rb'
 

data/lib/apex_charts/helper.rb

@@ -78,6 +78,15 @@ module ApexCharts
       end
       alias_method :ohlc_chart, :candlestick_chart
 
+      def box_plot_chart(series, options={}, &block)
+        outer_self = eval('self', block.binding, __FILE__, __LINE__) if block_given?
+        draw_chart(
+          ApexCharts::Charts::BoxPlotChart.new(
+            outer_self, *prepare_series_and_options(series, options), &block
+          )
+        )
+      end
+
       def heatmap_chart(series, options={})
         draw_chart(
           ApexCharts::Charts::HeatmapChart.new(
@@ -148,14 +157,6 @@ module ApexCharts
       alias_method :circle_chart, :radial_bar_chart
     end
 
-    def create_palette(palette_name, colors)
-      Theme::Local.create palette_name, colors
-    end
-
-    def destroy_palette(palette_name)
-      Theme::Local.destroy palette_name
-    end
-
   private
 
     def draw_chart(chart)