sleek_charts 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +2 -0
- data/README.md +12 -0
- data/app/assets/javascripts/bar-tip.js +13 -16
- data/example/bar-tip.png +0 -0
- data/example/donut-tip.png +0 -0
- data/lib/sleek_charts/version.rb +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 96591a675128e0833a659ab5075c1b28a46ac46d
|
4
|
+
data.tar.gz: 90e1a4e61d6b4b5ad68821d227024a23e7d4acbf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 66e7bfb99aa289408b6a2cc4f1140c4bfacb89da0c1ba12c02e4a6c1638e6cadd981134af83eb51bce5dc2bcad857b571d6908316e938fdec02cd3752a2fc9d1
|
7
|
+
data.tar.gz: b06309042fb88b55c8bbddfc656ae96fd54deeed1d2b87c9c76128d21f0582c5a6ab2dc665132abebd97a6ec12458927316d499db07281fd8109c4035f6057b6
|
data/CHANGELOG.md
ADDED
data/README.md
CHANGED
@@ -4,6 +4,8 @@ Provides Bar and Donut charts with consitent tooltip for Rails applications.
|
|
4
4
|
|
5
5
|
## Supports Rails 3.1+
|
6
6
|
|
7
|
+
![Bar tip](https://github.com/gouravtiwari/sleek_charts/raw/master/example/bar-tip.png)![Donut tip](https://github.com/gouravtiwari/sleek_charts/raw/master/example/donut-tip.png)
|
8
|
+
|
7
9
|
## Installation
|
8
10
|
|
9
11
|
Add this line to your application's Gemfile:
|
@@ -19,9 +21,11 @@ Or install it yourself as:
|
|
19
21
|
$ gem install sleek_charts
|
20
22
|
|
21
23
|
Once done, add below to application's assets/javascripts/application.js file
|
24
|
+
|
22
25
|
//= require sleek_charts
|
23
26
|
|
24
27
|
Also, add below to application's assets/stylesheets/application.css file
|
28
|
+
|
25
29
|
*= require sleek_charts
|
26
30
|
|
27
31
|
## Usage
|
@@ -30,12 +34,20 @@ Simply add bar chart to any element, e.g.
|
|
30
34
|
|
31
35
|
barTip(options);
|
32
36
|
//where options is a map, checkout bar-tip.js
|
37
|
+
//or with defaults:
|
38
|
+
barTip({});
|
39
|
+
|
33
40
|
|
34
41
|
or add donut chart to any element, e.g.
|
35
42
|
|
36
43
|
donutTip(options);
|
37
44
|
//where options is a map, checkout donut-tip.js
|
45
|
+
//or with defaults:
|
46
|
+
donutTip({});
|
47
|
+
|
48
|
+
### Example
|
38
49
|
|
50
|
+
* [Audit Rails example](www.audit-rails.info/audit_rails/audits/analytics)
|
39
51
|
|
40
52
|
## Contributing
|
41
53
|
|
@@ -6,8 +6,8 @@
|
|
6
6
|
// e.g. [{'label': 'weather-day', 'value': 35.1}, {'label': 'weather-night', 'value': 30.2}]
|
7
7
|
// width: width of svg element
|
8
8
|
// height: height of svg element
|
9
|
-
// margin: margin of svg element and accepts in a map
|
10
|
-
// {top:
|
9
|
+
// margin: margin of svg element and accepts in a map, e.g.
|
10
|
+
// {top: 40, right: 20, bottom: 120, left: 40}
|
11
11
|
// flexRight: set it to false, when you are ok to display wider column, when there are <5-6 columns, default is true
|
12
12
|
// labelAngle: default is 0
|
13
13
|
// xDomain: x-axis domain, default is 'label'
|
@@ -31,12 +31,12 @@ function barTip(options){
|
|
31
31
|
{'label': 'weather-evening', 'value': 32.1}, {'label': 'weather-night', 'value': 30.2}],
|
32
32
|
width: 600,
|
33
33
|
height: 400,
|
34
|
-
margin: {top:
|
34
|
+
margin: {top: 40, right: 20, bottom: 120, left: 40},
|
35
35
|
flexRight: true,
|
36
|
-
labelAngle: -
|
36
|
+
labelAngle: -60,
|
37
37
|
xDomain: 'label',
|
38
38
|
yDomain: 'value',
|
39
|
-
yAxisText: '',
|
39
|
+
yAxisText: 'Temperature',
|
40
40
|
tipLabel: '',
|
41
41
|
tipValue: 'value',
|
42
42
|
tipText: ''
|
@@ -44,16 +44,13 @@ function barTip(options){
|
|
44
44
|
|
45
45
|
var config = (options) ? mergeConfigOptions(defaults,options) : defaults;
|
46
46
|
|
47
|
-
var data = config.data;
|
48
|
-
|
49
47
|
// Just to make sure the chart doesn't look clutter, when there are < 5-6 columns
|
50
48
|
if(config.flexRight){
|
51
|
-
config.margin['right'] = d3.max([20, (config.width - data.length * 50)]);
|
49
|
+
config.margin['right'] = d3.max([20, (config.width - config.data.length * 50)]);
|
52
50
|
}
|
53
51
|
|
54
|
-
var
|
55
|
-
|
56
|
-
height = config.height - margin.top - margin.bottom;
|
52
|
+
var width = config.width - config.margin.left - config.margin.right,
|
53
|
+
height = config.height - config.margin.top - config.margin.bottom;
|
57
54
|
|
58
55
|
var x = d3.scale.ordinal()
|
59
56
|
.rangeRoundBands([0, width], .1);
|
@@ -73,7 +70,7 @@ function barTip(options){
|
|
73
70
|
.attr("width", config.width)
|
74
71
|
.attr("height", config.height)
|
75
72
|
.append("g")
|
76
|
-
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
73
|
+
.attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
|
77
74
|
|
78
75
|
var tip = d3.tip()
|
79
76
|
.attr('class', 'd3-tip')
|
@@ -83,11 +80,11 @@ function barTip(options){
|
|
83
80
|
|
84
81
|
return "<strong>" + config.tipText + label + "</strong> <span style='color:red'>" + d[config.tipValue] + "</span>";
|
85
82
|
});
|
86
|
-
|
83
|
+
|
87
84
|
svg.call(tip);
|
88
85
|
|
89
|
-
x.domain(data.map(function(d) { return d[config.xDomain]; }));
|
90
|
-
y.domain([0, d3.max(data, function(d) { return d[config.yDomain]; })]);
|
86
|
+
x.domain(config.data.map(function(d) { return d[config.xDomain]; }));
|
87
|
+
y.domain([0, d3.max(config.data, function(d) { return d[config.yDomain]; })]);
|
91
88
|
|
92
89
|
svg.append("g")
|
93
90
|
.attr("class", "x axis")
|
@@ -113,7 +110,7 @@ function barTip(options){
|
|
113
110
|
.text(config.yAxisText);
|
114
111
|
|
115
112
|
svg.selectAll(".bar")
|
116
|
-
.data(data)
|
113
|
+
.data(config.data)
|
117
114
|
.enter().append("rect")
|
118
115
|
.attr("class", "bar")
|
119
116
|
.attr("x", function(d) { return x(d[config.xDomain]); })
|
data/example/bar-tip.png
ADDED
Binary file
|
Binary file
|
data/lib/sleek_charts/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sleek_charts
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Gourav Tiwari
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-12-
|
11
|
+
date: 2013-12-08 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -46,6 +46,7 @@ extensions: []
|
|
46
46
|
extra_rdoc_files: []
|
47
47
|
files:
|
48
48
|
- .gitignore
|
49
|
+
- CHANGELOG.md
|
49
50
|
- Gemfile
|
50
51
|
- LICENSE.txt
|
51
52
|
- README.md
|
@@ -57,6 +58,8 @@ files:
|
|
57
58
|
- app/assets/javascripts/donut-tip.js
|
58
59
|
- app/assets/javascripts/sleek_charts.js
|
59
60
|
- app/assets/stylesheets/sleek_charts.css
|
61
|
+
- example/bar-tip.png
|
62
|
+
- example/donut-tip.png
|
60
63
|
- lib/sleek_charts.rb
|
61
64
|
- lib/sleek_charts/version.rb
|
62
65
|
- sleek_charts.gemspec
|