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

* fix: fix colors of graphs for lightMode and darkMode

* fix: fix colors of graphs for lightMode and darkMode

frontend/src/constants/theme.ts

@@ -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',

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

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

frontend/src/container/PanelWrapper/PiePanelWrapper.tsx

@@ -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,
 					),
 				})),
 			)

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -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),
 	};

frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts

@@ -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: [

frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts

@@ -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,

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

@@ -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;

frontend/src/lib/uPlotLib/utils/tests/__mocks__/seriesData.ts

@@ -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;