better y axis legend for the charts

Author: Tschonti

packages/client/src/pages/results/components/CategoriesBarChart.tsx

@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react'
 import { EventWithResults, RatingResultWithJoins, StageWithResults } from '@pontozo/common'
 import { Bar, BarChart, CartesianGrid, Legend, Text, Tooltip, XAxis, YAxis } from 'recharts'
 import { useResultTableContext } from 'src/api/contexts/useResultTableContext'
-import { chartColors } from 'src/util/chartColors'
+import { chartColors, yAxisTickFormatter } from 'src/util/chartHelpers'
 import { getScore } from 'src/util/resultItemHelpers'
 import { BarChartData } from '../types/BarChartData'
 
@@ -81,7 +81,7 @@ export const CategoriesBarChart = ({ event, setSelectedCategoryId }: Props) => {
             </Text>
           )}
         />
-        <YAxis type="number" domain={[0, 3]} tickCount={4} />
+        <YAxis width={100} tickFormatter={yAxisTickFormatter} type="number" domain={[0, 3]} tickCount={4} />
         <Legend />
         {!isMobile && <Tooltip cursor={{ fillOpacity: 0.4 }} />}
         <Bar name="Teljes verseny" dataKey="event" fill={chartColors[0]} onClick={(e) => onChartClick(e.categoryId)} />

packages/client/src/pages/results/components/CriteriaBarChart.tsx

@@ -3,7 +3,7 @@ import { EventWithResults, Rank } from '@pontozo/common'
 import { useEffect, useState } from 'react'
 import { Bar, BarChart, CartesianGrid, Legend, Text, Tooltip, XAxis, YAxis } from 'recharts'
 import { useResultTableContext } from 'src/api/contexts/useResultTableContext'
-import { chartColors } from 'src/util/chartColors'
+import { chartColors, yAxisTickFormatter } from 'src/util/chartHelpers'
 import { getScore } from 'src/util/resultItemHelpers'
 import { BarChartData } from '../types/BarChartData'
 
@@ -68,7 +68,7 @@ export const CriteriaBarChart = ({ event, selectedCategoryId }: Props) => {
             </Text>
           )}
         />
-        <YAxis type="number" domain={[0, 3]} tickCount={4} />
+        <YAxis type="number" width={100} tickFormatter={yAxisTickFormatter} domain={[0, 3]} tickCount={4} />
         {!isMobile && <Tooltip cursor={{ fillOpacity: 0.4 }} />}
         <Legend />
         <Bar name="Teljes verseny" dataKey="event" fill={chartColors[0]} />

packages/client/src/util/chartColors.ts

@@ -0,0 +1,23 @@
+export const chartColors = [
+  '#0a723a',
+  '#F8AB10', // mezo sarga
+  '#B04191', // felulnyomas
+  '#D07500', // szintvonal barna
+  '#009FE3', // viz
+  '#EAB983', // aszfalt
+  '#f76d1c', // bolya
+  '#9D9D9C', // epulet
+]
+
+export const yAxisTickFormatter = (value: number) => {
+  switch (value) {
+    case 0:
+      return '0 (rossz)'
+    case 1:
+      return '1 (gyenge)'
+    case 2:
+      return '2 (megfelelő)'
+    default:
+      return '3 (kiváló)'
+  }
+}