volt-highcharts 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 57bc486e2e61cd1b390da2fb6cba28705479531f
-  data.tar.gz: 2f1a36ef4888500b8933201f7cd533a0a774a20d
+  metadata.gz: 23e8b6ee599e35ecfbadc672faf9bb3d17e9bdc6
+  data.tar.gz: 9158848fba5dc0be73da1e2534a08654967291e8
 SHA512:
-  metadata.gz: f45e348902daac3c71b825bcddbf8c7797ee3aed492a0718684062fd4ff56237c6fe4e62f9cf02a74bf0744caf9c39961c173d00c6f26f6034670d93a1ea9e25
-  data.tar.gz: 13aee26ca775e5e626688967d2365ce9314197f15ac0dc1cb49c27f2fffeab6d0bc7f5ec9e9fcd31a09605070690b9befd518a6c2514b785ab6a872829a8e04c
+  metadata.gz: d3ce02ec03e6b53432af094df4b4b690e8a1f9c0b1941e1ff53368554316818733822fdddb7f4567f12a1f0d33d678ef7b067237f1618ddc6364d79ad20c728d
+  data.tar.gz: 694ca655b9a00c205474194e69ba7847a90160bcc79c5f4b20cdbe5f7a41919db73a2ff37f25c731ea5a0dcbc2e109d325d9d7df3ef84b1baae3fb144bbb6e0c

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 0.1.3
+
+- added global animate option
+- improvements to reactivity logic
+ 
+## 0.1.2
+
+- various tweaks
+
 ## 0.1.1
 
 - now uses opal-highcharts gem  

data/README.md

@@ -1,14 +1,20 @@
 # Volt::Highcharts
 
+[![Join the chat at https://gitter.im/balmoral/volt-highcharts](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/balmoral/volt-highcharts?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
 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
+See
+- http://www.highcharts.com
+- http://github.com/balmoral/volt-highcharts-app
+- http://github.com/balmoral/volt-highcharts
+- http://github.com/balmoral/opal-highcharts
+- https://rubygems.org/gems/volt-highcharts
+- https://rubygems.org/gems/opal-highcharts
 
 ## Installation
 
@@ -42,59 +48,81 @@ Pass a Ruby hash containing chart options in the appropriate view html file:
 
 where `chart_options` is a Volt::Model or Hash provided by your controller or model. 
 
-Reactivity is now supported. 
+**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.
+**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.
 
 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, for your controller:
 
-For example:
 ```
-    def fruit_chart_options
-      Volt::Model.new( {
-        # to identity the chart in volt
-        id: 'fruit_chart',
-        
-        # highcharts options
-        chart: {
-          type: 'bar'
-        },
+class ChartController < Volt::ModelController
+  ...
+  def chart_options
+    Volt::Model.new( {
+
+      # identity the chart in volt
+      id: 'fruit',
+      
+      # highcharts options
+      chart: {
+        type: 'bar',
+        renderTo: 'fruit_chart'
+      },
+      title: {
+        text: 'Fruit Consumption'
+      },
+      xAxis: {
+        categories: %w(Apples Bananas Oranges)
+      },
+      yAxis: {
         title: {
-          text: 'Fruit Consumption'
+            text: 'Fruit eaten'
+        }
+      },
+      series: [
+        {
+          name: 'Jane',
+          data: [1, 0, 4]
         },
-        xAxis: {
-          categories: %w(Apples Bananas Oranges)
+        {
+          name: 'John',
+          data: [5, 7, 3]
         },
-        yAxis: {
-          title: {
-              text: 'Fruit eaten'
-          }
-        },
-        series: [
-          {
-            name: 'Jane',
-            data: [1, 0, 4]
-          },
-          {
-            name: 'John',
-            data: [5, 7, 3]
-          },
-          ...
-        ]
-      } )
-    end
+        ...
+      ]
+    } )
+  end
+end
+```
+
+and your views .html file
+
 ```
+<:Title>
+  volt-highcharts
+<:Body>
+  <span id="fruit_chart" >
+    <:highcharts options="{{ chart_options }}" />
+  </span>
+```
+
+The html element which contains the chart must have an id which matches the `chart: { renderTo: } ` value.
 
-You can later find the chart in page._charts, the elements of which are Volt::Model's each having an _id and a _chart attribute.
+(At present Volt 0.9.5 does not support view bindings for setting element ids, so string literals are required.)
+ 
+To later query or modify multiple chart(s) on a page, a unique `:id` value should be set. 
+  
+You can then find the chart in page._charts, the elements of which are Volt::Model's each having an _id and a _chart attribute.
+
+For example, in your controller you might have a method to return a Highcharts::Chart:
 
-For example, in your controller you might have a method to return the native chart:
 ```
   def find_chart(id)
     # NB use detect, not find
@@ -102,20 +130,23 @@ For example, in your controller you might have a method to return the native cha
     e ? e._chart : nil
   end
 ```
+
 If you only have one chart on the page use ```page._chart```.
 
 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. 
+However, as reactivity support is improved, there should be less need for direct manipulation of the chart.
 
-As reactivity support is improved, there should be less need for direct manipulation of the chart.
+### Example
  
+An example application can be found at https://github.com/balmoral/volt-highcharts-app.
+
 ## To do
 
-1. remove debug traces
-2. chart option/configuration checks
-3. improved documentation
-4. improved error handling
-5. finer grained reactivity?
+1. chart option/configuration checks
+2. improved documentation
+3. reactivity for more chart options
+4. Highstock specific support
 
 ## Contributing
 

data/app/highcharts/config/dependencies.rb

@@ -2,5 +2,7 @@
 
 # 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/highcharts.src.js'
+javascript_file 'http://code.highcharts.com/highcharts-more.js'
+javascript_file 'http://code.highcharts.com/modules/exporting.js'
 # javascript_file 'http://code.highcharts.com/maps/highmaps.src.js'

data/app/highcharts/controllers/main_controller.rb

@@ -16,16 +16,16 @@ module Highcharts
 
     def before_index_remove
       stop_watching
-      update_page
+      destroy_chart
       @chart = nil
     end
 
-    private
+    protected
 
     def set_model
       options = attrs.options
       unless options
-        raise ArgumentError, 'no options attribute set for :highcharts component'
+        raise ArgumentError, 'options attribute must be given for :highcharts component'
       end
       # if the options are a Hash then convert to a Volt::Model
       if options.is_a?(Volt::Model)
@@ -36,11 +36,10 @@ module Highcharts
       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.
+    # page._charts is an array of Volt::Models each having an _id and a _chart (Highcharts::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
@@ -52,53 +51,70 @@ module Highcharts
 
     # To be reactive we must watch for model changes
     def start_watching
+      @in_start = true
       @watches = []
-      @watch_counts = {}
       if reactive
+        watch_animation
         watch_titles
         watch_series
       end
+      @in_start = false
+    end
+
+    def watch_animation
+      watch(->{ _animate }) do
+        # debug __method__, __LINE__, "_animate=#{_animate} : refresh_all_series"
+        refresh_all_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!
+      [->{ _title }, ->{ _subtitle }].each do |computation|
+        watch(computation, descend: true) do
+          chart.set_title(_title.to_h, _subtitle.to_h, true)
+        end
+      end
     end
 
     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
+      # watch_series_size
+      watch_series_data
+      watch_series_visibility
+      watch_series_other
+    end
+
+    def watch_series_other
+      _series.each_with_index do |a_series, i|
+        watch ->{ a_series }, descend: true, tag: i, except: [:_data, :visible] do |tag, val|
+          # debug __method__, __LINE__, "chart.series[#{tag}].update(#{val.to_h}, true)"
+          chart.series[tag].update(val.to_h, true)
         end
-      end.watch!
+      end
+    end
+
+    def watch_series_data
+      _series.each_with_index do |a_series, i|
+        watch ->{ a_series._data }, tag: i do |tag, val|
+          # debug __method__, __LINE__, "chart.series[#{tag}].set_data(#{val.to_a}, true, #{_animate})"
+          chart.series[tag].set_data(val.to_a, true, _animate)
+        end
+      end
+    end
+
+    def watch_series_visibility
+      _series.each_with_index do |a_series, i|
+        watch ->{ a_series._visible }, tag: i do |tag, val|
+          # debug __method__, __LINE__, "chart.series[#{tag}].set_visible(#{val}, true)"
+          chart.series[tag].set_data(val.to_a, true)
+        end
+      end
+    end
+
+    def watch_series_size
+      watch_attributes("_series", _series, recurse: false) do |key, value|
+        # debug __method__, __LINE__, "_series.#{key} changed"
+        refresh_all_series
+      end
     end
 
     # Do complete refresh of all series:
@@ -106,60 +122,100 @@ module Highcharts
     # 2. add all series in model to chart with no redraw
     # 3. redraw chart
     def refresh_all_series
+      stop_watching
       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}"
+      _series.each do |a_series|
         chart.add_series(a_series.to_h, false)
       end
-      debug __method__, __LINE__, "chart.redraw"
       chart.redraw
-    end
-
-    # 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
-      }
+      start_watching
     end
 
     def stop_watching
       @watches.each {|w| w.stop}
-      @watches = @watch_counts = nil
+      @watches = nil
     end
 
-    def update_page
-      debug __method__, _LINE__, Time.now.to_s
+    def destroy_chart
       # clear all references to this chart
       i = page._charts.find_index { |e| e._id == _id }
       if i
         deleted = page._charts.delete_at(i)
-        debug __method__, __LINE__, "deleted='#{deleted}' page._charts.size=#{page._charts.size}"
-        deleted._chart.destroy
+        begin
+          deleted._chart.destroy # TODO: sometimes this fails - seems ok since volt-0.9.5.pre4 after 2015-08-10
+        rescue Exception => x
+          debug __method__, __LINE__, "chart._destroy failed: #{x}"
+        end
         deleted._chart = nil
       end
       if page._chart_id == _id
         last = page._charts.last
+        # last = page._charts.empty? ? nil : page._charts.last # bug in ReactiveArray
         page._chart_id = last ? last._id : nil
         page._chart = last ? last._chart : nil
       end
     end
 
-    def debug(method, line, s)
-      Volt.logger.debug "#{self.class.name}##{method}[#{line}] : #{s}"
+    def watch(computation, descend: false, tag: nil, except: nil, &block)
+      @watches ||= []
+      @watches << -> do
+        val = compute(computation, descend, except)
+        unless @in_start
+          if block.arity == 0
+            block.call
+          elsif block.arity == 1
+            block.call(tag ? tag : val)
+          elsif block.arity == 2
+            block.call(tag, val)
+          end
+        end
+      end.watch!
+    end
+
+    def compute(computation, descend, except)
+      v = computation.call
+      descend(v, except) if descend
+      v
+    end
+
+    def descend(o, except)
+      if o.is_a?(Volt::Model)
+        descend_model(o, except)
+      elsif o.is_a?(Volt::ReactiveArray)
+        descend_array(o, except)
+      elsif o.is_a?(Volt::ReactiveHash)
+        descend_hash(o, except)
+      end
+    end
+
+    def descend_array(array, except)
+      # this way to force dependency
+      array.size.times do |i|
+        descend(array[i], except)
+      end
+    end
+
+    def descend_hash(hash, except)
+      hash.each_key do |k|
+        # this way to force dependency
+        descend(hash[k], except)
+      end
+    end
+
+    def descend_model(model, except)
+      model.attributes.each_key do |attr|
+        # this way to force dependency
+        _attr = :"_#{attr}"
+        unless except && except.include?(_attr)
+          descend(model.send(_attr), except)
+        end
+      end
     end
 
-    def log_change(label, object = 'nil')
-      Volt.logger.debug "#{label} : #{object}"
+    def debug(method, line, s = nil)
+      Volt.logger.debug "#{self.class.name}##{method}[#{line}] : #{s}"
     end
 
   end

data/lib/volt/highcharts/version.rb

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

data/push

@@ -2,4 +2,4 @@ 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
+gem push volt-highcharts-0.1.3.gem

data/volt-highcharts.gemspec

@@ -8,7 +8,8 @@ Gem::Specification.new do |spec|
   spec.version       = Volt::Highcharts::VERSION
   spec.authors       = ["Colin Gunn"]
   spec.email         = ["colgunn@icloud.com"]
-  spec.summary       = %q{Volt component wrapping Highcharts JavaScript library.}
+  spec.summary       = %q{Volt component providing reactive Ruby wrapping of Highcharts + Highstock javascript library.}
+  spec.description   = %q{Volt component providing reactive Ruby wrapping of Highcharts + Highstock javascript library.}
   spec.homepage      = "https://github.com/balmoral/volt-highcharts"
   spec.license       = "MIT"
 
@@ -17,6 +18,7 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
+  spec.required_ruby_version = '>= 2.1'
   spec.add_runtime_dependency 'opal-highcharts', '~> 0.1.0'
 
   # spec.add_development_dependency "volt", "~> 0.9.5.pre3"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: volt-highcharts
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Colin Gunn
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-06 00:00:00.000000000 Z
+date: 2015-08-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal-highcharts
@@ -24,7 +24,8 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.1.0
-description: 
+description: Volt component providing reactive Ruby wrapping of Highcharts + Highstock
+  javascript library.
 email:
 - colgunn@icloud.com
 executables: []
@@ -60,7 +61,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '2.1'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
@@ -71,7 +72,8 @@ rubyforge_project:
 rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4
-summary: Volt component wrapping Highcharts JavaScript library.
+summary: Volt component providing reactive Ruby wrapping of Highcharts + Highstock
+  javascript library.
 test_files:
 - spec/spec_helper.rb
 - spec/volt/highcharts_spec.rb