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); grid-template-columns: 17rem minmax(0, 1fr);
align-items: flex-start; 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 { #price_history_chart {
height: 20rem; 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; 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 { #price_history_chart {
height: 20rem; height: 20rem;
} }

View File

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