[ENHANCEMENT] Support responsive Stat Chart tile orientations by TridipDam · Pull Request #812 · perses/plugins

TridipDam · 2026-09-11T18:12:19Z

Description

This PR updates the Stat Chart plugin to support responsive stat tile orientations.
The layout dynamically adapts to the available panel width, allowing stat values to wrap into multiple rows instead of requiring a single horizontal row when many series are displayed.

This addresses the responsive layout requirement described in the main Perses issue:
perses/perses#4382

Screenshots

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.

shahrokni · 2026-09-14T13:25:49Z

+            disableClearable
+            value={
+              STAT_CHART_ORIENTATION_LABELS.find((i) => i.id === value.orientation) ??
+              STAT_CHART_ORIENTATION_LABELS.find((i) => i.id === 'auto')!


Is ! necessary?
It should somehow recognize that the auto key is defnaitly available no?
Anyway when I removed it, the line was not highlighted by IDE. Are you sure this is necessary?

I agree with the review point. Since STAT_CHART_ORIENTATION_LABELS is a fixed constant containing all valid orientation values, the ! and fallback to auto are unnecessary here. I'll simplify this to use the direct find() result.

shahrokni · 2026-09-14T13:53:45Z

+
+  const statTileHeight = useMemo(() => {
+    if (isVerticalLayout) {
+      return Math.max(60, Math.floor(panelHeight / Math.max(1, statChartData.length)));


Could you explain number 60 here? Anyway, looks like a random number. May I ask you to put in a descriptive const

shahrokni · 2026-09-14T14:02:31Z

-    chartWidth = Math.max(chartWidth, maxTextWidth);
-  }
+    if (isAutoWrapped) {
+      return Math.min(AUTO_TILE_HEIGHT, Math.max(60, Math.floor(panelHeight / autoRowCount)));


https://github.com/perses/plugins/pull/812/changes#r4005890778

shahrokni · 2026-09-14T14:06:06Z

-              alignmentText={alignmentText}
+              alignmentText={isAutoWrapped || !isVerticalLayout ? undefined : alignmentText}
              alignmentSeriesName={alignmentSeriesName}
+              maxValueFontSize={!isAutoWrapped && !isVerticalLayout ? 96 : undefined}


96 is a random number. May I ask you to use a descriptive const instead?

shahrokni · 2026-09-14T14:07:41Z

@TridipDam Could you rebase with main branch please

shahrokni · 2026-09-14T14:10:28Z

@TridipDam Linter is failing, please take a look

TridipDam · 2026-09-14T14:18:27Z

@shahrokni Could you give me some time to work through the issues you mentioned? I'm fixing them all and will push the changes once they're done.

shahrokni · 2026-09-14T14:30:12Z

@shahrokni Could you give me some time to work through the issues you mentioned? I'm fixing them all and will push the changes once they're done.

Sure! Take your time
Anyway I need to do a final test, to make sure everything is in order.

shahrokni · 2026-09-14T14:47:16Z

@TridipDam
Test result:
Although the auto view works fine, the horizontal and vertical orentation both return the same results, which is similar to the horizontal result. The following picture depicts the result of the auto on the top left corner. The remaining charts are horizontal, horizontal without sparkline (which is OK), and the vertical one. As it could be observed, the vertical and horizontal output are identical.

What are our expectations from vertical and horizontal orientation?
Checking your code, I could not see a special case handling for the two cases. Am I missing something?
Btw, the auto orientation is very nice :) Thank you!

TridipDam · 2026-09-15T15:08:15Z

@TridipDam Test result: Although the auto view works fine, the horizontal and vertical orentation both return the same results, which is similar to the horizontal result. The following picture depicts the result of the auto on the top left corner. The remaining charts are horizontal, horizontal without sparkline (which is OK), and the vertical one. As it could be observed, the vertical and horizontal output are identical.

What are our expectations from vertical and horizontal orientation? Checking your code, I could not see a special case handling for the two cases. Am I missing something? Btw, the auto orientation is very nice :) Thank you!

My understanding is that orientation should affect only the layout, not the values or series order. Horizontal arranges series horizontally(uses default row layout), Vertical arranges them column wise. Please let me know if the expected behavior differs.

shahrokni · 2026-09-16T14:00:23Z

@TridipDam Test result: Although the auto view works fine, the horizontal and vertical orentation both return the same results, which is similar to the horizontal result. The following picture depicts the result of the auto on the top left corner. The remaining charts are horizontal, horizontal without sparkline (which is OK), and the vertical one. As it could be observed, the vertical and horizontal output are identical.
What are our expectations from vertical and horizontal orientation? Checking your code, I could not see a special case handling for the two cases. Am I missing something? Btw, the auto orientation is very nice :) Thank you!

My understanding is that orientation should affect only the layout, not the values or series order. Horizontal arranges series horizontally(uses default row layout), Vertical arranges them column wise. Please let me know if the expected behavior differs.

True. But whether I set it to vertical or horizontal, the arrangement is the same. Could you please share the two outputs? (screenshots)

TridipDam · 2026-09-16T17:16:28Z

@TridipDam Test result: Although the auto view works fine, the horizontal and vertical orentation both return the same results, which is similar to the horizontal result. The following picture depicts the result of the auto on the top left corner. The remaining charts are horizontal, horizontal without sparkline (which is OK), and the vertical one. As it could be observed, the vertical and horizontal output are identical.
What are our expectations from vertical and horizontal orientation? Checking your code, I could not see a special case handling for the two cases. Am I missing something? Btw, the auto orientation is very nice :) Thank you!

My understanding is that orientation should affect only the layout, not the values or series order. Horizontal arranges series horizontally(uses default row layout), Vertical arranges them column wise. Please let me know if the expected behavior differs.

True. But when whether I set it to vertical or horizontal, the arrangement is the same. Could you please share the two outputs? (screenshots)

yeah sure

shahrokni · 2026-09-17T08:03:13Z

@TridipDam Test result: Although the auto view works fine, the horizontal and vertical orentation both return the same results, which is similar to the horizontal result. The following picture depicts the result of the auto on the top left corner. The remaining charts are horizontal, horizontal without sparkline (which is OK), and the vertical one. As it could be observed, the vertical and horizontal output are identical.
What are our expectations from vertical and horizontal orientation? Checking your code, I could not see a special case handling for the two cases. Am I missing something? Btw, the auto orientation is very nice :) Thank you!

My understanding is that orientation should affect only the layout, not the values or series order. Horizontal arranges series horizontally(uses default row layout), Vertical arranges them column wise. Please let me know if the expected behavior differs.

True. But when whether I set it to vertical or horizontal, the arrangement is the same. Could you please share the two outputs? (screenshots)

yeah sure

Interesting!, I could not set it to vertical. I will test again.
Have you already resolved other comments?

TridipDam · 2026-09-17T11:09:59Z

@TridipDam Test result: Although the auto view works fine, the horizontal and vertical orentation both return the same results, which is similar to the horizontal result. The following picture depicts the result of the auto on the top left corner. The remaining charts are horizontal, horizontal without sparkline (which is OK), and the vertical one. As it could be observed, the vertical and horizontal output are identical.
What are our expectations from vertical and horizontal orientation? Checking your code, I could not see a special case handling for the two cases. Am I missing something? Btw, the auto orientation is very nice :) Thank you!

My understanding is that orientation should affect only the layout, not the values or series order. Horizontal arranges series horizontally(uses default row layout), Vertical arranges them column wise. Please let me know if the expected behavior differs.

True. But when whether I set it to vertical or horizontal, the arrangement is the same. Could you please share the two outputs? (screenshots)

yeah sure

Interesting!, I could not set it to vertical. I will test again. Have you already resolved other comments?

Yeah, I’ll submit the PR today.

Signed-off-by: TridipDam <tridipdam001@gmail.com>

TridipDam · 2026-09-17T13:03:55Z

Done, I've pushed the changes to the PR.

TridipDam requested review from a team and AntoineThebaud as code owners September 11, 2026 18:12

TridipDam requested review from shahrokni and removed request for a team September 11, 2026 18:12

TridipDam mentioned this pull request Sep 11, 2026

StatChart: Orientation - Condensed View Possibility perses/perses#4382

Open

shahrokni reviewed Sep 14, 2026

View reviewed changes

colivi mentioned this pull request Sep 15, 2026

[BUGFIX] StatChart: wrap multi-series stats in multiple columns #814

Open

2 tasks

TridipDam added 2 commits September 17, 2026 18:29

feat(statchart): support responsive stat tile orientations

fc71a15

Signed-off-by: TridipDam <tridipdam001@gmail.com>

[ENHANCEMENT] Support responsive StatChart tile orientations

a787f85

Signed-off-by: TridipDam <tridipdam001@gmail.com>

TridipDam force-pushed the fix/4382-stat-chart-responsive-layout branch from e81e740 to a787f85 Compare September 17, 2026 12:59

Conversation

TridipDam commented Sep 11, 2026

Description

Screenshots

Checklist

UI Changes

Uh oh!

shahrokni Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

TridipDam Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shahrokni Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

shahrokni Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

shahrokni Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

shahrokni commented Sep 14, 2026

Uh oh!

shahrokni commented Sep 14, 2026

Uh oh!

TridipDam commented Sep 14, 2026

Uh oh!

shahrokni commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shahrokni commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TridipDam commented Sep 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shahrokni commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TridipDam commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shahrokni commented Sep 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TridipDam commented Sep 17, 2026

Uh oh!

TridipDam commented Sep 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TridipDam Sep 14, 2026 •

edited

Loading

shahrokni commented Sep 14, 2026 •

edited

Loading

shahrokni commented Sep 14, 2026 •

edited

Loading

TridipDam commented Sep 15, 2026 •

edited

Loading

shahrokni commented Sep 16, 2026 •

edited

Loading

TridipDam commented Sep 16, 2026 •

edited

Loading

shahrokni commented Sep 17, 2026 •

edited

Loading