UI improvements
This commit is contained in:
parent
84a026291a
commit
97df8690f1
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
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
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user