plasticine 1.2.0 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e06229beab9aeca28afd22544eae0ba299a3b544aa1e2ef7dd647d829d05352e
-  data.tar.gz: ae6df7846d7a31f858d5e8d73d002056258e3e54ec0879cd393210d5048e4692
+  metadata.gz: 44e1f9baa53b72db44eee7a93478afdf5070dc05e79c8c817ec6ede7418a0ae5
+  data.tar.gz: ab33697ac7b1b6972c751dc046579542ecc9c251fed98498f625b5957db027bf
 SHA512:
-  metadata.gz: 4717e5615651acd9da8a1818cf0843bd6cf5f8152dbb5c97a96bf4c535d8ba614127e9d198121c13dc6951947540b28e86e3c41e1179e36e5370d4bf2e007a24
-  data.tar.gz: 2b8a9fe7bf6579310fe65a68ac3216b56b02031dacebf0116ea3296959324b87891079e6576849ba7f30f1ee26dc062ceeb67251f9299383e590a03b66be5d7e
+  metadata.gz: 92201535eae094856fa130484e538b021aa0394177075fb09fb5ad8f4be6f73cfc968920fbdc90caded7a6bd945e3b91eb84a67548b3621a92b4f949e1273189
+  data.tar.gz: cf0afdda173ffb49fb0c6f0ca5c0b14091351228c5e905da6250f5d45fcd9c7c446f1e940fb5fce8f861de2cb0c14cb58f1aa15b67b9b62fef491b74aa377208

data/app/assets/javascripts/plasticine/line.coffee

@@ -8,12 +8,14 @@ class @PlasticineLine
     @xScale = d3.scaleBand()
     @setXScaleRange()
 
-    @yScale = d3.scaleLinear().range([@holder.height(),0])
+    @yScale = d3.scaleLinear().range([@holder.height(),50])
 
     @setXAxis()
     @setYAxis()
 
+    @legend = d3.select("##{@holder.attr('id')}").append('ul').attr('class', 'legend')
     @svg = d3.select("##{@holder.attr('id')}").append('svg').style('width', @holderWidth()).style('height', @holder.height()).append('g')
+
     d3.json(@holder.data('url')).then (data) => @build(data)
 
 
@@ -24,15 +26,17 @@ class @PlasticineLine
     @chartLayout = data['chart_layout']
     @quarterStartMonth = Number(data.quarter_start_month)
 
+    @holder.attr('class', @holder.attr('class') + ' ' + data['chart_style'])
+
     maxY = if @chartLayout == 'area' then data['max_y_stack'] * 1.1 else data['max_y']
-    
+
     data['lines'].forEach (line) =>
       line.dots.forEach (d) =>
         d.x = PlasticineHelpers.parseValue(d.x, @xAxisFormat)
 
     @xScale.domain data['lines'][0].dots.map( (d) -> d.x )
     @yScale.domain [0, maxY]
-    
+
     @drawYAxis()
 
     if @chartLayout == 'area'
@@ -58,11 +62,11 @@ class @PlasticineLine
         .x( (d) => @xScale(d.x))
         .y( (d) => @yScale(d.y))
 
-    @lines = @svg.append('g').attr('class', "elements #{@chartLayout}").selectAll('.element').data(series)    
+    @lines = @svg.append('g').attr('class', "elements #{@chartLayout}").selectAll('.element').data(series)
     @refreshLines()
-   
-    @drawXAxis()
 
+    @drawXAxis()
+    @drawLegend(data)
     d3.select(window).on("resize." + @holder.attr("id"), () => @resizeX())
 
 
@@ -73,7 +77,12 @@ class @PlasticineLine
     element.append("path")
       .attr('class', 'line')
       .attr('d', (d) => if @chartLayout == 'area' then @chartPath(d) else @chartPath(d.dots))
-   
+
+
+  drawLegend: (data) ->
+    data['lines'].forEach (line) =>
+      @legend.append('li').html('<span></span>' + line.label)
+
 
   drawXAxis: () ->
     height = @holder.height()

data/app/assets/stylesheets/plasticine/line.scss

@@ -1,4 +1,10 @@
 div.plasticine-line{border:none;clear:both;height:500px;margin:0;padding:0;width:100%;
+  ul.legend{margin:25px 0 0 0;position:absolute;
+    li{color:#999;display:inline-block;font-size:1.4rem;margin:0 30px 0 0;line-height:1.4rem;vertical-align:middle;}
+    li span {background:#ccc;border-radius:100px;display:inline-block;height:14px;margin:-3px 5px 0 0;width:14px;vertical-align:middle;}
+  }
+
+
   svg{overflow:hidden;height:100%;width:100%;}
 
   path{fill:none;opacity:0;}
@@ -63,5 +69,23 @@ div.plasticine-line{border:none;clear:both;height:500px;margin:0;padding:0;width
     &:nth-child(14) path{fill:#3b1881;stroke:#3b1881;}
     &:nth-child(15) path{fill:#500384;stroke:#500384;}
   }
+
+  &.style-historical{
+    ul.legend li{
+      &:nth-last-child(-n+5) span{background:#1e1e1e;}
+      &:nth-last-child(-n+4) span{background:#3e3e3e;}
+      &:nth-last-child(-n+3) span{background:#5e5e5e;}
+      &:nth-last-child(-n+2) span{background:#7e7e7e;}
+      &:nth-last-child(-n+1) span{background:#00ccff;}
+    }
+    g.elements g.element{
+      path.line{stroke:#555;}
+      &:nth-last-child(-n+5) path.line{stroke:#1e1e1e;}
+      &:nth-last-child(-n+4) path.line{stroke:#3e3e3e;}
+      &:nth-last-child(-n+3) path.line{stroke:#5e5e5e;}
+      &:nth-last-child(-n+2) path.line{stroke:#7e7e7e;}
+      &:nth-last-child(-n+1) path.line{stroke:#00ccff;}
+    }
+  }
 }
 

data/lib/plasticine/builder/base.rb

@@ -2,7 +2,7 @@ class Plasticine::Builder::Base
   attr_accessor :visual
 
   def initialize(id, options={})
-    options.reverse_merge! from: nil, to: nil, step: nil
+    options.reverse_merge! from: nil, chart_style: 'standard', to: nil, step: nil
 
     @from = options[:from] ? Time.parse(options[:from]) : nil
     @to = options[:to] ? Time.parse(options[:to]) : Time.now
@@ -17,6 +17,10 @@ class Plasticine::Builder::Base
     # Hooks before closing a visual
   end
 
+  def chart_style=(style)
+    @visual[:chart_style] = "style-#{style}"
+  end
+
   def id
     @visual[:id]
   end

data/lib/plasticine/builder/line.rb

@@ -29,11 +29,10 @@ class Plasticine::Builder::Line < Plasticine::Builder::Base
     @visual[:quarter_start_month] = month
   end
 
-  def order=(direction) 
+  def order=(direction)
     @visual[:order] = direction # asc or desc
   end
 
-
   def add_line(id, label)
     @lines[id] = { label: label, dots: [], total_y: 0 } if not @lines[id]
   end
@@ -49,7 +48,7 @@ class Plasticine::Builder::Line < Plasticine::Builder::Base
     #@chart[:legend] = (@chart[:lines].length > 1) if @chart[:legend].nil?
     set_max_y
     @visual[:lines] = @lines.each_value.map { |d| d }
-    
+
     if @visual[:order]
       @visual[:lines] = @visual[:lines].sort_by{ |l| l[:total_y] }
       @visual[:lines].reverse! if @visual[:order] == 'asc'
@@ -69,7 +68,7 @@ class Plasticine::Builder::Line < Plasticine::Builder::Base
         max_y = dot[:y] if max_y < dot[:y]
       end
     end
-    
+
     @visual[:max_y_stack] = stacks.max_by{|k,v| v}[1] # Return the highest stacked value for a specific X
     @visual[:max_y] = max_y
   end

data/plasticine.gemspec

@@ -3,7 +3,7 @@ Gem::Specification.new do |gem|
   gem.description = "Data visualization toolkit for Rails App using D3.js"
   gem.summary     = "Data visualization toolkit for Rails App using D3.js"
   gem.homepage    = "https://github.com/alchimikweb/plasticine"
-  gem.version     = "1.2.0"
+  gem.version     = "1.2.1"
   gem.licenses    = ["MIT"]
 
   gem.authors     = ["Sebastien Rosa"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plasticine
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.2.1
 platform: ruby
 authors:
 - Sebastien Rosa
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-07 00:00:00.000000000 Z
+date: 2019-03-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails