Implement Black & Red Line Chart

public/historical.es

@@ -0,0 +1,49 @@
+class Historical {
+
+  constructor (symbols)
+    { this.symbols = symbols }
+
+  convert (to) {
+    this.to = to
+    return this
+  }
+
+  async since ( date, seconds = (date.getTime () / 1000) ) {
+    const
+      url = `${this.endpoint}` //&toTs=${seconds}`
+
+    return await
+      fetch (url)
+      .then (this.collect.bind (date))
+  }
+
+  async collect (response) {
+    const
+      timestamp = record =>
+        (record.time = new Date (record.time * 1000))
+        && record
+
+    return (await response.json ())
+      .Data
+      .filter (record => (record.time * 1000) >= +this)
+      .map (timestamp)
+  }
+
+  get endpoint () {
+    const
+      aggregate = 1 // 30 = month
+    , limit     = 2000
+    , exchanges = 'CCCAGG'
+    , endpoint  = 'https://min-api.cryptocompare.com/data/histoday'
+
+    , query = [
+        `e=${exchanges}`
+      , `limit=${limit}`
+      , `tsym=${this.to}`
+      , `fsym=${this.symbols}`
+      , `aggregate=${aggregate}`
+    ].join `&`
+
+    return [endpoint,query].join `?`
+  }
+}

public/index.css

@@ -47,14 +47,14 @@ html {
 }
 
 html * {
-  margin:0;
+  margin: 0;
   padding: 0.02px 0
 }
 
 body { padding: 1.612em 0 }
 
 body > *, body > header > p {
-  margin: var(--margin);
+  margin: 0;
   margin-bottom: 1.612em
 }
 

public/index.html

@@ -2,17 +2,33 @@
 
 <title>BlackHistory.io</title>
 
+<meta charset=utf-8>
+
+<meta
+  name=viewport
+  content=
+   'initial-scale=1,
+    minimum-scale=1,
+    maximum-scale=1,
+    user-scalable=yes,
+    width=device-width,
+    height=device-height'
+>
 <link
   as=style
   href=index.css
   rel='preload stylesheet'
 >
 
+<script src=./historical.es></script>
+<script src=//unpkg.com/snuggsi></script>
+
 
 <header>
   <a
+    rel=help
     target=investopedia
-    title='What does the term Black mean?'
+    title='View Black on Investopedia.com'
     href=//investopedia.com/terms/b/black.asp>
     Black
   </a>
@@ -21,12 +37,67 @@
 
   <em>
     Pull yourself out of the
-    <a target=investopedia title='What does the term Red mean?' href=https://www.investopedia.com/terms/r/red.asp>Red</a>
+    <a
+      rel=help
+      target=investopedia
+      title='View Red on Investopedia.com'
+      href=https://investopedia.com/terms/r/red.asp>Red</a>
   </em>
 </header>
 
+
 <main>
 
+<line-chart symbol=BTC since=2015-07-01 border=3>
+  <!-- https://investopedia.com/terms/h/historical-cost.asp -->
+  <!-- https://investopedia.com/terms/h/historic-pricing.asp -->
+  <header>{symbol}
+    <a
+      rel=help
+      target=investopedia
+      title='View Historic Pricing on Investopedia.com'
+      href=https://www.investopedia.com/terms/h/historic-pricing.asp>
+      Historic Price
+    </a>
+  </header>
+
+  <canvas class=black></canvas>
+
+  <style>
+  line-chart {
+    width: 100vw;
+    height: 40vh;
+    margin: 1em 0;
+    display: block;
+    background: red;
+    text-align: center;
+    outline: 5px dashed #aaa
+  }
+
+  line-chart header {
+    font-size: 1.5em;
+    line-height: 1.6em
+  }
+
+  canvas {
+    width: 100vw;
+    height: 70vh;
+    background: green
+  }
+
+  canvas.black
+    { background: black }
+
+  canvas.red
+    { background: rgba(150,10,10,0.9) }
+
+  </style>
+
+  <script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js></script>
+  <script src=./line-chart.es></script>
+</line-chart>
+
+
   <figure class=frame>
     <iframe src=https://www.youtube.com/embed/oxMc9uZ28g0 frameborder=0 allowfullscreen></iframe>
   </figure>
@@ -35,7 +106,8 @@
 
 
 <footer>
-  Made with ❤️ by th OSS  blockchain communiy
+  Made with❤️ by the
+  <abbr title='Open Source Software'>OSS</abbr> blockchain community
   <a target=github href=//github.com/devpunks/blackhistory.io>View Source Code on Github</a>
 
   <em>&copy; Copyright 2018</em>

public/line-chart.es

@@ -0,0 +1,102 @@
+Element `line-chart`
+
+(class extends HTMLElement {
+
+  async onconnect (data, to = 'USD') {
+
+    data = await
+      (new Historical (this.symbol))
+      .convert (to)
+      .since (this.since)
+
+    this.context.labels
+      = data.map (record => this.label (record.time))
+
+    this.context.values
+      = data.map (record => record.close)
+
+    new Chart
+      ( this.canvas, this.serialize () )
+  }
+
+  label (date, MONTHS) {
+    MONTHS = [
+      'January', 'February', 'March', 'April',
+      'May', 'June', 'July', 'August', 'September',
+      'October', 'November', 'December'
+    ]
+
+    return `${MONTHS [date.getMonth ()]} ${date.getFullYear ()}`
+  }
+
+  serialize () {
+    const
+      { type, options, labels, datasets }
+        = this
+
+    , data
+        = { labels, datasets }
+
+    return { type, data, options }
+  }
+
+  get options () {
+    return {
+      hover:
+        { mode: 'x' }
+    , tooltips: {
+        mode: 'x'
+      , intersect: false
+      }
+    , scales:
+        { yAxes:
+            [ { ticks:
+                { beginAtZero: true } } ] }
+    }
+  }
+
+  get type ()
+    { return 'line' }
+
+  get symbol ()
+    { return this.getAttribute `symbol` || 'BTC' }
+
+  get since ()
+    { return new Date (this.getAttribute `since`) }
+
+  get canvas ()
+    { return this.select `canvas` }
+
+  get labels ()
+    { return this.context.labels }
+
+  get values ()
+    { return this.context.values }
+
+  get datasets () {
+    return [ {
+      label: this.symbol
+
+    , data: this.values
+
+    // http://www.chartjs.org/docs/latest/charts/line.html
+
+    , lineTension: 0
+
+    , pointRadius: 1
+
+    , pointHoverRadius: 20
+
+    , borderJoinStyle: 'miter'
+
+    , borderWidth:
+        this.getAttribute `border`
+
+    , borderColor:
+        [ 'rgba(250,250,250, 0.7)' ]
+
+    , backgroundColor:
+        [ 'rgba(255, 255, 255, 0.1)' ]
+    } ]
+  }
+})