refactor: extract common functions

components/capacity/capacity.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
+import { useProportions } from '../utils/calculations'
 import { ZeitUIThemesPalette } from '../styles/themes'
 
 interface Props {
@@ -29,18 +30,7 @@ const Capacity: React.FC<CapacityProps> = React.memo(({
   value, limit, color: userColor, className, ...props
 }) => {
   const theme = useTheme()
-  const percentValue = useMemo<number>(() => {
-    const val = value / limit
-    const couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100
-    if (couldBeDecimalValue > 100) return 100
-    if (couldBeDecimalValue < 0) return 0
-    if (!`${couldBeDecimalValue}`.includes('.')) return couldBeDecimalValue
-    
-    const decimal = `${couldBeDecimalValue}`.split('.')[1]
-    if (decimal.length < 2) return couldBeDecimalValue
-    
-    return +couldBeDecimalValue.toFixed(2)
-  }, [value, limit])
+  const percentValue = useProportions(value, limit)
   const color = useMemo(() => {
     if (userColor && userColor !== '') return userColor
     return getColor(percentValue, theme.palette)

components/utils/calculations.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react'
+
+/**
+ * Calculate the ratio of two numbers, maximum decimal length can be specified.
+ *
+ * (0, 100) => 0
+ * (50, 100) => 50
+ * (11.22, 100) => 11.22
+ * (11.22, 100, 4) => 11.2200
+ */
+export const getProportions = (
+  value: number,
+  max: number,
+  maxFixed: number = 2,
+): number => {
+  const val = value / max
+  const couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100
+  if (couldBeDecimalValue > 100) return 100
+  if (couldBeDecimalValue < 0) return 0
+  if (!`${couldBeDecimalValue}`.includes('.')) return couldBeDecimalValue
+
+  const decimal = `${couldBeDecimalValue}`.split('.')[1]
+  if (decimal.length < maxFixed) return couldBeDecimalValue
+
+  return +couldBeDecimalValue.toFixed(maxFixed)
+}
+
+export const useProportions = (
+  value: number,
+  max: number,
+  maxFixed: number = 2,
+) => useMemo(
+  () => getProportions(value, max, maxFixed),
+  [value, max, maxFixed],
+)