[bisq-network/bisq] Improve facts and figures (#5156)

[Chris Beams]

I just tried this out locally, and it's a great improvement all around. Here are some areas for improvement I noticed:

* It would be good to tighten up the vertical whitespace a bit. As is, I can just barely fit both charts on my 13" MacBook screen:

<img width="1552" alt="image" src="https://user-images.githubusercontent.com/301810/107351501-f9b10c80-6aca-11eb-9557-9bc50bed08a1.png">

* It wasn't immediately obvious to me that the slider bar was actually a slider bar and that I could grab the handles on either side. I don't know what would improve this, just noting it. Great to have it in any case, though.
* It would be good to be able to mouse over the points on the graph and get an overlay showing the specific date, specific price / volume values, etc as is possible in the existing column chart on the main `Market > Trades` screen
* Speaking of that, I'm not sure why we're using line charts here in the `DAO > Facts & Figures > Dashboard` screen and using a column chart on the `Market > Trades` screen. Seems unnecessarily inconsistent
* In both charts, it would be better to use radio buttons instead of the current toggle switches. Toggle switches suggest that it's possible to toggle more than one to the "on" position at a time, but it's not. They are in fact mutually exclusive, more like a typical radio button experience.
* One weird effect of having these three toggle switches is that you can turn them all off and see an empty chart.
* On the first chart (the `BSQ price`) chart, it's nice to be able to see the BTC/USD price, but it's weird to see it alone, because it has nothing on its own to do with the BSQ price, and that's what this chart is supposed to be about. It would be better if the BTC/USD price were an _overlay_ on the BSQ price, whether the BSQ price is being charted in BTC or USD terms. So ideally, we would see two _radio buttons_ that allows the user to switch between displaying `BSQ/USD price` and `BSQ/BTC price`, and then we would see a single _toggle_ that allows for displaying the `BTC/USD price` as an overlay.
* coming back to the point about using column charts consistently, it would be good to have the BSQ price expressed as a _column chart_, and then to have the optional BTC/USD price expressed as a _line chart_ overlay. This is a common visual approach, and is usually called a "combo chart".
* coming back to ways to tighten up the vertical space, one of the things that threw me off initially was seeing the same date range duplicated on both charts. I understand now why this is necessary given the way the date slider is implemented, but perhaps we could improve the UX of narrowing down the date and tighten up vertical space by removing the date slider and the second row of dates entirely, in favor of a simpler date range picker experience like the ones shown below:

>From https://finance.yahoo.com/quote/BTC-USD/chart?p=BTC-USD
<img width="1239" alt="image" src="https://user-images.githubusercontent.com/301810/107356002-87dbc180-6ad0-11eb-81f6-389dd76c55a7.png">

>From the Apple Stocks app:
<img width="788" alt="image" src="https://user-images.githubusercontent.com/301810/107356184-c6717c00-6ad0-11eb-8273-1b064f6345b1.png">

* Also, on the `DAO > Facts & Figures > BSQ supply` screen, there's a typo. "Total issues BSQ" should read "Total issued BSQ":

<img width="660" alt="image" src="https://user-images.githubusercontent.com/301810/107356407-10f2f880-6ad1-11eb-8e9f-3b0c4951a3fb.png">

@chimp1984, I realize that most of these points I've brought up here are UI / UX polishing stuff that you'd probably rather not spend time on. Perhaps we could ship these changes more or less as-is, and the @bisq-network/design-maintainers could shop these tweaks around as some relatively low-hanging fruit "good first issue" candidates. Probably worth moving many of them into one ore more separate issues, so that this PR can get merged more quickly.



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/bisq-network/bisq/pull/5156#issuecomment-775868339
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.bisq.network/pipermail/bisq-github/attachments/20210209/b2f1360c/attachment.htm>