Add chart js files
This commit is contained in:
AlphaX-Projects
GitHub
parent
5bb1570a35
commit
f8ceaa56c5
@ -0,0 +1,214 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
import { render } from 'lit/html.js'
|
||||||
|
import { Epml } from '../../../../epml.js'
|
||||||
|
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||||
|
|
||||||
|
registerTranslateConfig({
|
||||||
|
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||||
|
})
|
||||||
|
|
||||||
|
import '@polymer/paper-dialog/paper-dialog.js'
|
||||||
|
import * as Highcharts from 'highcharts'
|
||||||
|
import Exporting from 'highcharts/modules/exporting'
|
||||||
|
Exporting(Highcharts)
|
||||||
|
import StockChart from 'highcharts/modules/stock'
|
||||||
|
StockChart(Highcharts)
|
||||||
|
import 'highcharts/highcharts-more.js'
|
||||||
|
import 'highcharts/modules/accessibility.js'
|
||||||
|
import 'highcharts/modules/boost.js'
|
||||||
|
import 'highcharts/modules/data.js'
|
||||||
|
import 'highcharts/modules/export-data.js'
|
||||||
|
import 'highcharts/modules/offline-exporting.js'
|
||||||
|
|
||||||
|
let arrrChartDialog
|
||||||
|
|
||||||
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||||
|
|
||||||
|
class ArrrCharts extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
isLoadingTradesChart: { type: Boolean },
|
||||||
|
arrrTrades: { type: Array },
|
||||||
|
arrrPrice: { type: Array }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
.loadingContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trades-chart {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin: auto;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
height: 30vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-info-wrapper {
|
||||||
|
background: transparent;
|
||||||
|
height: 38vh;
|
||||||
|
width: 83vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-loading-wrapper {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.arrrTrades = []
|
||||||
|
this.arrrPrice = []
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<paper-dialog id="loadChartDialog" class="chart-loading-wrapper" modal>
|
||||||
|
<div class="loadingContainer" style="display:${this.isLoadingTradesChart ? 'inline-block' : 'none'}">
|
||||||
|
<span style="color: var(--black);">${translate("login.loading")}</span>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
<paper-dialog id="arrrChartDialog" class="chart-info-wrapper">
|
||||||
|
<div class="chart-container">
|
||||||
|
<div id='arrrStockPriceContainer' class='trades-chart'></div>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
async firstUpdated() {
|
||||||
|
this.changeTheme()
|
||||||
|
this.changeLanguage()
|
||||||
|
|
||||||
|
window.addEventListener('storage', () => {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
|
||||||
|
use(checkLanguage)
|
||||||
|
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTradesChart() {
|
||||||
|
this.isLoadingTradesChart = true
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').open()
|
||||||
|
await this.getArrrTrades()
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').close()
|
||||||
|
this.enableArrrStockPriceChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getArrrTrades() {
|
||||||
|
let currentArrrTimestamp = Date.now()
|
||||||
|
const monthBackArrr = currentArrrTimestamp - 31556952000
|
||||||
|
await parentEpml.request("apiCall", { url: `/crosschain/trades?foreignBlockchain=PIRATECHAIN&minimumTimestamp=${monthBackArrr}&limit=0&reverse=false` }).then((res) => {
|
||||||
|
this.arrrTrades = res
|
||||||
|
})
|
||||||
|
this.arrrPrice = this.arrrTrades.map(item => {
|
||||||
|
const arrrSellPrice = this.round(parseFloat(item.foreignAmount) / parseFloat(item.qortAmount))
|
||||||
|
return [item.tradeTimestamp, parseFloat(arrrSellPrice)]
|
||||||
|
}).filter(item => !!item)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableArrrStockPriceChart() {
|
||||||
|
const arrrStockPriceData = this.arrrPrice
|
||||||
|
const header = 'QORT / ARRR ' + get("tradepage.tchange49")
|
||||||
|
Highcharts.stockChart(this.shadowRoot.querySelector('#arrrStockPriceContainer'), {
|
||||||
|
accessibility: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
credits: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 1,
|
||||||
|
labelStyle: {color: 'var(--black)'},
|
||||||
|
inputStyle: {color: '#03a9f4'}
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: header,
|
||||||
|
style: {color: 'var(--black)'}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'QORT / ARRR',
|
||||||
|
data: arrrStockPriceData,
|
||||||
|
tooltip: {
|
||||||
|
valueDecimals: 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async open() {
|
||||||
|
await this.loadTradesChart()
|
||||||
|
this.shadowRoot.getElementById('arrrChartDialog').open()
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme() {
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLanguage() {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
|
||||||
|
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||||
|
localStorage.setItem('qortalLanguage', 'us')
|
||||||
|
use('us')
|
||||||
|
} else {
|
||||||
|
use(checkLanguage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
round(number) {
|
||||||
|
let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('arrr-charts', ArrrCharts)
|
||||||
|
|
||||||
|
const chartsarrr = document.createElement('arrr-charts')
|
||||||
|
arrrChartDialog = document.body.appendChild(chartsarrr)
|
||||||
|
|
||||||
|
export default arrrChartDialog
|
||||||
215
qortal-ui-plugins/plugins/core/trade-portal/charts/btc-charts.js
Normal file
215
qortal-ui-plugins/plugins/core/trade-portal/charts/btc-charts.js
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
import { render } from 'lit/html.js'
|
||||||
|
import { Epml } from '../../../../epml.js'
|
||||||
|
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||||
|
|
||||||
|
registerTranslateConfig({
|
||||||
|
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||||
|
})
|
||||||
|
|
||||||
|
import '@polymer/paper-dialog/paper-dialog.js'
|
||||||
|
import * as Highcharts from 'highcharts'
|
||||||
|
import Exporting from 'highcharts/modules/exporting'
|
||||||
|
Exporting(Highcharts)
|
||||||
|
import StockChart from 'highcharts/modules/stock'
|
||||||
|
StockChart(Highcharts)
|
||||||
|
import 'highcharts/highcharts-more.js'
|
||||||
|
import 'highcharts/modules/accessibility.js'
|
||||||
|
import 'highcharts/modules/boost.js'
|
||||||
|
import 'highcharts/modules/data.js'
|
||||||
|
import 'highcharts/modules/export-data.js'
|
||||||
|
import 'highcharts/modules/offline-exporting.js'
|
||||||
|
|
||||||
|
let btcChartDialog
|
||||||
|
|
||||||
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||||
|
|
||||||
|
class BtcCharts extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
isLoadingTradesChart: { type: Boolean },
|
||||||
|
btcTrades: { type: Array },
|
||||||
|
btcPrice: { type: Array }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
.loadingContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trades-chart {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin: auto;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
height: 30vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-info-wrapper {
|
||||||
|
background: transparent;
|
||||||
|
height: 38vh;
|
||||||
|
width: 83vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-loading-wrapper {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.btcTrades = []
|
||||||
|
this.btcPrice = []
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<paper-dialog id="loadChartDialog" class="chart-loading-wrapper" modal>
|
||||||
|
<div class="loadingContainer" style="display:${this.isLoadingTradesChart ? 'inline-block' : 'none'}">
|
||||||
|
<span style="color: var(--black);">${translate("login.loading")}</span>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
<paper-dialog id="btcChartDialog" class="chart-info-wrapper">
|
||||||
|
<div class="chart-container">
|
||||||
|
<div id='btcStockPriceContainer' class='trades-chart'></div>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
async firstUpdated() {
|
||||||
|
this.changeTheme()
|
||||||
|
this.changeLanguage()
|
||||||
|
|
||||||
|
window.addEventListener('storage', () => {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
|
||||||
|
use(checkLanguage)
|
||||||
|
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTradesChart() {
|
||||||
|
this.isLoadingTradesChart = true
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').open()
|
||||||
|
await this.getBtcTrades()
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').close()
|
||||||
|
this.enableBtcStockPriceChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getBtcTrades() {
|
||||||
|
let currentBtcTimestamp = Date.now()
|
||||||
|
const monthBackBtc = currentBtcTimestamp - 31556952000
|
||||||
|
await parentEpml.request("apiCall", { url: `/crosschain/trades?foreignBlockchain=BITCOIN&minimumTimestamp=${monthBackBtc}&limit=0&reverse=false` }).then((res) => {
|
||||||
|
this.btcTrades = res
|
||||||
|
})
|
||||||
|
|
||||||
|
this.btcPrice = this.btcTrades.map(item => {
|
||||||
|
const btcSellPrice = this.round(parseFloat(item.foreignAmount) / parseFloat(item.qortAmount))
|
||||||
|
return [item.tradeTimestamp, parseFloat(btcSellPrice)]
|
||||||
|
}).filter(item => !!item)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableBtcStockPriceChart() {
|
||||||
|
const btcStockPriceData = this.btcPrice
|
||||||
|
const header = 'QORT / BTC ' + get("tradepage.tchange49")
|
||||||
|
Highcharts.stockChart(this.shadowRoot.querySelector('#btcStockPriceContainer'), {
|
||||||
|
accessibility: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
credits: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 1,
|
||||||
|
labelStyle: {color: 'var(--black)'},
|
||||||
|
inputStyle: {color: '#03a9f4'}
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: header,
|
||||||
|
style: {color: 'var(--black)'}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'QORT / BTC',
|
||||||
|
data: btcStockPriceData,
|
||||||
|
tooltip: {
|
||||||
|
valueDecimals: 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async open() {
|
||||||
|
await this.loadTradesChart()
|
||||||
|
this.shadowRoot.getElementById('btcChartDialog').open()
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme() {
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLanguage() {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
|
||||||
|
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||||
|
localStorage.setItem('qortalLanguage', 'us')
|
||||||
|
use('us')
|
||||||
|
} else {
|
||||||
|
use(checkLanguage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
round(number) {
|
||||||
|
let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('btc-charts', BtcCharts)
|
||||||
|
|
||||||
|
const chartsbtc = document.createElement('btc-charts')
|
||||||
|
btcChartDialog = document.body.appendChild(chartsbtc)
|
||||||
|
|
||||||
|
export default btcChartDialog
|
||||||
214
qortal-ui-plugins/plugins/core/trade-portal/charts/dgb-charts.js
Normal file
214
qortal-ui-plugins/plugins/core/trade-portal/charts/dgb-charts.js
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
import { render } from 'lit/html.js'
|
||||||
|
import { Epml } from '../../../../epml.js'
|
||||||
|
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||||
|
|
||||||
|
registerTranslateConfig({
|
||||||
|
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||||
|
})
|
||||||
|
|
||||||
|
import '@polymer/paper-dialog/paper-dialog.js'
|
||||||
|
import * as Highcharts from 'highcharts'
|
||||||
|
import Exporting from 'highcharts/modules/exporting'
|
||||||
|
Exporting(Highcharts)
|
||||||
|
import StockChart from 'highcharts/modules/stock'
|
||||||
|
StockChart(Highcharts)
|
||||||
|
import 'highcharts/highcharts-more.js'
|
||||||
|
import 'highcharts/modules/accessibility.js'
|
||||||
|
import 'highcharts/modules/boost.js'
|
||||||
|
import 'highcharts/modules/data.js'
|
||||||
|
import 'highcharts/modules/export-data.js'
|
||||||
|
import 'highcharts/modules/offline-exporting.js'
|
||||||
|
|
||||||
|
let dgbChartDialog
|
||||||
|
|
||||||
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||||
|
|
||||||
|
class DgbCharts extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
isLoadingTradesChart: { type: Boolean },
|
||||||
|
dgbTrades: { type: Array },
|
||||||
|
dgbPrice: { type: Array }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
.loadingContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trades-chart {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin: auto;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
height: 30vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-info-wrapper {
|
||||||
|
background: transparent;
|
||||||
|
height: 38vh;
|
||||||
|
width: 83vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-loading-wrapper {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.dgbTrades = []
|
||||||
|
this.dgbPrice = []
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<paper-dialog id="loadChartDialog" class="chart-loading-wrapper" modal>
|
||||||
|
<div class="loadingContainer" style="display:${this.isLoadingTradesChart ? 'inline-block' : 'none'}">
|
||||||
|
<span style="color: var(--black);">${translate("login.loading")}</span>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
<paper-dialog id="dgbChartDialog" class="chart-info-wrapper">
|
||||||
|
<div class="chart-container">
|
||||||
|
<div id='dgbStockPriceContainer' class='trades-chart'></div>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
async firstUpdated() {
|
||||||
|
this.changeTheme()
|
||||||
|
this.changeLanguage()
|
||||||
|
|
||||||
|
window.addEventListener('storage', () => {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
|
||||||
|
use(checkLanguage)
|
||||||
|
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTradesChart() {
|
||||||
|
this.isLoadingTradesChart = true
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').open()
|
||||||
|
await this.getDgbTrades()
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').close()
|
||||||
|
this.enableDgbStockPriceChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getDgbTrades() {
|
||||||
|
let currentDgbTimestamp = Date.now()
|
||||||
|
const monthBackDgb = currentDgbTimestamp - 31556952000
|
||||||
|
await parentEpml.request("apiCall", { url: `/crosschain/trades?foreignBlockchain=DIGIBYTE&minimumTimestamp=${monthBackDgb}&limit=0&reverse=false` }).then((res) => {
|
||||||
|
this.dgbTrades = res
|
||||||
|
})
|
||||||
|
this.dgbPrice = this.dgbTrades.map(item => {
|
||||||
|
const dgbSellPrice = this.round(parseFloat(item.foreignAmount) / parseFloat(item.qortAmount))
|
||||||
|
return [item.tradeTimestamp, parseFloat(dgbSellPrice)]
|
||||||
|
}).filter(item => !!item)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableDgbStockPriceChart() {
|
||||||
|
const dgbStockPriceData = this.dgbPrice
|
||||||
|
const header = 'QORT / DGB ' + get("tradepage.tchange49")
|
||||||
|
Highcharts.stockChart(this.shadowRoot.querySelector('#dgbStockPriceContainer'), {
|
||||||
|
accessibility: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
credits: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 1,
|
||||||
|
labelStyle: {color: 'var(--black)'},
|
||||||
|
inputStyle: {color: '#03a9f4'}
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: header,
|
||||||
|
style: {color: 'var(--black)'}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'QORT / DGB',
|
||||||
|
data: dgbStockPriceData,
|
||||||
|
tooltip: {
|
||||||
|
valueDecimals: 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async open() {
|
||||||
|
await this.loadTradesChart()
|
||||||
|
this.shadowRoot.getElementById('dgbChartDialog').open()
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme() {
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLanguage() {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
|
||||||
|
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||||
|
localStorage.setItem('qortalLanguage', 'us')
|
||||||
|
use('us')
|
||||||
|
} else {
|
||||||
|
use(checkLanguage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
round(number) {
|
||||||
|
let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('dgb-charts', DgbCharts)
|
||||||
|
|
||||||
|
const chartsdgb = document.createElement('dgb-charts')
|
||||||
|
dgbChartDialog = document.body.appendChild(chartsdgb)
|
||||||
|
|
||||||
|
export default dgbChartDialog
|
||||||
@ -0,0 +1,214 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
import { render } from 'lit/html.js'
|
||||||
|
import { Epml } from '../../../../epml.js'
|
||||||
|
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||||
|
|
||||||
|
registerTranslateConfig({
|
||||||
|
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||||
|
})
|
||||||
|
|
||||||
|
import '@polymer/paper-dialog/paper-dialog.js'
|
||||||
|
import * as Highcharts from 'highcharts'
|
||||||
|
import Exporting from 'highcharts/modules/exporting'
|
||||||
|
Exporting(Highcharts)
|
||||||
|
import StockChart from 'highcharts/modules/stock'
|
||||||
|
StockChart(Highcharts)
|
||||||
|
import 'highcharts/highcharts-more.js'
|
||||||
|
import 'highcharts/modules/accessibility.js'
|
||||||
|
import 'highcharts/modules/boost.js'
|
||||||
|
import 'highcharts/modules/data.js'
|
||||||
|
import 'highcharts/modules/export-data.js'
|
||||||
|
import 'highcharts/modules/offline-exporting.js'
|
||||||
|
|
||||||
|
let dogeChartDialog
|
||||||
|
|
||||||
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||||
|
|
||||||
|
class DogeCharts extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
isLoadingTradesChart: { type: Boolean },
|
||||||
|
dogeTrades: { type: Array },
|
||||||
|
dogePrice: { type: Array }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
.loadingContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trades-chart {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin: auto;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
height: 30vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-info-wrapper {
|
||||||
|
background: transparent;
|
||||||
|
height: 38vh;
|
||||||
|
width: 83vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-loading-wrapper {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.dogeTrades = []
|
||||||
|
this.dogePrice = []
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<paper-dialog id="loadChartDialog" class="chart-loading-wrapper" modal>
|
||||||
|
<div class="loadingContainer" style="display:${this.isLoadingTradesChart ? 'inline-block' : 'none'}">
|
||||||
|
<span style="color: var(--black);">${translate("login.loading")}</span>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
<paper-dialog id="dogeChartDialog" class="chart-info-wrapper">
|
||||||
|
<div class="chart-container">
|
||||||
|
<div id='dogeStockPriceContainer' class='trades-chart'></div>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
async firstUpdated() {
|
||||||
|
this.changeTheme()
|
||||||
|
this.changeLanguage()
|
||||||
|
|
||||||
|
window.addEventListener('storage', () => {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
|
||||||
|
use(checkLanguage)
|
||||||
|
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTradesChart() {
|
||||||
|
this.isLoadingTradesChart = true
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').open()
|
||||||
|
await this.getDogeTrades()
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').close()
|
||||||
|
this.enableDogeStockPriceChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getDogeTrades() {
|
||||||
|
let currentDogeTimestamp = Date.now()
|
||||||
|
const monthBackDoge = currentDogeTimestamp - 31556952000
|
||||||
|
await parentEpml.request("apiCall", { url: `/crosschain/trades?foreignBlockchain=DOGECOIN&minimumTimestamp=${monthBackDoge}&limit=0&reverse=false` }).then((res) => {
|
||||||
|
this.dogeTrades = res
|
||||||
|
})
|
||||||
|
this.dogePrice = this.dogeTrades.map(item => {
|
||||||
|
const dogeSellPrice = this.round(parseFloat(item.foreignAmount) / parseFloat(item.qortAmount))
|
||||||
|
return [item.tradeTimestamp, parseFloat(dogeSellPrice)]
|
||||||
|
}).filter(item => !!item)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableDogeStockPriceChart() {
|
||||||
|
const dogeStockPriceData = this.dogePrice
|
||||||
|
const header = 'QORT / DOGE ' + get("tradepage.tchange49")
|
||||||
|
Highcharts.stockChart(this.shadowRoot.querySelector('#dogeStockPriceContainer'), {
|
||||||
|
accessibility: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
credits: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 1,
|
||||||
|
labelStyle: {color: 'var(--black)'},
|
||||||
|
inputStyle: {color: '#03a9f4'}
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: header,
|
||||||
|
style: {color: 'var(--black)'}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'QORT / DOGE',
|
||||||
|
data: dogeStockPriceData,
|
||||||
|
tooltip: {
|
||||||
|
valueDecimals: 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async open() {
|
||||||
|
await this.loadTradesChart()
|
||||||
|
this.shadowRoot.getElementById('dogeChartDialog').open()
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme() {
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLanguage() {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
|
||||||
|
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||||
|
localStorage.setItem('qortalLanguage', 'us')
|
||||||
|
use('us')
|
||||||
|
} else {
|
||||||
|
use(checkLanguage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
round(number) {
|
||||||
|
let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('doge-charts', DogeCharts)
|
||||||
|
|
||||||
|
const chartsdoge = document.createElement('doge-charts')
|
||||||
|
dogeChartDialog = document.body.appendChild(chartsdoge)
|
||||||
|
|
||||||
|
export default dogeChartDialog
|
||||||
214
qortal-ui-plugins/plugins/core/trade-portal/charts/ltc-charts.js
Normal file
214
qortal-ui-plugins/plugins/core/trade-portal/charts/ltc-charts.js
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
import { render } from 'lit/html.js'
|
||||||
|
import { Epml } from '../../../../epml.js'
|
||||||
|
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||||
|
|
||||||
|
registerTranslateConfig({
|
||||||
|
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||||
|
})
|
||||||
|
|
||||||
|
import '@polymer/paper-dialog/paper-dialog.js'
|
||||||
|
import * as Highcharts from 'highcharts'
|
||||||
|
import Exporting from 'highcharts/modules/exporting'
|
||||||
|
Exporting(Highcharts)
|
||||||
|
import StockChart from 'highcharts/modules/stock'
|
||||||
|
StockChart(Highcharts)
|
||||||
|
import 'highcharts/highcharts-more.js'
|
||||||
|
import 'highcharts/modules/accessibility.js'
|
||||||
|
import 'highcharts/modules/boost.js'
|
||||||
|
import 'highcharts/modules/data.js'
|
||||||
|
import 'highcharts/modules/export-data.js'
|
||||||
|
import 'highcharts/modules/offline-exporting.js'
|
||||||
|
|
||||||
|
let ltcChartDialog
|
||||||
|
|
||||||
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||||
|
|
||||||
|
class LtcCharts extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
isLoadingTradesChart: { type: Boolean },
|
||||||
|
ltcTrades: { type: Array },
|
||||||
|
ltcPrice: { type: Array }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
.loadingContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trades-chart {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin: auto;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
height: 30vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-info-wrapper {
|
||||||
|
background: transparent;
|
||||||
|
height: 38vh;
|
||||||
|
width: 83vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-loading-wrapper {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.ltcTrades = []
|
||||||
|
this.ltcPrice = []
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<paper-dialog id="loadChartDialog" class="chart-loading-wrapper" modal>
|
||||||
|
<div class="loadingContainer" style="display:${this.isLoadingTradesChart ? 'inline-block' : 'none'}">
|
||||||
|
<span style="color: var(--black);">${translate("login.loading")}</span>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
<paper-dialog id="ltcChartDialog" class="chart-info-wrapper">
|
||||||
|
<div class="chart-container">
|
||||||
|
<div id='ltcStockPriceContainer' class='trades-chart'></div>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
async firstUpdated() {
|
||||||
|
this.changeTheme()
|
||||||
|
this.changeLanguage()
|
||||||
|
|
||||||
|
window.addEventListener('storage', () => {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
|
||||||
|
use(checkLanguage)
|
||||||
|
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTradesChart() {
|
||||||
|
this.isLoadingTradesChart = true
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').open()
|
||||||
|
await this.getLtcTrades()
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').close()
|
||||||
|
this.enableLtcStockPriceChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getLtcTrades() {
|
||||||
|
let currentLtcTimestamp = Date.now()
|
||||||
|
const monthBackLtc = currentLtcTimestamp - 31556952000
|
||||||
|
await parentEpml.request("apiCall", { url: `/crosschain/trades?foreignBlockchain=LITECOIN&minimumTimestamp=${monthBackLtc}&limit=0&reverse=false` }).then((res) => {
|
||||||
|
this.ltcTrades = res
|
||||||
|
})
|
||||||
|
this.ltcPrice = this.ltcTrades.map(item => {
|
||||||
|
const ltcSellPrice = this.round(parseFloat(item.foreignAmount) / parseFloat(item.qortAmount))
|
||||||
|
return [item.tradeTimestamp, parseFloat(ltcSellPrice)]
|
||||||
|
}).filter(item => !!item)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableLtcStockPriceChart() {
|
||||||
|
const ltcStockPriceData = this.ltcPrice
|
||||||
|
const header = 'QORT / LTC ' + get("tradepage.tchange49")
|
||||||
|
Highcharts.stockChart(this.shadowRoot.querySelector('#ltcStockPriceContainer'), {
|
||||||
|
accessibility: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
credits: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 1,
|
||||||
|
labelStyle: {color: 'var(--black)'},
|
||||||
|
inputStyle: {color: '#03a9f4'}
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: header,
|
||||||
|
style: {color: 'var(--black)'}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'QORT / LTC',
|
||||||
|
data: ltcStockPriceData,
|
||||||
|
tooltip: {
|
||||||
|
valueDecimals: 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async open() {
|
||||||
|
await this.loadTradesChart()
|
||||||
|
this.shadowRoot.getElementById('ltcChartDialog').open()
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme() {
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLanguage() {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
|
||||||
|
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||||
|
localStorage.setItem('qortalLanguage', 'us')
|
||||||
|
use('us')
|
||||||
|
} else {
|
||||||
|
use(checkLanguage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
round(number) {
|
||||||
|
let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('ltc-charts', LtcCharts)
|
||||||
|
|
||||||
|
const chartsltc = document.createElement('ltc-charts')
|
||||||
|
ltcChartDialog = document.body.appendChild(chartsltc)
|
||||||
|
|
||||||
|
export default ltcChartDialog
|
||||||
214
qortal-ui-plugins/plugins/core/trade-portal/charts/rvn-charts.js
Normal file
214
qortal-ui-plugins/plugins/core/trade-portal/charts/rvn-charts.js
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
import { render } from 'lit/html.js'
|
||||||
|
import { Epml } from '../../../../epml.js'
|
||||||
|
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||||
|
|
||||||
|
registerTranslateConfig({
|
||||||
|
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||||
|
})
|
||||||
|
|
||||||
|
import '@polymer/paper-dialog/paper-dialog.js'
|
||||||
|
import * as Highcharts from 'highcharts'
|
||||||
|
import Exporting from 'highcharts/modules/exporting'
|
||||||
|
Exporting(Highcharts)
|
||||||
|
import StockChart from 'highcharts/modules/stock'
|
||||||
|
StockChart(Highcharts)
|
||||||
|
import 'highcharts/highcharts-more.js'
|
||||||
|
import 'highcharts/modules/accessibility.js'
|
||||||
|
import 'highcharts/modules/boost.js'
|
||||||
|
import 'highcharts/modules/data.js'
|
||||||
|
import 'highcharts/modules/export-data.js'
|
||||||
|
import 'highcharts/modules/offline-exporting.js'
|
||||||
|
|
||||||
|
let rvnChartDialog
|
||||||
|
|
||||||
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||||
|
|
||||||
|
class RvnCharts extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
isLoadingTradesChart: { type: Boolean },
|
||||||
|
rvnTrades: { type: Array },
|
||||||
|
rvnPrice: { type: Array }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
.loadingContainer {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trades-chart {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin: auto;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
height: 30vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-info-wrapper {
|
||||||
|
background: transparent;
|
||||||
|
height: 38vh;
|
||||||
|
width: 83vw;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-loading-wrapper {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.rvnTrades = []
|
||||||
|
this.rvnPrice = []
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<paper-dialog id="loadChartDialog" class="chart-loading-wrapper" modal>
|
||||||
|
<div class="loadingContainer" style="display:${this.isLoadingTradesChart ? 'inline-block' : 'none'}">
|
||||||
|
<span style="color: var(--black);">${translate("login.loading")}</span>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
<paper-dialog id="rvnChartDialog" class="chart-info-wrapper">
|
||||||
|
<div class="chart-container">
|
||||||
|
<div id='rvnStockPriceContainer' class='trades-chart'></div>
|
||||||
|
</div>
|
||||||
|
</paper-dialog>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
async firstUpdated() {
|
||||||
|
this.changeTheme()
|
||||||
|
this.changeLanguage()
|
||||||
|
|
||||||
|
window.addEventListener('storage', () => {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
|
||||||
|
use(checkLanguage)
|
||||||
|
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTradesChart() {
|
||||||
|
this.isLoadingTradesChart = true
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').open()
|
||||||
|
await this.getRvnTrades()
|
||||||
|
this.isLoadingTradesChart = false
|
||||||
|
this.shadowRoot.getElementById('loadChartDialog').close()
|
||||||
|
this.enableRvnStockPriceChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getRvnTrades() {
|
||||||
|
let currentRvnTimestamp = Date.now()
|
||||||
|
const monthBackRvn = currentRvnTimestamp - 31556952000
|
||||||
|
await parentEpml.request("apiCall", { url: `/crosschain/trades?foreignBlockchain=RAVENCOIN&minimumTimestamp=${monthBackRvn}&limit=0&reverse=false` }).then((res) => {
|
||||||
|
this.rvnTrades = res
|
||||||
|
})
|
||||||
|
this.rvnPrice = this.rvnTrades.map(item => {
|
||||||
|
const rvnSellPrice = this.round(parseFloat(item.foreignAmount) / parseFloat(item.qortAmount))
|
||||||
|
return [item.tradeTimestamp, parseFloat(rvnSellPrice)]
|
||||||
|
}).filter(item => !!item)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableRvnStockPriceChart() {
|
||||||
|
const rvnStockPriceData = this.rvnPrice
|
||||||
|
const header = 'QORT / RVN ' + get("tradepage.tchange49")
|
||||||
|
Highcharts.stockChart(this.shadowRoot.querySelector('#rvnStockPriceContainer'), {
|
||||||
|
accessibility: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
credits: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 1,
|
||||||
|
labelStyle: {color: 'var(--black)'},
|
||||||
|
inputStyle: {color: '#03a9f4'}
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: header,
|
||||||
|
style: {color: 'var(--black)'}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: '#03a9f4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'QORT / RVN',
|
||||||
|
data: rvnStockPriceData,
|
||||||
|
tooltip: {
|
||||||
|
valueDecimals: 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async open() {
|
||||||
|
await this.loadTradesChart()
|
||||||
|
this.shadowRoot.getElementById('rvnChartDialog').open()
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme() {
|
||||||
|
const checkTheme = localStorage.getItem('qortalTheme')
|
||||||
|
this.theme = (checkTheme === 'dark') ? 'dark' : 'light'
|
||||||
|
document.querySelector('html').setAttribute('theme', this.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLanguage() {
|
||||||
|
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||||
|
|
||||||
|
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||||
|
localStorage.setItem('qortalLanguage', 'us')
|
||||||
|
use('us')
|
||||||
|
} else {
|
||||||
|
use(checkLanguage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
round(number) {
|
||||||
|
let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('rvn-charts', RvnCharts)
|
||||||
|
|
||||||
|
const chartsrvn = document.createElement('rvn-charts')
|
||||||
|
rvnChartDialog = document.body.appendChild(chartsrvn)
|
||||||
|
|
||||||
|
export default rvnChartDialog
|
||||||
Loading…
x
Reference in New Issue
Block a user