material_raingular-d3 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e8468932be38b1f1f2e28820ad8347729fa3e54f
-  data.tar.gz: 3412543b6e437b00bc5dc162b6125ca15caf0b28
+  metadata.gz: b0d6691c0e4cac4a21e949379be35b4daa25c26c
+  data.tar.gz: 3292ef3d4130a85df2713d417783fd51bbe3ccb0
 SHA512:
-  metadata.gz: 76b78f33ceccfd7f3ecb7c518be8e1175b3f69a0a5ae118b6b42bab1fc05db46c283d37e99be8139e13475744a43bff23c185b3ec6f1efa3713b87693fcd66fe
-  data.tar.gz: bcd3763519ad084f9c10b1ed20fb487a1976954304906a075f910c7cee04b23f2bf2d0ae8c2e5379e2a443f8541b308ea2599a1ed607a545e86104c2f647808f
+  metadata.gz: fe8a3145d09113d256bb647aa4ca33ddbea2e4c11795a0d16c317b86de2920e0b297492a969041714b860add3e0b84f3d12d6dfd0f2c7241816b626163280ebc
+  data.tar.gz: c55186743a52ae8aa187d12af31b9e7e7dd66fa81385cdcbeedec7ae457a98900b3423b1bdc6639eea83ae44ce300499b2abd98d63d332ea4243a48d2a8b35c0

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

@@ -18,4 +18,18 @@ class BarModel extends AngularLinkModel
     @bar.attr('raw-size',@size(@$scope))
     @bar.attr('label',   @label(@$scope))
     @changeOptions(@options(@$scope))
+    @bar.on('mouseover', @_mouseOver.bind(@))
+      .on('mouseout',  @_mouseOut.bind(@))
+      .on('mousemove', @_mouseMove.bind(@))
+  _mouseOver: ->
+    d3.select("#tip-#{@parent.indexOf(@bar._groups[0][0])}#{parseFloat(@size(@$scope)).toFixed()}")
+      .classed('hidden', false)
+      .style('left',(d3.event.pageX + 10) + 'px')
+      .style('top', (d3.event.pageY + 10) + 'px')
+  _mouseMove: (d, i) ->
+    d3.select("#tip-#{@parent.indexOf(@bar._groups[0][0])}#{parseFloat(@size(@$scope)).toFixed()}")
+      .style('left',(d3.event.pageX + 10) + 'px')
+      .style('top', (d3.event.pageY + 10) + 'px')
+  _mouseOut: (d, i) ->
+    d3.select("#tip-#{@parent.indexOf(@bar._groups[0][0])}#{parseFloat(@size(@$scope)).toFixed()}").classed('hidden', true)
   @register(MaterialRaingular.d3.Directives.MrD3Bar)

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

@@ -28,7 +28,7 @@ class MaterialRaingular.d3.Directives.MrD3BarChartModel extends AngularDirective
     for bar in @bars().nodes()
       rect = d3.select(bar)
       @xDomain[@indexOf(bar)] = rect.attr('label')
-      height = (rect.attr('raw-size') / @maxValue()) * @width()
+      height = (rect.attr('raw-size') / @maxValue()) * @height()
       rect.attr('y',@height() - height)
       rect.attr('height',height)
     @xAxis.domain(@xDomain)

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

@@ -7,15 +7,16 @@ class MrD3BarChart extends AngularDirective
   replace: true
   template: "<svg height='100%' width='100%'><g ng-transclude></g></svg>"
 ###
+  NOTE:: Must use track by in ng-repeat to make function properly
   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}]"
-    mr-d3-bar.thingy ng-repeat="data in dataSet" mr-d3-label="data.l" mr-d3-value="data.v"
+    mr-d3-bar.thingy ng-repeat="data in dataSet track by $index" mr-d3-label="data.l" mr-d3-value="data.v"
     mr-d3-bar mr-d3-label="'this'" mr-d3-value="'200'"
     mr-d3-y-axis ng-init="domain = [37,0]" mr-d3-label="'Value'" mr-d3-domain='domain'
 
-    mr-d3-stacked-bar mr-d3-label="'CA'"
-      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
-    mr-d3-stacked-bar mr-d3-label="'AZ'"
-      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'CA'" mr-d3-stacked="true"
+      mr-d3-bar ng-repeat="data in [10,4,7] track by $index" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'AZ'" mr-d3-stacked="true"
+      mr-d3-bar ng-repeat="data in [10,4,7] track by $index" mr-d3-label="data" mr-d3-value="data"
     mr-d3-x-axis mr-d3-label="'Arbitrary'"
 ###

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

@@ -29,7 +29,7 @@ class MaterialRaingular.d3.Directives.MrD3HorizontalBarChartModel extends Angula
       rect = d3.select(bar)
       @yDomain[@indexOf(bar)] = rect.attr('label')
       width = (rect.attr('raw-size') / @maxValue()) * @width()
-      rect.attr('width',width)
+      rect.attr('width',width || 0)
     @yAxis.domain(angular.copy(@yDomain).reverse())
     for rect in @bars().nodes()
       d3.select(rect).attr('height',@yAxis.bandwidth())

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

@@ -7,15 +7,16 @@ class MrD3HorizontalBarChart extends AngularDirective
   replace: true
   template: "<svg height='100%' width='100%'><g ng-transclude></g></svg>"
 ###
+  NOTE:: Must use track by in ng-repeat to make function properly
   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}]"
-    mr-d3-bar.thingy ng-repeat="data in dataSet" mr-d3-label="data.l" mr-d3-value="data.v"
+    mr-d3-bar.thingy ng-repeat="data in dataSet track by $index" mr-d3-label="data.l" mr-d3-value="data.v"
     mr-d3-bar mr-d3-label="'this'" mr-d3-value="'200'"
     mr-d3-x-axis ng-init="domain = [0,37]" mr-d3-label="'Value'" mr-d3-domain='domain'
 
-    mr-d3-stacked-bar mr-d3-label="'CA'"
-      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
-    mr-d3-stacked-bar mr-d3-label="'AZ'"
-      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'CA'" mr-d3-stacked="true"
+      mr-d3-bar ng-repeat="data in [10,4,7] track by $index" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'AZ'" mr-d3-stacked="true"
+      mr-d3-bar ng-repeat="data in [10,4,7] track by $index" mr-d3-label="data" mr-d3-value="data"
     mr-d3-y-axis mr-d3-label="'Arbitrary'"
 ###

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

@@ -26,6 +26,8 @@ class MaterialRaingular.d3.Directives.PieChartModel extends AngularDirectiveMode
     return unless index >= 0
     @slices.splice(index,1)
     @values.splice(index,1)
+    for slice in @slices
+      slice.index = @slices.indexOf(slice)
     @drawChart()
   changeData: (slice,value) ->
     @slices.push(slice) unless @slices.includes(slice)

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

@@ -26,6 +26,7 @@ class PieSliceModel extends AngularLinkModel
     .on('mouseout',  @_mouseOut.bind(@))
     .on('mousemove', @_mouseMove.bind(@))
     .on('click',     @_click.bind(@))
+    @afterDraw()
   addText: ->
     @text = @slice.append('text')
     .style('text-anchor', 'middle')
@@ -39,6 +40,7 @@ class PieSliceModel extends AngularLinkModel
     x = centroid[0]
     y = centroid[1]
     @text.attr 'transform', "translate(#{x},#{y})"
+    .style('display','block')
     .text @labelFn(@$scope)
     bbox = @text.node().getBBox()
     topLeft =
@@ -57,7 +59,7 @@ class PieSliceModel extends AngularLinkModel
               _pointIsInArc(topRight, @$controller, @index) &&
               _pointIsInArc(bottomLeft, @$controller, @index) &&
               _pointIsInArc(bottomRight, @$controller, @index)
-    @text.attr('display', 'none') unless visible
+    @text.style('display', 'none') unless visible
   removeSlice: -> @$controller.removeSlice(@)
   afterDraw: ->
     @adjustText()

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

@@ -6,9 +6,11 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
     @parent ?= @$element.parent().controller('mrD3HorizontalBarChart')
     @bar     = d3.select(@$element[0])
     @label   = @$parse @$element.attr('mr-d3-label')
+    @stacked = @$parse @$element.attr('mr-d3-stacked')
     @texts   = []
     @$scope.$watch @label.bind(@), @adjustBars.bind(@)
     @$scope.$watch @size.bind(@),  @adjustBars.bind(@)
+    @$scope.$watch @stacked.bind(@),  @adjustBars.bind(@)
     @$scope.$on '$destroy', @removeText.bind(@)
     @adjustBars()
   bars: -> @bar.selectAll('rect')
@@ -16,6 +18,7 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
   rawSize: -> (@bars().nodes().map (rect) => d3.select(rect).attr('raw-size')).sum()
   removeText: ->
     text.remove() for text in @texts
+    @adjustBars()
   adjustBars: ->
     @bar.attr('raw-size',@rawSize() || 0)
     @bar.attr('label',   @label(@$scope))
@@ -30,6 +33,9 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
     fillRegex = /.*\(([0-9]+\, [0-9]+\, [0-9]+).*\)/
     @parent.holder.selectAll("text.bar.#{key}").remove()
     length = @bars().nodes().length
+    nonzero = 0
+    for rect,i in @bars().nodes()
+      nonzero += 1 if d3.select(rect).attr('raw-size') > 0
     for rect,i in @bars().nodes()
       bar = d3.select(rect)
       bar.attr('class',"#{i} bar")
@@ -48,29 +54,48 @@ class MaterialRaingular.d3.Directives.MrD3StackedBar extends AngularDirectiveMod
       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)
+        bar.attr('height',barHeight || 0)
+        if @stacked(@$scope)
+          usedSpace += barHeight || 0
+          bar.attr('x',x)
+          bar.attr('width',width || 0)
+          bar.attr('y',@parent.height() - usedSpace)
+        else
+          barWidth = width / nonzero
+          bar.attr('width', barWidth)
+          bar.attr('x', parseFloat(x) + usedSpace)
+          bar.attr('y', @parent.height() - barHeight)
+          usedSpace += barWidth if barHeight > 0
         text.attr('x', -parseFloat(bar.attr('y')) - parseFloat(bar.attr('height'))/2)
-        .attr('y',parseFloat(bar.attr('x')) + parseFloat(bar.attr('width')))
+        .attr('y',parseFloat(bar.attr('x')) + parseFloat(bar.attr('width'))/2 + 5)
         .attr('transform','rotate(-90)')
-        .style('pointer-events', 'none')
+        bbox = text.node().getBBox()
+        if (bbox.width > barHeight) || (bbox.height > width || barWidth)
+          text.style('display','none')
+        else
+          text.style('pointer-events', 'none').style('display', 'block')
       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 || 0)
-        usedSpace += barWidth
-        text.attr('x', parseFloat(bar.attr('width'))/2 + parseFloat(bar.attr('x')))
+        if @stacked(@$scope)
+          bar.attr('y',y)
+          bar.attr('height',height || 0)
+          bar.attr('x',usedSpace)
+          usedSpace += barWidth || 0
+        else
+          barHeight = height / nonzero
+          bar.attr('y',parseFloat(y) + usedSpace)
+          bar.attr('height',barHeight)
+          bar.attr('x',0)
+          usedSpace += barHeight if barWidth > 0
+        text.attr('x', parseFloat(bar.attr('width' || 0))/2 + parseFloat(bar.attr('x')))
         .attr('y',parseFloat(bar.attr('y')) + parseFloat(bar.attr('height'))/2 + 5)
-        if text.node().getBBox().width > barWidth
-          text.attr('display', 'none')
+        bbox = text.node().getBBox()
+        if bbox.width > barWidth || (bbox.height > height || barHeight)
+          text.style('display', 'none')
         else
-          text.style('pointer-events', 'none')
+          text.style('pointer-events', 'none').style('display', 'block')
   _mouseOver: (d,i,parentLabel) ->
     d3.select("#tip-table-" + parentLabel)
       .classed('hidden', false)

data/lib/material_raingular/d3/version.rb

@@ -1,5 +1,5 @@
 module MaterialRaingular
   module D3
-    VERSION = "0.2.1"
+    VERSION = "0.3.0"
   end
 end

metadata

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