simple_chartjs 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +13 -0
- data/.rspec +2 -0
- data/.travis.yml +5 -0
- data/CODE_OF_CONDUCT.md +74 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +182 -0
- data/Rakefile +6 -0
- data/app/assets/javascripts/simple_chartjs.js +132 -0
- data/bin/console +14 -0
- data/bin/rspec +17 -0
- data/bin/setup +8 -0
- data/lib/chartjs.rb +7 -0
- data/lib/chartjs/chart_helper.rb +113 -0
- data/lib/chartjs/engine.rb +9 -0
- data/lib/chartjs/sinatra.rb +7 -0
- data/lib/chartjs/version.rb +3 -0
- data/lib/class_extensions/squish.rb +14 -0
- data/lib/simple_chartjs.rb +2 -0
- data/simple_chartjs.gemspec +29 -0
- data/vendor/assets/javascript/Chart.bundle.js +18494 -0
- metadata +121 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 5b2ca58c8360dc9ed5be0ff6eb0952563466c4ea
|
4
|
+
data.tar.gz: 184192015efb8920505ab2966b2e7b3b9fc24a0e
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 4d1be10f22bfa45f4f7650d1b8d74dec5d0aed8d17e54faf22a86b0f17bda70f4a544c3ce6845c1c99819f797e513887598c559db0aaa1868a6ead396d53c969
|
7
|
+
data.tar.gz: b693ee1646f48b5e88c2a0270609131871482a836781aaa153b7acedc07a36bad350ba69d28b8047802a866f805b6d71dd9ce3b0170987231bdcf0c05b59d995
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.travis.yml
ADDED
data/CODE_OF_CONDUCT.md
ADDED
@@ -0,0 +1,74 @@
|
|
1
|
+
# Contributor Covenant Code of Conduct
|
2
|
+
|
3
|
+
## Our Pledge
|
4
|
+
|
5
|
+
In the interest of fostering an open and welcoming environment, we as
|
6
|
+
contributors and maintainers pledge to making participation in our project and
|
7
|
+
our community a harassment-free experience for everyone, regardless of age, body
|
8
|
+
size, disability, ethnicity, gender identity and expression, level of experience,
|
9
|
+
nationality, personal appearance, race, religion, or sexual identity and
|
10
|
+
orientation.
|
11
|
+
|
12
|
+
## Our Standards
|
13
|
+
|
14
|
+
Examples of behavior that contributes to creating a positive environment
|
15
|
+
include:
|
16
|
+
|
17
|
+
* Using welcoming and inclusive language
|
18
|
+
* Being respectful of differing viewpoints and experiences
|
19
|
+
* Gracefully accepting constructive criticism
|
20
|
+
* Focusing on what is best for the community
|
21
|
+
* Showing empathy towards other community members
|
22
|
+
|
23
|
+
Examples of unacceptable behavior by participants include:
|
24
|
+
|
25
|
+
* The use of sexualized language or imagery and unwelcome sexual attention or
|
26
|
+
advances
|
27
|
+
* Trolling, insulting/derogatory comments, and personal or political attacks
|
28
|
+
* Public or private harassment
|
29
|
+
* Publishing others' private information, such as a physical or electronic
|
30
|
+
address, without explicit permission
|
31
|
+
* Other conduct which could reasonably be considered inappropriate in a
|
32
|
+
professional setting
|
33
|
+
|
34
|
+
## Our Responsibilities
|
35
|
+
|
36
|
+
Project maintainers are responsible for clarifying the standards of acceptable
|
37
|
+
behavior and are expected to take appropriate and fair corrective action in
|
38
|
+
response to any instances of unacceptable behavior.
|
39
|
+
|
40
|
+
Project maintainers have the right and responsibility to remove, edit, or
|
41
|
+
reject comments, commits, code, wiki edits, issues, and other contributions
|
42
|
+
that are not aligned to this Code of Conduct, or to ban temporarily or
|
43
|
+
permanently any contributor for other behaviors that they deem inappropriate,
|
44
|
+
threatening, offensive, or harmful.
|
45
|
+
|
46
|
+
## Scope
|
47
|
+
|
48
|
+
This Code of Conduct applies both within project spaces and in public spaces
|
49
|
+
when an individual is representing the project or its community. Examples of
|
50
|
+
representing a project or community include using an official project e-mail
|
51
|
+
address, posting via an official social media account, or acting as an appointed
|
52
|
+
representative at an online or offline event. Representation of a project may be
|
53
|
+
further defined and clarified by project maintainers.
|
54
|
+
|
55
|
+
## Enforcement
|
56
|
+
|
57
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
58
|
+
reported by contacting the project team at venablesh@yahoo.co.uk. All
|
59
|
+
complaints will be reviewed and investigated and will result in a response that
|
60
|
+
is deemed necessary and appropriate to the circumstances. The project team is
|
61
|
+
obligated to maintain confidentiality with regard to the reporter of an incident.
|
62
|
+
Further details of specific enforcement policies may be posted separately.
|
63
|
+
|
64
|
+
Project maintainers who do not follow or enforce the Code of Conduct in good
|
65
|
+
faith may face temporary or permanent repercussions as determined by other
|
66
|
+
members of the project's leadership.
|
67
|
+
|
68
|
+
## Attribution
|
69
|
+
|
70
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
71
|
+
available at [http://contributor-covenant.org/version/1/4][version]
|
72
|
+
|
73
|
+
[homepage]: http://contributor-covenant.org
|
74
|
+
[version]: http://contributor-covenant.org/version/1/4/
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2017 Harry Venables
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,182 @@
|
|
1
|
+
# Simple ChartJS
|
2
|
+
|
3
|
+
Simple Ruby wrapper for using [ChartJS](http://www.chartjs.org/)
|
4
|
+
|
5
|
+
## Current ChartJS version
|
6
|
+
|
7
|
+
Includes - [2.7.1](https://github.com/chartjs/Chart.js/releases/tag/v2.7.1)
|
8
|
+
|
9
|
+
## Installation
|
10
|
+
|
11
|
+
Add this line to your application's Gemfile:
|
12
|
+
|
13
|
+
```ruby
|
14
|
+
gem 'simple_chartjs'
|
15
|
+
```
|
16
|
+
|
17
|
+
In `application.js`, add:
|
18
|
+
|
19
|
+
```javascript
|
20
|
+
//= require Chart.bundle
|
21
|
+
//= require simple_chartjs
|
22
|
+
```
|
23
|
+
|
24
|
+
And then execute:
|
25
|
+
|
26
|
+
$ bundle
|
27
|
+
|
28
|
+
Or install it yourself as:
|
29
|
+
|
30
|
+
$ gem install simple_chartjs
|
31
|
+
|
32
|
+
## Usage
|
33
|
+
|
34
|
+
For faster load times simple chartjs expects you to have controllers and routes for the data to be loaded from
|
35
|
+
|
36
|
+
```ruby
|
37
|
+
class ChartsController < ApplicationController
|
38
|
+
def chart_data
|
39
|
+
render json: Model.group_by_day(:completed_at).count
|
40
|
+
end
|
41
|
+
end
|
42
|
+
```
|
43
|
+
|
44
|
+
At its simplest a chart can be produced by the following
|
45
|
+
```erb
|
46
|
+
<%= line_chart chart_data_path %>
|
47
|
+
<%= bar_chart chart_data_path %>
|
48
|
+
<%= horizontal_bar_chart chart_data_path %>
|
49
|
+
<%= radar_chart chart_data_path %>
|
50
|
+
<%= polar_area_chart chart_data_path %>
|
51
|
+
<%= pie_chart chart_data_path %>
|
52
|
+
<%= doughnut_chart chart_data_path %>
|
53
|
+
<%= bubble_chart chart_data_path %>
|
54
|
+
<%= scatter_chart chart_data_path %>
|
55
|
+
```
|
56
|
+
|
57
|
+
### HTML Options
|
58
|
+
`id`, `class`, `width`, `height`, `data` are passed directly to the chart
|
59
|
+
|
60
|
+
```ruby
|
61
|
+
line_chart chart_data_path, id: 'test-id', class: 'test-class', width: '100%', height: '500px', data: { options: 'test-options' }
|
62
|
+
```
|
63
|
+
Width and Heigth can be given either as a percentage or as pixels.
|
64
|
+
|
65
|
+
### Chart Options
|
66
|
+
|
67
|
+
Simple ChartJS follows the same patterns as ChartJS. There is dataset properties for configuring options on the data and also options for the chart itself.
|
68
|
+
|
69
|
+
#### Dataset Properties
|
70
|
+
|
71
|
+
There are three ways in which the dataset properties can be set.
|
72
|
+
|
73
|
+
##### Controller
|
74
|
+
The dataset properties can be set in the controller like below.
|
75
|
+
|
76
|
+
```ruby
|
77
|
+
def data
|
78
|
+
{
|
79
|
+
labels: [...],
|
80
|
+
datasets: [
|
81
|
+
{
|
82
|
+
label: "My First dataset",
|
83
|
+
data: [...],
|
84
|
+
border_width: 4 # <-- (any of the properties listed as dataset properties in chartjs can be added to the hash)
|
85
|
+
}
|
86
|
+
]
|
87
|
+
}
|
88
|
+
end
|
89
|
+
```
|
90
|
+
|
91
|
+
##### View
|
92
|
+
The dataset properties can be set in the view like below.
|
93
|
+
```ruby
|
94
|
+
bar_chart chart_data_path, dataset_properties: { border_width: 4 }
|
95
|
+
```
|
96
|
+
|
97
|
+
##### Javascript/Coffescript
|
98
|
+
If you want more control from a javascript perspective you can set a function that the chart will call and add those dataset properties. To do this you name a method as a data attribute call options like below.
|
99
|
+
```ruby
|
100
|
+
bar_chart chart_data_path, data: { options: 'my-chart' }
|
101
|
+
```
|
102
|
+
In the javascript you create a function on SimpleChart
|
103
|
+
|
104
|
+
###### javascript
|
105
|
+
```javascript
|
106
|
+
SimpleChart.prototype.myChartOptions = function() {
|
107
|
+
return {
|
108
|
+
datasetProperties: {
|
109
|
+
borderWidth: 4
|
110
|
+
},
|
111
|
+
options: {...}
|
112
|
+
}
|
113
|
+
}
|
114
|
+
```
|
115
|
+
###### coffeescript
|
116
|
+
```coffeescript
|
117
|
+
SimpleChart.prototype.myChartOptions = ->
|
118
|
+
{
|
119
|
+
datasetProperties: {
|
120
|
+
borderWidth: 4
|
121
|
+
},
|
122
|
+
options: {...}
|
123
|
+
}
|
124
|
+
```
|
125
|
+
|
126
|
+
#### Configuration Options
|
127
|
+
There are two ways in which the Configuration options can be set.
|
128
|
+
|
129
|
+
##### View
|
130
|
+
The configuration options can be set in the view like below.
|
131
|
+
```ruby
|
132
|
+
bar_chart chart_data_path, options: { scales: { x_axes: [{ bar_percentage: 0.2}] } }
|
133
|
+
```
|
134
|
+
|
135
|
+
##### Javascript/Coffescript
|
136
|
+
If you want more control from a javascript perspective you can set a function that the chart will call and add those configuration options. To do this you name a method as a data attribute call options like below.
|
137
|
+
```ruby
|
138
|
+
bar_chart chart_data_path, data: { options: 'my-chart' }
|
139
|
+
```
|
140
|
+
In the javascript you create a function on SimpleChart
|
141
|
+
|
142
|
+
###### javascript
|
143
|
+
```javascript
|
144
|
+
SimpleChart.prototype.myChartOptions = function() {
|
145
|
+
return {
|
146
|
+
datasetProperties: {...},
|
147
|
+
options: {
|
148
|
+
scales: {
|
149
|
+
xAxes: [{ barPercentage: 0.2 }]
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
153
|
+
}
|
154
|
+
```
|
155
|
+
###### coffeescript
|
156
|
+
```coffeescript
|
157
|
+
SimpleChart.prototype.myChartOptions = ->
|
158
|
+
{
|
159
|
+
datasetProperties: {...},
|
160
|
+
options: {
|
161
|
+
scales: {
|
162
|
+
xAxes: [{ barPercentage: 0.2 }]
|
163
|
+
}
|
164
|
+
}
|
165
|
+
}
|
166
|
+
```
|
167
|
+
|
168
|
+
## Development
|
169
|
+
|
170
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
171
|
+
|
172
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
173
|
+
|
174
|
+
## Contributing
|
175
|
+
|
176
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/hvenables/simple_chartjs. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
177
|
+
|
178
|
+
|
179
|
+
## License
|
180
|
+
|
181
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
182
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,132 @@
|
|
1
|
+
function SimpleChart(type, id, url, width, height, datasetProperties, configurationOptions) {
|
2
|
+
this.ctx = document.getElementById(id);
|
3
|
+
this.chartType = type;
|
4
|
+
this.url = url;
|
5
|
+
this.width = width;
|
6
|
+
this.height = height;
|
7
|
+
this.datasetProperties = datasetProperties;
|
8
|
+
this.configurationOptions = configurationOptions;
|
9
|
+
}
|
10
|
+
|
11
|
+
SimpleChart.prototype.createChart = function() {
|
12
|
+
var chart = this;
|
13
|
+
|
14
|
+
var xhr = new XMLHttpRequest();
|
15
|
+
xhr.open('GET', chart.url);
|
16
|
+
xhr.setRequestHeader("Content-Type", "application/json");
|
17
|
+
xhr.onreadystatechange = function() {
|
18
|
+
if(xhr.readyState === XMLHttpRequest.DONE) {
|
19
|
+
if(xhr.status === 200) {
|
20
|
+
chart.buildChart(xhr.response);
|
21
|
+
} else {
|
22
|
+
console.log('An error occurred during your xhr: ' + xhr.status + ' ' + xhr.statusText);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
xhr.send();
|
27
|
+
}
|
28
|
+
|
29
|
+
SimpleChart.prototype.buildChart = function(data) {
|
30
|
+
var data = JSON.parse(data);
|
31
|
+
[this.datasetProperties, this.configurationOptions] = this.chartConfiguration();
|
32
|
+
|
33
|
+
this.ctx.innerHTML = this.canvas();
|
34
|
+
var canvas = this.ctx.getElementsByTagName('canvas')[0];
|
35
|
+
|
36
|
+
var myChart = new Chart(canvas, {
|
37
|
+
type: this.chartType,
|
38
|
+
data: this.formatChartData(data),
|
39
|
+
options: this.configurationOptions
|
40
|
+
});
|
41
|
+
}
|
42
|
+
|
43
|
+
SimpleChart.prototype.chartConfiguration = function() {
|
44
|
+
var optionMethod = this.ctx.dataset['options']
|
45
|
+
|
46
|
+
if(typeof(optionMethod) != "undefined" && typeof(this[this.convertToCamelCase(optionMethod) + "Options"]) != "undefined") {
|
47
|
+
return [
|
48
|
+
this.configureOption('datasetProperties', JSON.parse(this.datasetProperties), optionMethod),
|
49
|
+
this.configureOption('options', JSON.parse(this.configurationOptions), optionMethod)
|
50
|
+
]
|
51
|
+
} else {
|
52
|
+
return [
|
53
|
+
this.formatRubyObject(JSON.parse(this.datasetProperties)),
|
54
|
+
this.formatRubyObject(JSON.parse(this.configurationOptions))
|
55
|
+
]
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
SimpleChart.prototype.configureOption = function(option_name, current_options, optionMethod) {
|
60
|
+
var options = this[this.convertToCamelCase(optionMethod) + "Options"]()[option_name];
|
61
|
+
|
62
|
+
if(typeof(options) != "undefined") {
|
63
|
+
return this.mergeObjects(
|
64
|
+
options,
|
65
|
+
this.formatRubyObject(current_options)
|
66
|
+
)
|
67
|
+
} else {
|
68
|
+
return this.formatRubyObject(current_options)
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
SimpleChart.prototype.formatChartData = function(data) {
|
73
|
+
var chartData = data;
|
74
|
+
this.formatArrayRubyObjects(chartData.datasets);
|
75
|
+
if(!(Object.keys(this.datasetProperties).length === 0)) {
|
76
|
+
for(property in this.datasetProperties) {
|
77
|
+
if(Array.isArray(this.datasetProperties[property])) {
|
78
|
+
for (var i = 0; i < this.datasetProperties[property].length; i++) {
|
79
|
+
chartData.datasets[i][property] = this.datasetProperties[property][i];
|
80
|
+
}
|
81
|
+
} else {
|
82
|
+
for (var i = 0; i < chartData.datasets.length; i++) {
|
83
|
+
chartData.datasets[i][property] = this.datasetProperties[property];
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
88
|
+
return chartData;
|
89
|
+
}
|
90
|
+
|
91
|
+
SimpleChart.prototype.formatArrayRubyObjects = function(array) {
|
92
|
+
for (var i = 0; i < array.length; i++) {
|
93
|
+
this.formatRubyObject(array[i]);
|
94
|
+
}
|
95
|
+
return array;
|
96
|
+
}
|
97
|
+
|
98
|
+
SimpleChart.prototype.formatRubyObject = function(object) {
|
99
|
+
for (property in object) {
|
100
|
+
if(property === 'data' || property === 'label') { continue; }
|
101
|
+
value = object[property];
|
102
|
+
delete object[property];
|
103
|
+
|
104
|
+
newKey = this.convertToCamelCase(property);
|
105
|
+
object[newKey] = value;
|
106
|
+
|
107
|
+
if(typeof(object[newKey]) == "object") {
|
108
|
+
this.formatRubyObject(object[newKey]);
|
109
|
+
}
|
110
|
+
}
|
111
|
+
return object;
|
112
|
+
}
|
113
|
+
|
114
|
+
SimpleChart.prototype.convertToCamelCase = function(string) {
|
115
|
+
return string.replace(/[-_]([a-z])/, function(_, letter) {
|
116
|
+
return letter.toUpperCase();
|
117
|
+
});
|
118
|
+
}
|
119
|
+
|
120
|
+
SimpleChart.prototype.mergeObjects = function(obj, src) {
|
121
|
+
Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
|
122
|
+
return obj;
|
123
|
+
}
|
124
|
+
|
125
|
+
SimpleChart.prototype.canvas = function() {
|
126
|
+
var canvas = '<canvas';
|
127
|
+
canvas += ' width="'+ this.ctx.clientWidth + '"';
|
128
|
+
canvas += ' height="' + this.ctx.clientHeight + '"';
|
129
|
+
canvas += '></canvas>';
|
130
|
+
|
131
|
+
return canvas;
|
132
|
+
}
|