hyper-d3 1.0.0.lap23

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 45032d4f5b1d0d3cfd2219d4e6b7607ecc3e6ab3a3c7275f39779bfb5ec3331d
+  data.tar.gz: 2e95aec56ecc220b909da3467cec07d78974b46969d83f223ffbf2aa5df98c63
+SHA512:
+  metadata.gz: c61a10abba99de9e6ce1076056bc060bf9b76de4bea7ef91bf3fb3fb73c03a460e22d5f64f59494a6850f9feb3632155e3ea0acb9708951154b6dcd7084f0e3c
+  data.tar.gz: 0d907502dad346d25511a1ded0db08f8291696aea1f03f93d761283b6569677f56b0f393cabb841f2f5acd74193c56671a6c76d3c9fe57b5015962b9f00673be

data/.gitignore

@@ -0,0 +1 @@
+spec/test_app/vendor/bundle

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+gem "opal-jquery", git: "https://github.com/opal/opal-jquery.git", branch: "master"
+gemspec
+

data/Gemfile.lock

@@ -0,0 +1,313 @@
+GIT
+  remote: https://github.com/opal/opal-jquery.git
+  revision: f47a9b42da366cea270f743b05acf529f3077d35
+  branch: master
+  specs:
+    opal-jquery (0.4.2)
+      opal (>= 0.10.0, < 0.12.0)
+
+PATH
+  remote: .
+  specs:
+    opal-d3 (0.0.20170822)
+      hyper-component (~> 1.0.0.lap23)
+      hyperloop-config (~> 1.0.0.lap23)
+      opal (~> 0.11.0)
+      opal-activesupport (~> 0.3.1)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    abstract_type (0.0.7)
+    actioncable (5.1.5)
+      actionpack (= 5.1.5)
+      nio4r (~> 2.0)
+      websocket-driver (~> 0.6.1)
+    actionmailer (5.1.5)
+      actionpack (= 5.1.5)
+      actionview (= 5.1.5)
+      activejob (= 5.1.5)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.1.5)
+      actionview (= 5.1.5)
+      activesupport (= 5.1.5)
+      rack (~> 2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.1.5)
+      activesupport (= 5.1.5)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (5.1.5)
+      activesupport (= 5.1.5)
+      globalid (>= 0.3.6)
+    activemodel (5.1.5)
+      activesupport (= 5.1.5)
+    activerecord (5.1.5)
+      activemodel (= 5.1.5)
+      activesupport (= 5.1.5)
+      arel (~> 8.0)
+    activesupport (5.1.5)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    adamantium (0.2.0)
+      ice_nine (~> 0.11.0)
+      memoizable (~> 0.4.0)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    archive-zip (0.11.0)
+      io-like (~> 0.3.0)
+    arel (8.0.0)
+    ast (2.4.0)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
+    builder (3.2.3)
+    capybara (2.18.0)
+      addressable
+      mini_mime (>= 0.1.3)
+      nokogiri (>= 1.3.3)
+      rack (>= 1.0.0)
+      rack-test (>= 0.5.4)
+      xpath (>= 2.0, < 4.0)
+    childprocess (0.8.0)
+      ffi (~> 1.0, >= 1.0.11)
+    chromedriver-helper (1.2.0)
+      archive-zip (~> 0.10)
+      nokogiri (~> 1.8)
+    coderay (1.1.2)
+    concord (0.1.5)
+      adamantium (~> 0.2.0)
+      equalizer (~> 0.0.9)
+    concurrent-ruby (1.0.5)
+    connection_pool (2.2.1)
+    crass (1.0.3)
+    diff-lcs (1.3)
+    equalizer (0.0.11)
+    erubi (1.7.0)
+    execjs (2.7.0)
+    ffi (1.9.21)
+    globalid (0.4.1)
+      activesupport (>= 4.2.0)
+    hike (1.2.3)
+    hyper-component (1.0.0.lap23)
+      actionview (>= 4.0.0)
+      hyper-react (= 1.0.0.lap23)
+      hyperloop-config (= 1.0.0.lap23)
+      opal-rails (~> 0.9.4)
+      react-rails (>= 2.4.0, < 2.5.0)
+    hyper-mesh (1.0.0.lap23)
+      activerecord (>= 4.0.0)
+      hyper-component (= 1.0.0.lap23)
+      hyper-operation (= 1.0.0.lap23)
+    hyper-model (1.0.0.lap23)
+      hyper-mesh (= 1.0.0.lap23)
+    hyper-operation (1.0.0.lap23)
+      activerecord (>= 4.0.0)
+      hyper-component (= 1.0.0.lap23)
+      hyperloop-config (= 1.0.0.lap23)
+      mutations
+      opal-activesupport (~> 0.3.1)
+    hyper-react (1.0.0.lap23)
+      hyper-store (= 1.0.0.lap23)
+      opal (>= 0.11.0, < 0.12.0)
+      opal-activesupport (~> 0.3.1)
+    hyper-router (4.2.6.lap23)
+      hyper-component (= 1.0.0.lap23)
+      hyper-react (= 1.0.0.lap23)
+      opal-browser (~> 0.2.0)
+      opal-rails (~> 0.9.4)
+      react-rails (>= 2.4.0, < 2.5.0)
+    hyper-spec (1.0.0.lap23)
+      capybara
+      chromedriver-helper
+      method_source
+      opal (>= 0.11.0, < 0.12.0)
+      parser (>= 2.3.3.1)
+      pry
+      rspec-rails
+      selenium-webdriver
+      timecop (~> 0.8.1)
+      uglifier
+      unparser
+      webdrivers
+    hyper-store (1.0.0.lap23)
+      hyperloop-config (= 1.0.0.lap23)
+      opal (>= 0.11.0, < 0.12.0)
+    hyperloop (1.0.0.lap23)
+      hyper-model (= 1.0.0.lap23)
+      hyper-router (= 4.2.6.lap23)
+      hyperloop-config (= 1.0.0.lap23)
+      mini_racer (~> 0.1.15)
+      opal-browser (~> 0.2.0)
+      opal-rails (~> 0.9.4)
+      rails (>= 4.0.0)
+      react-rails (>= 2.4.0, < 2.5.0)
+    hyperloop-config (1.0.0.lap23)
+      opal (>= 0.11.0, < 0.12.0)
+      opal-browser (~> 0.2.0)
+      uglifier
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    ice_nine (0.11.2)
+    io-like (0.3.0)
+    jquery-rails (4.3.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
+    libv8 (6.3.292.48.1)
+    loofah (2.2.0)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    mail (2.7.0)
+      mini_mime (>= 0.1.1)
+    memoizable (0.4.2)
+      thread_safe (~> 0.3, >= 0.3.1)
+    method_source (0.9.0)
+    mini_mime (1.0.0)
+    mini_portile2 (2.3.0)
+    mini_racer (0.1.15)
+      libv8 (~> 6.3)
+    minitest (5.11.3)
+    mutations (0.8.1)
+      activesupport
+    nio4r (2.2.0)
+    nokogiri (1.8.2)
+      mini_portile2 (~> 2.3.0)
+    opal (0.11.0)
+      ast (>= 2.3.0)
+      hike (~> 1.2)
+      parser (= 2.3.3.1)
+      sourcemap (~> 0.1.0)
+    opal-activesupport (0.3.1)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-browser (0.2.0)
+      opal
+      paggio
+    opal-rails (0.9.4)
+      jquery-rails
+      opal (>= 0.10.0, < 0.12)
+      opal-activesupport (>= 0.0.5)
+      opal-jquery (~> 0.4.0)
+      opal-sprockets (~> 0.4.1)
+      rails (>= 4.1, < 6.0)
+      sprockets-rails (>= 2.3.3, < 4.0)
+    opal-sprockets (0.4.1.0.11.0.3.1)
+      opal (~> 0.11.0)
+      sprockets (~> 3.1)
+      tilt (>= 1.4)
+    paggio (0.2.6)
+    parser (2.3.3.1)
+      ast (~> 2.2)
+    procto (0.0.3)
+    pry (0.11.3)
+      coderay (~> 1.1.0)
+      method_source (~> 0.9.0)
+    public_suffix (3.0.2)
+    rack (2.0.4)
+    rack-test (0.8.2)
+      rack (>= 1.0, < 3)
+    rails (5.1.5)
+      actioncable (= 5.1.5)
+      actionmailer (= 5.1.5)
+      actionpack (= 5.1.5)
+      actionview (= 5.1.5)
+      activejob (= 5.1.5)
+      activemodel (= 5.1.5)
+      activerecord (= 5.1.5)
+      activesupport (= 5.1.5)
+      bundler (>= 1.3.0)
+      railties (= 5.1.5)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.0.3)
+      loofah (~> 2.0)
+    railties (5.1.5)
+      actionpack (= 5.1.5)
+      activesupport (= 5.1.5)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (12.3.0)
+    react-rails (2.4.4)
+      babel-transpiler (>= 0.7.0)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
+    rspec-core (3.7.1)
+      rspec-support (~> 3.7.0)
+    rspec-expectations (3.7.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.7.0)
+    rspec-mocks (3.7.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.7.0)
+    rspec-rails (3.7.2)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      railties (>= 3.0)
+      rspec-core (~> 3.7.0)
+      rspec-expectations (~> 3.7.0)
+      rspec-mocks (~> 3.7.0)
+      rspec-support (~> 3.7.0)
+    rspec-support (3.7.1)
+    rubyzip (1.2.1)
+    selenium-webdriver (3.9.0)
+      childprocess (~> 0.5)
+      rubyzip (~> 1.2)
+    sourcemap (0.1.1)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.2.1)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
+    thor (0.20.0)
+    thread_safe (0.3.6)
+    tilt (2.0.8)
+    timecop (0.8.1)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    uglifier (4.1.6)
+      execjs (>= 0.3.0, < 3)
+    unparser (0.2.6)
+      abstract_type (~> 0.0.7)
+      adamantium (~> 0.2.0)
+      concord (~> 0.1.5)
+      diff-lcs (~> 1.3)
+      equalizer (~> 0.0.9)
+      parser (>= 2.3.1.2, < 2.5)
+      procto (~> 0.0.2)
+    webdrivers (3.2.4)
+      nokogiri (~> 1.6)
+      rubyzip (~> 1.0)
+      selenium-webdriver (~> 3.0)
+    websocket-driver (0.6.5)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.3)
+    xpath (3.0.0)
+      nokogiri (~> 1.8)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  hyper-spec (~> 1.0.0.lap23)
+  hyperloop (~> 1.0.0.lap23)
+  opal-d3!
+  opal-jquery!
+  rake (>= 11.3.0)
+
+BUNDLED WITH
+   1.16.1

data/README.md

@@ -0,0 +1,118 @@
+# Hyper-D3
+
+A [Ruby-Hyperloop](https://ruby-hyperloop.org/) Component including a
+Opal Ruby interface for D3 [https://d3js.org/].
+
+It implements interface fairly closely following javascript API, except with blocks, classes, no camelcase etc.
+
+About 60% of D3 APIs are implemented. Pull requests for the rest are very welcome.
+
+[Opal-D3](https://taw.github.io/opal-d3/) was orginally developed by Tomasz Wegrzanowski, @taw.
+
+## Installation
+
+in your ruby-hyperloop application or your rails apps Gemfile add:
+```
+gem 'hyper-d3'
+```
+bundle update, done.
+
+## Usage
+
+There are various examples in the `spec/test_app/app/assets/javascripts` directory.
+Git clone this repo, cd to spec/test_app, bundle update, rails s and visit [http://localhost:3000] to see them in action.
+
+## Commented Example
+
+To achieve this:
+![Star Trek Voyager Demo](https://github.com/janbiedermann/hyper-d3/blob/hyperloopification/startrekvoyager.png?raw=true)
+
+Do this:
+```ruby
+# create your component class, either by inheriting from Hyperloop::D3::Component:
+class StarTrekVoyagerComponent < Hyperloop::D3::Component
+  # or you include the Hyperloop::D3::Mixin like this:
+  # include Hyperloop::D3::Mixin
+
+  # Thy Hyperloop::D3::Component provides a convenience render method 'render_with_selection'
+  # and with that, takes care of all the things that need to be done for react, to use D3.js
+  # This method provides two arguments to the block, a D3::Selection, and the data that has 
+  # been passed in as param for the component.
+  # By default, render_with_selection will provide a empty <svg> as selection,
+  # here the 'DIV' is passed as argument to render_with_selection, the selection argument
+  # passed to the block therefore is a <div>
+  # Within the block, just use the selection as you usually would with D3.
+
+  # You would mount or render that Component with the data as paramter, like:
+  # StarTrekVoyagerComponent(data: VoyagerData)
+
+  render_with_selection('DIV') do |selection, voyager_data|
+    svg = selection.append("svg")
+            .attr("height", "600px")
+            .attr("width", "100%")
+    width = svg.style("width").to_i
+
+    x = D3.scale_linear.domain([0, voyager_data.size-1]).range([40, width-20])
+    y = D3.scale_linear.domain(voyager_data.map(&:rating).minmax).range([550, 50])
+    c = D3.scale_ordinal.range(D3.scheme_category_10)
+
+    (1..7).each do |season|
+      episodes = voyager_data.select{|episode| episode.season == season }
+      avg = D3.mean(episodes.map(&:rating))
+      svg.append("line")
+        .attr("x1", x.(episodes.map(&:number).min))
+        .attr("x2", x.(episodes.map(&:number).max))
+        .attr("y1", y.(avg))
+        .attr("y2", y.(avg))
+        .attr("stroke", c.(season))
+        .attr("stroke-width", 2)
+        .attr("opacity", 0.4)
+    end
+
+    voyager_data.each do |episode|
+      svg.append("circle")
+        .attr("cx", x.(episode.number))
+        .attr("cy", y.(episode.rating))
+        .attr("r", 4)
+        .attr("fill", c.(episode.season))
+        .attr("opacity", 0.6)
+    end
+
+    axis = D3.axis_left(y)
+    svg.append("g").attr("transform","translate(30, 0)")
+      .call(axis)
+  end
+end
+```
+
+### Reactive D3
+If you need the component to be "reactive", you mount the component within a outer component and make the data
+depending on state, for example:
+```
+class OuterComponent
+  render('DIV') do
+    StarTrekVoyagerComponent(data: state.data)
+  end
+end
+```
+When state.data changes, the StarTrekVoaygerComponent will receive that as new param and render with the new data.
+**Its important to note** though, that react doesnt do the diff for native js dom manipulations, that means, if the
+component receives new data, it must do the DOM housekeeping itself, remove dom nodes or add or replace them within
+the block passed to render_with_selection.
+
+### Events
+Events in the D3 classes are currentyly badly supported. You must most probably revert to native JS inlining.
+To clean up the event handlers, you can use the before_unmount_with_selection callback. It will be called with the root
+selection and the most recent data received:
+```ruby
+class StarTrekVoyagerComponent < Hyperloop::D3::Component
+  before_unmount_with_selection do |selection, voyager_data|
+    # here called with the <div> as D3 selection, because of render_with_selection('DIV')
+    # clean up event handlers or anything else here
+  end
+
+  render_with_selection('DIV') do |selection, voyager_data|
+    # draw here
+  end
+end
+```