Price chart

src/components/widgets/BaseInfoWidget.vue

@@ -13,15 +13,15 @@
 		<template #body>
 			<b-container fluid style="height: 100%">
 				<b-row>
-					<!-- <b-col class="ex-item" sm="3" lg="12">
+					<b-col class="ex-item" sm="3" lg="3">
 						<div class="ex-item-title">
 							{{getNameByKey('price')}}
 						</div>
 						<div class="ex-item-value">
 							{{marketData.price}}
 						</div>
 					</b-col>
-					<b-col class="ex-item" sm="3" lg="12">
+					<!-- <b-col class="ex-item" sm="3" lg="3">
 						<div class="ex-item-title">
 							{{getNameByKey('marketCap')}}
 						</div>

src/components/widgets/PriceChartWidget.vue

@@ -1,7 +1,7 @@
 <template>
 	<Card :loading="loading">
 		<template #title>
-			{{getNameByKey('xemPrice')}}
+			{{getNameByKey('xymPrice')}}
 		</template>
 
 		<template #control>

src/config/i18n/en-us.json

@@ -101,7 +101,7 @@
     "searchBoxPlaceholder": "Search block / tx hash / account address / mosaic id / namespace id",
     "nodes": "Nodes",
     "home": "Home",
-    "xemPrice": "XEM Price",
+    "xymPrice": "XYM Price",
     "baseInfo": "Base Info",
     "price": "Price",
     "marketCap": "Market Cap",

src/config/i18n/es.json

@@ -101,7 +101,7 @@
     "searchBoxPlaceholder": "Search block / tx hash / account address / mosaic id / namespace id",
     "nodes": "Nodes",
     "home": "Home",
-    "xemPrice": "XEM Price",
+    "xymPrice": "XYM Price",
     "baseInfo": "Base Info",
     "price": "Price",
     "marketCap": "Market Cap",

src/config/i18n/ja.json

@@ -101,7 +101,7 @@
     "searchBoxPlaceholder": "ブロック / TXハッシュ / アドレス / モザイクID / ネームスペースID を検索",
     "nodes": "ノード",
     "home": "ホーム",
-    "xemPrice": "XEM相場",
+    "xymPrice": "XYM相場",
     "baseInfo": "基本情報",
     "price": "相場",
     "marketCap": "マーケットキャップ",

src/config/i18n/pt.json

@@ -102,7 +102,7 @@
     "searchBoxPlaceholder": "Search block / tx hash / account address / mosaic id / namespace id",
     "nodes": "Nodes",
     "home": "Home",
-    "xemPrice": "XEM Price",
+    "xymPrice": "XYM Price",
     "baseInfo": "Base Info",
     "price": "Price",
     "marketCap": "Market Cap",

src/config/i18n/ru.json

@@ -101,7 +101,7 @@
     "searchBoxPlaceholder": "Поиск Блока / транзакционный хэш / аккаунт / идентификатор мозаики / идентификатор пространства имен",
     "nodes": "Узлы",
     "home": "Домашняя",
-    "xemPrice": "XEM Цена",
+    "xymPrice": "XYM Цена",
     "baseInfo": "Базовая информация",
     "price": "Цена",
     "marketCap": "Рыночная капитализация",

src/config/i18n/ua.json

@@ -101,7 +101,7 @@
     "searchBoxPlaceholder": "Шукати блок / хеш транзакції / адреса",
     "nodes": "Вузли",
     "home": "Домашня",
-    "xemPrice": "Ціна XEM",
+    "xymPrice": "Ціна XYM",
     "baseInfo": "Загальна інформація",
     "price": "Ціна",
     "marketCap": "Капіталізація ринку",

src/config/i18n/zh.json

@@ -101,7 +101,7 @@
     "searchBoxPlaceholder": "Search block / tx hash / account address / mosaic id / namespace id",
     "nodes": "Nodes",
     "home": "Home",
-    "xemPrice": "XEM Price",
+    "xymPrice": "XYM Price",
     "baseInfo": "Base Info",
     "price": "Price",
     "marketCap": "Market Cap",

src/infrastructure/DataService.js

@@ -35,7 +35,7 @@ class DataService {
   				return resolve(res.data.DISPLAY);
   			})
   			.catch(error => {
-  				// reject(new Error('Fail to request XEM price.'))
+  				// reject(new Error(`Fail to request ${cryptocurrency} price.`))
   				reject(new Error(error));
   			});
   	});
@@ -48,15 +48,16 @@ class DataService {
    */
   static getHistoricalHourlyGraph = (cryptocurrency) => {
   	return new Promise((resolve, reject) => {
-  		let url = http.marketDataUrl + `data/histohour?fsym=${cryptocurrency}&tsym=USD&limit=168`;
+  		// Request price from exchange 'Gateio' default 'cccagg'
+  		let url = http.marketDataUrl + `data/histohour?fsym=${cryptocurrency}&tsym=USDT&limit=168&e=Gateio`;
 
   		axios
   			.get(url)
   			.then(res => {
   				return resolve(res.data);
   			})
   			.catch(error => {
-  				// reject(new Error('Fail to request Xem historical hourly graph.'))
+  				// reject(new Error(`Fail to request ${cryptocurrency} historical hourly graph.`))
   				reject(new Error(error));
   			});
   	});

src/store/chain.js

@@ -17,7 +17,7 @@
  */
 
 import Lock from './lock';
-import { NodeService, ChainService } from '../infrastructure';
+import { NodeService, ChainService, DataService } from '../infrastructure';
 import { RoleType } from 'symbol-sdk';
 
 const LOCK = Lock.create();
@@ -68,8 +68,8 @@ export default {
 			state.storageInfo.numAccounts = storageInfo.numAccounts;
 		},
 		setMarketData: (state, { marketData, graphData }) => {
-			state.marketData.price = marketData.XEM.USD.PRICE;
-			state.marketData.marketCap = marketData.XEM.USD.MKTCAP;
+			state.marketData.price = marketData.XYM.USD.PRICE;
+			state.marketData.marketCap = marketData.XYM.USD.MKTCAP;
 			state.marketData.historicalHourlyGraph = graphData;
 		},
 		setChainInfo: (state, { currentHeight, finalizedBlockHeight, isVotingNode }) => {
@@ -104,10 +104,10 @@ export default {
 		// Fetch data from the SDK / API and initialize the page.
 		async initializePage({ commit, dispatch }) {
 			commit('setLoading', true);
-			const [storageInfo, /* marketData, xemGraph, */ nodeStats] = await Promise.all([
+			const [storageInfo, marketData, xemGraph, nodeStats] = await Promise.all([
 				NodeService.getStorageInfo(),
-				// DataService.getMarketPrice('XEM'),
-				// DataService.getHistoricalHourlyGraph('XEM'),
+				DataService.getMarketPrice('XYM'),
+				DataService.getHistoricalHourlyGraph('XYM'),
 				NodeService.getNodeStats().catch(() => {})
 			]);
 
@@ -116,22 +116,22 @@ export default {
 			commit('setStorageInfo', storageInfo);
 			await dispatch('getChainInfo');
 
-			// let graphData = [];
+			let graphData = [];
 
-			// if (xemGraph) {
-			// 	xemGraph.Data.map((item, index) => {
-			// 		let graphDataItem = {};
+			if (xemGraph) {
+				xemGraph.Data.map((item, index) => {
+					let graphDataItem = {};
 
-			// 		graphDataItem.y = [];
-			// 		graphDataItem.x = new Date(item['time'] * 1000);
-			// 		graphDataItem.y[0] = item['open']; // parseFloat(item['open']).toFixed(4)
-			// 		graphDataItem.y[1] = item['high']; // parseFloat(item['high']).toFixed(4)
-			// 		graphDataItem.y[2] = item['low']; // parseFloat(item['low']).toFixed(4)
-			// 		graphDataItem.y[3] = item['close']; // parseFloat(item['close']).toFixed(4)
-			// 		graphData.push(graphDataItem);
-			// 	});
-			// }
-			// commit('setMarketData', { marketData, graphData });
+					graphDataItem.y = [];
+					graphDataItem.x = new Date(item['time'] * 1000);
+					graphDataItem.y[0] = item['open']; // parseFloat(item['open']).toFixed(4)
+					graphDataItem.y[1] = item['high']; // parseFloat(item['high']).toFixed(4)
+					graphDataItem.y[2] = item['low']; // parseFloat(item['low']).toFixed(4)
+					graphDataItem.y[3] = item['close']; // parseFloat(item['close']).toFixed(4)
+					graphData.push(graphDataItem);
+				});
+			}
+			commit('setMarketData', { marketData, graphData });
 
 			if (nodeStats)
 				commit('setNodeStats', nodeStats.nodeTypes);

src/views/Home.vue

@@ -19,9 +19,9 @@
 <template>
 	<b-container fluid class="px-0 py-0">
 		<b-row class="my-4 mx-0 mx-xs-0 mx-md-4 mx-lg-8">
-			<!-- <b-col xs="12" md="12" lg="9" style="display: flex">
+			<b-col xs="12" md="12" lg="12" style="display: flex">
 				<PriceChartWidget style="width: 100%"/>
-			</b-col> -->
+			</b-col>
 			<b-col xs="12" md="12" lg="12" style="display: flex">
 				<BaseInfoWidget style="width: 100%"/>
 			</b-col>
@@ -36,7 +36,7 @@
 </template>
 <script>
 import BaseInfoWidget from '@/components/widgets/BaseInfoWidget.vue';
-// import PriceChartWidget from '@/components/widgets/PriceChartWidget.vue';
+import PriceChartWidget from '@/components/widgets/PriceChartWidget.vue';
 import RecentBlocksWidget from '@/components/widgets/RecentBlocksWidget.vue';
 import RecentTransactionsWidget from '@/components/widgets/RecentTransactionsWidget.vue';
 
@@ -45,7 +45,7 @@ export default {
 
 	components: {
 		BaseInfoWidget,
-		// PriceChartWidget,
+		PriceChartWidget,
 		RecentBlocksWidget,
 		RecentTransactionsWidget
 	},