d3_charts 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 986ef08364eb025e3a50c7b33df2f68c813b6f8f
-  data.tar.gz: c8f4ab0880928e253c2d0ee5595b952c76d3a406
+  metadata.gz: 05a1d163bde06ce806fc422a0568a6a2c0774151
+  data.tar.gz: 8c38cb21e11baf1e63dd40902c720fc1d93b47e2
 SHA512:
-  metadata.gz: a21b4a77fed16e6ad4a9aa05c8a8ee24f431d47d8db7045e731b464543c2759b43019c1ef8ae8a4aecfab09e8940030efcbe6d094ccddfd5c59d166637284487
-  data.tar.gz: 990b44cd4b1129764e0b9d6c1bd1bb250b76b683c77d842a608e1947720c0af02399dda410f21bc7d6034873adf9b56797acdae5d5466197f7526741a80b20ba
+  metadata.gz: 0de7aa28fd88ec23dde235a08424398837d36b996c92e8e1b964f2a16746197b75422df5ef858fcdd6cd2e527c68ac85d1db96caaae5430117197b8269e88f9c
+  data.tar.gz: 83e66931f3b43daeab83cc59905534f1d6e1003d27baee0719f84888f895f88813ed9a3de85d4cea2f51efdea559c5aa60ff67835ffa94393506d4fc9e3acaef

data/README.md

@@ -30,7 +30,7 @@ To add some basic colouring of pie charts, add the the following in `application
 
 ### Pie charts
 
-    = pie_chart(data, options)
+    = chart_tag(:pie, data, options)
 
 Available `options` are:
 
@@ -39,26 +39,26 @@ Available `options` are:
 
 Which are passed in like so:
 
-    = pie_chart(data, { width: 123, height: 123 })
+    = chart_tag(:pie, data, { width: 123, height: 123 })
 
 ### Area charts
 
-    = area_chart(data, options)
+    = chart_tag(:area, data, options)
 
 Available `options` are:
 
 * `width`, defaults to 1000
 * `height`, defaults to 1000
-* `margin`, defaults to 25
-* `format`, the strftime format of the dates, defaults to `%d/%m/%y`
+* `date_format`, the strftime format of datums as rendered in the chart, defaults to `%Y-%m-%d`
+* `data_date_format`, the strftime format of datums as specified in the data, defaults to `%Y-%m-%d`
 
 Which are passed in like so:
 
-    = area_chart(data, { width: 123, height: 123, margin: 25 })
+    = chart_tag(:area, data, { width: 123, height: 123 })
 
 ## TODO:
 
-* Add more charts:
+* More charts:
   * Line Chart
   * Histogram Chart
   * Vertical Bar Chart

data/lib/assets/javascripts/charts/area_chart.js.coffee

@@ -10,9 +10,9 @@
     debug: false
     width: 1000
     height: 1000
-    margin: 40
-    ticks: 'days'
-    format: "%d/%m/%y"
+    ticks: 'months'
+    data_date_format: "%Y-%m-%d"
+    date_format: "%Y-%m-%d"
 
   # ---------------------------------------------------------------------
 
@@ -33,43 +33,37 @@
 
     # ---------------------------------------------------------------------
 
-    get_data: -> @$element.data 'chart-data'
-    get_width: -> @$element.data('width') || @options.width
+    get_data: -> @$element.data 'chart-data' || []
+    get_data_date_format: -> @$element.data('data-date-format') || @options.data_date_format
+    get_date_format: -> @$element.data('date-format') || @options.date_format
     get_height: -> @$element.data('height') || @options.height
-    get_margin: -> @$element.data('margin') || @options.margin
-    get_format: -> @$element.data('format') || @options.format
     get_ticks: ->
-      format = @$element.data('format') || @options.format
-      if /%d|%e/.test(format)
-        d3.time.days
-      else if /%m|%B|%b|%h/.test(format)
-        d3.time.months
-        alert format
-      else if /%y|%Y/.test(format)
-        d3.time.years
+      switch @$element.data('ticks') || @options.ticks
+        when 'days' then d3.time.days
+        when 'months' then d3.time.months
+        when 'years' then d3.time.years
+    get_width: -> @$element.data('width') || @options.width
 
     # ---------------------------------------------------------------------
 
     render: ->
       data = @get_data()
 
-      console.log data
-
-      width = @get_width() - @get_margin()*2
-      height = @get_height() - @get_margin()*2
-      parseDate = d3.time.format(@get_format()).parse
+      width = @get_width()
+      height = @get_height()
+      parseDate = d3.time.format(@get_data_date_format()).parse
 
       x = d3.time.scale().range([0, width])
       y = d3.scale.linear().range([height, 0])
 
-      xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(@get_ticks(), 1).tickSize(0).tickPadding(5).tickFormat(d3.time.format(@get_format()))
+      xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(@get_ticks(), 1).tickSize(0).tickPadding(5).tickFormat(d3.time.format(@get_date_format()))
       yAxis = d3.svg.axis().scale(y).orient("left").ticks(2).tickSize(0).tickPadding(5)
 
       area = d3.svg.area().interpolate("basis").x((d) -> x d.label).y0(height).y1((d) -> y d.value)
-      svg = d3.select(@$element[0]).append("svg").attr("width", @get_width()).attr("height", @get_height()).attr("viewBox", "0 0 #{@get_height()} #{@get_width()}").attr("xmlns", "http://www.w3.org/2000/svg").append("g").attr("transform", "translate(#{@get_margin()},#{@get_margin()})")
+      svg = d3.select(@$element[0]).append("svg").attr("width", @get_width()).attr("height", @get_height()).attr("viewBox", "0 0 #{@get_height()} #{@get_width()}").attr("xmlns", "http://www.w3.org/2000/svg").append("g")
 
       data.forEach (d) ->
-        d.label = parseDate(d.label)
+        d.label = parseDate(d.date)
         d.value = +d.value
 
       x.domain d3.extent(data, (d) -> d.label)
@@ -94,10 +88,4 @@
 
 # =====================================================================
 
-$ ->
-
-  $('.chart.container.area').chart_area()
-
-  # make sure the plugin is correctly rebound to new elements
-  $('body').on 'dom_update', (e) ->
-    $('.chart.container.area').chart_area()
+$ -> $('.chart.container.area').chart_area()

data/lib/assets/javascripts/charts/pie_chart.js.coffee

@@ -59,10 +59,4 @@
 
 # =====================================================================
 
-$ ->
-
-  $('.chart.container.pie').chart_pie()
-
-  # make sure the plugin is correctly rebound to new elements
-  $('body').on 'dom_update', (e) ->
-    $('.chart.container.pie').chart_pie()
+$ -> $('.chart.container.pie').chart_pie()

data/lib/assets/stylesheets/d3_charts.css.scss

@@ -10,6 +10,6 @@ $colors: (aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black
 
 .chart.container.area {
   svg {
-    // padding: 25px;
+    overflow: visible;
   }
 }

data/lib/d3_charts.rb

@@ -1,8 +1,8 @@
 require "d3_charts/chart"
 require "d3_charts/chart/pie"
 require "d3_charts/chart/area"
-require "d3_charts/railtie" if defined?(Rails)
+require "d3_charts/railtie" if defined?(Rails::Railtie)
 require "d3_charts/engine"
 require "d3_charts/version"
 
-require "rails-assets-d3"
+require "rails-assets-d3"

data/lib/d3_charts/chart.rb

@@ -17,14 +17,14 @@ module D3Charts
     def dom_data
       res = {}
       res[:chart_data] = @chart_data.to_json
-      res[:width] = @options[:width] if @options[:width]
-      res[:height] = @options[:height] if @options[:height]
+      res[:width] = @options[:width]
+      res[:height] = @options[:height]
       res
     end
 
     def tag
-      content_tag(:div, nil, { class: dom_class, data: dom_data })
+      content_tag(:div, nil, { class: dom_class, data: dom_data.delete_if{ |k, v| v.blank? } })
     end
 
   end
-end
+end

data/lib/d3_charts/chart/area.rb

@@ -8,11 +8,11 @@ module D3Charts
 
       def dom_data
         res = {}
-        res[:margin] = @options[:margin] if @options[:margin]
-        res[:format] = @options[:format] if @options[:format]
+        res[:date_format] = @options[:date_format]
+        res[:data_date_format] = @options[:data_date_format]
         super.merge(res)
       end
 
     end
   end
-end
+end

data/lib/d3_charts/version.rb

@@ -1,5 +1,5 @@
 module D3
   module Charts
-    VERSION = "0.0.1"
+    VERSION = "0.1.0"
   end
 end

data/lib/d3_charts/view_helpers.rb

@@ -11,19 +11,14 @@ module D3Charts
       end
     end
 
-    # ---------------------------------------------------------------------
+    # =====================================================================
 
-    def pie_chart chart_data, options={}
-      Chart::Pie.new(chart_data, options).tag.html_safe
-    end
-
-    # ---------------------------------------------------------------------
-
-    def area_chart chart_data, options={}
-      Chart::Area.new(chart_data, options).tag.html_safe
+    def chart_tag chart_type, chart_data, options={}
+      case chart_type
+      when :pie then Chart::Pie.new(chart_data, options).tag.html_safe
+      when :area then Chart::Area.new(chart_data, options).tag.html_safe
+      end
     end
 
-    # ---------------------------------------------------------------------
-
   end
-end
+end

data/test/d3_charts/view_helpers_test.rb

@@ -10,16 +10,16 @@ module D3Charts
 
     # =====================================================================
 
-    describe '#pie_chart' do
+    describe '#chart_tag' do
       let(:data) { [{ value: 125, label: 'foo' }, { value: 325, label: 'bar' }] }
 
       it 'wraps the chart in a div' do
-        pie_chart(data).must_match Regexp.new("<div.*?></div>")
+        chart_tag(:pie, data).must_match Regexp.new("<div.*?></div>")
       end
 
       it 'returns the correct data' do
         skip
-        pie_chart(data).must_include "data-chart-data=\"#{data}\">"
+        chart_tag(:pie, data).must_include "data-chart-data=\"#{data}\">"
       end
     end
 
@@ -29,16 +29,16 @@ module D3Charts
       let(:data) { [{ date: '2014-08-02', value: 100 }, { date: '2014-09-02', value: 200 }] }
 
       it 'wraps the chart in a div' do
-        area_chart(data).must_match Regexp.new("<div.*?></div>")
+        chart_tag(:area, data).must_match Regexp.new("<div.*?></div>")
       end
 
       it 'returns the correct data' do
         skip
-        area_chart(data).must_include "data-chart-data=\"#{data}\">"
+        chart_tag(:area, data).must_include "data-chart-data=\"#{data}\">"
       end
     end
 
     # ---------------------------------------------------------------------
 
   end
-end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: d3_charts
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Tomas Celizna
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-02 00:00:00.000000000 Z
+date: 2015-09-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -157,7 +157,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: Rails helpers for building SVG charts using the d3 library.