apexcharts 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 430b940ba031ce379c1d35a6685ba8ad19d62922c91d9d8a806779f1c4282bbd
-  data.tar.gz: 5d1bae083b7c949b1d0a984bcb43e64096558cdcf550df3b8a507eec58e64405
+  metadata.gz: 691f5a61767a709faa0a664940bd1c3fd151ce3704bc4e8d611e0be89b24867b
+  data.tar.gz: e7a6816de1ad3ac93511aee84f0b2217f98f9ebf1c57e5c4e00bf51b21c4ee73
 SHA512:
-  metadata.gz: fc51493d941efd81893b7a847e7939149897b0c8c44f87a04a4d00f5466d5c629862353aad59e7a3df0bcab768926e674bb2f3a00b1b2adf6f987b324a540002
-  data.tar.gz: 272c361ad29c2b5456d62b7339809cbd1e664de015275eecd043127211627732b9ce50df5f68df2b5ce8d11a316fc208037f7a8bd4ac4383aaedd25712449bec
+  metadata.gz: 2cc56083d7c1a92157f27836ffdeec621951f67c4cc979850f4482a028a1433983f18d6fcd80a2ab847e1af34033c78b8a43fb32aff9a9bdefd4f0b7aa0305f2
+  data.tar.gz: 79363b03e25c694ddba264375ca41a08853510fd27ef5d7533c73c99442cdd8d3aab68015016d5dfe597938189354493ecdb9ad44f582098b6add1197a913e9d

data/README.md

@@ -1,19 +1,80 @@
 <p align="center">
-  <img src="images/apexcharts.rb.png" height="170">
+  <img src="images/placeholder.png" height="120">
 </p>
 
 <p align="center">
-  <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://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 src="https://badge.fury.io/rb/apexcharts.svg" alt="Gem Version" /></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>
 </p>
 
 
 ## What is this?
 
-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
-a beautiful, interactive, and responsive charts for your ruby app.
+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.
+
+
+## README Versions
+
+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)
+
+## Table of Contents
+
+- [Usage](#usage)
+  - [Cartesian Charts](#cartesian-charts)
+    - [Line Chart](#line-chart)
+    - [Stepline Chart](#stepline-chart)
+    - [Area Chart](#area-chart)
+    - [Column Chart](#column-chart)
+    - [Bar Chart](#bar-chart)
+    - [Range Bar Chart](#range-bar-chart)
+    - [Scatter Chart](#scatter-chart)
+    - [Candlestick Chart](#candlestick-chart)
+    - [Mixed Charts](#mixed-charts)
+    - [Syncing Charts](#syncing-charts)
+    - [Brush Chart](#brush-chart)
+    - [Annotations](#annotations)
+  - [Heatmap Chart](#heatmap-chart)
+  - [Radar Chart](#radar-chart)
+  - [Bubble Chart](#bubble-chart)
+  - [Polar Charts](#polar-charts)
+    - [Pie Chart](#pie-chart)
+    - [Donut Chart](#donut-chart)
+    - [Radial Bar Chart](#radial-bar-chart)
+- [Data Formats](#data-formats)
+  - [Cartesian Charts](#cartesian-charts-1)
+    - [Candlestick Chart](#candlestick-chart-1)
+  - [Heatmap Chart](#heatmap-chart-1)
+  - [Radar Chart](#radar-chart-1)
+  - [Bubble Chart](#bubble-chart-1)
+  - [Polar Charts](#polar-charts-1)
+- [Options](#options)
+  - [Global Options](#global-options)
+- [Installation](#installation)
+- [Reusable Custom Palette](#reusable-custom-palette)
+  - [Global Palette](#global-palette)
+  - [Local Palette](#local-palette)
+- [Web Support](#web-support)
+  - [Rails](#rails)
+  - [Plain HTML+ERB (Without Framework)](#plain-htmlerb-without-framework)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [License](#license)
+- [Like the charts?](#like-the-charts)
 
 
 ## Usage
@@ -101,6 +162,33 @@ Example options used for cartesian charts:
 ![Example Bar Chart](images/bar_chart.gif)
 
 
+#### Range Bar Chart
+
+```erb
+<% range_bar_series = [{
+      name: "Series A",
+      data: {
+        'A' => [1, 5],
+        'B' => [4, 6],
+        'C' => [5, 8],
+        'D' => [3, 11]
+      }
+    }, {
+      name: "Series B",
+      data: {
+        'A' => [2, 6],
+        'B' => [1, 3],
+        'C' => [7, 8],
+        'D' => [5, 9]
+      }
+  }]
+%>
+
+<%= range_bar_chart(range_bar_series, theme: 'palette3') %>
+```
+![Example Range Bar Chart](images/range_bar_chart.gif)
+
+
 #### Scatter Chart
 
 ```erb
@@ -110,6 +198,7 @@ Example options used for cartesian charts:
 
 
 #### Candlestick Chart
+
 Candlestick chart is typically used to illustrate movements in the price of a
 financial instrument over time. This chart is also popular by the name "ohlc chart".
 That's why you can call it with `ohlc_chart` too.  
@@ -309,6 +398,7 @@ Also called `circle_chart`.
 ## Data Formats
 
 ### Cartesian Charts
+
 The data format for line, stepline, area, column, bar, and scatter
 charts should be in following format **per-series**:
 
@@ -331,6 +421,7 @@ or this:
 ```
 
 #### Candlestick Chart
+
 Candlestick chart is just like other cartesian charts, only the y value is
 an array of 4 members which called the OHLC (Open-High-Low-Close):
 
@@ -353,6 +444,7 @@ or this:
 ```
 
 ### Heatmap Chart
+
 The data format for heatmap chart **per-series** is similar to cartesian
 charts. But instead of y values they are heat values. The series names will
 be the y values.
@@ -376,6 +468,7 @@ or this:
 ```
 
 ### Radar Chart
+
 The data format for radar chart **per-series** is also similar but instead
 of x values they are variables and instead of y values they are the only
 values for the variables with type of Numeric.
@@ -400,6 +493,7 @@ or this:
 
 
 ### Bubble Chart
+
 Bubble chart is similar to scatter chart, only they have one more value
 for bubble size:
 
@@ -412,10 +506,58 @@ for bubble size:
 ```
 
 ### Polar Charts
+
 The data format for donut, pie, and radial bar are the simplest. They are
 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 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"`."
+
+```ruby
+options = {
+  animations: false, # Shortcut for chart: { animations: { enabled: false } }
+  chart: {
+    fontFamily: "Helvetica, Arial, sans-serif",
+    toolbar: {
+      show: false
+    }
+  },
+  curve: "straight", # Shortcut for stroke: { curve: "straight" }
+  markers: {
+    size: 5,
+  },
+  tooltip: false, # Shortcut for tooltip: { enabled: false }
+  xtitle: "Boars per capita"
+}
+```
+
+These options can be passed to any chart helper like `<%= line_chart(series, options) %>`.
+
+### Global Options
+
+To change options globally, you can manipulate the `Apex` JavaScript object directly:
+
+```javascript
+require("apexcharts")
+
+const apexGlobalOptions = {
+  chart: {
+    …
+  },
+  …
+}
+
+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.
+
+
 ## Installation
 Add this line to your application's Gemfile:
 
@@ -430,55 +572,124 @@ $ bundle
 ```
 
 
+## Reusable Custom Palette
+
+You can create custom palette that works globally or locally.
+
+### Global Palette
+
+To create global 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:
+
+```ruby
+# config/initializers/apexcharts.rb
+ApexCharts::Theme.create "rainbow", ["#ff0000", "#00ff00", "#0000ff"]
+```
+
+and later somewhere in your app views:
+
+```ruby
+# e.g. app/views/home/index.html.slim
+...
+= line_chart chart_data, theme: "rainbow"
+...
+```
+
+If later for some reason I don't know you want to destroy the palette you can use:
+
+```ruby
+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.
+
+
 ## Web Support
 
 ### Rails
+
 After installing the gem, require it in your `app/assets/javascripts/application.js`.
 ```js
-//= require 'apexcharts'
+//= require apexcharts
 ```
 
 Or, if you use `webpacker`, you can run:
 ```bash
-yarn add apexcharts
+$ yarn add apexcharts
 ```
 and then require it in your `app/javascript/packs/application.js`.
 ```js
 require("apexcharts")
 ```
 
-### HTML+ERB
+### Plain HTML+ERB (Without Framework)
+
 After installing the gem, insert this to the top of your .html.erb files:
 
 ```html+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
 ```
 
 
-## TODOs
-- Replace dependency `smart_kv` with `dry-schema`
-- Create reusable theme palette
-- Add more features (e.g. gradient line, background image, etc.)
-- Range bar chart
+## Roadmap
+
 - Support other ruby frameworks (sinatra, hanami, 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:
 - Reporting bugs
 - Fixing bugs and submiting pull requests
 - Fixing documentation
 - Suggesting new features
-- Implementing TODOs above
+- Implementing todos on Roadmap above
 
 
 ## License
+
 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).  

data/lib/apexcharts/charts.rb

@@ -8,6 +8,7 @@ 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'

data/lib/apexcharts/charts/range_bar.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ApexCharts
+  class RangeBarChart < BarChart
+    def chart_type
+      'rangeBar'
+    end
+  end
+end

data/lib/apexcharts/colors.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require 'set'
+
+module ApexCharts
+  class Colors
+    def initialize colors
+      @color_set = Set.new(clean(colors))
+    end
+
+    def values
+      @color_set.to_a
+    end
+
+  private
+
+    def clean colors
+      colors = colors.respond_to?(:to_set) ? colors.to_a.flatten : Array(colors)
+      colors.map do |color|
+        unless color.tap{|c| c.upcase! }[/^#[0-9A-F]{6}/]
+          raise "unrecognized color #{color}"
+        end
+        color
+      end
+    end
+  end
+end
+

data/lib/apexcharts/helper.rb

@@ -5,6 +5,7 @@ require_relative 'options_builder'
 require_relative 'utils'
 require_relative 'renderer'
 require_relative 'charts'
+require_relative 'theme'
 
 module ApexCharts
   module Helper
@@ -28,6 +29,11 @@ module ApexCharts
       draw_chart(BarChart.new(bindings, *prepare_series_and_options(series, options), &block))
     end
 
+    def range_bar_chart series, options={}, &block
+      bindings = eval("self", block.binding) if block_given?
+      draw_chart(RangeBarChart.new(bindings, *prepare_series_and_options(series, options), &block))
+    end
+
     def scatter_chart series, options={}, &block
       bindings = eval("self", block.binding) if block_given?
       draw_chart(ScatterChart.new(bindings, *prepare_series_and_options(series, options), &block))
@@ -76,6 +82,14 @@ module ApexCharts
     end
     alias_method :circle_chart, :radial_bar_chart
 
+    def create_palette palette_name, colors
+      ApexCharts::Theme::Local.create palette_name, colors
+    end
+
+    def destroy_palette palette_name
+      ApexCharts::Theme::Local.destroy palette_name
+    end
+
   private
 
     def draw_chart chart