plasticine 1.1.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9d62d2afccb060f20cb4523c1e081bf75910f743840dd8d26ac99e6588ed52e
-  data.tar.gz: 0335c9774a4a128d100a517ee5b110e7290299e713e6cea0d22ac24797dbc6e5
+  metadata.gz: e06229beab9aeca28afd22544eae0ba299a3b544aa1e2ef7dd647d829d05352e
+  data.tar.gz: ae6df7846d7a31f858d5e8d73d002056258e3e54ec0879cd393210d5048e4692
 SHA512:
-  metadata.gz: 31ee24c88036f9a6f0b4ffc0dfb4c3b1268235b027e04ca4936a445efff1649eb35f4bfb5e41ba248302424cfe95838e918fc7184a26a84b042f21e7590b92de
-  data.tar.gz: 6eb1a4dec359cad505ca6522a927904b84da027cf93ea3df7997b494642622d01c73f7973cb9f84c46e6e58b33f7dce1946e6dabb0b63668143ca706848e6992
+  metadata.gz: 4717e5615651acd9da8a1818cf0843bd6cf5f8152dbb5c97a96bf4c535d8ba614127e9d198121c13dc6951947540b28e86e3c41e1179e36e5370d4bf2e007a24
+  data.tar.gz: 2b8a9fe7bf6579310fe65a68ac3216b56b02031dacebf0116ea3296959324b87891079e6576849ba7f30f1ee26dc062ceeb67251f9299383e590a03b66be5d7e

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

@@ -6,6 +6,7 @@ class Plasticine
       $('div.plasticine').each (i, visual) =>
         switch $(visual).data('visual')
           when 'column' then @visuals.push new PlasticineColumn $(visual)
+          when 'line' then @visuals.push new PlasticineLine $(visual)
 
   d3IsLoaded: () -> if d3? then true else false
 

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

@@ -2,29 +2,24 @@ class @PlasticineColumn
   constructor: (@holder) ->
     @holder = $('.plasticine-column')
 
-    @setLocale()
+    PlasticineHelpers.setLocale()
     @drawTooltip()
 
-    width = @holderWidth()
-    height = @holder.height()
-
-    @xScale = d3.scale.ordinal()
+    @xScale = d3.scaleBand()
     @setXScaleRange()
 
-    @yScale = d3.scale.linear().range([height,0])
+    @yScale = d3.scaleLinear().range([@holder.height(),0])
 
     @setXAxis()
     @setYAxis()
 
-    @svg = d3.select("##{@holder.attr('id')}").append('svg').style('width', width).style('height', height).append('g')
-
-    d3.json @holder.data('url'), (data) => @build(data)
+    @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)
 
 
   build: (data) ->
     columnIds = data.columns[0].y_values.map (d,i) -> "col#{i+1}"
-
-    @colGroup = d3.scale.ordinal().range(columnIds).domain(columnIds)
+    colGroup = d3.scaleBand().range(columnIds).domain(columnIds)
 
     @xAxisFormat = data.axis_x_format
     @yAxisFormat = data.axis_y_format
@@ -33,9 +28,9 @@ class @PlasticineColumn
 
     data.columns.forEach (d) =>
       y0 = 0
-      d.yValues = @colGroup.domain().map (name,i) => { name: name, y0: y0, y1: y0 += @formatValue(d.y_values[i], @yAxisFormat) }
+      d.yValues = colGroup.domain().map (name,i) => { name: name, y0: y0, y1: y0 += PlasticineHelpers.parseValue(d.y_values[i], @yAxisFormat) }
       d.total = d.yValues[d.yValues.length - 1].y1
-      d.x = @formatValue(d.x_value, @xAxisFormat)
+      d.x = PlasticineHelpers.parseValue(d.x_value, @xAxisFormat)
 
     @xScale.domain data.columns.map( (d) -> d.x )
     @yScale.domain [0, d3.max(data.columns, (d) => d.total * @holder.data('y-spacing-ratio'))]
@@ -68,67 +63,38 @@ class @PlasticineColumn
     @refreshYAxis()
 
 
-  formatValue: (value, format) ->
-    switch format
-      when 'date' then new Date(value)
-      else value
+  hideTooltip: () -> @holder.find('.tooltip').hide()
 
   holderWidth: () -> @holder.width()
 
-  refreshXAxis: () ->
-    @setXAxis()
-    @svg.select('.x.axis').call @xAxis
-
-
-  refreshYAxis: () ->
-    @setYAxis()
-    @svg.select('.y.axis').call @yAxis
-
-
-  setXAxis: () ->
-    @xAxis = d3.svg.axis().scale(@xScale).orient('bottom')
-    @xAxis.tickSize -@holder.height()
-
-    switch @xAxisFormat
-      when 'date' then @xAxis.tickFormat(d3.time.format('%b'))
-      when 'quarter' then @xAxis.tickFormat (d) => @toQuarter(d)
-      when 'year' then @xAxis.tickFormat (d) => @toYear(d)
-      when 'money' then @xAxis.tickFormat (d) => @toPrice(d)
-
-
-  setYAxis: () ->
-    @yAxis = d3.svg.axis().scale(@yScale).orient("left");
-    @yAxis.tickSize -@holderWidth()
-    @yAxis.ticks @yAxisTickCount
-
-    switch @yAxisFormat
-      when 'date' then @yAxis.tickFormat(d3.time.format('%b'))
-      when 'money' then @yAxis.tickFormat (d) => @toPrice(d)
-
-  hideTooltip: () -> @holder.find('.tooltip').hide()
-
   refreshColumns: () ->
     self = this
 
     $('g.column').remove()
 
-    @columns.enter().append('g')
-      .attr('class', 'column')
+    @columns.enter().append("g").attr('class', 'column')
       .attr('data-x-val', (d) -> d.x_value)
-      .attr('transform', (d) => 'translate(' + @xScale(d.x) + ',0)')
       .attr('x', (d) => @xScale(d.x))
+      .attr('transform', (d) => 'translate(' + @xScale(d.x) + ',0)')
       .on("mouseover", (d) -> self.showTooltip(@, d))
       .on("mouseout", (d) -> self.hideTooltip(@))
-    @columns.exit().remove()
 
-    @columns.selectAll('rect')
-      .data((d) -> d.yValues)
-      .enter()
-      .append('rect')
-      .attr('width', @xScale.rangeBand())
-      .attr('y', (d) => @yScale d.y1)
-      .attr('height', (d) => @yScale(d.y0) - @yScale(d.y1))
-      .attr('class', (d) => @colGroup d.name)
+      .selectAll("rect").data((d) => d.yValues).enter()
+        .append("rect")
+        .attr('class', (d,i) => "col#{i+1}")
+        .attr("width", @xScale.bandwidth())
+        .attr("y", (d) => @yScale d.y1)
+        .attr("height", (d) => @yScale(d.y0) - @yScale(d.y1))
+
+
+  refreshXAxis: () ->
+    @setXAxis()
+    @svg.select('.x.axis').call @xAxis
+
+
+  refreshYAxis: () ->
+    @setYAxis()
+    @svg.select('.y.axis').call @yAxis
 
 
   resizeX: () ->
@@ -142,24 +108,15 @@ class @PlasticineColumn
     @refreshColumns()
 
 
-  setLocale: () ->
-    french = d3.locale(
-      "decimal": ",",
-      "thousands": " ",
-      "grouping": [3],
-      "currency": ["$", ""],
-      "dateTime": "%a %b %e %X %Y",
-      "date": "%d-%m-%Y",
-      "time": "%H:%M:%S",
-      "periods": ["AM", "PM"],
-      "days": ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
-      "shortDays": ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
-      "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
-      "shortMonths": ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"]
-    )
+  setXAxis: () ->
+    @xAxis = d3.axisBottom(@xScale)
+    @xAxis.tickSize -@holder.height()
 
-    d3.time.format = french.timeFormat
-    d3.format = french.numberFormat
+    switch @xAxisFormat
+      when 'date' then @xAxis.tickFormat(d3.timeFormat('%b'))
+      when 'quarter' then @xAxis.tickFormat (d) => PlasticineHelpers.toQuarter(d, @quarterStartMonth)
+      when 'year' then @xAxis.tickFormat (d) => PlasticineHelpers.toYear(d, @quarterStartMonth)
+      when 'money' then @xAxis.tickFormat (d) => PlasticineHelpers.toPrice(d)
 
 
   setXScaleRange: () ->
@@ -167,8 +124,18 @@ class @PlasticineColumn
     columnsLeftPadding = @holder.data('columns-left-padding')
     columnsRightPadding = @holder.data('columns-right-padding')
     width = @holderWidth()
+    
+    @xScale = @xScale.rangeRound([columnsLeftPadding, width - columnsRightPadding]).padding(columnsMargin);
+
+
+  setYAxis: () ->
+    @yAxis = d3.axisLeft(@yScale)
+    @yAxis.tickSize -@holderWidth()
+    @yAxis.ticks @yAxisTickCount
 
-    @xScale = @xScale.rangeRoundBands([columnsLeftPadding, width - columnsRightPadding], columnsMargin, 0)
+    switch @yAxisFormat
+      when 'date' then @yAxis.tickFormat(d3.timeFormat('%b'))
+      when 'money' then @yAxis.tickFormat (d) => PlasticineHelpers.toPrice(d)
 
 
   showTooltip: (bar, data) ->
@@ -190,54 +157,3 @@ class @PlasticineColumn
       .style("left", tooltipX + "px")
       .style("top", (yPosition - tooltip.outerHeight()) + "px")
 
-
-  toPrice: (amount) ->
-    if amount is 0
-      price = "0"
-    else
-      price = String(amount)[0..-3]
-      price = "0" if price is ""
-
-      price = switch price.length
-        when 4 then [price.slice(0, 1), ' ', price.slice(1)].join('')
-        when 5 then [price.slice(0, 2), ' ', price.slice(2)].join('')
-        when 6 then [price.slice(0, 3), ' ', price.slice(3)].join('')
-        when 7 then [price.slice(0, 4), ' ', price.slice(4)].join('')
-        else price
-
-      # Show decimals
-      #price += ',' + String(amount).slice(-2)
-
-    price += '$'
-
-
-  toQuarter: (strDate) ->
-    date = new Date(strDate + 'T12:00:00')
-
-    month = date.getMonth() + 1
-    monthEquiv = (month + (13 - @quarterStartMonth)) % 12
-
-    value = switch
-      when monthEquiv <= 3 then 'Q1'
-      when monthEquiv <= 6 then 'Q2'
-      when monthEquiv <= 9 then 'Q3'
-      else 'Q4'
-
-    year = Number(date.getFullYear())
-
-    if (value is "Q1" and @quarterStartMonth >= 10) or ((value is "Q1" or value is "Q2") and @quarterStartMonth >= 7 and @quarterStartMonth < 10)
-      year += 1
-
-    value += " #{year}"
-    value
-
-
-  toYear: (strDate) ->
-    date = new Date(strDate + 'T12:00:00')
-
-    year = Number(date.getFullYear())
-
-    if @quarterStartMonth >= 7 and (date.getMonth() + 1) >= 7
-      year += 1
-
-    year

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

@@ -0,0 +1,77 @@
+@PlasticineHelpers = {}
+
+
+PlasticineHelpers.parseValue = (value, format) ->
+  switch format
+    when 'date' then new Date(value)
+    else value
+
+PlasticineHelpers.setLocale = () ->
+  d3.timeFormatDefaultLocale(
+    "decimal": ",",
+    "thousands": " ",
+    "grouping": [3],
+    "currency": ["$", ""],
+    "dateTime": "%a %b %e %X %Y",
+    "date": "%d-%m-%Y",
+    "time": "%H:%M:%S",
+    "periods": ["AM", "PM"],
+    "days": ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
+    "shortDays": ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
+    "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
+    "shortMonths": ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"]
+  )
+
+
+PlasticineHelpers.toPrice = (amount) ->
+  if amount is 0
+    price = "0"
+  else
+    price = String(amount)[0..-3]
+    price = "0" if price is ""
+
+    price = switch price.length
+      when 4 then [price.slice(0, 1), ' ', price.slice(1)].join('')
+      when 5 then [price.slice(0, 2), ' ', price.slice(2)].join('')
+      when 6 then [price.slice(0, 3), ' ', price.slice(3)].join('')
+      when 7 then [price.slice(0, 1), ' ', price.slice(1, 4), ' ', price.slice(4)].join('')
+      when 8 then [price.slice(0, 2), ' ', price.slice(2, 5), ' ', price.slice(4)].join('')
+      else price
+
+    # Show decimals
+    #price += ',' + String(amount).slice(-2)
+
+  price += ' $'
+
+
+PlasticineHelpers.toQuarter = (strDate, quarterStartMonth) ->
+  date = new Date(strDate + 'T12:00:00')
+  month = date.getMonth() + 1
+  monthEquiv = (month + (13 - quarterStartMonth)) % 12
+
+  value = switch
+    when monthEquiv <= 3 then 'Q1'
+    when monthEquiv <= 6 then 'Q2'
+    when monthEquiv <= 9 then 'Q3'
+    else 'Q4'
+
+  year = Number(date.getFullYear())
+
+  if (value is "Q1" and quarterStartMonth >= 10) or ((value is "Q1" or value is "Q2") and quarterStartMonth >= 7 and quarterStartMonth < 10)
+    year += 1
+
+  value += " #{year}"
+  value
+
+
+PlasticineHelpers.toYear = (strDate, quarterStartMonth) ->
+  date = new Date(strDate + 'T12:00:00')
+
+  year = Number(date.getFullYear())
+
+  if quarterStartMonth >= 7 and (date.getMonth() + 1) >= 7
+    year += 1
+
+  year
+
+

data/app/assets/javascripts/plasticine/index.js

@@ -1,3 +1,5 @@
 //= require d3
 //= require ./base
+//= require ./helpers
 //= require ./column
+//= require ./line

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

@@ -0,0 +1,143 @@
+class @PlasticineLine
+  constructor: (@holder) ->
+    @holder = $('.plasticine-line')
+
+    PlasticineHelpers.setLocale()
+    #@drawTooltip()
+
+    @xScale = d3.scaleBand()
+    @setXScaleRange()
+
+    @yScale = d3.scaleLinear().range([@holder.height(),0])
+
+    @setXAxis()
+    @setYAxis()
+
+    @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)
+
+
+  build: (data) ->
+    @xAxisFormat = data['axis_x_format']
+    @yAxisFormat = data['axis_y_format']
+    @yAxisTickCount = data['axis_y_tick_count']
+    @chartLayout = data['chart_layout']
+    @quarterStartMonth = Number(data.quarter_start_month)
+
+    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'
+      stackedDataset = []
+      stackedKeys = []
+
+      data['lines'].forEach (line,i) =>
+        line.dots.forEach (d,j) =>
+          stackedDataset.push { x: d.x } if i == 0
+          stackedKeys.push "y#{i+1}" if j == 0
+          stackedDataset[j]["y#{i+1}"] = d.y
+
+      stack = d3.stack().keys(stackedKeys)
+      series = stack(stackedDataset);
+
+      @chartPath = d3.area().curve(d3.curveCardinal)
+        .x( (d,i) => @xScale(stackedDataset[i].x) )
+        .y0( (d) => @yScale(d[0]) )
+        .y1( (d) => @yScale(d[1]) )
+    else
+      series = data['lines']
+      @chartPath = d3.line().curve(d3.curveCardinal)
+        .x( (d) => @xScale(d.x))
+        .y( (d) => @yScale(d.y))
+
+    @lines = @svg.append('g').attr('class', "elements #{@chartLayout}").selectAll('.element').data(series)    
+    @refreshLines()
+   
+    @drawXAxis()
+
+    d3.select(window).on("resize." + @holder.attr("id"), () => @resizeX())
+
+
+  refreshLines: () ->
+    $('g.element').remove()
+
+    element = @lines.enter().append('g').attr('class', "element")
+    element.append("path")
+      .attr('class', 'line')
+      .attr('d', (d) => if @chartLayout == 'area' then @chartPath(d) else @chartPath(d.dots))
+   
+
+  drawXAxis: () ->
+    height = @holder.height()
+    @svg.append('g').attr('class', 'x axis')
+      .attr('transform', 'translate(0,' + height + ')')
+      .call @xAxis
+
+    @refreshXAxis()
+
+
+  drawYAxis: () ->
+    group = @svg.append("g").attr("class", "y axis").call @yAxis
+    group.selectAll("g").filter((d) -> d).classed("minor", true)
+
+    @refreshYAxis()
+
+
+  holderWidth: () -> @holder.width()
+
+  refreshXAxis: () ->
+    @setXAxis()
+    @svg.select('.x.axis').call @xAxis
+
+
+  refreshYAxis: () ->
+    @setYAxis()
+    @svg.select('.y.axis').call @yAxis
+
+
+  resizeX: () ->
+    d3.select(@svg.node().parentNode).style('width', @holderWidth() + 'px')
+
+    @setXScaleRange()
+
+    @refreshXAxis()
+    @refreshYAxis()
+    @refreshLines()
+
+
+  setXAxis: () ->
+    @xAxis = d3.axisBottom(@xScale)
+    @xAxis.tickSize -@holder.height()
+
+    switch @xAxisFormat
+      when 'date' then @xAxis.tickFormat(d3.timeFormat('%b'))
+      when 'quarter' then @xAxis.tickFormat (d) => PlasticineHelpers.toQuarter(d, @quarterStartMonth)
+      when 'year' then @xAxis.tickFormat (d) => PlasticineHelpers.toYear(d, @quarterStartMonth)
+      when 'money' then @xAxis.tickFormat (d) => PlasticineHelpers.toPrice(d)
+
+
+  setXScaleRange: () ->
+    linesMargin = @holder.data('lines-margin')
+    linesLeftPadding = @holder.data('lines-left-padding')
+    linesRightPadding = @holder.data('lines-right-padding')
+    width = @holderWidth()
+
+    @xScale = @xScale.rangeRound([linesLeftPadding, width - linesRightPadding]).padding(linesMargin);
+
+
+  setYAxis: () ->
+    @yAxis = d3.axisLeft(@yScale)
+    @yAxis.tickSize -@holderWidth()
+    @yAxis.ticks @yAxisTickCount
+
+    switch @yAxisFormat
+      when 'date' then @yAxis.tickFormat(d3.timeFormat('%b'))
+      when 'money' then @yAxis.tickFormat (d) => PlasticineHelpers.toPrice(d)

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

@@ -1,5 +1,5 @@
 div.plasticine-column{border:none;clear:both;height:500px;margin:0;padding:0;width:100%;
-  svg{overflow:visible;height:100%;width:100%;}
+  svg{overflow:hidden;height:100%;width:100%;}
 
   path{fill:none;opacity:0;}
 

data/app/assets/stylesheets/plasticine/index.css

@@ -1,4 +1,5 @@
 /*
 *= require ./base
 *= require ./column
+*= require ./line
 */

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

@@ -0,0 +1,67 @@
+div.plasticine-line{border:none;clear:both;height:500px;margin:0;padding:0;width:100%;
+  svg{overflow:hidden;height:100%;width:100%;}
+
+  path{fill:none;opacity:0;}
+
+  g.axis{shape-rendering:crispEdges;
+    g.tick {
+      line{stroke:#efefef;}
+      .minor line {stroke:#efefef;}
+      text{text-transform:uppercase;fill:#999;font-size:1.4rem;font-weight:500;}
+    }
+
+    &.x g.tick{
+      line{opacity:0;}
+      text{
+        transform: translate(0px,10px);
+        -ms-transform: translate(0px,10px);
+        -webkit-transform: translate(0px,10px);
+        -moz-transform: translate(0px,10px);
+      }
+    }
+
+    &.y g.tick{
+      text{text-align:right;}
+    }
+  }
+
+  g.elements.line g.element{
+    path{opacity:1;stroke-width:2px;}
+
+    &:nth-child(1) path{stroke:#00ccff;}
+    &:nth-child(2) path{stroke:#0099ff;}
+    &:nth-child(3) path{stroke:#6633cc;}
+    &:nth-child(4) path{stroke:#9900ff;}
+    &:nth-child(5) path{stroke:#ff00cc;}
+    &:nth-child(6) path{stroke:#ff0000;}
+    &:nth-child(7) path{stroke:#ff6600;}
+    &:nth-child(8) path{stroke:#ffcc00;}
+    &:nth-child(9) path{stroke:#7fe533;}
+    &:nth-child(10) path{stroke:#00ffcc;}
+    &:nth-child(11) path{stroke:#02b490;}
+    &:nth-child(12) path{stroke:#047794;}
+    &:nth-child(13) path{stroke:#04568d;}
+    &:nth-child(14) path{stroke:#3b1881;}
+    &:nth-child(15) path{stroke:#500384;}
+  }
+
+  g.elements.area g.element{
+    path{opacity:1;}
+    &:nth-child(1) path{fill:#00ccff;stroke:#00ccff;}
+    &:nth-child(2) path{fill:#0099ff;stroke:#0099ff;}
+    &:nth-child(3) path{fill:#6633cc;stroke:#6633cc;}
+    &:nth-child(4) path{fill:#9900ff;stroke:#9900ff;}
+    &:nth-child(5) path{fill:#ff00cc;stroke:#ff00cc;}
+    &:nth-child(6) path{fill:#ff0000;stroke:#ff0000;}
+    &:nth-child(7) path{fill:#ff6600;stroke:#ff6600;}
+    &:nth-child(8) path{fill:#ffcc00;stroke:#ffcc00;}
+    &:nth-child(9) path{fill:#7fe533;stroke:#7fe533;}
+    &:nth-child(10) path{fill:#00ffcc;stroke:#00ffcc;}
+    &:nth-child(11) path{fill:#02b490;stroke:#02b490;}
+    &:nth-child(12) path{fill:#047794;stroke:#047794;}
+    &:nth-child(13) path{fill:#04568d;stroke:#04568d;}
+    &:nth-child(14) path{fill:#3b1881;stroke:#3b1881;}
+    &:nth-child(15) path{fill:#500384;stroke:#500384;}
+  }
+}
+

data/lib/plasticine/builder/line.rb

@@ -0,0 +1,77 @@
+class Plasticine::Builder::Line < Plasticine::Builder::Base
+  attr_reader :lines
+
+  def initialize(id, options={})
+    super
+
+    @visual.merge! lines: [], nature: 'line', axis_x_format: :string, axis_y_format: :number, axis_y_tick_count: 10, chart_layout: 'line', order: nil, quarter_start_month: 1
+    @lines = {}
+  end
+
+
+  def axis_x_format=(format)
+    @visual[:axis_x_format] = format
+  end
+
+  def axis_y_format=(format)
+    @visual[:axis_y_format] = format
+  end
+
+  def axis_y_tick_count=(tick_count)
+    @visual[:axis_y_tick_count] = tick_count
+  end
+
+  def chart_layout=(clayout)
+    @visual[:chart_layout] = clayout
+  end
+
+  def quarter_start_month=(month)
+    @visual[:quarter_start_month] = month
+  end
+
+  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
+
+  def add_dot(line_id, x, y)
+    @lines[line_id][:dots] << { x: x, y: y }
+    @lines[line_id][:total_y] += y
+  end
+
+  def close_visual
+    super
+
+    #@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'
+    end
+
+  end
+
+  def set_max_y
+    stacks = {}
+    max_y = 0
+
+    @lines.each_value do |line|
+      line[:dots].each do |dot|
+        key = dot[:x].to_s
+        stacks[key] = 0 if not stacks[key]
+        stacks[key] += dot[:y]
+        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
+
+end

data/lib/plasticine/builder.rb

@@ -41,3 +41,4 @@ end
 
 require 'plasticine/builder/base'
 require 'plasticine/builder/column'
+require 'plasticine/builder/line'