Hashrate chart in Index page + animation

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <v-app>
       <header>
-          <v-toolbar id="navbar" dark>
+          <v-toolbar dark>
             <v-spacer></v-spacer>
             <v-avatar size="60" tile>
               <v-img src="/logo.png"> 
@@ -21,7 +21,7 @@
             ></v-text-field>
             <v-btn @click="searchFunc()" text>Search</v-btn>
             <v-spacer></v-spacer>
-            <v-toolbar-items class="hidden-sm-and-down">
+            <v-toolbar-items>
               <v-btn href="https://dero.io" text>Home</v-btn>
               <v-btn href="https://wallet.dero.io" text>Web Wallet</v-btn>
               <dropdown name="Stats" :items="this.statsItems"></dropdown>
@@ -36,8 +36,7 @@
               <router-view></router-view>
             </transition>
         </v-content>
-
-        <v-footer padless>
+        <v-footer elevation="10" padless>
           <v-card
             flat
             tile
@@ -45,10 +44,10 @@
             dark
             class="text-center"
           >
-           <!-- <v-card-text>
-              <strong>DERO:</strong> dERokevAZEZVJ2N7o39VH81BXBqX9ojtncnPTDMyiVbmYiTXQY93AUCLcor9xsWCKWhYy25ja89ikZWXWab9kXRB7LYfUmbQyS
+            <v-card-text>
+              dERokevAZEZVJ2N7o39VH81BXBqX9ojtncnPTDMyiVbmYiTXQY93AUCLcor9xsWCKWhYy25ja89ikZWXWab9kXRB7LYfUmbQyS
             </v-card-text>
-            <v-divider></v-divider>-->
+            <v-divider></v-divider>
             <v-card-text class="white--text">
               {{ new Date().getFullYear() }} — <strong>DERO Explorer</strong>
             </v-card-text>
@@ -78,18 +77,19 @@ export default {
         {
           title: "Retro Stats",
           href: "https://network.dero.io"
-        },
+        }/*,
         {
           title: "Stats",
           to: "/stats"
-        }
+        }*/
       ],
       menu: [
         { icon: 'home', title: 'Link A' },
         { icon: 'info', title: 'Link B' },
         { icon: 'warning', title: 'Link C' }
       ],
-      search: ""
+      search: "",
+      menuMobile: false
     }
   },
   mounted() {
@@ -139,7 +139,15 @@ export default {
 <style>
 #app {
   text-align: center;
-  /*color: #2c3e50;*/
+  color: white;
+}
+
+* {
+    transition: background-color 200ms ease, color 150ms ease-in-out;
+}
+
+.title-color {
+    color: #2c3e50;
 }
 
 .fade-enter-active,
@@ -157,10 +165,8 @@ export default {
   opacity: 0;
 }
 
-/*@media screen and (max-width: 960px)
+@media screen and (max-width: 960px)
 {
-  #navbar {
-    display: none;
-  }
-}*/
+
+}
 </style>

src/charts.js

@@ -19,7 +19,7 @@ function createChart(title, name, categories = [], data = [])
 {
     const options = {
         chart: {
-          height: 500,
+          //height: 500,
           type: 'line',
           background: '#424242',
           toolbar: {
@@ -44,10 +44,10 @@ function createChart(title, name, categories = [], data = [])
                 shadeIntensity: 0.65
             },
         },
-        stroke: {
+        /*stroke: {
           width: 7,
           curve: 'smooth'
-        },
+        },*/
         xaxis: {
           type: 'string',
           categories: [],
@@ -55,13 +55,13 @@ function createChart(title, name, categories = [], data = [])
               show: false
           }
         },
-        title: {
+        /*title: {
           text: 'No Text',
           align: 'center',
           style: {
             fontSize: "24px"
           }
-        },
+        },*/
         fill: {
           type: 'gradient',
           gradient: {
@@ -73,7 +73,7 @@ function createChart(title, name, categories = [], data = [])
             opacityTo: 1,
             stops: [0, 100, 100, 100]
           },
-        },
+        }/*,
         markers: {
           size: 4,
           opacity: 0.9,
@@ -83,10 +83,11 @@ function createChart(title, name, categories = [], data = [])
           hover: {
             size: 7,
           }
-        }
+        }*/
     }
 
-    options.title.text = title
+    //options.title.text = title
+    title = ""
     options.xaxis.categories = categories
 
     return {

src/router.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import Index from './views/Index.vue'
 import Block from './views/Block.vue'
 import Tx from './views/Tx.vue'
-import Stats from './views/Stats.vue'
+//import Stats from './views/Stats.vue'
 
 Vue.use(VueRouter)
 
@@ -11,7 +11,7 @@ const routes = [
     { path: '/', component: Index },
     { path: '/block/:id', component: Block },
     { path: '/tx/:hash', component: Tx },
-    { path: '/stats', component: Stats }
+    //{ path: '/stats', component: Stats }
   ];
 
 export default new VueRouter({

src/views/Block.vue

@@ -1,9 +1,9 @@
 <template>
     <div id="block">
         <div id="main">
-            <h2 class="title">Block<a :href="previous()"><v-icon>keyboard_arrow_left</v-icon></a>{{block.TopoHeight}}<a :href="next()"><v-icon>keyboard_arrow_right</v-icon></a><small class="bh">{{block.Hash}}</small></h2>
+            <h2 :class="{ 'title-color': !$vuetify.theme.dark }" class="title">Block<a :href="previous()"><v-icon>keyboard_arrow_left</v-icon></a>{{block.TopoHeight}}<a :href="next()"><v-icon>keyboard_arrow_right</v-icon></a><small class="bh">{{block.Hash}}</small></h2>
             <div v-for="(hash, i) in block.Tips" :key="i">
-                <h5 class="previous-block">Previous Block: <small @click="goTo('/block/' + hash)">{{ hash }}</small></h5>
+                <h5 :class="{ 'title-color': !$vuetify.theme.dark }" class="previous-block">Previous Block: <small @click="goTo('/block/' + hash)">{{ hash }}</small></h5>
             </div>
         </div>
         <v-divider class="div"></v-divider>
@@ -35,7 +35,7 @@
         </div>
         <v-divider class="div"></v-divider>
         <div>
-            <h1>Miner reward transaction</h1>
+            <h1 :class="{ 'title-color': !$vuetify.theme.dark }">Miner reward transaction</h1>
             <v-simple-table dark id="table">
                 <template v-slot:default>
                 <thead>
@@ -59,7 +59,7 @@
         </div>
           <v-divider class="div"></v-divider>
         <div>
-            <h1>{{ block.Tx_Count }} Transactions</h1>
+            <h1 :class="{ 'title-color': !$vuetify.theme.dark }">{{ block.Tx_Count }} Transactions</h1>
             <v-simple-table dark id="table">
                 <template v-slot:default>
                 <thead>

src/views/Index.vue

@@ -12,7 +12,7 @@
                         <li><strong>Average Block Time:</strong> {{ info.averageblocktime50 }}s</li>
                         <li><strong>Difficulty:</strong> {{ explorer.formatSupply(info.difficulty) }} </li>
                         <li><strong>Median Block Size:</strong> {{ explorer.formatSupply(info.median_block_size/1000) }} kB</li>
-                        <li><strong>Total Supply:</strong> {{ explorer.formatSupply(info.total_supply) }} DERO</li>
+                        <li><strong>Current Supply:</strong> {{ explorer.formatSupply(info.total_supply) }} DERO</li>
                     </ul>
                 </v-card-text>
             </v-card>
@@ -26,8 +26,14 @@
                     </ul>
                 </v-card-text>
             </v-card>
-
             <v-card dark class="box" elevation="10">
+                <v-card-title>HASHRATE CHART</v-card-title>
+                <v-divider></v-divider>
+                <div v-if="ready">
+                    <apexchart type="line" :options="networkChart.options" :series="networkChart.datas"></apexchart>
+                </div>
+            </v-card>
+            <!--<v-card dark class="box" elevation="10">
                 <v-card-title>PRICE INFORMATION</v-card-title>
                 <v-divider></v-divider>
                 <v-card-text>
@@ -40,11 +46,11 @@
                         <li><strong>24h Volume:</strong> {{ explorer.formatSupply(coinGecko.volume24hUSD) }} USD / {{ explorer.formatSupply(coinGecko.volume24hBTC) }} BTC</li>
                     </ul>
                 </v-card-text>
-            </v-card>
+            </v-card>-->
         </div>
         <v-divider></v-divider>
         <div class="lb"> <!-- Latest blocks -->
-            <h1>LATEST BLOCKS</h1>
+            <h1 :class="{ 'title-color': !$vuetify.theme.dark }">LATEST BLOCKS</h1>
             <v-simple-table dark id="table">
                 <template v-slot:default>
                 <thead>
@@ -77,14 +83,19 @@
 
 <script>
 import * as explorer from '../explorer.js';
+import VueApexCharts from 'vue-apexcharts'
+import * as chart from '../charts'
 
 export default {
+    components: {
+        apexchart: VueApexCharts,
+    },
     data() {
         return { 
             txs: [],
             info: {},
             blocks: [],
-            coinGecko: {
+            /*coinGecko: {
                 priceUSD: 0,
                 priceBTC: 0,
                 volume24hUSD: 0,
@@ -95,12 +106,14 @@ export default {
                 ATLpriceBTC: 0,
                 marketcap: 0,
                 market_cap_rank: 0,
-            },
-            explorer
+            },*/
+            explorer,
+            networkChart: {},
+            ready: false
         }
     },
     async mounted() {                  
-          fetch("https://api.coingecko.com/api/v3/coins/dero?localization=en&tickers=false&market_data=true&community_data=false&developer_data=false&sparkline=false")
+          /*fetch("https://api.coingecko.com/api/v3/coins/dero?localization=en&tickers=false&market_data=true&community_data=false&developer_data=false&sparkline=false")
             .then(result => result.json()).then(result => {
                 this.coinGecko.priceUSD = result.market_data.current_price.usd
                 this.coinGecko.priceBTC = result.market_data.current_price.btc
@@ -112,7 +125,7 @@ export default {
                 this.coinGecko.ATLpriceBTC = result.market_data.atl.btc
                 this.coinGecko.marketcap = result.market_data.market_cap.usd
                 this.coinGecko.market_cap_rank = result.market_data.market_cap_rank
-            })
+            })*/
 
           let pool = await explorer.getTxsPool()
 
@@ -122,6 +135,10 @@ export default {
           this.info = await explorer.getInfo()
           this.blocks = await explorer.loadBlocks(this.info.topoheight, 15)
 
+        await chart.init()
+        this.networkChart = chart.hashrateChart()
+        this.ready = true
+
           setInterval(() => {
               explorer.getInfo().then(info => {
 
@@ -186,6 +203,7 @@ export default {
 ul li {
     list-style: none;
     padding: 0;
+    margin-bottom: 2%;
 }
 
 .mempool {
@@ -212,7 +230,6 @@ ul li {
 {
     #boxes {
         flex-direction: column;
-        align-items: left;
     }
 
     .box {

src/views/Tx.vue

@@ -1,10 +1,10 @@
 <template>
     <div id="tx">
         <div id="main" class="extra">
-            <h2 class="title">Tx Hash: <small class="bh">{{tx.Hash}}</small></h2>
-            <h5 class="sub-title">Prefix Hash: <small>{{tx.PrefixHash}}</small></h5>
+            <h2 :class="{ 'title-color': !$vuetify.theme.dark }" class="title">Tx Hash: <small class="bh">{{tx.Hash}}</small></h2>
+            <h5 :class="{ 'title-color': !$vuetify.theme.dark }" class="sub-title">Prefix Hash: <small>{{tx.PrefixHash}}</small></h5>
             <!--<h5 class="sub-title">Block (valid): <small>{{tx.ValidBlock}}</small></h5>-->
-            <h5 class="sub-title">Public Key: <small>{{tx.TXpublickey}}</small></h5>
+            <h5 :class="{ 'title-color': !$vuetify.theme.dark }" class="sub-title">Public Key: <small>{{tx.TXpublickey}}</small></h5>
         </div>
         <v-divider class="div"></v-divider>
         <div id="card">
@@ -27,13 +27,13 @@
         </div>
         <v-divider class="div"></v-divider>
         <div class="extra">
-            <h4 v-if="tx.PayID8 != ''">Encrypted PaymentID: <small class="bh">{{ tx.PayID8 }}</small></h4>
-            <h4 v-if="tx.PayID32 != ''">PaymentID: <small class="bh">{{ tx.PayID32 }}</small></h4>
-            <h4>Extra: <small class="bh">{{ tx.Extra }}</small></h4>
+            <h4 :class="{ 'title-color': !$vuetify.theme.dark }" v-if="tx.PayID8 != ''">Encrypted PaymentID: <small class="bh">{{ tx.PayID8 }}</small></h4>
+            <h4 :class="{ 'title-color': !$vuetify.theme.dark }" v-if="tx.PayID32 != ''">PaymentID: <small class="bh">{{ tx.PayID32 }}</small></h4>
+            <h4 :class="{ 'title-color': !$vuetify.theme.dark }">Extra: <small class="bh">{{ tx.Extra }}</small></h4>
         </div>
         <v-divider class="div"></v-divider>
         <div>
-            <h1>Block</h1>
+            <h1 :class="{ 'title-color': !$vuetify.theme.dark }">Block</h1>
             <v-simple-table dark id="table">
                 <template v-slot:default>
                 <thead>
@@ -54,7 +54,7 @@
         </div>
         <v-divider class="div"></v-divider>
         <div>
-            <h1>Outputs ({{ tx.OutAddress.length }})</h1>
+            <h1 :class="{ 'title-color': !$vuetify.theme.dark }">Outputs ({{ tx.OutAddress.length }})</h1>
             <v-simple-table dark id="table">
                 <template v-slot:default>
                 <thead>
@@ -76,9 +76,9 @@
         </div>
         <v-divider v-show="tx.Keyimages.length > 0" class="div"></v-divider>
         <div v-show="tx.Keyimages.length > 0">
-            <h1>Inputs ({{ tx.Keyimages.length }})</h1>
+            <h1 :class="{ 'title-color': !$vuetify.theme.dark }">Inputs ({{ tx.Keyimages.length }})</h1>
             <div v-for="(ki, i) in tx.Keyimages" :key="i">
-                <h5 class="ki">{{ i }}: Key Image {{ ki }}</h5>
+                <h5 :class="{ 'title-color': !$vuetify.theme.dark }" class="ki">{{ i }}: Key Image {{ ki }}</h5>
                 <v-simple-table dark id="table">
                 <template v-slot:default>
                 <thead>