Migrate Chart visualization to React Part 2: Editor

[kravets-levko]

What type of PR is this? (check all applicable)

• Refactor

Description

• Convert component to React
  • General tab
  • X-Axis tab
  • Y-Axis tab
  • Series tab
  • Colors tab
    • for Pie
    • for Heatmap
    • for other types
  • Data Labels tab
  • Custom chart settings
• Refine & performance
  • Debounce inputs
• Cleanup
• Tests

To discuss:

• Custom chart: Auto update graph options (seems it never worked)
  • Keep as is for now, fix (re-implement) later.
• Are X and Y Axis tabs needed for Pie chart type?
  • Not needed, now are hidden when global series type is pie.
• Use Antd icons for chart types (seems there are all icons we need)
  • Keep as is for now.

Related Tickets & Documents

#3301 (Migrate Visualizations to React -> Chart)

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

There are some screenshots to show general look&feel. I didn't attach screenshots for all possible settings combinations.

Click to expand

General:

X Axis:

Y Axis:

All except of heatmap:

Heatmap:

Series:

Colors:

Data Labels:

[kravets-levko]

@arikfr @ranbena @gabrieldutra I still need to add some tests for chart editor, but meanwhile you're welcome to review the code and discuss items I mentioned in PR description. Thanks!

[arikfr]

Probably not so hard to fix it, but it's rather implementing this feature from scratch - which I'd prefer to do as a new PR.

Ok, leave as is.

I think I'll hide that tabs when selecting pie as global series type.

👍

As for the fonts: whatever feels better to you.

[deecay]

Hi,

In this deploy preview page, "Edit Visualization", then go to "Colors" to change the color will unexpectedly change the bar chart into a line chart.

[kravets-levko]

Hey @deecay, nice catch 🙂 Thank you!

[ranbena]

Got a few comments/suggestions in there

[ranbena]

🎉

[susodapop]

General behavior

This works as I expect it to.

Missing and NULL values

1. "keep" should at least be capitalized "Keep"
2. "convert to 0" should be capitalized "Convert To 0"

Can we change this text to make it more clear?

1. "Do Not Display In Chart"
2. "Convert To 0 And Display In Chart"

Color Picker

Tremendous addition. It would be nice if it remembered a pallet of recent colors.

[arikfr]

Tremendous addition. It would be nice if it remembered a pallet of recent colors.

That's a good idea, but out of scope for this PR.

[arikfr]

🎉