material_raingular-d3 0.1.0

data/lib/assets/javascripts/material_raingular/d3/stacked_bar/controller.coffee

@@ -0,0 +1,54 @@
+class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveModel
+  @inject('$parse','$element')
+  initialize: ->
+    @parent  = @$element.parent().controller('mrD3BarChart')
+    @direction = if @parent then 'vertical' else 'horizontal'
+    @parent ?= @$element.parent().controller('mrD3HorizontalBarChart')
+    @bar     = d3.select(@$element[0])
+    @label   = @$parse @$element.attr('mr-d3-label')
+    @$scope.$watch @label.bind(@), @adjustBars.bind(@)
+    @$scope.$watch @size.bind(@),  @adjustBars.bind(@)
+    @adjustBars()
+  bars: -> @bar.selectAll('rect')
+  size: -> if @direction == 'vertical' then @bar.attr('height') else @bar.attr('width')
+  rawSize: -> (@bars().nodes().map (rect) => d3.select(rect).attr('raw-size')).sum()
+  adjustBars: ->
+    @bar.attr('raw-size',@rawSize() || 0)
+    @bar.attr('label',   @label(@$scope))
+    @parent.adjustBars()
+    width  = @bar.attr('width')
+    height = @bar.attr('height')
+    x      = @bar.attr('x')
+    y      = @bar.attr('y')
+    usedSpace = 0
+    key = @bar.node().$$hashKey?.replace(':','_') #TODO: Not Dependable
+    @parent.holder.selectAll("text.bar.#{key}").remove()
+    for rect,i in @bars().nodes()
+      bar = d3.select(rect)
+      bar.attr('class',"#{i} bar")
+      bar.attr('fill',"rgba(1,1,1,#{1 - (0.1 * i)})")
+      text = @parent.holder.append('text')
+      .style("text-anchor","middle")
+      .attr('class',"#{i} bar text #{key}")
+      .text(bar.attr('label'))
+      if @direction == 'vertical'
+        ratio = height / @bar.attr('raw-size')
+        barHeight = ratio * bar.attr('raw-size')
+        usedSpace += barHeight
+        bar.attr('x',x)
+        bar.attr('width',width)
+        bar.attr('y',@parent.height() - usedSpace)
+        bar.attr('height',barHeight)
+        text.attr('x', -parseFloat(bar.attr('y')) - parseFloat(bar.attr('height'))/2)
+        .attr('y',parseFloat(bar.attr('x')) + parseFloat(bar.attr('width')))
+        .attr('transform','rotate(-90)')
+      else
+        ratio = width / @bar.attr('raw-size')
+        barWidth = ratio * bar.attr('raw-size')
+        bar.attr('y',y)
+        bar.attr('height',height)
+        bar.attr('x',usedSpace)
+        bar.attr('width',barWidth)
+        usedSpace += barWidth
+        text.attr('x', parseFloat(bar.attr('width'))/2 + parseFloat(bar.attr('x')))
+        .attr('y',parseFloat(bar.attr('y')) + parseFloat(bar.attr('height')))

data/lib/assets/javascripts/material_raingular/d3/stacked_bar/directive.coffee

@@ -0,0 +1,9 @@
+# //= require material_raingular/d3/stacked_bar/controller
+class MaterialRaingular.d3.Directives.mrD3StackedBar extends AngularDirective
+  @register(MaterialRaingular.d3.app)
+  restrict: "E"
+  require: ['?^^mrD3HorizontalBarChart','?^^mrD3BarChart']
+  controller: MaterialRaingular.d3.Directives.MrD3StackedBar
+  transclude: true
+  replace: true
+  template: "<g class='stacked bar' ng-transclude></rect>"

data/lib/assets/javascripts/material_raingular/d3/x_axis/directive.coffee

@@ -0,0 +1,7 @@
+class MaterialRaingular.d3.Directives.MrD3XAxis extends AngularDirective
+  @register(MaterialRaingular.d3.app)
+  restrict: "E"
+  require: ['?^mrD3HorizontalBarChart','?^mrD3BarChart']
+  transclude: true
+  replace: true
+  template: "<g class='x axis'></g>"

data/lib/assets/javascripts/material_raingular/d3/x_axis/linkmodel.coffee

@@ -0,0 +1,25 @@
+class XAxisModel extends AngularLinkModel
+  @inject('$parse')
+  initialize: ->
+    @parent = @$controller.compact()[0]
+    @options = @parent.options
+    @parent._xAxis = @axis = d3.select(@$element[0])
+    @axis.attr('transform',"translate(0,#{@parent.height()})")
+    @label  = @$parse @$attrs.mrD3Label
+    @domain = @$parse @$attrs.mrD3Domain
+    @$scope.$watchCollection @domain, @adjustAxis.bind(@)
+    @$scope.$watch @label,  @adjustAxis.bind(@)
+    @appendLabel()
+    @adjustAxis(true)
+  adjustAxis: (newVal,oldVal) ->
+    return if newVal == oldVal
+    @parent.xAxis.domain(@domain(@$scope)) if @domain(@$scope)
+    @axis.call(d3.axisBottom(@parent.xAxis))
+    @labelEl.text(@label(@$scope)) if @label(@$scope)
+    @parent.adjustBars()
+  appendLabel: ->
+    @labelEl = @parent.holder.append('text')
+    .attr('x', @parent.width()/2)
+    .attr('y', @parent.height() + (@options.margins.bottom + 30) / 2)
+    .style("text-anchor","middle")
+  @register(MaterialRaingular.d3.Directives.MrD3XAxis)

data/lib/assets/javascripts/material_raingular/d3/y_axis/directive.coffee

@@ -0,0 +1,7 @@
+class MaterialRaingular.d3.Directives.MrD3YAxis extends AngularDirective
+  @register(MaterialRaingular.d3.app)
+  restrict: "E"
+  require: ['?^mrD3HorizontalBarChart','?^mrD3BarChart']
+  transclude: true
+  replace: true
+  template: "<g class='y axis'></g>"

data/lib/assets/javascripts/material_raingular/d3/y_axis/linkmodel.coffee

@@ -0,0 +1,26 @@
+class YAxisModel extends AngularLinkModel
+  @inject('$parse')
+  initialize: ->
+    @parent = @$controller.compact()[0]
+    @options = @parent.options
+    @parent._yAxis = @axis = d3.select(@$element[0])
+    @label  = @$parse @$attrs.mrD3Label
+    @domain = @$parse @$attrs.mrD3Domain
+    @$scope.$watchCollection @domain, @adjustAxis.bind(@)
+    @$scope.$watch @label,  @adjustAxis.bind(@)
+    @appendLabel()
+    @adjustAxis(true)
+  adjustAxis: (newVal,oldVal) ->
+    return if newVal == oldVal
+    @parent.yAxis.domain(@domain(@$scope)) if @domain(@$scope)
+    @axis.call(d3.axisLeft(@parent.yAxis))
+    @labelEl.text(@label(@$scope)) if @label(@$scope)
+    @parent.adjustBars()
+  appendLabel: ->
+    @labelEl = @parent.holder.append('text')
+    .attr("transform", "rotate(-90)")
+    .attr("y", - (@options.margins.left + 30)/2)
+    .attr("x",0 - (@parent.height() / 2))
+    .attr("dy", "1em")
+    .style("text-anchor", "middle")
+  @register(MaterialRaingular.d3.Directives.MrD3YAxis)

data/lib/assets/javascripts/material_raingular-d3.coffee

@@ -0,0 +1,6 @@
+# //= require material_raingular
+# //= require d3.min
+# //= require_self
+# //= require_tree ./
+MaterialRaingular.d3 = {Directives: {}}
+MaterialRaingular.d3.app = angular.module('MrD3', [])

data/lib/assets/stylesheets/material_raingular/d3/barChart.sass

@@ -0,0 +1,4 @@
+mr-d3-horizontal-bar-chart, mr-d3-bar-chart
+  width: 100%
+  height: 100%
+  display: block

data/lib/assets/stylesheets/material_raingular/d3/ringWidget.css

@@ -0,0 +1,51 @@
+/******************************************************************************
+  Styling for RingWidgetModule
+******************************************************************************/
+mr-d3-ring-widget {
+  text-align: center;
+}
+
+mr-d3-ring {
+  display: block;
+}
+
+mr-d3-ring svg text {
+  font-family: sans-serif;
+  font-size: 12px;
+  fill: white;
+}
+
+mr-d3-ring svg text.center {
+  font-family: sans-serif;
+  font-size: 60px;
+  fill: white;
+  stroke: black;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  text-anchor: middle;
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Chrome/Safari/Opera */
+     -khtml-user-select: none; /* Konqueror */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none;
+}
+
+/*.mr-d3-ring-scale {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+}*/
+
+mr-d3-ring svg g.arc {
+  opacity: 0.2;
+}
+
+mr-d3-ring svg g.arc.selected {
+  opacity: 1;
+}
+
+mr-d3-ring svg g.arc:hover {
+  opacity: 1;
+}

data/lib/assets/stylesheets/material_raingular-d3.sass

@@ -0,0 +1,2 @@
+@import 'material_raingular/d3/ringWidget'
+@import 'material_raingular/d3/barChart'

data/lib/assets/templates/material_raingular/d3/ring_chart/ring.html

@@ -0,0 +1,7 @@
+<!-- Note that height and width were defined in here using Angular
+  interpolation but apparently there is a browser problem with this method
+  concerning the SVG element. These attributes are now set using D3.js directly
+-->
+<div class="mr-d3-ring-scale">
+  <svg viewBox="0 0 200 200"></svg>
+</div>

data/lib/assets/templates/material_raingular/d3/ring_chart/ringWidget.html

@@ -0,0 +1 @@
+<div class="mr-d3-ring-container" ng-transclude></div>

data/lib/material_raingular/d3/version.rb

@@ -0,0 +1,5 @@
+module MaterialRaingular
+  module D3
+    VERSION = "0.1.0"
+  end
+end

data/lib/material_raingular/d3.rb

@@ -0,0 +1,10 @@
+require "material_raingular/d3/version"
+
+module MaterialRaingular
+  module D3
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/material_raingular-d3.gemspec

@@ -0,0 +1,26 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'material_raingular/d3/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "material_raingular-d3"
+  spec.version       = MaterialRaingular::D3::VERSION
+  spec.authors       = ["Chris Moody"]
+  spec.email         = ["cmoody@transcon.com"]
+
+  spec.summary       = %q{D3 integration for material raingular}
+  spec.homepage      = "https://github.com/cmoodyEIT/material_raingular-d3"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.13"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_runtime_dependency "material_raingular", "~> 0.6"
+end