External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-28 15:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: allignment and fixes

Browse Source
This commit is contained in:
SagarRajput-7 2025-05-26 09:11:00 +05:30
parent 717c7e77a5
commit dd38d35e17
4 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
View File

@ -46,14 +46,16 @@ function WidgetGraph({
// Add legend state management similar to dashboard components
const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
Array(queryResponse.data?.payload?.data?.result?.length || 0).fill(true),
Array((queryResponse.data?.payload?.data?.result?.length || 0) + 1).fill(
true,
),
);
// Initialize graph visibility when data changes
useEffect(() => {
if (queryResponse.data?.payload?.data?.result) {
setGraphVisibility(
Array(queryResponse.data.payload.data.result.length).fill(true),
Array(queryResponse.data.payload.data.result.length + 1).fill(true),
);
}
}, [queryResponse.data?.payload?.data?.result]);

29
frontend/src/container/PanelWrapper/enhancedLegend.ts
View File

@ -148,6 +148,11 @@ export function calculateEnhancedLegendConfig(
};
}
// CSS class constants
const LEGEND_SINGLE_LINE_CLASS = 'u-legend-single-line';
const LEGEND_MULTI_LINE_CLASS = 'u-legend-multi-line';
const LEGEND_RIGHT_ALIGNED_CLASS = 'u-legend-right-aligned';
/**
* Apply enhanced legend styling to a legend element
*/
@ -191,13 +196,25 @@ export function applyEnhancedLegendStyling(
legendElement.style.maxWidth = '';
}
// Apply alignment based on number of rows and position
if (legendPosition === LegendPosition.RIGHT || requiredRows === 1) {
legendElement.classList.add('u-legend-single-line');
legendElement.classList.remove('u-legend-multi-line');
// Apply alignment based on position and number of rows
if (legendPosition === LegendPosition.RIGHT) {
legendElement.classList.add(LEGEND_RIGHT_ALIGNED_CLASS);
legendElement.classList.remove(
LEGEND_SINGLE_LINE_CLASS,
LEGEND_MULTI_LINE_CLASS,
);
} else if (requiredRows === 1) {
legendElement.classList.add(LEGEND_SINGLE_LINE_CLASS);
legendElement.classList.remove(
LEGEND_MULTI_LINE_CLASS,
LEGEND_RIGHT_ALIGNED_CLASS,
);
} else {
legendElement.classList.add('u-legend-multi-line');
legendElement.classList.remove('u-legend-single-line');
legendElement.classList.add(LEGEND_MULTI_LINE_CLASS);
legendElement.classList.remove(
LEGEND_SINGLE_LINE_CLASS,
LEGEND_RIGHT_ALIGNED_CLASS,
);
}
// Add scrollbar indicator if needed

1
frontend/src/lib/uPlotLib/getUplotChartOptions.ts
View File

@ -629,6 +629,7 @@ export const getUPlotChartOptions = ({
stackBarChart,
hiddenGraph,
isDarkMode,
colorMapping,
}),
axes: getAxes({ isDarkMode, yAxisUnit, panelType, isLogScale }),
};

20
frontend/src/styles.scss
View File

@ -96,6 +96,26 @@ body {
justify-content: center;
}
&.u-legend-right-aligned {
tbody {
align-items: flex-start !important;
justify-content: flex-start !important;
}
tr.u-series {
justify-content: flex-start !important;
th {
justify-content: flex-start !important;
text-align: left !important;
.legend-text {
text-align: left !important;
}
}
}
}
// Right-side legend specific styles
&.u-legend-right {
tbody {