initial commit of c3js renderers, based on gchart renderers

nicolaskruchten · Feb 23, 2015 · 7355727 · 7355727
1 parent 3c0ab94
commit 7355727
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 5 deletions.
diff --git a/c3_renderers.coffee b/c3_renderers.coffee
@@ -0,0 +1,58 @@
+callWithJQuery = (pivotModule) ->
+    if typeof exports is "object" and typeof module is "object" # CommonJS
+        pivotModule require("jquery")
+    else if typeof define is "function" and define.amd # AMD
+        define ["jquery"], pivotModule
+    # Plain browser env
+    else
+        pivotModule jQuery
+
+callWithJQuery ($) ->
+
+    makeGoogleChart = (chartType, extraOptions) -> (pivotData, opts) ->
+        defaults =
+            localeStrings:
+                vs: "vs"
+                by: "by"
+
+        opts = $.extend defaults, opts
+
+        rowKeys = pivotData.getRowKeys()
+        rowKeys.push [] if rowKeys.length == 0
+        colKeys = pivotData.getColKeys()
+        colKeys.push [] if colKeys.length == 0
+
+        headers = (h.join("-") for h in rowKeys)
+        headers.unshift ""
+
+        numCharsInHAxis = 0
+        dataArray = [headers]
+        for colKey in colKeys
+            row = [colKey.join("-")]
+            numCharsInHAxis += row[0].length
+            for rowKey in rowKeys
+                agg = pivotData.getAggregator(rowKey, colKey)
+                if agg.value()?
+                    row.push agg.value()
+                else row.push null
+            dataArray.push row
+        console.log dataArray
+
+        result = $("<div>")
+        c3.generate
+            title: "blah"
+            bindto: result[0]
+            size:
+                height: ($(window).height() / 1.4),
+                width: ($(window).width() / 1.4)
+            axis: x: 
+                type: 'category',
+                categories: dataArray.pop()
+            data: columns: dataArray
+        return result
+
+    $.pivotUtilities.c3_renderers = 
+        "Line Chart": makeGoogleChart("LineChart")
+        "Bar Chart": makeGoogleChart("ColumnChart")
+        "Stacked Bar Chart": makeGoogleChart("ColumnChart", isStacked: true)
+        "Area Chart": makeGoogleChart("AreaChart", isStacked: true)
diff --git a/examples/c3.html b/examples/c3.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Pivot Demo</title>
+        <link rel="stylesheet" type="text/css" href="../dist/pivot.css">
+        <link rel="stylesheet" type="text/css" href="ext/c3.min.css">
+        <script type="text/javascript" src="ext/jquery-1.8.3.min.js"></script>
+        <script type="text/javascript" src="ext/jquery-ui-1.9.2.custom.min.js"></script>
+        <script type="text/javascript" src="ext/d3.v3.min.js"></script>
+        <script type="text/javascript" src="ext/c3.min.js"></script>
+        <script type="text/javascript" src="../dist/pivot.js"></script>
+        <script type="text/javascript" src="../dist/c3_renderers.js"></script>
+        <style>
+            * {font-family: Verdana;}
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            $(function(){
+
+                var derivers = $.pivotUtilities.derivers;
+                var renderers = $.extend($.pivotUtilities.renderers, 
+                    $.pivotUtilities.c3_renderers);
+
+                $.getJSON("mps.json", function(mps) {
+                    $("#output").pivotUI(mps, {
+                        renderers: renderers,
+                        derivedAttributes: {
+                            "Age Bin": derivers.bin("Age", 10),
+                            "Gender Imbalance": function(mp) {
+                                return mp["Gender"] == "Male" ? 1 : -1;
+                            }
+                        },
+                        cols: [], rows: ["Province"],
+                        rendererName: "Line Chart"
+                    });
+                });
+             });
+        </script>
+
+        <p><a href="index.html">&laquo; back to examples</a></p>
+
+        <p style="width: 800px">This example adds C3 chart renderers.</p>
+
+        <div id="output" style="margin: 30px;"></div>
+
+    </body>
+</html>
diff --git a/examples/ext/c3.min.css b/examples/ext/c3.min.css
diff --git a/examples/ext/c3.min.js b/examples/ext/c3.min.js
diff --git a/examples/ext/d3.v3.min.js b/examples/ext/d3.v3.min.js