material_raingular-d3 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0075ac4a54d06c4290a26475164d8a97c976db50
-  data.tar.gz: 20bf12b579c0ab844fdaadd5459f0fafc5f4b1e5
+  metadata.gz: e2227d8f78026d1958580858a9a76063132362a2
+  data.tar.gz: fd3300c5b2d837cd305b3eddbda1f744f19f15f0
 SHA512:
-  metadata.gz: ed78e9a1dedae5d716490c6ef9d92efaf905aabf5859cc26986f4ddbd29820c7369eb276878bfb9a5b8da0fa77a1aaa8253395fea97af5b0234fa3d58bcb8607
-  data.tar.gz: 568a7533f494b9d79a8cf4b5f52448c6fccf05aebceb05d6d3464f441f49d5a007c1a3a8fe2a17fb254b28533525a07e8aa0ddfc8c0e63021441cc96f2873b8c
+  metadata.gz: bfc86fb047b62bb95cd212ad1f47ff38b8ff861ed7bfe9018d03def048b120262d6f71af532ac13ec76a66021fc3607bcd7a60462c1e406f8d336c5562124333
+  data.tar.gz: 237915a229448df597d651c960091ca0c9e005880e55dbc62a3cc976e9704ca6c87b2a16578b63dc396209e6cabcc585d075dc1eb209d923047a53ea4d5c380e

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

@@ -1,15 +1,21 @@
 class BarModel extends AngularLinkModel
   @inject('$parse')
   initialize: ->
-    @parent = @$controller.compact()[0]
-    @bar = d3.select(@$element[0])
-    @label = @$parse @$attrs.mrD3Label
-    @size  = @$parse @$attrs.mrD3Value
+    @parent  = @$controller.compact()[0]
+    @bar     = d3.select(@$element[0])
+    @label   = @$parse @$attrs.mrD3Label
+    @size    = @$parse @$attrs.mrD3Value
+    @options = @$parse(@$attrs.mrD3Options || '{}')
     @$scope.$watch @size.bind(@),  @changeBar.bind(@)
     @$scope.$watch @label.bind(@), @changeBar.bind(@)
+    @$scope.$watch @options.bind(@), @changeOptions.bind(@), true
     @changeBar()
+  changeOptions: (newVal) ->
+    return unless newVal
+    @bar.attr 'fill', newVal.fill || d3.interpolateCool Math.random(@index)
+    @parent.adjustBars()
   changeBar: ->
     @bar.attr('raw-size',@size(@$scope))
     @bar.attr('label',   @label(@$scope))
-    @parent.adjustBars()
+    @changeOptions(@options(@$scope))
   @register(MaterialRaingular.d3.Directives.MrD3Bar)

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

@@ -1,13 +1,23 @@
 class MaterialRaingular.d3.Directives.MrD3BarChartModel extends AngularDirectiveModel
   @inject('$timeout','$element','$attrs')
   initialize: ->
-    @options = @$scope.$eval(@$attrs.d3Options || '{}')
+    @options = @$scope.$eval(@$attrs.mrD3Options || '{}')
     @options.margins = Object.merge({top: 20,right: 20, left: 70, bottom: 50},@options.margins || {})
+    @options.minSize ?= 100
     @svg = d3.select(@$element[0])
     @holder = @svg.select('g')
     @holder.attr('transform',"translate(#{@options.margins.left},#{@options.margins.right})")
+    @$scope.$watch @height.bind(@), @setAxis.bind(@)
+    @$scope.$watch @width.bind(@),  @setAxis.bind(@)
+    @setAxis()
+  setAxis: ->
     @xAxis = d3.scaleBand().rangeRound([0,@width()]).padding(0.1)
     @yAxis = d3.scaleLinear().range([0,@height()])
+    if @_xAxis || @_yAxis
+      @_xAxis?.adjustAxis(true)
+      @_yAxis?.adjustAxis(true)
+    else
+      @adjustBars()
   indexOf: (bar) ->
     @bars().nodes().indexOf(bar)
   bars: ->
@@ -25,9 +35,9 @@ class MaterialRaingular.d3.Directives.MrD3BarChartModel extends AngularDirective
     for rect in @bars().nodes()
       d3.select(rect).attr('width',@xAxis.bandwidth())
       d3.select(rect).attr('x',@xAxis(@xDomain[@indexOf(rect)]))
-    @_xAxis?.call(d3.axisBottom(@xAxis))
-  height:   -> @$element[0].clientHeight - @options.margins.top  - @options.margins.bottom
-  width:    -> @$element[0].clientWidth  - @options.margins.left - @options.margins.right
+    @_xAxis?.axis.call(d3.axisBottom(@xAxis))
+  height:   -> [@$element[0].parentElement.clientHeight, @options.minSize].max() - @options.margins.top  - @options.margins.bottom
+  width:    -> [@$element[0].parentElement.clientWidth,  @options.minSize].max()  - @options.margins.left - @options.margins.right
   maxValue: ->
     val   = @yAxis?.domain().max()
     val ||= (@bars().nodes().map (rect) -> d3.select(rect).attr('raw-size')).max()

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

@@ -5,7 +5,7 @@ class MrD3BarChart extends AngularDirective
   controller: MaterialRaingular.d3.Directives.MrD3BarChartModel
   transclude: true
   replace: true
-  template: "<svg height='100%' width: 100%><g ng-transclude></g></svg>"
+  template: "<svg height='100%' width='100%'><g ng-transclude></g></svg>"
 ###
   Usage Slim syntax
   mr-d3-bar-chart.test ng-init="dataSet = [{l: 'a',v: 23},{l: 'b',v: 13},{l: 'c',v: 21},{l: 'd',v: 14},{l: 'e',v: 37},{l: 'f',v: 15},{l: 'g',v: 18},{l: 'h',v: 34},{l: 'i',v: 30}]"

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

@@ -1,13 +1,23 @@
 class MaterialRaingular.d3.Directives.MrD3HorizontalBarChartModel extends AngularDirectiveModel
   @inject('$timeout','$element','$attrs')
   initialize: ->
-    @options = @$scope.$eval(@$attrs.d3Options || '{}')
+    @options = @$scope.$eval(@$attrs.mrD3Options || '{}')
     @options.margins = Object.merge({top: 20,right: 20, left: 70, bottom: 50},@options.margins || {})
+    @options.minSize ?= 100
     @svg = d3.select(@$element[0])
     @holder = @svg.select('g')
     @holder.attr('transform',"translate(#{@options.margins.left},#{@options.margins.right})")
+    @$scope.$watch @height.bind(@), @setAxis.bind(@)
+    @$scope.$watch @width.bind(@),  @setAxis.bind(@)
+    @setAxis()
+  setAxis: ->
     @yAxis = d3.scaleBand().rangeRound([0,@height()]).padding(0.1)
     @xAxis = d3.scaleLinear().range([0,@width()])
+    if @_xAxis || @_yAxis
+      @_xAxis?.adjustAxis(true)
+      @_yAxis?.adjustAxis(true)
+    else
+      @adjustBars()
   indexOf: (bar) ->
     @bars().nodes().indexOf(bar)
   bars: ->
@@ -24,9 +34,9 @@ class MaterialRaingular.d3.Directives.MrD3HorizontalBarChartModel extends Angula
     for rect in @bars().nodes()
       d3.select(rect).attr('height',@yAxis.bandwidth())
       d3.select(rect).attr('y',@yAxis(@yDomain[@indexOf(rect)]))
-    @_yAxis?.call(d3.axisLeft(@yAxis))
-  height:   -> @$element[0].clientHeight - @options.margins.top  - @options.margins.bottom
-  width:    -> @$element[0].clientWidth  - @options.margins.left - @options.margins.right
+    @_yAxis?.axis.call(d3.axisLeft(@yAxis))
+  height:   -> [@$element[0].parentElement.clientHeight, @options.minSize].max() - @options.margins.top  - @options.margins.bottom
+  width:    -> [@$element[0].parentElement.clientWidth,  @options.minSize].max()  - @options.margins.left - @options.margins.right
   maxValue: ->
     val   = @xAxis?.domain().max()
     val ||= (@bars().nodes().map (rect) -> d3.select(rect).attr('raw-size')).max()

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

@@ -5,7 +5,7 @@ class MrD3HorizontalBarChart extends AngularDirective
   controller: MaterialRaingular.d3.Directives.MrD3HorizontalBarChartModel
   transclude: true
   replace: true
-  template: "<svg height='100%' width: 100%><g ng-transclude></g></svg>"
+  template: "<svg height='100%' width='100%'><g ng-transclude></g></svg>"
 ###
   Usage Slim Syntax
   mr-d3-horizontal-bar-chart.test ng-init="dataSet = [{l: 'a',v: 23},{l: 'b',v: 13},{l: 'c',v: 21},{l: 'd',v: 14},{l: 'e',v: 37},{l: 'f',v: 15},{l: 'g',v: 18},{l: 'h',v: 34},{l: 'i',v: 30}]"

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

@@ -0,0 +1,37 @@
+class MaterialRaingular.d3.Directives.PieChartModel extends AngularDirectiveModel
+  @inject('$timeout','$element','$attrs')
+  initialize: ->
+    @svg        = d3.select(@$element[0])
+    @chartLayer = @svg.select('g.chartLayer')
+    @setSize()
+    @arc        = d3.arc().outerRadius(@chartHeight / 2).innerRadius(0)
+    @slices = []
+    @values = []
+  setSize: () ->
+    @options = @$scope.$eval(@$attrs.mrD3Options) || {}
+    @width   = @options.width  || 960
+    @height  = @options.height || 500
+    @color   = @options.color  || '6b486b'
+    @margin  = @options.margin || {top: 40,left: 0,bottom: 40,right: 0}
+    @chartWidth  = @width - (@margin.left + @margin.right)
+    @chartHeight = @height - (@margin.top + @margin.bottom)
+    @svg.attr('width', @width).attr 'height', @height
+    @chartLayer.attr('width', @chartWidth).attr('height', @chartHeight).attr 'transform', "translate(#{[@margin.left,@margin.top]})"
+
+  addSlice: (slice) ->
+    @slices.push(slice) unless @slices.includes(slice)
+    return @slices.index(slice)
+  changeData: (slice,value) ->
+    @slices.push(slice) unless @slices.includes(slice)
+    index = @slices.indexOf(slice)
+    @values[index] = value
+    @arcs = d3.pie().sort(null).value((d) -> d)(@values)
+    @$timeout.cancel(@drawTimeout)
+    @drawTimeout = @$timeout(@drawChart.bind(@),10)
+    return index
+  drawChart: () ->
+    for slice,i in @slices
+      continue unless @arcs[i]
+      slice.path
+      .attr('d', @arc(@arcs[i]))
+      slice.afterDraw?()

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

@@ -1,6 +1,11 @@
-class MaterialRaingular.d3.Directives.MrD3PieChart extends AngularDirective
+# //= require material_raingular/d3/pie_chart/controller
+class MrD3PieChart extends AngularDirective
   restrict: "E"
   @register(MaterialRaingular.d3.app)
+  controller: MaterialRaingular.d3.Directives.PieChartModel
+  transclude: true
+  replace: true
+  template: "<svg height='100%' width='100%'><g class='chartLayer' ng-transclude></g></svg>"
 ###
   Usage Slim Syntax
     mr-d3-pie-chart d3-data="{bio: 10, planning: 30, cr: 12}"

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

@@ -0,0 +1,11 @@
+class MaterialRaingular.d3.Directives.MrD3PieSlice extends AngularDirective
+  restrict: "E"
+  @register(MaterialRaingular.d3.app)
+  controller: MaterialRaingular.d3.Directives.PieChartModel
+  replace: true
+  require: '^mrD3PieChart'
+  template: "<g class='arc'></g>"
+###
+  Usage Slim Syntax
+    mr-d3-pie-chart d3-data="{bio: 10, planning: 30, cr: 12}"
+###

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

@@ -0,0 +1,67 @@
+class PieSliceModel extends AngularLinkModel
+  @inject('$parse')
+  initialize: ->
+    @options    = @$parse(@$attrs.mrD3Options || '{}')
+    @slice      = d3.select(@$element[0])
+    @index      = @$controller.addSlice(@)
+    @path       = @slice.append('path').attr('id', 'arc-' + @index)
+    @transition = d3.transition().duration(300).ease(d3.easeLinear)
+    @labelFn    = @$parse @$attrs.mrD3Label
+    @valueFn    = @$parse @$attrs.mrD3Value
+    @adjustSlice()
+    @addText()
+    @$scope.$watch @valueFn.bind(@), @changeValue.bind(@)
+    @$scope.$watch @labelFn.bind(@), @adjustText.bind(@)
+    @$scope.$watch @options.bind(@), @changeOptions.bind(@), true
+  changeOptions: (newVal) ->
+    return unless newVal
+    @path.attr 'fill', newVal.fill || d3.interpolateCool Math.random(@index)
+
+  changeValue: (newVal,oldVal) ->
+    return unless newVal
+    @index = @$controller.changeData(@,newVal)
+  adjustSlice: ->
+    @slice.attr('transform', "translate(#{[@$controller.chartWidth / 2,@$controller.chartHeight / 2]})")
+    .on('mouseover', @_mouseOver.bind(@))
+    .on('mouseout',  @_mouseOut.bind(@))
+    .on('mousemove', @_mouseMove.bind(@))
+    .on('click',     @_click.bind(@))
+  addText: ->
+    @text = @slice.append('text')
+    .style('text-anchor', 'middle')
+    .style('pointer-events', 'none')
+    .style('fill', '#fff')
+    .attr('dy', '.35em')
+  adjustText: ->
+    return unless @$controller.arcs && @index != undefined
+    data = @$controller.arcs[@index]
+    centroid = @$controller.arc.centroid(data)
+    x = centroid[0]
+    y = centroid[1]
+    @text.attr 'transform', "translate(#{x},#{y})"
+    .text @labelFn(@$scope)
+  afterDraw: ->
+    @adjustText()
+  _mouseOver: ->
+    d3.select("#tip-#{@index}#{@valueFn(@$scope).toFixed()}")
+      .classed('hidden', false)
+      .style('left', d3.event.pageX + 'px')
+      .style('top', ((d3.event.pageY - 80 ) / 2) + 'px')
+  _mouseMove: (d, i) ->
+    d3.select("#tip-#{@index}#{@valueFn(@$scope).toFixed()}")
+      .style('left', d3.event.pageX + 'px')
+      .style('top', ((d3.event.pageY - 80 ) / 2) + 'px')
+  _mouseOut: (d, i) ->
+    d3.select("#tip-#{@index}#{@valueFn(@$scope).toFixed()}").classed('hidden', true)
+  _click: ->
+    paths = @$controller.chartLayer.selectAll('path')
+    paths.selectAll('animateTransform').remove()
+    reduce = !@path.attr('transform') || (@path.attr('transform').strip() == "translate(0,0)scale(1,1)")
+    paths.transition(@transition).attr('transform',"translate(0,0) scale(1,1)")
+    return unless reduce
+    theta = (@$controller.arcs[@index].endAngle + @$controller.arcs[@index].startAngle)/2
+    x = 10 * Math.cos (Math.PI / 2) - theta
+    y = -10 * Math.sin (Math.PI / 2) - theta
+    @path.transition(@transition).attr('transform',"translate(#{x},#{y}) scale(1.25,1.25)")
+
+  @register(MaterialRaingular.d3.Directives.MrD3PieSlice)

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

@@ -22,11 +22,15 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
     y      = @bar.attr('y')
     usedSpace = 0
     key = @bar.node().$$hashKey?.replace(':','_') #TODO: Not Dependable
+    fill = null
+    fillRegex = /.*\(([0-9]+\, [0-9]+\, [0-9]+).*\)/
     @parent.holder.selectAll("text.bar.#{key}").remove()
+    length = @bars().nodes().length
     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)})")
+      fill = fill || bar.attr('fill')?.match(fillRegex)?[1] || '0,0,0'
+      bar.attr('fill',"rgba(#{fill},#{1 - i/length})")
       text = @parent.holder.append('text')
       .style("text-anchor","middle")
       .attr('class',"#{i} bar text #{key}")

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

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

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

@@ -3,7 +3,8 @@ class YAxisModel extends AngularLinkModel
   initialize: ->
     @parent = @$controller.compact()[0]
     @options = @parent.options
-    @parent._yAxis = @axis = d3.select(@$element[0])
+    @parent._yAxis = @
+    @axis   = d3.select(@$element[0])
     @label  = @$parse @$attrs.mrD3Label
     @domain = @$parse @$attrs.mrD3Domain
     @$scope.$watchCollection @domain, @adjustAxis.bind(@)
@@ -16,11 +17,14 @@ class YAxisModel extends AngularLinkModel
     @axis.call(d3.axisLeft(@parent.yAxis))
     @labelEl.text(@label(@$scope)) if @label(@$scope)
     @parent.adjustBars()
+    @adjustLabel()
   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")
+    @adjustLabel()
+  adjustLabel: ->
+    @labelEl.attr("y", - (@options.margins.left + 30)/2)
+    .attr("x",0 - (@parent.height() / 2))
   @register(MaterialRaingular.d3.Directives.MrD3YAxis)

data/lib/material_raingular/d3/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_raingular-d3
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Chris Moody
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-03-24 00:00:00.000000000 Z
+date: 2017-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -76,8 +76,10 @@ files:
 - lib/assets/javascripts/material_raingular/d3/extensions.coffee
 - lib/assets/javascripts/material_raingular/d3/horizontal_bar_chart/controller.coffee
 - lib/assets/javascripts/material_raingular/d3/horizontal_bar_chart/directive.coffee
+- lib/assets/javascripts/material_raingular/d3/pie_chart/controller.coffee
 - lib/assets/javascripts/material_raingular/d3/pie_chart/directive.coffee
-- lib/assets/javascripts/material_raingular/d3/pie_chart/linkmodel.coffee
+- lib/assets/javascripts/material_raingular/d3/pie_slice/directive.coffee
+- lib/assets/javascripts/material_raingular/d3/pie_slice/linkmodel.coffee
 - lib/assets/javascripts/material_raingular/d3/ring_chart/directive.coffee
 - lib/assets/javascripts/material_raingular/d3/ring_chart/linkmodel.coffee
 - lib/assets/javascripts/material_raingular/d3/ring_chart/widget_controller.coffee

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

@@ -1,39 +0,0 @@
-class PieChartModel extends AngularLinkModel
-  @inject('$timeout')
-  initialize: ->
-    @svg = d3.select(@$element[0]).append('svg')
-    @chartLayer = @svg.append('g').classed('chartLayer', true)
-    data = Object.map(@$scope.$eval(@$attrs.d3Data))(@cast.bind(@))
-    @setSize(data)
-    @drawChart(data)
-    @$scope.$watchCollection @$attrs.d3Data, @redrawChart.bind(@)
-  cast: (key,val) -> {name: key.titleize(), value: val}
-  redrawChart: (obj) ->
-    data = Object.map(@$scope.$eval(@$attrs.d3Data))(@cast.bind(@))
-    @drawChart(data)
-
-  setSize: (data) ->
-    @options = @$scope.$eval(@$attrs.d3Options) || {}
-    @width   = @options.width  || 960
-    @height  = @options.height || 500
-    @color   = @options.color  || '6b486b'
-    @margin  = @options.margin || {top: 40,left: 0,bottom: 40,right: 0}
-    @chartWidth  = @width - (@margin.left + @margin.right)
-    @chartHeight = @height - (@margin.top + @margin.bottom)
-    @svg.attr('width', @width).attr 'height', @height
-    @chartLayer.attr('width', @chartWidth).attr('height', @chartHeight).attr 'transform', "translate(#{[@margin.left,@margin.top]})"
-
-  drawChart: (data) ->
-    @chartLayer.selectAll('g').remove()
-    arcs = d3.pie().sort(null).value((d) -> d.value)(data)
-    arc  = d3.arc().outerRadius(@chartHeight / 2).innerRadius(@chartHeight / 4).padAngle(0.03).cornerRadius(8) #/ <- I hate atom right now
-    pieG = @chartLayer.selectAll('g').data([ data ]).enter().append('g').attr('transform', "translate(#{[@chartWidth / 2,@chartHeight / 2]})")
-    block = pieG.selectAll('.arc').data(arcs)
-    newBlock = block.enter().append('g').classed('arc', true)
-    newBlock.append('path').attr('d', arc).attr('id', (d, i) -> 'arc-' + i)
-    .attr('stroke', 'gray').attr 'fill', (d, i) -> d3.interpolateCool Math.random()
-    newBlock.append('text').attr('dx', 55).attr('dy', -5).append('textPath').attr('xlink:href', (d, i) ->'#arc-' + i)
-    .text (d) -> d.data.name
-    return
-
-  @register(MaterialRaingular.d3.Directives.MrD3PieChart)