feature: Match the design for the scatterchart

[bdougie]

Current

Design

What's missing?

• Rounded avatars
• White Border on the avatar
• Avatars escape the bounds of the chart
• Today is on the left and needs to be on the right.

@chadstewart can you take a look?

[chadstewart]

I'm not gonna lie, I don't think I can style the images any more that I what I have now other than editing their opacity. Been trying to at least add a border using the eCharts documentation and eCharts is not having it. Been at this for a few hours and just don't understand why it isn't working. I'll keep trying but I very much doubt I'll get any further.

[bdougie]

Shall we start looking into the new Nivo chart library? https://nivo.rocks/scatterplot/

Also checking, are you able the other things besides the border?

• Avatars escape the bounds of the chart
• Today is on the left and needs to be on the right.

[0-vortex]

echarts bad 🤦

[chadstewart]

Shall we start looking into the new Nivo chart library? https://nivo.rocks/scatterplot/

Also checking, are you able the other things besides the border?

• Avatars escape the bounds of the chart
• Today is on the left and needs to be on the right.

Was able to add an offset to the avatars but technically I think they can escape from the top of the chart. Currently there isn't data that allows for that. Also am able to move the Today to the other side of the chart.

[bdougie]

Hey another thought here. What if we add cloudinary processing the images and pass those urls? This would give us the ability transform (border and round) the images, as well as cache them some where.

Alternatively, we could use imagemagick (cli tool for image transforms) + supabase storage to do the same for free.

@brandonroberts have you done anything like this before?

[0-vortex]

Hey another thought here. What if we add cloudinary processing the images and pass those urls? This would give us the ability transform (border and round) the images, as well as cache them some where.

Alternatively, we could use imagemagick (cli tool for image transforms) + supabase storage to do the same for free.

@brandonroberts have you done anything like this before?

I have done this before but i think it is deep overkill / scope creep 🍕

[brandonroberts]

I've used cropperjs to do something similar to this before for rounding avatars dynamically. https://fengyuanchen.github.io/cropperjs/

https://fengyuanchen.github.io/cropperjs/examples/crop-a-round-image.html

If we run into the same issues with Nivo, or we have to stick with eCharts for now, I'd suggest processing the image first before passing it to eCharts.

[eryc-cc]

I've used cropperjs to do something similar to this before for rounding avatars dynamically. https://fengyuanchen.github.io/cropperjs/

cc @chadstewart

[bdougie]

... for now, I'd suggest processing the image first before passing it to eCharts.

Took a look at cropperjs and am unsure how to process it outside using the canvas editor. I do agree with processing the image before sending it to the echart is the ideal path.

more research on the scope creep option

I did more research on the cloudinary/imagick suggestion. FWIW, I agree this is scope creep and want to point out that the data on the scatter chart is still not real data. Real data is a higher priority than round avatars.

I found this stackoverflow answer where someone does something similar.

example - https://images.weserv.nl/?url=https://www.github.com/bdougie.png?size=60?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d

Cloudinary

Here is the above url example using cloudinary https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_fill,g_face,r_max/front_face.png

This would require a cloudinary account.

// uploading js example. If the image exists, it patches in case someone updates their avatar.
new CloudinaryImage("front_face.jpg");

imagemagick

My high level though on imagemagick + a serverless function:

• check for [user].png in storage
• leverage imagickmagick to round the avatar
• upload or update to supabase storage as the [user].png if not present
• render supabase image urls

s/o on using imagemagick

docs on rounding avatars

[0-vortex]

@bdougie your comment is bugged, infinite scrolling.

Also, I would like to put an end to such discussions, if we are declining to just get the user avatars (90mil) and store them (anywhere), processing those images literally doubles the cost, in storage and processing.

Furthermore, I have mentioned this before, we do have a ready solution for imagemagick that does way more than what you expect, it kind of does everything EXCEPT making round borders.

Please, close this subject forever (yes, high entropy words) or take the code, stop digressing into becoming an image processing company.

Also, we can't put more effort into brainstorming and designing a resize solution than we did in the whole charts library - we are drawing the charts, what do we mean by we can't make it round?!

Delete the charts library, use something else, literally anything that works, don't make the boxes rounded, stop pushing the backend into storing avatars. Do we need to have a full on meeting about why avatars won't happen? It keeps coming up as a subject every now and then?

[bdougie]

I suppose storing 90 million avatars is indeed expensive. I did not take that into account. I was coming at this from the 150k active Hacktoberfest contributions.

With that said, we can pause this discovery since it is not time well spent. I do believe in this team and know we can eventually solve this or at least redesign.

For now, data integrity is higher priority than rounded avatars.

FWIW, I agree this is scope creep and want to point out that the data on the scatter chart is still not real data. Real data is a higher priority than round avatars.

[github-actions]

🎉 This issue has been resolved in version 1.8.0-beta.10 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀