1121: median line, trailing average and h-spread

[rhaicode]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Do a quick check before the merge.

PR type

• Bugfix
• Feature
• Refactoring

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged the recent default branch -- main and I've no conflicts
• I've tried respect high code quality standards
• I've didn't break any original functionality
• I've posted screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything works
• I found edge cases

What's new?

• PR closes Showing median line from BUY events and H-spread #1121
• Added median line, H-spread and 3 day trailing average support

Had issue bounty label ?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed something on UI, a screenshot for others, is best to understand changes.

[netlify]

✔️ Deploy Preview for koda-nuxt ready!

🔨 Explore the source changes: 9160039

🔍 Inspect the deploy log: https://app.netlify.com/sites/koda-nuxt/deploys/61b0082850bdce00082edaa3

😎 Browse the preview: https://deploy-preview-1291--koda-nuxt.netlify.app

[rhaicode]

This PR is branched out from #1110

Hello @yangwao. Here's the current progress.

H-spread (in-progress):
The yellow dots represent the min and max points of the h-spread
The aqua dots represent the q1 and q3
The orange is the median (q2)

The H-Spread values are derived from all values of the Sold NFT Price (having "Buy events"), sorted in ascending order then followed the logic for determining the values from these resource IQR implementation:

Khan Academy: https://www.khanacademy.org/math/cc-sixth-grade-math/cc-6th-data-statistics/cc-6th-box-whisker-plots/v/box-and-whisker-plot-exercise-example
Wikipedia: https://en.wikipedia.org/wiki/Interquartile_range

I feel that the H-Spread was incorrect and would ask for guidance on this one. Should I gather all events from the Sold NFT Price (hence the result)?

Should I just provide constant values for each point, for example [min=actual_point_value - 10, actual_point_value , max=actual_point_value + 10]? This will provide lots of box plots per point in the Sold NFT Price.

Trailing average (asking for feedback):
The trailing average is on the blue line, but let me know what color to use then. This uses a 3-day moving average.

Watch the screen recording: https://screencast-o-matic.com/watch/crXTf3VIp8K

[vikiival]

hey @rhaicode,
which branch do you use as the base ? main or main-nuxt?
I am asking because you have a lot of unrelated code changes

[rhaicode]

Hello @vikiival. This PR is from #1110 which is from main-nuxt. As soon as #1110 is merged, I think 1072 commits should be gone as well

[yangwao]

Hello @vikiival. This PR is from #1110 which is from main-nuxt. As soon as #1110 is merged, I think 1072 commits should be gone as well

Recently merged #1110 !

[yangwao]

@rhaicode you probably need update PR as Netlify wasn't triggered, so whenever you add something new it should be building fine I guess if you push recent main-nuxt :)

[rhaicode]

@yangwao you can now check the deployed build for this PR

[yangwao]

These dots are box plots my best guess? If so, let's make them outlined probably so it's not attention disruptive

Looking at https://deploy-preview-1291--koda-nuxt.netlify.app/rmrk/collection/2644199cf3652aaa78-KK01

[rhaicode]

@yangwao no, these points actually draw a one big box plot with the tips of the box plot on the yellow dots, which I feel is incorrect.

How are we going to derive values for the IQR?

[rhaicode]

Hello @yangwao , I'm having difficulty in finding a way to support box plot charts with line charts. As you can see from this Codepen, it's only composed with box plots with the defined x-axis (for example months Jan, Feb, Mar, etc) without any line charts inside.

I think this is the farthest development I can provide.
http://somup.com/crlfj304Fl

[yangwao]

Hey there, so let's put the box plot as a separate issue and we can add it later, what do you think?
Let's recap what is working there @rhaicode :)

[rhaicode]

Hello @yangwao. These are the following only supported of this commit:

• median line
• trailing average

[yangwao]

I would like test it but our partner Subquery who provides indexer is down for some unknown reason and put it into investigation, I feel really really bad about it #1481

[yangwao]

Perfect, I’ve sent the payout https://kusama.subscan.io/extrinsic/0x4e13575846bb8044dc9ba4cd6cf3b64e6e51316dd3bd45417dcc7a4f01c52e0f

Let’s grab another issue and get rewarded!
https://github.com/kodadot/nft-gallery/issues/

I've created a separate issue for that h-spread in chart,
so when we will be looking at it that later can find you did the heavy lifting amount of research here
Continue to the #1483