search

borisyankov / react-sparklines

Beautiful and expressive Sparklines React component
MIT License
2.84k stars 194 forks source link

Possible wrong median value calculation/display #45

Open okonet opened 8 years ago

okonet commented 8 years ago

I'm using median reference values on https://status.postmarkapp.com/ and they look quite weird:

2016-04-07 at 17 23

I'll try to investigate the issues and add the test and do a PR.

borisyankov commented 8 years ago

The median was definitely wrong. Did add some tests for it and a fix. Try it now.

okonet commented 8 years ago

Did you cut a new release on npm or should I try from the github repo?

okonet commented 8 years ago

Found it. Thanks for a quick fix!

okonet commented 8 years ago

Hmm, this doesn't really look any better for me:

Here is the sample data

[6161.719669666667,4995.179579999999,4040.0326529999998,3776.188567,2969.1544076666664,4701.473427,3128.7432525,3299.3572713333333,4272.681012,3422.561293333333,3462.3769910000005,4303.3568116666665,12118.759180333333,5272.167418666666,3130.953679666666,3830.7221036666665,4253.371313333333,6885.048253666668,4065.784471333334,4051.3181206666673,3312.486034666667,3519.332053333333,3578.4504983333336,3061.1413410000005,82353.92672433333,3166.496492,3962.746236333333,3355.8355669999996,3234.4706403333334,3319.0170516666667,3334.766027666667,7453.3247703333345,3356.1106466666665,7517.256305666666,6227.504952666667,2999.276804666666,3185.139871,2740.3619040000003,3554.696368,3908.206846,3055.0123826666663,3224.6066153333336,3576.984728,4848.392336666667,5388.439963000001,3662.7132256666664,6323.533573333332,3432.6356856666666,6223.385519666666,3137.5223516666665,4890.759132333333,3131.3128269999997,3814.362825333333,3452.1440953333336,2932.7764999999995,2816.087773333333,3989.263918666667,3113.313537,4504.276532333333,3561.8186296666663,3505.547739666667,4404.111484,4417.891140666666,4269.754091666667,3434.4542200000005,5476.430249666667,6312.4283306666675,5366.578057333334,3830.2674359999996,4812.407597333333,3376.3011166666674,3358.902772,6465.302481,3668.810244,2920.755890666667,4098.664499333333,3245.7028793333334,3443.5763826666666,3053.3344556666666,5223.266786,4993.329616000001,4095.5644090000005,3369.0089953333336,4341.683867,3377.744091666667,6399.325108333333,3453.0122806666664,2891.474329333333,4122.205589333334,4019.51985,3977.8773416666663,3615.6507353333336,4873.987182666668,3638.5405246666664,2889.41178]

and here is the HTML I get:

<svg width="208" height="30" viewBox="0 0 208 30" data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0"><g data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0.$/=10"><polyline points="2 26.882661489809163 4.170212765957446 27.263627251105998 6.340425531914893 27.575556759074185 8.51063829787234 27.661722304499527 10.680851063829786 27.925281513159756 12.851063829787233 27.359545076105206 15.02127659574468 27.87316338511172 17.191489361702125 27.81744468315839 19.361702127659573 27.499579036588692 21.53191489361702 27.777209020062166 23.702127659574465 27.76420610853987 25.872340425531913 27.4895610102243 28.04255319148936 24.937226341579542 30.212765957446805 27.173169251623303 32.38297872340425 27.872441509304966 34.5531914893617 27.6439128777199 36.723404255319146 27.50588514995601 38.89361702127659 26.646438639765435 41.06382978723404 27.567146794287687 43.234042553191486 27.571871179110577 45.40425531914893 27.813157124280234 47.57446808510638 27.745605865930354 49.744680851063826 27.726299111189892 51.91489361702127 27.895240649243362 54.08510638297872 2 56.25531914893617 27.860834026048156 58.42553191489361 27.60079676481778 60.595744680851055 27.79900014182115 62.76595744680851 27.83863519773724 64.93617021276594 27.81102424099102 67.1063829787234 27.80588097957666 69.27659574468085 26.460852308256765 71.44680851063829 27.798910306987732 73.61702127659574 26.439973706445404 75.78723404255318 26.86117749569509 77.95744680851062 27.915444215661932 80.12765957446808 27.85474551770044 82.29787234042553 28.000000000000004 84.46808510638297 27.734056675997603 86.63829787234042 27.618608103273317 88.80851063829786 27.897242229213134 90.9787234042553 27.8418565664899 93.14893617021276 27.72677779881998 95.31914893617021 27.31156466397376 97.48936170212765 27.13519725326487 99.6595744680851 27.69878079925887 101.82978723404254 26.82981670758106 103.99999999999999 27.77391895006897 106.17021276595744 26.8625228098792 108.34042553191489 27.870296328739503 110.51063829787233 27.297728621211206 112.68085106382978 27.872324219862044 114.85106382978722 27.649255450152452 117.02127659574467 27.767547942157467 119.19148936170211 27.93716171977364 121.36170212765957 27.975269633923446 123.53191489361701 27.592136686070866 125.70212765957446 27.878202383225993 127.8723404255319 27.423945147536553 130.04255319148936 27.731730705495576 132.2127659574468 27.75010751280601 134.38297872340425 27.456656799910665 136.5531914893617 27.452156673906487 138.72340425531914 27.5005349029519 140.89361702127658 27.77332505764909 143.06382978723403 27.10646160427721 145.23404255319147 26.83344343011239 147.40425531914892 27.142336860046903 149.57446808510636 27.644061361955718 151.7446808510638 27.32331647065115 153.91489361702125 27.792316553508854 156.08510638297872 27.797998461640393 158.25531914893617 26.78351817029471 160.4255319148936 27.696789650174864 162.59574468085106 27.94108738047445 164.7659574468085 27.556408916516112 166.93617021276594 27.834967001059212 169.1063829787234 27.770345964452236 171.27659574468083 27.897790202439786 173.44680851063828 27.189139098623652 175.61702127659572 27.264231407748255 177.78723404255317 27.557421336307243 179.9574468085106 27.79469799635838 182.12765957446805 27.47704425581297 184.29787234042553 27.791845310322035 186.46808510638297 26.805064896574393 188.63829787234042 27.767264412350485 190.80851063829786 27.950650079951416 192.9787234042553 27.54872092589063 195.14893617021275 27.582255779262564 197.3191489361702 27.595855286069096 199.48936170212764 27.714150350307463 201.65957446808508 27.30320596282149 203.82978723404253 27.706675059833916 205.99999999999997 27.951323662183132 205.99999999999997 28 2 28 2 26.882661489809163" style="stroke:rgba(62, 67, 71, .5);stroke-width:0;fill-opacity:.1;fill:slategray;" data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0.$/=10.0"></polyline><polyline points="2 26.882661489809163 4.170212765957446 27.263627251105998 6.340425531914893 27.575556759074185 8.51063829787234 27.661722304499527 10.680851063829786 27.925281513159756 12.851063829787233 27.359545076105206 15.02127659574468 27.87316338511172 17.191489361702125 27.81744468315839 19.361702127659573 27.499579036588692 21.53191489361702 27.777209020062166 23.702127659574465 27.76420610853987 25.872340425531913 27.4895610102243 28.04255319148936 24.937226341579542 30.212765957446805 27.173169251623303 32.38297872340425 27.872441509304966 34.5531914893617 27.6439128777199 36.723404255319146 27.50588514995601 38.89361702127659 26.646438639765435 41.06382978723404 27.567146794287687 43.234042553191486 27.571871179110577 45.40425531914893 27.813157124280234 47.57446808510638 27.745605865930354 49.744680851063826 27.726299111189892 51.91489361702127 27.895240649243362 54.08510638297872 2 56.25531914893617 27.860834026048156 58.42553191489361 27.60079676481778 60.595744680851055 27.79900014182115 62.76595744680851 27.83863519773724 64.93617021276594 27.81102424099102 67.1063829787234 27.80588097957666 69.27659574468085 26.460852308256765 71.44680851063829 27.798910306987732 73.61702127659574 26.439973706445404 75.78723404255318 26.86117749569509 77.95744680851062 27.915444215661932 80.12765957446808 27.85474551770044 82.29787234042553 28.000000000000004 84.46808510638297 27.734056675997603 86.63829787234042 27.618608103273317 88.80851063829786 27.897242229213134 90.9787234042553 27.8418565664899 93.14893617021276 27.72677779881998 95.31914893617021 27.31156466397376 97.48936170212765 27.13519725326487 99.6595744680851 27.69878079925887 101.82978723404254 26.82981670758106 103.99999999999999 27.77391895006897 106.17021276595744 26.8625228098792 108.34042553191489 27.870296328739503 110.51063829787233 27.297728621211206 112.68085106382978 27.872324219862044 114.85106382978722 27.649255450152452 117.02127659574467 27.767547942157467 119.19148936170211 27.93716171977364 121.36170212765957 27.975269633923446 123.53191489361701 27.592136686070866 125.70212765957446 27.878202383225993 127.8723404255319 27.423945147536553 130.04255319148936 27.731730705495576 132.2127659574468 27.75010751280601 134.38297872340425 27.456656799910665 136.5531914893617 27.452156673906487 138.72340425531914 27.5005349029519 140.89361702127658 27.77332505764909 143.06382978723403 27.10646160427721 145.23404255319147 26.83344343011239 147.40425531914892 27.142336860046903 149.57446808510636 27.644061361955718 151.7446808510638 27.32331647065115 153.91489361702125 27.792316553508854 156.08510638297872 27.797998461640393 158.25531914893617 26.78351817029471 160.4255319148936 27.696789650174864 162.59574468085106 27.94108738047445 164.7659574468085 27.556408916516112 166.93617021276594 27.834967001059212 169.1063829787234 27.770345964452236 171.27659574468083 27.897790202439786 173.44680851063828 27.189139098623652 175.61702127659572 27.264231407748255 177.78723404255317 27.557421336307243 179.9574468085106 27.79469799635838 182.12765957446805 27.47704425581297 184.29787234042553 27.791845310322035 186.46808510638297 26.805064896574393 188.63829787234042 27.767264412350485 190.80851063829786 27.950650079951416 192.9787234042553 27.54872092589063 195.14893617021275 27.582255779262564 197.3191489361702 27.595855286069096 199.48936170212764 27.714150350307463 201.65957446808508 27.30320596282149 203.82978723404253 27.706675059833916 205.99999999999997 27.951323662183132" style="stroke:rgba(62, 67, 71, .5);stroke-width:0.5;stroke-linejoin:round;stroke-linecap:round;fill:none;" data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0.$/=10.1"></polyline></g><g data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0.$/=11"><circle cx="205.99999999999997" cy="27.951323662183132" r="1.5" style="fill:#4dc47e;" data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0.$/=11.1"></circle></g><line x1="2" y1="29.696789650174864" x2="205.99999999999997" y2="29.696789650174864" style="stroke-width:1;stroke:#3e4347;stroke-opacity:0.5;stroke-dasharray:2 2;shape-rendering:crispEdges;" data-reactid=".f6m4qehyps.2.$/=10.1.1.1.0.1.$Gmail.3.0.$/=12"></line></svg>
borisyankov commented 8 years ago

Added another test using your sample data and the result verified against Excel's median function is correct.

okonet commented 8 years ago

So if the result of the median is correct, is it the scale function issue then? Because I can barely believe it should look like this.

Sincerely yours

Andrey Okonetchnikov

@okonetchnikov http://okonet.ru

On 8. April 2016 at 06:57:33, boris yankov (notifications@github.com) wrote:

Added another test using your sample data and the result verified against Excel's median function is correct.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/borisyankov/react-sparklines/issues/45#issuecomment-207376176

okonet commented 8 years ago

I've tried the latest (1.5.2) version and with the following data set: [0, 0] and I still see the median line is misplaced by 2 px.

2016-05-04 at 14 40

I'll look into it and hopefully will submit a fix soon.

okonet commented 8 years ago

It looks like the bug is in SparklinesLine not in reference line. I'm adding tests and will try to fix it.