add clear btn and other fixes

README.md

@@ -1,14 +1,20 @@
-## Intro
+## Show cases
 
-// TODO
+### lodash vs underscore
+
+http://www.timqian.com/star-history/#lodash/lodash&jashkenas/underscore
+
+![](./assets/lodashUnderscore.png)
 
 #### ( As a chrome extension: https://github.com/timqian/star-history-plugin/ )
 
 ## Updates
 
+- 2016-6-28: Add clear btn
+
 - 2016-6-28: Better view for "many star" repos(use current star number as the last point on the graph)
 
-- 2016-6-26: store repo info into url hash
+- 2016-6-26: Store repo info into url hash
 
 - 2016-6-26: multiple kinds of input styles(eg: github.com/timqian/star-history, ...)
 
@@ -18,14 +24,6 @@
 
 - 2016-5-26: Update mobile view
 
-## Show cases:
-
-### meteor vs rails vs django
-![](./assets/django.png)
-
-### lodash vs underscore
-![lodash vs underscore](./assets/lodash_underscore.png)
-
 
 [![paypal donate][paypal-image]][paypal-url]
 [paypal-image]: https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif

index.html

@@ -47,8 +47,7 @@
       font-size: 15pt;
       margin:4pt;
     }
-
-    #theBtn {
+    button {
       text-decoration: none;
       text-align: center;
       font-size: 16pt;
@@ -58,11 +57,22 @@
       padding: 6pt 10pt;
       cursor: default;
     }
+
     #theForm {
       display: inline-block;
       padding: 0;
       margin: 0;
     }
+
+    footer {
+      max-width: 800px;
+      margin: auto;
+    }
+
+    #clearBtn {
+      float: right;
+      background-color: #9b0000;
+    }
   </style>
   <title>Star history</title>
 
@@ -83,21 +93,24 @@
     <svg></svg>
   </div>
 
-  <a href="https://github.com/timqian/star-history-plugin">Chrome extension version of star-history</a>
-  <br/>
-  <a href="https://github.com/timqian/star-history/blob/gh-pages/README.md#updates">Updates</a>
-  </script>
+  <footer>
+    <button id="clearBtn" >clear</button>
+    <a href="https://github.com/timqian/star-history-plugin">Chrome extension version of star-history</a>
+    <br/>
+    <a href="https://github.com/timqian/star-history/blob/gh-pages/README.md#updates">Updates</a>
+  </footer>
+
   <script type="text/javascript" src="./dist/bundle.js" charset="utf-8"></script>
 
-<!--Google analytics-->
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  <!--Google analytics-->
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-  ga('create', 'UA-56506279-1', 'auto');
-  ga('send', 'pageview');
-</script>
-<!--Google analytics-->
+    ga('create', 'UA-56506279-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+  <!--Google analytics-->
 </body>

src/index.js

@@ -11,7 +11,7 @@ if (location.hash !== '') {
   })
 }
 
-document.getElementById('theForm').addEventListener("submit", async event => {
+document.getElementById('theForm').addEventListener('submit', async event => {
   event.preventDefault();
 
   // get repo str (format: 'torvalds/linux')
@@ -33,6 +33,12 @@ document.getElementById('theForm').addEventListener("submit", async event => {
 
 });
 
+document.getElementById('clearBtn').addEventListener('click', () => {
+  data = []
+  location.hash = ''
+  draw(data)
+})
+
 
 async function fetchDataAndDraw(repo) {