March 2025: From Dashboards to Destructuring - A JavaScript Roundup
Learn how to cross-filter Plotly.js charts in React, and revisit some of the best ES6 features—because good JavaScript never gets old.
Hi readers,
The days are finally starting to feel significantly longer (and more light filled) in this part of the world, and spring has sprung. Although in Atlanta we’re entering peak pollen season - think so much pollen everything has a yellow dusting, I’m still enjoying being outdoors without more than a light jacket.
I recorded a few new episodes of the LogRocket podcast this month with some really interesting folks, but the episodes aren’t live yet, so you’ll have to wait until next month to listen in.
Instead, I’ll give a you a couple of useful JavaScript and React articles instead. Enjoy!
In this article, I show you how to cross-link Plotly.js charts inside of a React web app.
Data visualization-heavy dashboards are a pretty standard type of application web developers have to build, and since charts and graphs can get really complicated really fast, using a charting library is usually the best way to go.
There’s lots of good options for JavaScript developers, and for a recent project, since I was building a Next.js-based dashboard, I chose the open source Plotly library with its React-specific implementation.
One short coming of the JS version of Plotly (there’s also a Python version available) is that multiple graphs can’t be cross-linked (or cross-filtered) right out of the box. Not to worry though, building what I want is part of what’s so great about being a developer.
In my blog post, I go step-by-step through how to make a reusable graph React component and use a shared parent component to manage the date ranges shared with the charts.
Here’s a short demo video to show you what the finished product looks like.
And I finally wrapped up my ES6 blog series with a post about destructuring objects and arrays; such a useful addition to the JavaScript language.
Although JavaScript ES6 is years old now, there’s still plenty of developers for whom it’s not well understood.
In 2019, I wrote a series of posts about ES6 features I use most frequently to provide short, deep dives about various improvements to the language that I hope will help developers in their own codebases.
Some of the ES6 topics I covered included: the spread and rest operator, string template literals, and object manipulation functions like keys, values, and entries.
For my tenth (and final) installment, I cover destructuring arrays and objects in the much more concise ES6 syntax. Pull out individual values and properties much easier than ever before.
Give it a read - you may be surprised what you learn (or forgot you learned in years past).
If you want to see all the articles in the series, you can go to my website and type “ES6” in the blog page search bar.
I hope you enjoyed this month’s edition of “Paige Codes.” Please share with your friends if you did.
See you again at the end of April,
- Paige
Not subscribed yet? No worries.
I send a free email every month or so. You can check out my archive, or sign up below: