DEV Community: Agata

React.useRefの理解を含めるエクササイズ

Agata — Sat, 29 Jul 2023 05:57:20 +0000

document.getElementById vs useRef vs useState

違いはわかりますか…？
いつ使えばいいか迷ったら、ぜひ下記のエクササイズをやってみてください!

エクササイズはこちらです：

https://codesandbox.io/s/react-useref-t7pmkn?file=/read.me

プロジェクトでは４つエクササイズがあります：

エクササイズ1：src/components/Zero.tsx　（document.getElementById vs useState）
エクササイズ2：src/components/First.tsx (document.getElementById vs useRef)
エクササイズ3：src/components/Second.tsx (useRef vs useState：useRefを使いすぎた場合)
エクササイズ4：src/components/Third.tsx (useRef vs useState：不要なレンダリング防ぎ方)

read.meを参考にしてください。

回答はこちらになります：

https://codesandbox.io/s/react-hooks-good-answers-6mhjcz?file=/read.me

Hole in Highchart Stacked Chart

Agata — Sun, 02 Oct 2022 07:44:12 +0000

Sample problem

Let's imagine we want to create a stacked chart showing a state of a group of 30 robots. Some robots are working (live state), some are switched off (dead state).
Let's have two series for both states:

Live series: [[t1, 30], [t2, 0], [t3, 30]]
Dead series: [[t2, 30]]

We want to catch on the graph the moment t2, when robots are in dead state. Let's see what we get on the graph:

We don't see any data for red "dead" series. When we hover over the chart we can find the point when all robots are in dead state, but it's not visible for us at the first glance.

Link to live example

Reason

Let's analyze our points on the following picture.

By default, Highcharts don't show single data points. That's why the red "dead" series is not visible.

Solution

If we have in one series more than one point, then it will be displayed. For example, we could add to red series the follwing points to get the desired shape:

Dead series: [[t1, 0], [t2, 30], [t3, 0]] Or - to distinguish points added by ourselves:
Dead series: [[t1, Number.EPSILON], [t2, 30], [t3, Number.EPSILON]]

Number.EPSILON is used here, because it's a number near zero that would never ever be in our dataset, thus it would be easy to filter it out in tooltip if necessary (we add some data here only for visualization, so in some cases it's not good to show it to the user in a tooltip).

Final result

Link to live example

Now we can see clearly when all 30 robots were not working.

3 Tips to Make Your UI Better - Tables

Agata — Fri, 19 Aug 2022 17:43:00 +0000

If you are a frontend developer and create some tables/grids, keep in mind the following 3 simple tips so the outcome is more readable for your users:

Tip 1 - format and use monospaced fonts for numbers

Imagine that you have a table like this:

The column No of items is hard to read - can you tell what is the number 9111111 at first glance? Let’s format it:

Much better, but if you look at 9 111 111 and 1 999 999 in the table, the length of the 1 999 999 is much bigger and makes an illusion that 1 999 999 is greater than 9 111 111. It’s because the width of 1 and 9 in the chosen font is different. Let’s fix it with a monospaced font (all characters in such a font have the same width):

The numbers are now easy to compare but the text became also monospaced. Unlike in the case of numbers, text is more readable without a monospaced font. There are fonts that are monospaced for numbers but not for other characters - let’s see the result:

Tip 2 - proper alignment in header and columns

Let’s consider such an example:

As you can see, the alignment is a bit strange.

Alignment in columns

Let’s start with correcting the alignment in columns:

align to left: text
align to right: numbers - because it’s easier to compare the numbers this way

What about centering in columns?

It’s ok for columns with values of the same length (like “Sent”) but not recommended for other cases (like numbers and text with various length) because it’s much less readable.

Alignment in headers

General rule for alignment in headers is to fit the alignment in its column:

It’s clear what the header is corresponding to.

Tip 3 - don’t overuse colors and lines

It’s good to use delicate colors to make it easier to follow data in a row but too many lines make the look less readable and a bit old-fashioned.

Summary

From my experience, a neat and readable table should follow at least the following tips (of course there are many exceptions, I’m generalizing 🙂 ):

for numbers - use monospaced font, for text - use not monospaced font,
numbers should be aligned to right, text to left,
colors shouldn’t bring users attention but the data should be easy to track in rows and columns.

Thanks for reading!

[Performance] Drawing 300 stacked series with 60 000 points in Highcharts’s Highstock charts

Agata — Sun, 14 Aug 2022 13:48:00 +0000

Intro

Highcharts is a charting library for JavaScript projects ( see more ). It offers various types of charts, the API is very intuitive to use, the documentation is also clear and the Highcharts Team is always ready to help.
Although, working with huge data sets can be quite demanding. In this article, let me introduce some general performance improvement solutions and one for Highstock stacked charts.

General performance improvement solutions

Performance can be improved by:

Switching off animations
Switching off series in navigator
Using Data grouping
Using Boost module

For React users, don’t forget to control re-rendering - use shouldComponentUpdate / useMemo / useEffect etc. Re-rendering the whole chart with a huge data set can be quite time consuming 🙂

Highstock stacked AREA chart performance problem

Requirements

My task was to create a chart with following requirements:

Use Highcharts stock stacked chart
Display about 300 series (about 60 000 points)
Series with various lengths (some series have about 4 000 data points, some can have about 10)

I was quite sad to find out it’s barely usable - it takes about 10 seconds to navigate in the bottom navigation bar ( Live demo ).

Data Grouping

Data grouping replaces a sequence of data points in a series with one grouped point.

I tried to improve the performance with data grouping but I wasn't satisfied with the results. Here's why ( Live demo ) :

Navigation with the bottom navigation bar works much faster but it still freezes for about 2 seconds.
The data is flatter which leads to hiding spikes in data. Exemple 1: Before - without data grouping: Exemple 1: After - with data grouping: Example 2 (data spike): Before - without data grouping - the spike is at about 1000M Example 2 (data spike): After - with data grouping - the spike doesn’t reach 1000M
Also, with data grouping I have observed weird shapes that didn’t stack properly, but I didn’t dig into it further.

I needed some faster and more precise visualization so I gave up on data grouping and tried out the Boost module.

Boost module

focuses on handling and rendering as many data points as possible as quickly as possible

Also boost module didn't fit my data set:

The rendering time was’t perfect as well, as you can see in the Live example
Sadly, as you read in the documentation

The area of area and areaspline series are drawn as 1px columns.

It’s not perfectly suited to area charts. In short - my data set looked like that:

Because my series had various lengths it was hard to adjust the boost parameters. There are two parameters to do so:

seriesThreshold- a threshold which describe the minimal number of series to start rendering in boost mode, eg. if you have it set to 20 and you have 10 series the chart will never render with the boost module (it seems like it also counts series in navigator).

boostThreshold - a threshold which for a single series describes when to enter the boost mode. For example if you have displayed a part of series a with 100 points, second series b with 10 points, and boostThreshold = 50, the boost mode will be active only for the series with a with 100 points.
In my case most of the series were short, so I had to use a low value of boostThreshold to enable it on the short series and increase performance. This way, when I zoomed in the chart with the navigator, the boost mode was enabled constantly (because the displayed part of the series always had more than the boostThreshold number) showing the 1px width columns with a lot of blank space.

For my dataset it was a useless module but it works great with line charts.

Final solution - switching to stacked LINE chart

I decided to change the approach. I changed the area chart to a line chart and the performance problem was fixed (Live demo)!

But… another problem approached me 🙂

Disorder of series problem

As you can see in the live demo and the picture above, the order of series is wrong (it's changed) at Jun 10, 14:15:18 - green series with name “b” goes under yellow series “c” instead of stacking on the top of them giving an illusion that the value drops suddenly.

Why is it happening? Because of a lack of a data point in series “a” at Jun 10, 14:15:18.

Solution: add a point that has a null value at Jun 10, 14:15:18. This will prevent the series from changing order ( Live demo ).

Final word

Note about initial loading time of each chart type

Stacked Area chart without improvements: about 7 468 ms (7s is way too long!)
Stacked Area chart with Data Grouping: 885 ms
Stacked Area chart with Boost Module: 745 ms
Stacked Line chart without improvements: 716 ms

The fastest is definitely the Line chart, also it's visible that navigating on this chart is the fastest.

Performance is a very important matter and it was worth spending some time on investigating possible improvement methods. I hope you can find some hints for your data visualizations here!

Also, I would like to thank the Highcharts Team for their support in resolving the issue with wrong series ordering in stacked line chart.