Added CSS to set background color and bold font for subtotal rows and…

… columns
nagarajanchinnasamy · Aug 3, 2016 · 874b8d5 · 874b8d5
1 parent 15bda1b
commit 874b8d5
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 4 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -37,9 +37,9 @@
     </div>
         <div align="center">
         <h2>Subtotal.js</h2>
-        <p style="width: 600px; margin: 10px auto;"><a href="https://github.com/nagarajanchinnasamy/pivottable-subtotal-renderer">Subtotal.js</a> is an open-source JavaScript plugin for <b>PivotTable.js</b>. Subtotal.js renders rows and columns of a pivot table with subtotals and lets the user to expand and collapse rows. Its originally written by <a href="https://github.com/nagarajanchinnasamy/">Nagarajan Chinnasamy</a> at <a href="http://mindtree.com/">Mindtree</a>.</p>
+        <p style="width: 60%; margin: 2% auto;"><a href="https://github.com/nagarajanchinnasamy/pivottable-subtotal-renderer">Subtotal.js</a> is an open-source JavaScript plugin for <b>PivotTable.js</b>. Subtotal.js renders rows and columns of a pivot table with subtotals and lets the user to expand and collapse rows. Its originally written by <a href="https://github.com/nagarajanchinnasamy/">Nagarajan Chinnasamy</a> at <a href="http://mindtree.com/">Mindtree</a>.</p>
         <p></p>
-        <p style="width: 600px; margin: 10px auto;"><a href="http://nicolas.kruchten.com/pivottable">PivotTable.js</a> is an open-source Javascript Pivot Table implementation written by <a href="http://nicolas.kruchten.com/">Nicolas Kruchten</a> at <a href="http://datacratic.com/">Datacratic</a>.</p>
+        <p style="width: 60%; margin: 2% auto;"><a href="http://nicolas.kruchten.com/pivottable">PivotTable.js</a> is an open-source Javascript Pivot Table implementation written by <a href="http://nicolas.kruchten.com/">Nicolas Kruchten</a> at <a href="http://datacratic.com/">Datacratic</a>.</p>
         <p align="center">
             <a href="https://www.npmjs.com/package/subtotal"><img src="../images/subtotal_npm.svg"></a> 
             <!-- <a href="https://cdnjs.com/libraries/subtotal"><img src="../images/subtotal_cdnjs.svg"></a> --> 
@@ -53,8 +53,10 @@ <h2>Subtotal.js</h2>
         <div style="display: inline-block;  width: 45%; min-width: 400px; max-width: 600px; ">
             <h3 align="center">Examples</h3>
             <ul align="left">
-                <li><a href="subtotal_pivot.html">Pivot() with Subtotal renderer</a></li>
-                <li><a href="subtotal_pivotui.html">PivotUI() with Subtotal renderers</a></li>
+                <li><a href="subtotal_pivot.html">Pivot() With Subtotal Renderer</a></li>
+                <li><a href="subtotal_pivotui.html">PivotUI() With Subtotal Renderers</a></li>
+                <li><a href="subtotal_pivot_css.html">Pivot() With Subtotal Row And Column Styling - Bold Text and Background Color #EFEFEF</a></li>
+                <li><a href="montreal_2014.html">Table With Subtotal Heatmap</a></li>                
             </ul>
         </div>        
     </div>

diff --git a/examples/subtotal_pivot_css.html b/examples/subtotal_pivot_css.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Pivot Demo</title>
+        <!-- external libs from cdnjs -->
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.1.0/pivot.min.js"></script>
+
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.1.0/pivot.min.css">
+
+        <!-- PivotTable.js libs from ../dist -->
+        <script type="text/javascript" src="../dist/subtotal.js"></script>
+
+        <style>
+            body {font-family: Verdana;}
+            .pvtRowSubtotal {
+                background-color: #EFEFEF !important;
+                font-weight:bold;
+            }
+            .pvtColSubtotal {
+                background-color: #EFEFEF !important;
+                font-weight:bold;
+            }
+        </style>
+
+        <!-- optional: mobile support with jqueryui-touch-punch -->
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+
+        <!-- for examples only! script to show code to user -->
+        <script type="text/javascript" src="show_code.js"></script>
+    </head>
+    <body>
+    <script type="text/javascript">
+    // This example loads the "Canadian Parliament 2012" dataset 
+    // and adds derived attributes: "Age Bin" and "Gender Imbalance".
+
+    $(function(){
+        var dataClass = $.pivotUtilities.SubtotalPivotData;
+        var derivers = $.pivotUtilities.derivers;
+        var renderer = $.pivotUtilities.subtotal_renderers["Table With Subtotal"];
+
+        $.getJSON("mps.json", function(mps) {
+            $("#output").pivot(mps, {
+                dataClass: dataClass,
+                rows: ["Gender", "Province"],
+                cols: ["Party", "Age Bin", "Age"],
+                renderer: renderer,
+                derivedAttributes: {
+                    "Age Bin": derivers.bin("Age", 10),
+                    "Gender Imbalance": function(mp) {
+                        return mp["Gender"] == "Male" ? 1 : -1;
+                    }
+                },
+                rendererOptions: {
+                    collapseRowsAt: "Gender",
+                    collapseColsAt: "Party"
+                }
+            });
+        });
+     });
+    </script>
+    <p><a href="index.html">&laquo; back to examples</a></p>
+    <p></p>
+    <p>To expand and collapse rows, click on &#x25B6 and &#x25E2 arrows in the table. Scroll down to view the code.</p>
+    <p></p>
+    <div id="output" style="margin: 30px;"></div>
+    <p></p>
+    <p><a href="index.html">&laquo; back to examples</a></p>
+    </body>
+</html>
diff --git a/images/tablewithsubtotalheatmap.png b/images/tablewithsubtotalheatmap.png
diff --git a/images/tablewithsubtotalheatmapmedium.png b/images/tablewithsubtotalheatmapmedium.png
diff --git a/images/tablewithsubtotalheatmapsmall.png b/images/tablewithsubtotalheatmapsmall.png