Skip to content

Instantly share code, notes, and snippets.

@sergiorgiraldo

sergiorgiraldo/index.html

Last active November 24, 2019 19:17
Show Gist options
  • Save sergiorgiraldo/2bc54aef6861942453377905467f8675 to your computer and use it in GitHub Desktop.
Save sergiorgiraldo/2bc54aef6861942453377905467f8675 to your computer and use it in GitHub Desktop.
Download ZIP
Ramdajs// source http://jsbin.com/sonale
Raw
index.html
<!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>
Raw
jsbin.sonale.css
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
Raw
jsbin.sonale.js
////// 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