feat: [WCG-7] Implement colors for lines in the growth chart (#4)

src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx

@@ -3,6 +3,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Line } from 'react-chartjs-2';
 import 'chart.js/auto';
 import { ChartDataTypes } from '../../../types/chartDataTypes';
+import { chartLineColorPicker } from '../../../utils/chartLineColorPicker';
 
 
 export const GrowthChartBuilder = ({ dataSetValues, dataSetMetadata, xLabelValues, keysDataSet }: ChartDataTypes) => {
@@ -11,7 +12,7 @@ export const GrowthChartBuilder = ({ dataSetValues, dataSetMetadata, xLabelValue
         datasets: keysDataSet.map(key => ({
             data: dataSetValues.map(entry => entry[key]),
             borderWidth: 0.9,
-            borderColor: 'black',
+            borderColor: chartLineColorPicker(key),
         })),
     };
 

src/utils/chartLineColorPicker.ts

@@ -0,0 +1,20 @@
+export const chartLineColorPicker = (key: string): string => {
+    switch (key) {
+        case 'SD3neg':
+            return 'black';
+        case 'SD2neg':
+            return 'red';
+        case 'SD1neg':
+            return 'orange';
+        case 'SD0':
+            return 'green';
+        case 'SD1':
+            return 'orange';
+        case 'SD2':
+            return 'red';
+        case 'SD3':
+            return 'black';
+        default:
+            return 'gray';
+    }
+};