From 813cb3ac6be28963b8b363fbb2d4bad8d72bf58a Mon Sep 17 00:00:00 2001 From: Darren Boss Date: Tue, 7 Nov 2023 10:57:06 -0800 Subject: [PATCH 1/4] Update colors and label position And add label lines --- .../fba/components/viz/FuelTypesBreakdown.tsx | 54 +++++++++++-------- 1 file changed, 32 insertions(+), 22 deletions(-) diff --git a/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx b/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx index 2798398d6..c8150ec32 100644 --- a/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx +++ b/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx @@ -4,6 +4,7 @@ import { Typography } from '@mui/material' import { isUndefined } from 'lodash' import { FireShape, FireZoneThresholdFuelTypeArea } from 'api/fbaAPI' import { PieChart, Pie, ResponsiveContainer, Cell } from 'recharts' +import { getColorByFuelTypeCode } from 'features/fba/components/viz/color' const PREFIX = 'FuelTypesBreakdown' @@ -35,21 +36,6 @@ interface FuelTypeDataForPieChart { } const RADIAN = Math.PI / 180 -const COLOURS = [ - '#2191FB', - '#FCB1A6', - '#B33951', - '#CCF5AC', - '#8CDEDC', - '#9DACFF', - '#4F7CAC', - '#FFA62B', - '#C09BD8', - '#EBC3DB', - '#D19C1D', - '#FFC0BE', - '#ED7D3A' -] const FuelTypesBreakdown = (props: Props) => { const renderCustomizedLabel = ({ @@ -75,7 +61,7 @@ const FuelTypesBreakdown = (props: Props) => { area: number index: number }) => { - const radius = innerRadius + (outerRadius - innerRadius) * 0.5 + const radius = 25 + innerRadius + (outerRadius - innerRadius) const x = cx + radius * Math.cos(-midAngle * RADIAN) const y = cy + radius * Math.sin(-midAngle * RADIAN) @@ -90,6 +76,30 @@ const FuelTypesBreakdown = (props: Props) => { ) } + const renderLabelLine = ({ + percent, + points, + stroke + }: { + percent: number + points: { x: number; y: number }[] + stroke: string + }) => { + if (!points || points.length < 2 || percent * 100 < 2) { + return <> + } + + return ( + + ) + } + if (isUndefined(props.selectedFireZone) || isUndefined(props.fuelTypeInfo[props.selectedFireZone.fire_shape_id])) { return
} else { @@ -116,11 +126,11 @@ const FuelTypesBreakdown = (props: Props) => { cy="50%" outerRadius={80} fill="#8884d8" - labelLine={false} + labelLine={renderLabelLine} label={renderCustomizedLabel} > - {advisories.map((entry, index) => ( - + {advisories.map(entry => ( + ))} @@ -135,11 +145,11 @@ const FuelTypesBreakdown = (props: Props) => { cx="50%" cy="50%" outerRadius={80} - labelLine={false} + labelLine={renderLabelLine} label={renderCustomizedLabel} > - {warnings.map((entry, index) => ( - + {warnings.map(entry => ( + ))} From 334032be2549d348a278126347d1ea5dde1490c5 Mon Sep 17 00:00:00 2001 From: Darren Boss Date: Tue, 7 Nov 2023 11:19:53 -0800 Subject: [PATCH 2/4] Add colors and tests --- .../features/fba/components/viz/color.test.ts | 28 +++++++++++++++++++ web/src/features/fba/components/viz/color.ts | 22 +++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 web/src/features/fba/components/viz/color.test.ts create mode 100644 web/src/features/fba/components/viz/color.ts diff --git a/web/src/features/fba/components/viz/color.test.ts b/web/src/features/fba/components/viz/color.test.ts new file mode 100644 index 000000000..f587b70da --- /dev/null +++ b/web/src/features/fba/components/viz/color.test.ts @@ -0,0 +1,28 @@ +import { getColorByFuelTypeCode } from 'features/fba/components/viz/color' + +const colorByFuelTypeCodeTestMap = new Map() +colorByFuelTypeCodeTestMap.set('C-1', 'rgb(209, 255, 115)') +colorByFuelTypeCodeTestMap.set('C-2', 'rgb(34, 102, 51)') +colorByFuelTypeCodeTestMap.set('C-3', 'rgb(131, 199, 149)') +colorByFuelTypeCodeTestMap.set('C-4', 'rgb(112, 168, 0)') +colorByFuelTypeCodeTestMap.set('C-5', 'rgb(223, 184, 230)') +colorByFuelTypeCodeTestMap.set('C-6', 'rgb(172, 102, 237)') +colorByFuelTypeCodeTestMap.set('C-7', 'rgb(112, 12, 242)') +colorByFuelTypeCodeTestMap.set('D-1/D-2', 'rgb(137, 112, 68)') +colorByFuelTypeCodeTestMap.set('S-1', 'rgb(251, 190, 185)') +colorByFuelTypeCodeTestMap.set('S-2', 'rgb(247, 104, 161)') +colorByFuelTypeCodeTestMap.set('S-3', 'rgb(174, 1, 126)') +colorByFuelTypeCodeTestMap.set('O-1a/O-1b', 'rgb(255, 255, 190)') +colorByFuelTypeCodeTestMap.set('M-1/M-2', 'rgb(255, 211, 127)') + +describe('getColorByFuelTypeCode', () => { + it('should return the correct colour for each fuel type code', () => { + const keys = colorByFuelTypeCodeTestMap.keys() + for (const key of keys) { + expect(getColorByFuelTypeCode(key)).toBe(colorByFuelTypeCodeTestMap.get(key)) + } + }) + it('should return a default color when a matching key is not found', () => { + expect(getColorByFuelTypeCode('foo')).toBe('rgb(0, 255, 255)') + }) +}) diff --git a/web/src/features/fba/components/viz/color.ts b/web/src/features/fba/components/viz/color.ts new file mode 100644 index 000000000..e20ffdf32 --- /dev/null +++ b/web/src/features/fba/components/viz/color.ts @@ -0,0 +1,22 @@ +// A Map of fuel type codes to the colour typically used in BCWS +const colorByFuelTypeCode = new Map() +colorByFuelTypeCode.set('C-1', 'rgb(209, 255, 115)') +colorByFuelTypeCode.set('C-2', 'rgb(34, 102, 51)') +colorByFuelTypeCode.set('C-3', 'rgb(131, 199, 149)') +colorByFuelTypeCode.set('C-4', 'rgb(112, 168, 0)') +colorByFuelTypeCode.set('C-5', 'rgb(223, 184, 230)') +colorByFuelTypeCode.set('C-6', 'rgb(172, 102, 237)') +colorByFuelTypeCode.set('C-7', 'rgb(112, 12, 242)') +colorByFuelTypeCode.set('D-1/D-2', 'rgb(137, 112, 68)') +colorByFuelTypeCode.set('S-1', 'rgb(251, 190, 185)') +colorByFuelTypeCode.set('S-2', 'rgb(247, 104, 161)') +colorByFuelTypeCode.set('S-3', 'rgb(174, 1, 126)') +colorByFuelTypeCode.set('O-1a/O-1b', 'rgb(255, 255, 190)') +colorByFuelTypeCode.set('M-1/M-2', 'rgb(255, 211, 127)') + +// Retrieve a color from the Map base don the fuel type code. +// Provide a default value in case a non-standard code is encountered so we don't end up with empty pie slices. +export const getColorByFuelTypeCode = (code: string): string => { + const color = colorByFuelTypeCode.get(code) + return color ?? 'rgb(0, 255, 255)' +} From 7b6c9e80546ce98f9c039739b5db3816976f1765 Mon Sep 17 00:00:00 2001 From: Darren Boss Date: Tue, 7 Nov 2023 12:09:46 -0800 Subject: [PATCH 3/4] Cleanup --- .../fba/components/viz/FuelTypesBreakdown.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx b/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx index c8150ec32..72859db3d 100644 --- a/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx +++ b/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx @@ -42,29 +42,24 @@ const FuelTypesBreakdown = (props: Props) => { cx, cy, midAngle, - innerRadius, outerRadius, percent, - fuel_type_code, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - area, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - index + fuel_type_code }: { cx: number cy: number midAngle: number - innerRadius: number outerRadius: number percent: number fuel_type_code: string - area: number - index: number }) => { - const radius = 25 + innerRadius + (outerRadius - innerRadius) - const x = cx + radius * Math.cos(-midAngle * RADIAN) - const y = cy + radius * Math.sin(-midAngle * RADIAN) + // Labels are positioned at the outer edge of the pie + the length of label lines (20px) + + // an arbitrary buffer/whitespace of 5px + const labelRadius = outerRadius + 25 + const x = cx + labelRadius * Math.cos(-midAngle * RADIAN) + const y = cy + labelRadius * Math.sin(-midAngle * RADIAN) + // Only label pie slices that contribute >= 2% if (percent * 100 < 2) { return } From d88ce975078c0a1ab8d2c0e32aa91b6a7efc36f2 Mon Sep 17 00:00:00 2001 From: Darren Boss Date: Tue, 7 Nov 2023 12:48:36 -0800 Subject: [PATCH 4/4] Small tweak --- .../features/fba/components/viz/FuelTypesBreakdown.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx b/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx index 72859db3d..edbd1c414 100644 --- a/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx +++ b/web/src/features/fba/components/viz/FuelTypesBreakdown.tsx @@ -84,15 +84,7 @@ const FuelTypesBreakdown = (props: Props) => { return <> } - return ( - - ) + return } if (isUndefined(props.selectedFireZone) || isUndefined(props.fuelTypeInfo[props.selectedFireZone.fire_shape_id])) {