fix: show component rating value on y-axis ticks

Author: samshara

.changeset/spicy-dragons-teach.md

@@ -0,0 +1,10 @@
+---
+"@ifrc-go/ui": patch
+---
+
+- PieChart Component
+
+  - Added a `colorSelector` prop to select color for each pie
+
+- ProgressBar Component
+  - Introduced a `color` prop to customize the progress bar's color

.changeset/tricky-hornets-trade.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Added color mapping based on PER Area and Rating across all PER charts

app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx

@@ -49,7 +49,7 @@ function PreviousAssessmentCharts(props: Props) {
     const ratingTitleMap = listToMap(
         ratingOptions,
         (option) => option.value,
-        (option) => option.title,
+        (option) => `${option.title} ${option.value}`,
     );
 
     const chartData = useNumericChartData(

app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx

@@ -44,7 +44,7 @@ function RatingByAreaChart(props: Props) {
     const ratingTitleMap = listToMap(
         ratingOptions,
         (option) => option.value,
-        (option) => option.title,
+        (option) => `${option.title} ${option.value}`,
     );
 
     const formAreaMap = listToMap(