Skip to content

Instantly share code, notes, and snippets.

@jun9

jun9/index.html

Forked from anonymous/index.html
Created December 4, 2015 11:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jun9/fef56c890b048097918e to your computer and use it in GitHub Desktop.
Save jun9/fef56c890b048097918e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/yotuloboke
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
table.oct {
font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
border-collapse: collapse;
margin: auto;
border-spacing: 0;
}
table.oct, table.oct td, table.oct th {
padding: 4px;
text-align: center;
border: 1px solid rgb(8,48,107);
}
table.oct th {
background-color: rgb(8,81,156);
color: white;
}
table.oct td {
font-size: smaller;
}
td>table.oct{
width:100%;
box-shadow: none;
border: 0px;
padding: 0px;
border-style: hidden;
}
table table td{
width:50%;
padding: 0px;
}
table td:nth-child(6n+0){ /* this will go to the 2nd column of a table directly */
padding:0px;
}
</style>
</head>
<body>
<strong id="msn">SLF6028T-680MR50-PF</strong>
<div id="chartContainer"></div>
<div id="my-final-table"></div>
<script id="jsbin-javascript">
(function() {
var nTimer = setInterval(function() {
if (window.jQuery) {
// Do something with jQuery
clearInterval(nTimer);
getPrices();
}
}, 100);
})();
function getPrices() {
var url = 'http://octopart.com/api/v3/parts/match';
url += '?apikey=b64eb005';
url += '&exact_only=true';
url += '&callback=?';
var mpn= $("strong#msn").text();
if (mpn == "NA") {mpn= $("strong#gsn").text()};
var queries = [
{'mpn': mpn}
];
var args = {
queries: JSON.stringify(queries)
};
var CNYexRates ={};
var exUrl='http://api.fixer.io/latest?base=CNY&callback=?';
$.ajaxSetup({
timeout: 5*1000
});
$.getJSON(exUrl, function(response) {
CNYexRates = response;
})
.done(function() {
// console.log( "remote rates" );
$.getJSON(url, args, function(response) {
if (response.results[0].items[0]=== undefined) { console.log("no results.")}
else {
res=response.results[0].items[0].offers.filter(function(d){return d.in_stock_quantity>0 && Object.keys(d.prices).length>0});
console.log(response.results[0].items[0].manufacturer.name, response.results[0].items[0].mpn, response.results[0].items[0]);
d3.select("#chartContainer").selectAll("table")
.data([res])
.enter().append("table")
.attr("class", "oct")
.call(recurse);
};
})
})
.fail(function() {
console.log("local rates")
$.getJSON('cny.json', function(localcopy){
CNYexRates = localcopy;
$.getJSON(url, args, function(response) {
if (response.results[0].items[0]=== undefined) { console.log("no results.")}
else {
res=response.results[0].items[0].offers.filter(function(d){return d.in_stock_quantity>0 && Object.keys(d.prices).length>0});
console.log(res.manufacturer.name, res.mpn, res.offers.length);
d3.select("#chartContainer").selectAll("table")
.data([res])
.enter().append("table")
.attr("class", "oct")
.call(recurse);
};
})
});
});
function getDescendantProp(obj, desc) {
var arr = desc.split(".");
while(arr.length && (obj = obj[arr.shift()]));
return obj;
}
function recurse(sel) {
// sel is a d3.selection of one or more empty tables
sel.each(function(d) {
// d is an array of objects
var colnames,
colname,
cols,
tds,
table = d3.select(this);
// obtain column names by gathering unique key names in all 1st level objects
// following method emulates a set by using the keys of a d3.map()
colnames = d // array of objects
.reduce(function(p,c) { return p.concat(d3.keys(c)); }, [])
// array with all keynames
.reduce(function(p,c) { return (p.set(c,0), p); }, d3.map()) // map with unique keynames as keys
.keys(); // array with unique keynames (arb. order)
if (colnames.indexOf("prices")>0) {
colname= ['库存所在国家', '供应商', '供应商编号', '包装', '库存', '参考价格（RMB）'];
cols=['seller.display_flag', 'seller.name', 'sku', 'packaging', 'in_stock_quantity', 'price'];
d.forEach(function(d) {
if (d.prices.CNY) {
d.price=d.prices.CNY.reduce(function(p,c) { return p.concat( [[c[0], (c[1]*1).toFixed(4)]]);}, []);
} else if (d.prices.USD) {
d.price=d.prices.USD.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.USD).toFixed(4)]]);}, []);
} else if (d.prices.GBP) {
d.price=d.prices.GBP.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.GBP).toFixed(4)]]);}, []);
} else if (d.prices.EUR) {
d.price=d.prices.EUR.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.EUR).toFixed(4)]]);}, []);
};
});
table.append("thead").append("tr").selectAll("th")
.data(colname)
.enter().append("th")
.text(function(d) { return d; });
}
else {cols= colnames; colname=colnames;};
// colnames array is in arbitrary order
// sort colnames here if required
// create header row using standard 1D data join and enter()
// create the table cells by using nested 2D data join and enter()
// see also http://bost.ocks.org/mike/nest/
tds = table.append("tbody").selectAll("tr")
.data(d) // each row gets one object
.enter().append("tr").selectAll("td")
.data(function(d) { // each cell gets one value
return cols.map(function(k) { // for each colname (i.e. key) find the corresponding value
return getDescendantProp(d, k) || ""; // use empty string if key doesn't exist for that object
});
})
.enter().append("td");
// cell contents depends on the data bound to the cell
// fill with text if data is not an Array
tds.filter(function(d) { return !(d instanceof Array); })
.text(function(d) { return d; });
// fill with a new table if data is an Array
tds.filter(function(d) { return (d instanceof Array); })
.append("table")
.attr("class", "oct")
.call(recurse);
// .html(function(d) { return d.join('</br>').replace(/\,/g, '+>'); });
});
}
// });
$('table.oct').DataTable();
};
</script>
<script id="jsbin-source-css" type="text/css">table.oct {
font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
border-collapse: collapse;
margin: auto;
border-spacing: 0;
}
table.oct, table.oct td, table.oct th {
padding: 4px;
text-align: center;
border: 1px solid rgb(8,48,107);
}
table.oct th {
background-color: rgb(8,81,156);
color: white;
}
table.oct td {
font-size: smaller;
}
td>table.oct{
width:100%;
box-shadow: none;
border: 0px;
padding: 0px;
border-style: hidden;
}
table table td{
width:50%;
padding: 0px;
}
table td:nth-child(6n+0){ /* this will go to the 2nd column of a table directly */
padding:0px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function() {
var nTimer = setInterval(function() {
if (window.jQuery) {
// Do something with jQuery
clearInterval(nTimer);
getPrices();
}
}, 100);
})();
function getPrices() {
var url = 'http://octopart.com/api/v3/parts/match';
url += '?apikey=b64eb005';
url += '&exact_only=true';
url += '&callback=?';
var mpn= $("strong#msn").text();
if (mpn == "NA") {mpn= $("strong#gsn").text()};
var queries = [
{'mpn': mpn}
];
var args = {
queries: JSON.stringify(queries)
};
var CNYexRates ={};
var exUrl='http://api.fixer.io/latest?base=CNY&callback=?';
$.ajaxSetup({
timeout: 5*1000
});
$.getJSON(exUrl, function(response) {
CNYexRates = response;
})
.done(function() {
// console.log( "remote rates" );
$.getJSON(url, args, function(response) {
if (response.results[0].items[0]=== undefined) { console.log("no results.")}
else {
res=response.results[0].items[0].offers.filter(function(d){return d.in_stock_quantity>0 && Object.keys(d.prices).length>0});
console.log(response.results[0].items[0].manufacturer.name, response.results[0].items[0].mpn, response.results[0].items[0]);
d3.select("#chartContainer").selectAll("table")
.data([res])
.enter().append("table")
.attr("class", "oct")
.call(recurse);
};
})
})
.fail(function() {
console.log("local rates")
$.getJSON('cny.json', function(localcopy){
CNYexRates = localcopy;
$.getJSON(url, args, function(response) {
if (response.results[0].items[0]=== undefined) { console.log("no results.")}
else {
res=response.results[0].items[0].offers.filter(function(d){return d.in_stock_quantity>0 && Object.keys(d.prices).length>0});
console.log(res.manufacturer.name, res.mpn, res.offers.length);
d3.select("#chartContainer").selectAll("table")
.data([res])
.enter().append("table")
.attr("class", "oct")
.call(recurse);
};
})
});
});
function getDescendantProp(obj, desc) {
var arr = desc.split(".");
while(arr.length && (obj = obj[arr.shift()]));
return obj;
}
function recurse(sel) {
// sel is a d3.selection of one or more empty tables
sel.each(function(d) {
// d is an array of objects
var colnames,
colname,
cols,
tds,
table = d3.select(this);
// obtain column names by gathering unique key names in all 1st level objects
// following method emulates a set by using the keys of a d3.map()
colnames = d // array of objects
.reduce(function(p,c) { return p.concat(d3.keys(c)); }, [])
// array with all keynames
.reduce(function(p,c) { return (p.set(c,0), p); }, d3.map()) // map with unique keynames as keys
.keys(); // array with unique keynames (arb. order)
if (colnames.indexOf("prices")>0) {
colname= ['库存所在国家', '供应商', '供应商编号', '包装', '库存', '参考价格（RMB）'];
cols=['seller.display_flag', 'seller.name', 'sku', 'packaging', 'in_stock_quantity', 'price'];
d.forEach(function(d) {
if (d.prices.CNY) {
d.price=d.prices.CNY.reduce(function(p,c) { return p.concat( [[c[0], (c[1]*1).toFixed(4)]]);}, []);
} else if (d.prices.USD) {
d.price=d.prices.USD.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.USD).toFixed(4)]]);}, []);
} else if (d.prices.GBP) {
d.price=d.prices.GBP.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.GBP).toFixed(4)]]);}, []);
} else if (d.prices.EUR) {
d.price=d.prices.EUR.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.EUR).toFixed(4)]]);}, []);
};
});
table.append("thead").append("tr").selectAll("th")
.data(colname)
.enter().append("th")
.text(function(d) { return d; });
}
else {cols= colnames; colname=colnames;};
// colnames array is in arbitrary order
// sort colnames here if required
// create header row using standard 1D data join and enter()
// create the table cells by using nested 2D data join and enter()
// see also http://bost.ocks.org/mike/nest/
tds = table.append("tbody").selectAll("tr")
.data(d) // each row gets one object
.enter().append("tr").selectAll("td")
.data(function(d) { // each cell gets one value
return cols.map(function(k) { // for each colname (i.e. key) find the corresponding value
return getDescendantProp(d, k) || ""; // use empty string if key doesn't exist for that object
});
})
.enter().append("td");
// cell contents depends on the data bound to the cell
// fill with text if data is not an Array
tds.filter(function(d) { return !(d instanceof Array); })
.text(function(d) { return d; });
// fill with a new table if data is an Array
tds.filter(function(d) { return (d instanceof Array); })
.append("table")
.attr("class", "oct")
.call(recurse);
// .html(function(d) { return d.join('</br>').replace(/\,/g, '+>'); });
});
}
// });
$('table.oct').DataTable();
};</script></body>
</html>
Raw
jsbin.yotuloboke.css
table.oct {
font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
border-collapse: collapse;
margin: auto;
border-spacing: 0;
}
table.oct, table.oct td, table.oct th {
padding: 4px;
text-align: center;
border: 1px solid rgb(8,48,107);
}
table.oct th {
background-color: rgb(8,81,156);
color: white;
}
table.oct td {
font-size: smaller;
}
td>table.oct{
width:100%;
box-shadow: none;
border: 0px;
padding: 0px;
border-style: hidden;
}
table table td{
width:50%;
padding: 0px;
}
table td:nth-child(6n+0){ /* this will go to the 2nd column of a table directly */
padding:0px;
}
Raw
jsbin.yotuloboke.js
(function() {
var nTimer = setInterval(function() {
if (window.jQuery) {
// Do something with jQuery
clearInterval(nTimer);
getPrices();
}
}, 100);
})();
function getPrices() {
var url = 'http://octopart.com/api/v3/parts/match';
url += '?apikey=b64eb005';
url += '&exact_only=true';
url += '&callback=?';
var mpn= $("strong#msn").text();
if (mpn == "NA") {mpn= $("strong#gsn").text()};
var queries = [
{'mpn': mpn}
];
var args = {
queries: JSON.stringify(queries)
};
var CNYexRates ={};
var exUrl='http://api.fixer.io/latest?base=CNY&callback=?';
$.ajaxSetup({
timeout: 5*1000
});
$.getJSON(exUrl, function(response) {
CNYexRates = response;
})
.done(function() {
// console.log( "remote rates" );
$.getJSON(url, args, function(response) {
if (response.results[0].items[0]=== undefined) { console.log("no results.")}
else {
res=response.results[0].items[0].offers.filter(function(d){return d.in_stock_quantity>0 && Object.keys(d.prices).length>0});
console.log(response.results[0].items[0].manufacturer.name, response.results[0].items[0].mpn, response.results[0].items[0]);
d3.select("#chartContainer").selectAll("table")
.data([res])
.enter().append("table")
.attr("class", "oct")
.call(recurse);
};
})
})
.fail(function() {
console.log("local rates")
$.getJSON('cny.json', function(localcopy){
CNYexRates = localcopy;
$.getJSON(url, args, function(response) {
if (response.results[0].items[0]=== undefined) { console.log("no results.")}
else {
res=response.results[0].items[0].offers.filter(function(d){return d.in_stock_quantity>0 && Object.keys(d.prices).length>0});
console.log(res.manufacturer.name, res.mpn, res.offers.length);
d3.select("#chartContainer").selectAll("table")
.data([res])
.enter().append("table")
.attr("class", "oct")
.call(recurse);
};
})
});
});
function getDescendantProp(obj, desc) {
var arr = desc.split(".");
while(arr.length && (obj = obj[arr.shift()]));
return obj;
}
function recurse(sel) {
// sel is a d3.selection of one or more empty tables
sel.each(function(d) {
// d is an array of objects
var colnames,
colname,
cols,
tds,
table = d3.select(this);
// obtain column names by gathering unique key names in all 1st level objects
// following method emulates a set by using the keys of a d3.map()
colnames = d // array of objects
.reduce(function(p,c) { return p.concat(d3.keys(c)); }, [])
// array with all keynames
.reduce(function(p,c) { return (p.set(c,0), p); }, d3.map()) // map with unique keynames as keys
.keys(); // array with unique keynames (arb. order)
if (colnames.indexOf("prices")>0) {
colname= ['库存所在国家', '供应商', '供应商编号', '包装', '库存', '参考价格（RMB）'];
cols=['seller.display_flag', 'seller.name', 'sku', 'packaging', 'in_stock_quantity', 'price'];
d.forEach(function(d) {
if (d.prices.CNY) {
d.price=d.prices.CNY.reduce(function(p,c) { return p.concat( [[c[0], (c[1]*1).toFixed(4)]]);}, []);
} else if (d.prices.USD) {
d.price=d.prices.USD.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.USD).toFixed(4)]]);}, []);
} else if (d.prices.GBP) {
d.price=d.prices.GBP.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.GBP).toFixed(4)]]);}, []);
} else if (d.prices.EUR) {
d.price=d.prices.EUR.reduce(function(p,c) { return p.concat( [[c[0], (c[1]/CNYexRates.rates.EUR).toFixed(4)]]);}, []);
};
});
table.append("thead").append("tr").selectAll("th")
.data(colname)
.enter().append("th")
.text(function(d) { return d; });
}
else {cols= colnames; colname=colnames;};
// colnames array is in arbitrary order
// sort colnames here if required
// create header row using standard 1D data join and enter()
// create the table cells by using nested 2D data join and enter()
// see also http://bost.ocks.org/mike/nest/
tds = table.append("tbody").selectAll("tr")
.data(d) // each row gets one object
.enter().append("tr").selectAll("td")
.data(function(d) { // each cell gets one value
return cols.map(function(k) { // for each colname (i.e. key) find the corresponding value
return getDescendantProp(d, k) || ""; // use empty string if key doesn't exist for that object
});
})
.enter().append("td");
// cell contents depends on the data bound to the cell
// fill with text if data is not an Array
tds.filter(function(d) { return !(d instanceof Array); })
.text(function(d) { return d; });
// fill with a new table if data is an Array
tds.filter(function(d) { return (d instanceof Array); })
.append("table")
.attr("class", "oct")
.call(recurse);
// .html(function(d) { return d.join('</br>').replace(/\,/g, '+>'); });
});
}
// });
$('table.oct').DataTable();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment