Browse Source

Adding charts on every coin

Emixa 4 years ago
parent
commit
b7b8d1e7c1
6 changed files with 116 additions and 6 deletions
  1. 11 4
      app.py
  2. 9 0
      static/js/Chart.min.js
  3. 4 1
      static/js/app.js
  4. 28 0
      static/js/draw_chart.js
  5. 1 1
      templates/async_list.html
  6. 63 0
      templates/chart_coin.html

+ 11 - 4
app.py

@@ -15,7 +15,7 @@ session = Session()
 def result50(date=datetime.now()):
     result = []
     for x in session.query(CoinMarketPosition,Coin).filter(func.Date(CoinMarketPosition.date) == date.date()).distinct(Coin.id).join(Coin).order_by(CoinMarketPosition.market_caps.desc()).limit(50).all():
-        result.append((x[1].symbol, x[0].market_caps, x[0].prices))
+        result.append((x[1].symbol, x[0].market_caps, x[0].prices, x[1].id))
     return result
     
 @app.route("/")
@@ -27,13 +27,20 @@ def top50async(date="2020-01-12"):
 def top50json(date):
     d = datetime.strptime(date, "%d-%m-%Y")
     results = result50(d)
-    arr = [{'name':x[0],'marketCap':x[1], 'prices':x[2]} for x in results]
+    arr = [{'name':x[0],'marketCap':x[1], 'prices':x[2], 'id':x[3]} for x in results]
     return jsonify(arr)
 
 @app.route('/coin/<id>/')
 def coinHistory(id):
-    results = session.query(CoinMarketPosition).filter(CoinMarketPosition.coin_id==id).all()
-    return jsonify([ {'date':marketPos.date,'marketCap':marketPos.market_caps} for marketPos in results])
+    results = session.query(CoinMarketPosition, Coin).filter(Coin.id==id).join(CoinMarketPosition).all()
+    return jsonify([ {'date':marketPos[0].date,'prices':marketPos[0].prices, 'name':marketPos[1].symbol} for marketPos in results])
+
+@app.route('/coin/chart/<id>/')
+def coinChart(id="bitcoin"):
+    currentCoin = session.query(Coin).filter(Coin.id==id).first()
+    nextRowId = currentCoin.row_id + 1 
+    nextCoin = session.query(Coin).filter(Coin.row_id==nextRowId).first()
+    return render_template('chart_coin.html', id=id , nextId=nextCoin.id)
 
 if __name__ == '__main__':
     app.run(debug=True)

File diff suppressed because it is too large
+ 9 - 0
static/js/Chart.min.js


+ 4 - 1
static/js/app.js

@@ -13,7 +13,7 @@ const coinTop50 = {
       }
     },
     created(){
-      this.requestData = _.debounce(this.requestData,500)
+      this.requestData = _.debounce(this.requestData,200)
     },
     mounted() {
       this.requestData(this.date)
@@ -51,6 +51,9 @@ const coinTop50 = {
       displayRoundedPrice(price){
         var precision = -Math.floor( Math.log10(price) + 1);
         return price.toLocaleString();
+      },
+      getChart(id){
+        window.location = "/coin/chart/"+id+"/";
       }
     }
   }

+ 28 - 0
static/js/draw_chart.js

@@ -0,0 +1,28 @@
+window.onload = function () {
+  var symbol = document.getElementById("startID").innerText;
+  fetch("/coin/"+symbol+"/").then(response => response.json()).then(
+    function(jsonData) {
+      points = generateDataPoints(jsonData)
+      var chart = new CanvasJS.Chart("chartContainer",
+      {
+       data: [
+       {
+        type: "line",
+        dataPoints: points
+      }
+      ]
+    });
+      chart.render();
+    });
+}
+
+function generateDataPoints(coinArray) {
+  var i, arr = [];
+  for (i = 0; i < coinArray.length; i++) {
+    arr.push({
+      y: coinArray[i].prices,
+      label: coinArray[i].date
+    });
+  }
+  return arr;
+}

+ 1 - 1
templates/async_list.html

@@ -60,7 +60,7 @@
         {% raw %}
         <transition-group name="flip-list" tag="div" class="row">
           <div class=" col xl2 l3 m4 s6" v-for="item,k in items" :key="item.name">
-            <div class="card-panel blue-grey">
+            <div class="card-panel blue-grey" @click="getChart(item.id)">
               <div class="white-text currency">{{k+1}}. {{ item.name }} : ${{ displayRoundedPrice(item.prices) }}</div>
               <div class="white-text amount">{{ Math.round(item.marketCap).toLocaleString() }}</div>
             </div>

+ 63 - 0
templates/chart_coin.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <style>
+      .flip-list-move {
+        transition: transform 1s;
+      }
+      .flip-list-enter-active, .flip-list-leave-active {
+        transition: all .2s;
+      }
+      .flip-list-enter, .flip-list-leave-to {
+        opacity: 0;
+        transform: translateX(30px);
+      }
+      .currency{
+        font-weight: bold;
+        white-space: nowrap;
+      }
+      .amount{
+        text-align: end;
+        width: 100%;
+        font-family: "Roboto Mono", monospace;
+        font-size:0.9rem;
+      }
+      .amount::before{
+        content: "$ ";
+      }
+    </style>
+  </head>
+
+  <body>
+</div>
+    <div id="startID" class="hide">{{id}}</div>
+    <nav class="nav-extended">
+      <div class="nav-wrapper blue-grey">
+        <div class="col s12">
+          <a class="brand-logo">Max app</a>
+        </div>
+      </div>
+    </nav>
+    <a class="btn" href="/coin/chart/{{nextId}}">Go to Next One</a>
+    <h1 text-align='center'>{{id}}</h1>
+
+   <div id="chartContainer" style="height: 100%; width: 100%;">
+    
+    <!--JavaScript at end of body for optimized loading-->
+    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <script src="https://unpkg.com/vue@next"></script>
+    <script src="{{ url_for('static', filename='js/draw_chart.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/round.js')}}"></script>
+  </body>
+</html>

Some files were not shown because too many files changed in this diff