add

jlord · Feb 9, 2014 · 9fcd018 · 9fcd018
1 parent 3bc3296
commit 9fcd018
Show file tree

Hide file tree

Showing 18 changed files with 1,423 additions and 0 deletions.
diff --git a/buildpage.js b/buildpage.js
@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+var glob = require('glob')
+var fs = require('fs')
+var marked = require('marked')
+var hbs = require('handlebars')
+var mkdirp = require('mkdirp')
+var path = require('path')
+var cpr = require('cpr')
+
+cpr('./demos', './site/demos', function(err, files) {
+  if (err) return console.log(err)
+  cpr('./js', './site/js', function(err, files) {
+    if (err) return console.log(err)
+  })
+})
+
+fs.readFile('readme.md', function(err, file) {
+  if (err) return console.log(err)
+  var name = "index"
+  var content = file.toString()
+  var html = changeExtensions(marked(content))
+  applyTemplate(html, name)
+})
+
+glob("docs/*.md", function (err, files) {
+  if (err) return console.log(err)
+  var filenames = files.map(function(name) {
+     return path.basename(name)
+  })
+  filenames.forEach(function (file) {
+    var name = file.split('.md')[0]
+    var filePath = "./docs/"
+    var content = fs.readFileSync(filePath + file).toString()
+    var html = changeExtensions(marked(content))
+    applyTemplate(html, name)
+  })
+})
+
+function applyTemplate(html, name) {
+  var content = {content: html}
+  if (name === "index") {
+    content.rootstyle = "."
+    content.rootdoc = "docs"
+  } else {
+     content.rootstyle = ".."
+     content.rootdoc = "."
+  }
+  var file = "template.hbs"
+  var rawTemplate =  fs.readFileSync(file).toString()
+  var template = hbs.compile(rawTemplate)
+  var page = template(content)
+  writeFile(page, name)
+}
+
+function writeFile(page, name) {
+  if (name === "index") {
+    return fs.writeFileSync('./site/' + name + '.html' , page)
+  }
+  mkdirp('./site/docs', function (err) {
+    if (err) return console.error(err)
+    fs.writeFileSync('./site/docs/' + name + '.html' , page)
+  })
+}
+
+function changeExtensions(html, name) {
+  if (name === "index") {
+    html = html.replace('/\./\.\/', '')
+  }
+  var re = /.md$/
+  var newHtml = html.replace(/\.md/g, '.html')
+  return newHtml
+}
diff --git a/css/sss.css b/css/sss.css
@@ -0,0 +1,53 @@
+/* SHEETSEE STYLES */
+/* These are styles that you'll need to handle for certain elements,
+/* or are available to you through elements sheetsee.js generates */
+
+/* Table */
+
+table {text-align: left; width: 100%}
+th {padding: 10px 0px;}
+td, text {padding: 3px 20px 3px 0px; font-size: 14px;}
+input {background-color: transparent; padding: 0px;}
+.tHeader {/* table column header style */}
+.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px;}
+.noMatches {margin-left: 20px; font-size: 11px; visibility: hidden;}
+#Pagination {background: #eee;}
+.pagination-next, .pagination-pre {cursor: hand;}
+.no-pag {color: #acacac;}
+
+/* Overflow for large tables and chart */
+
+.container {overflow-x: auto;}
+#yourDiv {min-width: 600px}
+
+/* Bar Chart */
+
+.labels text {text-align: right;}
+.bar .labels text {fill: #333;}
+.bar rect {fill: #e6e6e6;}
+.axis {shape-rendering: crispEdges;}
+.x.axis line {stroke: #fff; fill: none;}
+.x.axis path {fill: none;}
+.x.axis text {fill: #333;}
+.xLabel {font-family: sans-serif; font-size: 9px;}
+
+/* Pie Chart */
+
+.arc path { stroke: #fff;}
+
+/* Line Chart */
+
+.axis {shape-rendering: crispEdges;}
+.x.axis .minor, .y.axis .minor {stroke-opacity: .5;}
+.x.axis {stroke-opacity: 1;}
+.y.axis line, .y.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
+.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
+path.chartLine {stroke: #333; stroke-width: 3; fill: none;}
+div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;}
+circle {fill: #e6e6e6;}
+
+/* Map */
+
+.leaflet-popup-content li {list-style:none;}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {}
diff --git a/demos/demo-chart.html b/demos/demo-chart.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Sheetsee Chart Demo</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
+    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
+    <script type='text/javascript' src='../js/sheetsee.js'></script>
+    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
+  </head>
+
+  <style>
+    p {font-family: Baskerville, Libre Baskerville, Georgia, serif;}
+    #pennies.axis {shape-rendering: crispEdges;}
+    #pennies.x.axis .minor, #pennies.y.axis .minor {stroke-opacity: .5;}
+    #pennies.x.axis {stroke-opacity: 1;}
+    #pennies.y.axis line, #pennies.y.axis path, #pennies.x.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
+    #pennies .x.axis line {stroke: #acacac; stroke-opacity: .75;}
+    .bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
+    path.chartLine {stroke: #14ECC8; stroke-width: 3; fill: none;}
+    #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;}
+    circle {fill: #fff; cursor: pointer;}
+    path.domain {fill: #CCF4FF;}
+  </style>
+
+<body>
+  <div class="container">
+    <h1>Pennies by State</h1>
+    <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>
+    <div id="pennies"></div>
+    <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>
+
+    <footer>
+      <h4 id="getting-started">Getting Started</h4>
+      <ul>
+        <li><a href="../docs/about.html">About Sheetsee</a></li>
+        <li><a href="../docs/building.html">Building Sheetsee</a></li>
+        <li><a href="../docs/basics.html">Basics</a></li>
+      </ul>
+      <h4 id="ideas">Ideas</h4>
+      <ul>
+        <li><a href="../docs/fork-n-go.html">Fork-n-Go</a></li>
+        <li><a href="../docs/tips.html">Tips!</a></li>
+        <li><a href="../docs/custom-charts.html">Custom charts</a></li>
+      </ul>
+      <h4>Demos</h4>
+      <ul>
+        <li><a href="/demos/demo-table.html">Table Demo</a></li>
+        <li><a href="/demos/demo-map.html">Map Demo</a></li>
+        <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+      </ul>
+      <h4 id="use">Use</h4>
+      <ul>
+        <li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
+        <li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
+        <li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
+        <li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
+      </ul>
+      <h4 id="use">Contact</h4>
+      <ul>
+        <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
+        <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
+      </ul>
+      <h4 id="home"><a href="/">Home</a></h4>
+    </footer>
+  </div>
+
+  <script type="text/javascript">
+   document.addEventListener('DOMContentLoaded', function() {
+   	var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
+  		Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
+  	})
+
+    function showInfo(data) {
+      var cali = Sheetsee.getOccurance(data, "state")
+      var colors = ['#ff00ff', '#acacac']
+      var caliData = Sheetsee.makeColorArrayOfObject(cali, colors)
+      var lineOptions = { units: "units",
+                          labels: "undefined",
+                          m: [80, 100, 120, 100],
+                          w: 800, h: 400,
+                          div: "#pennies",
+                          yaxis: "pennies",
+                          hiColor: "#E4EB29"
+                        }
+      Sheetsee.d3LineChart(caliData, lineOptions)
+    }
+  </script>
+
+  </body>
+</html>
diff --git a/demos/demo-map.html b/demos/demo-map.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Sheetsee Maps Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
+    <script type='text/javascript' src='../js/sheetsee.js'></script>
+    <link rel='stylesheet' type='text/css' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'  />
+    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
+  </head>
+  <style>
+    #map {max-width: 800px; height: 500px;}
+    .leaflet-popup-content li {list-style:none;}
+    .leaflet-popup-content {width: 102px;}
+    .leaflet-popup-content img {width: 100px;}
+    a {border: none;}
+  </style>
+  <body>
+    <div class="container">
+      <h1>All Pennies  Map</h1>
+      <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>
+      <div id="map"></div>
+      <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>
+
+      <footer>
+        <h4 id="getting-started">Getting Started</h4>
+        <ul>
+          <li><a href="../docs/about.html">About Sheetsee</a></li>
+          <li><a href="../docs/building.html">Building Sheetsee</a></li>
+          <li><a href="../docs/basics.html">Basics</a></li>
+        </ul>
+        <h4 id="ideas">Ideas</h4>
+        <ul>
+          <li><a href="../docs/fork-n-go.html">Fork-n-Go</a></li>
+          <li><a href="../docs/tips.html">Tips!</a></li>
+          <li><a href="../docs/custom-charts.html">Custom charts</a></li>
+        </ul>
+        <h4>Demos</h4>
+        <ul>
+          <li><a href="/demos/demo-table.html">Table Demo</a></li>
+          <li><a href="/demos/demo-map.html">Map Demo</a></li>
+          <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+        </ul>
+        <h4 id="use">Use</h4>
+        <ul>
+          <li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
+          <li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
+          <li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
+          <li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
+        </ul>
+        <h4 id="use">Contact</h4>
+        <ul>
+          <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
+          <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
+        </ul>
+        <h4 id="home"><a href="/">Home</a></h4>
+      </footer>
+
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function() {
+        var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
+        Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
+      })
+
+      function showInfo(data) {
+        var optionsJSON = ["placename", "photo-url"]
+        var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
+                     + "<img src='{{photo-url}}'></a></li>"
+                     + "<li><h4>{{placename}}</h4></li></ul>"
+        var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
+        var map = Sheetsee.loadMap("map")
+        Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
+        var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
+      }
+    </script>
+  </body>
+</html>