hyper-vis 1.0.0.lap34 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3435cbb14a10dac4910fb98669c8e005483e3c4462a6f40b353a8a7baecf9d76
-  data.tar.gz: e367bc3fe824f0ff2595b21b4b7907a2b0f84b1359db98f5ea30636fee21286b
+  metadata.gz: a8b7330654c04a70b036a7c1fa3d32b1bfb5fc5c338516a031ef8daa1ff2e125
+  data.tar.gz: 45241374d63e213eb3d881a8031e71a4f901dfbf32fa637b186c1b1db8955a96
 SHA512:
-  metadata.gz: 2f75184cfda5413e8cebe56e3b66c7b79314a81d71411b04519547151e44d0ddf24bd41324f29289145643df11f287e3ad612030eeda98ab1d17229369abd4bd
-  data.tar.gz: 0a38dbe8513c5eb45b32ffbee20f59ca0b0108e3acd830527c21c3a78f0f92e62a35bcb6f90bc504dbfcc576b9cbec38407b93ad663480ac6b12d76c19e3bd3c
+  metadata.gz: 2ac9706a1521c635d9867a58eaa83e6db898693d5e6ea1db2446828b7398dfcf5b288da4c6d7139287a1a12e7458b76781e38e093dbc1194fc1385366e99a249
+  data.tar.gz: '09fbdf2b037a43e8014f8fa1f4bd1c0ece333bb6b64012823832b332d884cb6243cb1d6a6c1e9ffbf633e1811d1dc595254a61e74608e0dcdb7485943232c040'

data/README.md

@@ -1,48 +1,116 @@
 # hyper-vis
 
-A Opal Ruby wraper for (Vis.js)[visjs.org] with a Ruby-Hyperloop Component.
-Currently supports the complete API for:
-- Vis Dataset
-- Vis Dataview
-- Vis Network
+A [Opal](http://opalrb.com) Ruby wrapper for [Vis.js](http://visjs.org) with a [Ruby-Hyperloop](http://ruby-hyperloop.org) Component.
+Implements the complete API for:
+- [Vis Dataset](http://visjs.org/docs/data/dataset.html)
+- [Vis Dataview](http://visjs.org/docs/data/dataview.html)
+- [Vis Graph2d](http://visjs.org/docs/graph2d/)
+- [Vis Graph3d](http://visjs.org/docs/graph3d/)
+- [Vis Network](http://visjs.org/docs/network/)
+- [Vis Timeline](http://visjs.org/docs/timeline/)
 
-### Installation
-for a rails app:
+Includes vis.js version 4.21.0
+
+## Demo
+
+Reactive hyper-vis in action:
+
+[![Reactivity Demo](http://img.youtube.com/vi/fPSpESBbeMQ/0.jpg)](http://www.youtube.com/watch?v=fPSpESBbeMQ "Reactivity Demo")
+
+## Quality
+[![Build Status](https://semaphoreci.com/api/v1/janbiedermann/hyper-vis/branches/master/shields_badge.svg)](https://semaphoreci.com/janbiedermann/hyper-vis)
+[![GitHub issues](https://img.shields.io/github/issues/janbiedermann/hyper-vis.svg)](https://github.com/janbiedermann/hyper-vis/issues)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/janbiedermann/hyper-vis.svg)](http://isitmaintained.com/project/janbiedermann/hyper-vis "Percentage of issues still open")
+[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/janbiedermann/hyper-vis.svg)](http://isitmaintained.com/project/janbiedermann/hyper-vis "Average time to resolve an issue")
+[![Pending Pull-Requests](http://githubbadges.herokuapp.com/janbiedermann/hyper-vis/pulls.svg)](https://github.com/janbiedermann/hyper-vis/pulls)
+
+#### Tests
 ```
-gem 'hyper-vis'
+Finished in 2 minutes 39.7 seconds (files took 3.18 seconds to load)
+132 examples, 0 failures, 15 pending
+```
+#### To run Tests
+Clone repo, then:
+```bash
+bundle update
+cd spec/test_app
+bundle update
+cd ../..
+bundle exec rspec
 ```
-and `bundle update`
-hyper-vis depends on `hyper-component` from (ruby-hyperloop)[http://ruby-hyperloop.org]
 
-vis.js is automatically imported. If you use webpacker, you may need to cancel the import in your config/intializers/hyperloop.rb
+## Installation
+for a Rails app:
+```ruby
+gem 'hyper-vis'
 ```
+and `bundle update`.
+
+hyper-vis depends on `hyper-component` from Ruby-Hyperloop but can be used without it.
+
+vis.js is automatically imported for Ruby-Hyperloop. If you get vis.js with webpacker, you may need to cancel the import in your config/intializers/hyperloop.rb
+```ruby
   config.cancel_import 'vis/source/vis.js'
 ```
-The wrapper expects a global `vis' (not `Vis`) to be availabe in javascript. 
-stylesheets are includes in 'vis/source/vis.css', images are there too.
+The wrapper expects a global `vis` (not `Vis`) to be availabe in javascript.
+For Vis to function as expected the stylesheets must be included.
+For a Rails app, the asset path is automatically added. 
+In your `application.css` add:
+```
+  *= require vis.css
+```
+For other frameworks vis.js, stylesheets and images are available in the gems `lib/vis/source/` directory.
 
-### Usage
+## Usage
 
-#### The Vis part
-```
+The wrapper follows vis 1 to 1, conforming to ruby standards, instead of `setSize` in javascript, you would use `set_size`. Also see specs in the `specs` directory for usage or the vis documentation (linked above).
+All arguments or return values are 'rubyfied' as much as possible, so you can just use ruby.
+
+### The Vis part
+```ruby
 dataset = Vis::DataSet.new([{id: 1, name: 'foo'}, {id: 2, name: 'bar'}, {id: 3, name: 'pub'}])
 edge_dataset = Vis::DataSet.new([{from: 1, to: 2}, {from: 2, to: 3}])
 dom_node = Vis::Network.test_container
 net = Vis::Network.new(dom_node, {nodes: dataset, edges: edge_dataset})
 xy = net.canvas_to_dom({x: 10, y: 10})
 ```
-#### The Component part
-The Component takes care about all the things necessary to make Vis.js play nice with React.
-The Component also provides a helper to access the document.
+### The Component part
+The Components takes care about all the things necessary to make Vis.js play nice with React.
+The Components also provide a helper to access the document: `document`.
+
+#### Vis::Network::Mixin
 Vis::Network can be used within the render_with_dom_node.
-```
+```ruby
 class MyVisNetworkComponent
   include Hyperloop::Vis::Network::Mixin
 
-  render_with_dom_node do |dom_node, data, options|
+  # the component automatically calls the render_with_dom_node block every
+  # time new data or options are received
+
+  # however
+  # setting automatic_refresh false turns that off ...
+  # (default is true, so this is optional):
+  automatic_refresh false
+
+  # ... and with automatic_refresh false refresh can
+  # be handled in the before_receive_props callback
+  # for example (this is also optional):
+  before_receive_props do |new_props|
+    # data can be accessed using the helper vis_data
+    if new_props[:vis_data] != vis_data
+      @net.set_data(new_props[:vis_data])
+    end
+  end
 
-    net = Vis::Network.new(dom_node, data, options)
+  render_with_dom_node do |dom_node, data, options|
+    # its important to use the data as passed in as 'data' argument
+    # to get the latests passed data for each new render
+    @net = Vis::Network.new(dom_node, data, options)
+    
+    # data is also atomatically saved and available using the helper
+    vis_data
 
+    # example of using the document helper
     canvas = document.JS.querySelector('canvas')
   end
 end
@@ -51,13 +119,76 @@ class AOuterComponent < Hyperloop::Component
   render do
     received_data = []
 
+    # example of using a callback in the options
     options = { manipulation: {
         edit_node: proc { |node_data, callback| received_data << node_data }
       }}
 
+    # initialize a dataset
     data = Vis::DataSet.new([{id: 1, name: 'foo'}, {id: 2, name: 'bar'}, {id: 3, name: 'pub'}])
     
+    # call the component
     DIV { MyVisNetworkComponent(vis_data: data, otions: options)}
   end
 end
-```
+```
+#### Vis::Graph3d::Mixin
+Works the same as Vis::Network::Mixin
+
+#### Vis::Timeline::Mixin
+Similar to Vis::Network, mostly params and helpers are different:
+```ruby
+class MyVisTimelineComponent
+  include Hyperloop::Vis::Timeline::Mixin
+
+  # the component automatically calls the render_with_dom_node block every
+  # time new data or options are received
+
+  # however
+  # setting automatic_refresh false turns that off ...
+  # (default is true, so this is optional):
+  automatic_refresh false
+
+  # ... and with automatic_refresh false refresh can
+  # be handled in the before_receive_props callback
+  # for example (this is also optional):
+  before_receive_props do |new_props|
+    # data can be accessed using the helpers:
+    items
+    groups
+    options
+  end
+
+  render_with_dom_node do |dom_node, items, groups, options|
+    # its important to use the data as passed in as 'data' argument
+    # to get the latests passed data for each new render
+    @net = Vis::Timeline.new(dom_node, items, groups, options)
+    
+    # data is also atomatically saved and available using the helpers
+    items
+    groups
+    options
+  end
+end
+
+class AOuterComponent < Hyperloop::Component
+  render do
+    options = { align: 'left' }
+
+    # initialize a dataset
+    data = Vis::DataSet.new([
+            {id: 1, content: 'item 1', start: '2013-04-20'},
+            {id: 2, content: 'item 2', start: '2013-04-14'},
+            {id: 3, content: 'item 3', start: '2013-04-18'},
+            {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+            {id: 5, content: 'item 5', start: '2013-04-25'},
+            {id: 6, content: 'item 6', start: '2013-04-27'}
+          ])
+    
+    # call the component
+    DIV { MyVisTimelineComponent(items: data, otions: options)}
+  end
+end
+```
+#### Vis::Graph2d::Mixin
+Works the same as Vis::Timeline::Mixin

data/hyper-vis.gemspec

@@ -6,7 +6,7 @@ Gem::Specification.new do |s|
   s.author       = "Jan Biedermann"
   s.email        = "jan@kursator.de"
   s.homepage     = "https://github.com/janbiedermann/hyper-vis"
-  s.summary      = "Ruby bindings for Vis as a Ruby Hyperloop Component"
+  s.summary      = "A Opal Ruby wraper for Vis.js with a Ruby-Hyperloop Component."
   s.description  = "Write React Components in ruby to show graphics created with Vis.js in the ruby way"
 
   s.files          = `git ls-files`.split("\n")
@@ -16,10 +16,10 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency "opal", "~> 0.11.0"
   s.add_runtime_dependency "opal-activesupport", "~> 0.3.1"
-  s.add_runtime_dependency "hyper-component", "~> 1.0.0.lap23"
-  s.add_runtime_dependency "hyperloop-config", "~> 1.0.0.lap23"
-  s.add_development_dependency "hyperloop", "~> 1.0.0.lap23"
-  s.add_development_dependency "hyper-spec", "~> 1.0.0.lap23"
+  s.add_runtime_dependency "hyper-component", "~> 1.0.0.lap27"
+  s.add_runtime_dependency "hyperloop-config", "~> 1.0.0.lap27"
+  s.add_development_dependency "hyperloop", "~> 1.0.0.lap27"
+  s.add_development_dependency "hyper-spec", "~> 1.0.0.lap27"
   s.add_development_dependency "listen"
   s.add_development_dependency "rake", ">= 11.3.0"
   s.add_development_dependency "rails", ">= 5.1.0"

data/lib/hyper-vis.rb

@@ -8,8 +8,15 @@ require 'hyperloop/vis/version'
 if RUBY_ENGINE == 'opal'
   require 'vis'
   require 'hyper-component'
+  require 'hyperloop/vis/graph2d/mixin'
+  require 'hyperloop/vis/graph2d/component'
+  require 'hyperloop/vis/graph3d/mixin'
+  require 'hyperloop/vis/graph3d/component'
   require 'hyperloop/vis/network/mixin'
   require 'hyperloop/vis/network/component'
+  require 'hyperloop/vis/timeline/mixin'
+  require 'hyperloop/vis/timeline/component'
 else
+  require 'vis/railtie' if defined?(Rails)
   Opal.append_path __dir__.untaint
 end

data/lib/hyperloop/vis/graph2d/component.rb

@@ -0,0 +1,16 @@
+module Hyperloop
+  module Vis
+    module Graph2d
+      class Component
+        include Hyperloop::Vis::Graph2d::Mixin
+        def self.inherited(base)
+          base.class_eval do
+            param items: nil
+            param groups: nil
+            param options: nil
+          end
+        end
+      end
+    end
+  end
+end

data/lib/hyperloop/vis/graph2d/mixin.rb

@@ -0,0 +1,89 @@
+require 'react/component'
+
+module Hyperloop
+  module Vis
+    module Graph2d
+      module Mixin
+        def self.included(base)
+          base.include(Hyperloop::Component::Mixin)
+          base.class_eval do
+            param items: nil
+            param groups: nil
+            param options: nil
+
+            def _set_dom_node(dom_node)
+              @_dom_node = dom_node
+            end
+
+            def items
+              @_items
+            end
+
+            def groups
+              @_groups
+            end
+
+            def document
+              `window.document`
+            end
+
+            def options
+              @_options
+            end
+
+            def automatic_refresh
+              true
+            end
+            
+            def self.automatic_refresh(value)
+              define_method(:automatic_refresh) do
+                value
+              end
+            end
+            
+            def self.render_with_dom_node(tag = 'DIV', &block)
+              render do
+                @_vis_render_block = block
+                @_items = params.items
+                @_groups = params.groups
+                @_options = params.options
+                send(tag, ref: method(:_set_dom_node).to_proc)
+              end
+            end
+
+            def should_component_update?
+              `false`
+            end
+
+            after_mount do
+              if @_dom_node && @_vis_render_block
+                instance_exec(@_dom_node, @_items, @_groups, @_options, &@_vis_render_block)
+              end
+            end
+
+            before_receive_props do |new_props|
+              if automatic_refresh && @_dom_node && @_vis_render_block
+                changed = false
+                if new_props[:items] != @_items
+                  @_items = new_props[:items]
+                  changed = true
+                end
+                if new_props[:groups] != @_groups
+                  @_items = new_props[:groups]
+                  changed = true
+                end
+                if new_props[:options] != @_options
+                  @_options = new_props[:options]
+                  changed = true
+                end
+                if changed
+                  instance_exec(@_dom_node, @_items, @_groups, @_options, &@_vis_render_block)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/hyperloop/vis/graph3d/component.rb

@@ -0,0 +1,15 @@
+module Hyperloop
+  module Vis
+    module Graph3d
+      class Component
+        include Hyperloop::Vis::Graph3d::Mixin
+        def self.inherited(base)
+          base.class_eval do
+            param vis_data: nil
+            param options: nil
+          end
+        end
+      end
+    end
+  end
+end

data/lib/hyperloop/vis/graph3d/mixin.rb

@@ -0,0 +1,79 @@
+require 'react/component'
+
+module Hyperloop
+  module Vis
+    module Graph3d
+      module Mixin
+        def self.included(base)
+          base.include(Hyperloop::Component::Mixin)
+          base.class_eval do
+            param vis_data: nil
+            param options: nil
+
+            def _set_dom_node(dom_node)
+              @_dom_node = dom_node
+            end
+
+            def vis_data
+              @_data
+            end
+
+            def document
+              `window.document`
+            end
+
+            def options
+              @_options
+            end
+
+            def automatic_refresh
+              true
+            end
+            
+            def self.automatic_refresh(value)
+              define_method(:automatic_refresh) do
+                value
+              end
+            end
+            
+            def self.render_with_dom_node(tag = 'DIV', &block)
+              render do
+                @_vis_render_block = block
+                @_data = params.vis_data
+                @_options = params.options
+                send(tag, ref: method(:_set_dom_node).to_proc)
+              end
+            end
+
+            def should_component_update?
+              `false`
+            end
+
+            after_mount do
+              if @_dom_node && @_vis_render_block
+                instance_exec(@_dom_node, @_data, @_options, &@_vis_render_block)
+              end
+            end
+
+            before_receive_props do |new_props|
+              if automatic_refresh && @_dom_node && @_vis_render_block
+                changed = false
+                if new_props[:vis_data] != @_data
+                  @_data = new_props[:vis_data]
+                  changed = true
+                end
+                if new_props[:options] != @_options
+                  @_options = new_props[:options]
+                  changed = true
+                end
+                if changed
+                  instance_exec(@_dom_node, @_data, @_options, &@_vis_render_block)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end