feat: PoC for Recharts by Clay implementation

[matuzalemsteles]

From #3734

Don't look at the code so much yet, I still need to adjust a lot of details and TypeScript interfaces. Sorry!

This PR is a bit of my view of how we could approach a Clay implementation for Recharts, initially, it’s not just creating a wrapper but making Recharts’s visual base Lexicon, so we won’t limit any Recharts API or create high-level components.

At first, I created some wrappings on some primitive Recharts components that only have some configurations as default following Lexicon standards, spacing, size and etc... if you notice some fine adjustments are still missing, this is why we need to dig more APIs from Recharts or build our own content for example the case of the Legend component or provide an additional API to the Line component to define the shapes.

• Bar
• CartesianGrid
• Legend
• Line
• Pie
• Tooltip
• XAxis
• YAxis

Some things said in the documents of the Lexicon website are the interactions with the Charts, showing the tooltip about the Axis legend (it also depends on the component), in Legend component, and some behaviors such as the single bar interaction on a grouped chart, this diverges from the interactions Recharts standards, are things that we could facilitate. I haven't worked in all cases yet but some interactions with the legend have been made but are not done by the wrappers, still, the developer will have to control the active state and add some props, so as not to take away the flexibility that Recharts has or the proposal offered by them.

Creating some wrappers on the components of Recharts has some problems, it is quite strange how it works. Although if you see some components in your component tree-like XAxis, YAxis, Line, Pie... they don´t really render the components, it´s funny that Recharts uses children from the parent component to navigate the settings to draw the chart, so when your configuration is not on the children of the parent component Recharts will not recognize and render, think of it as fake components does not seem to be true for some components but for the most majority. To make the wrapper we also need to replicate some statistical methods of these components in the prototype of our wrappers so that it works well, otherwise, it will not work.

Overall I had some difficulties trying to reproduce Lexicon's behaviors and fine adjustments, there are still some places that need to be adjusted but some Recharts APIs are limiting. I think this is the value here, adding these "behaviors" and fine visual adjustments as a Recharts standard without compromising Recharts' proposal or its natural form of composition, so the developer can make the composition he wants as he was doing with Recharts but without having to customize it so much to get the Lexicon look.

• Demos

---

Hey @victorvalle and @hold-shift, I had trouble finding the charts in the Figma to try to get the measurements, colors and etc... I'm also not sure if the documents on the Lexicon website are really up to date, I see some very different adjustments on other charts that I found on Figma.

[victorvalle]

Hi @matuzalemsteles !

I can try to recover most of them. They were Sketch files and now we use Figma. I have files for each one of the charts but not a single one with all of them. I can try to put them together for next week.

[matuzalemsteles]

@victorvalle oh np. It would be nice to have the charts in Figma. Thanks a lot!

[bryceosterhaus]

I'd also be curious in this exploration from the design side of things. It seemed like the initial designs for Lexicon charts were just 1-to-1 copies from billboard.js which leads me to think we may not have to be so tied to that specific design. @victorvallehow tied are we to that specific design of charts? Was this something we came up with before finding billboard, or did we just adopt billboards styles?

[jbalsas]

Hey @bryceosterhaus!

It seemed like the initial designs for Lexicon charts were just 1-to-1 copies from billboard.js which leads me to think we may not have to be so tied to that specific design. @victorvallehow tied are we to that specific design of charts? Was this something we came up with before finding billboard, or did we just adopt billboards styles?

Everything in the chart design was very much intentional. If I remember correctly, it was @emiliano-cicero who worked with @victorvalle on all the initial visuals and definitions. They later collected their thoughts in Building Charts for Multiple Products. I found this old Invisio definition in some of the JIRA tickets.

Once that was done, we started to work on Data Visualization Infrastructure. First thing we did was analyze what was out there, which @julien collected in Data visualization libraries and tools

We decided that having d3.js as a base was useful because we could then easily build more complex visualizations (other than charts), so we foucsed on d3-based libraries and picked billboard.js because:

• It was built on top of latest D3
• It had good mobile support
• It was very customizable
• It was open source
• Developers were very active

With that, we set out to build Lexicon charts. To that end, @julien contributed several features to the upstream project which if I remember correctly got him maintainer privileges. Not sure if he keeps in touch, but we at least added to the library:

• Using other shapes than "circles" for line points #question - feat(shape.line): Allow customization of points
• Question concerning background patterns - feat(patterns): Allow definig custom background patterns
• feat(alternate-markers): Implement alternate markers

You can see @julien's announcement in Loop about it.

Hope this provides some context. We explicitly picked billboard because we knew we could tailor it to our needs and contribute to it if needed. Had we been using React at the time, I'm sure our decision would've been different. In any case, if anything, we made billboard.js look like Lexicon (or at least allow us to build it).

@matuzalemsteles, here are some docs I found so far:

• Invisio
• Line Chart
• Bar Chart
• Geomap Chart
• Doughnut Chart - Invision
• Pie Chart - Invision
• Stacked Bar Invision
• Charts - SVG pattern types
• Charts Loading
• Charts Colors

As you can see, Lexicon thoroughly researched and designed every chart aspect.

[matuzalemsteles]

@jbalsas Wow, thanks for all these links. I stopped looking when I found a Figma document, I think it is now updated after seeing these Invision links, but this document contains only a few charts, I think they were working on migrating all this information to Figma. Good to know that.

Yeah, I had forgotten about those contributions @julien made to Billboard, btw, @julien great work with that 🙂! Feel free to give an opinion on these ideas.

[bryceosterhaus]

Hope this provides some context.

That is great background! I had no idea thats how we ended up with Billboard

[victorvalle]

Thanks for all the recap @jbalsas , it is actually a great explanation of what exactly happened.

All was intentional and Billboard benefited from our work. Here the Mediun article from the owner by that time

[victorvalle]

@matuzalemsteles I've brought all our Sketch files into this Figma so it is a bit more comfortable for all ou you.
All pages coming from Sketch are named "_chart-name" so they are easy to identify.

Let me know if I can help more or if you miss something

[bryceosterhaus]

Gonna close this for now and can re-open in the future if/when it comes up again