Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add live data summaries to the homepage #961

Merged
merged 3 commits into from Jan 31, 2019

Conversation

buck54321
Copy link
Member

Add live data summaries to the homepage

This is meant to complement the work being done in PR #921 and be a little experimental, so don't hold back on the criticism.

Adds some additional data summary and display styles to the homepage. Introduces the threeSigFigs number formatting functions in both golang template functions and javascript humanize helpers, which allows short but precise representations of values from 1e-8 up, using k,M,B prefixes.

In the blocks section, the values of the most recent "proposed" block are displayed prominently, along with an accounting of the current votes for that block. In the mempool section, the count and total DCR for "likely" transactions are displayed, along with a small graphic that illustrates their proportions in the mempool total. "likely" transactions do not include votes for any but the most recently proposed block, or for duplicate votes that can pop up when a stakeholder votes multiple times with a different agenda choice. The "likely" total will count more than 20 new tickets, though.

All new displayed values are shown identically with or without JS enabled in the browser. If JS is enabled, the values will update live. Instead of simply showing the age column when JS is enabled, the age column now replaces the timestamp column, which is redundant. The size column is sacrificially hidden at certain breakpoints so that the tables always display nicely. The vote type column headers are also shortened to a single letter. A new pure-CSS tooltip is used on the headers and elsewhere to add additional information when hovered on desktop or tapped on mobile. Values are shown with the new threeSigFigs format, which does mean that users would have to click into the /block or /tx page to get the full 8-point precision.

image

Javascript Mempool class keeps a very shallow copy of the mempool. No new websocket or API calls are necessary. Mempool has methods for retreiving some statistical data about the mempool and tracking votes for recent block(s).

image

image

image

@buck54321 buck54321 changed the title Add live data summaries to the homepage [WIP] Add live data summaries to the homepage Jan 28, 2019
views/home.tmpl Outdated Show resolved Hide resolved
Copy link
Member

@chappjc chappjc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks and works great. When a new block came in, all of the elements reset immediately, and everything was quick enough that you could see the number of vote boxes appear smoothly as the votes came in.

Did you want to do the tests you have commented, or is this PR g2g?

views/home.tmpl Outdated Show resolved Hide resolved
views/home.tmpl Outdated Show resolved Hide resolved
views/home.tmpl Outdated Show resolved Hide resolved
views/home.tmpl Outdated Show resolved Hide resolved
public/scss/home.scss Outdated Show resolved Hide resolved
@chappjc chappjc added this to the 4.0 milestone Jan 29, 2019
db/dcrsqlite/apisource.go Outdated Show resolved Hide resolved
db/dcrsqlite/apisource.go Outdated Show resolved Hide resolved
explorer/explorerroutes.go Show resolved Hide resolved
explorer/mempool.go Show resolved Hide resolved
explorer/mempool.go Outdated Show resolved Hide resolved
explorer/types/explorertypes.go Outdated Show resolved Hide resolved
mempool/collector.go Outdated Show resolved Hide resolved
mempool/collector.go Outdated Show resolved Hide resolved
public/js/helpers/mempool_helper.js Outdated Show resolved Hide resolved
public/scss/utils.scss Show resolved Hide resolved
A bit of an experiment which adds some additional data
summary and display styles to the homepage. Introduces the
`threeSigFigs` number formatting functions in both golang template
functions and javascript `humanize` helpers, which allows short
but precise representations of values from 1e-8 up, using k,M,B
prefixes.

In the blocks section, the values of the most recent "proposed"
block are displayed prominently, along with an accounting of the
current votes for that block. In the mempool section, the count
and total DCR for "likely" transactions are displayed, along with
a small graphic that illustrates their proportions in the mempool
total. "likely" transactions do not include votes for any but the
most recently proposed block, or for duplicate votes that can pop
up when a stakeholder votes from multiple locations with a
different agenda choice. The "likely" total will count more than
20 new tickets.

All new displayed values are shown identically with or without JS
enabled in the browser. If JS is enabled, the values will update
live. Instead of simply showing the age column when JS is enabled,
the age column now replaces the timestamp column, which is redundant.
The size column is sacrificially hidden at certain breakpoints so that
the tables always display nicely. The vote type column headers are also
shortened to a single letter. A new pure-CSS tooltip is used on the
headers and elsewhere to add additional information when hovered on
desktop or tapped on mobile. Values are shown with the new
`threeSigFigs` format, which does mean that users would have to
click into the /block or /tx page to get the full 8-point precision.

Javascript `Mempool` class keeps a very shallow copy of the mempool.
No new websocket or API calls are necessary. `Mempool` has methods for
retreiving some statistical data about the mempool and tracking votes
for recent block(s).
Adapting to mempool changes from the pubsub PR decred#953. Also fixes a
incorrect tooltip.
Works in changes to master from decred#921, which included a full rework
of the left info column. Switches the column order based on feedback
from slack and matrix. Adds a little approved/rejected message when
the necessary votes have been received.

Switches the semantics of the vote tallying a little so that a
consensus result is indicated when available. Also changed the enum
from 0,1,2 for no, yes, missing to -1, 1, 0, which seemed
appropriate for what they represent. Added contructor for
`explorertypes.VotingInfo`.

Switched the color scheme to a simpler two-tone grey for now. Change
the `text-success` boostrap class elements to a custom `text-green`,
because the former had poor contrast on lighter backgrounds.
@buck54321
Copy link
Member Author

Works in changes from #921, which included a full rework of the network info column. Switches the columns based on feedback on slack and matrix. Adds a little approved/rejected message when the necessary votes have been received.

Switches the semantics of the vote tallying a little so that a vote result (approved, rejected, not enough votes) is calculated and returned with the slice of votes. Also changed the enum for [no, yes, missing] from 0, 1, 2 to -1, 1, 0, which seemed appropriate for what they represent. Added contructor for explorertypes.VotingInfo.

Uses a simple two-tone grey color scheme for now. Changes the text-success boostrap class elements to a custom text-green because the former had poor contrast on lighter backgrounds and small font size.

image

image

@buck54321 buck54321 changed the title [WIP] Add live data summaries to the homepage Add live data summaries to the homepage Jan 30, 2019
@gozart1 gozart1 mentioned this pull request Jan 31, 2019
@chappjc chappjc merged commit fc41a41 into decred:master Jan 31, 2019
buck54321 added a commit to buck54321/dcrdata that referenced this pull request Feb 4, 2019
Adjustments to the mempool page layout. See decred#451. Incorporates
client-side mempool from decred#961 for live updates.

Moves `likelyMineable` totals and counts to their own explorer
type. Creates a `mempoolDump` template to pass mempool stats
to stimulus via data attributes.
@buck54321 buck54321 mentioned this pull request Feb 4, 2019
buck54321 added a commit to buck54321/dcrdata that referenced this pull request Feb 5, 2019
Adjustments to the mempool page layout. See decred#451. Incorporates
client-side mempool from decred#961 for live updates.

Moves `likelyMineable` totals and counts to their own explorer
type. Creates a `mempoolDump` template to pass mempool stats
to stimulus via data attributes.
buck54321 added a commit to buck54321/dcrdata that referenced this pull request Feb 7, 2019
Adjustments to the mempool page layout. See decred#451. Incorporates
client-side mempool from decred#961 for live updates.

Moves `likelyMineable` totals and counts to their own explorer
type. Creates a `mempoolDump` template to pass mempool stats
to stimulus via data attributes.
buck54321 added a commit to buck54321/dcrdata that referenced this pull request Feb 18, 2019
Adjustments to the mempool page layout. See decred#451. Incorporates
client-side mempool from decred#961 for live updates.

Moves `likelyMineable` totals and counts to their own explorer
type. Creates a `mempoolDump` template to pass mempool stats
to stimulus via data attributes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants