apexcharts 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e6b3b98ec99c06971c628785c5cad67c383761d510143618f44eb35d66b14b64
+  data.tar.gz: 5529e49eb4a68568e307d811405252b7edb9917e9d2f1f0d3747974cb4846490
+SHA512:
+  metadata.gz: 27524883c3b7bc5fd74d61dce05996807e891b6a8162ba3443618060a60ccdbf211b47d1f8bccd6d23f3f724247bbf9ccb3035b2366d62ac66dd504f4088c23e
+  data.tar.gz: 8be3f7162a6df1afdd91178f12576594932755e11152ab7b4d1f2a8b7ffd15d17d7ca01ccb62e96de3c10b0217df29fb9f68ad82bda2004b97ae642bac195c9b

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright 2019 Adrian Setyadi
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,132 @@
+<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">
+</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>
+</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:
+
+```ruby
+series = [
+  {name: "Total", data: @total_users},
+  {name: "Verified", data: @verified_users},
+  {name: "Unverified", data: @unverified_users}
+]
+```
+To build the data, you can use gem [groupdate](https://github.com/ankane/groupdate).
+
+Example options used for mixable charts:
+
+```ruby
+options = {
+  title: 'Users Growth',
+  subtitle: 'Grouped Per Week',
+  xtitle: 'Week', ytitle: 'Users'
+}
+```
+
+#### Line Chart
+
+```ruby
+<%= line_chart(series, options) %>
+```
+
+#### Area Chart
+
+```ruby
+<%= area_chart(series, options) %>
+```
+
+#### Column Chart
+
+```ruby
+<%= column_chart(series, options) %>
+```
+
+#### Bar Chart
+
+```ruby
+<%= bar_chart(series, options) %>
+```
+
+#### Scatter Chart
+
+```ruby
+<%= scatter_chart(series, options) %>
+```
+
+All charts can have annotations, for example:
+
+```ruby
+<%= 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') %>
+<% end %>
+```
+
+![Example Line Chart with Annotations](images/example-annotations.png)
+
+## Web Framework
+
+### Rails
+
+After installing the gem, require it in your `app/assets/javascripts/application.js`.
+```js
+//= require 'apexcharts'
+```
+
+Or, if you use `webpacker`, you can run:
+```bash
+yarn add apexcharts
+```
+and then require it in your `app/javascript/packs/application.js`.
+```js
+require("apexcharts")
+```
+
+## Objective
+- To bring out as much apexcharts.js capabilities as possible but in ruby ways.
+
+## Roadmap
+- Other charts (pie, donut, radar, heatmap, etc.)
+- Support other ruby frameworks (sinatra, hanami, etc.)
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/apexcharts/charts/area.rb

@@ -0,0 +1,7 @@
+module Apexcharts
+  class AreaChart < CartesianChart
+    def chart_type
+      'area'
+    end
+  end
+end

data/lib/apexcharts/charts/bar.rb

@@ -0,0 +1,11 @@
+module Apexcharts
+  class BarChart < CartesianChart
+    def chart_type
+      'bar'
+    end
+
+    def plot_options
+      {plot_options: {bar: {horizontal: true}}}
+    end
+  end
+end

data/lib/apexcharts/charts/capabilities/annotations.rb

@@ -0,0 +1,75 @@
+module Apexcharts
+  module Annotations
+    def annotation(position, value:, text:, color: nil, **options)
+      @annotations ||= {}
+
+      unless [:xaxis, :yaxis, :points].include? position
+        raise "unrecognized position: #{position}"
+      end
+      @annotations[position] ||= []
+      @annotations[position] << annotation_value(position, value).merge(
+                                   if position == :points
+                                     {marker: {size: 8, fillColor: 'white', strokeColor: color, radius: 2}, **options}
+                                   else
+                                     {borderColor: color, fillColor: color, opacity: 0.2}
+                                   end
+                                 ).merge(
+                                   annotation_label(text, color, **options)
+                                 )
+    end
+
+    def x_annotation **args
+      annotation :xaxis, **args
+    end
+
+    def y_annotation **args
+      annotation :yaxis, **args
+    end
+
+    def point_annotation **args
+      annotation :points, **args
+    end
+
+  private
+
+    def annotation_value position, value
+      position = position.to_s.delete_suffix('axis').to_sym
+      case value
+      when Range
+        value = Utils::DateTime.convert_range(value)
+
+        case position
+        when :x
+          {x: value.first, x2: value.last}
+        when :y
+          {y: value.first, y2: value.last}
+        else
+          raise "position :points doesn't accept value of type Range"
+        end
+      else
+        if position == :points
+          value.map!{ |x| Utils::DateTime.convert(x) }
+          {x: value.first, y: value.last}
+        else
+          value = Utils::DateTime.convert(value)
+          {position => value}
+        end
+      end
+    end
+
+    def annotation_label text, color, **options
+      {
+        label: {
+          borderColor: color,
+          style: {
+            color: 'white',
+            background: color
+          },
+          text: text
+        }, **options
+      }
+    end
+
+    include Utils::Hash
+  end
+end

data/lib/apexcharts/charts/cartesian.rb

@@ -0,0 +1,60 @@
+require_relative 'capabilities/annotations'
+
+module Apexcharts
+  class CartesianChart
+    include Annotations
+
+    def initialize data, options={}, &block
+      options = {**options, **plot_options}
+      instance_eval &block if block_given?
+
+      options[:annotations] = @annotations if @annotations
+      @data = 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
+                   )
+                 )
+    end
+
+    def chart_type
+    end
+
+    def plot_options
+      {}
+    end
+
+    def mixed_series
+      @data.each{|d| d.merge!(type: chart_type) }
+      @data
+    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::CartesianSeries.new(data).sanitized
+    end
+
+    def build_options(x_sample, options)
+      Apexcharts::OptionsBuilder.new(x_sample, options).built
+    end
+  end
+end
+

data/lib/apexcharts/charts/column.rb

@@ -0,0 +1,7 @@
+module Apexcharts
+  class ColumnChart < BarChart
+    def plot_options
+      {plot_options: {bar: {horizontal: false}}}
+    end
+  end
+end

data/lib/apexcharts/charts/line.rb

@@ -0,0 +1,7 @@
+module Apexcharts
+  class LineChart < CartesianChart
+    def chart_type
+      'line'
+    end
+  end
+end

data/lib/apexcharts/charts/mixed.rb

@@ -0,0 +1,72 @@
+module Apexcharts
+  class MixedChart
+    include Annotations
+
+    def initialize options={}, bindings, &block
+      @bindings = bindings
+      @mixed_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}
+                   )
+                 )
+    end
+
+    def line_chart data, options={}, &block
+      @mixed_series += LineChart.new(data, options, &block).mixed_series
+    end
+
+    def area_chart data, options={}, &block
+      @mixed_series += AreaChart.new(data, options, &block).mixed_series
+    end
+
+    def bar_chart data, options={}, &block
+      @mixed_series += BarChart.new(data, options, &block).mixed_series
+    end
+
+    def column_chart data, options={}, &block
+      @mixed_series += ColumnChart.new(data, options, &block).mixed_series
+    end
+
+    def scatter_chart data, options={}, &block
+      @mixed_series += ScatterChart.new(data, options, &block).mixed_series
+    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
+
+    def method_missing method, *args, &block
+      @bindings.send method, *args, &block
+    end
+
+  private
+
+    def build_instance_variables
+      (@bindings.instance_variables - instance_variables).each do |i|
+        instance_variable_set(i, @bindings.instance_variable_get(i))
+      end
+    end
+
+    def build_options(x_sample, options)
+      Apexcharts::OptionsBuilder.new(x_sample, options).built
+    end
+  end
+end

data/lib/apexcharts/charts/scatter.rb

@@ -0,0 +1,7 @@
+module Apexcharts
+  class ScatterChart < CartesianChart
+    def chart_type
+      'scatter'
+    end
+  end
+end

data/lib/apexcharts/charts/syncing.rb

@@ -0,0 +1,61 @@
+module Apexcharts
+  class SyncingChart
+    def initialize options={}, bindings, &block
+      @bindings = bindings
+      @html = ""
+      build_instance_variables
+      @options = options
+      instance_eval &block
+
+      @options[:annotations] = @_annotations if @_annotations
+    end
+
+    def line_chart data, options={}, &block
+      options[:id] = apexcharts_id
+      @html += LineChart.new(data, @options.merge(options), &block).render
+    end
+
+    def area_chart data, options={}, &block
+      options[:id] = apexcharts_id
+      @html += AreaChart.new(data, @options.merge(options), &block).render
+    end
+
+    def bar_chart data, options={}, &block
+      options[:id] = apexcharts_id
+      @html += BarChart.new(data, @options.merge(options), &block).render
+    end
+
+    def column_chart data, options={}, &block
+      options[:id] = apexcharts_id
+      @html += ColumnChart.new(data, @options.merge(options), &block).render
+    end
+
+    def scatter_chart data, options={}, &block
+      options[:id] = apexcharts_id
+      @html += ScatterChart.new(data, @options.merge(options), &block).render
+    end
+
+    def mixed_chart options={}, &block
+      options[:id] = apexcharts_id
+      bindings = eval "self", block.binding
+      @html += MixedChart.new(@options.merge(options), bindings, &block).render
+    end
+    alias_method :combo_chart, :mixed_chart
+
+    def render
+      @html
+    end
+
+    def method_missing method, *args, &block
+      @bindings.send method, *args, &block
+    end
+
+  private
+
+    def build_instance_variables
+      (@bindings.instance_variables - instance_variables).each do |i|
+        instance_variable_set(i, @bindings.instance_variable_get(i))
+      end
+    end
+  end
+end

data/lib/apexcharts/charts.rb

@@ -0,0 +1,8 @@
+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/mixed'
+require_relative 'charts/syncing'

data/lib/apexcharts/helper.rb

@@ -0,0 +1,66 @@
+require_relative 'series'
+require_relative 'options_builder'
+require_relative 'utils'
+require_relative 'charts'
+
+module Apexcharts
+  module Helper
+    def line_chart data, options={}, &block
+      options[:id] ||= apexcharts_id
+      draw_chart(LineChart.new(data, options, &block))
+    end
+
+    def area_chart data, options={}, &block
+      options[:id] ||= apexcharts_id
+      draw_chart(AreaChart.new(data, options, &block))
+    end
+
+    def column_chart data, options={}, &block
+      options[:id] ||= apexcharts_id
+      draw_chart(ColumnChart.new(data, options, &block))
+    end
+
+    def bar_chart data, options={}, &block
+      options[:id] ||= apexcharts_id
+      draw_chart(BarChart.new(data, options, &block))
+    end
+
+    def scatter_chart data, options={}, &block
+      options[:id] ||= apexcharts_id
+      draw_chart(ScatterChart.new(data, options, &block))
+    end
+
+    def mixed_chart options={}, &block
+      options[:id] ||= apexcharts_id
+      bindings = eval "self", block.binding
+      draw_chart(MixedChart.new(options, bindings, &block))
+    end
+    alias_method :combo_chart, :mixed_chart
+
+    def syncing_chart options={}, &block
+      options[:group] ||= apexcharts_group
+      bindings = eval "self", block.binding
+      draw_chart(SyncingChart.new(options, bindings, &block))
+    end
+    alias_method :synchronized_chart, :syncing_chart
+
+  private
+
+    def draw_chart chart
+      chart = chart.render
+      chart.respond_to?(:html_safe) ? chart.html_safe : chart
+    end
+
+    def apexcharts_id
+      @_apexcharts_id ||= 0
+      @_apexcharts_id += 1
+      "chart-#{@_apexcharts_id}"
+    end
+
+    def apexcharts_group
+      @_apexcharts_group ||= 0
+      @_apexcharts_group += 1
+      "chart-group-#{@_apexcharts_group}"
+    end
+  end
+end

data/lib/apexcharts/options/annotations.rb

@@ -0,0 +1,10 @@
+module Apexcharts
+  class AnnotationsOptions < ::SmartKv
+    optional *%i[
+                  points
+                  position
+                  xaxis
+                  yaxis
+                ]
+  end
+end

data/lib/apexcharts/options/axis.rb

@@ -0,0 +1,17 @@
+module Apexcharts
+  class AxisOptions < ::SmartKv
+    optional *%i[
+                  axis_border  axisBorder
+                  axis_ticks   axisTicks
+                  crosshairs
+                  floating
+                  labels
+                  max
+                  min
+                  tick_amount  tickAmount
+                  title
+                  tooltip
+                  type
+                ]
+  end
+end

data/lib/apexcharts/options/chart.rb

@@ -0,0 +1,24 @@
+module Apexcharts
+  class ChartOptions < ::SmartKv
+    optional *%i[ animations
+                  background
+                  brush
+                  default_locale  defaultLocale
+                  drop_shadow     dropShadow
+                  events
+                  font_family     fontFamily
+                  fore_color      foreColor
+                  height
+                  id
+                  locales
+                  selection
+                  sparkline
+                  stack_type      stackType
+                  stacked
+                  toolbar
+                  type
+                  width
+                  zoom
+                ]
+  end
+end

data/lib/apexcharts/options/data_labels.rb

@@ -0,0 +1,12 @@
+module Apexcharts
+  class DataLabelsOptions < ::SmartKv
+    optional *%i[
+                  drop_shadow  dropShadow
+                  enabled
+                  offset_x     offsetX
+                  offset_y     offsetY
+                  style
+                  text_anchor  textAnchor
+                ]
+  end
+end

data/lib/apexcharts/options/div_attributes.rb

@@ -0,0 +1,10 @@
+module Apexcharts
+  class DivAttributes < ::SmartKv
+    optional *%i[
+                  class
+                  id
+                  style
+                ]
+  end
+end
+

data/lib/apexcharts/options/fill.rb

@@ -0,0 +1,12 @@
+module Apexcharts
+  class FillOptions < ::SmartKv
+    optional *%i[
+                  colors
+                  gradient
+                  image
+                  opacity
+                  pattern
+                  type
+                ]
+  end
+end

data/lib/apexcharts/options/grid.rb

@@ -0,0 +1,15 @@
+module Apexcharts
+  class GridOptions < ::SmartKv
+    optional *%i[
+                  border_color       borderColor
+                  column
+                  padding
+                  position
+                  row
+                  show
+                  stroke_dash_array  strokeDashArray
+                  xaxis
+                  yaxis
+                ]
+  end
+end