hyper-vis 1.0.0.lap34 → 1.0.1

data/spec/vis_graph3d_component_spec.rb

@@ -0,0 +1,124 @@
+require 'spec_helper'
+
+describe 'Hyperloop::Vis::Graph3d::Component', js: true do
+
+  it 'creates a component by using the mixin and renders it' do
+    mount 'OuterComponent' do
+      class VisComponent
+        include Hyperloop::Vis::Graph3d::Mixin
+
+        render_with_dom_node do |dom_node, data, options|
+          net = Vis::Graph3d.new(dom_node, data, options)
+        end
+      end
+      class OuterComponent < Hyperloop::Component
+        render do
+          options = {
+            width:  '600px',
+            height: '600px',
+            style: 'surface',
+            show_perspective: true,
+            show_grid: true,
+            show_shadow: false,
+            keep_aspect_ratio: true,
+            vertical_ratio: 0.5
+          }
+          dataset = Vis::DataSet.new
+          steps = 50  # number of datapoints will be steps*steps
+          axis_max = 314
+          axis_step = axis_max / steps
+          (0...axis_max).step(axis_step) do |x|
+            (0...axis_max).step(axis_step) do |y|
+              value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+              dataset.add(x: x, y: y, z: value, style: value)
+            end
+          end
+          DIV { VisComponent(vis_data: dataset, options: options)}
+        end
+      end
+    end
+    expect(page.body).to include('<canvas')
+  end
+
+  it 'creates a component by inheriting and renders it' do
+    mount 'OuterComponent' do
+      class VisComponent < Hyperloop::Vis::Graph3d::Component
+        render_with_dom_node do |dom_node, data, options|
+          net = Vis::Graph3d.new(dom_node, data, options)
+        end
+      end
+      class OuterComponent < Hyperloop::Component
+        render do
+          options = {
+            width:  '600px',
+            height: '600px',
+            style: 'surface',
+            show_perspective: true,
+            show_grid: true,
+            show_shadow: false,
+            keep_aspect_ratio: true,
+            vertical_ratio: 0.5
+          }
+          dataset = Vis::DataSet.new
+          steps = 50  # number of datapoints will be steps*steps
+          axis_max = 314
+          axis_step = axis_max / steps
+          (0...axis_max).step(axis_step) do |x|
+            (0...axis_max).step(axis_step) do |y|
+              value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+              dataset.add(x: x, y: y, z: value, style: value)
+            end
+          end
+          DIV { VisComponent(vis_data: dataset, options: options)}
+        end
+      end
+    end
+    expect(page.body).to include('<canvas')
+  end
+
+  it 'actually passes the params to the component' do
+    mount 'OuterComponent' do
+      class VisComponent < Hyperloop::Vis::Graph3d::Component
+        def self.passed_data
+          @@passed_data
+        end
+        def self.passed_options
+          @@passed_options
+        end
+        render_with_dom_node do |dom_node, data, options|
+          @@passed_data = data
+          @@passed_options = options
+          net = Vis::Graph3d.new(dom_node, data, options)
+        end
+      end
+      class OuterComponent < Hyperloop::Component
+        render do
+          options = {
+            width:  '600px',
+            height: '600px',
+            style: 'surface',
+            show_perspective: true,
+            show_grid: true,
+            show_shadow: false,
+            keep_aspect_ratio: true,
+            vertical_ratio: 0.5
+          }
+          dataset = Vis::DataSet.new
+          steps = 50  # number of datapoints will be steps*steps
+          axis_max = 314
+          axis_step = axis_max / steps
+          (0...axis_max).step(axis_step) do |x|
+            (0...axis_max).step(axis_step) do |y|
+              value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+              dataset.add(x: x, y: y, z: value, style: value)
+            end
+          end
+          DIV { VisComponent(vis_data: dataset, options: options)}
+        end
+      end
+    end
+    expect(page.body).to include('<canvas')
+    expect_evaluate_ruby('VisComponent.passed_data.is_a?(Vis::DataSet)').to eq(true)
+    expect_evaluate_ruby('VisComponent.passed_options.has_key?(:show_shadow)').to eq(true)
+  end
+end

data/spec/vis_graph3d_spec.rb

@@ -0,0 +1,247 @@
+require 'spec_helper'
+
+describe 'Vis::Graph3d', js: true do
+
+  it 'creates a new Graph with options' do
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      [g3d.is_a?(Vis::Graph3d), dom_node.JS[:children].JS[:length]]
+    end.to eq([true, 1])
+  end
+  
+  it 'it can replace the data' do
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      created = dom_node.JS[:children].JS[:length]
+      new_dataset = Vis::DataSet.new
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.cos(x/50) * Math.sin(y/50) * 50 + 50
+          new_dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      g3d.set_data(new_dataset)
+      [g3d.is_a?(Vis::Graph3d), created]
+    end.to eq([true, 1])
+  end
+
+  it 'it can set options' do
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      created = dom_node.JS[:children].JS[:length]
+      error = false
+      begin
+        g3d.set_options({
+          width:  '500px',
+          height: '500px',
+          style: 'surface',
+          show_perspective: true,
+          show_grid: true,
+          show_shadow: true,
+          keep_aspect_ratio: true,
+          vertical_ratio: 0.5
+        })
+      rescue
+        error = true
+      end
+      [g3d.is_a?(Vis::Graph3d), created, error]
+    end.to eq([true, 1, false])
+  end
+
+  xit 'it can set a event listener' do
+    # needs simulated user input
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      created = dom_node.JS[:children].JS[:length]
+      received = []
+      g3d.on(:camera_position_change) do |info|
+        received << info
+        `console.log('received', info)`
+      end
+      [g3d.is_a?(Vis::Graph3d), created, received.size]
+    end.to eq([true, 1, 1])
+  end
+
+  it 'can call redraw' do
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      created = dom_node.JS[:children].JS[:length]
+      g3d.redraw
+      redrawn = dom_node.JS[:children].JS[:length]
+      [g3d.is_a?(Vis::Graph3d), created, redrawn]
+    end.to eq([true, 1, 1])
+  end
+
+  it 'can set the size' do
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      created = dom_node.JS[:children].JS[:length]
+      g3d.set_size('400px', '300px')
+      dom_node.JS.querySelector('canvas')
+      [g3d.is_a?(Vis::Graph3d), created]
+    end.to eq([true, 1])
+  end
+
+  it 'can set and get the camera position' do
+    expect_evaluate_ruby do
+      options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        show_perspective: true,
+        show_grid: true,
+        show_shadow: false,
+        keep_aspect_ratio: true,
+        vertical_ratio: 0.5
+      }
+      dataset = Vis::DataSet.new
+      steps = 50  # number of datapoints will be steps*steps
+      axis_max = 314
+      axis_step = axis_max / steps
+      (0...axis_max).step(axis_step) do |x|
+        (0...axis_max).step(axis_step) do |y|
+          value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50
+          dataset.add(x: x, y: y, z: value, style: value)
+        end
+      end
+      dom_node = Vis::Graph3d.test_container
+      g3d = Vis::Graph3d.new(dom_node, dataset, options)
+      created = dom_node.JS[:children].JS[:length]
+      position = g3d.get_camera_position
+      new_position = position.dup
+      new_position[:distance] = new_position[:distance] + 1
+      g3d.set_camera_position(new_position)
+      final_position = g3d.get_camera_position
+      [g3d.is_a?(Vis::Graph3d), created, final_position[:distance] == new_position[:distance]]
+    end.to eq([true, 1, true])
+  end
+
+  xit 'animation_start'
+  xit 'animation_stop'
+end

data/spec/vis_timeline_component_spec.rb

@@ -0,0 +1,89 @@
+require 'spec_helper'
+
+describe 'Hyperloop::Vis::Timeline::Component', js: true do
+
+  it 'creates a component by using the mixin and renders it' do
+    mount 'OuterComponent' do
+      class VisComponent
+        include Hyperloop::Vis::Timeline::Mixin
+
+        render_with_dom_node do |dom_node, items|
+          net = Vis::Timeline.new(dom_node, items)
+        end
+      end
+      class OuterComponent < Hyperloop::Component
+        render do
+          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'}
+          ])
+          DIV { VisComponent(items: data) }
+        end
+      end
+    end
+    expect(page.body).to include('class="vis-timeline')
+  end
+
+  it 'creates a component by inheriting and renders it' do
+    mount 'OuterComponent' do
+      class VisComponent < Hyperloop::Vis::Timeline::Component
+        render_with_dom_node do |dom_node, items|
+          net = Vis::Timeline.new(dom_node, items)
+        end
+      end
+      class OuterComponent < Hyperloop::Component
+        render do
+          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'}
+          ])
+          DIV { VisComponent(items: data) }
+        end
+      end
+    end
+    expect(page.body).to include('class="vis-timeline')
+  end
+
+  it 'actually passes the params to the component' do
+    mount 'OuterComponent' do
+      class VisComponent < Hyperloop::Vis::Timeline::Component
+        def self.passed_data
+          @@passed_data
+        end
+        def self.passed_options
+          @@passed_options
+        end
+        render_with_dom_node do |dom_node, items, groups, options|
+          @@passed_data = items
+          @@passed_options = options
+          net = Vis::Timeline.new(dom_node, items, options)
+        end
+      end
+      class OuterComponent < Hyperloop::Component
+        render do
+          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'}
+          ])
+          options = { align: 'left' }
+          DIV { VisComponent(items: data, options: options)}
+        end
+      end
+    end
+    expect(page.body).to include('class="vis-timeline')
+    expect_evaluate_ruby('VisComponent.passed_data.is_a?(Vis::DataSet)').to eq(true)
+    expect_evaluate_ruby('VisComponent.passed_options.has_key?(:align)').to eq(true)
+  end
+end