diff --git a/src/utils/securityColors.ts b/src/utils/securityColors.ts index c890e68..4234f33 100644 --- a/src/utils/securityColors.ts +++ b/src/utils/securityColors.ts @@ -1,23 +1,41 @@ export const getSecurityColor = (security: number): string => { - if (security > 0.5) { - // Cyan to light blue for high security (0.5, 1] - const ratio = (security - 0.5) / 0.5; - const green = Math.round(200 + (180 - 200) * ratio); // From #00c8c8 to #00b4d8 - const blue = Math.round(200 + (216 - 200) * ratio); - return `rgb(${Math.round(0 * (1 - ratio) + 0 * ratio)}, ${green}, ${blue})`; - } else if (security >= 0) { - // Red to yellow for low security [0.0, 0.5] - const ratio = security / 0.5; - const red = Math.round(239 + (234 - 239) * ratio); // From #ef4444 to #eab308 - const green = Math.round(68 + (179 - 68) * ratio); - const blue = Math.round(68 + (8 - 68) * ratio); - return `rgb(${red}, ${green}, ${blue})`; - } else { - // Purple to red for null security [-1, 0) - const ratio = (security + 1) / 1; - const red = Math.round(147 + (239 - 147) * ratio); // From #9333ea to #ef4444 - const green = Math.round(51 + (68 - 51) * ratio); - const blue = Math.round(234 + (68 - 234) * ratio); - return `rgb(${red}, ${green}, ${blue})`; + // Clamp security between -1 and 1 + const clampedSecurity = Math.max(-1, Math.min(1, security)); + + // Define color points for specific security values + const colorPoints = [ + { sec: -1.0, color: [75, 0, 130] }, // Dark purple (same as 0.1) + { sec: 0.1, color: [75, 0, 130] }, // Dark purple + { sec: 0.2, color: [255, 0, 0] }, // Red + { sec: 0.3, color: [255, 165, 0] }, // Orange + { sec: 0.4, color: [255, 200, 0] }, // Light orange + { sec: 0.5, color: [255, 255, 0] }, // Yellow + { sec: 0.6, color: [0, 255, 0] }, // Green + { sec: 0.7, color: [0, 255, 255] }, // Cyan + { sec: 0.8, color: [135, 206, 235] }, // Sky blue (more appropriate light blue) + { sec: 0.9, color: [0, 0, 255] }, // Blue + { sec: 1.0, color: [0, 0, 139] } // Deep blue + ]; + + // Find the two color points to interpolate between + let lowerPoint = colorPoints[0]; + let upperPoint = colorPoints[colorPoints.length - 1]; + + for (let i = 0; i < colorPoints.length - 1; i++) { + if (clampedSecurity >= colorPoints[i].sec && clampedSecurity <= colorPoints[i + 1].sec) { + lowerPoint = colorPoints[i]; + upperPoint = colorPoints[i + 1]; + break; + } } + + // Calculate the ratio between the two points + const ratio = (clampedSecurity - lowerPoint.sec) / (upperPoint.sec - lowerPoint.sec); + + // Interpolate between the colors + const red = Math.round(lowerPoint.color[0] + (upperPoint.color[0] - lowerPoint.color[0]) * ratio); + const green = Math.round(lowerPoint.color[1] + (upperPoint.color[1] - lowerPoint.color[1]) * ratio); + const blue = Math.round(lowerPoint.color[2] + (upperPoint.color[2] - lowerPoint.color[2]) * ratio); + + return `rgb(${red}, ${green}, ${blue})`; };