[pull] master from supabase:master

apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx

@@ -126,19 +126,19 @@ export const ChartBlock = ({
 
   const getCellColor = (attribute: string, value: number) => {
     const threshold = METRIC_THRESHOLDS[attribute as keyof typeof METRIC_THRESHOLDS]
-    if (!threshold) return 'var(--chart-1)'
+    if (!threshold) return 'hsl(var(--chart-1))'
     if (threshold.check === 'gt') {
       return value >= threshold.danger
-        ? 'var(--chart-destructive)'
+        ? 'hsl(var(--chart-destructive))'
         : value >= threshold.warning
-          ? 'var(--chart-warning)'
-          : 'var(--chart-1)'
+          ? 'hsl(var(--chart-warning))'
+          : 'hsl(var(--chart-1))'
     } else {
       return value <= threshold.danger
-        ? 'var(--chart-destructive)'
+        ? 'hsl(var(--chart-destructive))'
         : value <= threshold.warning
-          ? 'var(--chart-warning)'
-          : 'var(--chart-1)'
+          ? 'hsl(var(--chart-warning))'
+          : 'hsl(var(--chart-1))'
     }
   }
 
@@ -286,7 +286,7 @@ export const ChartBlock = ({
                     />
                   }
                 />
-                <Line dataKey={metricLabel} stroke="var(--chart-1)" radius={4} />
+                <Line dataKey={metricLabel} stroke="hsl(var(--chart-1))" radius={4} />
               </LineChart>
             )}
           </ChartContainer>

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

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { Area, AreaChart as RechartAreaChart, Tooltip, XAxis } from 'recharts'
+import { useChartSync } from './useChartSync'
 
 import { CHART_COLORS, DateTimeFormats } from 'components/ui/Charts/Charts.constants'
 import ChartHeader from './ChartHeader'
@@ -14,6 +15,7 @@ export interface AreaChartProps<D = Datum> extends CommonChartProps<D> {
   format?: string
   customDateFormat?: string
   displayDateInUtc?: boolean
+  syncId?: string
 }
 
 const AreaChart = ({
@@ -30,8 +32,14 @@ const AreaChart = ({
   className = '',
   valuePrecision,
   size = 'normal',
+  syncId,
 }: AreaChartProps) => {
   const { Container } = useChartSize(size)
+  const {
+    state: syncState,
+    updateState: updateSyncState,
+    clearState: clearSyncState,
+  } = useChartSync(syncId)
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
   const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
@@ -70,6 +78,14 @@ const AreaChart = ({
         }
         highlightedLabel={resolvedHighlightedLabel}
         minimalHeader={minimalHeader}
+        syncId={syncId}
+        data={data}
+        xAxisKey={xAxisKey}
+        yAxisKey={yAxisKey}
+        xAxisIsDate={true}
+        displayDateInUtc={displayDateInUtc}
+        valuePrecision={valuePrecision}
+        attributes={[]}
       />
       <Container>
         <RechartAreaChart
@@ -81,13 +97,27 @@ const AreaChart = ({
             bottom: 0,
           }}
           className="overflow-visible"
-          //   mouse hover focusing logic
           onMouseMove={(e: any) => {
             if (e.activeTooltipIndex !== focusDataIndex) {
               setFocusDataIndex(e.activeTooltipIndex)
             }
+
+            if (syncId) {
+              updateSyncState({
+                activeIndex: e.activeTooltipIndex,
+                activePayload: e.activePayload,
+                activeLabel: e.activeLabel,
+                isHovering: true,
+              })
+            }
+          }}
+          onMouseLeave={() => {
+            setFocusDataIndex(null)
+
+            if (syncId) {
+              clearSyncState()
+            }
           }}
-          onMouseLeave={() => setFocusDataIndex(null)}
         >
           <defs>
             <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
@@ -105,7 +135,24 @@ const AreaChart = ({
             axisLine={{ stroke: CHART_COLORS.AXIS }}
             tickLine={{ stroke: CHART_COLORS.AXIS }}
           />
-          <Tooltip content={() => null} />
+          <Tooltip
+            content={(props) =>
+              syncId && syncState.isHovering && syncState.activeIndex !== null ? (
+                <div className="bg-black/90 text-white p-2 rounded text-xs">
+                  <div className="font-medium">
+                    {dayjs(data[syncState.activeIndex]?.[xAxisKey]).format(customDateFormat)}
+                  </div>
+                  <div>
+                    {numberFormatter(
+                      Number(data[syncState.activeIndex]?.[yAxisKey]) || 0,
+                      valuePrecision
+                    )}
+                    {format}
+                  </div>
+                </div>
+              ) : null
+            }
+          />
           <Area
             type="monotone"
             dataKey={yAxisKey}

apps/studio/components/ui/Charts/BarChart.tsx

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
 import { ComponentProps, useState, useMemo } from 'react'
+import { useChartSync } from './useChartSync'
 import {
   Bar,
   CartesianGrid,
@@ -30,6 +31,7 @@ export interface BarChartProps<D = Datum> extends CommonChartProps<D> {
   XAxisProps?: ComponentProps<typeof XAxis>
   YAxisProps?: ComponentProps<typeof YAxis>
   showGrid?: boolean
+  syncId?: string
 }
 
 const BarChart = ({
@@ -53,8 +55,14 @@ const BarChart = ({
   XAxisProps,
   YAxisProps,
   showGrid = false,
+  syncId,
 }: BarChartProps) => {
   const { Container } = useChartSize(size)
+  const {
+    state: syncState,
+    updateState: updateSyncState,
+    clearState: clearSyncState,
+  } = useChartSync(syncId)
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
   // Transform data to ensure yAxisKey values are numbers
@@ -125,20 +133,41 @@ const BarChart = ({
         }
         highlightedLabel={resolvedHighlightedLabel}
         minimalHeader={minimalHeader}
+        syncId={syncId}
+        data={data}
+        xAxisKey={xAxisKey}
+        yAxisKey={yAxisKey}
+        xAxisIsDate={xAxisIsDate}
+        displayDateInUtc={displayDateInUtc}
+        valuePrecision={valuePrecision}
+        attributes={[]}
       />
       <Container>
         <RechartBarChart
           data={transformedData}
           className="overflow-visible"
-          //   mouse hover focusing logic
           onMouseMove={(e: any) => {
             if (e.activeTooltipIndex !== focusDataIndex) {
               setFocusDataIndex(e.activeTooltipIndex)
             }
+
+            if (syncId) {
+              updateSyncState({
+                activeIndex: e.activeTooltipIndex,
+                activePayload: e.activePayload,
+                activeLabel: e.activeLabel,
+                isHovering: true,
+              })
+            }
+          }}
+          onMouseLeave={() => {
+            setFocusDataIndex(null)
+
+            if (syncId) {
+              clearSyncState()
+            }
           }}
-          onMouseLeave={() => setFocusDataIndex(null)}
           onClick={(tooltipData) => {
-            // receives tooltip data https://github.com/recharts/recharts/blob/2a3405ff64a0c050d2cf94c36f0beef738d9e9c2/src/chart/generateCategoricalChart.tsx
             const datum = tooltipData?.activePayload?.[0]?.payload
             if (onBarClick) onBarClick(datum, tooltipData)
           }}
@@ -157,12 +186,28 @@ const BarChart = ({
             tickLine={{ stroke: CHART_COLORS.AXIS }}
             key={xAxisKey}
           />
-          <Tooltip content={() => null} />
+          <Tooltip
+            content={(props) =>
+              syncId && syncState.isHovering && syncState.activeIndex !== null ? (
+                <div className="bg-black/90 text-white p-2 rounded text-xs">
+                  <div className="font-medium">
+                    {dayjs(data[syncState.activeIndex]?.[xAxisKey]).format(customDateFormat)}
+                  </div>
+                  <div>
+                    {numberFormatter(
+                      Number(data[syncState.activeIndex]?.[yAxisKey]) || 0,
+                      valuePrecision
+                    )}
+                    {typeof format === 'string' ? format : ''}
+                  </div>
+                </div>
+              ) : null
+            }
+          />
           <Bar
             dataKey={yAxisKey}
             fill={CHART_COLORS.GREEN_1}
             animationDuration={300}
-            // Max bar size required to prevent bars from expanding to max width.
             maxBarSize={48}
           >
             {data?.map((_entry: Datum, index: any) => (