fix: add number formatting to area chart as default number formatter

studio/components/ui/Charts/AreaChart.stories.tsx

@@ -27,6 +27,7 @@ export const AreaChart = () => (
       { title: 'Minimal Header', props: { minimalHeader: true } },
       { title: 'Minimal Highlighted Value', props: { minimalHeader: true, highlightedValue: 123 } },
       { title: 'Highlighted Value', props: { highlightedValue: 123, highlightedLabel: "some custom label" } },
+      { title: 'Formatter - Auto 2 Precision for floats', props: { data: DATA.map(d=> ({...d, ram_usage: d.ram_usage + 0.1231233})) } },
       { title: 'UTC Dates', props: { displayDateInUtc: true } },
       { title: 'Custom date format', props: { customDateFormat: 'HH:mm' } },
       { title: 'Value format', props: { format: 'c' } },

studio/components/ui/Charts/AreaChart.tsx

@@ -13,6 +13,7 @@ import ChartHeader from './ChartHeader'
 import { Datum, CommonChartProps } from './Charts.types'
 import utc from 'dayjs/plugin/utc'
 import ChartNoData from './NoDataPlaceholder'
+import { numberFormatter } from './Charts.utils'
 dayjs.extend(utc)
 
 export interface AreaChartProps<D = Datum> extends CommonChartProps<D> {
@@ -34,6 +35,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
   highlightedLabel,
   displayDateInUtc,
   minimalHeader,
+  className = '',
 }) => {
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
@@ -51,15 +53,19 @@ const AreaChart: React.FC<AreaChartProps> = ({
     highlightedLabel
 
   const resolvedHighlightedValue =
-     (focusDataIndex !== null ? data[focusDataIndex]?.[yAxisKey] : null) || highlightedValue
+    (focusDataIndex !== null ? data[focusDataIndex]?.[yAxisKey] : null) || highlightedValue
 
   return (
-    <>
+    <div className={['flex flex-col gap-3', className].join(' ')}>
       <ChartHeader
         title={title}
         format={format}
         customDateFormat={customDateFormat}
-        highlightedValue={resolvedHighlightedValue}
+        highlightedValue={
+          typeof resolvedHighlightedValue === 'number'
+            ? numberFormatter(resolvedHighlightedValue)
+            : resolvedHighlightedValue
+        }
         highlightedLabel={resolvedHighlightedLabel}
         minimalHeader={minimalHeader}
       />
@@ -113,7 +119,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
           <span>{dayjs(data[data?.length - 1]?.[xAxisKey]).format(customDateFormat)}</span>
         </div>
       )}
-    </>
+    </div>
   )
 }
 export default AreaChart

studio/components/ui/Charts/Charts.types.tsx

@@ -9,7 +9,8 @@ export interface CommonChartProps<D>
     | 'minimalHeader'
     | 'displayDateInUtc'
   > {
-  title?: string
+  title?: string;
+  className?: string
 }
 
 export type HeaderType<D> = {

studio/components/ui/Charts/Charts.utils.ts

@@ -0,0 +1,38 @@
+
+/**
+ * Auto formats a number to a default precision if it is a float
+ * 
+ * @example
+ * numberFormatter(123)       // "123"
+ * numberFormatter(123.123)   // "123.12"
+ * numberFormatter(123, 2)    // "123.00"
+ */
+export const numberFormatter = (num: number, precision = 2) => isFloat(num) ? precisionFormatter(num, precision) : String(num);
+
+
+/**
+ * Tests if a number is a float.
+ * 
+ * @example
+ * isFloat(123)     // false
+ * isFloat(123.123)     // true
+ */
+export const isFloat = (num: number) => String(num).includes(".")
+
+
+/**
+ * Formats a number to a particular precision.
+ * 
+ * @example
+ * precisionFormatter(123, 2)       // "123.00"
+ * precisionFormatter(123.123, 2)   // "123.12"
+ */
+export const precisionFormatter = (num: number, precision: number): string => {
+  if (isFloat(num)) {
+    const [head, tail] = String(num).split(".")
+    return head + "." + tail.slice(0, precision)
+  } else {
+    // pad int with 0
+    return String(num) + "." + ("0".repeat(precision))
+  }
+}

studio/tests/components/ui/Charts/Charts.utils.test.ts

@@ -0,0 +1,16 @@
+import { isFloat, numberFormatter, precisionFormatter } from "components/ui/Charts/Charts.utils"
+
+
+test("isFloat", () => {
+    expect(isFloat(123)).toBe(false)
+    expect(isFloat(123.123)).toBe(true)
+})
+test("numberFormatter", () => {
+    expect(numberFormatter(123)).toBe("123")
+    expect(numberFormatter(123.123)).toBe("123.12")
+})
+
+test("precisionFormatter", () => {
+    expect(precisionFormatter(123, 1)).toBe("123.0")
+    expect(precisionFormatter(123.12345, 4)).toBe("123.1234")
+})