use opacity

web/src/features/psuInsights/components/map/PSUMap.tsx

@@ -32,7 +32,8 @@ const PSUMap = () => {
     new VectorTileLayer({
       source: fuelGridVectorSource,
       style: styleFuelGrid(),
-      zIndex: 51
+      zIndex: 51,
+      opacity: 0.6
     })
   )
 

web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts

@@ -1,38 +1,14 @@
-import { getColorForRasterValue, setTransparency } from '@/features/psuInsights/components/map/psuFeatureStylers'
-
-describe('setTransparency', () => {
-  it('should return an rgba value from rgb with correct alpha value', () => {
-    const rgb = 'rgb(1, 1, 1)'
-    const rgba = setTransparency(rgb, 0.5)
-    expect(rgba).toBe('rgba(1, 1, 1, 0.5)')
-  })
-
-  it('should return an updated rgba value from an rgba input', () => {
-    const rgb = 'rgb(1, 1, 1, 1)'
-    const rgba = setTransparency(rgb, 0.5)
-    expect(rgba).toBe('rgba(1, 1, 1, 0.5)')
-  })
-
-  it('should throw an error if fewer than 3 RGB values are provided', () => {
-    const incompleteColor = 'rgb(1, 2)'
-    expect(() => setTransparency(incompleteColor, 0.5)).toThrow(Error)
-  })
-
-  it('should return a completely transparent colour if no colour is provided as input', () => {
-    const rgba = setTransparency(undefined, 0.5)
-    expect(rgba).toBe('rgba(0, 0, 0, 0)')
-  })
-})
+import { getColorForRasterValue } from '@/features/psuInsights/components/map/psuFeatureStylers'
 
 describe('getColorForRasterValue', () => {
   it('should get the correct colour for the specified raster value', () => {
     const rasterValue = 1
     const colour = getColorForRasterValue(rasterValue)
     expect(colour).toBe('rgb(209, 255, 115)')
   })
-  it('should return undefined if no colour is found', () => {
+  it('should return a transparent colour if no colour is found', () => {
     const rasterValue = 1000
     const colour = getColorForRasterValue(rasterValue)
-    expect(colour).toBe(undefined)
+    expect(colour).toBe('rgba(0, 0, 0, 0)')
   })
 })

web/src/features/psuInsights/components/map/psuFeatureStylers.ts

@@ -22,37 +22,18 @@ const rasterValueToFuelTypeCode = new Map([
   [14, 'M-1/M-2']
 ])
 
-export const getColorForRasterValue = (rasterValue: number): string | undefined => {
+export const getColorForRasterValue = (rasterValue: number): string => {
   const fuelTypeCode = rasterValueToFuelTypeCode.get(rasterValue)
-  return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : undefined
-}
-
-/**
- * Takes rgb or rgba values as input, sets or updates the alpha value, and returns a new rgba value
- * @param color rgb or rgba colour string ex. rgb(1, 2, 3) or rgba(1, 2, 3, 0.2)
- * @param alpha number value between 0 and 1
- * @returns rgba value with alpha set ex. rgba(1, 2, 3, 0.5)
- */
-export const setTransparency = (color: string | undefined, alpha: number): string => {
-  if (!color) return 'rgba(0, 0, 0, 0)'
-
-  const rgbMatch = color.match(/\d+/g)?.map(Number)
-  if (!rgbMatch || rgbMatch.length < 3) {
-    throw new Error(`Invalid color format: "${color}"`)
-  }
-
-  const [r, g, b] = rgbMatch
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : 'rgba(0, 0, 0, 0)'
 }
 
 export const styleFuelGrid = () => {
   const style = (feature: RenderFeature | ol.Feature<Geometry>) => {
     const fuelTypeInt = feature.getProperties().fuel
     const fillColour = getColorForRasterValue(fuelTypeInt)
-    const fillRGBA = setTransparency(fillColour, 0.6)
 
     return new Style({
-      fill: new Fill({ color: fillRGBA })
+      fill: new Fill({ color: fillColour })
     })
   }
   return style