[Frontend] Move color lists to theme palette

Author: santeri0200

services/frontend/src/components/common/LineGraph.tsx

@@ -4,15 +4,13 @@ import exporting from 'highcharts/modules/exporting'
 import ReactHighcharts from 'react-highcharts'
 
 import { Section } from '@/components/Section'
+import { theme } from '@/theme'
 import { GraphStat } from '@/types/graphStat'
 
 exporting(ReactHighcharts.Highcharts)
 exportData(ReactHighcharts.Highcharts)
 accessibility(ReactHighcharts.Highcharts)
 
-// TODO: Move to theme
-const colors = ['#7cb5ec', '#90ed7d', '#434348', '#f7a35c', '#FFF000', '#2b908f', '#f45b5b', '#91e8e1']
-
 export const LineGraph = ({
   cypress,
   exportFileName,
@@ -30,7 +28,7 @@ export const LineGraph = ({
 
   const dataWithColors = graphStats.map((series, index) => ({
     ...series,
-    color: colors[index],
+    color: theme.palette.graphColors[index],
     type: 'line' as const,
   }))
 

services/frontend/src/components/common/StackedBarChart.tsx

@@ -6,14 +6,12 @@ import exporting from 'highcharts/modules/exporting'
 import ReactHighcharts from 'react-highcharts'
 
 import { Section } from '@/components/Section'
+import { theme } from '@/theme'
 
 exporting(ReactHighcharts.Highcharts)
 exportData(ReactHighcharts.Highcharts)
 accessibility(ReactHighcharts.Highcharts)
 
-// TODO: Move to theme
-const colors = ['#7cb5ec', '#90ed7d', '#434348', '#f7a35c', '#FFF000', '#2b908f', '#f45b5b', '#91e8e1']
-
 export const StackedBarChart = ({
   cypress,
   data,
@@ -29,7 +27,11 @@ export const StackedBarChart = ({
     return null
   }
 
-  const dataWithColors = data?.map((series, index) => ({ ...series, color: colors[index], type: 'column' as const }))
+  const dataWithColors = data?.map((series, index) => ({
+    ...series,
+    color: theme.palette.graphColors[index],
+    type: 'column' as const,
+  }))
 
   const config: HighCharts.Options = {
     series: dataWithColors,

services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/CollapsedStackedBar.tsx

@@ -7,15 +7,13 @@ import exporting from 'highcharts/modules/exporting'
 import ReactHighcharts from 'react-highcharts'
 
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { theme } from '@/theme'
 import { NameWithCode } from '@oodikone/shared/types'
 
 exporting(ReactHighcharts.Highcharts)
 exportData(ReactHighcharts.Highcharts)
 accessibility(ReactHighcharts.Highcharts)
 
-// TODO: Move to theme
-const colors = ['#7cb5ec', '#90ed7d', '#434348', '#f7a35c', '#FFF000', '#2b908f', '#f45b5b', '#91e8e1']
-
 export const CollapsedStackedBar = ({
   data,
   differenceData,
@@ -39,7 +37,12 @@ export const CollapsedStackedBar = ({
     names[0] += ' (new in faculty)'
   }
   const dataTranspose = transpose(data)
-    .map((obj, index) => ({ name: names[index], data: obj, color: colors[index], type: 'bar' as const }))
+    .map((obj, index) => ({
+      name: names[index],
+      data: obj,
+      color: theme.palette.graphColors[index],
+      type: 'bar' as const,
+    }))
     .reverse()
 
   const differenceArray: Record<string, Record<string, number>> = Object.keys(differenceData).reduce(

services/frontend/src/theme/base.ts

@@ -83,6 +83,7 @@ const baseTheme = {
       doctor: blueGrey[200],
       postgrad: blueGrey[300],
     },
+    graphColors: ['#7cb5ec', '#90ed7d', '#434348', '#f7a35c', '#FFF000', '#2b908f', '#f45b5b', '#91e8e1'],
   },
 } as const