active_charts 1.0.1

data/lib/active_charts/chart.rb

@@ -0,0 +1,121 @@
+require 'action_view/helpers/number_helper'
+require 'action_view/helpers/capture_helper'
+require 'action_view/helpers/output_safety_helper'
+require 'action_view/helpers/tag_helper'
+require 'active_support/inflector'
+require 'active_charts/util'
+
+module ActiveCharts
+  class Chart
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::CaptureHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::TagHelper
+    include ActiveSupport::Inflector
+
+    MARGIN = 20
+    CSS_CLASSES = %w[a b c d e f g h i j k l m n o].map { |letter| 'series-' + letter }.freeze
+    
+    def initialize(collection, options = {})
+      @collection = Util.array_of_arrays?(collection) ? collection : [[]]
+      @rows_count = @collection.count
+      @columns_count = @collection.map(&:count).max
+      process_options(options)
+    end
+    
+    attr_reader :collection, :rows_count, :columns_count, :title, :extra_css_classes, 
+                :max_values, :data_formatters, :label_height, :series_labels
+    
+    def to_html
+      inner_html = [tag.figcaption(title, class: 'ac-chart-title'), chart_svg_tag, legend_list_tag].join('
+          ')
+      
+      tag.figure(inner_html.html_safe, class: container_classes)
+    end
+      
+    def chart_svg_tag; end
+    
+    def legend_list_tag
+      list_items = series_labels.map.with_index do |label, index| 
+        tag.li(label, class: series_class(index)) 
+      end
+      
+      tag.ul(list_items.join.html_safe, class: 'ac-chart ac-series-legend')
+    end
+    
+    private
+    
+    def process_options(options)
+      @title = options[:title] || ''
+      @extra_css_classes = options[:class] || ''
+      @data_formatters = options[:data_formatters] || []
+      @max_values = valid_max_values(options[:max_values], options[:single_y_scale])
+      @label_height = options[:label_height] || MARGIN / 2
+      @series_labels = options[:series_labels] || []
+    end
+    
+    def valid_max_values(custom_max_values = nil, single_y_scale = false)
+      return custom_max_values if valid_max_values?(custom_max_values)
+      
+      computed_max_values = Util.max_values(@collection)
+      
+      return computed_max_values unless single_y_scale
+      
+      Array.new(columns_count, computed_max_values.max)
+    end
+    
+    def valid_max_values?(max_values)
+      return false unless max_values.is_a?(Array)
+      return false unless max_values.count.eql?(columns_count)
+      
+      Util.max_values(@collection).map.with_index do |computed_val, index|
+        computed_val <= max_values[index]
+      end.all?
+    end
+        
+    def container_classes
+      ['ac-chart-container', 'ac-clearfix', extra_css_classes].join(' ')
+    end
+    
+    def series_class(index)
+      CSS_CLASSES[index % CSS_CLASSES.size]
+    end
+    
+    def tag_options(opts, whitelist = nil)
+      opts = opts.select { |k, _v| whitelist.include? k.to_s } if whitelist
+      tag_builder = TagBuilder.new(self)
+      opts.map { |k, v| tag_builder.tag_option(k, v, true) }.join(' ')
+    end
+    
+    def formatted_val(val, formatter = nil)
+      case formatter
+      when :percent
+        number_to_percentage(Util.safe_to_dec(val) * 100, precision: 1)
+      when :date
+        Util.date_label(val)
+      when :rounded
+        Util.safe_to_dec(val).round
+      when :currency
+        number_to_currency(val, precision: 0)
+      when :year
+        val.to_i.to_s
+      else
+        number_with_delimiter(val)
+      end
+    end
+    
+    def svg_options
+      { 
+        xmlns: 'http://www.w3.org/2000/svg',
+        style: "width: #{svg_width}px; height: auto;",
+        viewBox: "0 0 #{svg_width} #{svg_height}",
+        class: ['ac-chart', css_class].join(' ')
+      }
+    end
+    
+    def css_class
+      class_name = self.class.to_s.gsub('ActiveCharts::', '')
+      'ac-' + underscore(class_name).tr('_', '-')
+    end
+  end
+end

data/lib/active_charts/cli.rb

@@ -0,0 +1,12 @@
+require 'thor'
+require 'active_charts/generators/assets'
+
+module ActiveCharts
+  class CLI < Thor
+    desc 'install', 'Installs Active Record and generates the default asset files'
+
+    def install
+      ActiveCharts::Generators::Assets.start
+    end
+  end
+end

data/lib/active_charts/generators/assets.rb

@@ -0,0 +1,25 @@
+require 'thor/group'
+
+module ActiveCharts
+  module Generators
+    class Assets < Thor::Group
+      include Thor::Actions
+      
+      source_root File.expand_path('../templates', __FILE__)
+
+      def copy_stylesheets
+        template 'active_charts.css.scss', 'app/assets/stylesheets/active_charts.css.scss'
+        say '   - make sure to require or import it if you have customized your application.css file'
+      end
+      
+      def copy_javascript
+        template 'active_charts.js', 'app/assets/javascripts/active_charts.js'
+        say '       - bundle active_charts.js in application.js by adding:
+         //= require active_charts'
+        say '       - if your application.js is loaded in document head, precompile the active_charts script separately by adding to config/initializers/assets.rb:
+         Rails.application.config.assets.precompile += %w[active_charts.js]'
+      end  
+    end
+  end
+end
+    

data/lib/active_charts/generators/templates/active_charts.css.scss

@@ -0,0 +1,136 @@
+$ac-light-gray: #dedede;
+$ac-red: #fe4a5d;
+$ac-orange: #ff9016;
+$ac-yellow: #fee123;
+$ac-green: #008476;
+$ac-blue: #4542ca;
+$ac-purple: #702277;
+$ac-pink: #ffb3cb; 
+$ac-lime: #a5e100; 
+$ac-teal: #00a0cc; 
+$ac-lavendar: #c19bff; 
+$ac-gold: #d39f10; 
+$ac-brown: #7d4a32; 
+$ac-gray: #aaa; 
+$ac-black: #000; 
+$ac-olive: #a09f29; 
+
+$ac-border: $ac-light-gray;
+
+$ac-series: (
+  series-a: $ac-red,
+  series-b: $ac-orange,
+  series-c: $ac-yellow,
+  series-d: $ac-green,
+  series-e: $ac-blue,
+  series-f: $ac-purple,
+  series-g: $ac-pink, 
+  series-h: $ac-lime, 
+  series-i: $ac-teal, 
+  series-j: $ac-lavendar, 
+  series-k: $ac-gold, 
+  series-l: $ac-brown, 
+  series-m: $ac-gray, 
+  series-n: $ac-black, 
+  series-o: $ac-olive, 
+);
+
+@mixin smart-box {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+      -ms-border-radius: $radius;
+          border-radius: $radius;
+}
+
+@mixin slow-transitions {
+  -webkit-transition-property: opacity background color fill stroke; 
+  -webkit-transition-duration: 0.20s; 
+  -webkit-transition-timing-function: ease-out; 
+     -moz-transition-property: opacity background color fill stroke; 
+     -moz-transition-duration: 0.20s; 
+     -moz-transition-timing-function: ease-out; 
+      -ms-transition-property: opacity background color fill stroke; 
+      -ms-transition-duration: 0.20s; 
+      -ms-transition-timing-function: ease-out; 
+          transition-property: opacity background color fill stroke; 
+          transition-duration: 0.20s; 
+          transition-timing-function: ease-out; 
+}
+
+text, circle { @include slow-transitions; }
+
+.ac-clearfix:before,
+.ac-clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+.ac-clearfix:after {
+    clear: both;
+}
+
+figure.ac-chart-container {
+  margin-bottom: 1em;
+}
+
+figcaption.ac-chart-title {
+  text-align: center;
+  font-weight: 700;
+  font-size: 1em; 
+  text-transform: capitalize;
+  margin: 0 auto 0.5em auto;
+}
+
+svg.ac-chart { 
+  background: #fff;
+  max-width: 100%;
+  display: block; 
+  margin: 0 auto 1em auto;
+  
+  line.ac-grid-line, rect { stroke-width: 1px; stroke: $ac-border; }
+  path.ac-line-chart-line { stroke-width: 1px; fill: transparent; }
+  rect.grid { fill: #fff; }
+  text { text-anchor: middle; font-size: 14px; height: 12px; }
+  text.anchor_start, text.ac-y-label { text-anchor: start; }
+  text.ac-toggleable { text-anchor: start; opacity: 0; cursor: pointer; z: 2; }
+  text.ac-toggleable:hover { opacity: 0.2; }
+  .ac-triggerable { cursor: pointer; z: 1; }
+}
+
+svg.ac-chart.ac-scatter-plot {
+  circle.ac-scatter-plot-dot { r: 3px; stroke-width: 3px; fill: transparent; }
+}
+
+ul.ac-chart.ac-series-legend {
+  @include smart-box;
+  
+  width: 360px;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0.25em;
+  
+  li { 
+    list-style: none; 
+    text-align: left; 
+    padding-left: 0.5em;
+    margin-bottom: 0.2em;
+    border-left-width: 1em; 
+    border-left-style: solid;
+  }
+}
+
+@each $name, $color in $ac-series {
+  rect.ac-bar-chart-bar.#{$name} { fill: $color; }
+  path.ac-line-chart-line.#{$name},
+    circle.ac-scatter-plot-dot.#{$name} { stroke: $color; }
+  li.#{$name} { border-color: $color; }
+}
+
+.ac-highlight { stroke: $ac-black !important; z: 1 !important; }
+.ac-visible { opacity: 1 !important; z: 2 !important; }

data/lib/active_charts/generators/templates/active_charts.js

@@ -0,0 +1,86 @@
+/* 
+  * ActiveCharts 
+  * ============
+  * package for chart interactivity 
+  * no dependencies
+  * browser support: IE 9+, Firefox, Chrome, Safari
+  */
+  var ActiveCharts = (function() {
+  
+    var tooltip_triggers = [];
+    var tooltips = [];
+    
+    function setTriggers(classNames) {
+      for (var i = 0; i < classNames.length; i++) {
+        tooltip_triggers.push.apply(tooltip_triggers, document.getElementsByClassName(classNames[i]));
+      }
+    }
+
+    function setTooltips(classNames) {
+      for (var i = 0; i < classNames.length; i++) {
+        tooltips.push.apply(tooltips, document.getElementsByClassName(classNames[i]));
+      }
+    }
+    
+    function toggleTooltip(triggerEl, tooltipEl) {
+      if (hasClass(triggerEl, 'ac-highlight')) {
+        removeClass(triggerEl, 'ac-highlight');
+        removeClass(tooltipEl, 'ac-visible');
+      } else {
+        addClass(triggerEl, 'ac-highlight');
+        addClass(tooltipEl, 'ac-visible');
+      }
+    }
+
+    function addClass(el, className) {
+      if (el.classList)
+        el.classList.add(className);
+      else
+        el.className += ' ' + className;
+    }
+
+    function removeClass(el, className) {
+      if (el.classList)
+        el.classList.remove(className);
+      else
+        el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+
+    function hasClass(el, className) {
+      if (el.classList)
+        return el.classList.contains(className);
+      else
+        return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+    }
+    
+    return {
+      
+      activateTooltips: function(triggerClassNames, tooltipClassNames, eventName) {
+        setTriggers(triggerClassNames);
+        setTooltips(tooltipClassNames)
+
+        for (var i = 0; i < tooltip_triggers.length; i++) {
+          tooltip_triggers[i].addEventListener(eventName, function(e){
+            toggleTooltip(e.target, e.target.nextElementSibling);
+          });
+        }
+
+        for (i = 0; i < tooltips.length; i++) {
+          tooltips[i].addEventListener(eventName, function(e){
+            toggleTooltip(e.target.previousElementSibling, e.target);
+          });
+        }
+      },
+      
+      // expose some private methods
+      toggleTooltip: toggleTooltip,
+      addClass: addClass,
+      removeClass: removeClass,
+      hasClass: hasClass
+      
+    };
+  
+})();
+
+ActiveCharts.activateTooltips(['ac-triggerable'], ['ac-toggleable'], 'click');
+

data/lib/active_charts/helpers.rb

@@ -0,0 +1,9 @@
+require 'active_charts/helpers/collection_parser'
+
+module ActiveCharts
+  module Helpers
+    autoload :BarChartHelper, 'active_charts/helpers/bar_chart_helper'
+    autoload :ScatterPlotHelper, 'active_charts/helpers/scatter_plot_helper'
+    autoload :LineChartHelper, 'active_charts/helpers/line_chart_helper'
+  end
+end

data/lib/active_charts/helpers/bar_chart_helper.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require 'active_charts/util'
+
+module ActiveCharts
+  module Helpers #:nodoc:
+    module BarChartHelper
+      def bar_chart(collection, options = {})
+        BarChart.new(collection, options).to_html
+      end
+      
+      def bar_chart_for(resource_collection, columns = [], options = {})
+        return bar_chart([[]], options) unless Util.valid_collection?(resource_collection)
+        
+        parser = CollectionParser.new(resource_collection, columns, options[:label_column])
+        bar_chart(parser.collection, options.merge(series_labels: parser.series_labels, rows: parser.rows))
+      end
+    end
+  end
+end

data/lib/active_charts/helpers/collection_parser.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module ActiveCharts
+  module Helpers #:nodoc:
+    class CollectionParser
+      def initialize(resource_collection, columns, label_column)
+        resource = resource_collection.first.class
+
+        @label_column = label_column || auto_label_column(resource)
+        @columns = valid_columns(resource, columns)
+        @rows = resource_collection.pluck(@label_column)
+        @collection = resource_collection.pluck(*@columns)
+      end
+
+      attr_reader :collection, :columns, :rows, :label_column
+
+      def series_labels
+        columns.map(&:to_s).map(&:titleize)
+      end
+
+      def xy_series_labels
+        x_label = series_labels.first
+
+        series_labels[1..-1].map do |y_label|
+          "#{x_label} vs. #{y_label}"
+        end
+      end
+
+      def xy_collection
+        collection.map do |row|
+          x_val = row.first
+
+          row[1..-1].map do |y_val|
+            [x_val, y_val]
+          end
+        end
+      end
+      
+      private
+      
+      def valid_columns(resource, columns)
+        attribute_names = resource.new.attribute_names.map(&:to_sym) 
+
+        return attribute_names if columns.eql?([])
+
+        attribute_names & columns
+      end
+
+      def auto_label_column(resource)
+        attribute_names = resource.new.attribute_names
+
+        %w[name title id].each do |attribute_name|
+          return attribute_name.to_sym if attribute_names.include?(attribute_name)
+        end
+
+        attribute_names.first.to_sym
+      end
+    end
+    
+    private_constant :CollectionParser
+  end
+end