volt-highcharts 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c3d80171d3265558b6ae56c93561728293fbaf8e
-  data.tar.gz: 625467100a4c7cd3aa655cb3674ee42d0a825a64
+  metadata.gz: 57bc486e2e61cd1b390da2fb6cba28705479531f
+  data.tar.gz: 2f1a36ef4888500b8933201f7cd533a0a774a20d
 SHA512:
-  metadata.gz: e56df08f4f33341d83895f5cb9973393c73079149f4432a95ff8ebe67493e96d9ce6ab0311e2fc3c00f879d8455ca9f914c6e165575cf5f73a20d19825a6f5fd
-  data.tar.gz: c1911fe995e81aef5efc4b1281eb63f44ed5e82295f6c4c51125d0b8b3d9ed4cc1165574a35d290e533132787767576646a22f8319584553124b77bb9fb34191
+  metadata.gz: f45e348902daac3c71b825bcddbf8c7797ee3aed492a0718684062fd4ff56237c6fe4e62f9cf02a74bf0744caf9c39961c173d00c6f26f6034670d93a1ea9e25
+  data.tar.gz: 13aee26ca775e5e626688967d2365ce9314197f15ac0dc1cb49c27f2fffeab6d0bc7f5ec9e9fcd31a09605070690b9befd518a6c2514b785ab6a872829a8e04c

data/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log
+
+## 0.1.1
+
+- now uses opal-highcharts gem  
+- first steps towards reactivitiy
+- a chart is reactive if options are provided as a Volt::Model
+- a chart is non-reactive if options are provided as a Hash  
+
+### opal-highcharts
+a gem which wraps most Highcharts and Highstock functionality in a client-side Ruby API.
+- https://github.com/balmoral/opal-highcharts
+- https://rubygems.org/gems/opal-highcharts
+
+
+
+

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2015 balmoral
+Copyright (c) 2015 Colin Gunn
 
 MIT License
 

data/README.md

@@ -2,9 +2,13 @@
 
 A Volt component wrapping the Highcharts javascript charting tool.
 
+It depends on opal-highcharts, a gem which wraps most Highcharts and Highstock functionality in a client-side Ruby API.
+
 Highcharts is free for non-commercial use.
 
 http://www.highcharts.com/products/highcharts
+http://github.com/balmoral/volt-highcharts
+https://rubygems.org/gems/volt-highcharts
 
 ## Installation
 
@@ -36,20 +40,25 @@ Pass a Ruby hash containing chart options in the appropriate view html file:
 <:highcharts chart="{{ chart_options }}" />
 ```
 
-where `chart_options` is provided by your controller or model. Any object which responds to #to_h may be used, including of course a Volt::Model.
+where `chart_options` is a Volt::Model or Hash provided by your controller or model. 
+
+Reactivity is now supported. 
 
+To implement a reactive chart, the options provided on chart creation should be wrapped in a Volt::Model.
+
+NB reactivity is currently limited to chart titles, number of series, and individual series options and data. More coming soon.
+  
 Documentation for Highcharts options can be found at: http://api.highcharts.com/highcharts#chart.
 
-At present only a copy of the chart options are passed to Highcharts so the binding will not update the chart automatically.
- 
-For convenience, the last chart added can simply be accessed as ```page._chart```, wrapped by Opal's Native().
+For convenience, the last chart added can be accessed as ```page._chart```. 
+The object returned is a Highcharts::Chart, which can be used to directly query and manipulate the chart (see opal-highcharts).
  
 To query or modify multiple chart(s) on the page a unique :id should be set in each chart's options. 
 
 For example:
 ```
     def fruit_chart_options
-      {
+      Volt::Model.new( {
         # to identity the chart in volt
         id: 'fruit_chart',
         
@@ -79,7 +88,7 @@ For example:
           },
           ...
         ]
-      }
+      } )
     end
 ```
 
@@ -95,36 +104,22 @@ For example, in your controller you might have a method to return the native cha
 ```
 If you only have one chart on the page use ```page._chart```.
 
-You can dynamically query or modify the chart(s) using Opal's Native() or inline scripting.
-
-The chart object(s) found in ```page._chart``` and ```page._charts``` have been wrapped in Opal's Native(). This is because Volt::Model and Volt::ArrayModel can only hold Ruby objects.   
-
-Opal's Native() wraps a JS object to provide access to properties and functions in the JS object via Ruby method calls. As of writing (July 30, 2015) Native has not yet been documented. If you prefer to use backticks or %x{} to inline JS code you can get the JS object using #to_n.
-
-For example, to change a series in a chart using Native(), you might do:
-```
-  def update_sales
-    e = page._charts.find { |e| e._id == 'sales' }
-    series = Native(e._chart.series)
-    Native(series[0]).setData(sales_data.to_n)
-  end
-```
-The equivalent using backticks is:
-```
-  def update_sales
-    native_chart = page._chart.to_n # get the native JS chart
-    native_data = sales_data.to_n # get native sales data
-    `native_chart.series[0].setData(native_data)`
-  end
-```
+With opal-highcharts, which completely wraps the Highcharts API in client-side Ruby (and comes bundled with volt-highcharts),
+you now have simple access to query and modify methods on the chart and all of its elements. No Native wraps or backticks required. 
 
-Always use #to_n to convert Ruby data to JS when passing to Highcharts.
+As reactivity support is improved, there should be less need for direct manipulation of the chart.
+ 
+## To do
 
-In the future we hope to provide a fully wrapped Ruby implementation of Highcharts.
+1. remove debug traces
+2. chart option/configuration checks
+3. improved documentation
+4. improved error handling
+5. finer grained reactivity?
 
 ## Contributing
 
-The author is new to things javascript, opal and volt, so contributions and suggestions are very welcome.
+Contributions, comments and suggestions are welcome.
  
 1. Fork it ( http://github.com/balmoral/volt-highcharts/fork )
 2. Create your feature branch (`git checkout -b my-new-feature`)

data/app/highcharts/config/dependencies.rb

@@ -1,2 +1,6 @@
 # Component dependencies
-javascript_file 'http://code.highcharts.com/highcharts.js'
+
+# highcharts.js is not required if highstock is loaded
+# javascript_file 'http://code.highcharts.com/highcharts.src.js'
+javascript_file 'http://code.highcharts.com/stock/highstock.src.js'
+# javascript_file 'http://code.highcharts.com/maps/highmaps.src.js'

data/app/highcharts/controllers/main_controller.rb

@@ -1,72 +1,168 @@
+if RUBY_PLATFORM == 'opal'
+
+require 'native'
+require 'opal-highcharts'
+
 module Highcharts
   class MainController < Volt::ModelController
 
+    attr_reader :chart, :watches, :watch_counts, :reactive
+
     def index_ready
-      Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : #{Time.now}")
-
-      # Get the containing html element.
-      container = self.container
-      Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : container='#{container}'")
-
-      opts = attrs.chart ? attrs.chart.to_h : missing_chart
-
-      # If the view hasn't set a container id then
-      # use the id in the chart options if present
-      # otherwise to a random id.
-      id = `$(container).prop("id")`
-      Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : initial container id is '#{id}'")
-      unless id == nil || id == 'undefined'
-        id = opts[:id] || random_id
-        Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : char container id is undefined - setting to '#{id}'")
-        `$(container).prop("id", id)`
+      set_model
+      create_chart
+      start_watching
+    end
+
+    def before_index_remove
+      stop_watching
+      update_page
+      @chart = nil
+    end
+
+    private
+
+    def set_model
+      options = attrs.options
+      unless options
+        raise ArgumentError, 'no options attribute set for :highcharts component'
+      end
+      # if the options are a Hash then convert to a Volt::Model
+      if options.is_a?(Volt::Model)
+        @reactive = true
+      else
+        options = Volt::Model.new(options)
+        @reactive = false
+      end
+      # set controller's model to options, which captures its methods for self
+      self.model = options
+      debug __method__, __LINE__, "model._id = #{_id}"
+    end
+
+    # Create the chart and add it to the page._charts.
+    # page._charts ia an array of Volt::Models with an id and a chart attribute.
+    # Also set page._chart to the newly (last) created Highcharts::Chart.
+    # Also set page._char_id to the id of the new (last) chart.
+    def create_chart
+      @chart = Highcharts::Chart.new(model.to_h)
+      page._charts << {id: _id, chart: @chart}
+      page._chart = @chart
+      page._chart_id = _id
+    end
+
+    # To be reactive we must watch for model changes
+    def start_watching
+      @watches = []
+      @watch_counts = {}
+      if reactive
+        watch_titles
+        watch_series
       end
+    end
+
+    def watch_titles
+      watches << -> do
+        setup_dependencies(_title)
+        setup_dependencies(_subtitle)
+        log_change "#{self.class.name}##{__method__}:#{__LINE__} : chart.set_title(#{_title.to_h} #{_subtitle.to_h})"
+        chart.set_title(_title.to_h, _subtitle.to_h, true) # redraw
+      end.watch!
+    end
 
-      # If :renderTo has been set in the options then it
-      # should match the id of the container, otherwise
-      # a Highcharts error #13 will occur. It should be
-      # unique in the page. We do not check here.
-      #
-      # If :renderTo has not been set in the options then
-      # it will be set here to the container id.
-      unless opts[:chart] && opts[:chart][:renderTo]
-        Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : setting opts[:chart][:renderTo]='#{id}'")
-        (opts[:chart] ||= {})[:renderTo] = id
+    def watch_series
+      @series_size = _series.size
+      watches << -> do
+        size = _series.size
+        if size == @series_size
+          _series.each_with_index do |a_series, index|
+            watches << -> do
+              log_change "@@@  _series[#{index}] changed", a_series
+              watches << -> do
+                data = a_series._data
+                log_change "@@@ _series[#{index}]._data changed", data
+                chart.series[index].set_data(data.to_a)
+              end.watch!
+              watches << -> do
+                title = a_series._title
+                log_change "@@@ _series[#{index}]._title changed", title
+              end.watch!
+              watches << -> do
+                setup_dependencies(a_series, nest: true, except: [:title, :data])
+                log_change "@@@ _series[#{index}] something other than _title or _data changed", nil
+                # chart.series[index].update(_series.to_h)
+              end
+            end.watch!
+          end
+        else
+          log_change "@@@  _series.size changed to ", size
+          @series_size = size
+          refresh_all_series
+        end
+      end.watch!
+    end
+
+    # Do complete refresh of all series:
+    # 1. remove all series from chart with no redraw
+    # 2. add all series in model to chart with no redraw
+    # 3. redraw chart
+    def refresh_all_series
+      until chart.series.empty? do
+        debug __method__, __LINE__, "chart.series[#{chart.series.size-1}].remove"
+        chart.series.last.remove(false)
       end
+      _series.each_with_index do |a_series, index|
+        debug __method__, __LINE__, "chart.add_series ##{index}"
+        chart.add_series(a_series.to_h, false)
+      end
+      debug __method__, __LINE__, "chart.redraw"
+      chart.redraw
+    end
 
-      # Render the chart and add it to the page._charts.
-      # _charts ia an array of Volt::Models with an id and a chart attribute.
-      @id = opts[:id] || id
-      chart = Native(`new Highcharts.Chart( #{opts.to_n} )`) # needs to wrapped for Volt::Model
-      page._charts << Volt::Model.new({id: @id, chart: chart})
-      page._chart = chart # a simple way for later access
-      page._chart_id = id # so we know whether it's me
-      Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : page._charts='#{page._charts}' page._charts.size=#{page._charts.size}")
+    # Force computation dependencies for attributes of a model
+    # TODO: must be better or built-in way ??
+    def setup_dependencies(model, nest: true, except: [])
+      model.attributes.each { |key, val|
+        unless except.include?(key)
+          debug __method__, __LINE__, "#{model}.send(#{key})"
+          model.send :"_#{key}"
+        end
+        if nest && val.is_a?(Volt::Model)
+          setup_dependencies(val, nest: true, except: except)
+        end
+      }
     end
 
-    def before_index_remove
-      Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} #{Time.now}")
+    def stop_watching
+      @watches.each {|w| w.stop}
+      @watches = @watch_counts = nil
+    end
+
+    def update_page
+      debug __method__, _LINE__, Time.now.to_s
       # clear all references to this chart
-      i = page._charts.find_index { |e| e._id == @id }
+      i = page._charts.find_index { |e| e._id == _id }
       if i
         deleted = page._charts.delete_at(i)
-        Volt.logger.debug("#{self.class.name}##{__method__}:#{__LINE__} : deleted='#{deleted}' page._charts.size=#{page._charts.size}")
+        debug __method__, __LINE__, "deleted='#{deleted}' page._charts.size=#{page._charts.size}"
         deleted._chart.destroy
         deleted._chart = nil
       end
-      page._chart = nil if page._chart_id == @id
-      @id = nil
+      if page._chart_id == _id
+        last = page._charts.last
+        page._chart_id = last ? last._id : nil
+        page._chart = last ? last._chart : nil
+      end
     end
 
-    private
-
-    # generate a unique id for chart container
-    def random_id
-      "highcharts#{(rand * 1000000000).to_i}"
+    def debug(method, line, s)
+      Volt.logger.debug "#{self.class.name}##{method}[#{line}] : #{s}"
     end
 
-    def missing_chart
-      { chart: { title: 'no chart attribute set for :highcharts component' } }
+    def log_change(label, object = 'nil')
+      Volt.logger.debug "#{label} : #{object}"
     end
 
   end
-end
+end
+
+end # RUBY_PLATFORM == 'opal'

data/lib/volt/highcharts/version.rb

@@ -1,5 +1,5 @@
 module Volt
   module Highcharts
-    VERSION = '0.1.0'
+    VERSION = '0.1.2'
   end
 end

data/push

@@ -0,0 +1,5 @@
+sh build
+# git remote add origin https://github.com/balmoral/volt-highcharts.git
+# git push -u origin master
+git push
+gem push volt-highcharts-0.1.2.gem

data/volt-highcharts.gemspec

@@ -17,6 +17,8 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
+  spec.add_runtime_dependency 'opal-highcharts', '~> 0.1.0'
+
   # spec.add_development_dependency "volt", "~> 0.9.5.pre3"
   # spec.add_development_dependency 'rspec', '~> 3.2.0'
   # spec.add_development_dependency "rake"

metadata

@@ -1,15 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: volt-highcharts
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Colin Gunn
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-30 00:00:00.000000000 Z
-dependencies: []
+date: 2015-08-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: opal-highcharts
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.0
 description: 
 email:
 - colgunn@icloud.com
@@ -18,6 +32,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".rspec"
+- CHANGELOG.md
 - Gemfile
 - LICENSE.txt
 - README.md
@@ -29,6 +44,7 @@ files:
 - app/highcharts/views/main/index.html
 - lib/volt/highcharts.rb
 - lib/volt/highcharts/version.rb
+- push
 - spec/spec_helper.rb
 - spec/volt/highcharts_spec.rb
 - volt-highcharts.gemspec