sleek_charts 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +46 -0
- data/Rakefile +1 -0
- data/app/assets/javascripts/bar-tip.js +125 -0
- data/app/assets/javascripts/base.js +6 -0
- data/app/assets/javascripts/d3/d3.tip.js +276 -0
- data/app/assets/javascripts/d3/d3.v3.js +9300 -0
- data/app/assets/javascripts/donut-tip.js +161 -0
- data/app/assets/javascripts/sleek_charts.js +9 -0
- data/app/assets/stylesheets/sleek_charts.css +86 -0
- data/lib/sleek_charts/version.rb +3 -0
- data/lib/sleek_charts.rb +6 -0
- data/sleek_charts.gemspec +23 -0
- metadata +87 -0
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
// options: it is a map, which accepts below values
|
|
2
|
+
//
|
|
3
|
+
// selector: selector to which donut chart will be added, default is 'body'
|
|
4
|
+
// e.g. 'div#donut-chart'
|
|
5
|
+
// data: data in JSON object, which contains label and value to create bar chart
|
|
6
|
+
// e.g. [{'label': 'weather-day', 'value': 35.1}, {'label': 'weather-night', 'value': 30.2}]
|
|
7
|
+
// width: width of svg element
|
|
8
|
+
// height: height of svg element
|
|
9
|
+
// margin: margin of svg element and accepts in a map
|
|
10
|
+
// {top: 10, right: 20, bottom: 20, left:10}
|
|
11
|
+
// innerRadius: innerRadius for inner edge of donut
|
|
12
|
+
// outerRadius: outerRadius for outer edge of donut
|
|
13
|
+
// color: color platter, default is d3.scale.category20c()
|
|
14
|
+
// xDomain: x-axis domain, default is 'label'
|
|
15
|
+
// yDomain: y-axis domain, default is 'value'
|
|
16
|
+
// tipLabel: tipText which you want to display in tip, default is ''
|
|
17
|
+
// tipValue: tipValue, for each bar, default is 'value'
|
|
18
|
+
// tipText: tipText which you want to display with 'label' and 'value', default is ''
|
|
19
|
+
// totalLabel: totalLabel to add a label for sum e.g. ' Views'
|
|
20
|
+
|
|
21
|
+
function mergeConfigOptions(defaults,options){
|
|
22
|
+
var mergedConfig = {};
|
|
23
|
+
for (var attrname in defaults) { mergedConfig[attrname] = defaults[attrname]; }
|
|
24
|
+
for (var attrname in options) { mergedConfig[attrname] = options[attrname]; }
|
|
25
|
+
return mergedConfig;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function donutTip(options){
|
|
29
|
+
var defaults = {
|
|
30
|
+
selector: 'body',
|
|
31
|
+
data: [{'label': 'weather-morning', 'value': 29.1}, {'label': 'weather-afternoon', 'value': 33.2},
|
|
32
|
+
{'label': 'weather-evening', 'value': 32.1}, {'label': 'weather-night', 'value': 30.2}],
|
|
33
|
+
width: 500,
|
|
34
|
+
height: 500,
|
|
35
|
+
margin: {top: 10, right: 20, bottom: 20, left:10},
|
|
36
|
+
innerRadius: 90,
|
|
37
|
+
outerRadius: 180,
|
|
38
|
+
color: d3.scale.category20c(),
|
|
39
|
+
xDomain: 'label',
|
|
40
|
+
yDomain: 'value',
|
|
41
|
+
tipLabel: '',
|
|
42
|
+
tipValue: 'value',
|
|
43
|
+
tipText: '',
|
|
44
|
+
totalLabel: ''
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
var config = (options) ? mergeConfigOptions(defaults,options) : defaults;
|
|
48
|
+
|
|
49
|
+
var width = config.width - config.margin.left - config.margin.right,
|
|
50
|
+
height = config.height - config.margin.top - config.margin.bottom,
|
|
51
|
+
total = d3.sum(config.data, function (d) {
|
|
52
|
+
return d3.sum(d3.values(d));
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
var div = d3.select("body").append("div")
|
|
56
|
+
.attr("class", "tooltip")
|
|
57
|
+
.style("opacity", 0);
|
|
58
|
+
|
|
59
|
+
var vis = d3.select(config.selector)
|
|
60
|
+
.append("svg:svg") //create the SVG element inside the <body>
|
|
61
|
+
.data([config.data]) //associate our data with the document
|
|
62
|
+
.attr("width", width + config.margin.left + config.margin.right)
|
|
63
|
+
.attr("height", height + config.margin.top + config.margin.bottom)
|
|
64
|
+
.append("svg:g") //make a group to hold our pie chart
|
|
65
|
+
.attr("transform", "translate(" + config.outerRadius * 1.5 + "," + config.outerRadius * 1.5 + ")");
|
|
66
|
+
|
|
67
|
+
var textTop = vis.append("text")
|
|
68
|
+
.attr("dy", ".35em")
|
|
69
|
+
.style("text-anchor", "middle")
|
|
70
|
+
.attr("class", "textTop")
|
|
71
|
+
.text("TOTAL")
|
|
72
|
+
.attr("y", -10),
|
|
73
|
+
textBottom = vis.append("text")
|
|
74
|
+
.attr("dy", ".35em")
|
|
75
|
+
.style("text-anchor", "middle")
|
|
76
|
+
.attr("class", "textBottom")
|
|
77
|
+
.text(total + " Views")
|
|
78
|
+
.attr("y", 10);
|
|
79
|
+
|
|
80
|
+
var arc = d3.svg.arc()
|
|
81
|
+
.innerRadius(config.innerRadius)
|
|
82
|
+
.outerRadius(config.outerRadius);
|
|
83
|
+
var arcOver = d3.svg.arc()
|
|
84
|
+
.innerRadius(config.innerRadius + 5)
|
|
85
|
+
.outerRadius(config.outerRadius + 5);
|
|
86
|
+
|
|
87
|
+
var pie = d3.layout.pie() //this will create arc data for us given a list of values
|
|
88
|
+
.value(function (d) {
|
|
89
|
+
return d[config.yDomain];
|
|
90
|
+
}); //we must tell it out to access the value of each element in our data array
|
|
91
|
+
|
|
92
|
+
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
|
|
93
|
+
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
|
|
94
|
+
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
|
|
95
|
+
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
|
|
96
|
+
.attr("class", "slice") //allow us to style things in the slices (like text)
|
|
97
|
+
.on('mousemove', function (d, i) {
|
|
98
|
+
label = d[config.tipLabel] == undefined ? "" : " " + d[config.tipLabel];
|
|
99
|
+
d3.select(this).select("path").transition()
|
|
100
|
+
.duration(200)
|
|
101
|
+
.attr("d", arcOver);
|
|
102
|
+
|
|
103
|
+
textTop.text(d3.select(this).datum().data[config.xDomain])
|
|
104
|
+
.attr("y", -10);
|
|
105
|
+
textBottom.text(d3.select(this).datum().data[config.yDomain] + " " +config.totalLabel)
|
|
106
|
+
.attr("y", 10);
|
|
107
|
+
|
|
108
|
+
div.transition()
|
|
109
|
+
.duration(200)
|
|
110
|
+
.style("opacity", 0.9);
|
|
111
|
+
div.html("<strong>" + config.tipText + label+ "</strong> <span style='color:red'>" + d.data[config.tipValue] + "</span>")
|
|
112
|
+
.style("left", (d3.event.pageX - 57) + "px")
|
|
113
|
+
.style("top", (d3.event.pageY - 50) + "px")
|
|
114
|
+
.style("z-index", 10000)
|
|
115
|
+
})
|
|
116
|
+
.on("mouseout", function (d) {
|
|
117
|
+
d3.select(this).select("path").transition()
|
|
118
|
+
.duration(100)
|
|
119
|
+
.attr("d", arc);
|
|
120
|
+
|
|
121
|
+
textTop.text("TOTAL")
|
|
122
|
+
.attr("y", -10);
|
|
123
|
+
textBottom.text(total + " " + config.totalLabel);
|
|
124
|
+
|
|
125
|
+
div.transition()
|
|
126
|
+
.duration(500)
|
|
127
|
+
.style("opacity", 0);
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
arcs.append("svg:path")
|
|
131
|
+
.attr("fill", function (d, i) {
|
|
132
|
+
return config.color(i);
|
|
133
|
+
}) //set the color for each slice to be chosen from the color function defined above
|
|
134
|
+
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
|
|
135
|
+
|
|
136
|
+
var legend = d3.select(config.selector).append("svg")
|
|
137
|
+
.attr("class", "legend")
|
|
138
|
+
.attr("width", config.outerRadius)
|
|
139
|
+
.attr("height", config.outerRadius * 2)
|
|
140
|
+
.selectAll("g")
|
|
141
|
+
.data(data)
|
|
142
|
+
.enter().append("g")
|
|
143
|
+
.attr("transform", function (d, i) {
|
|
144
|
+
return "translate(0," + i * 20 + ")";
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
legend.append("rect")
|
|
148
|
+
.attr("width", 18)
|
|
149
|
+
.attr("height", 18)
|
|
150
|
+
.style("fill", function (d, i) {
|
|
151
|
+
return config.color(i);
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
legend.append("text")
|
|
155
|
+
.attr("x", 24)
|
|
156
|
+
.attr("y", 9)
|
|
157
|
+
.attr("dy", ".35em")
|
|
158
|
+
.text(function (d) {
|
|
159
|
+
return d[config.xDomain];
|
|
160
|
+
});
|
|
161
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
|
2
|
+
// listed below.
|
|
3
|
+
// This requires awesome library d3 (from mbostock-Mike Bostock under BSD License) and
|
|
4
|
+
// d3-tip(from Caged-Justin Palmer under MIT License)
|
|
5
|
+
//= require d3/d3.v3
|
|
6
|
+
//= require d3/d3.tip
|
|
7
|
+
//= require base
|
|
8
|
+
//= require bar-tip
|
|
9
|
+
//= require donut-tip
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Style for tool tip are inherited from awesome library d3 tip's examples
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
.axis path,
|
|
6
|
+
.axis line {
|
|
7
|
+
fill: none;
|
|
8
|
+
stroke: #000;
|
|
9
|
+
shape-rendering: crispEdges;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.bar {
|
|
13
|
+
fill: orange;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.bar:hover {
|
|
17
|
+
fill: orangered ;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.line {
|
|
21
|
+
fill: white;
|
|
22
|
+
border-color: orange;
|
|
23
|
+
}
|
|
24
|
+
.line:hover {
|
|
25
|
+
border-color: orangered;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.x.axis path {
|
|
29
|
+
/*display: none;*/
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.d3-tip {
|
|
33
|
+
line-height: 1;
|
|
34
|
+
font-weight: bold;
|
|
35
|
+
padding: 12px;
|
|
36
|
+
background: rgba(0, 0, 0, 0.8);
|
|
37
|
+
color: #fff;
|
|
38
|
+
border-radius: 2px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Creates a small triangle extender for the tooltip */
|
|
42
|
+
.d3-tip:after {
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
display: inline;
|
|
45
|
+
font-size: 10px;
|
|
46
|
+
width: 100%;
|
|
47
|
+
line-height: 1;
|
|
48
|
+
color: rgba(0, 0, 0, 0.8);
|
|
49
|
+
content: "\25BC";
|
|
50
|
+
position: absolute;
|
|
51
|
+
text-align: center;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Style northward tooltips differently */
|
|
55
|
+
.d3-tip.n:after {
|
|
56
|
+
margin: -1px 0 0 0;
|
|
57
|
+
top: 100%;
|
|
58
|
+
left: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Begin hand crafted tooltip taken from d3-tip */
|
|
62
|
+
div.tooltip {
|
|
63
|
+
position: absolute;
|
|
64
|
+
text-align: center;
|
|
65
|
+
line-height: 1;
|
|
66
|
+
font-weight: bold;
|
|
67
|
+
padding: 12px;
|
|
68
|
+
background: rgba(0, 0, 0, 0.8);
|
|
69
|
+
color: #fff;
|
|
70
|
+
border-radius: 2px;
|
|
71
|
+
pointer-events: none;
|
|
72
|
+
}
|
|
73
|
+
div.tooltip:after {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
display: inline;
|
|
76
|
+
font-size: 10px;
|
|
77
|
+
width: 100%;
|
|
78
|
+
line-height: 1;
|
|
79
|
+
color: rgba(0, 0, 0, 0.8);
|
|
80
|
+
content: "\25BC";
|
|
81
|
+
position: absolute;
|
|
82
|
+
text-align: center;
|
|
83
|
+
top: 100%;
|
|
84
|
+
left: 0%;
|
|
85
|
+
}
|
|
86
|
+
/* End hand crafted tooltip */
|
data/lib/sleek_charts.rb
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# coding: utf-8
|
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
4
|
+
require 'sleek_charts/version'
|
|
5
|
+
|
|
6
|
+
Gem::Specification.new do |spec|
|
|
7
|
+
spec.name = "sleek_charts"
|
|
8
|
+
spec.version = SleekCharts::VERSION
|
|
9
|
+
spec.authors = ["Gourav Tiwari"]
|
|
10
|
+
spec.email = ["gouravtiwari21@gmail.com"]
|
|
11
|
+
spec.homepage = "https://github.com/gouravtiwari/sleek_charts"
|
|
12
|
+
spec.summary = "Basic charts based on d3 & d3-tip with consistent tooltips"
|
|
13
|
+
spec.description = "Basic charts based on d3 & d3-tip with consistent tooltips for all charts"
|
|
14
|
+
spec.license = "MIT"
|
|
15
|
+
|
|
16
|
+
spec.files = `git ls-files`.split($/)
|
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
|
19
|
+
spec.require_paths = ["lib"]
|
|
20
|
+
|
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.3"
|
|
22
|
+
spec.add_development_dependency "rake"
|
|
23
|
+
end
|
metadata
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: sleek_charts
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.0.1
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Gourav Tiwari
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2013-12-07 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: bundler
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - ~>
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '1.3'
|
|
20
|
+
type: :development
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - ~>
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '1.3'
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: rake
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - '>='
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '0'
|
|
34
|
+
type: :development
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - '>='
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '0'
|
|
41
|
+
description: Basic charts based on d3 & d3-tip with consistent tooltips for all charts
|
|
42
|
+
email:
|
|
43
|
+
- gouravtiwari21@gmail.com
|
|
44
|
+
executables: []
|
|
45
|
+
extensions: []
|
|
46
|
+
extra_rdoc_files: []
|
|
47
|
+
files:
|
|
48
|
+
- .gitignore
|
|
49
|
+
- Gemfile
|
|
50
|
+
- LICENSE.txt
|
|
51
|
+
- README.md
|
|
52
|
+
- Rakefile
|
|
53
|
+
- app/assets/javascripts/bar-tip.js
|
|
54
|
+
- app/assets/javascripts/base.js
|
|
55
|
+
- app/assets/javascripts/d3/d3.tip.js
|
|
56
|
+
- app/assets/javascripts/d3/d3.v3.js
|
|
57
|
+
- app/assets/javascripts/donut-tip.js
|
|
58
|
+
- app/assets/javascripts/sleek_charts.js
|
|
59
|
+
- app/assets/stylesheets/sleek_charts.css
|
|
60
|
+
- lib/sleek_charts.rb
|
|
61
|
+
- lib/sleek_charts/version.rb
|
|
62
|
+
- sleek_charts.gemspec
|
|
63
|
+
homepage: https://github.com/gouravtiwari/sleek_charts
|
|
64
|
+
licenses:
|
|
65
|
+
- MIT
|
|
66
|
+
metadata: {}
|
|
67
|
+
post_install_message:
|
|
68
|
+
rdoc_options: []
|
|
69
|
+
require_paths:
|
|
70
|
+
- lib
|
|
71
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
72
|
+
requirements:
|
|
73
|
+
- - '>='
|
|
74
|
+
- !ruby/object:Gem::Version
|
|
75
|
+
version: '0'
|
|
76
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
77
|
+
requirements:
|
|
78
|
+
- - '>='
|
|
79
|
+
- !ruby/object:Gem::Version
|
|
80
|
+
version: '0'
|
|
81
|
+
requirements: []
|
|
82
|
+
rubyforge_project:
|
|
83
|
+
rubygems_version: 2.0.6
|
|
84
|
+
signing_key:
|
|
85
|
+
specification_version: 4
|
|
86
|
+
summary: Basic charts based on d3 & d3-tip with consistent tooltips
|
|
87
|
+
test_files: []
|