plasticine 1.2.0 → 1.2.1
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 44e1f9baa53b72db44eee7a93478afdf5070dc05e79c8c817ec6ede7418a0ae5
|
4
|
+
data.tar.gz: ab33697ac7b1b6972c751dc046579542ecc9c251fed98498f625b5957db027bf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 92201535eae094856fa130484e538b021aa0394177075fb09fb5ad8f4be6f73cfc968920fbdc90caded7a6bd945e3b91eb84a67548b3621a92b4f949e1273189
|
7
|
+
data.tar.gz: cf0afdda173ffb49fb0c6f0ca5c0b14091351228c5e905da6250f5d45fcd9c7c446f1e940fb5fce8f861de2cb0c14cb58f1aa15b67b9b62fef491b74aa377208
|
@@ -8,12 +8,14 @@ class @PlasticineLine
|
|
8
8
|
@xScale = d3.scaleBand()
|
9
9
|
@setXScaleRange()
|
10
10
|
|
11
|
-
@yScale = d3.scaleLinear().range([@holder.height(),
|
11
|
+
@yScale = d3.scaleLinear().range([@holder.height(),50])
|
12
12
|
|
13
13
|
@setXAxis()
|
14
14
|
@setYAxis()
|
15
15
|
|
16
|
+
@legend = d3.select("##{@holder.attr('id')}").append('ul').attr('class', 'legend')
|
16
17
|
@svg = d3.select("##{@holder.attr('id')}").append('svg').style('width', @holderWidth()).style('height', @holder.height()).append('g')
|
18
|
+
|
17
19
|
d3.json(@holder.data('url')).then (data) => @build(data)
|
18
20
|
|
19
21
|
|
@@ -24,15 +26,17 @@ class @PlasticineLine
|
|
24
26
|
@chartLayout = data['chart_layout']
|
25
27
|
@quarterStartMonth = Number(data.quarter_start_month)
|
26
28
|
|
29
|
+
@holder.attr('class', @holder.attr('class') + ' ' + data['chart_style'])
|
30
|
+
|
27
31
|
maxY = if @chartLayout == 'area' then data['max_y_stack'] * 1.1 else data['max_y']
|
28
|
-
|
32
|
+
|
29
33
|
data['lines'].forEach (line) =>
|
30
34
|
line.dots.forEach (d) =>
|
31
35
|
d.x = PlasticineHelpers.parseValue(d.x, @xAxisFormat)
|
32
36
|
|
33
37
|
@xScale.domain data['lines'][0].dots.map( (d) -> d.x )
|
34
38
|
@yScale.domain [0, maxY]
|
35
|
-
|
39
|
+
|
36
40
|
@drawYAxis()
|
37
41
|
|
38
42
|
if @chartLayout == 'area'
|
@@ -58,11 +62,11 @@ class @PlasticineLine
|
|
58
62
|
.x( (d) => @xScale(d.x))
|
59
63
|
.y( (d) => @yScale(d.y))
|
60
64
|
|
61
|
-
@lines = @svg.append('g').attr('class', "elements #{@chartLayout}").selectAll('.element').data(series)
|
65
|
+
@lines = @svg.append('g').attr('class', "elements #{@chartLayout}").selectAll('.element').data(series)
|
62
66
|
@refreshLines()
|
63
|
-
|
64
|
-
@drawXAxis()
|
65
67
|
|
68
|
+
@drawXAxis()
|
69
|
+
@drawLegend(data)
|
66
70
|
d3.select(window).on("resize." + @holder.attr("id"), () => @resizeX())
|
67
71
|
|
68
72
|
|
@@ -73,7 +77,12 @@ class @PlasticineLine
|
|
73
77
|
element.append("path")
|
74
78
|
.attr('class', 'line')
|
75
79
|
.attr('d', (d) => if @chartLayout == 'area' then @chartPath(d) else @chartPath(d.dots))
|
76
|
-
|
80
|
+
|
81
|
+
|
82
|
+
drawLegend: (data) ->
|
83
|
+
data['lines'].forEach (line) =>
|
84
|
+
@legend.append('li').html('<span></span>' + line.label)
|
85
|
+
|
77
86
|
|
78
87
|
drawXAxis: () ->
|
79
88
|
height = @holder.height()
|
@@ -1,4 +1,10 @@
|
|
1
1
|
div.plasticine-line{border:none;clear:both;height:500px;margin:0;padding:0;width:100%;
|
2
|
+
ul.legend{margin:25px 0 0 0;position:absolute;
|
3
|
+
li{color:#999;display:inline-block;font-size:1.4rem;margin:0 30px 0 0;line-height:1.4rem;vertical-align:middle;}
|
4
|
+
li span {background:#ccc;border-radius:100px;display:inline-block;height:14px;margin:-3px 5px 0 0;width:14px;vertical-align:middle;}
|
5
|
+
}
|
6
|
+
|
7
|
+
|
2
8
|
svg{overflow:hidden;height:100%;width:100%;}
|
3
9
|
|
4
10
|
path{fill:none;opacity:0;}
|
@@ -63,5 +69,23 @@ div.plasticine-line{border:none;clear:both;height:500px;margin:0;padding:0;width
|
|
63
69
|
&:nth-child(14) path{fill:#3b1881;stroke:#3b1881;}
|
64
70
|
&:nth-child(15) path{fill:#500384;stroke:#500384;}
|
65
71
|
}
|
72
|
+
|
73
|
+
&.style-historical{
|
74
|
+
ul.legend li{
|
75
|
+
&:nth-last-child(-n+5) span{background:#1e1e1e;}
|
76
|
+
&:nth-last-child(-n+4) span{background:#3e3e3e;}
|
77
|
+
&:nth-last-child(-n+3) span{background:#5e5e5e;}
|
78
|
+
&:nth-last-child(-n+2) span{background:#7e7e7e;}
|
79
|
+
&:nth-last-child(-n+1) span{background:#00ccff;}
|
80
|
+
}
|
81
|
+
g.elements g.element{
|
82
|
+
path.line{stroke:#555;}
|
83
|
+
&:nth-last-child(-n+5) path.line{stroke:#1e1e1e;}
|
84
|
+
&:nth-last-child(-n+4) path.line{stroke:#3e3e3e;}
|
85
|
+
&:nth-last-child(-n+3) path.line{stroke:#5e5e5e;}
|
86
|
+
&:nth-last-child(-n+2) path.line{stroke:#7e7e7e;}
|
87
|
+
&:nth-last-child(-n+1) path.line{stroke:#00ccff;}
|
88
|
+
}
|
89
|
+
}
|
66
90
|
}
|
67
91
|
|
@@ -2,7 +2,7 @@ class Plasticine::Builder::Base
|
|
2
2
|
attr_accessor :visual
|
3
3
|
|
4
4
|
def initialize(id, options={})
|
5
|
-
options.reverse_merge! from: nil, to: nil, step: nil
|
5
|
+
options.reverse_merge! from: nil, chart_style: 'standard', to: nil, step: nil
|
6
6
|
|
7
7
|
@from = options[:from] ? Time.parse(options[:from]) : nil
|
8
8
|
@to = options[:to] ? Time.parse(options[:to]) : Time.now
|
@@ -17,6 +17,10 @@ class Plasticine::Builder::Base
|
|
17
17
|
# Hooks before closing a visual
|
18
18
|
end
|
19
19
|
|
20
|
+
def chart_style=(style)
|
21
|
+
@visual[:chart_style] = "style-#{style}"
|
22
|
+
end
|
23
|
+
|
20
24
|
def id
|
21
25
|
@visual[:id]
|
22
26
|
end
|
@@ -29,11 +29,10 @@ class Plasticine::Builder::Line < Plasticine::Builder::Base
|
|
29
29
|
@visual[:quarter_start_month] = month
|
30
30
|
end
|
31
31
|
|
32
|
-
def order=(direction)
|
32
|
+
def order=(direction)
|
33
33
|
@visual[:order] = direction # asc or desc
|
34
34
|
end
|
35
35
|
|
36
|
-
|
37
36
|
def add_line(id, label)
|
38
37
|
@lines[id] = { label: label, dots: [], total_y: 0 } if not @lines[id]
|
39
38
|
end
|
@@ -49,7 +48,7 @@ class Plasticine::Builder::Line < Plasticine::Builder::Base
|
|
49
48
|
#@chart[:legend] = (@chart[:lines].length > 1) if @chart[:legend].nil?
|
50
49
|
set_max_y
|
51
50
|
@visual[:lines] = @lines.each_value.map { |d| d }
|
52
|
-
|
51
|
+
|
53
52
|
if @visual[:order]
|
54
53
|
@visual[:lines] = @visual[:lines].sort_by{ |l| l[:total_y] }
|
55
54
|
@visual[:lines].reverse! if @visual[:order] == 'asc'
|
@@ -69,7 +68,7 @@ class Plasticine::Builder::Line < Plasticine::Builder::Base
|
|
69
68
|
max_y = dot[:y] if max_y < dot[:y]
|
70
69
|
end
|
71
70
|
end
|
72
|
-
|
71
|
+
|
73
72
|
@visual[:max_y_stack] = stacks.max_by{|k,v| v}[1] # Return the highest stacked value for a specific X
|
74
73
|
@visual[:max_y] = max_y
|
75
74
|
end
|
data/plasticine.gemspec
CHANGED
@@ -3,7 +3,7 @@ Gem::Specification.new do |gem|
|
|
3
3
|
gem.description = "Data visualization toolkit for Rails App using D3.js"
|
4
4
|
gem.summary = "Data visualization toolkit for Rails App using D3.js"
|
5
5
|
gem.homepage = "https://github.com/alchimikweb/plasticine"
|
6
|
-
gem.version = "1.2.
|
6
|
+
gem.version = "1.2.1"
|
7
7
|
gem.licenses = ["MIT"]
|
8
8
|
|
9
9
|
gem.authors = ["Sebastien Rosa"]
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: plasticine
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.2.
|
4
|
+
version: 1.2.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sebastien Rosa
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-
|
11
|
+
date: 2019-03-05 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|