Skip to content

Commit 9fcd018

Browse files
author
Jessica Lord
committed
add
1 parent 3bc3296 commit 9fcd018

18 files changed

+1423
-0
lines changed

‎buildpage.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
#!/usr/bin/env node
2+
3+
var glob = require('glob')
4+
var fs = require('fs')
5+
var marked = require('marked')
6+
var hbs = require('handlebars')
7+
var mkdirp = require('mkdirp')
8+
var path = require('path')
9+
var cpr = require('cpr')
10+
11+
cpr('./demos', './site/demos', function(err, files) {
12+
if (err) return console.log(err)
13+
cpr('./js', './site/js', function(err, files) {
14+
if (err) return console.log(err)
15+
})
16+
})
17+
18+
fs.readFile('readme.md', function(err, file) {
19+
if (err) return console.log(err)
20+
var name = "index"
21+
var content = file.toString()
22+
var html = changeExtensions(marked(content))
23+
applyTemplate(html, name)
24+
})
25+
26+
glob("docs/*.md", function (err, files) {
27+
if (err) return console.log(err)
28+
var filenames = files.map(function(name) {
29+
return path.basename(name)
30+
})
31+
filenames.forEach(function (file) {
32+
var name = file.split('.md')[0]
33+
var filePath = "./docs/"
34+
var content = fs.readFileSync(filePath + file).toString()
35+
var html = changeExtensions(marked(content))
36+
applyTemplate(html, name)
37+
})
38+
})
39+
40+
function applyTemplate(html, name) {
41+
var content = {content: html}
42+
if (name === "index") {
43+
content.rootstyle = "."
44+
content.rootdoc = "docs"
45+
} else {
46+
content.rootstyle = ".."
47+
content.rootdoc = "."
48+
}
49+
var file = "template.hbs"
50+
var rawTemplate = fs.readFileSync(file).toString()
51+
var template = hbs.compile(rawTemplate)
52+
var page = template(content)
53+
writeFile(page, name)
54+
}
55+
56+
function writeFile(page, name) {
57+
if (name === "index") {
58+
return fs.writeFileSync('./site/' + name + '.html' , page)
59+
}
60+
mkdirp('./site/docs', function (err) {
61+
if (err) return console.error(err)
62+
fs.writeFileSync('./site/docs/' + name + '.html' , page)
63+
})
64+
}
65+
66+
function changeExtensions(html, name) {
67+
if (name === "index") {
68+
html = html.replace('/\./\.\/', '')
69+
}
70+
var re = /.md$/
71+
var newHtml = html.replace(/\.md/g, '.html')
72+
return newHtml
73+
}

‎css/sss.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* SHEETSEE STYLES */
2+
/* These are styles that you'll need to handle for certain elements,
3+
/* or are available to you through elements sheetsee.js generates */
4+
5+
/* Table */
6+
7+
table {text-align: left; width: 100%}
8+
th {padding: 10px 0px;}
9+
td, text {padding: 3px 20px 3px 0px; font-size: 14px;}
10+
input {background-color: transparent; padding: 0px;}
11+
.tHeader {/* table column header style */}
12+
.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px;}
13+
.noMatches {margin-left: 20px; font-size: 11px; visibility: hidden;}
14+
#Pagination {background: #eee;}
15+
.pagination-next, .pagination-pre {cursor: hand;}
16+
.no-pag {color: #acacac;}
17+
18+
/* Overflow for large tables and chart */
19+
20+
.container {overflow-x: auto;}
21+
#yourDiv {min-width: 600px}
22+
23+
/* Bar Chart */
24+
25+
.labels text {text-align: right;}
26+
.bar .labels text {fill: #333;}
27+
.bar rect {fill: #e6e6e6;}
28+
.axis {shape-rendering: crispEdges;}
29+
.x.axis line {stroke: #fff; fill: none;}
30+
.x.axis path {fill: none;}
31+
.x.axis text {fill: #333;}
32+
.xLabel {font-family: sans-serif; font-size: 9px;}
33+
34+
/* Pie Chart */
35+
36+
.arc path { stroke: #fff;}
37+
38+
/* Line Chart */
39+
40+
.axis {shape-rendering: crispEdges;}
41+
.x.axis .minor, .y.axis .minor {stroke-opacity: .5;}
42+
.x.axis {stroke-opacity: 1;}
43+
.y.axis line, .y.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
44+
.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
45+
path.chartLine {stroke: #333; stroke-width: 3; fill: none;}
46+
div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;}
47+
circle {fill: #e6e6e6;}
48+
49+
/* Map */
50+
51+
.leaflet-popup-content li {list-style:none;}
52+
53+
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {}

‎demos/demo-chart.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<title>Sheetsee Chart Demo</title>
6+
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
7+
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
8+
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
9+
<script type='text/javascript' src='../js/sheetsee.js'></script>
10+
<link rel='stylesheet' type='text/css' href='../assets/style.css'>
11+
</head>
12+
13+
<style>
14+
p {font-family: Baskerville, Libre Baskerville, Georgia, serif;}
15+
#pennies.axis {shape-rendering: crispEdges;}
16+
#pennies.x.axis .minor, #pennies.y.axis .minor {stroke-opacity: .5;}
17+
#pennies.x.axis {stroke-opacity: 1;}
18+
#pennies.y.axis line, #pennies.y.axis path, #pennies.x.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
19+
#pennies .x.axis line {stroke: #acacac; stroke-opacity: .75;}
20+
.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
21+
path.chartLine {stroke: #14ECC8; stroke-width: 3; fill: none;}
22+
#pennies div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none; font-family: Helvetica, Arial, sans-serif;}
23+
circle {fill: #fff; cursor: pointer;}
24+
path.domain {fill: #CCF4FF;}
25+
</style>
26+
27+
<body>
28+
<div class="container">
29+
<h1>Pennies by State</h1>
30+
<p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em></p>
31+
<div id="pennies"></div>
32+
<p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-charts.html">View Documentation</a></em></p>
33+
34+
<footer>
35+
<h4 id="getting-started">Getting Started</h4>
36+
<ul>
37+
<li><a href="../docs/about.html">About Sheetsee</a></li>
38+
<li><a href="../docs/building.html">Building Sheetsee</a></li>
39+
<li><a href="../docs/basics.html">Basics</a></li>
40+
</ul>
41+
<h4 id="ideas">Ideas</h4>
42+
<ul>
43+
<li><a href="../docs/fork-n-go.html">Fork-n-Go</a></li>
44+
<li><a href="../docs/tips.html">Tips!</a></li>
45+
<li><a href="../docs/custom-charts.html">Custom charts</a></li>
46+
</ul>
47+
<h4>Demos</h4>
48+
<ul>
49+
<li><a href="/demos/demo-table.html">Table Demo</a></li>
50+
<li><a href="/demos/demo-map.html">Map Demo</a></li>
51+
<li><a href="/demos/demo-chart.html">Chart Demo</a></li>
52+
</ul>
53+
<h4 id="use">Use</h4>
54+
<ul>
55+
<li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
56+
<li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
57+
<li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
58+
<li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
59+
</ul>
60+
<h4 id="use">Contact</h4>
61+
<ul>
62+
<li><a href="http://www.twitter.com/jllord">@jllord</a></li>
63+
<li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
64+
</ul>
65+
<h4 id="home"><a href="/">Home</a></h4>
66+
</footer>
67+
</div>
68+
69+
<script type="text/javascript">
70+
document.addEventListener('DOMContentLoaded', function() {
71+
var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
72+
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
73+
})
74+
75+
function showInfo(data) {
76+
var cali = Sheetsee.getOccurance(data, "state")
77+
var colors = ['#ff00ff', '#acacac']
78+
var caliData = Sheetsee.makeColorArrayOfObject(cali, colors)
79+
var lineOptions = { units: "units",
80+
labels: "undefined",
81+
m: [80, 100, 120, 100],
82+
w: 800, h: 400,
83+
div: "#pennies",
84+
yaxis: "pennies",
85+
hiColor: "#E4EB29"
86+
}
87+
Sheetsee.d3LineChart(caliData, lineOptions)
88+
}
89+
</script>
90+
91+
</body>
92+
</html>

‎demos/demo-map.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<title>Sheetsee Maps Demo</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
8+
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
9+
<script type='text/javascript' src='../js/sheetsee.js'></script>
10+
<link rel='stylesheet' type='text/css' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' />
11+
<link rel='stylesheet' type='text/css' href='../assets/style.css'>
12+
</head>
13+
<style>
14+
#map {max-width: 800px; height: 500px;}
15+
.leaflet-popup-content li {list-style:none;}
16+
.leaflet-popup-content {width: 102px;}
17+
.leaflet-popup-content img {width: 100px;}
18+
a {border: none;}
19+
</style>
20+
<body>
21+
<div class="container">
22+
<h1>All Pennies Map</h1>
23+
<p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
24+
<div id="map"></div>
25+
<p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-maps.html">View Documentation</a></em></p>
26+
27+
<footer>
28+
<h4 id="getting-started">Getting Started</h4>
29+
<ul>
30+
<li><a href="../docs/about.html">About Sheetsee</a></li>
31+
<li><a href="../docs/building.html">Building Sheetsee</a></li>
32+
<li><a href="../docs/basics.html">Basics</a></li>
33+
</ul>
34+
<h4 id="ideas">Ideas</h4>
35+
<ul>
36+
<li><a href="../docs/fork-n-go.html">Fork-n-Go</a></li>
37+
<li><a href="../docs/tips.html">Tips!</a></li>
38+
<li><a href="../docs/custom-charts.html">Custom charts</a></li>
39+
</ul>
40+
<h4>Demos</h4>
41+
<ul>
42+
<li><a href="/demos/demo-table.html">Table Demo</a></li>
43+
<li><a href="/demos/demo-map.html">Map Demo</a></li>
44+
<li><a href="/demos/demo-chart.html">Chart Demo</a></li>
45+
</ul>
46+
<h4 id="use">Use</h4>
47+
<ul>
48+
<li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
49+
<li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
50+
<li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
51+
<li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
52+
</ul>
53+
<h4 id="use">Contact</h4>
54+
<ul>
55+
<li><a href="http://www.twitter.com/jllord">@jllord</a></li>
56+
<li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
57+
</ul>
58+
<h4 id="home"><a href="/">Home</a></h4>
59+
</footer>
60+
61+
<script type="text/javascript">
62+
document.addEventListener('DOMContentLoaded', function() {
63+
var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
64+
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
65+
})
66+
67+
function showInfo(data) {
68+
var optionsJSON = ["placename", "photo-url"]
69+
var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
70+
+ "<img src='{{photo-url}}'></a></li>"
71+
+ "<li><h4>{{placename}}</h4></li></ul>"
72+
var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
73+
var map = Sheetsee.loadMap("map")
74+
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
75+
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
76+
}
77+
</script>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)