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

feat: all line series with same labels should have same color in a dashboard (#4478)

Browse Source
This commit is contained in:
Yunus M 2024-02-01 18:06:32 +05:30 committed by GitHub
parent 64307f323f
commit 0f44246795
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/getChartData.ts
View File

@ -88,9 +88,11 @@ const getChartData = ({
const allLabels = modifiedData.map((e) => e.label);
const updatedDataSet = updatedSortedData.map((e, index) => {
const label = allLabels[index];
const datasetBaseConfig = {
index,
label: allLabels[index],
label,
borderColor: colors[index % colors.length] || 'red',
data: e.second,
borderWidth: 1.5,

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

@ -1,11 +1,12 @@
import { getToolTipValue } from 'components/Graph/yAxisConfig';
import { themeColors } from 'constants/theme';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import getLabelName from 'lib/getLabelName';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import { colors } from '../../getRandomColor';
import { placement } from '../placement';
import { generateColor } from '../utils/generateColor';
dayjs.extend(customParseFormat);
@ -54,12 +55,14 @@ const generateTooltipContent = (
const value = data[index][idx];
const label = getLabelName(metric, queryName || '', legend || '');
const color = generateColor(label, themeColors.chartcolors);
if (Number.isFinite(value)) {
const tooltipValue = getToolTipValue(value, yAxisUnit);
const dataObj = {
show: item.show || false,
color: colors[(index - 1) % colors.length],
color,
label,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

20
frontend/src/lib/uPlotLib/utils/generateColor.ts Normal file
View File

@ -0,0 +1,20 @@
/* eslint-disable no-bitwise */
export function hashFn(str: string): number {
let hash = 5381;
for (let i = 0; i < str.length; i++) {
hash = (hash * 33) ^ str.charCodeAt(i);
}
return hash >>> 0;
}
export function generateColor(
key: string,
colorMap: Record<string, string>,
): string {
const hashValue = hashFn(key);
const keys = Object.keys(colorMap);
const colorIndex = hashValue % keys.length;
const selectedKey = keys[colorIndex];
return colorMap[selectedKey];
}

7
frontend/src/lib/uPlotLib/utils/getSeriesData.ts
View File

@ -1,8 +1,9 @@
import { themeColors } from 'constants/theme';
import getLabelName from 'lib/getLabelName';
import { colors } from 'lib/getRandomColor';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import { QueryData } from 'types/api/widgets/getQuery';
import { generateColor } from './generateColor';
import getRenderer, { drawStyles, lineInterpolations } from './getRenderer';
const paths = (
@ -36,8 +37,6 @@ const getSeries = (
const newGraphVisibilityStates = graphsVisibilityStates?.slice(1);
for (let i = 0; i < seriesList?.length; i += 1) {
const color = colors[i % colors.length]; // Use modulo to loop through colors if there are more series than colors
const { metric = {}, queryName = '', legend = '' } = widgetMetaData[i] || {};
const label = getLabelName(
@ -46,6 +45,8 @@ const getSeries = (
legend || '',
);
const color = generateColor(label, themeColors.chartcolors);
const pointSize = seriesList[i].values.length > 1 ? 5 : 10;
const showPoints = !(seriesList[i].values.length > 1);