fix(my-pages-assets): chart fixes (#17289)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Dec 19, 2024 · 03ded57 · 03ded57
1 parent 492e678
commit 03ded57
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/libs/portals/my-pages/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageSubData.tsx b/libs/portals/my-pages/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageSubData.tsx
@@ -3,6 +3,7 @@ import {
   NestedFullTable,
   SimpleBarChart,
   formatDate,
+  numberFormat,
 } from '@island.is/portals/my-pages/core'
 import { Box, Text, Button } from '@island.is/island-ui/core'
 import { AssetsPaths } from '../../lib/paths'
@@ -137,6 +138,7 @@ export const VehicleBulkMileageSubData = ({
             labels: {
               mileage: formatMessage(vehicleMessage.odometer),
             },
+            valueFormat: (arg: number) => `${numberFormat(arg)} km`,
           }}
         />
       ) : undefined}

diff --git a/libs/portals/my-pages/core/src/components/Charts/SimpleBarChart/SimpleBarChart.tsx b/libs/portals/my-pages/core/src/components/Charts/SimpleBarChart/SimpleBarChart.tsx
@@ -21,6 +21,7 @@ import { theme } from '@island.is/island-ui/theme'
 interface Axis {
   label?: string
   datakey: string
+  valueFormat?: (arg: number) => string
 }
 
 interface BarType {
@@ -29,6 +30,7 @@ interface BarType {
 
 interface TooltipType {
   labels: Record<string, string>
+  valueFormat?: (arg: number) => string
 }
 
 interface GraphDataProps {
@@ -96,7 +98,12 @@ export const SimpleBarChart = ({
                 />
                 <YAxis stroke="#CCDFFF" tick={<CustomizedAxisTick />} />
                 <Tooltip
-                  content={<CustomTooltip valueLabels={tooltip?.labels} />}
+                  content={
+                    <CustomTooltip
+                      valueLabels={tooltip?.labels}
+                      valueFormat={tooltip?.valueFormat}
+                    />
+                  }
                 />
                 <Legend
                   iconType="circle"

diff --git a/libs/portals/my-pages/core/src/components/Charts/sharedChartComponents.tsx b/libs/portals/my-pages/core/src/components/Charts/sharedChartComponents.tsx
@@ -3,42 +3,54 @@ import * as styles from './charts.css'
 import cn from 'classnames'
 import { LegendProps, TooltipProps } from 'recharts'
 import { Box, Text } from '@island.is/island-ui/core'
+import { isDefined } from '@island.is/shared/utils'
 
 interface AxisTickProps {
   x?: number
   y?: number
   className?: string
   payload?: { value: string }
+  valueFormat?: (arg: number) => string
 }
 
 interface CustomTooltipProps extends TooltipProps<number, string> {
   valueLabels?: Record<string, string>
+  valueFormat?: (arg: number) => string
 }
 
 export const CustomTooltip = ({
   payload,
   active,
   label,
   valueLabels,
+  valueFormat,
 }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <Box className={cn(styles.tooltip)}>
         <Text variant="small">{label}</Text>
-        {payload.map((item, index) => (
-          <Box as="li" className={cn(styles.list)} key={`item-${index}`}>
-            <div
-              className={cn(styles.dot)}
-              style={{
-                border: '3px solid ' + item.color,
-              }}
-            />
-            <Text variant="small">
-              {valueLabels && item.name ? valueLabels[item.name] : item.name} :
-              {item.value}
-            </Text>
-          </Box>
-        ))}
+        {payload
+          .map((item, index) => {
+            if (!item.value) return null
+
+            return (
+              <Box as="li" className={cn(styles.list)} key={`item-${index}`}>
+                <div
+                  className={cn(styles.dot)}
+                  style={{
+                    border: '3px solid ' + item.color,
+                  }}
+                />
+                <Text variant="small">
+                  {valueLabels && item.dataKey
+                    ? valueLabels[item.dataKey]
+                    : item.name}
+                  : {valueFormat ? valueFormat(item.value) : item.value}
+                </Text>
+              </Box>
+            )
+          })
+          .filter(isDefined)}
       </Box>
     )
   }