Merge branch 'fix/issue-6354' into fix/issue-3917

frontend/src/components/ValueGraph/index.tsx

@@ -40,6 +40,7 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
+	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -87,7 +88,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
 
 	return (
 		<div
@@ -155,6 +156,7 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
+	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,9 +1,10 @@
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function compareThreshold(
+function doesValueSatisfyThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
+	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -11,31 +12,14 @@ function compareThreshold(
 	) {
 		return false;
 	}
-	switch (threshold.thresholdOperator) {
-		case '>':
-			return rawValue > threshold.thresholdValue;
-		case '>=':
-			return rawValue >= threshold.thresholdValue;
-		case '<':
-			return rawValue < threshold.thresholdValue;
-		case '<=':
-			return rawValue <= threshold.thresholdValue;
-		case '=':
-			return rawValue === threshold.thresholdValue;
-		default:
-			return false;
-	}
-}
 
-function extractNumbersFromString(inputString: string): number[] {
-	const regex = /[+-]?\d+(\.\d+)?/g;
-	const matches = inputString.match(regex);
-
-	if (matches) {
-		return matches.map(Number);
-	}
-
-	return [];
+	return evaluateThresholdWithConvertedValue(
+		rawValue,
+		threshold.thresholdValue,
+		threshold.thresholdOperator,
+		threshold.thresholdUnit,
+		yAxisUnit,
+	);
 }
 
 function getHighestPrecedenceThreshold(
@@ -63,17 +47,13 @@ function getHighestPrecedenceThreshold(
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
+	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
 	const matchingThresholds = thresholds.filter((threshold) =>
-		compareThreshold(
-			extractNumbersFromString(
-				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
-			)[0],
-			threshold,
-		),
+		doesValueSatisfyThreshold(rawValue, threshold, yAxisUnit),
 	);
 
 	if (matchingThresholds.length === 0) {

frontend/src/components/YAxisUnitSelector/__tests__/utils.test.tsx

@@ -1,4 +1,5 @@
-import { UniversalYAxisUnit } from '../types';
+import { YAxisCategoryNames } from '../constants';
+import { UniversalYAxisUnit, YAxisCategory } from '../types';
 import {
 	getUniversalNameFromMetricUnit,
 	mapMetricUnitToUniversalUnit,
@@ -41,29 +42,29 @@ describe('YAxisUnitSelector utils', () => {
 
 	describe('mergeCategories', () => {
 		it('merges categories correctly', () => {
-			const categories1 = [
+			const categories1: YAxisCategory[] = [
 				{
-					name: 'Data',
+					name: YAxisCategoryNames.Data,
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
 					],
 				},
 			];
-			const categories2 = [
+			const categories2: YAxisCategory[] = [
 				{
-					name: 'Data',
+					name: YAxisCategoryNames.Data,
 					units: [{ name: 'bits', id: UniversalYAxisUnit.BITS }],
 				},
 				{
-					name: 'Time',
+					name: YAxisCategoryNames.Time,
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			];
 			const mergedCategories = mergeCategories(categories1, categories2);
 			expect(mergedCategories).toEqual([
 				{
-					name: 'Data',
+					name: YAxisCategoryNames.Data,
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
@@ -71,7 +72,7 @@ describe('YAxisUnitSelector utils', () => {
 					],
 				},
 				{
-					name: 'Time',
+					name: YAxisCategoryNames.Time,
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			]);

frontend/src/components/YAxisUnitSelector/constants.ts

@@ -1,5 +1,36 @@
 import { UnitFamilyConfig, UniversalYAxisUnit, YAxisUnit } from './types';
 
+export enum YAxisCategoryNames {
+	Time = 'Time',
+	Data = 'Data',
+	DataRate = 'Data Rate',
+	Count = 'Count',
+	Operations = 'Operations',
+	Percentage = 'Percentage',
+	Boolean = 'Boolean',
+	None = 'None',
+	HashRate = 'Hash Rate',
+	Miscellaneous = 'Miscellaneous',
+	Acceleration = 'Acceleration',
+	Angular = 'Angular',
+	Area = 'Area',
+	Flops = 'FLOPs',
+	Concentration = 'Concentration',
+	Currency = 'Currency',
+	Datetime = 'Datetime',
+	PowerElectrical = 'Power/Electrical',
+	Flow = 'Flow',
+	Force = 'Force',
+	Mass = 'Mass',
+	Length = 'Length',
+	Pressure = 'Pressure',
+	Radiation = 'Radiation',
+	RotationSpeed = 'Rotation Speed',
+	Temperature = 'Temperature',
+	Velocity = 'Velocity',
+	Volume = 'Volume',
+}
+
 // Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents (if available)
 export const UniversalYAxisUnitMappings: Partial<
 	Record<UniversalYAxisUnit, Set<YAxisUnit> | null>

frontend/src/components/YAxisUnitSelector/data.ts

@@ -1,10 +1,11 @@
 import { Y_AXIS_UNIT_NAMES } from './constants';
+import { YAxisCategoryNames } from './constants';
 import { UniversalYAxisUnit, YAxisCategory } from './types';
 
 // Base categories for the universal y-axis units
 export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: 'Time',
+		name: YAxisCategoryNames.Time,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
@@ -37,7 +38,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Data',
+		name: YAxisCategoryNames.Data,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
@@ -154,7 +155,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Data Rate',
+		name: YAxisCategoryNames.DataRate,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
@@ -295,7 +296,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Count',
+		name: YAxisCategoryNames.Count,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
@@ -312,7 +313,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Operations',
+		name: YAxisCategoryNames.Operations,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
@@ -353,7 +354,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Percentage',
+		name: YAxisCategoryNames.Percentage,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
@@ -366,7 +367,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Boolean',
+		name: YAxisCategoryNames.Boolean,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TRUE_FALSE],
@@ -382,7 +383,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 
 export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: 'Time',
+		name: YAxisCategoryNames.Time,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DURATION_MS],
@@ -419,7 +420,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Data Rate',
+		name: YAxisCategoryNames.DataRate,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATA_RATE_PACKETS_PER_SECOND],
@@ -428,7 +429,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Boolean',
+		name: YAxisCategoryNames.Boolean,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ON_OFF],
@@ -437,7 +438,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'None',
+		name: YAxisCategoryNames.None,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
@@ -446,7 +447,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Hash Rate',
+		name: YAxisCategoryNames.HashRate,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HASH_RATE_HASHES_PER_SECOND],
@@ -479,7 +480,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Miscellaneous',
+		name: YAxisCategoryNames.Miscellaneous,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MISC_STRING],
@@ -520,7 +521,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Acceleration',
+		name: YAxisCategoryNames.Acceleration,
 		units: [
 			{
 				name:
@@ -541,7 +542,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Angular',
+		name: YAxisCategoryNames.Angular,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ANGULAR_DEGREE],
@@ -566,7 +567,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Area',
+		name: YAxisCategoryNames.Area,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.AREA_SQUARE_METERS],
@@ -583,7 +584,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'FLOPs',
+		name: YAxisCategoryNames.Flops,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOPS_FLOPS],
@@ -620,7 +621,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Concentration',
+		name: YAxisCategoryNames.Concentration,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CONCENTRATION_PPM],
@@ -677,7 +678,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Currency',
+		name: YAxisCategoryNames.Currency,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CURRENCY_USD],
@@ -774,7 +775,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Datetime',
+		name: YAxisCategoryNames.Datetime,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATETIME_ISO],
@@ -811,7 +812,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Power/Electrical',
+		name: YAxisCategoryNames.PowerElectrical,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.POWER_WATT],
@@ -968,7 +969,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Flow',
+		name: YAxisCategoryNames.Flow,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOW_GALLONS_PER_MINUTE],
@@ -1005,7 +1006,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Force',
+		name: YAxisCategoryNames.Force,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FORCE_NEWTON_METERS],
@@ -1026,7 +1027,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Mass',
+		name: YAxisCategoryNames.Mass,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MASS_MILLIGRAM],
@@ -1051,7 +1052,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Length',
+		name: YAxisCategoryNames.Length,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.LENGTH_MILLIMETER],
@@ -1080,7 +1081,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Pressure',
+		name: YAxisCategoryNames.Pressure,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PRESSURE_MILLIBAR],
@@ -1117,7 +1118,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Radiation',
+		name: YAxisCategoryNames.Radiation,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.RADIATION_BECQUEREL],
@@ -1174,7 +1175,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Rotation Speed',
+		name: YAxisCategoryNames.RotationSpeed,
 		units: [
 			{
 				name:
@@ -1200,7 +1201,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Temperature',
+		name: YAxisCategoryNames.Temperature,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TEMPERATURE_CELSIUS],
@@ -1217,7 +1218,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Velocity',
+		name: YAxisCategoryNames.Velocity,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VELOCITY_METERS_PER_SECOND],
@@ -1238,7 +1239,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Volume',
+		name: YAxisCategoryNames.Volume,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VOLUME_MILLILITER],

frontend/src/components/YAxisUnitSelector/types.ts

@@ -1,3 +1,5 @@
+import { YAxisCategoryNames } from './constants';
+
 export interface YAxisUnitSelectorProps {
 	value: string | undefined;
 	onChange: (value: UniversalYAxisUnit) => void;
@@ -669,7 +671,7 @@ export interface UnitFamilyConfig {
 }
 
 export interface YAxisCategory {
-	name: string;
+	name: YAxisCategoryNames;
 	units: {
 		name: string;
 		id: UniversalYAxisUnit;

frontend/src/container/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-function evaluateThresholdWithConvertedValue(
+export function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,6 +99,7 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
+					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts

@@ -1,3 +1,7 @@
+import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
+import { convertValue } from 'lib/getConvertedValue';
 import { flattenDeep } from 'lodash-es';
 
 import {
@@ -439,131 +443,6 @@ export const flattenedCategories = flattenDeep(
 	dataTypeCategories.map((category) => category.formats),
 );
 
-type ConversionFactors = {
-	[key: string]: {
-		[key: string]: number | null;
-	};
-};
-
-// Object containing conversion factors for various categories and formats
-const conversionFactors: ConversionFactors = {
-	[CategoryNames.Time]: {
-		[TimeFormats.Hertz]: 1,
-		[TimeFormats.Nanoseconds]: 1e-9,
-		[TimeFormats.Microseconds]: 1e-6,
-		[TimeFormats.Milliseconds]: 1e-3,
-		[TimeFormats.Seconds]: 1,
-		[TimeFormats.Minutes]: 60,
-		[TimeFormats.Hours]: 3600,
-		[TimeFormats.Days]: 86400,
-		[TimeFormats.DurationMs]: 1e-3,
-		[TimeFormats.DurationS]: 1,
-		[TimeFormats.DurationHms]: null, // Requires special handling
-		[TimeFormats.DurationDhms]: null, // Requires special handling
-		[TimeFormats.Timeticks]: null, // Requires special handling
-		[TimeFormats.ClockMs]: 1e-3,
-		[TimeFormats.ClockS]: 1,
-	},
-	[CategoryNames.Throughput]: {
-		[ThroughputFormats.CountsPerSec]: 1,
-		[ThroughputFormats.OpsPerSec]: 1,
-		[ThroughputFormats.RequestsPerSec]: 1,
-		[ThroughputFormats.ReadsPerSec]: 1,
-		[ThroughputFormats.WritesPerSec]: 1,
-		[ThroughputFormats.IOOpsPerSec]: 1,
-		[ThroughputFormats.CountsPerMin]: 1 / 60,
-		[ThroughputFormats.OpsPerMin]: 1 / 60,
-		[ThroughputFormats.ReadsPerMin]: 1 / 60,
-		[ThroughputFormats.WritesPerMin]: 1 / 60,
-	},
-	[CategoryNames.Data]: {
-		[DataFormats.BytesIEC]: 1,
-		[DataFormats.BytesSI]: 1,
-		[DataFormats.BitsIEC]: 0.125,
-		[DataFormats.BitsSI]: 0.125,
-		[DataFormats.KibiBytes]: 1024,
-		[DataFormats.KiloBytes]: 1000,
-		[DataFormats.MebiBytes]: 1048576,
-		[DataFormats.MegaBytes]: 1000000,
-		[DataFormats.GibiBytes]: 1073741824,
-		[DataFormats.GigaBytes]: 1000000000,
-		[DataFormats.TebiBytes]: 1099511627776,
-		[DataFormats.TeraBytes]: 1000000000000,
-		[DataFormats.PebiBytes]: 1125899906842624,
-		[DataFormats.PetaBytes]: 1000000000000000,
-	},
-	[CategoryNames.DataRate]: {
-		[DataRateFormats.PacketsPerSec]: null, // Cannot convert directly to other data rates
-		[DataRateFormats.BytesPerSecIEC]: 1,
-		[DataRateFormats.BytesPerSecSI]: 1,
-		[DataRateFormats.BitsPerSecIEC]: 0.125,
-		[DataRateFormats.BitsPerSecSI]: 0.125,
-		[DataRateFormats.KibiBytesPerSec]: 1024,
-		[DataRateFormats.KibiBitsPerSec]: 128,
-		[DataRateFormats.KiloBytesPerSec]: 1000,
-		[DataRateFormats.KiloBitsPerSec]: 125,
-		[DataRateFormats.MebiBytesPerSec]: 1048576,
-		[DataRateFormats.MebiBitsPerSec]: 131072,
-		[DataRateFormats.MegaBytesPerSec]: 1000000,
-		[DataRateFormats.MegaBitsPerSec]: 125000,
-		[DataRateFormats.GibiBytesPerSec]: 1073741824,
-		[DataRateFormats.GibiBitsPerSec]: 134217728,
-		[DataRateFormats.GigaBytesPerSec]: 1000000000,
-		[DataRateFormats.GigaBitsPerSec]: 125000000,
-		[DataRateFormats.TebiBytesPerSec]: 1099511627776,
-		[DataRateFormats.TebiBitsPerSec]: 137438953472,
-		[DataRateFormats.TeraBytesPerSec]: 1000000000000,
-		[DataRateFormats.TeraBitsPerSec]: 125000000000,
-		[DataRateFormats.PebiBytesPerSec]: 1125899906842624,
-		[DataRateFormats.PebiBitsPerSec]: 140737488355328,
-		[DataRateFormats.PetaBytesPerSec]: 1000000000000000,
-		[DataRateFormats.PetaBitsPerSec]: 125000000000000,
-	},
-	[CategoryNames.Miscellaneous]: {
-		[MiscellaneousFormats.None]: null,
-		[MiscellaneousFormats.String]: null,
-		[MiscellaneousFormats.Short]: null,
-		[MiscellaneousFormats.Percent]: 1,
-		[MiscellaneousFormats.PercentUnit]: 100,
-		[MiscellaneousFormats.Humidity]: 1,
-		[MiscellaneousFormats.Decibel]: null,
-		[MiscellaneousFormats.Hexadecimal0x]: null,
-		[MiscellaneousFormats.Hexadecimal]: null,
-		[MiscellaneousFormats.ScientificNotation]: null,
-		[MiscellaneousFormats.LocaleFormat]: null,
-		[MiscellaneousFormats.Pixels]: null,
-	},
-	[CategoryNames.Boolean]: {
-		[BooleanFormats.TRUE_FALSE]: null, // Not convertible
-		[BooleanFormats.YES_NO]: null, // Not convertible
-		[BooleanFormats.ON_OFF]: null, // Not convertible
-	},
-};
-
-// Function to get the conversion factor between two units in a specific category
-function getConversionFactor(
-	fromUnit: string,
-	toUnit: string,
-	category: CategoryNames,
-): number | null {
-	// Retrieves the conversion factors for the specified category
-	const categoryFactors = conversionFactors[category];
-	if (!categoryFactors) {
-		return null; // Returns null if the category does not exist
-	}
-	const fromFactor = categoryFactors[fromUnit];
-	const toFactor = categoryFactors[toUnit];
-	if (
-		fromFactor === undefined ||
-		toFactor === undefined ||
-		fromFactor === null ||
-		toFactor === null
-	) {
-		return null; // Returns null if either unit does not exist or is not convertible
-	}
-	return fromFactor / toFactor; // Returns the conversion factor ratio
-}
-
 // Function to convert a value from one unit to another
 export function convertUnit(
 	value: number,
@@ -573,14 +452,16 @@ export function convertUnit(
 	let fromUnit: string | undefined;
 	let toUnit: string | undefined;
 
+	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
+
 	// Finds the category that contains the specified units and extracts fromUnit and toUnit using array methods
-	const category = dataTypeCategories.find((category) =>
-		category.formats.some((format) => {
-			if (format.id === fromUnitId) {
-				fromUnit = format.id;
+	const category = categories.find((category) =>
+		category.units.some((unit) => {
+			if (unit.id === fromUnitId) {
+				fromUnit = unit.id;
 			}
-			if (format.id === toUnitId) {
-				toUnit = format.id;
+			if (unit.id === toUnitId) {
+				toUnit = unit.id;
 			}
 			return fromUnit && toUnit; // Break out early if both units are found
 		}),
@@ -590,24 +471,16 @@ export function convertUnit(
 		return null;
 	} // Return null if category or units are not found
 
-	// Gets the conversion factor for the specified units
-	const conversionFactor = getConversionFactor(
-		fromUnit,
-		toUnit,
-		category.name as any,
-	);
-	if (conversionFactor === null) {
-		return null;
-	} // Return null if conversion is not possible
-
-	return value * conversionFactor;
+	// Convert the value from the fromUnit to the toUnit
+	return convertValue(value, fromUnit, toUnit);
 }
 
 // Function to get the category name for a given unit ID
-export const getCategoryName = (unitId: string): CategoryNames | null => {
+export const getCategoryName = (unitId: string): YAxisCategoryNames | null => {
 	// Finds the category that contains the specified unit ID
-	const foundCategory = dataTypeCategories.find((category) =>
-		category.formats.some((format) => format.id === unitId),
+	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
+	const foundCategory = categories.find((category) =>
+		category.units.some((unit) => unit.id === unitId),
 	);
-	return foundCategory ? (foundCategory.name as CategoryNames) : null;
+	return foundCategory ? foundCategory.name : null;
 };

frontend/src/container/NewWidget/utils.ts

@@ -2,6 +2,9 @@ import { Layout } from 'react-grid-layout';
 import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
+import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
@@ -21,11 +24,7 @@ import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import {
-	dataTypeCategories,
-	getCategoryName,
-} from './RightContainer/dataFormatCategories';
-import { CategoryNames } from './RightContainer/types';
+import { getCategoryName } from './RightContainer/dataFormatCategories';
 
 export const getIsQueryModified = (
 	currentQuery: Query,
@@ -606,14 +605,21 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  * the label and value for each format.
  */
 export const getCategorySelectOptionByName = (
-	name?: CategoryNames | string,
-): DefaultOptionType[] =>
-	dataTypeCategories
-		.find((category) => category.name === name)
-		?.formats.map((format) => ({
-			label: format.name,
-			value: format.id,
-		})) || [];
+	name?: YAxisCategoryNames,
+): DefaultOptionType[] => {
+	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
+	if (!categories.length) {
+		return [];
+	}
+	return (
+		categories
+			.find((category) => category.name === name)
+			?.units.map((unit) => ({
+				label: unit.name,
+				value: unit.id,
+			})) || []
+	);
+};
 
 /**
  * Generates unit options based on the provided column unit.

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/config.ts

@@ -1,10 +1,13 @@
-import { CategoryNames } from 'container/NewWidget/RightContainer/types';
+import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
 
-export const categoryToSupport = [
-	CategoryNames.Data,
-	CategoryNames.DataRate,
-	CategoryNames.Time,
-	CategoryNames.Throughput,
-	CategoryNames.Miscellaneous,
-	CategoryNames.Boolean,
+export const categoryToSupport: YAxisCategoryNames[] = [
+	YAxisCategoryNames.None,
+	YAxisCategoryNames.Data,
+	YAxisCategoryNames.DataRate,
+	YAxisCategoryNames.Time,
+	YAxisCategoryNames.Count,
+	YAxisCategoryNames.Operations,
+	YAxisCategoryNames.Percentage,
+	YAxisCategoryNames.Miscellaneous,
+	YAxisCategoryNames.Boolean,
 ];