Last active
November 24, 2019 19:17
-
-
Save sergiorgiraldo/2bc54aef6861942453377905467f8675 to your computer and use it in GitHub Desktop.
Ramdajs// source http://jsbin.com/sonale
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/ramda/0.7.2/ramda.js"></script> | |
| <script src="http://code.highcharts.com/highcharts.js"></script> | |
| <script src="http://code.highcharts.com/highcharts-3d.js"></script> | |
| <script src="http://code.highcharts.com/modules/exporting.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Ramdajs</title> | |
| <style id="jsbin-css"> | |
| #container { | |
| min-width: 300px; | |
| max-width: 800px; | |
| height: 300px; | |
| margin: 1em auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script id="jsbin-javascript"> | |
| var data = [ | |
| { | |
| "downloads": | |
| [ | |
| { | |
| "day": "2014-11-03", | |
| "downloads": 139189 | |
| }, { | |
| "day": "2014-11-04", | |
| "downloads": 158265 | |
| }, { | |
| "day": "2014-11-05", | |
| "downloads": 160432 | |
| }, { | |
| "day": "2014-11-06", | |
| "downloads": 154384 | |
| }, { | |
| "day": "2014-11-07", | |
| "downloads": 138672 | |
| }, { | |
| "day": "2014-11-08", | |
| "downloads": 59042 | |
| }, { | |
| "day": "2014-11-09", | |
| "downloads": 55842 | |
| } | |
| ], | |
| "start": "2014-11-03", | |
| "end": "2014-11-09", | |
| "package": "underscore" | |
| }, | |
| { | |
| "downloads": | |
| [ | |
| { | |
| "day": "2014-11-03", | |
| "downloads": 160859 | |
| }, { | |
| "day": "2014-11-04", | |
| "downloads": 176091 | |
| }, { | |
| "day": "2014-11-05", | |
| "downloads": 179163 | |
| }, { | |
| "day": "2014-11-06", | |
| "downloads": 175346 | |
| }, { | |
| "day": "2014-11-07", | |
| "downloads": 158541 | |
| }, { | |
| "day": "2014-11-08", | |
| "downloads": 64694 | |
| }, { | |
| "day": "2014-11-09", | |
| "downloads": 61108 | |
| } | |
| ], | |
| "start": "2014-11-03", | |
| "end": "2014-11-09", | |
| "package": "lodash" | |
| }, | |
| { | |
| "downloads": | |
| [ | |
| { | |
| "day": "2014-11-03", | |
| "downloads": 85 | |
| }, { | |
| "day": "2014-11-04", | |
| "downloads": 115 | |
| }, { | |
| "day": "2014-11-05", | |
| "downloads": 125 | |
| }, { | |
| "day": "2014-11-06", | |
| "downloads": 101 | |
| }, { | |
| "day": "2014-11-07", | |
| "downloads": 64 | |
| }, { | |
| "day": "2014-11-08", | |
| "downloads": 99 | |
| }, { | |
| "day": "2014-11-09", | |
| "downloads": 40 | |
| } | |
| ], | |
| "start": "2014-11-03", | |
| "end": "2014-11-09", | |
| "package": "ramda" | |
| }]; | |
| ////// PURE | |
| var log = function(x) { | |
| console.log(x); | |
| return x; | |
| }; | |
| var filterTest = R.curry(function (package, x) { | |
| if (x.package === package) { | |
| return x; | |
| } | |
| }); | |
| var getDownloads = R.map(R.get('downloads')); | |
| var getDateRange = R.map(R.get('day')); | |
| var shrinkDateRange = R.map(R.substring(5, 10)); | |
| var getUnderscoreLast7Days = R.compose(getDownloads, R.filter(filterTest('underscore'))); | |
| var getLodashLast7Days = R.compose(getDownloads, R.filter(filterTest('lodash'))); | |
| var getRamdaLast7Days = R.compose(getDownloads, R.filter(filterTest('ramda'))); | |
| var flattenAndGetDownloads = R.compose(getDownloads,log, R.flatten, log); | |
| ////// IMPURE | |
| var underscorePoints = R.compose(flattenAndGetDownloads, getUnderscoreLast7Days)(data); | |
| var lodashPoints = R.compose(flattenAndGetDownloads, getLodashLast7Days)(data); | |
| var ramdaPoints = R.compose(flattenAndGetDownloads, getRamdaLast7Days)(data); | |
| var dateRange = R.compose(shrinkDateRange, getDateRange, R.flatten, getRamdaLast7Days)(data); | |
| ////// HIGHCHARTS | |
| $(function () { | |
| // Set up the chart | |
| var chart = new Highcharts.Chart({ | |
| chart: { | |
| renderTo: 'container', | |
| type: 'column', | |
| margin: 75, | |
| options3d: { | |
| enabled: true, | |
| alpha: 15, | |
| beta: 15, | |
| depth: 50, | |
| viewDistance: 25 | |
| } | |
| }, | |
| xAxis: { | |
| categories: dateRange | |
| }, | |
| title: { | |
| text: 'Underscore vs Lodash vs Ramda' | |
| }, | |
| subtitle: { | |
| text: 'npm downloads - last 7 days' | |
| }, | |
| plotOptions: { | |
| column: { | |
| depth: 25 | |
| } | |
| }, | |
| credits: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'underscore', | |
| data: underscorePoints | |
| },{ | |
| name: 'lodash', | |
| data: lodashPoints | |
| }, { | |
| name: 'ramda', | |
| data: ramdaPoints | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #container { | |
| min-width: 300px; | |
| max-width: 800px; | |
| height: 300px; | |
| margin: 1em auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ////// MOCK DATA | |
| var data = [{ | |
| "downloads": [{ | |
| "day": "2014-11-03", | |
| "downloads": 139189 | |
| }, { | |
| "day": "2014-11-04", | |
| "downloads": 158265 | |
| }, { | |
| "day": "2014-11-05", | |
| "downloads": 160432 | |
| }, { | |
| "day": "2014-11-06", | |
| "downloads": 154384 | |
| }, { | |
| "day": "2014-11-07", | |
| "downloads": 138672 | |
| }, { | |
| "day": "2014-11-08", | |
| "downloads": 59042 | |
| }, { | |
| "day": "2014-11-09", | |
| "downloads": 55842 | |
| }], | |
| "start": "2014-11-03", | |
| "end": "2014-11-09", | |
| "package": "underscore" | |
| }, { | |
| "downloads": [{ | |
| "day": "2014-11-03", | |
| "downloads": 160859 | |
| }, { | |
| "day": "2014-11-04", | |
| "downloads": 176091 | |
| }, { | |
| "day": "2014-11-05", | |
| "downloads": 179163 | |
| }, { | |
| "day": "2014-11-06", | |
| "downloads": 175346 | |
| }, { | |
| "day": "2014-11-07", | |
| "downloads": 158541 | |
| }, { | |
| "day": "2014-11-08", | |
| "downloads": 64694 | |
| }, { | |
| "day": "2014-11-09", | |
| "downloads": 61108 | |
| }], | |
| "start": "2014-11-03", | |
| "end": "2014-11-09", | |
| "package": "lodash" | |
| }, { | |
| "downloads": [{ | |
| "day": "2014-11-03", | |
| "downloads": 85 | |
| }, { | |
| "day": "2014-11-04", | |
| "downloads": 115 | |
| }, { | |
| "day": "2014-11-05", | |
| "downloads": 125 | |
| }, { | |
| "day": "2014-11-06", | |
| "downloads": 101 | |
| }, { | |
| "day": "2014-11-07", | |
| "downloads": 64 | |
| }, { | |
| "day": "2014-11-08", | |
| "downloads": 99 | |
| }, { | |
| "day": "2014-11-09", | |
| "downloads": 40 | |
| }], | |
| "start": "2014-11-03", | |
| "end": "2014-11-09", | |
| "package": "ramda" | |
| }]; | |
| ////// PURE | |
| var log = function(x) { | |
| console.log(x); | |
| return x; | |
| }; | |
| var filterTest = R.curry(function (package, x) { | |
| if (x.package === package) { | |
| return x; | |
| } | |
| }); | |
| var getDownloads = R.map(R.get('downloads')); | |
| var getDateRange = R.map(R.get('day')); | |
| var shrinkDateRange = R.map(R.substring(5, 10)); | |
| var getUnderscoreLast7Days = R.compose(getDownloads, R.filter(filterTest('underscore'))); | |
| var getLodashLast7Days = R.compose(getDownloads, R.filter(filterTest('lodash'))); | |
| var getRamdaLast7Days = R.compose(getDownloads, R.filter(filterTest('ramda'))); | |
| var flattenAndGetDownloads = R.compose(getDownloads,log, R.flatten, log); | |
| ////// IMPURE | |
| var underscorePoints = R.compose(flattenAndGetDownloads, getUnderscoreLast7Days)(data); | |
| var lodashPoints = R.compose(flattenAndGetDownloads, getLodashLast7Days)(data); | |
| var ramdaPoints = R.compose(flattenAndGetDownloads, getRamdaLast7Days)(data); | |
| var dateRange = R.compose(shrinkDateRange, getDateRange, R.flatten, getRamdaLast7Days)(data); | |
| //ramdaPoints = R.map(R.multiply(1000), ramdaPoints) | |
| ////// HIGHCHARTS | |
| $(function () { | |
| // Set up the chart | |
| var chart = new Highcharts.Chart({ | |
| chart: { | |
| renderTo: 'container', | |
| type: 'column', | |
| margin: 75, | |
| options3d: { | |
| enabled: true, | |
| alpha: 15, | |
| beta: 15, | |
| depth: 50, | |
| viewDistance: 25 | |
| } | |
| }, | |
| xAxis: { | |
| categories: dateRange | |
| }, | |
| title: { | |
| text: 'Underscore vs Lodash vs Ramda' | |
| }, | |
| subtitle: { | |
| text: 'npm downloads - last 7 days' | |
| }, | |
| plotOptions: { | |
| column: { | |
| depth: 25 | |
| } | |
| }, | |
| credits: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'underscore', | |
| data: underscorePoints | |
| },{ | |
| name: 'lodash', | |
| data: lodashPoints | |
| }, { | |
| name: 'ramda', | |
| data: ramdaPoints | |
| }] | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment