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

fix: fix colors of graphs for lightMode and darkMode (#5192)

Browse Source 
* fix: fix colors of graphs for lightMode and darkMode

* fix: fix colors of graphs for lightMode and darkMode
This commit is contained in:
SagarRajput-7 2024-06-13 09:57:29 +05:30 committed by GitHub
parent dc294ff6d5
commit a681f6f397
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 104 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/constants/theme.ts
View File

@ -78,6 +78,82 @@ const themeColors = {
mediumVioletRed: '#C71585',
paleGreen: '#98FB98',
},
lightModeColor: {
robin: '#3F5ECC',
dodgerBlueDark: '#0C6EED',
steelgrey: '#2f4b7c',
steelpurple: '#665191',
steelindigo: '#a05195',
steelpink: '#d45087',
steelcoral: '#f95d6a',
steelorange: '#ff7c43',
steelgold: '#ffa600',
steelrust: '#de425b',
steelgreen: '#41967e',
mediumOrchidDark: '#C326FD',
seaBuckthornDark: '#E66E05',
seaGreen: '#219653',
turquoiseBlueDark: '#0099CC',
silverDark: '#757575',
outrageousOrangeDark: '#F9521A',
roseBudDark: '#EB6437',
deepSkyBlueDark: '#0595BD',
royalBlue: '#3366E6',
avocadoDark: '#8E8E29',
mintGreenDark: '#00C700',
chestnut: '#B34D4D',
limaDark: '#6E9900',
olive: '#809900',
beautyBushDark: '#E25555',
danube: '#6680B3',
oliveDrab: '#66991A',
lavenderRoseDark: '#F024BD',
electricLimeDark: '#84A800',
radicalRed: '#FF1A66',
harleyOrange: '#E6331A',
gladeGreen: '#66994D',
hemlock: '#66664D',
vidaLoca: '#4D8000',
rust: '#B33300',
red: '#FF0000', // Adding more colors, we need to get better colors from design team
blue: '#0000FF',
green: '#00FF00',
purple: '#800080',
magentaDark: '#EB00EB',
pinkDark: '#FF3D5E',
brown: '#A52A2A',
teal: '#008080',
limeDark: '#07A207',
maroon: '#800000',
navy: '#000080',
gray: '#808080',
skyBlueDark: '#0CA7E4',
indigo: '#4B0082',
slateGray: '#708090',
chocolate: '#D2691E',
tomato: '#FF6347',
steelBlue: '#4682B4',
peruDark: '#D16E0A',
darkOliveGreen: '#556B2F',
indianRed: '#CD5C5C',
mediumSlateBlue: '#7B68EE',
rosyBrownDark: '#CB4848',
darkSlateGray: '#2F4F4F',
fuchsia: '#FF0AFF',
salmonDark: '#FF432E',
darkSalmonDark: '#D26541',
paleVioletRedDark: '#E83089',
mediumPurple: '#9370DB',
darkOrchid: '#9932CC',
mediumSeaGreenDark: '#109E50',
lightCoralDark: '#F85959',
darkSeaGreenDark: '#509F50',
sandyBrownDark: '#D97117',
darkKhakiDark: '#99900A',
cornflowerBlueDark: '#3371E6',
mediumVioletRed: '#C71585',
paleGreenDark: '#0D910D',
},
errorColor: '#d32f2f',
royalGrey: '#888888',
matterhornGrey: '#555555',

1
frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
View File

@ -166,6 +166,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
),
yAxisUnit: '',
isBillingUsageGraphs: true,
isDarkMode,
}),
],
}),

2
frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
View File

@ -60,7 +60,7 @@ function PiePanelWrapper({
d.series?.length === 1
? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
themeColors.chartcolors,
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
),
})),
)

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

@ -197,7 +197,7 @@ export const getUPlotChartOptions = ({
},
},
plugins: [
tooltipPlugin({ apiResponse, yAxisUnit, stackBarChart }),
tooltipPlugin({ apiResponse, yAxisUnit, stackBarChart, isDarkMode }),
onClickPlugin({
onClick: onClickHandler,
}),
@ -332,6 +332,7 @@ export const getUPlotChartOptions = ({
currentQuery,
stackBarChart,
hiddenGraph,
isDarkMode,
}),
axes: getAxes(isDarkMode, yAxisUnit),
};

9
frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts
View File

@ -35,6 +35,7 @@ type GetHistogramSeriesProps = {
widgetMetaData?: QueryData[];
graphsVisibilityStates?: boolean[];
isMergedSeries?: boolean;
isDarkMode: boolean;
};
const { bars } = uPlot.paths;
@ -56,6 +57,7 @@ const getHistogramSeries = ({
widgetMetaData,
graphsVisibilityStates,
isMergedSeries,
isDarkMode,
}: GetHistogramSeriesProps): uPlot.Options['series'] => {
const configurations: uPlot.Series[] = [
{ label: 'Timestamp', stroke: 'purple' },
@ -78,7 +80,10 @@ const getHistogramSeries = ({
? ''
: getLabelName(metric, queryName || '', legend);
const color = generateColor(label, themeColors.chartcolors);
const color = generateColor(
label,
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
);
const pointSize = seriesList[i].values.length > 1 ? 5 : 10;
const showPoints = !(seriesList[i].values.length > 1);
@ -133,6 +138,7 @@ export const getUplotHistogramChartOptions = ({
apiResponse,
isHistogramGraphs: true,
isMergedSeries: mergeAllQueries,
isDarkMode,
}),
],
scales: {
@ -157,6 +163,7 @@ export const getUplotHistogramChartOptions = ({
currentQuery,
graphsVisibilityStates,
isMergedSeries: mergeAllQueries,
isDarkMode,
}),
hooks: {
ready: [

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

@ -39,6 +39,7 @@ const generateTooltipContent = (
seriesList: any[],
data: any[],
idx: number,
isDarkMode: boolean,
yAxisUnit?: string,
series?: uPlot.Options['series'],
isBillingUsageGraphs?: boolean,
@ -88,7 +89,10 @@ const generateTooltipContent = (
? ''
: getLabelName(metric, queryName || '', legend || '');
let color = generateColor(label, themeColors.chartcolors);
let color = generateColor(
label,
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
);
// in case of billing graph pick colors from the series options
if (isBillingUsageGraphs) {
@ -217,6 +221,7 @@ type ToolTipPluginProps = {
isHistogramGraphs?: boolean;
isMergedSeries?: boolean;
stackBarChart?: boolean;
isDarkMode: boolean;
};
const tooltipPlugin = ({
@ -226,6 +231,7 @@ const tooltipPlugin = ({
isHistogramGraphs,
isMergedSeries,
stackBarChart,
isDarkMode,
}: ToolTipPluginProps): any => {
let over: HTMLElement;
let bound: HTMLElement;
@ -284,6 +290,7 @@ const tooltipPlugin = ({
apiResult,
u.data,
idx,
isDarkMode,
yAxisUnit,
u.series,
isBillingUsageGraphs,

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

@ -33,6 +33,7 @@ const getSeries = ({
graphsVisibilityStates,
panelType,
hiddenGraph,
isDarkMode,
}: GetSeriesProps): uPlot.Options['series'] => {
const configurations: uPlot.Series[] = [
{ label: 'Timestamp', stroke: 'purple' },
@ -51,7 +52,10 @@ const getSeries = ({
legend || '',
);
const color = generateColor(label, themeColors.chartcolors);
const color = generateColor(
label,
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
);
const pointSize = seriesList[i].values.length > 1 ? 5 : 10;
const showPoints = !(seriesList[i].values.length > 1);
@ -93,6 +97,7 @@ const getSeries = ({
export type GetSeriesProps = {
series?: QueryData[];
widgetMetaData: QueryData[];
isDarkMode: boolean;
graphsVisibilityStates?: boolean[];
panelType?: PANEL_TYPES;
currentQuery?: Query;

2
frontend/src/lib/uPlotLib/utils/tests/__mocks__/seriesData.ts
View File

@ -174,6 +174,7 @@ export const seriesBarChartData = {
],
graphsVisibilityStates: [true, true, true, true, true],
panelType: PANEL_TYPES.BAR,
isDarkMode: true,
} as GetSeriesProps;
export const seriesLineChartData = {
@ -348,4 +349,5 @@ export const seriesLineChartData = {
],
graphsVisibilityStates: [true, true, true, true, true],
panelType: PANEL_TYPES.TIME_SERIES,
isDarkMode: false,
} as GetSeriesProps;