From 3cae6b04d111ee22d2011dcdcfc0af9d1835ae29 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Tue, 24 Feb 2015 22:41:06 -0500 Subject: [PATCH] initial support for C3 charting #193 --- c3_renderers.coffee | 36 +++++++------- dist/c3_renderers.js | 91 ++++++++++++++++++++++++++++++++++++ dist/c3_renderers.js.map | 1 + dist/c3_renderers.min.js | 2 + dist/c3_renderers.min.js.map | 1 + examples/c3.html | 4 +- examples/index.html | 1 + 7 files changed, 115 insertions(+), 21 deletions(-) create mode 100644 dist/c3_renderers.js create mode 100644 dist/c3_renderers.js.map create mode 100644 dist/c3_renderers.min.js create mode 100644 dist/c3_renderers.min.js.map diff --git a/c3_renderers.coffee b/c3_renderers.coffee index 5f6829fa..67dc2377 100644 --- a/c3_renderers.coffee +++ b/c3_renderers.coffee @@ -9,7 +9,7 @@ callWithJQuery = (pivotModule) -> callWithJQuery ($) -> - makeGoogleChart = (chartType, extraOptions) -> (pivotData, opts) -> + makeC3Chart = (chartType) -> (pivotData, opts) -> defaults = localeStrings: vs: "vs" @@ -22,37 +22,35 @@ callWithJQuery ($) -> colKeys = pivotData.getColKeys() colKeys.push [] if colKeys.length == 0 - headers = (h.join("-") for h in rowKeys) - headers.unshift "" + headers = (h.join("-") for h in colKeys) - numCharsInHAxis = 0 - dataArray = [headers] - for colKey in colKeys - row = [colKey.join("-")] - numCharsInHAxis += row[0].length - for rowKey in rowKeys + columns = [] + for rowKey in rowKeys + rowHeader = rowKey.join("-") + row = [if rowHeader == "" then pivotData.aggregatorName else rowHeader] + for colKey in colKeys agg = pivotData.getAggregator(rowKey, colKey) if agg.value()? row.push agg.value() else row.push null - dataArray.push row - console.log dataArray + columns.push row result = $("
") - c3.generate - title: "blah" + params = bindto: result[0] size: height: ($(window).height() / 1.4), width: ($(window).width() / 1.4) axis: x: type: 'category', - categories: dataArray.pop() - data: columns: dataArray + categories: headers + data: + columns: columns + if chartType? + params.data.type = chartType + c3.generate params 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) + "Line Chart C3": makeC3Chart() + "Bar Chart C3": makeC3Chart("bar") diff --git a/dist/c3_renderers.js b/dist/c3_renderers.js new file mode 100644 index 00000000..aa79c382 --- /dev/null +++ b/dist/c3_renderers.js @@ -0,0 +1,91 @@ +(function() { + var callWithJQuery; + + callWithJQuery = function(pivotModule) { + if (typeof exports === "object" && typeof module === "object") { + return pivotModule(require("jquery")); + } else if (typeof define === "function" && define.amd) { + return define(["jquery"], pivotModule); + } else { + return pivotModule(jQuery); + } + }; + + callWithJQuery(function($) { + var makeC3Chart; + makeC3Chart = function(chartType) { + return function(pivotData, opts) { + var agg, colKey, colKeys, columns, defaults, h, headers, params, result, row, rowHeader, rowKey, rowKeys, _i, _j, _len, _len1; + defaults = { + localeStrings: { + vs: "vs", + by: "by" + } + }; + opts = $.extend(defaults, opts); + rowKeys = pivotData.getRowKeys(); + if (rowKeys.length === 0) { + rowKeys.push([]); + } + colKeys = pivotData.getColKeys(); + if (colKeys.length === 0) { + colKeys.push([]); + } + headers = (function() { + var _i, _len, _results; + _results = []; + for (_i = 0, _len = colKeys.length; _i < _len; _i++) { + h = colKeys[_i]; + _results.push(h.join("-")); + } + return _results; + })(); + columns = []; + for (_i = 0, _len = rowKeys.length; _i < _len; _i++) { + rowKey = rowKeys[_i]; + rowHeader = rowKey.join("-"); + row = [rowHeader === "" ? pivotData.aggregatorName : rowHeader]; + for (_j = 0, _len1 = colKeys.length; _j < _len1; _j++) { + colKey = colKeys[_j]; + agg = pivotData.getAggregator(rowKey, colKey); + if (agg.value() != null) { + row.push(agg.value()); + } else { + row.push(null); + } + } + columns.push(row); + } + result = $("
"); + params = { + bindto: result[0], + size: { + height: $(window).height() / 1.4, + width: $(window).width() / 1.4 + }, + axis: { + x: { + type: 'category', + categories: headers + } + }, + data: { + columns: columns + } + }; + if (chartType != null) { + params.data.type = chartType; + } + c3.generate(params); + return result; + }; + }; + return $.pivotUtilities.c3_renderers = { + "Line Chart C3": makeC3Chart(), + "Bar Chart C3": makeC3Chart("bar") + }; + }); + +}).call(this); + +//# sourceMappingURL=c3_renderers.js.map \ No newline at end of file diff --git a/dist/c3_renderers.js.map b/dist/c3_renderers.js.map new file mode 100644 index 00000000..8d7ac4f4 --- /dev/null +++ b/dist/c3_renderers.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["c3_renderers.coffee"],"names":[],"mappings":"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","file":"c3_renderers.js","sourceRoot":"/source/","sourcesContent":["callWithJQuery = (pivotModule) ->\n if typeof exports is \"object\" and typeof module is \"object\" # CommonJS\n pivotModule require(\"jquery\")\n else if typeof define is \"function\" and define.amd # AMD\n define [\"jquery\"], pivotModule\n # Plain browser env\n else\n pivotModule jQuery\n \ncallWithJQuery ($) ->\n\n makeC3Chart = (chartType) -> (pivotData, opts) ->\n defaults =\n localeStrings:\n vs: \"vs\"\n by: \"by\"\n\n opts = $.extend defaults, opts\n\n rowKeys = pivotData.getRowKeys()\n rowKeys.push [] if rowKeys.length == 0\n colKeys = pivotData.getColKeys()\n colKeys.push [] if colKeys.length == 0\n\n headers = (h.join(\"-\") for h in colKeys)\n\n columns = []\n for rowKey in rowKeys\n rowHeader = rowKey.join(\"-\")\n row = [if rowHeader == \"\" then pivotData.aggregatorName else rowHeader]\n for colKey in colKeys\n agg = pivotData.getAggregator(rowKey, colKey)\n if agg.value()?\n row.push agg.value()\n else row.push null\n columns.push row\n\n result = $(\"
\")\n params = \n bindto: result[0]\n size:\n height: ($(window).height() / 1.4),\n width: ($(window).width() / 1.4)\n axis: x: \n type: 'category',\n categories: headers\n data: \n columns: columns\n if chartType?\n params.data.type = chartType\n c3.generate params\n return result\n\n $.pivotUtilities.c3_renderers = \n \"Line Chart C3\": makeC3Chart()\n \"Bar Chart C3\": makeC3Chart(\"bar\")\n"]} \ No newline at end of file diff --git a/dist/c3_renderers.min.js b/dist/c3_renderers.min.js new file mode 100644 index 00000000..cedd2832 --- /dev/null +++ b/dist/c3_renderers.min.js @@ -0,0 +1,2 @@ +(function(){var e;(e=function(e){return"object"==typeof exports&&"object"==typeof module?e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):e(jQuery)})(function(e){var t;return t=function(t){return function(n,r){var i,o,u,a,l,g,h,s,c,f,d,y,p,v,j,w,b;for(l={localeStrings:{vs:"vs",by:"by"}},r=e.extend(l,r),p=n.getRowKeys(),0===p.length&&p.push([]),u=n.getColKeys(),0===u.length&&u.push([]),h=function(){var e,t,n;for(n=[],e=0,t=u.length;t>e;e++)g=u[e],n.push(g.join("-"));return n}(),a=[],v=0,w=p.length;w>v;v++){for(y=p[v],d=y.join("-"),f=[""===d?n.aggregatorName:d],j=0,b=u.length;b>j;j++)o=u[j],i=n.getAggregator(y,o),f.push(null!=i.value()?i.value():null);a.push(f)}return c=e("
"),s={bindto:c[0],size:{height:e(window).height()/1.4,width:e(window).width()/1.4},axis:{x:{type:"category",categories:h}},data:{columns:a}},null!=t&&(s.data.type=t),c3.generate(s),c}},e.pivotUtilities.c3_renderers={"Line Chart C3":t(),"Bar Chart C3":t("bar")}})}).call(this); +//# sourceMappingURL=c3_renderers.min.js.map \ No newline at end of file diff --git a/dist/c3_renderers.min.js.map b/dist/c3_renderers.min.js.map new file mode 100644 index 00000000..a25fbbfb --- /dev/null +++ b/dist/c3_renderers.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["/source/c3_renderers.coffee"],"names":[],"mappings":"CAAA,WAAA,GAAA,IAAA,EAAiB,SAAC,GACd,MAAqB,gBAAlB,UAAgD,gBAAjB,QAC9B,EAAY,QAAQ,WACC,kBAAjB,SAAgC,OAAO,IAC3C,QAAQ,UAAW,GAGnB,EAAY,UAEL,SAAC,GAEZ,GAAA,SAAA,GAAc,SAAC,SAAc,UAAC,EAAW,GACrC,GAAA,GAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAeA,KAfA,GACI,eACI,GAAI,KACJ,GAAI,OAEZ,EAAO,EAAE,OAAO,EAAU,GAE1B,EAAU,EAAU,aACiB,IAAlB,EAAQ,QAA3B,EAAQ,SACR,EAAU,EAAU,aACiB,IAAlB,EAAQ,QAA3B,EAAQ,SAER,EAAA,yBAAW,KAAA,EAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,KAAA,EAAE,KAAK,kBAElB,KACA,EAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,IAAA,CAGI,WAFA,EAAY,EAAO,KAAK,KACxB,GAAuB,KAAb,EAAqB,EAAU,eAAoB,GAC7D,EAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WACI,EAAM,EAAU,cAAc,EAAQ,GAElC,EAAI,KADL,MAAA,EAAA,QACU,EAAI,QACH,KAClB,GAAQ,KAAK,GAgBjB,MAdA,GAAS,EAAE,SACX,GACI,OAAQ,EAAO,GACf,MACI,OAAS,EAAE,QAAQ,SAAW,IAC9B,MAAQ,EAAE,QAAQ,QAAU,KAChC,MAAM,GACF,KAAM,WACN,WAAY,IAChB,MACI,QAAS,IACd,MAAA,IACC,EAAO,KAAK,KAAO,GACvB,GAAG,SAAS,GACL,IAEX,EAAE,eAAe,cACb,gBAAiB,IACjB,eAAgB,EAAY","file":"c3_renderers.min.js","sourcesContent":["callWithJQuery = (pivotModule) ->\n if typeof exports is \"object\" and typeof module is \"object\" # CommonJS\n pivotModule require(\"jquery\")\n else if typeof define is \"function\" and define.amd # AMD\n define [\"jquery\"], pivotModule\n # Plain browser env\n else\n pivotModule jQuery\n \ncallWithJQuery ($) ->\n\n makeC3Chart = (chartType) -> (pivotData, opts) ->\n defaults =\n localeStrings:\n vs: \"vs\"\n by: \"by\"\n\n opts = $.extend defaults, opts\n\n rowKeys = pivotData.getRowKeys()\n rowKeys.push [] if rowKeys.length == 0\n colKeys = pivotData.getColKeys()\n colKeys.push [] if colKeys.length == 0\n\n headers = (h.join(\"-\") for h in colKeys)\n\n columns = []\n for rowKey in rowKeys\n rowHeader = rowKey.join(\"-\")\n row = [if rowHeader == \"\" then pivotData.aggregatorName else rowHeader]\n for colKey in colKeys\n agg = pivotData.getAggregator(rowKey, colKey)\n if agg.value()?\n row.push agg.value()\n else row.push null\n columns.push row\n\n result = $(\"
\")\n params = \n bindto: result[0]\n size:\n height: ($(window).height() / 1.4),\n width: ($(window).width() / 1.4)\n axis: x: \n type: 'category',\n categories: headers\n data: \n columns: columns\n if chartType?\n params.data.type = chartType\n c3.generate params\n return result\n\n $.pivotUtilities.c3_renderers = \n \"Line Chart C3\": makeC3Chart()\n \"Bar Chart C3\": makeC3Chart(\"bar\")\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/c3.html b/examples/c3.html index 67af7261..d1510b5f 100644 --- a/examples/c3.html +++ b/examples/c3.html @@ -31,8 +31,8 @@ return mp["Gender"] == "Male" ? 1 : -1; } }, - cols: [], rows: ["Province"], - rendererName: "Line Chart" + cols: ["Age Bin"], rows: ["Gender"], + rendererName: "Line Chart C3" }); }); }); diff --git a/examples/index.html b/examples/index.html index 3ed1e778..fbc68008 100644 --- a/examples/index.html +++ b/examples/index.html @@ -35,6 +35,7 @@

Canadian Parliament 2012 Dataset (CS
  • pivotUI() with export renderers
  • pivotUI() with Google Charts renderers
  • pivotUI() with D3 renderers
    • +
  • pivotUI() with C3 chart renderers
  • pivotUI() mobile-enabled and with all renderers

    • Bring your own dataset