More ProductDashboard work

7 files changed, 290 insertions, 644 deletions

diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard.html.tmpl
index daf0ea6df..6ae515f34 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard.html.tmpl
@@ -8,19 +8,36 @@
 
 [% PROCESS global/variables.none.tmpl %]
 
+[% javascript_urls = [ "js/util.js", "js/field.js" ] %]
+
+[% IF current_tab_name == 'summary' %]
+  [% javascript_urls.push("extensions/ProductDashboard/web/js/summary.js") %]
+  [% ELSIF current_tab_name == 'recents' %]
+  [% yui = [ "calendar" ] %]
+  [% javascript_urls.push("js/field.js") %]
+  [% javascript_urls.push("js/util.js") %]
+  [% javascript_urls.push("extensions/ProductDashboard/web/js/recents.js") %]
+[% ELSIF current_tab_name == 'components' %]
+  [% javascript_urls.push("extensions/ProductDashboard/web/js/components.js") %]
+[% ELSIF current_tab_name == 'duplicates' %]
+  [% javascript_urls.push("extensions/ProductDashboard/web/js/duplicates.js") %]
+[% ELSIF current_tab_name == 'popularity' %]
+  [% javascript_urls.push("extensions/ProductDashboard/web/js/popularity.js") %]
+[% ELSIF current_tab_name == 'roadmap' && Param('usetargetmilestone') %]
+  [% javascript_urls.push("extensions/ProductDashboard/web/js/roadmap.js") %]
+[% END %]
+
 [% filtered_product = product.name FILTER html %]
 [% PROCESS global/header.html.tmpl
   title = "Product Dashboard: $filtered_product"
   style_urls = [ "skins/standard/buglist.css",
                  "js/yui/assets/skins/sam/paginator.css",
                  "extensions/ProductDashboard/web/styles/productdashboard.css" ]
-  yui = [ "datatable", "paginator", "calendar" ]
-  javascript_urls = [ "js/util.js", "js/field.js",
-                      "extensions/ProductDashboard/web/js/productdashboard.js" ]
 %]
 
 <script type="text/javascript">
 <!--
+  PD = {};
   [%# Set up severities list for proper sorting %]
   PD.severities = new Array();
   [% sort_count = 0 %]
@@ -96,7 +113,7 @@
   [% bug_link = bug_link_closed %]
 [% END %]
 
-<div class="yui-skin-sam">
+<div class="yui3-skin-sam">
   <a name="top"></a>
 
   <form action="page.cgi" method="get">
diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard/components.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard/components.html.tmpl
index 0d2ac5e6f..8f3703770 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard/components.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard/components.html.tmpl
@@ -8,259 +8,139 @@
 
 [% IF summary.keys %]
 
-  <h3>Summary for [% summary.type FILTER html %]: [% summary.value FILTER html %]</h3>
+<h3>Summary for [% summary.type FILTER html %]: [% summary.value FILTER html %]</h3>
 
-  <style>
-    .yui-skin-sam .yui-dt table {width:100%;}
-  </style>
-
-  <script type="text/javascript">
-  <!--
-  PD.options = {
-    paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false })
-  };
-  PD.column_defs = [
-    { key:"id", label:"ID", sortable:true, sortOptions:{ sortFunction: PD.sortBugIdLinks } },
-    { key:"bug_status", label:"Status", sortable:true },
-    { key:"version", label:"Version", sortable:true },
-    { key:"component", label:"Component", sortable:true },
-    { key:"bug_severity", label:"Severity", sortable:true, sortOptions:{ sortFunction: PD.sortBugSeverity } },
-    { key:"Summary", label:"Summary", sortable:false },
-  ];
-  PD.fields = [
-    { key:"id" },
-    { key:"bug_status" },
-    { key:"version" },
-    { key:"component" },
-    { key:"bug_severity" },
-    { key:"Summary" }
-  ];
+<script>
+<!--
+  // Past due bugs
   [% IF user.is_timetracker %]
-    PD.addStatListener("past_due", "past_due_table", PD.column_defs, PD.fields, PD.options);
+    PD.past_due = [
+    [% FOREACH bug = summary.past_due %]
+      { 
+        id: '[% bug.id FILTER js %]',
+        bug_status: '[% bug.status FILTER js %]', 
+        version: '[% bug.version FILTER js %]',
+        component: '[% bug.component FILTER js %]', 
+        severity: '[% bug.severity FILTER js %]',
+        summary: '[% bug.summary FILTER js %]'
+      }, 
+    [% END %] 
+    ];
   [% END %]
-  PD.addStatListener("updated_recently", "updated_recently_table", PD.column_defs, PD.fields, PD.options);
-  -->
-  </script>
 
-  [% IF user.is_timetracker %]
-    <p>
-      <a href="#past_due">Past Due</a> |
-      <a href="#updated_recently">Updated Recently</a> 
-    </p>
+  // Bugs updated recently
+  PD.updated_recently = [
+  [% FOREACH bug = summary.updated_recently %]
+    { 
+      id: '[% bug.id FILTER js %]',
+      bug_status: '[% bug.status FILTER js %]', 
+      version: '[% bug.version FILTER js %]',
+      component: '[% bug.component FILTER js %]', 
+      severity: '[% bug.severity FILTER js %]',
+      summary: '[% bug.summary FILTER js %]'
+    }, 
   [% END %]
+  ];
+-->
+</script>
+
+[% IF user.is_timetracker %]
+  <p>
+    <a href="#past_due">Past Due</a> |
+    <a href="#updated_recently">Updated Recently</a> 
+  </p>
+[% END %]
 
-  <div class="yui-skin-sam">
+<div class="yui3-skin-sam">
 
-    [% IF user.is_timetracker %]
-      <a name="past_due"></a>
-      <b>[% summary.past_due.size FILTER html %] Past Due [% terms.Bugs %]</b> (deadline is before today's date)
-      (<a href="[% bug_link FILTER html %]&amp;[% summary.type FILTER uri %]=[% summary.value FILTER uri %]&field0-0-0=deadline&type0-0-0=lessthan&value0-0-0=[% summary.timestamp FILTER uri %]&order=deadline">full list</a>)
-      <div id="past_due">
-        <table id="past_due_table" cellspacing="3" cellpadding="0" border="0" width="100%">
-        <thead>
-            <tr bgcolor="#CCCCCC">
-              [% FOREACH column = [ "ID", "Status", "Version", "Component", "Severity" "Summary" ] %]
-                <th>[% column FILTER html %]</th>
-              [% END %]
-            </tr>
-        </thead>
-        <tbody>
-        [% FOREACH bug = summary.past_due %]
-          [% count = loop.count() %]
-          <tr class="[%+ count % 2 == 1 ? "bz_row_odd" : "bz_row_even" -%]">
-            <td align="center"><a href="[% urlbase FILTER none %]show_bug.cgi?id=[% bug.id FILTER uri %]">
-              [% bug.id FILTER html %]</a></td>
-            <td align="center">[% bug.status FILTER html %]</td>
-            <td align="center">[% bug.version FILTER html %]</td>
-            <td align="center">[% bug.component FILTER html %]</td>
-            <td align="center">[% bug.severity FILTER html %]</td>
-            <td>[% bug.summary FILTER html %]</td>
-          </tr>
-        [% END %]
-        </tbody>
-        </table>
-      </div>
-      <br>
-    [% END %]
+  [% IF user.is_timetracker %]
+    <a name="past_due"></a>
+    <b>[% summary.past_due.size FILTER html %] Past Due [% terms.Bugs %]</b> (deadline is before today's date)
+    (<a href="[% bug_link FILTER html %]&amp;[% summary.type FILTER uri %]=[% summary.value FILTER uri %]&field0-0-0=deadline&type0-0-0=lessthan&value0-0-0=[% summary.timestamp FILTER uri %]&order=deadline">full list</a>)
+    <div id="past_due"></div>
+    <br>
+  [% END %]
 
-    <a name="updated_recently"></a>
-    <b>[% summary.updated_recently.size FILTER html %] Most Recently Updated [% terms.Bugs %]</b>
-    [% IF user.is_timetracker %](<a href="#top">back to top</a>)[% END %]
-    (<a href="[% bug_link FILTER html %]&amp;[% summary.type FILTER uri %]=[% summary.value FILTER uri %]&order=changeddate DESC">full list</a>)
-    <div id="updated_recently">
-      <table id="updated_recently_table" cellspacing="3" cellpadding="0" border="0" width="100%">
-      <thead>
-          <tr bgcolor="#CCCCCC">
-            [% FOREACH column = [ "ID", "Status", "Version", "Component", "Severity" "Summary" ] %]
-              <th>[% column FILTER html %]</th>
-            [% END %]
-          </tr>
-      </thead>
-      <tbody>
-      [% FOREACH bug = summary.updated_recently %]
-        [% count = loop.count() %]
-        <tr class="[%+ count % 2 == 1 ? "bz_row_odd" : "bz_row_even" -%]">
-          <td align="center"><a href="[% urlbase FILTER none %]show_bug.cgi?id=[% bug.id FILTER uri %]">
-            [% bug.id FILTER html %]</a></td>
-          <td align="center">[% bug.status FILTER html %]</td>
-          <td align="center">[% bug.version FILTER html %]</td>
-          <td align="center">[% bug.component FILTER html %]</td>
-          <td align="center">[% bug.severity FILTER html %]</td>
-          <td>[% bug.summary FILTER html %]</td>
-        </tr>
-      [% END %]
-      </tbody>
-      </table>
-    </div>
-  </div>
+  <a name="updated_recently"></a>
+  <b>[% summary.updated_recently.size FILTER html %] Most Recently Updated [% terms.Bugs %]</b>
+  [% IF user.is_timetracker %](<a href="#top">back to top</a>)[% END %]
+  (<a href="[% bug_link FILTER html %]&amp;[% summary.type FILTER uri %]=[% summary.value FILTER uri %]&order=changeddate DESC">full list</a>)
+  <div id="updated_recently"></div>
+</div>
 
 [% ELSE %]
 
-  <script type="text/javascript">
-  <!--
-  PD.column_defs = [
-    { key:"name", label:"Name", sortable:true },
-    { key:"count", label:"Count", sortable:true },
-    { key:"percentage", label:"Percentage", sortable:false },
-    { key:"bug_list", label:"[% terms.Bug %] List", sortable:false }
-  ];
-  PD.fields = [
-    { key:"name" },
-    { key:"count", parser:"number" },
-    { key:"percentage" },
-    { key:"bug_list" }
+<script type="text/javascript">
+<!--
+  PD.product_name = '[% product.name FILTER js %]';
+  PD.bug_status = '[% bug_status FILTER js %]';
+
+  // Component counts 
+  PD.component_counts = [
+    [% FOREACH col = by_component %]
+      {
+        name: "[% col.0 FILTER js %]",    
+        count: [% col.1 || 0 FILTER js %],
+        percentage: [% col.2 || 0 FILTER js %], 
+        link: '<a href="[% bug_link FILTER html %]&amp;component=[% col.0 FILTER uri %]">Link</a>'
+      }, 
+    [% END %]
   ];
-  PD.addStatListener("component_counts", "component_counts_table",
-                     PD.column_defs, PD.fields,
-                     { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-  PD.addStatListener("version_counts", "version_counts_table",
-                     PD.column_defs, PD.fields,
-                     { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-  PD.addStatListener("milestone_counts", "milestone_counts_table",
-                     PD.column_defs, PD.fields,
-                     { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-  -->
-  </script>
-
-  [% summary_url = "page.cgi?id=productdashboard.html&amp;product=$url_filtered_product&bug_status=$url_filtered_status&tab=components" %]
-
-  <h3>[% terms.Bug %] counts per component, version and milestone.</h3>
-
-  <p>
-    <a href="#component">Component</a> |
-    <a href="#version">Version</a> |
-    <a href="#milestone">Milestone</a>
-  </p>
 
-  <p>Click on a value to show a list of most recently updated [% terms.bugs %].</p>
+  // Version counts
+  PD.version_counts = [
+    [% FOREACH col = by_version %]
+      {
+        name: "[% col.0 FILTER js %]",    
+        count: [% col.1 || 0 FILTER js %],
+        percentage: [% col.2 || 0 FILTER js %], 
+        link: '<a href="[% bug_link FILTER html %]&amp;version=[% col.0 FILTER uri %]">Link</a>'
+      }, 
+    [% END %]
+  ];
 
-  <div class="yui-skin-sam"> 
-    <a name="component"></a>
-    <b>Component</b>
-    <div id="component_counts">
-      <table id="component_counts_table" border="0" cellspacing="3" cellpadding="0">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Count</th>
-          <th>Percentage</th>
-          <th>[% terms.Bug %] List</th>
-        </tr>
-      </thead>
-      <tbody>
-      [% FOREACH col = by_component %]
-        <tr>
-          <td>
-            <a href="[% summary_url FILTER none %]&component=[% col.0 FILTER uri %]">
-            [% col.0 FILTER html %]</a>
-          </td>
-          <td align="right">
-            [% col.1 FILTER html %]
-          </td>
-          <td width="70%">
-            [% INCLUDE bar_graph count = col.1 %]
-          </td>
-          <td> 
-            <a href="[% bug_link FILTER html %]&amp;component=[% col.0 FILTER uri %]">View</a>
-          </td>
-        </tr>
+  [% IF Param('usetargetmilestone') %]
+    // Milestone counts
+    PD.milestone_counts = [
+      [% FOREACH col = by_milestone %]
+        {
+          name: "[% col.0 FILTER js %]",
+          count: [% col.1 || 0 FILTER js %],
+          percentage: [% col.2 || 0 FILTER js %],
+          link: '<a href="[% bug_link FILTER html %]&amp;target_milestone=[% col.0 FILTER uri %]">Link</a>'
+        },
       [% END %]
-      </tbody>
-      </table>
-    </div>
+    ];
+  [% END %]
+-->
+</script>
+
+<h3>[% terms.Bug %] counts per component, version and milestone.</h3>
+
+<p>
+  <a href="#component">Component</a> |
+  <a href="#version">Version</a> |
+  <a href="#milestone">Milestone</a>
+</p>
+
+<p>Click on a value to show a list of most recently updated [% terms.bugs %].</p>
+
+<div class="yui3-skin-sam"> 
+  <a name="component"></a>
+  <b>Component</b>
+  <div id="component_counts"></div>
+  <br>
+  <a name="version"></a>
+  <b>Version</b>
+  (<a href="#top">back to top</a>)
+  <div id="version_counts"></div>
+  [% IF Param('usetargetmilestone') %]
     <br>
-    <a name="version"></a>
-    <b>Version</b>
+    <a name="milestone"></a>
+    <b>Milestone</b>
     (<a href="#top">back to top</a>)
-    <div id="version_counts">
-      <table id="version_counts_table" border="0" cellspacing="3" cellpadding="0">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Count</th>
-          <th>Percentage</th>
-          <th>[% terms.Bug %] List</th>
-        </tr>
-      </thead>
-      <tbody>
-      [% FOREACH col = by_version %]
-        <tr>
-          <td>
-            <a href="[% summary_url FILTER none %]&version=[% col.0 FILTER uri %]">
-            [% col.0 FILTER html %]</a>
-          </td>
-          <td align="right">
-            [% col.1 FILTER html %]
-          </td>
-          <td width="70%">
-            [% INCLUDE bar_graph count = col.1 %]
-          </td>
-          <td> 
-            <a href="[% bug_link FILTER html %]&amp;version=[% col.0 FILTER uri %]">View</a>
-          </td>
-        </tr>
-      [% END %]
-      </tbody>
-      </table>
-    </div>
-
-    [% IF Param('usetargetmilestone') %]
-      <br>
-      <a name="milestone"></a>
-      <b>Milestone</b>
-      (<a href="#top">back to top</a>)
-      <div id="milestone_counts">
-        <table id="milestone_counts_table" border="0" cellspacing="3" cellpadding="0">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Count</th>
-            <th>Percentage</th>
-            <th>[% terms.Bug %] List</th>
-          </tr>
-        </thead>
-        <tbody>
-        [% FOREACH col = by_milestone %]
-          <tr>
-            <td>
-              <a href="[% summary_url FILTER none %]&target_milestone=[% col.0 FILTER uri %]">
-              [% col.0 FILTER html %]</a>
-            </td>
-            <td align="right">
-              [% col.1 FILTER html %]
-            </td>
-            <td width="70%">
-              [% INCLUDE bar_graph count = col.1 %]
-            </td>
-            <td> 
-              <a href="[% bug_link FILTER html %]&amp;target_milestone=[% col.0 FILTER uri %]">View</a>
-            </td>
-          </tr>
-        [% END %]
-        </tbody>
-        </table>
-      </div>
-    [% END %]
-  </div>
+    <div id="milestone_counts"></div>
+  [% END %]
+</div>
 
 [% END %]
diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard/duplicates.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard/duplicates.html.tmpl
index bf1cdaeb1..585cdc829 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard/duplicates.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard/duplicates.html.tmpl
@@ -6,69 +6,28 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-<style>
-  .yui-skin-sam .yui-dt table {width:100%;}
-</style>
-  
 <script type="text/javascript">
-<!--
-PD.column_defs = [
-  { key:"id", label:"ID", sortable:true, sortOptions:{ sortFunction: PD.sortBugIdLinks } },
-  { key:"count", label:"Count", sortable:true },
-  { key:"bug_status", label:"Status", sortable:true },
-  { key:"version", label:"Version", sortable:true },
-  { key:"component", label:"Component", sortable:true },
-  { key:"bug_severity", label:"Severity", sortable:true, sortOptions:{ sortFunction: PD.sortBugSeverity } },
-  { key:"Summary", label:"Summary", sortable:false },
-];
-PD.fields = [
-  { key:"id" },
-  { key:"count", parser:"number" },
-  { key:"bug_status" },
-  { key:"version" },
-  { key:"component" },
-  { key:"bug_severity" },
-  { key:"Summary" }
-];
-PD.addStatListener("duplicate_counts", "duplicate_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
--->
+  PD.duplicates = [
+    [% FOREACH bug = by_duplicate %]
+      {
+        id: '[% bug.id FILTER js %]',
+        count: '[% bug.dupe_count FILTER js %]',
+        status: '[% bug.status FILTER js %]',
+        version: '[% bug.version FILTER js %]',
+        component: '[% bug.component FILTER js %]',
+        severity: '[% bug.severity FILTER js %]',
+        summary: '[% bug.summary FILTER js %]'
+      }, 
+    [% END %]
+  ];
 </script>
 
 <h3>Most duplicated [% terms.bugs %]</h3>
 
 [% IF by_duplicate.size %]
   <b>[% by_duplicate.size FILTER html %]&nbsp;[% terms.Bugs %] Found</b>
-  <div class="yui-skin-sam">
-    <div id="duplicate_counts">
-      <table id="duplicate_counts_table" cellspacing="3" cellpadding="0" border="0" width="100%">
-      <thead>
-        <tr bgcolor="#CCCCCC">
-          [% FOREACH column = [ "ID", "Dupe Count", "Status", "Version"
-                                "Component", "Severity" "Summary" ] %]
- 
-            <th>[% column FILTER html %]</th>
-          [% END %]
-        </tr>
-      </thead>
-      <tbody>
-      [% FOREACH bug = by_duplicate %]
-        [% count = loop.count() %]
-        <tr class="[%+ count % 2 == 1 ? "bz_row_odd" : "bz_row_even" -%]">
-          <td align="center"><a href="[% urlbase FILTER none %]show_bug.cgi?id=[% bug.id FILTER uri %]">
-            [% bug.id FILTER html %]</a></td>
-          <td align="center">[% bug.dupe_count FILTER html %]</td>
-          <td align="center">[% bug.status FILTER html %]</td>
-          <td align="center">[% bug.version FILTER html %]</td>
-          <td align="center">[% bug.component FILTER html %]</td>
-          <td align="center">[% bug.severity FILTER html %]</td>
-          <td>[% bug.summary FILTER html %]</td>
-        </tr>
-      [% END %]
-      </tbody>
-      </table>
-    </div>
+  <div class="yui3-skin-sam">
+    <div id="duplicates"></div>
   </div>
 [% ELSE %]
   <b>No duplicate [% terms.bugs %] found.</b>
diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard/popularity.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard/popularity.html.tmpl
index 5ecad3426..933f26c81 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard/popularity.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard/popularity.html.tmpl
@@ -11,64 +11,27 @@
 </style>
   
 <script type="text/javascript">
-<!--
-PD.column_defs = [
-  { key:"id", label:"ID", sortable:true, sortOptions:{ sortFunction: PD.sortBugIdLinks } },
-  { key:"count", label:"Count", sortable:true },
-  { key:"bug_status", label:"Status", sortable:true },
-  { key:"version", label:"Version", sortable:true },
-  { key:"component", label:"Component", sortable:true },
-  { key:"bug_severity", label:"Severity", sortable:true, sortOptions:{ sortFunction: PD.sortBugSeverity } },
-  { key:"Summary", label:"Summary", sortable:false },
-];
-PD.fields = [
-  { key:"id" },
-  { key:"count", parser:"number" },
-  { key:"bug_status" },
-  { key:"version" },
-  { key:"component" },
-  { key:"bug_severity" },
-  { key:"Summary" }
-];
-PD.addStatListener("popularity_counts", "popularity_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
--->
+  PD.popularity = [
+    [% FOREACH bug = by_popularity %]
+      {
+        id: '[% bug.id FILTER js %]',
+        count: '[% bug.votes FILTER js %]',
+        status: '[% bug.status FILTER js %]',
+        version: '[% bug.version FILTER js %]',
+        component: '[% bug.component FILTER js %]',
+        severity: '[% bug.severity FILTER js %]',
+        summary: '[% bug.summary FILTER js %]'
+      }, 
+    [% END %]
+  ];
 </script>
 
 <h3>Most voted on [% terms.bugs %]</h3>
 
 [% IF by_popularity.size %]
   <b>[% by_popularity.size FILTER html %]&nbsp;[% terms.Bugs %] Found</b>
-  <div class="yui-skin-sam">
-    <div id="popularity_counts">
-      <table id="popularity_counts_table" cellspacing="3" cellpadding="0" border="0" width="100%">
-      <thead>  
-        <tr bgcolor="#CCCCCC">
-          [% FOREACH column = [ "ID", "Count", "Status", "Version"
-                                "Component", "Severity" "Summary" ] %]
-
-            <th>[% column FILTER html %]</th>
-          [% END %]
-        </tr>
-      </thead>
-      <tbody>
-      [% FOREACH bug = by_popularity %]
-        [% count = loop.count() %]
-        <tr class="[%+ count % 2 == 1 ? "bz_row_odd" : "bz_row_even" -%]">
-          <td align="center"><a href="[% urlbase FILTER none %]show_bug.cgi?id=[% bug.id FILTER uri %]">
-            [% bug.id FILTER html %]</a></td>
-          <td align="center">[% bug.votes FILTER html %]</td>
-          <td align="center">[% bug.status FILTER html %]</td>
-          <td align="center">[% bug.version FILTER html %]</td>
-          <td align="center">[% bug.component FILTER html %]</td>
-          <td align="center">[% bug.severity FILTER html %]</td>
-          <td>[% bug.summary FILTER html %]</td>
-        </tr>
-      [% END %]
-      </tbody>
-      </table>
-    </div>
+  <div class="yui3-skin-sam">
+    <div id="popularity"></div>
   </div>
 [% ELSE %]
   <b>No [% terms.bugs %] found.</b>
diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard/recents.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard/recents.html.tmpl
index 919a7da97..18227aec2 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard/recents.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard/recents.html.tmpl
@@ -6,36 +6,36 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-<style>
-  .yui-skin-sam .yui-dt table {width:100%;}
-</style>
-  
 <script type="text/javascript">
-<!--
-PD.column_defs = [
-  { key:"id", label:"ID", sortable:true, sortOptions:{ sortFunction: PD.sortBugIdLinks } },
-  { key:"bug_status", label:"Status", sortable:true },
-  { key:"version", label:"Version", sortable:true },
-  { key:"component", label:"Component", sortable:true },
-  { key:"bug_severity", label:"Severity", sortable:true, sortOptions:{ sortFunction: PD.sortBugSeverity } },
-  { key:"Summary", label:"Summary", sortable:false },
-];
-PD.fields = [
-  { key:"id" },
-  { key:"bug_status" },
-  { key:"version" },
-  { key:"component" },
-  { key:"bug_severity" },
-  { key:"Summary" }
-];
-PD.addStatListener("recently_opened", "recently_opened_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
+  PD.recents = {};
+  
+  // Recently opened bugs
+  PD.recents.opened = [
+    [% FOREACH bug = recently_opened %]
+      {
+        id: '[% bug.id FILTER js %]',
+        status: '[% bug.status FILTER js %]',
+        version: '[% bug.version FILTER js %]',
+        component: '[% bug.component FILTER js %]',
+        severity: '[% bug.severity FILTER js %]',
+        summary: '[% bug.summary FILTER js %]'
+      },
+    [% END %]
+  ];
 
-PD.addStatListener("recently_closed", "recently_closed_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
--->
+  // Recently closed bugs
+  PD.recents.closed = [
+    [% FOREACH bug = recently_closed %]
+      {
+        id: '[% bug.id FILTER js %]',
+        status: '[% bug.status FILTER js %]',
+        version: '[% bug.version FILTER js %]',
+        component: '[% bug.component FILTER js %]',
+        severity: '[% bug.severity FILTER js %]',
+        summary: '[% bug.summary FILTER js %]'
+      },
+    [% END %]
+  ];
 </script>
 
 <h3>Most recently opened and closed [% terms.bugs %]</h3>
@@ -50,7 +50,7 @@ PD.addStatListener("recently_closed", "recently_closed_table",
   <button type="button" class="calendar_button"
           id="button_calendar_date_from"
           onclick="showCalendar('date_from')">
-    <span>Calendar</span>
+  <span>Calendar</span>
   </button>
   <span id="con_calendar_date_from"></span>
   to 
@@ -60,7 +60,7 @@ PD.addStatListener("recently_closed", "recently_closed_table",
   <button type="button" class="calendar_button"
           id="button_calendar_date_to"
           onclick="showCalendar('date_to')">
-    <span>Calendar</span>
+  <span>Calendar</span>
   </button>
   <span id="con_calendar_date_to"></span>
   <script type="text/javascript">
@@ -78,58 +78,10 @@ PD.addStatListener("recently_closed", "recently_closed_table",
 <div class="yui-skin-sam">
   <a name="recently_opened"></a>
   <b>[% recently_opened.size FILTER html %] Recently Opened [% terms.Bugs %]</b>
-  <div id="recently_opened">
-    <table id="recently_opened_table" cellspacing="3" cellpadding="0" border="0" width="100%">
-    <thead>
-        <tr bgcolor="#CCCCCC">
-          [% FOREACH column = [ "ID", "Status", "Version", "Component", "Severity" "Summary" ] %]
-            <th>[% column FILTER html %]</th>
-          [% END %]
-        </tr>
-    </thead>
-    <tbody>
-    [% FOREACH bug = recently_opened %]
-      [% count = loop.count() %]
-      <tr class="[%+ count % 2 == 1 ? "bz_row_odd" : "bz_row_even" -%]">
-        <td align="center"><a href="[% urlbase FILTER none %]show_bug.cgi?id=[% bug.id FILTER uri %]">
-          [% bug.id FILTER html %]</a></td>
-        <td align="center">[% bug.status FILTER html %]</td>
-        <td align="center">[% bug.version FILTER html %]</td>
-        <td align="center">[% bug.component FILTER html %]</td>
-        <td align="center">[% bug.severity FILTER html %]</td>
-        <td>[% bug.summary FILTER html %]</td>
-      </tr>
-    [% END %]
-    </tbody>
-    </table>
-  </div>
+  <div id="recently_opened"></div>
   <br>
   <a name="recently_closed"></a>
   <b>[% recently_closed.size FILTER html %] Recently Closed [% terms.Bugs %]</b>
   (<a href="#top">back to top</a>)
-  <div id="recently_closed">
-    <table id="recently_closed_table" cellspacing="3" cellpadding="0" border="0" width="100%">
-    <thead>
-        <tr bgcolor="#CCCCCC">
-          [% FOREACH column = [ "ID", "Status", "Version", "Component", "Severity" "Summary" ] %]
-            <th>[% column FILTER html %]</th>
-          [% END %]
-        </tr>
-    </thead>
-    <tbody>
-    [% FOREACH bug = recently_closed %]
-      [% count = loop.count() %]
-      <tr class="[%+ count % 2 == 1 ? "bz_row_odd" : "bz_row_even" -%]">
-        <td align="center"><a href="[% urlbase FILTER none %]show_bug.cgi?id=[% bug.id FILTER uri %]">
-          [% bug.id FILTER html %]</a></td>
-        <td align="center">[% bug.status FILTER html %]</td>
-        <td align="center">[% bug.version FILTER html %]</td>
-        <td align="center">[% bug.component FILTER html %]</td>
-        <td align="center">[% bug.severity FILTER html %]</td>
-        <td>[% bug.summary FILTER html %]</td>
-      </tr>
-    [% END %]
-    </tbody>
-    </table>
-  </div>
+  <div id="recently_closed"></div>
 </div>
diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard/roadmap.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard/roadmap.html.tmpl
index 1597b7a36..48f96499d 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard/roadmap.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard/roadmap.html.tmpl
@@ -8,50 +8,20 @@
 
 <script type="text/javascript">
 <!--
-PD.column_defs = [
-  { key:"milestone", label:"Milestone", sortable:true },
-  { key:"percentage complete", label:"Percentage Complete", sortable:false },
-  { key:"links", label:"Links", sortable:false }, 
-];
-PD.fields = [
-  { key:"milestone" },
-  { key:"percentage complete" },
-  { key:"links" }
-];
-PD.addStatListener("bug_milestones", "bug_milestones_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
+  PD.roadmap = [
+  [% FOREACH milestone = by_roadmap %]
+    {
+      name: '[% milestone.name FILTER js %]',
+      percentage: '[% milestone.percentage FILTER js %]',
+      link: '<a href="[% milestone.link_closed FILTER html %]">[% milestone.closed_bugs FILTER html %]</a> of <a href="[% milestone.link_total FILTER html %]"> [% milestone.total_bugs FILTER html %]</a> bugs have been closed',
+    },
+  [% END %]
+  ];
 -->
 </script>
 
 <h3>Percentage of [% terms.bug %] closure per milestone</h3>
 
-<div class="yui-skin-sam">
-<div id="bug_milestones">
-  <table id="bug_milestones_table" border="0" cellspacing="3" cellpadding="0">
-    <thead>
-      <tr>
-        <th>Milestone</th>
-        <th>Percentage Complete</th>
-        <th>Links</th>
-      </tr>
-    </thead>
-    <tbody>
-      [% FOREACH milestone = by_roadmap %]
-      <tr>
-        <td>[% milestone.name FILTER html %]</td>
-        <td width="70%">
-        [% INCLUDE bar_graph count = milestone.closed_bugs full_bug_count = milestone.total_bugs %]
-        </td>
-        <td>
-          <a href="[% milestone.link_closed FILTER html %]">
-            [% milestone.closed_bugs FILTER html %]</a>&nbsp;of&nbsp;
-          <a href="[% milestone.link_total FILTER html %]">
-            [% milestone.total_bugs FILTER html %]</a>&nbsp;bugs have been closed
-        </td>
-      </tr>
-      [% END %]
-    </tbody>
-    </table>
-  </div>
+<div class="yui3-skin-sam">
+  <div id="bug_milestones"></div>
 </div>
diff --git a/extensions/ProductDashboard/template/en/default/pages/productdashboard/summary.html.tmpl b/extensions/ProductDashboard/template/en/default/pages/productdashboard/summary.html.tmpl
index a7398c823..e454ee8e8 100644
--- a/extensions/ProductDashboard/template/en/default/pages/productdashboard/summary.html.tmpl
+++ b/extensions/ProductDashboard/template/en/default/pages/productdashboard/summary.html.tmpl
@@ -6,34 +6,79 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-<script type="text/javascript">
-<!--
-PD.column_defs = [
-  { key:"name", label:"Name", sortable:true },
-  { key:"count", label:"Count", sortable:true },
-  { key:"percentage", label:"Percentage", sortable:false }
-];
-PD.fields = [
-  { key:"name" },
-  { key:"count", parser:"number" },
-  { key:"percentage" }
-];
-PD.addStatListener("bug_counts", "bug_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-PD.addStatListener("status_counts", "status_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-PD.addStatListener("priority_counts", "priority_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-PD.addStatListener("severity_counts", "severity_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
-PD.addStatListener("assignee_counts", "assignee_counts_table",
-                   PD.column_defs, PD.fields,
-                   { paginator: new YAHOO.widget.Paginator({ rowsPerPage: 25, alwaysVisible: false }) });
--->
+<script>
+  PD.summary = {};
+
+  // Bug counts
+  PD.summary.bug_counts = [
+    { 
+      name: "Total [% terms.Bugs %]",
+      count: [% total_bugs || 0 FILTER js %],
+      percentage: 100, 
+      link: '<a href="[% bug_link_all FILTER js %]">Link</a>', 
+    }, 
+    {
+      name: "Open [% terms.Bugs %]",
+      count: [% total_open_bugs || 0 FILTER js %],
+      percentage: [% open_bugs_percentage FILTER js %],
+      link: '<a href="[% bug_link_open FILTER js %]">Link</a>', 
+    },
+    {
+      name: "Closed [% terms.Bugs %]", 
+      count: [% total_closed_bugs || 0 FILTER js %],
+      percentage: [% closed_bugs_percentage FILTER js %],
+      link: '<a href="[% bug_link_closed FILTER js %]">Link</a>',
+    }
+  ];
+  
+  // Status counts
+  PD.summary.status_counts = [
+    [% FOREACH col = by_status %]
+      [% NEXT IF col.0 == 'CLOSED' %]
+      {
+        name: "[% col.0 FILTER js %]",    
+        count: [% col.1 || 0 FILTER js %],
+        percentage: [% col.2 || 0 FILTER js %], 
+        link: '<a href="[% bug_link_all FILTER js %]&amp;bug_status=[% col.0 FILTER uri FILTER js %]">Link</a>'
+      }, 
+    [% END %]
+  ];
+
+  // Priority counts
+  PD.summary.priority_counts = [
+    [% FOREACH col = by_priority %]
+      {
+        name: "[% col.0 FILTER js %]",    
+        count: [% col.1 || 0 FILTER js %],
+        percentage: [% col.2 || 0 FILTER js %], 
+        link: '<a href="[% bug_link_all FILTER js %]&amp;priority=[% col.0 FILTER uri FILTER js %]">Link</a>'
+      }, 
+    [% END %]
+  ];
+
+  // Severity counts
+  PD.summary.severity_counts = [
+    [% FOREACH col = by_severity %]
+      {
+        name: "[% col.0 FILTER js %]",    
+        count: [% col.1 || 0 FILTER js %],
+        percentage: [% col.2 || 0 FILTER js %], 
+        link: '<a href="[% bug_link_all FILTER js %]&amp;bug_severity=[% col.0 FILTER uri FILTER js %]">Link</a>'
+      }, 
+    [% END %]
+  ];
+
+  // Assignee counts
+  PD.summary.assignee_counts = [
+    [% FOREACH col = by_assignee %]
+      {
+        name: "[% IF user.id %][% col.0.email FILTER js %][% ELSE %][% col.0.realname || 'No Name' FILTER js %][% END %]",
+        count: [% col.1 || 0 FILTER js %],
+        percentage: [% col.2 || 0 FILTER js %],
+        link: '[% IF user.id %]<a href="[% bug_link FILTER js %]&amp;emailassigned_to1=1&amp;emailtype1=exact&amp;email1=[% col.0.email FILTER uri FILTER js %]">Link</a>[% END %]'
+      },
+    [% END %]
+  ];
 </script>
 
 <h3>Summary of [% terms.bug %] counts</h3>
@@ -50,168 +95,28 @@ PD.addStatListener("assignee_counts", "assignee_counts_table",
   <a href="#assignee">Assignee</a>
 </p>
 
-<div class="yui-skin-sam">
+<div class="yui3-skin-sam">
   <a name="counts"></a>
   <b>[% terms.Bug %] Counts</b>
-  <div id="bug_counts">
-    <table id="bug_counts_table" border="0" cellspacing="3" cellpadding="0">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Count</th>
-        <th>Percentage</th>
-      </tr>
-    </thead>
-    <tbody>
-    <tr>
-      <td><a href="[% bug_link_all FILTER html %]">Total [% terms.Bugs %]</a></td>
-      <td>[% total_bugs FILTER html %]</td>
-      <td>&nbsp;</td>
-    </tr>
-    <tr>
-      <td><a href="[% bug_link_open FILTER html %]">Open [% terms.Bugs %]</a></td>
-      <td>[% total_open_bugs FILTER html %]</td>
-      <td width="70%">
-        [% INCLUDE bar_graph count = total_open_bugs full_bug_count = total_bugs %]
-      </td>
-    </tr>
-    <tr>
-      <td><a href="[% bug_link_closed FILTER html %]">Closed [% terms.Bugs %]</a></td>
-      <td>[% total_closed_bugs FILTER html %]</td>
-      <td width="70%">
-        [% INCLUDE bar_graph count = total_closed_bugs full_bug_count = total_bugs %]
-      </td>
-    </tr>
-    </tbody>
-    </table>
-  </div>
+  <div id="bug_counts"></div>
   <br>
   <a name="status"></a>
   <b>Status</b>
   (<a href="#top">back to top</a>)
-  <div id="status_counts">
-    <table id="status_counts_table" border="0" cellspacing="3" cellpadding="0">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Count</th>
-        <th>Percentage</th>
-      </tr>
-    </thead>
-    <tbody> 
-    [% FOREACH col = by_status %]
-      [% NEXT IF col.0 == 'CLOSED' %]
-      <tr>
-        <td>
-          <a href="[% bug_link_all FILTER html %]&amp;bug_status=[% col.0 FILTER uri %]">
-          [% col.0 FILTER html %]</a>
-        </td>
-        <td>
-          [% col.1 FILTER html %]
-        </td>
-        <td width="70%">
-          [% INCLUDE bar_graph count = col.1 %]
-        </td>
-      </tr>
-    [% END %]
-    </tbody>
-    </table>
-  </div>
+  <div id="status_counts"></div>
   <br>
   <a name="priority"></a>
   <b>Priority</b>
   (<a href="#top">back to top</a>)
-  <div id="priority_counts">
-    <table id="priority_counts_table" border="0" cellspacing="3" cellpadding="0">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Count</th>
-        <th>Percentage</th>
-      </tr>
-    </thead>
-    </tbody>
-    [% FOREACH col = by_priority %]
-      <tr>
-        <td>
-          <a href="[% bug_link FILTER html %]&amp;priority=[% col.0 FILTER uri %]">
-          [% col.0 FILTER html %]</a>
-        </td>
-        <td>
-          [% col.1 FILTER html %]
-        </td>
-        <td width="70%">
-          [% INCLUDE bar_graph count = col.1 %]
-        </td>
-      </tr>
-    [% END %]
-    </tbody>
-    </table>
-  </div>
+  <div id="priority_counts"></div>
   <br>
   <a name="severity"></a>
   <b>Severity</b>
   (<a href="#top">back to top</a>)
-  <div id="severity_counts">
-    <table id="severity_counts_table" border="0" cellspacing="3" cellpadding="0">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Count</th>
-        <th>Percentage</th>
-      </tr>
-    </thead>
-    <tbody>
-    [% FOREACH col = by_severity %]
-      <tr>
-        <td>
-          <a href="[% bug_link FILTER html %]&amp;bug_severity=[% col.0 FILTER uri %]">
-          [% col.0 FILTER html %]</a>
-        </td>
-        <td align="right">
-          [% col.1 FILTER html %]
-        </td>
-        <td width="70%">
-          [% INCLUDE bar_graph count = col.1 %]
-        </td>
-      </tr>
-    [% END %]
-    </tbody>
-    </table>
-  </div>
+  <div id="severity_counts"></div>
   <br>
   <a name="assignee"></a>
   <b>Assignee</b>
   (<a href="#top">back to top</a>)
-  <div id="assignee_counts">
-    <table id="assignee_counts_table" border="0" cellspacing="3" cellpadding="0">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Count</th>
-        <th>Percentage</th>
-      </tr>
-    </thead>
-    <tbody>
-    [% FOREACH col = by_assignee %]
-      <tr>
-        <td>
-          [% IF user.id %]
-            <a href="[% bug_link FILTER html %]&amp;emailassigned_to1=1&amp;emailtype1=exact&amp;email1=[% col.0.email FILTER uri %]">
-            [% col.0.email FILTER html %]</a>
-          [% ELSE %]
-            [% col.0.realname || "No Name" FILTER html %]
-          [% END %]
-        </td>
-        <td>
-          [% col.1 FILTER html %]
-        </td>
-        <td width="70%">
-          [% INCLUDE bar_graph count = col.1 %]
-        </td>
-      </tr>
-    [% END %]
-    </tbody>
-    </table>
-  </div>
+  <div id="assignee_counts"></div>
 </div>