sleek_charts 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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 */
@@ -0,0 +1,3 @@
1
+ module SleekCharts
2
+ VERSION = "0.0.1"
3
+ end
@@ -0,0 +1,6 @@
1
+ require "sleek_charts/version"
2
+
3
+ module SleekCharts
4
+ class Engine < Rails::Engine
5
+ end
6
+ end
@@ -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: []