feat(stack by dimension): add a stack by dimension dropdown list #32707

jpchev · 2025-03-17T19:55:10Z

SUMMARY

feature for bar chart, to stack by dimension, see
#32496

basically, this is a new option to let users select a dimension to 'stack by', see the video here

stackByDimension.mp4

the dimension to 'stack by' can be selected between the dimensions defined by the user, in the Customize tab

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Fix Detected
	Missing conditional visibility for stack dimension control ▹ view	✅
	Redundant shouldMapStateToProps Function ▹ view	✅
	Incorrect Operator Precedence in Dimension Index Calculation ▹ view	✅

Files scanned

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.

You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.

Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.

On any given comment that Korbit raises on your pull request, you can have a discussion with Korbit by replying to the comment.

Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

Check out our docs on how you can make Korbit work best for you and your team.

Customize Korbit for your organization through the Korbit Console.

Feedback and Support

Tell us what you think of Korbit

Schedule a call with our team

Email us @ [email protected]

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

+    const idxSelectedDimension = formData.metrics.length > 1 ? 1 : 0 
+      + chartProps.rawFormData.groupby.indexOf(stackdimension);


superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

villebro · 2025-03-17T20:37:18Z

@jpchev please add a comprehensive description + screens to this PR so reviewers can first validate the design, and then look at the implementation details. I know these may be covered by the linked GH Issue, but the discussion is pretty lengthy. I think the feature is great, but I feel we need to be very careful of how this is implemented to ensure we don't pile on technical/design debt that will be difficult to clean up later.

rusackas · 2025-03-17T21:35:57Z

This is looking cool!

Do you need to add the "Stack by" dimension to the "Dimensions" input? If so, this works fine as-is.

If you don't, I'd be still be happy with:
• Renaming "Dimension" to "Split By"
• Moving the "Stack By" to the main control panel
• Killing the checkbox

... but if that entails a lot of work (which it might) then I still like this improvement :)

jpchev · 2025-03-17T23:30:28Z

@villebro I added a description for this PR

michael-s-molina · 2025-03-18T17:19:55Z

How is this going to interact with the Stack control that already exists?

sadpandajoe · 2025-03-18T17:21:08Z

I'm a little bit confused about this since not everything is stacked according to your video. Is this more of a group by dimension or something?

villebro · 2025-03-18T17:22:29Z

@jpchev I reviewed the video and in general I think this is an elegant and backwards compatible solution to the problem 👍 I will review in more detail in the coming days.

jpchev · 2025-03-18T17:24:14Z

How is this going to interact with the Stack control that already exists?

as far as I understand, the new feature has no interaction with the existing stack control

jpchev · 2025-03-18T17:26:18Z

I'm a little bit confused about this since not everything is stacked according to your video. Is this more of a group by dimension or something?

yes, this is a sort of 'group by', but it's called 'stack' in the Apache Echarts vocabulary (see https://echarts.apache.org/handbook/en/how-to/chart-types/bar/stacked-bar/).
Actually the feature propagates a 'stack' parameter in the underlying Echarts component

michael-s-molina · 2025-03-18T17:34:30Z

Wouldn't be better to offer a control to define how things are stacked AFTER you set Stacked Style to Stack? Right now, it find really confusing that we have 2 controls for stacking.

jpchev · 2025-03-18T17:37:02Z

Wouldn't be better to offer a control to define how things are stacked AFTER you set Stacked Style to Stack? Right now, it find really confusing that we have 2 controls for stacking.

I don't know, what is the existing stack doing?

michael-s-molina · 2025-03-18T17:43:25Z

I don't know, what is the existing stack doing?

It's stacking the bars under a common name. That's why all bars appear in the same stacking group. It seems you're trying to offer a way to modify this logic and that's why I think they are related.

jpchev · 2025-03-20T08:41:19Z

I don't know, what is the existing stack doing?

It's stacking the bars under a common name. That's why all bars appear in the same stacking group. It seems you're trying to offer a way to modify this logic and that's why I think they are related.

yes, they are probably related and I think that the existing stack feature should become a particular case of a broader feature which should let user stack by a label in each series. This label would work as a group by criteria, as it is implemented in Apache Echarts

b4s36t4 · 2025-03-25T06:43:12Z

Hi, @jpchev. I'm trying to implement the stacked chart as you did above for the below dataset.

id,sprint,stories,p0_issues,p1_p2_issues,effieciency
1,2023#07,24,1,5,4
7,2023#06,25,4,10,1.785714286
2,2023#05,26,4,12,1.625
3,2023#04,26,8,20,0.7878787879
4,2023#03,22,10,30,0.55
5,2023#02,23,9,40,0.4693877551
6,2023#01,21,15,28,0.488372093

Can you help me understand by giving a demo for this, I'm not able to build the chart for the dataset as you did.
You can hit me @b4s36t4 in discord or telegram we can take things over there. Thanks for the help!

jpchev · 2025-03-25T09:10:08Z

Hi, @jpchev. I'm trying to implement the stacked chart as you did above for the below dataset.
id,sprint,stories,p0_issues,p1_p2_issues,effieciency
1,2023#07,24,1,5,4
7,2023#06,25,4,10,1.785714286
2,2023#05,26,4,12,1.625
3,2023#04,26,8,20,0.7878787879
4,2023#03,22,10,30,0.55
5,2023#02,23,9,40,0.4693877551
6,2023#01,21,15,28,0.488372093
Can you help me understand by giving a demo for this, I'm not able to build the chart for the dataset as you did. You can hit me @b4s36t4 in discord or telegram we can take things over there. Thanks for the help!

hello,
if you want to stack together p0_issues and p1_p2_issues, and keep 'stories' in a separate stack, in order to use my approach you can change your dataset (you can always modify your SQL query) like the following dataset (I put only the data for the sprint '2023#07'): getting one row per measure, measures types are stored in the 'type' column and their values are in the 'val' column. The the 'cat' column lets you separate the stacks, and that's the dimension you can stack by.

id,    sprint,           cat,       type,                 no,
1,      2023#07,         S1,         stories,             24
1,      2023#07,         S2,         p0_issues,           1
1,      2023#07,         S2,         p1_p2_issues,        5
1,      2023#07,         S3,         efficiency,          4

michael-s-molina · 2025-03-25T17:05:32Z

@sadpandajoe You requested my review but I didn't see any change since my suggestion to implement this feature as a sub-control of the existing Stacked Style control.

github-actions · 2025-04-07T16:33:44Z

@rusackas Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

rusackas · 2025-04-07T16:38:24Z

Spinning up an ephemeral environment so we can all play around with this and figure out if it's the behavior we want.

I see from the video that adding a Stack dimension automatically checks the Stack checkbox (awesome), but I what I might expect is something like:

Stack dimension input is not shown until the checkbox is checked
When you check the box and don't pick a dimension, it acts like it does today (no change in behavior)
When you select a Stack By dimension, the new logic is applied. I'm a little confused by the actual logic here like @sadpandajoe is, but I'll play with it on the ephemeral and see if I can make heads or tails of it.

Also, for what it's worth, someone was just asking me about this exact feature, so I'm very excited about this getting merged once we all agree on the details :D

github-actions · 2025-04-07T16:43:02Z

@rusackas Ephemeral environment spinning up at http://35.93.186.138:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

michael-s-molina · 2025-04-07T16:47:47Z

Stack dimension input is not shown until the checkbox is checked

@rusackas I don't think a checkbox is necessary here. The way I can see this working would be to offer a control to change the stack group after you set the Stacked Style control to Stack. The stack group is what ECharts use to group the dimensions. In Superset, this value is defined here.

rusackas · 2025-04-07T21:10:01Z

@rusackas I don't think a checkbox is necessary here.

Doh! 🤦 You're right. I forgot about the Select powering stacked mode... I thought the checkbox was there all along. So basically, would it make sense to do this? (cc @kasiazjc)

Also, just kicking the tires here, I'm a little bit unsure of this working correctly. On the ephemeral/test workspace, I set up this chart. As you'll see, if you "stack by" with the "status" column, you get a stack of countries, and if you "stack by" the "country" column, you get a stack of statuses per country. It feels like the logic is inverted.

jpchev · 2025-04-08T07:50:32Z

Also, just kicking the tires here, I'm a little bit unsure of this working correctly. On the ephemeral/test workspace, I set up >this chart. As you'll see, if you "stack by" >with the "status" column, you get a stack of countries, and if you "stack by" the "country" column, you get a stack of >statuses per country. It feels like the logic is inverted.

Isn't "stack by" intended as "group by" in SQL ?

If you stack by status, you get one vertical stack per each status (a "group" per each status), where each segment in the vertical stack is a country (the other dimension).
If you stack by country, you get one vertical stack per each country (a "group" per each country), where each segment in the vertical stack is a status (the other dimension).

That's the behaviour of the "stack" parameter in Apache Echarts: "The value of stack explained what series will be stacked up together"

see https://echarts.apache.org/handbook/en/how-to/chart-types/bar/stacked-bar/

rusackas · 2025-04-10T16:05:41Z

Also, just kicking the tires here, I'm a little bit unsure of this working correctly. On the ephemeral/test workspace, I set up >this chart. As you'll see, if you "stack by" >with the "status" column, you get a stack of countries, and if you "stack by" the "country" column, you get a stack of >statuses per country. It feels like the logic is inverted.

Isn't "stack by" intended as "group by" in SQL ?

If you stack by status, you get one vertical stack per each status (a "group" per each status), where each segment in the vertical stack is a country (the other dimension). If you stack by country, you get one vertical stack per each country (a "group" per each country), where each segment in the vertical stack is a status (the other dimension).

That's the behaviour of the "stack" parameter in Apache Echarts: "The value of stack explained what series will be stacked up together"

see https://echarts.apache.org/handbook/en/how-to/chart-types/bar/stacked-bar/

Ahh... I see your logic. I guess this is a bit of confusion on my part, but I can't help but wonder if I'm alone here.

When you say "stack by," and select "country" I was expecting to see a stack of countries. In the current code, it's what I'd expect for a "split by" or "group by" control. It's a little weird to me that you select "stack by" and that's not what's stacked up!

Curious if @villebro / @mistercrunch / @kasiazjc have opinions on the matter. I'd be OK merging this as-is, if others are happy with it. The confusion may be all mine.

michael-s-molina · 2025-04-10T16:28:01Z

I'd be OK merging this as-is, if others are happy with it. The confusion may be all mine.

For me, we would need to remove the checkbox, to avoid creating confusion with the Stacked Style control, and show the additional control to change the stack group once Stacked Style = Stacked.

kgabryje · 2025-04-10T16:44:46Z

I agree with @michael-s-molina and @rusackas - it feels more intuitive for Dimension to stack by control to appear only when Stacked style is set to Stack. Overall a great feature though!

kgabryje · 2025-04-10T16:45:15Z

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -317,6 +318,52 @@ const config: ControlPanelConfig = {
      label: t('Chart Options'),
      expanded: true,
      controlSetRows: [
+        [
+          {
+            name: 'stackbydimension',


nit: can we use camelCase for the name?

kgabryje · 2025-04-10T16:45:26Z

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

+        ],
+        [
+          {
+            name: 'stackdimension',


jpchev · 2025-04-10T19:07:27Z

ok, I can implement the suggested changes.

An important point: do I need to implement something for the persistency in the database? Honestly I have missed that point, I don't know whether the fields in the form are all taken into account automatically when saving a chart

mistercrunch · 2025-04-12T19:27:25Z

do I need to implement something for the persistency in the database?

Nope, this will happen on its own. As you alter the controls and related logic in the database, all of this automatically end up in serialized JSON payload for the chart given chart. For reference, I'm pretty sure it lands in here ->

superset/superset/models/slice.py

Line 80 in 347c174

params = Column(utils.MediumText())

. Another interesting to know is around "what happens with the missing params for older charts?". The short answer is we simply use the defaults defined for the unreferenced controls when loading the chart, so it's important to make sure that defaults won't change the charts in anyways.

Now in some fairly rare cases where we want to change control semantics or structure, it sometimes requires a chart database migration, where it's possible to alter the params strucuture of existing charts. I don't think we need anything like that in this particular case.

jpchev · 2025-04-16T11:16:45Z

@kgabryje @michael-s-molina @rusackas I've removed the checkbox and bound the visibility of the "dimension to stack by" dropdown to the value "Stack" of the existing "Stacked style" control.

Can you please have a look?

github-actions · 2025-04-16T11:22:18Z

@michael-s-molina Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-04-16T11:33:54Z

@michael-s-molina Ephemeral environment spinning up at http://35.167.64.30:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

rusackas · 2025-04-18T16:25:46Z

Added a test chart here. Controls look a lot cleaner with the conditional rendering now, thank you! Seems to work well in both vertical and horizontal mode. I still feel the dimension added to "Stack by" feels more like a "Split by" or "Create Stacks for" but again, maybe it's just me expecting "Stack by" to be the dimension that IS stacked. I think the tooltip does help explain the situation, though.

jpchev · 2025-04-22T08:38:27Z

Added a test chart here. Controls look a lot cleaner with the conditional rendering now, thank you! Seems to work well in both vertical and horizontal mode. I still feel the dimension added to "Stack by" feels more like a "Split by" or "Create Stacks for" but again, maybe it's just me expecting "Stack by" to be the dimension that IS stacked. I think the tooltip does help explain the situation, though.

Good, thanks for reviewing, can we consider having the feature merged? I can change the labels if that's better (replace "Stack by")

stack by dimension

94584fa

pull-request-size bot added the size/M label Mar 17, 2025

github-actions bot added the plugins label Mar 17, 2025

dosubot bot added the viz:charts:bar Related to the Bar chart label Mar 17, 2025

korbit-ai bot reviewed Mar 17, 2025

View reviewed changes

fixes korbit-ai

adb4742

jpchev changed the title ~~stack by dimension~~ feat(stack by dimension): add a stack by dimension dropdown list Mar 17, 2025

fixes korbit-ai

9221dd0

jpchev mentioned this pull request Mar 17, 2025

Feature request: stacked grouped mixed chart #32496

Open

fixes lint

0b821c9

jpchev added 5 commits March 17, 2025 22:50

fixes lint

2c0cb8d

fixes lint

6c8d54e

fixes lint

f960f12

fixes lintush

eb1d571

fixes lintush

ea6d28f

sadpandajoe requested a review from villebro March 25, 2025 15:59

sadpandajoe requested review from geido and michael-s-molina March 25, 2025 15:59

rusackas added the testenv-up label Apr 7, 2025

kgabryje reviewed Apr 10, 2025

View reviewed changes

changes to adapt to suggestions

691b3df

github-actions bot added the dependencies:npm label Apr 16, 2025

CAPELLI Giampaolo added 3 commits April 16, 2025 11:53

prettier

a304159

prettier

7028093

prettier

51f9e4b

michael-s-molina added testenv-up and removed testenv-up labels Apr 16, 2025

		const idxSelectedDimension = formData.metrics.length > 1 ? 1 : 0
		+ chartProps.rawFormData.groupby.indexOf(stackdimension);

feat(stack by dimension): add a stack by dimension dropdown list #32707

Are you sure you want to change the base?

feat(stack by dimension): add a stack by dimension dropdown list #32707

Conversation

jpchev commented Mar 17, 2025 • edited Loading

SUMMARY

korbit-ai bot left a comment • edited Loading

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Interacting with Korbit

Customizing Korbit

Feedback and Support

This comment was marked as resolved.

villebro commented Mar 17, 2025

rusackas commented Mar 17, 2025

jpchev commented Mar 17, 2025

michael-s-molina commented Mar 18, 2025

sadpandajoe commented Mar 18, 2025

villebro commented Mar 18, 2025

jpchev commented Mar 18, 2025

jpchev commented Mar 18, 2025

michael-s-molina commented Mar 18, 2025

jpchev commented Mar 18, 2025

michael-s-molina commented Mar 18, 2025 • edited Loading

jpchev commented Mar 20, 2025

b4s36t4 commented Mar 25, 2025

jpchev commented Mar 25, 2025 • edited Loading

michael-s-molina commented Mar 25, 2025

github-actions bot commented Apr 7, 2025

rusackas commented Apr 7, 2025

github-actions bot commented Apr 7, 2025

michael-s-molina commented Apr 7, 2025

rusackas commented Apr 7, 2025

jpchev commented Apr 8, 2025

rusackas commented Apr 10, 2025

michael-s-molina commented Apr 10, 2025

kgabryje commented Apr 10, 2025

kgabryje Apr 10, 2025

Choose a reason for hiding this comment

jpchev Apr 10, 2025

Choose a reason for hiding this comment

kgabryje Apr 10, 2025

Choose a reason for hiding this comment

jpchev Apr 10, 2025

Choose a reason for hiding this comment

jpchev commented Apr 10, 2025 • edited Loading

mistercrunch commented Apr 12, 2025

jpchev commented Apr 16, 2025

github-actions bot commented Apr 16, 2025

github-actions bot commented Apr 16, 2025

rusackas commented Apr 18, 2025

jpchev commented Apr 22, 2025

jpchev commented Mar 17, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading

michael-s-molina commented Mar 18, 2025 •

edited

Loading

jpchev commented Mar 25, 2025 •

edited

Loading

jpchev commented Apr 10, 2025 •

edited

Loading