[Jifty-commit] r3794 - in jifty/trunk: .
lib/Jifty/Plugin/Chart/Renderer
share/plugins/Jifty/Plugin/Chart/web/static/css
share/plugins/Jifty/Plugin/Chart/web/static/js
jifty-commit at lists.jifty.org
jifty-commit at lists.jifty.org
Sun Aug 5 17:24:30 EDT 2007
Author: sterling
Date: Sun Aug 5 17:24:28 2007
New Revision: 3794
Added:
jifty/trunk/lib/Jifty/Plugin/Chart/Renderer/SimpleBars.pm
jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/css/
jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/css/simple_bars.css
jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/js/simple_bars.js
Modified:
jifty/trunk/ (props changed)
jifty/trunk/lib/Jifty/Plugin/Chart/ (props changed)
Log:
r8386 at dynpc145: andrew | 2007-08-05 16:23:50 -0500
Adding the SimpleBars renderer as a decent, dead-simple HTML-based renderer for HorizontalBars and a prototype for using tables for client-side chart configuration.
Added: jifty/trunk/lib/Jifty/Plugin/Chart/Renderer/SimpleBars.pm
==============================================================================
--- (empty file)
+++ jifty/trunk/lib/Jifty/Plugin/Chart/Renderer/SimpleBars.pm Sun Aug 5 17:24:28 2007
@@ -0,0 +1,109 @@
+use strict;
+use warnings;
+
+package Jifty::Plugin::Chart::Renderer::SimpleBars;
+use base qw/ Jifty::Plugin::Chart::Renderer /;
+
+=head1 NAME
+
+Jifty::Plugin::Chart::Renderer::SimpleBars - a simple horizontal bar chart
+
+=head1 DESCRIPTION
+
+This is a simple renderer for charts created both as a dead simple way of rendering horizontal bar charts, which can be a very simple way of rendering data, and as a prototype for some other work I'm thinking of doing with the chart plugin.
+
+=head1 OPTIONS
+
+Of the rendering API, this only uses the first dataset given and ignores any others. It also fails if used for any type other than the only one it supports "horizontalbars".
+
+It takes the following options:
+
+=over
+
+=item summary
+
+To maximize the accessibility of your chart, set this to describe the data. This will set the table's summary attribute.
+
+=back
+
+=head1 STYLING
+
+Please be aware that when using this object, you must add background color to the application CSS file to see the bars.
+
+ div.simple_bars span.bar {
+ background-color: black;
+ }
+
+=head1 METHODS
+
+=head2 init
+
+Tell Jifty about the CSS and JS files SimpleBars needs.
+
+=cut
+
+sub init {
+ Jifty->web->add_javascript('simple_bars.js');
+ Jifty->web->add_css('simple_bars.css');
+}
+
+=head2 render
+
+Renders a horizontal bar chart. This is done by rendering a table of HTML values, which is then converted to a bar chart by the Javascript added to the response during L</init>.
+
+If JavaScript is not supported by the browser, all the data is presented ina table. They can still read the data, but just not in the most readable form.
+
+=cut
+
+sub render {
+ my $self = shift;
+ my %args = @_;
+
+ # We only handle horizontalbars, fail on all else
+ if ($args{type} ne 'horizontalbars') {
+ die 'Sorry, SimpleBars charts only handle horizontalbars chart types.';
+ }
+
+ # Create a fresh ID for the chart
+ my $chart_id = 'chart_' . Jifty->web->serial;
+
+ # Add the simple_bars class for the JavaScript to find
+ push @{ $args{class} }, 'simple_bars';
+
+ # Build the table
+ my $table;
+ $table = qq{<table id="$chart_id"};
+ $table .= qq{ class="@{[ join ' ', @{ $args{class} } ]}"};
+ $table .= qq{ summary="$args{summary}"} if $args{summary};
+ $table .= qq{/><tbody>};
+
+ for my $index (0 .. $#{ $args{data}[0] }) {
+ my $label = $args{data}[0][$index];
+ my $point = $args{data}[1][$index];
+
+ $table .= '<tr>';
+ $table .= "<td>@{[ Jifty->web->escape($label) ]}</td>";
+ $table .= "<td>@{[ Jifty->web->escape($point) ]}</td>";
+ $table .= '</tr>';
+ }
+
+ $table .= '</tbody></table>';
+
+ Jifty->web->out($table);
+
+ return;
+}
+
+=head1 AUTHOR
+
+Andrew Sterling Hanenkamp, C<< <andrew.hanenkamp at boomer.com> >>
+
+=head1 COPYRIGHT AND LICENSE
+
+Copyright 2007 Boomer Consulting, Inc.
+
+This is free software. You may modify and redistribute it under the same terms as Perl itself.
+
+=cut
+
+1
Added: jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/css/simple_bars.css
==============================================================================
--- (empty file)
+++ jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/css/simple_bars.css Sun Aug 5 17:24:28 2007
@@ -0,0 +1,31 @@
+div.simple_bars div.row {
+ position: relative;
+ padding: 3px 1%;
+ width: 100%;
+ overflow: auto;
+}
+
+div.simple_bars div.row span.label {
+ display: block;
+ float: left;
+ width: 30%;
+ overflow: hidden;
+}
+
+div.simple_bars div.row span.barArea {
+ display: block;
+ float: left;
+ width: 60%;
+ overflow: hidden;
+}
+
+div.simple_bars div.row span.barArea span.bar {
+ display: block;
+}
+
+div.simple_bars div.row span.value {
+ display: block;
+ float: left;
+ width: 8%;
+ text-align: right;
+}
Added: jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/js/simple_bars.js
==============================================================================
--- (empty file)
+++ jifty/trunk/share/plugins/Jifty/Plugin/Chart/web/static/js/simple_bars.js Sun Aug 5 17:24:28 2007
@@ -0,0 +1,69 @@
+/*
+ * $Id$
+ * simple_bars.js
+ * by Andrew Sterling Hanenkamp
+ *
+ * Copyright 2007 Boomer Consulting, Inc.
+ *
+ * A custom and extremely simple way of rendering a horizontal bar chart. This
+ * code was custom built for use with Jifty, but could be reused elsewhere.
+ *
+ * This is free software. You may modify or redistribute this code under the
+ * terms of the GNU General Public License or the Artistic license.
+ */
+
+function SimpleBars(table) {
+ var dataset = $H();
+
+ for (var i = 0; i < table.tBodies[0].rows.length; i++) {
+ var table_row = table.tBodies[0].rows[i];
+ dataset[table_row.cells[0].innerHTML] = table_row.cells[1].innerHTML;
+ }
+
+ var max_value = 0;
+ dataset.values().each(function(v,i){max_value=Math.max(max_value, v);});
+
+ var simple_bars = document.createElement('div');
+ simple_bars.id = table.id;
+ simple_bars.className = table.className;
+
+ dataset.keys().each(function(k, i) {
+ var v = dataset[k];
+
+ var row = document.createElement('div');
+ row.className = 'row';
+
+ var row_label = document.createElement('span');
+ row_label.className = 'label';
+ row_label.innerHTML = k;
+ row.appendChild(row_label);
+
+ var row_bar_area = document.createElement('span');
+ row_bar_area.className = 'barArea';
+ row.appendChild(row_bar_area);
+
+ var row_bar = document.createElement('span');
+ row_bar.className = 'bar';
+ row_bar.style.width = Math.round( 100 * v / max_value ) + '%';
+ row_bar.innerHTML = ' ';
+ row_bar_area.appendChild(row_bar);
+
+ var row_value = document.createElement('span');
+ row_value.className = 'value';
+ row_value.innerHTML = v;
+ row.appendChild(row_value);
+
+ simple_bars.appendChild(row);
+ });
+
+ table.parentNode.insertBefore(simple_bars, table);
+ table.parentNode.removeChild(table);
+
+ return this;
+}
+
+Behaviour.register({
+ 'table.simple_bars': function(table) {
+ new SimpleBars(table);
+ }
+});
More information about the Jifty-commit
mailing list