RubyGems - acts_as_dashboard - Versions diffs - 0.1.0 - Mend

acts_as_dashboard 0.1.0

Files changed (113) hide show

data/generators/dashboard/templates/show.html.erb ADDED Viewed

@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+  <head>
+    <style type="text/css">
+      <%# @dashboard_css %>
+    </style>
+    <%= javascript_include_tag 'http://code.jquery.com/jquery-1.4.2.min.js' %>
+    <%= javascript_include_tag 'http://plugins.jquery.com/files/jquery.timers-1.2.js.txt' %>
+    <%= javascript_include_tag 'js.class-2.1.4/min/core.js' %>
+    <%= javascript_include_tag 'jqplot-0.9.7/jquery.jqplot.min.js' %>
+    <%= javascript_include_tag 'dashboard' %>
+    <%= stylesheet_link_tag 'dashboard' %>
+    <%= stylesheet_link_tag 'jquery.jqplot.min.css' %>
+    <script type='text/javascript'>
+      jQuery(document).ready(function() {
+        dashboard     = new Dashboard({basePath: '<%= @dashboard_path -%>'});
+        json_widgets  = '<%= @json_widgets -%>';
+        buildTheDashboard();
+      });
+    </script>
+    <script type='text/javascript'>
+      <%# @dashboard_js %>
+    </script>
+  </head>
+  <body>
+    <div id='dashboard'>
+      <div class='dashboard-numbers'>
+        <div class='widget-template' style='display: none;'>
+          <div class="widget-title"></div>
+          <div class="widget-data"></div>
+        </div>
+      </div>
+      <div class='dashboard-clear'></div>
+      <div class='dashboard-short-messages'>
+        <div class='widget-template' style='display: none;'>
+          <div class="widget-title"></div>
+          <div class="widget-data">
+            <ul>
+              <li class='widget-data-template' style='display: none;'></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class='dashboard-clear'></div>
+      <div class='dashboard-line-graphs'>
+        <div class='widget-template' style='display: none;'>
+          <div class='widget-data'></div>
+        </div>
+      </div>
+      <div class='dashboard-clear'></div>
+    </div>
+  </body>
+</html>

data/lib/acts_as_dashboard/app/views/dashboards/show.html.erb ADDED Viewed

@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+  <head>
+    <style type="text/css">
+      <%# @dashboard_css %>
+    </style>
+    <%= javascript_include_tag 'http://code.jquery.com/jquery-1.4.2.min.js' %>
+    <%= javascript_include_tag 'http://plugins.jquery.com/files/jquery.timers-1.2.js.txt' %>
+    <%= javascript_include_tag 'js.class-2.1.4/min/core.js' %>
+    <%= javascript_include_tag 'jqplot-0.9.7/jquery.jqplot.min.js' %>
+    <%= javascript_include_tag 'dashboard' %>
+    <%= stylesheet_link_tag 'dashboard' %>
+    <%= stylesheet_link_tag 'jquery.jqplot.min.css' %>
+    <script type='text/javascript'>
+      jQuery(document).ready(function() {
+        dashboard     = new Dashboard({basePath: '<%= @dashboard_path -%>'});
+        json_widgets  = '<%= @json_widgets -%>';
+        buildTheDashboard();
+      });
+    </script>
+    <script type='text/javascript'>
+      <%# @dashboard_js %>
+    </script>
+  </head>
+  <body>
+    <div id='dashboard'>
+      <div class='dashboard-numbers'>
+        <div class='widget-template' style='display: none;'>
+          <div class="widget-title"></div>
+          <div class="widget-data"></div>
+        </div>
+      </div>
+      <div class='dashboard-clear'></div>
+      <div class='dashboard-short-messages'>
+        <div class='widget-template' style='display: none;'>
+          <div class="widget-title"></div>
+          <div class="widget-data">
+            <ul>
+              <li class='widget-data-template' style='display: none;'></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class='dashboard-clear'></div>
+      <div class='dashboard-line-graphs'>
+        <div class='widget-template' style='display: none;'>
+          <div class='widget-data'></div>
+        </div>
+      </div>
+      <div class='dashboard-clear'></div>
+    </div>
+  </body>
+</html>

data/lib/acts_as_dashboard/class_methods.rb ADDED Viewed

@@ -0,0 +1,58 @@
+module ActsAsDashboard
+  module ClassMethods
+    attr_reader :dashboard_config
+    def acts_as_dashboard
+      @dashboard_config = ActsAsDashboard::Config.new
+      include InstanceMethods
+      controller_name = self.to_s.underscore.sub('_controller', '').singularize
+      # Create the route for the "show" action. This will be something like:
+      #   /dashboard
+      ActionController::Routing::Routes.add_named_route(
+        'dashboard',
+        controller_name,
+        :controller => controller_name.pluralize.to_sym,
+        :action     => :show
+      )
+      # Create the route for the "widget_data" action. This will be something like:
+      #   /dashboard/widgets/*
+      ActionController::Routing::Routes.add_named_route(
+        "#{controller_name}_widgets",
+        "#{controller_name}/widgets/*path",
+        :controller => controller_name.pluralize.to_sym,
+        :action     => :widget_data
+      )
+    end
+    def dashboard_number(&block)
+      raise ArgumentError, 'A Proc must be given.' unless block_given?
+      widget = Widget.new   :type => :number
+      widget.instance_eval  &block
+      dashboard_config.add_widget widget
+    end
+    def dashboard_short_messages(&block)
+      raise ArgumentError, 'A Proc must be given.' unless block_given?
+      widget = ShortMessagesWidget.new
+      widget.instance_eval &block
+      dashboard_config.add_widget widget
+    end
+    def dashboard_line_graph(&block)
+      raise ArgumentError, 'A Proc must be given.' unless block_given?
+      widget = LineGraphWidget.new
+      widget.instance_eval &block
+      dashboard_config.add_widget widget
+    end
+  end
+end

data/lib/acts_as_dashboard/config.rb ADDED Viewed

@@ -0,0 +1,25 @@
+module ActsAsDashboard
+  class Config
+    attr_reader :widgets
+    def initialize
+      @widgets = []
+    end
+    def add_widget(widget)
+      raise ArgumentError, 'The "widget" argument must be an ActsAsDashboard::Widget.' unless widget.is_a? ActsAsDashboard::Widget
+      @widgets.push widget
+    end
+    def find_widget(name)
+      raise ArgumentError, 'The "name" argument must respond to #to_sym .' unless name.respond_to? :to_sym
+      # We specifically use #find_all here so that we can grab the last widget with that name.
+      # This allows users to define multiple widgets with the same name, and have only the last
+      # be used.
+      @widgets.find_all {|w| w.name == name.to_sym}.last
+    end
+  end
+  class WidgetNotFound < StandardError; end
+end

data/lib/acts_as_dashboard/instance_methods.rb ADDED Viewed

@@ -0,0 +1,32 @@
+module ActsAsDashboard
+  module InstanceMethods
+    def show
+      @json_widgets       = dashboard_config.widgets.map {|w| w.attributes}.to_json
+      @dashboard_path     = '/' + self.class.to_s.underscore.sub('_controller', '').singularize + '/widgets/'
+#     @dashboard_css_path = File.join(File.dirname(__FILE__), 'public', 'stylesheets', 'dashboard.css')
+#     @dashboard_css      = File.open(@dashboard_css_path).read
+#
+#     @dashboard_js_path  = File.join(File.dirname(__FILE__), 'public', 'javascripts', 'dashboard.js')
+#     @dashboard_js       = File.open(@dashboard_js_path).read
+#     render :file => File.join(File.dirname(__FILE__), 'app', 'views', 'dashboards', 'show.html.erb')
+    end
+  end
+  def widget_data
+    name    = params[:path].first
+    widget  = dashboard_config.find_widget name
+    raise WidgetNotFound, %Q(No widget named "#{name}" found.) if widget.nil?
+    render :text => widget.block.call
+  end
+  protected
+    # Make the ActsAsDashboard::Config instance variable easily accessible.
+    def dashboard_config
+      self.class.dashboard_config
+    end
+end

data/lib/acts_as_dashboard/line_graph_widget.rb ADDED Viewed

@@ -0,0 +1,68 @@
+module ActsAsDashboard
+  class LineGraphWidget < ActsAsDashboard::Widget
+    @@default_height  = '200px'
+    @@default_width   = '400px'
+    @@default_x_axis  = :numbers
+    attr_reader :height
+    attr_reader :width
+    attr_reader :line_colours
+    attr_reader :x_axis
+    def initialize(options = {})
+      options.delete :type
+      # Allow American spelling of the word "colours".
+      if options[:line_colors]
+        options[:line_colours] = options[:line_colors]
+        options.delete :line_colors
+      end
+      self.type         = :line_graph
+      self.height       = options[:height ] || @@default_height
+      self.width        = options[:width  ] || @@default_width
+      self.x_axis       = options[:x_axis ] || @@default_x_axis
+      self.line_colours = options[:line_colours]  if options[:line_colours]
+      super
+    end
+    def height=(height)
+      raise ArgumentError, 'The "height" argument must be a String.' unless height.is_a? String
+      @height = height
+    end
+    def width=(width)
+      raise ArgumentError, 'The "width" argument must be a String.' unless width.is_a? String
+      @width = width
+    end
+    def line_colours=(line_colours)
+      raise ArgumentError, 'The "line_colours" argument must be an Array of Strings.' unless line_colours.is_a? Array
+      line_colours.each {|c| raise ArgumentError, 'The "line_colours" argument must be an Array of Strings.' unless c.is_a? String}
+      @line_colours = line_colours
+    end
+    def x_axis=(type)
+      valid_types = [:dates, :numbers]
+      raise ArgumentError, %Q(The "x_axis" argument must be one of the following symbols: #{valid_types.join ', '}) unless valid_types.include? type
+      @x_axis = type
+    end
+    # Allow American spelling of the word "colours".
+    def line_colors
+      line_colours
+    end
+    def attributes
+      super.merge({
+        :height       => @height,
+        :width        => @width,
+        :line_colours => @line_colours,
+        :x_axis       => @x_axis,
+      })
+    end
+  end
+end

data/lib/acts_as_dashboard/public/javascripts/dashboard.js ADDED Viewed

@@ -0,0 +1,305 @@
+// function includeJavaScriptFile(path) {{{
+//
+// Creates a JavaScript <script> element and appends it
+// to the <head>.
+//
+function includeJavaScriptFile(path) {
+  // Ensure that we have a non-empty string.'
+  if ((typeof(path) != 'string') || (!path))
+    {return;}
+  // Ensure that we can find the <head>.
+  var head = jQuery('head');
+  if (!head)
+    {return;}
+  var element   = document.createElement('script');
+  element.type  = 'text/javascript';
+  element.src   = path;
+  head.append(element);
+  return true;
+} // }}}
+// function buildTheDashboard() {{{
+//
+// Determines which dashboard widgets to build,
+// builds them, and adds them to the DOM.
+//
+function buildTheDashboard() {
+  var parsed_widgets = jQuery.parseJSON(json_widgets);
+  jQuery.each(parsed_widgets, function(index, widget) {
+    if (widget.type == 'number')
+      {dashboard.addNumberWidget(widget);}
+    else if (widget.type == 'short_messages')
+      {dashboard.addShortMessagesWidget(widget);}
+    else if (widget.type == 'line_graph')
+      {dashboard.addLineGraphWidget(widget);}
+  });
+} // }}}
+function createUpdateTimerFor(widget) { // {{{
+  $(this).everyTime(widget.update_interval, widget.name, function() {
+    widget.updateData();
+  });
+} // }}}
+// Begin Dashboard class. {{{
+var Dashboard = new JS.Class({
+  initialize: function(options) { // {{{
+    this.basePath             = options.basePath;
+    this.numberWidgets        = new Array();
+    this.shortMessagesWidgets = new Array();
+    this.lineGraphWidgets     = new Array();
+    this.div                      = jQuery('#dashboard');
+    this.numberWidgetsDiv         = this.div.find('.dashboard-numbers');
+    this.shortMessagesWidgetsDiv  = this.div.find('.dashboard-short-messages');
+    this.lineGraphWidgetsDiv      = this.div.find('.dashboard-line-graphs');
+  }, // }}}
+  addNumberWidget: function(options) { // {{{
+    var widget      = new NumberWidget(options);
+    var templateDiv = this.numberWidgetsDiv.find('.widget-template');
+    var widgetDiv   = templateDiv.clone(false)
+      .removeClass('widget-template')
+      .addClass('number-widget')
+      .attr('id', widget.divID())
+      .appendTo(this.numberWidgetsDiv);
+    // Set the new div's title.
+    widgetDiv.find('.widget-title').html(widget.title);
+    widget.setDataDivTo(widgetDiv.find('.widget-data'));
+    widget.updateData();
+    createUpdateTimerFor(widget);
+    this.numberWidgets.push(widget);
+    widgetDiv.show();
+  }, // }}}
+  addShortMessagesWidget: function(options) { // {{{
+    var widget      = new ShortMessagesWidget(options);
+    var templateDiv = this.shortMessagesWidgetsDiv.find('.widget-template');
+    var widgetDiv   = templateDiv.clone(false)
+      .removeClass('widget-template')
+      .addClass('short-messages-widget')
+      .attr('id', widget.divID())
+      .appendTo(this.shortMessagesWidgetsDiv);
+    // Set the new div's title.
+    widgetDiv.find('.widget-title').html(widget.title);
+    widget.setDataDivTo(widgetDiv.find('.widget-data'));
+    widget.updateData();
+    createUpdateTimerFor(widget);
+    this.shortMessagesWidgets.push(widget);
+    widgetDiv.show();
+  }, // }}}
+  addLineGraphWidget: function(options) { // {{{
+    var widget      = new LineGraphWidget(options);
+    var templateDiv = this.lineGraphWidgetsDiv.find('.widget-template');
+    var widgetDiv   = templateDiv.clone(false)
+      .removeClass('widget-template')
+      .addClass('line-graph-widget')
+      .attr('id', widget.divID())
+      .appendTo(this.lineGraphWidgetsDiv);
+    // Set the new div's title.
+    widgetDiv.find('.widget-title').html(widget.title);
+    var dataDiv = widgetDiv.find('.widget-data')
+      .attr('id', widget.divID() + '-data');
+    widget.setDataDivTo(dataDiv);
+    widget.updateData();
+    // I don't know why, but setting these properties when dataDiv
+    // is initialized fails to work. They work here, though...
+    dataDiv.css('height',  widget.height)
+    dataDiv.css('width',   widget.width)
+    createUpdateTimerFor(widget);
+    this.lineGraphWidgets.push(widget);
+    widgetDiv.show();
+  } // }}}
+});
+// End Dashboard class. }}}
+// Begin DashboardWidget class. {{{
+var DashboardWidget = new JS.Class({
+  initialize: function(options) {
+    this.type             = options.type;
+    this.name             = options.name;
+    this.title            = options.title;
+    this.update_interval  = options.update_interval;
+  },
+  dataURL: function() {
+    return dashboard.basePath + this.name;
+  },
+  divID: function() {
+    return this.name + '-' + this.type + '-widget';
+  },
+  setDataDivTo: function(element) {
+    this.dataDiv = element;
+  }
+});
+// End DashboardWidget class. }}}
+// Begin NumberWidget class. {{{
+var NumberWidget = new JS.Class(DashboardWidget, {
+  initialize: function(options) {
+    options['type'] = 'number';
+    this.callSuper(options);
+  },
+  updateData: function() {
+    if (!this.dataDiv)
+      {return false;}
+    // This is needed so that the dataDiv property is accessible with jQuery.get() .
+    var element = this.dataDiv;
+    jQuery.get(this.dataURL(), function(data) {
+      element.fadeOut(400, function() {
+        element.html(data);
+        element.fadeIn();
+      });
+    }, 'text');
+  }
+});
+// End NumberWidget class. }}}
+// Begin ShortMessagesWidget class. {{{
+var ShortMessagesWidget = new JS.Class(DashboardWidget, {
+  initialize: function(options) {
+    options['type'] = 'short_messages';
+    this.callSuper(options);
+    this.maxDataItems = 5;
+  },
+  firstDataItem: function() {
+    return this.dataDiv.find('li.widget-data-item:first');
+  },
+  dataItemsCount: function() {
+    return this.dataDiv.find('li.widget-data-item').length;
+  },
+  createDataItem: function() {
+    return this.dataDiv.find('li.widget-data-template')
+      .clone(false)
+      .removeClass('widget-data-template')
+      .addClass('widget-data-item');
+  },
+  updateData: function() {
+    if (!this.dataDiv)
+      {return false;}
+    var new_data  = '';
+    var new_li    = this.createDataItem();
+    // We use ajax() instead of get() because the "async" option must
+    // be false. If it isn't, we're unable to determine if data was
+    // obtained.
+    var get_result = jQuery.ajax({
+      url:      this.dataURL(),
+      type:     'GET',
+      async:    false,
+      cache:    false,
+      dataType: 'text',
+      timeout:  this.updateInterval,
+      success:  function(data) {
+        new_li.html(data);
+        new_data = data;
+      }
+    });
+    // If no data was obtained, return. Otherwise, an empty list item
+    // will be shown.
+    if (new_data == '')
+      {return false;}
+    new_li.appendTo(this.dataDiv.find('ul'));
+    // Hide the first list item if we've reached the maximum number of
+    // list items to show in this widget.
+    if (this.dataItemsCount() > this.maxDataItems) {
+      var firstDataItem = this.firstDataItem();
+      firstDataItem.slideUp(400, function() {
+        firstDataItem.remove();
+      });
+    }
+    new_li.slideDown();
+  }
+});
+// End ShortMessagesWidget class. }}}
+// Begin LineGraphWidget class. {{{
+var LineGraphWidget = new JS.Class(DashboardWidget, {
+  initialize: function(options) {
+    this.height         = options.height;
+    this.width          = options.width;
+    this.seriesColours  = options.line_colours;
+    this.x_axis         = options.x_axis;
+    options.type  = 'line_graph';
+    this.callSuper(options);
+  },
+  updateData: function() {
+    if (!this.graph)
+      {this.createGraph();}
+    // This is needed so that the dataDiv property is accessible with jQuery.get() .
+    var graph = this.graph;
+    jQuery.get(this.dataURL(), function(data) {
+      graph.series[0].data = data;
+      graph.replot({resetAxes: true});
+    }, 'json');
+  },
+  createGraph: function() {
+    includeJavaScriptFile('/javascripts/jqplot-0.9.7/plugins/jqplot.dateAxisRenderer.min.js');
+    var x_axis_format = {};
+    if (this.x_axis === 'dates') {
+      var x_axis_format = {
+        renderer:     jQuery.jqplot.DateAxisRenderer,
+        tickOptions:  {formatString: '%Y-%m-%d'}
+      }
+    }
+    this.graph = jQuery.jqplot(this.dataDiv.attr('id'), [ [] ], {
+      title:        this.title,
+      seriesColors: this.seriesColours,
+      axes:         {
+                      xaxis: x_axis_format
+                    }
+    });
+  }
+});
+// End LineGraphWidget class. }}}

data/lib/acts_as_dashboard/public/stylesheets/dashboard.css ADDED Viewed

@@ -0,0 +1,66 @@
+body {
+  background-color: black;
+  color: white;
+}
+.dashboard-clear {
+  clear: both;
+}
+#dashboard {
+  width: 100%;
+}
+  #dashboard .widget {
+  }
+  #dashboard .dashboard-numbers {
+  }
+    #dashboard .dashboard-numbers .number-widget {
+      float:      left;
+      padding:    0.5em;
+      margin:     1em;
+      text-align: center;
+    }
+      #dashboard .dashboard-numbers .number-widget .widget-title {
+        font-weight:  bold;
+        font-size:    1em;
+      }
+      #dashboard .dashboard-numbers .number-widget .widget-data {
+        font-size:    4em;
+      }
+  /* dashboard-short-message is not complete */
+  #dashboard .dashboard-short-messages {
+  }
+    #dashboard .dashboard-short-messages .short-messages-widget {
+      float:  left;
+      margin: 1em;
+    }
+      #dashboard .dashboard-short-messages .short-messages-widget .widget-title {
+        border:       2px solid white;
+        padding:      0.5em;
+        text-align:   center;
+        font-weight:  bold;
+      }
+      #dashboard .dashboard-short-messages .short-messages-widget .widget-data {
+        margin:   0;
+        padding:  0;
+      }
+        #dashboard .dashboard-short-messages .short-messages-widget .widget-data ul {
+          margin:   0;
+          padding:  0;
+        }
+          #dashboard .dashboard-short-messages .short-messages-widget .widget-data li {
+            border:           1px solid white;
+            margin-top:       4px;
+            padding:          0.5em;
+            list-style-type:  none;
+            font-size:        0.8em;
+          }
+  #dashboard .dashboard-line-graphs {
+  }
+    #dashboard .dashboard-line-graphs .line-graph-widget {
+      float:  left;
+      margin: 1em;
+    }