store repo info into url hash

.babelrc

@@ -1,3 +1,9 @@
 {
-  "presets": ["es2015","stage-0"]
+  "presets": ["es2015","stage-0"],
+  "plugins": [
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": true
+    }]
+  ]
 }

README.md

@@ -11,6 +11,9 @@
 ![lodash vs underscore](./assets/lodash_underscore.png)
 
 ## Updates
+
+- 2016-6-26: store repo info into url hash
+
 - 2016-6-26: Better view for less star repos #28
 
 - 2016-6-14: Toggle search by hit enter #26, prevent crash while searching for not existing repo

package.json

@@ -16,7 +16,6 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.9.1",
-    "babel-polyfill": "^6.5.0",
     "d3": "^3.5.6",
     "nvd3": "^1.8.1"
   },
@@ -25,6 +24,7 @@
     "babel-loader": "^6.2.3",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
+    "babel-plugin-transform-runtime": "^6.9.0",
     "webpack": "^1.12.14"
   }
 }

src/draw.js

@@ -0,0 +1,32 @@
+import d3 from 'd3';
+import nv from 'nvd3';
+
+/**
+ * draw star history graph based on data
+ * @param {String} sample: [{key:'tj/koa', values:[{x:'2016-6-12', y:12}, ...]}, ...]
+ */
+export default function draw(data) {
+  nv.addGraph(function() {
+    const chart = nv.models.lineChart()
+      .useInteractiveGuideline(true)
+      .color(d3.scale.category10().range());
+
+    chart.xAxis
+      .tickFormat(function(d) {
+        return d3.time.format('%x')(new Date(d))
+      });
+
+    chart.yAxis
+      .axisLabel('Stars')
+      .tickFormat(d3.format('d'));
+
+    d3.select('#chart svg')
+      .datum(data)
+      .transition().duration(500)
+      .call(chart);
+
+    nv.utils.windowResize(chart.update);
+
+    return chart;
+  });
+}

src/getStarHistory.js

@@ -83,6 +83,7 @@ async function getStarHistory(repo) {
     };
   });
 
+ // Better view for less star repos #28
   const today = new Date()
   starHistory.push({
     date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,

src/index.js

@@ -1,28 +1,51 @@
-import "babel-polyfill"; // for async/await http://babeljs.io/docs/usage/polyfill/
-import d3 from 'd3';
-import nv from 'nvd3';
 import getStarHistory from './getStarHistory';
+import draw from './draw';
 
 let data = [];
 
-document.getElementById('theForm').addEventListener("submit",e=>{
-  e.preventDefault();
+// fetch data accoding to hash
+if (location.hash !== '') {
+  const repoArr = location.hash.slice(1).split('&')
+  repoArr.forEach(async repo => {
+    await fetchDataAndDraw(repo);
+  })
+}
+
+document.getElementById('theForm').addEventListener("submit", async event => {
+  event.preventDefault();
+
+  // get repo str (format: 'torvalds/linux')
+  let repo = ''
+  const rawRepoStr = document.getElementById('repo').value;
+  if (rawRepoStr.includes('github.com')) {
+    repo = /github.com\/(\S*?\/\S*?)[\/#?]/.exec(rawRepoStr)[1];
+  } else {
+    repo = rawRepoStr == '' ? 'torvalds/linux' : rawRepoStr;
+  }
+
+  await fetchDataAndDraw(repo);
+
+  if (location.hash === '') {
+    location.hash += repo;
+  } else if (location.hash.length >=3) { // minimal sample of repo name 'a/b'
+    location.hash += '&' + repo;
+  }
+
 });
 
-d3.select("#theForm").on("submit", async function(e) {
+
+async function fetchDataAndDraw(repo) {
+
   document.getElementById('theBtn').setAttribute("disabled", "disabled");
   document.getElementById('theGif').style.display = 'inline';
 
-  let repo = document.getElementById('repo').value
-  repo = repo == '' ? 'torvalds/linux' : repo;
-
   const starHistory = await getStarHistory(repo).catch(err => {
     alert(err); 
     document.getElementById('theBtn').removeAttribute("disabled");
     document.getElementById('theGif').style.display = 'none';
   });
 
-  // 新数据集
+  // new data
   data.push({
     key: repo,
     values: starHistory.map((item) => {
@@ -32,33 +55,9 @@ d3.select("#theForm").on("submit", async function(e) {
       }
     }),
   });
-  /*console.log(JSON.stringify(data));*/
-
-  nv.addGraph(function() {
-    var chart = nv.models.lineChart()
-      .useInteractiveGuideline(true)
-      .color(d3.scale.category10().range());
-
-    chart.xAxis
-      .tickFormat(function(d) {
-        return d3.time.format('%x')(new Date(d))
-      });
 
-    chart.yAxis
-      .axisLabel('Stars')
-      .tickFormat(d3.format('d'));
-
-    d3.select('#chart svg')
-      .datum(data)
-      .transition().duration(500)
-      .call(chart);
-
-    nv.utils.windowResize(chart.update);
-
-    return chart;
-  });
+  draw(data)
 
   document.getElementById('theBtn').removeAttribute("disabled");
   document.getElementById('theGif').style.display = 'none';
-  /*console.log('hi');*/
-});
+}