UI improvements

This commit is contained in:
sairaj mote 2023-07-14 21:12:47 +05:30
parent 84a026291a
commit 97df8690f1
4 changed files with 40 additions and 15 deletions

View File

@ -1557,6 +1557,14 @@ sm-checkbox {
grid-template-columns: 17rem minmax(0, 1fr);
align-items: flex-start;
}
.no-data {
margin: auto;
background-color: rgba(var(--text-color), 0.03);
padding: 0.6rem 1rem;
border-radius: 5rem;
font-weight: 500;
font-size: 0.8rem;
}
#price_history_chart {
height: 20rem;
}

File diff suppressed because one or more lines are too long

View File

@ -1444,6 +1444,14 @@ sm-checkbox {
align-items: flex-start;
}
}
.no-data {
margin: auto;
background-color: rgba(var(--text-color), 0.03);
padding: 0.6rem 1rem;
border-radius: 5rem;
font-weight: 500;
font-size: 0.8rem;
}
#price_history_chart {
height: 20rem;
}

View File

@ -194,6 +194,7 @@
</div>
<div id="price_chart_wrapper" class="flex" style="position: relative; flex: 1">
<div id="price_history_chart"></div>
<p id="no_chart_data" class="no-data hidden">No price history available</p>
</div>
</div>
<sm-form id="trade_form">
@ -1698,22 +1699,30 @@
if (pagesData.currentPage !== 'exchange') return
const duration = getRef('price_duration_selector').value === 'hour' ? '48 weeks' : 'all-time' || '48 weeks'
floTradeAPI.getRateHistory(asset, duration).then(data => {
data = data.map(({ time, rate }) => {
return {
time: getIST(time),
value: rate
}
})
if (lineSeries)
lineSeries.setData(data);
new ResizeObserver(entries => {
chartDimensions.height = entries[0].contentRect.height - 10;
chartDimensions.width = entries[0].contentRect.width;
if (data.length) {
data = data.map(({ time, rate }) => {
return {
time: getIST(time),
value: rate
}
})
if (lineSeries)
lineSeries.setData(data);
new ResizeObserver(entries => {
chartDimensions.height = entries[0].contentRect.height - 10;
chartDimensions.width = entries[0].contentRect.width;
if (chart) {
if (chartDimensions.width <= 0 || chartDimensions.height <= 0) return;
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
}
}).observe(getRef('price_chart_wrapper'));
} else {
if (chart) {
if (chartDimensions.width <= 0 || chartDimensions.height <= 0) return;
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
chart.remove();
chart = null;
}
}).observe(getRef('price_chart_wrapper'));
getRef('no_chart_data').classList.remove('hidden')
}
})
},
userOrders() {