simple_chartjs 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5b2ca58c8360dc9ed5be0ff6eb0952563466c4ea
+  data.tar.gz: 184192015efb8920505ab2966b2e7b3b9fc24a0e
+SHA512:
+  metadata.gz: 4d1be10f22bfa45f4f7650d1b8d74dec5d0aed8d17e54faf22a86b0f17bda70f4a544c3ce6845c1c99819f797e513887598c559db0aaa1868a6ead396d53c969
+  data.tar.gz: b693ee1646f48b5e88c2a0270609131871482a836781aaa153b7acedc07a36bad350ba69d28b8047802a866f805b6d71dd9ce3b0170987231bdcf0c05b59d995

data/.gitignore

@@ -0,0 +1,13 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+/**/.DS_Store
+
+# rspec failure tracking
+.rspec_status

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.4.1
+before_install: gem install bundler -v 1.14.6

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at venablesh@yahoo.co.uk. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in simple_chartjs.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Harry Venables
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,182 @@
+# Simple ChartJS
+
+Simple Ruby wrapper for using [ChartJS](http://www.chartjs.org/)
+
+## Current ChartJS version
+
+Includes - [2.7.1](https://github.com/chartjs/Chart.js/releases/tag/v2.7.1)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'simple_chartjs'
+```
+
+In `application.js`, add:
+
+```javascript
+//= require Chart.bundle
+//= require simple_chartjs
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install simple_chartjs
+
+## Usage
+
+For faster load times simple chartjs expects you to have controllers and routes for the data to be loaded from
+
+```ruby
+class ChartsController < ApplicationController
+  def chart_data
+    render json: Model.group_by_day(:completed_at).count
+  end
+end
+```
+
+At its simplest a chart can be produced by the following
+```erb
+<%= line_chart           chart_data_path %>
+<%= bar_chart            chart_data_path %>
+<%= horizontal_bar_chart chart_data_path %>
+<%= radar_chart          chart_data_path %>
+<%= polar_area_chart     chart_data_path %>
+<%= pie_chart            chart_data_path %>
+<%= doughnut_chart       chart_data_path %>
+<%= bubble_chart         chart_data_path %>
+<%= scatter_chart        chart_data_path %>
+```
+
+### HTML Options
+`id`, `class`, `width`, `height`, `data` are passed directly to the chart
+
+```ruby
+line_chart chart_data_path, id: 'test-id', class: 'test-class', width: '100%', height: '500px', data: { options: 'test-options' }
+```
+Width and Heigth can be given either as a percentage or as pixels.
+
+### Chart Options
+
+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.
+
+#### Dataset Properties
+
+There are three ways in which the dataset properties can be set.
+
+##### Controller
+The dataset properties can be set in the controller like below.
+
+```ruby
+def data
+  {
+    labels: [...],
+    datasets: [
+      {
+        label: "My First dataset",
+        data: [...],
+        border_width: 4  # <-- (any of the properties listed as dataset properties in chartjs can be added to the hash)
+      }
+    ]
+  }
+end
+```
+
+##### View
+The dataset properties can be set in the view like below.
+```ruby
+bar_chart chart_data_path, dataset_properties: { border_width: 4 }
+```
+
+##### Javascript/Coffescript
+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.
+```ruby
+bar_chart chart_data_path, data: { options: 'my-chart' }
+```
+In the javascript you create a function on SimpleChart
+
+###### javascript
+```javascript
+SimpleChart.prototype.myChartOptions = function() {
+  return {
+    datasetProperties: {
+      borderWidth: 4
+    },
+    options: {...}
+  }
+}
+```
+###### coffeescript
+```coffeescript
+SimpleChart.prototype.myChartOptions = ->
+  {
+    datasetProperties: {
+      borderWidth: 4
+    },
+    options: {...}
+  }
+```
+
+#### Configuration Options
+There are two ways in which the Configuration options can be set.
+
+##### View
+The configuration options can be set in the view like below.
+```ruby
+bar_chart chart_data_path, options: { scales: { x_axes: [{ bar_percentage: 0.2}] } }
+```
+
+##### Javascript/Coffescript
+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.
+```ruby
+bar_chart chart_data_path, data: { options: 'my-chart' }
+```
+In the javascript you create a function on SimpleChart
+
+###### javascript
+```javascript
+SimpleChart.prototype.myChartOptions = function() {
+  return {
+    datasetProperties: {...},
+    options: {
+      scales: {
+        xAxes: [{ barPercentage: 0.2 }]
+      }
+    }
+  }
+}
+```
+###### coffeescript
+```coffeescript
+SimpleChart.prototype.myChartOptions = ->
+  {
+    datasetProperties: {...},
+    options: {
+      scales: {
+        xAxes: [{ barPercentage: 0.2 }]
+      }
+    }
+  }
+```
+
+## Development
+
+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.
+
+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).
+
+## Contributing
+
+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.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/assets/javascripts/simple_chartjs.js

@@ -0,0 +1,132 @@
+function SimpleChart(type, id, url, width, height, datasetProperties, configurationOptions) {
+  this.ctx                  = document.getElementById(id);
+  this.chartType            = type;
+  this.url                  = url;
+  this.width                = width;
+  this.height               = height;
+  this.datasetProperties    = datasetProperties;
+  this.configurationOptions = configurationOptions;
+}
+
+SimpleChart.prototype.createChart = function() {
+  var chart = this;
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', chart.url);
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function() {
+    if(xhr.readyState === XMLHttpRequest.DONE) {
+      if(xhr.status === 200) {
+        chart.buildChart(xhr.response);
+      } else {
+        console.log('An error occurred during your xhr: ' +  xhr.status + ' ' + xhr.statusText);
+      }
+    }
+  }
+  xhr.send();
+}
+
+SimpleChart.prototype.buildChart = function(data) {
+  var data = JSON.parse(data);
+  [this.datasetProperties, this.configurationOptions] = this.chartConfiguration();
+
+  this.ctx.innerHTML = this.canvas();
+  var canvas = this.ctx.getElementsByTagName('canvas')[0];
+
+  var myChart = new Chart(canvas, {
+    type: this.chartType,
+    data: this.formatChartData(data),
+    options: this.configurationOptions
+  });
+}
+
+SimpleChart.prototype.chartConfiguration = function() {
+  var optionMethod = this.ctx.dataset['options']
+
+  if(typeof(optionMethod) != "undefined" && typeof(this[this.convertToCamelCase(optionMethod) + "Options"]) != "undefined") {
+    return [
+      this.configureOption('datasetProperties', JSON.parse(this.datasetProperties), optionMethod),
+      this.configureOption('options', JSON.parse(this.configurationOptions), optionMethod)
+    ]
+  } else {
+    return [
+      this.formatRubyObject(JSON.parse(this.datasetProperties)),
+      this.formatRubyObject(JSON.parse(this.configurationOptions))
+    ]
+  }
+}
+
+SimpleChart.prototype.configureOption = function(option_name, current_options, optionMethod) {
+  var options = this[this.convertToCamelCase(optionMethod) + "Options"]()[option_name];
+
+  if(typeof(options) != "undefined") {
+    return this.mergeObjects(
+      options,
+      this.formatRubyObject(current_options)
+    )
+  } else {
+    return this.formatRubyObject(current_options)
+  }
+}
+
+SimpleChart.prototype.formatChartData = function(data) {
+  var chartData = data;
+  this.formatArrayRubyObjects(chartData.datasets);
+  if(!(Object.keys(this.datasetProperties).length === 0)) {
+    for(property in this.datasetProperties) {
+      if(Array.isArray(this.datasetProperties[property])) {
+        for (var i = 0; i < this.datasetProperties[property].length; i++) {
+          chartData.datasets[i][property] = this.datasetProperties[property][i];
+        }
+      } else {
+        for (var i = 0; i < chartData.datasets.length; i++) {
+          chartData.datasets[i][property] = this.datasetProperties[property];
+        }
+      }
+    }
+  }
+  return chartData;
+}
+
+SimpleChart.prototype.formatArrayRubyObjects = function(array) {
+  for (var i = 0; i < array.length; i++) {
+    this.formatRubyObject(array[i]);
+  }
+  return array;
+}
+
+SimpleChart.prototype.formatRubyObject = function(object) {
+  for (property in object) {
+    if(property === 'data' || property === 'label') { continue; }
+    value   = object[property];
+    delete object[property];
+
+    newKey = this.convertToCamelCase(property);
+    object[newKey] = value;
+
+    if(typeof(object[newKey]) == "object") {
+      this.formatRubyObject(object[newKey]);
+    }
+  }
+  return object;
+}
+
+SimpleChart.prototype.convertToCamelCase = function(string) {
+  return string.replace(/[-_]([a-z])/, function(_, letter) {
+    return letter.toUpperCase();
+  });
+}
+
+SimpleChart.prototype.mergeObjects = function(obj, src) {
+  Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
+  return obj;
+}
+
+SimpleChart.prototype.canvas = function() {
+  var canvas = '<canvas';
+  canvas += ' width="'+ this.ctx.clientWidth + '"';
+  canvas += ' height="' + this.ctx.clientHeight + '"';
+  canvas += '></canvas>';
+
+  return canvas;
+}