Adding charting feature
This commit is contained in:
sairaj mote
parent
7e70902971
commit
d060d573cf
@ -1544,6 +1544,9 @@ class ThemeToggle extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['checked'];
|
||||
}
|
||||
get theme() {
|
||||
return this.hasTheme;
|
||||
}
|
||||
|
||||
daylight() {
|
||||
this.hasTheme = 'light';
|
||||
|
||||
@ -457,8 +457,8 @@ details[open] > summary .icon {
|
||||
|
||||
strip-select {
|
||||
--gap: 0;
|
||||
background-color: var(--accent-color--light);
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
strip-option {
|
||||
@ -469,10 +469,10 @@ strip-option {
|
||||
--active-option-background-color: var(--accent-color);
|
||||
}
|
||||
strip-option:first-of-type {
|
||||
--border-radius: 0.3rem 0 0 0.3rem;
|
||||
--border-radius: 0.2rem 0 0 0.2rem;
|
||||
}
|
||||
strip-option:last-of-type {
|
||||
--border-radius: 0 0.3rem 0.3rem 0;
|
||||
--border-radius: 0 0.2rem 0.2rem 0;
|
||||
}
|
||||
|
||||
sm-select,
|
||||
@ -1049,9 +1049,9 @@ sm-checkbox {
|
||||
|
||||
#home {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: "header header" "nav .";
|
||||
grid-template-areas: "header header" "nav pages";
|
||||
}
|
||||
|
||||
#main_header {
|
||||
@ -1084,13 +1084,33 @@ sm-checkbox {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
#pages_container {
|
||||
grid-area: pages;
|
||||
}
|
||||
|
||||
.is-signed-in #exchange {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.is-signed-in #exchange_wrapper {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 16rem 1fr;
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#price_history_chart {
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
#asset_list_wrapper {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.listed-asset {
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -1107,10 +1127,22 @@ sm-checkbox {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64rem) and (min-width: 40rem) {
|
||||
.main_navbar__item .icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
.main_navbar__item .item__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
.is-signed-in #exchange_wrapper {
|
||||
grid-template-columns: 16rem minmax(0, 1fr) 20rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 120rem) {
|
||||
.page-layout {
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -443,8 +443,8 @@ details {
|
||||
}
|
||||
strip-select {
|
||||
--gap: 0;
|
||||
background-color: var(--accent-color--light);
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
strip-option {
|
||||
font-weight: 500;
|
||||
@ -453,10 +453,10 @@ strip-option {
|
||||
--active-option-color: rgba(var(--background-color), 1);
|
||||
--active-option-background-color: var(--accent-color);
|
||||
&:first-of-type {
|
||||
--border-radius: 0.3rem 0 0 0.3rem;
|
||||
--border-radius: 0.2rem 0 0 0.2rem;
|
||||
}
|
||||
&:last-of-type {
|
||||
--border-radius: 0 0.3rem 0.3rem 0;
|
||||
--border-radius: 0 0.2rem 0.2rem 0;
|
||||
}
|
||||
}
|
||||
sm-select,
|
||||
@ -973,9 +973,9 @@ sm-checkbox {
|
||||
}
|
||||
#home {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: "header header" "nav .";
|
||||
grid-template-areas: "header header" "nav pages";
|
||||
}
|
||||
#main_header {
|
||||
grid-area: header;
|
||||
@ -1004,14 +1004,32 @@ sm-checkbox {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
#pages_container {
|
||||
grid-area: pages;
|
||||
}
|
||||
.is-signed-in {
|
||||
#exchange {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
#exchange_wrapper {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 16rem 1fr;
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
#price_history_chart {
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
height: 20rem;
|
||||
// grid-column: 1/-1;
|
||||
}
|
||||
#asset_list_wrapper {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
.listed-asset {
|
||||
padding: 1rem;
|
||||
&--active {
|
||||
@ -1028,12 +1046,25 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64rem) {
|
||||
@media screen and (max-width: 64rem) and (min-width: 40rem) {
|
||||
.main_navbar__item {
|
||||
.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
.item__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
.is-signed-in {
|
||||
#exchange_wrapper {
|
||||
grid-template-columns: 16rem minmax(0, 1fr) 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 120rem) {
|
||||
.page-layout {
|
||||
|
||||
108
docs/index.html
108
docs/index.html
@ -18,6 +18,7 @@
|
||||
<script src="scripts/floBlockchainAPI.js"></script>
|
||||
<script src="scripts/floTokenAPI.js"></script>
|
||||
<script src="scripts/floExchangeAPI.js"></script>
|
||||
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
|
||||
<script>console.debug(floExchangeAPI);</script>
|
||||
</head>
|
||||
|
||||
@ -54,7 +55,7 @@
|
||||
<h4>RanchiMall Market</h4>
|
||||
</div>
|
||||
</div>
|
||||
<theme-toggle></theme-toggle>
|
||||
<theme-toggle id="theme_toggle"></theme-toggle>
|
||||
<button id="user_popup_button" class="hide" onclick="showPopup('user_popup')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
@ -93,10 +94,36 @@
|
||||
<sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
|
||||
</sm-form>
|
||||
<section id="exchange_wrapper">
|
||||
<div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content">
|
||||
<div id="asset_list_wrapper" class="grid gap-1 align-start hide user-content">
|
||||
<h4>Tokens</h4>
|
||||
<ul id="listed_assets" class="user-content hide"></ul>
|
||||
</div>
|
||||
<div id="price_chart_wrapper" class="flex direction-column gap-0-5">
|
||||
<div class="flex align-center space-between" style="z-index: 5;">
|
||||
<h4 id="chart_asset"></h4>
|
||||
<div class="flex align-center justify-right gap-0-5">
|
||||
<sm-select>
|
||||
<sm-option value="1">1</sm-option>
|
||||
<sm-option value="2">2</sm-option>
|
||||
<sm-option value="3">3</sm-option>
|
||||
<sm-option value="4">4</sm-option>
|
||||
<sm-option value="5">5</sm-option>
|
||||
<sm-option value="6">6</sm-option>
|
||||
<sm-option value="7">7</sm-option>
|
||||
</sm-select>
|
||||
<strip-select>
|
||||
<strip-option value="day" selected>D</strip-option>
|
||||
<strip-option value="week">W</strip-option>
|
||||
<strip-option value="month">M</strip-option>
|
||||
<strip-option value="year">Y</strip-option>
|
||||
<strip-option value="all-time">ALL</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="position: relative;">
|
||||
<div id="price_history_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<sm-form id="trade_form" class="user-content hide hide-on-mobile">
|
||||
<div class="flex space-between align-center">
|
||||
<a href="#/exchange" class="button icon-only hide-on-desktop">
|
||||
@ -853,7 +880,48 @@
|
||||
lastPage: '',
|
||||
params: {}
|
||||
}
|
||||
function getChartTheme() {
|
||||
const theme = getRef('theme_toggle').value
|
||||
const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
|
||||
const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff'
|
||||
return {
|
||||
chart: {
|
||||
layout: {
|
||||
backgroundColor: `rgba(${textColor}, 0.01)`,
|
||||
lineColor: `rgba(${textColor}, 0.1)`,
|
||||
textColor: `rgba(${textColor}, 0.8)`,
|
||||
},
|
||||
watermark: {
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
crosshair: {
|
||||
color: '#758696',
|
||||
},
|
||||
grid: {
|
||||
vertLines: {
|
||||
color: '#2B2B43',
|
||||
},
|
||||
horzLines: {
|
||||
color: '#363C4E',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: {
|
||||
color: accentColor
|
||||
}
|
||||
}
|
||||
}
|
||||
function setChartTheme(e) {
|
||||
const themeToApply = getChartTheme()
|
||||
chart.applyOptions(themeToApply.chart);
|
||||
lineSeries.applyOptions(themeToApply.series);
|
||||
}
|
||||
|
||||
document.addEventListener('themechange', setChartTheme)
|
||||
|
||||
|
||||
let chart
|
||||
let lineSeries
|
||||
async function showPage(targetPage, options = {}) {
|
||||
const { firstLoad, hashChange } = options
|
||||
let pageId
|
||||
@ -896,6 +964,7 @@
|
||||
if (getRef('listed_assets').querySelector('.listed-asset--active'))
|
||||
getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
|
||||
getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
|
||||
getRef('chart_asset').textContent = `${params.asset}/INR`
|
||||
getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
|
||||
getRef('traded_asset').textContent = `Trade ${params.asset}`
|
||||
getRef('trade_button').textContent = `${tradeType} ${params.asset}`
|
||||
@ -909,12 +978,37 @@
|
||||
})
|
||||
}
|
||||
if (params.hasOwnProperty('asset') && params.asset !== '') {
|
||||
getRef('exchange_wrapper').children[0].classList.add('hide-on-mobile')
|
||||
getRef('exchange_wrapper').children[1].classList.remove('hide-on-mobile')
|
||||
} else {
|
||||
getRef('exchange_wrapper').children[1].classList.add('hide-on-mobile')
|
||||
getRef('exchange_wrapper').children[0].classList.remove('hide-on-mobile')
|
||||
getRef('asset_list_wrapper').classList.add('hide-on-mobile')
|
||||
getRef('trade_form').classList.remove('hide-on-mobile')
|
||||
|
||||
if (firstLoad) {
|
||||
chart = LightweightCharts.createChart(getRef('price_history_chart'), {
|
||||
width: 800, height: 600,
|
||||
timeScale: {
|
||||
timeVisible: true,
|
||||
},
|
||||
});
|
||||
lineSeries = chart.addLineSeries();
|
||||
setChartTheme()
|
||||
}
|
||||
floExchangeAPI.getRateHistory(params.asset, '2 weeks').then(data => {
|
||||
data = data.map(({ time, rate }) => {
|
||||
return {
|
||||
time: new Date(time).getTime() / 1000,
|
||||
value: rate
|
||||
}
|
||||
})
|
||||
lineSeries.setData(data);
|
||||
new ResizeObserver(entries => {
|
||||
const { width, height } = entries[0].contentRect;
|
||||
chart.applyOptions({ width, height });
|
||||
}).observe(getRef('price_history_chart').parentNode);
|
||||
})
|
||||
} else {
|
||||
getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
|
||||
getRef('trade_form').classList.add('hide-on-mobile')
|
||||
}
|
||||
|
||||
break;
|
||||
case 'my_orders':
|
||||
break;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user