apexcharts 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e6b3b98ec99c06971c628785c5cad67c383761d510143618f44eb35d66b14b64
-  data.tar.gz: 5529e49eb4a68568e307d811405252b7edb9917e9d2f1f0d3747974cb4846490
+  metadata.gz: 440e28c754dc121a96eabbfdef5215fd5efa44939111a031dfcf008ebb1362db
+  data.tar.gz: 373e2f066849672f92d6be10ce978fdf1077cec3ca2aa3da4dbfa2c3c6e3350e
 SHA512:
-  metadata.gz: 27524883c3b7bc5fd74d61dce05996807e891b6a8162ba3443618060a60ccdbf211b47d1f8bccd6d23f3f724247bbf9ccb3035b2366d62ac66dd504f4088c23e
-  data.tar.gz: 8be3f7162a6df1afdd91178f12576594932755e11152ab7b4d1f2a8b7ffd15d17d7ca01ccb62e96de3c10b0217df29fb9f68ad82bda2004b97ae642bac195c9b
+  metadata.gz: 0ab7c90e2a7957d8c805b9561421a1368d2b3f3e0bc0b82e3ce41863790fe0450aa6ce93c5f53659e8ecc010d92f660ee6faa8a2fbf217fc5ea6dea4c1a41ff8
+  data.tar.gz: 98185d2d33c2895bd4cf1c289add3fcd51d0f6d83ccea1e334ce9f506289fab89c01ffe2556b91663c347c8f6b2c234a4bcda2236027929f648961797a3f0339

data/README.md

@@ -1,106 +1,198 @@
 <p align="center">
-  <img src="https://apexcharts.com/media/apexcharts-logo.png" height="90">
-  <span style="font-size: 40px; vertical-align: top; margin-right: 10px;">+</span>
-  <img src="https://www.ruby-lang.org/images/header-ruby-logo.png">
+  <img src="images/apexcharts.rb.png" height="170">
 </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://travis-ci.com/styd/apexcharts.rb"><img src="https://api.travis-ci.com/styd/apexcharts.rb.svg?branch=master" alt="build" /></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>
 </p>
 
 
-<p align="center">
-  <a href="https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
-</p>
-
 <p align="center">Beautiful and interactive web charts for rubyist.</p>
 
 
 <p align="center"><img src="https://apexcharts.com/media/apexcharts-banner.png"></p>
 
-## Installation
-Add this line to your application's Gemfile:
-
-```ruby
-gem 'apexcharts'
-```
-
-And then execute:
-```bash
-$ bundle
-```
-
 ## Usage
 
 ### Cartesian Charts
 
-Example series used for mixable charts:
+Example series used for cartesian charts:
 
-```ruby
-series = [
-  {name: "Total", data: @total_users},
-  {name: "Verified", data: @verified_users},
-  {name: "Unverified", data: @unverified_users}
-]
+```erb
+<% series = [
+  {name: "Inactive", data: @inactive_properties},
+  {name: "Active", data: @active_properties}
+] %>
 ```
-To build the data, you can use gem [groupdate](https://github.com/ankane/groupdate).
+To build the data, you can use gem [groupdate](https://github.com/ankane/groupdate).  
+In my case, it was:
 
-Example options used for mixable charts:
+```ruby
+@inactive_properties = Property.inactive.group_by_week(:created_at).count
+@active_properties = Property.active.group_by_week(:created_at).count
+```
 
+and I'll get the data in this format:
 ```ruby
-options = {
-  title: 'Users Growth',
-  subtitle: 'Grouped Per Week',
-  xtitle: 'Week', ytitle: 'Users'
+{
+  Sun, 29 Jul 2018=>1,
+  Sun, 05 Aug 2018=>6,
+  ..
 }
 ```
 
+Example options used for cartesian charts:
+
+```erb
+<% options = {
+  title: 'Properties Growth',
+  subtitle: 'Grouped Per Week',
+  xtitle: 'Week',
+  ytitle: 'Properties',
+  stacked: true
+} %>
+```
+
 #### Line Chart
 
-```ruby
+```erb
 <%= line_chart(series, options) %>
 ```
+![Example Line Chart](images/line_chart.png)
+
 
 #### Area Chart
 
-```ruby
-<%= area_chart(series, options) %>
+```erb
+<%= area_chart(series, {**options, theme: 'palette5'}) %>
 ```
+![Example Area Chart](images/area_chart.png)
+
 
 #### Column Chart
 
-```ruby
-<%= column_chart(series, options) %>
+```erb
+<%= column_chart(series, {**options, theme: 'palette4'}) %>
 ```
+![Example Column Chart](images/column_chart.png)
+
 
 #### Bar Chart
 
-```ruby
-<%= bar_chart(series, options) %>
+```erb
+<%= bar_chart(series, {**options, xtitle: 'Properties', ytitle: 'Week', height: 800, theme: 'palette7'}) %>
 ```
+![Example Bar Chart](images/bar_chart.png)
+
 
 #### Scatter Chart
 
-```ruby
-<%= scatter_chart(series, options) %>
+```erb
+<%= scatter_chart(series, {**options, theme: 'palette3'}) %>
 ```
+![Example Scatter Chart](images/scatter_chart.png)
 
-All charts can have annotations, for example:
 
+#### Mixed Chart
+
+You can mix charts by using `mixed_chart` or `combo_chart` methods. For example:  
+Given that:
 ```ruby
+@total_properties = Property.group_by_week(:created_at).count
+```
+you can do this:
+```erb
+<%= combo_chart({**options, theme: 'palette4', stacked: false, data_labels: false}) do %>
+  <% line_chart({name: "Total", data: @total_properties}) %>
+  <% area_chart({name: "Active", data: @active_properties}) %>
+  <% column_chart({name: "Inactive", data: @inactive_properties}) %>
+<% end %>
+```
+![Example Mixed Chart](images/mixed_chart.gif)
+
+
+#### Syncing Chart
+You can synchronize charts by using `syncing_chart` or `synchronized_chart` methods. For example:
+```erb
+<%= syncing_chart(chart: {toolbar: false}, height: 250, style: 'display: inline-block; width: 32%;') do %>
+  <% mixed_chart(theme: 'palette4', data_labels: false) do %>
+    <% line_chart({name: "Total", data: @total_properties}) %>
+    <% area_chart({name: "Active", data: @active_properties}) %>
+  <% end %>
+  <% area_chart({name: "Active", data: @active_properties}, theme: 'palette6') %>
+  <% line_chart({name: "Inactive", data: @active_properties}, theme: 'palette8') %>
+<% end %>
+```
+![Example Syncing Chart](images/syncing_chart.gif)
+
+
+#### Annotations
+
+All cartesian charts can have annotations, for example:
+
+```erb
 <%= line_chart(series, options) do %>
-  <% x_annotation(value: ('2018-11-18'..'2018-12-02'),
-                  text: "Busy Time", color: 'green') %>
-  <% y_annotation(value: 59, text: "Max Users", color: 'blue') %>
-  <% point_annotation(value: ['2018-07-22', 12],
-                      text: "First Peak", color: 'magenta') %>
+  <% x_annotation(value: ('2019-01-06'..'2019-02-24'), text: "Busy Time", color: 'green') %>
+  <% y_annotation(value: 29, text: "Max Properties", color: 'blue') %>
+  <% point_annotation(value: ['2018-10-07', 24], text: "First Peak", color: 'magenta') %>
 <% end %>
 ```
+![Example Line Chart with Annotations](images/chart_with_annotations.png)
+
+
+### Polar Charts
+
+#### Pie Chart
+
+```erb
+<%= pie_chart([
+  {name: "Series A", data: 25},
+  {name: "Series B", data: 100},
+  {name: "Series C", data: 200},
+  {name: "Series D", data: 125}
+], legend: "left") %>
+```
+![Example Pie Chart](images/pie_chart.gif)
+
+
+#### Donut Chart
+
+```erb
+<%= donut_chart([25, 100, 200, 125], theme: 'palette4' %>
+```
+![Example Pie Chart](images/donut_chart.gif)
+
+
+#### Radial Bar Chart
+
+Also called `circle_chart`.
+```erb
+<%= radial_bar_chart([
+  {name: "Circle A", data: 25},
+  {name: "Circle B", data: 40},
+  {name: "Circle C", data: 80},
+  {name: "Circle D", data: 45}
+], legend: true) %>
+```
+![Example Circle Chart](images/radial_bar_chart.gif)
+
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'apexcharts'
+```
+
+And then execute:
+```bash
+$ bundle
+```
 
-![Example Line Chart with Annotations](images/example-annotations.png)
 
-## Web Framework
+## Web Support
 
 ### Rails
 
@@ -122,11 +214,16 @@ require("apexcharts")
 - To bring out as much apexcharts.js capabilities as possible but in ruby ways.
 
 ## Roadmap
-- Other charts (pie, donut, radar, heatmap, etc.)
+- Other charts (~~pie~~, ~~donut~~, radar, heatmap, etc.)
 - Support other ruby frameworks (sinatra, hanami, etc.)
+- Render as Vue or React elements
 
 ## Contributing
-Contribution directions go here.
+Everyone is encouraged to help improve this project by:
+- Reporting bugs
+- Fixing bugs and submiting pull requests
+- Fixing documentation
+- Suggesting new features
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/apexcharts/charts/cartesian.rb

@@ -9,11 +9,11 @@ module Apexcharts
       instance_eval &block if block_given?
 
       options[:annotations] = @annotations if @annotations
-      @data = sanitize_data(data)
+      @series = sanitize_data(data)
       @options = Utils::Hash.camelize_keys(
                    Utils::Hash.deep_merge(
-                     build_options(@data[0][:data][0][:x], options),
-                     {series: @data, chart: {type: chart_type}}.compact
+                     build_options(@series[:series][0][:data][0][:x], options),
+                     {**@series, chart: {type: chart_type}}.compact
                    )
                  )
     end
@@ -26,8 +26,8 @@ module Apexcharts
     end
 
     def mixed_series
-      @data.each{|d| d.merge!(type: chart_type) }
-      @data
+      @series[:series].each{|d| d.merge!(type: chart_type) }
+      @series[:series]
     end
 
     def render

data/lib/apexcharts/charts/donut.rb

@@ -0,0 +1,8 @@
+module Apexcharts
+  class DonutChart < PolarChart
+    def chart_type
+      'donut'
+    end
+  end
+end
+

data/lib/apexcharts/charts/mixed.rb

@@ -4,37 +4,37 @@ module Apexcharts
 
     def initialize options={}, bindings, &block
       @bindings = bindings
-      @mixed_series = []
+      @mixed_series = {series: []}
       build_instance_variables
       instance_eval &block
 
       options[:annotations] = @annotations if @annotations
       @options = Utils::Hash.camelize_keys(
                    Utils::Hash.deep_merge(
-                     build_options(@mixed_series[0][:data][0][:x], options),
-                     {chart: {type: 'area'}, series: @mixed_series}
+                     build_options(@mixed_series[:series][0][:data][0][:x], options),
+                     {chart: {type: 'area'}, **@mixed_series}
                    )
                  )
     end
 
     def line_chart data, options={}, &block
-      @mixed_series += LineChart.new(data, options, &block).mixed_series
+      @mixed_series[:series] += LineChart.new(data, options, &block).mixed_series
     end
 
     def area_chart data, options={}, &block
-      @mixed_series += AreaChart.new(data, options, &block).mixed_series
+      @mixed_series[:series] += AreaChart.new(data, options, &block).mixed_series
     end
 
     def bar_chart data, options={}, &block
-      @mixed_series += BarChart.new(data, options, &block).mixed_series
+      @mixed_series[:series] += BarChart.new(data, options, &block).mixed_series
     end
 
     def column_chart data, options={}, &block
-      @mixed_series += ColumnChart.new(data, options, &block).mixed_series
+      @mixed_series[:series] += ColumnChart.new(data, options, &block).mixed_series
     end
 
     def scatter_chart data, options={}, &block
-      @mixed_series += ScatterChart.new(data, options, &block).mixed_series
+      @mixed_series[:series] += ScatterChart.new(data, options, &block).mixed_series
     end
 
     def render

data/lib/apexcharts/charts/pie.rb

@@ -0,0 +1,8 @@
+module Apexcharts
+  class PieChart < PolarChart
+    def chart_type
+      'pie'
+    end
+  end
+end
+

data/lib/apexcharts/charts/polar.rb

@@ -0,0 +1,43 @@
+module Apexcharts
+  class PolarChart
+    def initialize data, options={}
+      @series = sanitize_data(data)
+      @options = Utils::Hash.camelize_keys(
+                   Utils::Hash.deep_merge(
+                     build_options(options),
+                     {**@series, chart: {type: chart_type}}.compact
+                   )
+                 )
+    end
+
+    def chart_type
+    end
+
+    def render
+      attributes = @options.delete(:div)
+      variable = attributes.delete(:var) || "chart#{attributes[:id][/\d+/]}"
+      element_id = attributes.delete(:id)
+      css_class = attributes.delete(:class)
+      height = "#{@options[:chart][:height].to_i}px"
+      style = "height: #{height}; #{attributes.delete(:style)}"
+      html =<<~HTML
+        <div id="#{element_id}" class="#{css_class}" style="#{style}"></div>
+        <script type="text/javascript">
+          var #{variable} = new ApexCharts(document.querySelector("##{element_id}"), #{@options.to_json});
+          #{variable}.render();
+        </script>
+      HTML
+    end
+
+  private
+
+    def sanitize_data(data)
+      Apexcharts::PolarSeries.new(data).sanitized
+    end
+
+    def build_options(options)
+      Apexcharts::OptionsBuilder.new(nil, options).built
+    end
+  end
+end
+

data/lib/apexcharts/charts/radial_bar.rb

@@ -0,0 +1,8 @@
+module Apexcharts
+  class RadialBarChart < PolarChart
+    def chart_type
+      'radialBar'
+    end
+  end
+end
+

data/lib/apexcharts/charts/syncing.rb

@@ -7,7 +7,7 @@ module Apexcharts
       @options = options
       instance_eval &block
 
-      @options[:annotations] = @_annotations if @_annotations
+      @options[:annotations] = @annotations if @annotations
     end
 
     def line_chart data, options={}, &block

data/lib/apexcharts/charts.rb

@@ -6,3 +6,7 @@ require_relative 'charts/column'
 require_relative 'charts/scatter'
 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'

data/lib/apexcharts/helper.rb

@@ -5,32 +5,33 @@ require_relative 'charts'
 
 module Apexcharts
   module Helper
-    def line_chart data, options={}, &block
-      options[:id] ||= apexcharts_id
-      draw_chart(LineChart.new(data, options, &block))
+    def line_chart series, options={}, &block
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(LineChart.new(series, options, &block))
     end
 
-    def area_chart data, options={}, &block
-      options[:id] ||= apexcharts_id
-      draw_chart(AreaChart.new(data, options, &block))
+    def area_chart series, options={}, &block
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(AreaChart.new(series, options, &block))
     end
 
-    def column_chart data, options={}, &block
-      options[:id] ||= apexcharts_id
-      draw_chart(ColumnChart.new(data, options, &block))
+    def column_chart series, options={}, &block
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(ColumnChart.new(series, options, &block))
     end
 
-    def bar_chart data, options={}, &block
-      options[:id] ||= apexcharts_id
-      draw_chart(BarChart.new(data, options, &block))
+    def bar_chart series, options={}, &block
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(BarChart.new(series, options, &block))
     end
 
-    def scatter_chart data, options={}, &block
-      options[:id] ||= apexcharts_id
-      draw_chart(ScatterChart.new(data, options, &block))
+    def scatter_chart series, options={}, &block
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(ScatterChart.new(series, options, &block))
     end
 
     def mixed_chart options={}, &block
+      options = deep_copy(options)
       options[:id] ||= apexcharts_id
       bindings = eval "self", block.binding
       draw_chart(MixedChart.new(options, bindings, &block))
@@ -38,12 +39,29 @@ module Apexcharts
     alias_method :combo_chart, :mixed_chart
 
     def syncing_chart options={}, &block
+      options = deep_copy(options)
       options[:group] ||= apexcharts_group
       bindings = eval "self", block.binding
       draw_chart(SyncingChart.new(options, bindings, &block))
     end
     alias_method :synchronized_chart, :syncing_chart
 
+    def pie_chart series, options={}
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(PieChart.new(series, options))
+    end
+
+    def donut_chart series, options={}
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(DonutChart.new(series, options))
+    end
+
+    def radial_bar_chart series, options={}
+      series, options = prepare_series_and_options(series, options)
+      draw_chart(RadialBarChart.new(series, options))
+    end
+    alias_method :circle_chart, :radial_bar_chart
+
   private
 
     def draw_chart chart
@@ -51,6 +69,13 @@ module Apexcharts
       chart.respond_to?(:html_safe) ? chart.html_safe : chart
     end
 
+    def prepare_series_and_options series, options
+      series = deep_copy(series)
+      options = deep_copy(options)
+      options[:id] ||= apexcharts_id
+      [series, options]
+    end
+
     def apexcharts_id
       @_apexcharts_id ||= 0
       @_apexcharts_id += 1
@@ -62,5 +87,9 @@ module Apexcharts
       @_apexcharts_group += 1
       "chart-group-#{@_apexcharts_group}"
     end
+
+    def deep_copy(options)
+      Marshal.load(Marshal.dump(options))
+    end
   end
 end

data/lib/apexcharts/options_builder.rb

@@ -24,7 +24,11 @@ module Apexcharts
 
     def initialize(x_sample, options)
       @options = options
-      @xtype = Utils::DateTime.xtype(x_sample)
+      if options[:plot_options]&.[](:bar)&.[](:horizontal)
+        @ytype = Utils::DateTime.type(x_sample)
+      else
+        @xtype = Utils::DateTime.type(x_sample)
+      end
       @built = {}
       build_options
       @built.compact!
@@ -133,11 +137,13 @@ module Apexcharts
     end
 
     def build_legend
-      labels = @options.delete :labels
-      @built[:legend] = if [true, false].include? labels
-                          {show: labels}
-                        elsif labels.is_a? Hash
-                          LegendOptions.check labels.compact
+      legend = @options.delete :legend
+      @built[:legend] = if [true, false].include? legend
+                          {show: legend}
+                        elsif legend.is_a? String
+                          {show: true, position: legend}
+                        elsif legend.is_a? Hash
+                          LegendOptions.check legend.compact
                         end
     end
 
@@ -278,7 +284,7 @@ module Apexcharts
     def build_yaxis
       yaxis = @options.delete :yaxis
       @built[:yaxis] = [{
-        type: @options.delete(:ytype),
+        type: @options.delete(:ytype){ @ytype },
         title: {
           text: @options.delete(:ytitle)
         }.compact
@@ -292,7 +298,7 @@ module Apexcharts
       end
     end
 
-    def xtype(x)
+    def type(x)
       if DateTime.iso8601(x).iso8601 == x
         'datetime'
       elsif Date.iso8601(x).iso8601 = x

data/lib/apexcharts/series/cartesian.rb

@@ -1,6 +1,6 @@
 module Apexcharts
   class CartesianSeries
-    attr_accessor :sanitized
+    attr_reader :sanitized
 
     def initialize(data)
       if data.is_a?(Array)
@@ -17,7 +17,7 @@ module Apexcharts
         @sanitized = sanitized.map{|a| {data: a} }
       end
 
-      @sanitized = sanitized.each {|a| a[:data] = a[:data].map{|k,v| {x: k, y: v} } }
+      @sanitized = {series: sanitized.each {|a| a[:data] = a[:data].map{|k,v| {x: k, y: v} } } }
     end
   end
 end

data/lib/apexcharts/series/polar.rb

@@ -0,0 +1,27 @@
+module Apexcharts
+  class PolarSeries
+    attr_reader :sanitized
+
+    def initialize(data)
+      @labels = []
+      if data.is_a? Array
+        if data.first.is_a? Numeric
+          @series = data
+        elsif data.first.is_a? Hash
+          @labels = data.map{|m| m[:name] }.compact
+          @series = data.map{|m| m[:data] }
+        end
+      elsif data.is_a? Hash
+        if data[:data].is_a? Array
+          @series = data[:data]
+        end
+      end
+
+      @sanitized = {
+        labels: @labels.empty? ? nil : @labels,
+        series: @series
+      }.compact
+    end
+  end
+end
+

data/lib/apexcharts/series.rb

@@ -1 +1,2 @@
 require_relative 'series/cartesian'
+require_relative 'series/polar'

data/lib/apexcharts/utils/date_time.rb

@@ -36,14 +36,10 @@ module Apexcharts::Utils
       input
     end
 
-    def self.xtype input
+    def self.type input
       case input
-      when Time
-        'datetime'
-      when DateTime, Date
+      when Time, DateTime, Date
         'datetime'
-      when Date
-        'date'
       else
         if DateTime.iso8601(input).iso8601 == input
           'datetime'

data/lib/apexcharts/version.rb

@@ -1,3 +1,3 @@
 module Apexcharts
-  VERSION = '0.1.1'
+  VERSION = '0.1.2'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: apexcharts
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Adrian Setyadi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-13 00:00:00.000000000 Z
+date: 2019-06-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: smart_kv
@@ -96,8 +96,12 @@ files:
 - lib/apexcharts/charts/capabilities/annotations.rb
 - lib/apexcharts/charts/cartesian.rb
 - lib/apexcharts/charts/column.rb
+- lib/apexcharts/charts/donut.rb
 - lib/apexcharts/charts/line.rb
 - lib/apexcharts/charts/mixed.rb
+- lib/apexcharts/charts/pie.rb
+- lib/apexcharts/charts/polar.rb
+- lib/apexcharts/charts/radial_bar.rb
 - lib/apexcharts/charts/scatter.rb
 - lib/apexcharts/charts/syncing.rb
 - lib/apexcharts/helper.rb
@@ -124,6 +128,7 @@ files:
 - lib/apexcharts/options_builder.rb
 - lib/apexcharts/series.rb
 - lib/apexcharts/series/cartesian.rb
+- lib/apexcharts/series/polar.rb
 - lib/apexcharts/support/rails.rb
 - lib/apexcharts/utils.rb
 - lib/apexcharts/utils/date_time.rb