material_raingular-d3 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e2227d8f78026d1958580858a9a76063132362a2
-  data.tar.gz: fd3300c5b2d837cd305b3eddbda1f744f19f15f0
+  metadata.gz: a4d591e5ddc3b5ce40657d769db5dd414cc94614
+  data.tar.gz: 7ff1d5cb8e6102c46c17508441c75e5b8ce73ddc
 SHA512:
-  metadata.gz: bfc86fb047b62bb95cd212ad1f47ff38b8ff861ed7bfe9018d03def048b120262d6f71af532ac13ec76a66021fc3607bcd7a60462c1e406f8d336c5562124333
-  data.tar.gz: 237915a229448df597d651c960091ca0c9e005880e55dbc62a3cc976e9704ca6c87b2a16578b63dc396209e6cabcc585d075dc1eb209d923047a53ea4d5c380e
+  metadata.gz: 0ad9ab358094a62c455344ca3057e7fb90aaed576e14e2f2bbb42e3b4b1902b48d45d9fba21ce8d51d8ea0be5de1c053bc5d33e12e2adcdd4caffb4fb08cd174
+  data.tar.gz: e4c91e62dc89717dc1f60bb7425bc69a434d87fd7223773c1659dc7bbfa223d79675c49f9f952e8b5696ca10259ae9bc6924e58fbe6b3d7b5d95e7b23aca0e7f

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

@@ -21,6 +21,11 @@ class MaterialRaingular.d3.Directives.PieChartModel extends AngularDirectiveMode
   addSlice: (slice) ->
     @slices.push(slice) unless @slices.includes(slice)
     return @slices.index(slice)
+  removeSlice: (slice) ->
+    index = @slices.index(slice)
+    @slices.splice(index,1)
+    @values.splice(index,1)
+    @drawChart()
   changeData: (slice,value) ->
     @slices.push(slice) unless @slices.includes(slice)
     index = @slices.indexOf(slice)

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

@@ -4,7 +4,7 @@ class PieSliceModel extends AngularLinkModel
     @options    = @$parse(@$attrs.mrD3Options || '{}')
     @slice      = d3.select(@$element[0])
     @index      = @$controller.addSlice(@)
-    @path       = @slice.append('path').attr('id', 'arc-' + @index)
+    @path       = @slice.append('path').attr("id", 'arc-' + @index).attr('stroke', '#FFF')
     @transition = d3.transition().duration(300).ease(d3.easeLinear)
     @labelFn    = @$parse @$attrs.mrD3Label
     @valueFn    = @$parse @$attrs.mrD3Value
@@ -13,10 +13,10 @@ class PieSliceModel extends AngularLinkModel
     @$scope.$watch @valueFn.bind(@), @changeValue.bind(@)
     @$scope.$watch @labelFn.bind(@), @adjustText.bind(@)
     @$scope.$watch @options.bind(@), @changeOptions.bind(@), true
+    @$scope.$on '$destroy', @removeSlice.bind(@)
   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)
@@ -40,17 +40,36 @@ class PieSliceModel extends AngularLinkModel
     y = centroid[1]
     @text.attr 'transform', "translate(#{x},#{y})"
     .text @labelFn(@$scope)
+    bbox = @text.node().getBBox()
+    topLeft =
+      x : x + bbox.x,
+      y : y + bbox.y
+    topRight =
+      x : topLeft.x + bbox.width,
+      y : topLeft.y
+    bottomLeft =
+      x : topLeft.x,
+      y : topLeft.y + bbox.height
+    bottomRight =
+      x : topLeft.x + bbox.width,
+      y : topLeft.y + bbox.height
+    visible = _pointIsInArc(topLeft, @$controller, @index) &&
+              _pointIsInArc(topRight, @$controller, @index) &&
+              _pointIsInArc(bottomLeft, @$controller, @index) &&
+              _pointIsInArc(bottomRight, @$controller, @index)
+    @text.attr('display', 'none') unless visible
+  removeSlice: -> @$controller.removeSlice(@)
   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')
+      .style('left',(d3.event.pageX + 10) + 'px')
+      .style('top', (d3.event.pageY + 10) + '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')
+      .style('left',(d3.event.pageX + 10) + 'px')
+      .style('top', (d3.event.pageY + 10) + 'px')
   _mouseOut: (d, i) ->
     d3.select("#tip-#{@index}#{@valueFn(@$scope).toFixed()}").classed('hidden', true)
   _click: ->
@@ -63,5 +82,14 @@ class PieSliceModel extends AngularLinkModel
     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)")
+  _pointIsInArc = (pt, controller, index) ->
+    r1 = 0
+    r2 = controller.chartHeight / 2
+    theta1 = controller.arcs[index].startAngle
+    theta2 = controller.arcs[index].endAngle
+    dist = pt.x * pt.x + pt.y * pt.y
+    angle = Math.atan2(pt.x, -pt.y)
+    angle = if angle < 0 then angle + Math.PI * 2 else angle
+    r1 * r1 <= dist && dist <= r2 * r2 && theta1 <= angle && angle <= theta2
 
   @register(MaterialRaingular.d3.Directives.MrD3PieSlice)

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

@@ -6,12 +6,16 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
     @parent ?= @$element.parent().controller('mrD3HorizontalBarChart')
     @bar     = d3.select(@$element[0])
     @label   = @$parse @$element.attr('mr-d3-label')
+    @texts   = []
     @$scope.$watch @label.bind(@), @adjustBars.bind(@)
     @$scope.$watch @size.bind(@),  @adjustBars.bind(@)
+    @$scope.$on '$destroy', @removeText.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()
+  removeText: ->
+    text.remove() for text in @texts
   adjustBars: ->
     @bar.attr('raw-size',@rawSize() || 0)
     @bar.attr('label',   @label(@$scope))
@@ -31,10 +35,16 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
       bar.attr('class',"#{i} bar")
       fill = fill || bar.attr('fill')?.match(fillRegex)?[1] || '0,0,0'
       bar.attr('fill',"rgba(#{fill},#{1 - i/length})")
+      parentLabel = rect.parentNode.attributes['label'].value.slice(-2)
+      bar.on('mouseover', @_mouseOver.bind(null,rect,i,parentLabel))
+        .on('mouseout',  @_mouseOut.bind(null,rect,i,parentLabel))
+        .on('mousemove', @_mouseMove.bind(null,rect,i,parentLabel))
       text = @parent.holder.append('text')
       .style("text-anchor","middle")
+      .style("fill", "#FFF")
       .attr('class',"#{i} bar text #{key}")
       .text(bar.attr('label'))
+      @texts.push(text)
       if @direction == 'vertical'
         ratio = height / @bar.attr('raw-size')
         barHeight = ratio * bar.attr('raw-size')
@@ -46,6 +56,7 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
         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)')
+        .style('pointer-events', 'none')
       else
         ratio = width / @bar.attr('raw-size')
         barWidth = ratio * bar.attr('raw-size')
@@ -55,4 +66,22 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
         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')))
+        .attr('y',parseFloat(bar.attr('y')) + parseFloat(bar.attr('height'))/2 + 5)
+        if text.node().getBBox().width > barWidth
+          text.attr('display', 'none')
+        else
+          text.style('pointer-events', 'none')
+  _mouseOver: (d,i,parentLabel) ->
+    d3.select("#tip-table-" + parentLabel)
+      .classed('hidden', false)
+      .style('left', (d3.event.pageX + 10) + 'px')
+      .style('top', (d3.event.pageY + 10) + 'px')
+      .select("#tip-" + i).classed('hidden', false)
+  _mouseMove: (d,i,parentLabel) ->
+    d3.select("#tip-table-" + parentLabel)
+      .style('left', (d3.event.pageX + 10) + 'px')
+      .style('top', (d3.event.pageY + 10) + 'px')
+  _mouseOut: (d,i,parentLabel) ->
+    d3.select("#tip-table-" + parentLabel)
+      .classed('hidden', true)
+      .select("#tip-" + i).classed('hidden', true)

data/lib/material_raingular/d3/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_raingular-d3
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Chris Moody
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-03-30 00:00:00.000000000 Z
+date: 2017-04-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler