GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 04:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: custom color mapping for uplot tooltip implemented

Browse Source
This commit is contained in:
sawhil 2025-04-28 16:01:12 +05:30 committed by Sahil Khan
parent b70c570cdc
commit 958924befe
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx
View File

@ -115,16 +115,21 @@ function StatusCodeBarCharts({
const navigateToExplorerPages = useNavigateToExplorerPages(); const navigateToExplorerPages = useNavigateToExplorerPages();
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const { getCustomSeries } = useGetGraphCustomSeries({ const colorMapping = useMemo(
isDarkMode, () => ({
drawStyle: 'bars',
colorMapping: {
'200-299': Color.BG_FOREST_500, '200-299': Color.BG_FOREST_500,
'300-399': Color.BG_AMBER_400, '300-399': Color.BG_AMBER_400,
'400-499': Color.BG_CHERRY_500, '400-499': Color.BG_CHERRY_500,
'500-599': Color.BG_ROBIN_500, '500-599': Color.BG_ROBIN_500,
Other: Color.BG_SIENNA_500, Other: Color.BG_SIENNA_500,
}, }),
[],
);
const { getCustomSeries } = useGetGraphCustomSeries({
isDarkMode,
drawStyle: 'bars',
colorMapping,
}); });
const widget = useMemo<Widgets>( const widget = useMemo<Widgets>(
@ -188,6 +193,7 @@ function StatusCodeBarCharts({
onClickHandler: graphClickHandler, onClickHandler: graphClickHandler,
customSeries: getCustomSeries, customSeries: getCustomSeries,
onDragSelect, onDragSelect,
colorMapping,
}), }),
[ [
minTime, minTime,
@ -200,6 +206,7 @@ function StatusCodeBarCharts({
graphClickHandler, graphClickHandler,
getCustomSeries, getCustomSeries,
onDragSelect, onDragSelect,
colorMapping,
], ],
); );

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

@ -59,6 +59,7 @@ export interface GetUPlotChartOptions {
timezone?: string; timezone?: string;
customSeries?: (data: QueryData[]) => uPlot.Series[]; customSeries?: (data: QueryData[]) => uPlot.Series[];
isLogScale?: boolean; isLogScale?: boolean;
colorMapping?: Record<string, string>;
} }
/** the function converts series A , series B , series C to /** the function converts series A , series B , series C to
@ -166,6 +167,7 @@ export const getUPlotChartOptions = ({
timezone, timezone,
customSeries, customSeries,
isLogScale, isLogScale,
colorMapping,
}: GetUPlotChartOptions): uPlot.Options => { }: GetUPlotChartOptions): uPlot.Options => {
const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale); const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
@ -229,10 +231,11 @@ export const getUPlotChartOptions = ({
tooltipPlugin({ tooltipPlugin({
apiResponse, apiResponse,
yAxisUnit, yAxisUnit,
stackBarChart,
isDarkMode, isDarkMode,
customTooltipElement, stackBarChart,
timezone, timezone,
colorMapping,
customTooltipElement,
}), }),
onClickPlugin({ onClickPlugin({
onClick: onClickHandler, onClick: onClickHandler,

14
frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
View File

@ -48,6 +48,7 @@ const generateTooltipContent = (
isMergedSeries?: boolean, isMergedSeries?: boolean,
stackBarChart?: boolean, stackBarChart?: boolean,
timezone?: string, timezone?: string,
colorMapping?: Record<string, string>,
// eslint-disable-next-line sonarjs/cognitive-complexity // eslint-disable-next-line sonarjs/cognitive-complexity
): HTMLElement => { ): HTMLElement => {
const container = document.createElement('div'); const container = document.createElement('div');
@ -95,10 +96,12 @@ const generateTooltipContent = (
? '' ? ''
: getLabelName(metric, queryName || '', legend || ''); : getLabelName(metric, queryName || '', legend || '');
let color = generateColor( let color =
label, colorMapping?.[label] ||
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor, generateColor(
); label,
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
);
// in case of billing graph pick colors from the series options // in case of billing graph pick colors from the series options
if (isBillingUsageGraphs) { if (isBillingUsageGraphs) {
@ -230,6 +233,7 @@ type ToolTipPluginProps = {
isDarkMode: boolean; isDarkMode: boolean;
customTooltipElement?: HTMLDivElement; customTooltipElement?: HTMLDivElement;
timezone?: string; timezone?: string;
colorMapping?: Record<string, string>;
}; };
const tooltipPlugin = ({ const tooltipPlugin = ({
@ -242,6 +246,7 @@ const tooltipPlugin = ({
isDarkMode, isDarkMode,
customTooltipElement, customTooltipElement,
timezone, timezone,
colorMapping,
}: // eslint-disable-next-line sonarjs/cognitive-complexity }: // eslint-disable-next-line sonarjs/cognitive-complexity
ToolTipPluginProps): any => { ToolTipPluginProps): any => {
let over: HTMLElement; let over: HTMLElement;
@ -309,6 +314,7 @@ ToolTipPluginProps): any => {
isMergedSeries, isMergedSeries,
stackBarChart, stackBarChart,
timezone, timezone,
colorMapping,
); );
if (customTooltipElement) { if (customTooltipElement) {
content.appendChild(customTooltipElement); content.appendChild(customTooltipElement);