kitechart 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ebe859905323674263f28b93817e4caa51278f0c
+  data.tar.gz: a0b08984926d949d2ecb1714b48622af5688c4e1
+SHA512:
+  metadata.gz: e7edfb7e417583d9cc1bde8b32995700af24b5232f0e72b07924bb32635b2e0f12741d7f71cc3970a50e1810f4d586db351f1f23621054cf01fb5617da200752
+  data.tar.gz: 31dd6ebfa75e2d88f76c2b638907889a0565867651dbae04a4830c03a5e76f608561386a49bd7bca7a13574ae8d83e685056d18d303d0a07fb9489c509434c8c

data/.gitignore

@@ -0,0 +1,11 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+.idea
+*.gem

data/.rbenv-gemsets

@@ -0,0 +1 @@
+-global

data/.rspec

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

data/.ruby-version

@@ -0,0 +1 @@
+2.3.0

data/.travis.yml

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

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 TODO: Write your name
+
+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,92 @@
+# Kitechart
+A data formatter and highcharts drilldown wrapper gem
+
+Sponsored by [tworedkites](http://tworedkites.com/).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'kitechart', '~> 0.1.0'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install kitechart
+
+Then add this line to your application.js file
+
+```
+//= require kitechart
+```
+
+## Useage
+
+To setup a two level drilldown highchart add the following code to your project.
+
+This is the code contained in the view file
+
+```
+<div id="container" class="ui container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+```
+
+This is the code contained in the views javascript file
+
+```
+$(function () {
+  'use strict';
+  window.Kites = {
+    getData: function () {
+      $.getJSON($(location).attr('href')+'kites.json').then(function (data) {
+        Chart.generateChart('Kites By Color', 'Count', 'column', data['colors'], data['size'], data['material']);
+      });
+    }
+  };
+});
+```
+
+This is the code contained in the controller file
+
+```
+class KitesController < ApplicationController
+  def index
+    @kites = Kite.all
+
+    respond_to do |format|
+      format.html
+      format.json do
+        colors, size, material = get_json_data
+        render json: { colors: colors, size: size, material: material }
+      end
+    end
+  end
+
+  private
+
+  def get_json_data
+    Kitechart::DataFormatter.new(@kites,
+                                 'color',
+                                 'size',
+                                 'material').get_data
+  end
+end
+```
+
+## Demo
+The demo app webpage for the kitechart gem is viewable [here](https://protected-shore-59130.herokuapp.com/)
+The demo app codebase can also be viewed [here](https://github.com/Mbuckley0/kitechart)
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/mbuckley0/kitechart.
+
+
+## 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/chart.js

@@ -0,0 +1,59 @@
+$(function () {
+  window.Chart = {
+    generateChart: function(title, yAxisTitle, chartType, options) {
+      var options = options || {};
+      if (options['thirdLevelData'] != undefined) {
+        Chart.generateThirdLevelChart(options['topLevelData'], options['secondLevelData'], options['thirdLevelData'], title, yAxisTitle, chartType, options);
+      } else if (options['secondLevelData'] != undefined) {
+        Chart.generateSecondLevelChart(options['topLevelData'], options['secondLevelData'], title, yAxisTitle, chartType, options);
+      } else if(options['topLevelData'] != undefined) {
+        Chart.generateTopLevelChart(options['topLevelData'], title, yAxisTitle, chartType, options);
+      }
+    },
+
+    generateTopLevelChart: function(topLevelData, title, yAxisTitle, chartType, options) {
+      formattedData = topLevelData;
+      $.each(topLevelData, function(key, value) {
+        formattedData[key] = Math.round(value);
+      });
+      TopLevelChart.displayChart(formattedData, title, yAxisTitle, chartType, options);
+    },
+
+    generateSecondLevelChart: function(topLevelData, secondLevelData, title, yAxisTitle, chartType, options) {
+      formattedData = topLevelData;
+      $.each(topLevelData, function(key, value) {
+        formattedData[key] = {label: Math.round(value)};
+        formattedData[key]['drilldown'] = secondLevelData[key];
+          $.each(formattedData[key]['drilldown'], function(drilldownKey, drilldownValue) {
+            formattedData[key]['drilldown'][drilldownKey] = Math.round(drilldownValue)
+          });
+      });
+      OneLevelDownChart.displayChart(formattedData, title, yAxisTitle, chartType, options);
+    },
+
+    generateThirdLevelChart: function(topLevelData, secondLevelData, thirdLevelData, title, yAxisTitle, chartType, options) {
+      formattedData = topLevelData;
+      $.each(topLevelData, function(key, value) {
+        i = 0;
+        formattedData[key] = {label: Math.round(value)};
+
+        formattedData[key]['drilldown'] = { label: secondLevelData[key] };
+        formattedData[key]['drilldown']['drilldown'] = [];
+        $.each(formattedData[key]['drilldown']['label'], function(drilldownKey) {
+          formattedData[key]['drilldown']['label'][drilldownKey] = Math.round(formattedData[key]['drilldown']['label'][drilldownKey]);
+          formattedData[key]['drilldown']['drilldown'].push({ drilldownKey: thirdLevelData[key][drilldownKey] });
+
+          $.each(formattedData[key]['drilldown']['drilldown'][i], function(secondDrilldownIDKey, secondDrilldownIDValue) {
+            if(secondDrilldownIDValue != undefined) {
+              $.each(secondDrilldownIDValue, function(secondDrilldownKey, secondDrilldownValue) {
+                formattedData[key]['drilldown']['drilldown'][i][secondDrilldownIDKey][secondDrilldownKey] = Math.round(secondDrilldownValue);
+              });
+            }
+          });
+          i++
+        });
+      });
+      TwoLevelDownChart.displayChart(formattedData, title, yAxisTitle, chartType, options);
+    }
+  }
+});

data/app/assets/javascripts/kitechart.js

@@ -0,0 +1,3 @@
+//= require highcharts
+//= require drilldown
+//= require_tree .

data/app/assets/javascripts/one_level_down_chart.js

@@ -0,0 +1,95 @@
+$(function () {
+  // Data is expected to be in the form of {label: {label: value, drilldown: {label: value}}, label: {label: value, drilldown:{label: value}}}
+  window.OneLevelDownChart = {
+    displayChart: function (data, title, yAxisTitle, chartType, options) {
+      var options = options || {};
+      var chartData = OneLevelDownChart.formatTopLevelData(data);
+      var drilldownData = OneLevelDownChart.formatFirstDrilldownData(data);
+
+      $('#container').highcharts({
+        chart: {
+          type: chartType,
+          backgroundColor: options['chart-backgroundColor'] || 'white'
+        },
+        title: {
+          text: title
+        },
+        subtitle: {
+          text: options['subtitle-text'] || 'Click the columns to drill down.'
+        },
+        xAxis: {
+          type: options['xAxis-type'] || 'category'
+        },
+        yAxis: {
+          title: {
+            text: yAxisTitle
+          }
+
+        },
+        plotOptions: {
+          series: {
+            borderWidth: options['plotOptions-series-borderWidth'] || 0,
+            dataLabels: {
+              enabled: options['plotOptions-series-dataLabel-enabled'] || true,
+              format: options['plotOptions-series-dataLabel-format'] || '{point.y:,.0f}'
+            }
+          }
+        },
+        legend: {
+          enabled: options['legend-enabled'] || false
+        },
+        tooltip: {
+          headerFormat: options['tooltip-headerFormat'] || '',
+          pointFormat: options['tooltip-pointFormat'] || '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.2f}</b><br/>'
+        },
+        series: [{
+          point: {
+            events: {
+              click: options['series-point-events-click'] || ''
+            }
+          },
+          colorByPoint: options['series-colorByPoint'] || true,
+          data: chartData
+        }],
+        drilldown: {
+          series: drilldownData
+        }
+      });
+    },
+
+    formatTopLevelData: function(data) {
+      var chartData = [];
+
+      $.each(data, function(key,value){
+        chartData.push({
+          name: key,
+          y: value['label'],
+          drilldown: key
+        });
+      });
+
+      return chartData;
+    },
+
+    formatFirstDrilldownData: function(data) {
+      var drilldownData = [];
+
+      $.each(data, function(key, value) {
+        objectData = [];
+        for(var drilldownKey in value['drilldown']) {
+          objectData.push([
+            drilldownKey,
+            value['drilldown'][drilldownKey]
+          ]);
+        }
+
+        drilldownData.push({
+          name: key,
+          id: key,
+          data: objectData
+        });
+      });
+      return drilldownData;
+    }
+  }
+});

data/app/assets/javascripts/top_level_chart.js

@@ -0,0 +1,67 @@
+$(function () {
+  // Data is expected to be in the form of {label: value, label: value, label: value}
+  window.TopLevelChart = {
+    displayChart: function (data, title, yAxisTitle, chartType, options) {
+      var options = options || {};
+      var chartData = TopLevelChart.formatData(data);
+
+      $('#container').highcharts({
+        chart: {
+          type: chartType,
+          backgroundColor: options['chart-backgroundColor'] || 'white'
+        },
+        title: {
+          text: title
+        },
+        subtitle: {
+          text: options['subtitle-text'] || ''
+        },
+        xAxis: {
+          type: options['xAxis-type'] || 'category'
+        },
+        yAxis: {
+          min: 0,
+          title: {
+            text: yAxisTitle
+          }
+        },
+        plotOptions: {
+          series: {
+            borderWidth: options['plotOptions-series-borderWidth'] || 0,
+            dataLabels: {
+              enabled: options['plotOptions-series-dataLabel-enabled'] || true,
+              format: options['plotOptions-series-dataLabel-format'] || '{point.y:,.0f}'
+            }
+          }
+        },
+        legend: {
+          enabled: options['legend-enabled'] || false
+        },
+        tooltip: {
+          headerFormat: options['tooltip-headerFormat'] || '',
+          pointFormat: options['tooltip-pointFormat'] || '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.2f}</b><br/>'
+        },
+        series: [{
+          point: {
+            events: {
+              click: options['series-point-events-click'] || ''
+            }
+          },
+          colorByPoint: options['series-colorByPoint'] || true,
+          data: chartData
+        }]
+      });
+    },
+
+    formatData: function (data) {
+      var chartData = [];
+      $.each(data, function(key, value){
+        chartData.push({
+          name: key,
+          y: value
+        });
+      });
+      return chartData;
+    }
+  }
+});

data/app/assets/javascripts/two_level_down_chart.js

@@ -0,0 +1,120 @@
+$(function () {
+  // Data is expected to be in the form of {label: {label: value, drilldown: {label: value}}, label: {label: value, drilldown:{label: value}}}
+  window.TwoLevelDownChart = {
+    displayChart: function (data, title, yAxisTitle, chartType, options) {
+      var options = options || {};
+      var chartData = TwoLevelDownChart.formatTopLevelData(data);
+      var drilldownData = TwoLevelDownChart.formatDrilldownData(data);
+
+      $('#container').highcharts({
+        chart: {
+          type: chartType,
+          backgroundColor: options['chart-backgroundColor'] || 'white'
+        },
+        title: {
+          text: title
+        },
+        subtitle: {
+          text: options['subtitle-text'] || 'Click the columns to drill down.'
+        },
+        xAxis: {
+          type: options['xAxis-type'] || 'category'
+        },
+        yAxis: {
+          title: {
+            text: yAxisTitle
+          }
+
+        },
+        plotOptions: {
+          series: {
+            borderWidth: options['plotOptions-series-borderWidth'] || 0,
+            dataLabels: {
+              enabled: options['plotOptions-series-dataLabel-enabled'] || true,
+              format: options['plotOptions-series-dataLabel-format'] || '{point.y:,.0f}'
+            }
+          }
+        },
+        legend: {
+          enabled: options['legend-enabled'] || false
+        },
+        tooltip: {
+          headerFormat: options['tooltip-headerFormat'] || '',
+          pointFormat: options['tooltip-pointFormat'] || '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.2f}</b><br/>'
+        },
+        series: [{
+          point: {
+            events: {
+              click: options['series-point-events-click'] || ''
+            }
+          },
+          colorByPoint: options['series-colorByPoint'] || true,
+          data: chartData
+        }],
+        drilldown: {
+          series: drilldownData
+        }
+      });
+    },
+
+    formatTopLevelData: function (data) {
+      var chartData = [];
+
+      $.each(data, function(key, value) {
+        chartData.push({
+          name: key,
+          y: value['label'],
+          drilldown: key
+        });
+      });
+      return chartData;
+    },
+
+    formatDrilldownData: function (data) {
+      var drilldownData = [];
+
+      $.each(data, function(key, value) {
+        firstObjectData = [];
+        i = 0;
+        $.each(value['drilldown']['label'], function(firstDrilldownKey, firstDrilldownValue) {
+          secondObjectData = [];
+          firstObjectData.push({
+            name: firstDrilldownKey,
+            y: firstDrilldownValue,
+            drilldown: key + '_' + firstDrilldownKey
+          });
+
+
+          $.each(value['drilldown']['drilldown'][i], function(secondDrilldownIDKey, secondDrilldownIDValue) {
+            if(secondDrilldownIDValue != undefined) {
+              $.each(secondDrilldownIDValue, function(secondDrilldownKey, secondDrilldownValue) {
+                secondObjectData.push([
+                  secondDrilldownKey,
+                  data[key]['drilldown']['drilldown'][i][secondDrilldownIDKey][secondDrilldownKey]
+                ]);
+              });
+            }
+          });
+
+          if (secondObjectData.length >= 1) {
+            drilldownData.push({
+              name: firstDrilldownKey,
+              id: key + '_' + firstDrilldownKey,
+              data: secondObjectData
+            });
+          }
+          i++;
+        });
+
+        if (firstObjectData.length >= 1) {
+          drilldownData.push({
+            name: key,
+            id: key,
+            data: firstObjectData
+          });
+        }
+      });
+      return drilldownData;
+    }
+  }
+});