fix: added formatting fixes for highlightedValue prop

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

@@ -20,18 +20,22 @@ const PROPS: AreaChartProps<typeof DATA[number]> = {
 }
 
 export const AreaChart = () => (
-  <div className="flex flex-row gap-4 flex-wrap">
+  <div className="flex flex-row gap-4 flex-wrap p-10">
     {[
       { title: 'Normal', props: {} },
       { title: 'No title', props: { title: undefined } },
       { title: 'Minimal Header', props: { minimalHeader: true } },
+      { title: 'Minimal Highlighted Value', props: { minimalHeader: true, highlightedValue: 123 } },
       { title: 'Highlighted Value', props: { highlightedValue: 123 } },
       { title: 'UTC Dates', props: { displayDateInUtc: true } },
-      { title: 'Custom date format', props: { customDateFormat: "HH:mm" } },
+      { title: 'Custom date format', props: { customDateFormat: 'HH:mm' } },
+      { title: 'No data', props: { data: [] } },
+      { title: 'Value format', props: { format: 'c' } },
+      { title: 'Minimal Value format', props: { minimalHeader: true, format: 'c' } },
     ].map(({ title, props }) => (
-      <div className="w-72">
+      <div className="w-72 h-72">
         <ExampleName>{title}</ExampleName>
-        <div className="w-full mt-4">
+        <div className="w-full h-full mt-4">
           <Chart {...PROPS} {...props} />
         </div>
       </div>

studio/components/ui/Charts/AreaChart.tsx

@@ -12,6 +12,7 @@ import { CHART_COLORS, DateTimeFormats } from 'components/ui/Charts/Charts.const
 import ChartHeader from './ChartHeader'
 import { Datum, CommonChartProps } from './Charts.types'
 import utc from 'dayjs/plugin/utc'
+import ChartNoData from './NoDataPlaceholder'
 dayjs.extend(utc)
 
 export interface AreaChartProps<D = Datum> extends CommonChartProps {
@@ -41,6 +42,8 @@ const AreaChart: React.FC<AreaChartProps> = ({
   // For future reference: https://github.com/supabase/supabase/pull/5311#discussion_r800852828
   const chartHeight = 160
 
+  if (data.length === 0) return <ChartNoData />
+
   const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
   const highlightedLabel =
     (focusDataIndex !== null &&

studio/components/ui/Charts/ChartHeader.tsx

@@ -35,7 +35,7 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
       <div className="flex flex-row items-center gap-x-4" style={{ minHeight: '1.8rem' }}>
         {chartTitle}
         <div className="flex flex-row items-baseline gap-x-2">
-          {highlighted}
+          {highlightedValue && highlighted}
           {label}
         </div>
       </div>
@@ -45,7 +45,7 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
   return (
     <div className="h-16">
       {chartTitle}
-      {highlighted}
+      {highlightedValue && highlighted}
       {label}
     </div>
   )

studio/components/ui/Charts/ChartNoData.tsx

@@ -1,22 +0,0 @@
-import { IconBarChart2 } from '@supabase/ui'
-
-const ChartNoData = ({
-  title = 'No data to show',
-  message = 'May take 24 hours for data to show',
-}) => (
-  <div
-    className="
-      border-scale-600 flex
-      h-full w-full flex-col
-      items-center justify-center space-y-2 border
-      border-dashed text-center
-    "
-  >
-    <IconBarChart2 className="text-scale-800" />
-    <div>
-      <p className="text-scale-1100 text-xs">{title}</p>
-      <p className="text-scale-900 text-xs">{message}</p>
-    </div>
-  </div>
-)
-export default ChartNoData

studio/components/ui/Charts/NoDataPlaceholder.tsx

@@ -0,0 +1,26 @@
+import { IconBarChart2 } from '@supabase/ui'
+
+interface Props {
+  title?: string
+  message?: string
+  className?: string
+}
+const NoDataPlaceholder: React.FC<Props> = ({
+  title = 'No data to show',
+  message,
+  className = '',
+}) => (
+  <div
+    className={
+      'border-scale-600 flex h-full w-full flex-col items-center justify-center space-y-2 border border-dashed text-center ' +
+      className
+    }
+  >
+    <IconBarChart2 className="text-scale-800" />
+    <div>
+      <p className="text-scale-1100 text-xs">{title}</p>
+      {message && <p className="text-scale-900 text-xs">{message}</p>}
+    </div>
+  </div>
+)
+export default NoDataPlaceholder