[Explore Vis]Feat/add bar gauge #10697

Qxisylolo · 2025-10-09T08:32:58Z

Description

this pr adds bar gauge

Screenshot

2025-10-14.15.59.38.mov

2025-10-14.17.19.17.mov

Testing the changes

Changelog

feat: add bar gauge

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

codecov · 2025-10-09T08:52:28Z

Codecov Report

❌ Patch coverage is 80.61224% with 38 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.52%. Comparing base (f50abc7) to head (fea707f).

Files with missing lines	Patch %	Lines
...mponents/visualizations/bar_gauge/to_expression.ts	75.28%	7 Missing and 15 partials ⚠️
...onents/visualizations/bar_gauge/bar_gauge_utils.ts	89.65%	0 Missing and 6 partials ⚠️
...visualizations/bar_gauge/bar_gauge_vis_options.tsx	73.68%	5 Missing ⚠️
...ions/bar_gauge/bar_gauge_exclusive_vis_options.tsx	90.47%	0 Missing and 2 partials ⚠️
...ublic/components/visualizations/rule_repository.ts	0.00%	1 Missing ⚠️
...nts/visualizations/style_panel/unit/unit_panel.tsx	0.00%	1 Missing ⚠️
.../components/visualizations/theme/default_colors.ts	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10697      +/-   ##
==========================================
+ Coverage   60.49%   60.52%   +0.03%     
==========================================
  Files        4506     4511       +5     
  Lines      121106   121296     +190     
  Branches    20174    20234      +60     
==========================================
+ Hits        73262    73420     +158     
- Misses      42722    42732      +10     
- Partials     5122     5144      +22

Flag	Coverage Δ
Linux_1	`26.56% <ø> (ø)`
Linux_2	`38.82% <ø> (ø)`
Linux_3	`39.08% <ø> (+<0.01%)`	⬆️
Linux_4	`33.62% <80.61%> (+0.10%)`	⬆️
Windows_1	`26.57% <ø> (ø)`
Windows_2	`38.79% <ø> (ø)`
Windows_3	`39.08% <ø> (+<0.01%)`	⬆️
Windows_4	`33.62% <80.61%> (+0.10%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ruanyl · 2025-10-15T05:47:45Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.ts

+    availableMappings: [
+      {
+        [AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
+        [AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },


Can we support numerical field as x axis?

yes, updated:
Here is a case where x axis is numerical

2025-10-16.12.53.35.mov

ruanyl · 2025-10-15T08:40:17Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+export const getUnfilledArea = () => {
+  if (darkMode) return '#27252C';
+  return '#f1f1f1ff';
+};


Can we move this to default_colors.ts? we can have a shade color code based on dark/light, also we can use this shade at where DEFAULT_GREY is used

this function isn't suitable for DEFAULT_GREY as it returns as almost black in dark mode. I will introduce a new function getGrey to return the appropriate grey depending on light or dark mode.

Hailong-am · 2025-10-22T09:38:23Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+  };
+  const nullStyle = { axis: null };
+
+  const shouldSwapAxes = (isXNumerical && isHorizontal) || (!isXNumerical && isHorizontal);


could this simplified as const shouldSwapAxes = isHorizontal;?

yes！thanks for pointing out.

Hailong-am · 2025-10-22T09:47:17Z

...ugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.tsx

+            defaultMessage: 'Horizontal',
+          }),
+        },
+  ];


maybe we can make it clear to read like this

const getOrientationOptions = (isXaxisNumerical: boolean) => { const isVerticalLabel = isXaxisNumerical ? 'Horizontal' : 'Vertical'; const isHorizontalLabel = isXaxisNumerical ? 'Vertical' : 'Horizontal'; return [ { id: 'vertical', label: isVerticalLabel }, { id: 'horizontal', label: isHorizontalLabel } ]; };

updated！ thanks～

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

Hailong-am · 2025-10-22T10:01:24Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+
+export const NormalizeData = (data: number, start: number, end: number) => {
+  // normalize data value between start and end into 0–1 range
+  return (data - start) / (end - start);


nit: we may need add a check for case end == start

yes, updated, thanks!

Hailong-am · 2025-10-22T10:05:04Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+  const result: any[] = [];
+
+  for (let i = 0; i < thresholds.length; i++) {
+    const start = thresholds[0].value;


is thresholds a sorted array?

yes.we will sort threshold in threshold panel

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.ts

.../explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.test.tsx

Hailong-am · 2025-10-22T10:14:23Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+    hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+  }
+
+  let r = parseInt(hex.slice(1, 3), 16);


nit: would better have a check for hex to make sure it's vaild

Hailong-am · 2025-10-22T10:15:19Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+  return result;
+};
+
+export const NormalizeData = (data: number, start: number, end: number) => {


nit: normalizeData

ruanyl · 2025-10-17T10:00:55Z

...ugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.tsx

+      ? {
+          id: 'horizontal',
+          label: i18n.translate(
+            'explore.vis.barGauge.orientation.threshold.horizontal.isXaxisNumerical',


isXaxisNumerical this key seems incorrect

ruanyl · 2025-10-17T10:01:38Z

...ugins/explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.tsx

+    isXaxisNumerical
+      ? {
+          id: 'vertical',
+          label: i18n.translate('explore.vis.barGauge.orientation.vertical.isXaxisNumerical', {


isXaxisNumerical this key seems incorrect, should be orientation.vertical?

ruanyl · 2025-10-17T10:05:16Z

src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts

+            { offset: 0, color: thresholds[0].color },
+            {
+              offset: 1,
+              color: darkenColor(thresholds[0]?.color, 2),


I think we don't need to darken the color, just use thresholds[0].color in this case

Signed-off-by: Qxisylolo <[email protected]>

github-actions bot added the distinguished-contributor label Oct 9, 2025

opensearch-changeset-bot bot added a commit to Qxisylolo/OpenSearch-Dashboards that referenced this pull request Oct 9, 2025

Changeset file for PR opensearch-project#10697 created/updated

80f9122

Qxisylolo marked this pull request as ready for review October 9, 2025 09:04

ruanyl reviewed Oct 15, 2025

View reviewed changes

Qxisylolo force-pushed the feat/add_bar_gauge branch from 390a291 to 61f45c2 Compare October 19, 2025 09:51

Hailong-am reviewed Oct 22, 2025

View reviewed changes

.../explore/public/components/visualizations/bar_gauge/bar_gauge_exclusive_vis_options.test.tsx Outdated Show resolved Hide resolved

Hailong-am reviewed Oct 22, 2025

View reviewed changes

Qxisylolo force-pushed the feat/add_bar_gauge branch from f41d42b to 6aa3315 Compare October 23, 2025 10:15

Hailong-am previously approved these changes Oct 24, 2025

View reviewed changes

ruanyl previously approved these changes Oct 24, 2025

View reviewed changes

Qxisylolo dismissed stale reviews from ruanyl and Hailong-am via 6fe849c October 24, 2025 09:37

Qxisylolo force-pushed the feat/add_bar_gauge branch from 32d2f1e to 6fe849c Compare October 24, 2025 09:37

Qxisylolo and others added 18 commits October 24, 2025 17:48

finish

3817c91

Signed-off-by: Qxisylolo <[email protected]>

add tests

e3ece3d

Signed-off-by: Qxisylolo <[email protected]>

Changeset file for PR opensearch-project#10697 created/updated

d345485

a little update

75d0904

Signed-off-by: Qxisylolo <[email protected]>

temp

b96d2ae

Signed-off-by: Qxisylolo <[email protected]>

update

aa04072

Signed-off-by: Qxisylolo <[email protected]>

increase font size

e2b914b

Signed-off-by: Qxisylolo <[email protected]>

fix baseline

3987170

Signed-off-by: Qxisylolo <[email protected]>

update

1a21f42

Signed-off-by: Qxisylolo <[email protected]>

support y numerical

7258536

Signed-off-by: Qxisylolo <[email protected]>

new gradient

b25d124

Signed-off-by: Qxisylolo <[email protected]>

fixtests

43f18e3

Signed-off-by: Qxisylolo <[email protected]>

remain fix

5953d8a

Signed-off-by: Qxisylolo <[email protected]>

fix stack bar

b97aa18

Signed-off-by: Qxisylolo <[email protected]>

set background shade

3d63f35

Signed-off-by: Qxisylolo <[email protected]>

fix scale

5c4ea13

Signed-off-by: Qxisylolo <[email protected]>

comments

41e7dbb

Signed-off-by: Qxisylolo <[email protected]>

optimization

fea707f

Signed-off-by: Qxisylolo <[email protected]>

Qxisylolo force-pushed the feat/add_bar_gauge branch from 0433818 to fea707f Compare October 24, 2025 09:52

[Explore Vis]Feat/add bar gauge #10697

Are you sure you want to change the base?

[Explore Vis]Feat/add bar gauge #10697

Conversation

Qxisylolo commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshot

Testing the changes

Changelog

Check List

Uh oh!

codecov bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Qxisylolo Oct 16, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Qxisylolo commented Oct 9, 2025 •

edited

Loading

codecov bot commented Oct 9, 2025 •

edited

Loading

Qxisylolo Oct 16, 2025 •

edited

Loading