Revert "feat: change Bar color opacity and make stacking as default (#9026)"

This reverts commit 9d999feabb2d4ea9dc73e4cb22322611a1228e3b.

frontend/src/container/ApiMonitoring/utils.tsx

@@ -3168,6 +3168,7 @@ export const getStatusCodeBarChartWidgetData = (
 	},
 	description: '',
 	id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2',
+	isStacked: false,
 	panelTypes: PANEL_TYPES.BAR,
 	title: '',
 	opacity: '',

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -39,6 +39,7 @@ const mockProps: WidgetGraphComponentProps = {
 		description: '',
 		fillSpans: false,
 		id: '17f905f6-d355-46bd-a78e-cbc87e6f58cc',
+		isStacked: false,
 		mergeAllActiveQueries: false,
 		nullZeroValues: 'zero',
 		opacity: '1',

frontend/src/container/MeterExplorer/Breakdown/graphs.ts

@@ -38,6 +38,7 @@ export const getWidgetQueryBuilder = ({
 }: GetWidgetQueryPropsReturn): Widgets => ({
 	description: description || '',
 	id: id || uuid(),
+	isStacked: false,
 	nullZeroValues: nullZeroValues || '',
 	opacity: '1',
 	panelTypes,

frontend/src/container/MetricsApplication/MetricsApplication.factory.ts

@@ -14,6 +14,7 @@ export const getWidgetQueryBuilder = ({
 }: GetWidgetQueryBuilderProps): Widgets => ({
 	description: '',
 	id: id || v4(),
+	isStacked: false,
 	nullZeroValues: '',
 	opacity: '0',
 	panelTypes,

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -535,6 +535,8 @@ interface RightContainerProps {
 	setTitle: Dispatch<SetStateAction<string>>;
 	description: string;
 	setDescription: Dispatch<SetStateAction<string>>;
+	stacked: boolean;
+	setStacked: Dispatch<SetStateAction<boolean>>;
 	opacity: string;
 	setOpacity: Dispatch<SetStateAction<string>>;
 	selectedNullZeroValue: string;

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -6,48 +6,7 @@
 // - Handling multiple rows correctly
 // - Handling widgets with different heights
 
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { placeWidgetAtBottom, placeWidgetBetweenRows } from '../utils';
-import { DashboardProvider } from 'providers/Dashboard/Dashboard';
-import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import { I18nextProvider } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom-v5-compat';
-import i18n from 'ReactI18';
-import { render } from 'tests/test-utils';
-
-import NewWidget from '..';
-import {
-	getDefaultWidgetData,
-	placeWidgetAtBottom,
-	placeWidgetBetweenRows,
-} from '../utils';
-
-const MOCK_SEARCH_PARAMS =
-	'?graphType=bar&widgetId=b473eef0-8eb5-4dd3-8089-c1817734084f&compositeQuery=%7B"id"%3A"f026c678-9abf-42af-a3dc-f73dc8cbb810"%2C"builder"%3A%7B"queryData"%3A%5B%7B"dataSource"%3A"metrics"%2C"queryName"%3A"A"%2C"aggregateOperator"%3A"count"%2C"aggregateAttribute"%3A%7B"id"%3A"----"%2C"dataType"%3A""%2C"key"%3A""%2C"type"%3A""%7D%2C"timeAggregation"%3A"rate"%2C"spaceAggregation"%3A"sum"%2C"filter"%3A%7B"expression"%3A""%7D%2C"aggregations"%3A%5B%7B"metricName"%3A""%2C"temporality"%3A""%2C"timeAggregation"%3A"count"%2C"spaceAggregation"%3A"sum"%2C"reduceTo"%3A"avg"%7D%5D%2C"functions"%3A%5B%5D%2C"filters"%3A%7B"items"%3A%5B%5D%2C"op"%3A"AND"%7D%2C"expression"%3A"A"%2C"disabled"%3Afalse%2C"stepInterval"%3Anull%2C"having"%3A%5B%5D%2C"limit"%3Anull%2C"orderBy"%3A%5B%5D%2C"groupBy"%3A%5B%5D%2C"legend"%3A""%2C"reduceTo"%3A"avg"%2C"source"%3A""%7D%5D%2C"queryFormulas"%3A%5B%5D%2C"queryTraceOperator"%3A%5B%5D%7D%2C"clickhouse_sql"%3A%5B%7B"name"%3A"A"%2C"legend"%3A""%2C"disabled"%3Afalse%2C"query"%3A""%7D%5D%2C"promql"%3A%5B%7B"name"%3A"A"%2C"query"%3A""%2C"legend"%3A""%2C"disabled"%3Afalse%7D%5D%2C"queryType"%3A"builder"%7D&relativeTime=30m';
-// Mocks
-jest.mock('uplot', () => ({
-	paths: { spline: jest.fn(), bars: jest.fn() },
-	default: jest.fn(() => ({ paths: { spline: jest.fn(), bars: jest.fn() } })),
-}));
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string; search: string } => ({
-		pathname: '',
-		search: MOCK_SEARCH_PARAMS,
-	}),
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: jest.fn(),
-	}),
-}));
-
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useSearchParams: jest.fn(),
-	useNavigationType: jest.fn(() => 'PUSH'),
-}));
 
 describe('placeWidgetAtBottom', () => {
 	it('should place widget at (0,0) when layout is empty', () => {
@@ -257,55 +216,3 @@ describe('placeWidgetBetweenRows', () => {
 		]);
 	});
 });
-
-describe('getDefaultWidgetData', () => {
-	it('should set stackedBarChart to true by default for new panel creation', () => {
-		const widgetId = 'test-widget-123';
-		const panelType = PANEL_TYPES.BAR;
-
-		const result = getDefaultWidgetData(widgetId, panelType);
-
-		expect(result.stackedBarChart).toBe(true);
-		expect(result.id).toBe(widgetId);
-		expect(result.panelTypes).toBe(panelType);
-	});
-});
-
-describe('Stacking bar in new panel', () => {
-	it('New panel should have stack bar - true by default', () => {
-		// Mock useSearchParams to return the expected values
-		(useSearchParams as jest.Mock).mockReturnValue([
-			new URLSearchParams(MOCK_SEARCH_PARAMS),
-			jest.fn(),
-		]);
-
-		const { container, getByText, getByRole } = render(
-			<I18nextProvider i18n={i18n}>
-				<DashboardProvider>
-					<PreferenceContextProvider>
-						<NewWidget
-							selectedGraph={PANEL_TYPES.BAR}
-							fillSpans={undefined}
-							yAxisUnit={undefined}
-						/>
-					</PreferenceContextProvider>
-				</DashboardProvider>
-			</I18nextProvider>,
-		);
-
-		// Verify label is present
-		expect(getByText('Stack series')).toBeInTheDocument();
-
-		// Verify section exists
-		const section = container.querySelector('section > .stack-chart');
-		expect(section).toBeInTheDocument();
-
-		// Verify switch is present and enabled (ant-switch-checked)
-		const switchBtn = section?.querySelector('.ant-switch');
-		expect(switchBtn).toBeInTheDocument();
-		expect(switchBtn).toHaveClass('ant-switch-checked');
-
-		// (Optional) More semantic: verify by role
-		expect(getByRole('switch')).toBeChecked();
-	});
-});

frontend/src/container/NewWidget/index.tsx

@@ -178,6 +178,10 @@ function NewWidget({
 		selectedWidget?.yAxisUnit || 'none',
 	);
 
+	const [stacked, setStacked] = useState<boolean>(
+		selectedWidget?.isStacked || false,
+	);
+
 	const [stackedBarChart, setStackedBarChart] = useState<boolean>(
 		selectedWidget?.stackedBarChart || false,
 	);
@@ -254,6 +258,7 @@ function NewWidget({
 				query: currentQuery,
 				title,
 				description,
+				isStacked: stacked,
 				opacity,
 				nullZeroValues: selectedNullZeroValue,
 				yAxisUnit,
@@ -287,6 +292,7 @@ function NewWidget({
 		selectedTracesFields,
 		softMax,
 		softMin,
+		stacked,
 		thresholds,
 		title,
 		yAxisUnit,
@@ -488,6 +494,7 @@ function NewWidget({
 								...(selectedWidget || ({} as Widgets)),
 								description: selectedWidget?.description || '',
 								timePreferance: selectedTime.enum,
+								isStacked: selectedWidget?.isStacked || false,
 								opacity: selectedWidget?.opacity || '1',
 								nullZeroValues: selectedWidget?.nullZeroValues || 'zero',
 								title: selectedWidget?.title,
@@ -517,6 +524,7 @@ function NewWidget({
 								...(selectedWidget || ({} as Widgets)),
 								description: selectedWidget?.description || '',
 								timePreferance: selectedTime.enum,
+								isStacked: selectedWidget?.isStacked || false,
 								opacity: selectedWidget?.opacity || '1',
 								nullZeroValues: selectedWidget?.nullZeroValues || 'zero',
 								title: selectedWidget?.title,
@@ -810,6 +818,8 @@ function NewWidget({
 							setTitle={setTitle}
 							description={description}
 							setDescription={setDescription}
+							stacked={stacked}
+							setStacked={setStacked}
 							stackedBarChart={stackedBarChart}
 							setStackedBarChart={setStackedBarChart}
 							opacity={opacity}

frontend/src/container/NewWidget/utils.ts

@@ -543,6 +543,7 @@ export const getDefaultWidgetData = (
 	id,
 	title: '',
 	description: '',
+	isStacked: false,
 	nullZeroValues: '',
 	opacity: '',
 	panelTypes: name,
@@ -553,7 +554,6 @@ export const getDefaultWidgetData = (
 	timePreferance: 'GLOBAL_TIME',
 	softMax: null,
 	softMin: null,
-	stackedBarChart: true,
 	selectedLogFields: defaultLogsSelectedColumns.map((field) => ({
 		...field,
 		type: field.fieldContext ?? '',

frontend/src/container/PanelWrapper/__tests__/tablePanelWrapperHelper.ts

@@ -2,6 +2,7 @@ export const tablePanelWidgetQuery = {
 	id: '727533b0-7718-4f99-a1db-a1875649325c',
 	title: '',
 	description: '',
+	isStacked: false,
 	nullZeroValues: 'zero',
 	opacity: '1',
 	panelTypes: 'table',

frontend/src/container/PanelWrapper/__tests__/valuePanelWrapperHelper.ts

@@ -2,6 +2,7 @@ export const valuePanelWidget = {
 	id: 'b8b93086-ef01-47bf-9044-1e7abd583be4',
 	title: 'signoz latency in ms',
 	description: '',
+	isStacked: false,
 	nullZeroValues: 'zero',
 	opacity: '1',
 	panelTypes: 'value',

frontend/src/container/QueryTable/__test__/mocks.ts

@@ -236,6 +236,7 @@ export const WidgetHeaderProps: any = {
 		description: '',
 		fillSpans: false,
 		id: 'add65f0d-7662-4024-af51-da567759235d',
+		isStacked: false,
 		mergeAllActiveQueries: false,
 		nullZeroValues: 'zero',
 		opacity: '1',

frontend/src/hooks/dashboard/utils.ts

@@ -52,6 +52,7 @@ export const addEmptyWidgetInDashboardJSONWithQuery = (
 					id: widgetId,
 					query,
 					description: '',
+					isStacked: false,
 					nullZeroValues: '',
 					opacity: '',
 					title: '',

frontend/src/lib/uPlotLib/utils/getSeriesData.ts

@@ -86,7 +86,7 @@ const getSeries = ({
 				? hiddenGraph[i]
 				: true,
 			label,
-			fill: panelType && panelType === PANEL_TYPES.BAR ? `${color}` : undefined,
+			fill: panelType && panelType === PANEL_TYPES.BAR ? `${color}40` : undefined,
 			stroke: color,
 			width: 2,
 			spanGaps: true,

frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts

@@ -14,7 +14,7 @@ describe('Get Series Data', () => {
 		expect(seriesData.length).toBe(5);
 		expect(seriesData[1].label).toBe('firstLegend');
 		expect(seriesData[1].show).toBe(true);
-		expect(seriesData[1].fill).toBe('#C71585');
+		expect(seriesData[1].fill).toBe('#C7158540');
 		expect(seriesData[1].width).toBe(2);
 	});
 

frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts

@@ -39,6 +39,7 @@ export const getWidgetQueryBuilder = ({
 }: GetWidgetQueryPropsReturn): Widgets => ({
 	description: description || '',
 	id: id || uuid(),
+	isStacked: false,
 	nullZeroValues: nullZeroValues || '',
 	opacity: '1',
 	panelTypes,

frontend/src/types/api/dashboard/getAll.ts

@@ -104,6 +104,7 @@ export interface ColumnUnit {
 	[key: string]: string;
 }
 export interface IBaseWidget {
+	isStacked: boolean;
 	id: string;
 	panelTypes: PANEL_TYPES;
 	title: ReactNode;