open-prices-frontend
open-prices-frontend copied to clipboard
openfoodfacts
Create a average price graph on the product page
Problem
- Create a weekly average price graph on the product page (average of all prices on that week), for the past 6 months
Solutions
- Send back all prices as a table to D3.js or the like, and do charting + slice and dice client side
keywords : graph, chart, map
Part of
- #644
And a quick mockup of what it could look like in the frontend would be great :)
http://localhost:5173/products/3276551080656?display=chart
| v1 | v1.1 | v2 |
|---|---|---|
| display vega-lite graph (only last 10 prices) | load 100 prices, point, tooltip | filter discounted ? split currencies |
show all prices ? Does it make sense to load older prices/display more prices on the graph when the user tap/click on LOAD MORE ?
Just spitballing, what about displaying on the tooltip when we mouse over the price line, when there's a price point the tooltip would show the price, date and Promo would appear if the price is discounted.
yeah my notes aren't very clear ^^ what i have in mind here (and in the map tab) is to load all of the product's price by default. and have additional filters/toggles (on discount, currency, location ?, ...)
@serpico are you available wednesday's at 2pm ? we have our weekly Open Prices calls (link in slack or wiki page or backend README), it would great that you could join ! you're one of the top contributors. general feedback, and also talk graphs :) maybe you plan on coming to the OFF days this weekend in Paris ?
@serpico are you available wednesday's at 2pm ? we have our weekly Open Prices calls (link in slack or wiki page or backend README), it would great that you could join ! you're one of the top contributors. general feedback, and also talk graphs :) maybe you plan on coming to the OFF days this weekend in Paris ?
I'm really thankful for the offer ( and for all the work you're doing ), maybe I'll "attend" the weekly meeting a little further down the road. To help you get a feel or where I stand, I have no coding skills whatsoever, so my natural inclination would be to have everything done through OP ( visualization, report/moderation ) even if I'm somehow aware it's not the proper way :)
yeah my notes aren't very clear ^^ what i have in mind here (and in the map tab) is to load all of the product's price by default. and have additional filters/toggles (on discount, currency, location ?, ...)
For the discount I think I can see how it would work with the toggle ( hide discounted/outliers price(s) ).
But for the currencies not so much...as many curbs/lines drawn as there are currencies for a specific product ( via a toggle favorite currency/ies only [as set in Settings] vs all currencies ?
What's the use case you have in mind ? to see if the price trend looks the same for a product sold in 2 different countries ? what I'm thinking about, if we display currencies as different from the € and Japanese yen or Indian rupee I'm afraid it'll mess up the scale of the graph, flatten the curbs too much....
Location as well, maybe you had a product in mind ? to demonstrate what we currently see/what you'd like to see...
I don't have much of a clue.. For the wednesday's, I didn't mean necessarily to come every week, but tomorrow would be nice to talk about these graphs :)
Anyway the idea is to get something basic working, and then get feedback/ideas from users. There's lots of parameters that could be taken into account. What would be the most important to start with for instance ?
I don't have much of a clue.. For the wednesday's, I didn't mean necessarily to come every week, but tomorrow would be nice to talk about these graphs :)
Anyway the idea is to get something basic working, and then get feedback/ideas from users. There's lots of parameters that could be taken into account. What would be the most important to start with for instance ?
For me, right of the bat, being able to extend the abscissa up to the first price logged in OP instead of just the last 10 prices. There's the "noise" issue, I'm writing something about that in the corresponding discussion right now.
a super quick solution to avoid having the "load more" is to load 100 prices instead of just 10. i'll start with that.
and then :
- have the chart update if more prices are loaded
- have a currency (default ?) filter
- basic tooltip (but just thinking about what to put inside makes me realise i need to think again on the input data, if i want to location i'm going to need un-aggregated data) cc @raphael0202 elasticsearch ?
- "un-hide" the map & graph so that its more visible to users
Thanks !!! The new version of the graph looks good, that's exactly what I had in mind in term of style ( points and line ). But I didn't anticipate it'd be so crowded :) good thing is, we don't have that many products with more than 50 prices yet.
One option to discuss later could be to open the graph in another windows when the user double click on it ( that'd be my initial choice ) or take advantage of all the white space on the right, although it made me think, unlike me, most users use their phones to browse nowadays, so that many informations ( lots of points loaded, the tooltip ) might feel like a downside for them.
Just saying, personally, I don't mind pressing "load more" especially as it's already a basic way to interact with the UI all over open price, by the way is it me or the default "load" is now a 100 everywhere ( last prices, top products, top locations, etc...) ?
Yes i didn't manage to solve the "graph responsiveness" problem, so it's very small for now.
Yes it's 100 everywhere, but i think I'm going to revert on some pages (and introduce some "infinite scrolling"), or bring it to 50, the "latest prices" and "top products" list seem a bit slow now..
Yes i think the graph could almost be a page of it's own. But there will need to be some kind of mecanism to fetch and fill the different graph filters (location, currency, dates..). We could also aggregate by week/month/year.
Let me know if you should open a separate ( or several ) issue.
What about showing discounted prices with a red dot instead of a blue dot ? it would match the color of the discount badge ( we should still be able to hide discounted prices using toggle/filter ).
If/when #569 is implemented, it should be on the graph as well ( dotted line dot ).
ok i reverted to 20 prices loaded everywhere, it was too slow :sweat_smile: I also implemented a v1 of infinite scroll on the price list page.
Idea from @qloridant : display data with a box-plot (min max average median in 1 single graph) for instance a box-plot per year. and/or per location type (online, supermarket, convenience)
https://vega.github.io/vega-lite/docs/boxplot.html