Added support for quadrant chart

[subhash-halder]

📑 Summary

This PR contains the implementation of the new chart type quadrant-chart

Resolves #4282

📏 Design Decisions

I have used a builder class quadrantBuilder.ts which is responsible for the final data creation and space calculation.

data:

    %%{init: {"quadrantChart": {"quadrantPadding": 10}, "theme": "forest", "themeVariables": {"quadrant1TextFill": "blue"}} }%%
    quadrantChart
      x-axis Urgent --> Not Urgent
      y-axis Not Important --> important
      quadrant-1 Plan
      quadrant-2 Do
      quadrant-3 Deligate
      quadrant-4 Delete

Diagram:

data:

    %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
    quadrantChart
      title Analytics and Business Intelligence Platforms
      x-axis "Completeness of Vision ❤" -->
      y-axis Ability to Execute
      quadrant-1 Leaders
      quadrant-2 Challengers
      quadrant-3 Niche
      quadrant-4 Visionaries
      Microsoft: [0.75, 0.75]
      Salesforce: [0.55, 0.60]
      IBM: [0.51, 0.40]
      Incorta: [0.20, 0.30]

Diagram:

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 📓 have added documentation (if appropriate)
• 🔖 targeted develop branch

[sidharthv96]

Looks like an excellent start to me!
Docs and Tests need to be added, along with proper typings.

Also, please add some screenshots in the PR.

[sidharthv96]

The colors don't have enough contrast, we should change the shades slightly.
Also, can you add an option to draw black lines dividing the quadrants?

[sidharthv96]

This looks wonderful @amsubhash!!
Few changes to improve the maintainability.

[sidharthv96]

When I remove the %%{init, the axis moves to the top.
The axis should stay at the bottom if there are points.

Also, if the labels have an arrow, without end label, the arrow should be rendered.
Here, x-axis should have arrow, Y shouldn't.

quadrantChart
      x-axis "Completeness of Vision ❤" -->
      y-axis Ability to Execute

---

Also, if there are no points, the axis labels should shift to the center of quadrants' edges.

[subhash-halder]

The colors don't have enough contrast, we should change the shades slightly. Also, can you add an option to draw black lines dividing the quadrants?

@sidharthv96 I have used the default theme color here and lighten the primary color, please check the update chart with border if you still think we need to change the color what I can do is darken the colors if the color is light.

[subhash-halder]

When I remove the %%{init, the axis moves to the top. The axis should stay at the bottom if there are points.

Also, if the labels have an arrow, without end label, the arrow should be rendered. Here, x-axis should have arrow, Y shouldn't.

quadrantChart
      x-axis "Completeness of Vision ❤" -->
      y-axis Ability to Execute

Also, if there are no points, the axis labels should shift to the center of quadrants' edges.

Fixed all these

[sidharthv96]

Wonderful work!

Few more issues I noticed when testing.
Some themeVariable is leaking? as the bottom border is green too.

---

The "quadrant1TextFill": "red" seems to be applied to all labels.

---

Can you make sure the arrows on the axis is an SVG or Unicode symbol instead of --> ?

[sidharthv96]

quadrantChart
      x-axis Urgent --> Not Urgent 
      y-axis Not Important --> important
      quadrant-1 Plan
      quadrant-2 Do
      quadrant-3 Deligate
      quadrant-4 Delete

Loading

This is failing because, Not Urgent has a space at the end. Should be a fix in jison.

[subhash-halder]

Few more issues I noticed when testing. Some themeVariable is leaking? as the bottom border is green too.

Here I had used the secondaryBorder color now I have changed to primaryBorder color for both

The "quadrant1TextFill": "red" seems to be applied to all labels.

Fixed

Can you make sure the arrows on the axis is an SVG or Unicode symbol instead of --> ?

Why do we need this? I have not seen this kind of implementation in the codebase. I tried changing to Unicode but it has the same effect.

[subhash-halder]

quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> important
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Deligate
quadrant-4 Delete
This is failing because, Not Urgent has a space at the end. Should be a fix in jison.

fixed

[knsv]

Few more issues I noticed when testing. Some themeVariable is leaking? as the bottom border is green too.

Here I had used the secondaryBorder color now I have changed to primaryBorder color for both

The "quadrant1TextFill": "red" seems to be applied to all labels.

Fixed

Can you make sure the arrows on the axis is an SVG or Unicode symbol instead of --> ?

Why do we need this? I have not seen this kind of implementation in the codebase. I tried changing to Unicode but it has the same effect.

This is just meant as a rendering of the arrow in the final graph without characters, prettier :) Not a showstopper, we can change that to an arrow at a later stage.

Great job!

[sidharthv96]

Looks good to me!
Love the unit tests too...

---

The arrows are not a showstopper, just that the --> doesn't look "clean". ⭢ ⭡Does using these unicode help?

[sidharthv96]

Unicode does seem to work.

[tobie]

This is amazing! thank you so much for doing the work!

[subhash-halder]

Unicode does seem to work.

Ok I got it I was thinking of changing only the > as it can be a special case of html rendering issue. any way I can add it later.

Overall it was a nice experience I had fun building the feature, thanks @sidharthv96 for the detailed review, I learned a lot while developing it specially, jison and cypress.

[padorob]

Do you think it would be possible to have a third dimension for the relative bubble size?
So that one could create also things like: