https://github.com/elia/hyper-vis
A Opal Ruby wraper for Vis.js with a Ruby-Hyperloop Component.
https://github.com/elia/hyper-vis
Last synced: 5 months ago
JSON representation
A Opal Ruby wraper for Vis.js with a Ruby-Hyperloop Component.
- Host: GitHub
- URL: https://github.com/elia/hyper-vis
- Owner: elia
- License: mit
- Created: 2018-03-20T21:15:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-21T01:49:27.000Z (over 8 years ago)
- Last Synced: 2024-12-28T03:52:20.843Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 475 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hyper-vis
A Opal Ruby wraper for [Vis.js](http://visjs.org) with a Ruby-Hyperloop Component.
Currently supports the complete API for:
- Vis Dataset
- Vis Dataview
- Vis Network
### Demo
[](http://www.youtube.com/watch?v=fPSpESBbeMQ "Reactivity Demo")
### Installation
for a rails app:
```
gem 'hyper-vis'
```
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
```
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.
### Usage
#### The Vis part
```
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.
Vis::Network can be used within the render_with_dom_node.
```
class MyVisNetworkComponent
include Hyperloop::Vis::Network::Mixin
automatic_refresh true # thats the default, may set to false
render_with_dom_node do |dom_node, data, options|
net = Vis::Network.new(dom_node, data, options)
canvas = document.JS.querySelector('canvas')
end
end
class AOuterComponent < Hyperloop::Component
render do
received_data = []
options = { manipulation: {
edit_node: proc { |node_data, callback| received_data << node_data }
}}
data = Vis::DataSet.new([{id: 1, name: 'foo'}, {id: 2, name: 'bar'}, {id: 3, name: 'pub'}])
DIV { MyVisNetworkComponent(vis_data: data, otions: options)}
end
end
```