Adds Report Settings, Chart Header and Tooltip Sync features (supabase#37866)

* add charthover state hook

* update area and barchart

* update chart handler

* update chart header

* add report settings

* update stacked barchart

* update composedchart

* rm old components

* add tests

Author: jordienr

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

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { Area, AreaChart as RechartAreaChart, Tooltip, XAxis } from 'recharts'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 
 import { CHART_COLORS, DateTimeFormats } from 'components/ui/Charts/Charts.constants'
 import ChartHeader from './ChartHeader'
@@ -35,11 +35,9 @@ const AreaChart = ({
   syncId,
 }: AreaChartProps) => {
   const { Container } = useChartSize(size)
-  const {
-    state: syncState,
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
   const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
@@ -102,21 +100,12 @@ const AreaChart = ({
               setFocusDataIndex(e.activeTooltipIndex)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
           }}
           onMouseLeave={() => {
             setFocusDataIndex(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
         >
           <defs>
@@ -137,16 +126,13 @@ const AreaChart = ({
           />
           <Tooltip
             content={(props) =>
-              syncId && syncState.isHovering && syncState.activeIndex !== null ? (
+              syncId && syncTooltip && hoveredIndex !== null ? (
                 <div className="bg-black/90 text-white p-2 rounded text-xs">
                   <div className="font-medium">
-                    {dayjs(data[syncState.activeIndex]?.[xAxisKey]).format(customDateFormat)}
+                    {dayjs(data[hoveredIndex]?.[xAxisKey]).format(customDateFormat)}
                   </div>
                   <div>
-                    {numberFormatter(
-                      Number(data[syncState.activeIndex]?.[yAxisKey]) || 0,
-                      valuePrecision
-                    )}
+                    {numberFormatter(Number(data[hoveredIndex]?.[yAxisKey]) || 0, valuePrecision)}
                     {format}
                   </div>
                 </div>

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

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import { ComponentProps, useState, useMemo } from 'react'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import {
   Bar,
   CartesianGrid,
@@ -58,11 +58,9 @@ const BarChart = ({
   syncId,
 }: BarChartProps) => {
   const { Container } = useChartSize(size)
-  const {
-    state: syncState,
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
   // Transform data to ensure yAxisKey values are numbers
@@ -151,21 +149,12 @@ const BarChart = ({
               setFocusDataIndex(e.activeTooltipIndex)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
           }}
           onMouseLeave={() => {
             setFocusDataIndex(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
           onClick={(tooltipData) => {
             const datum = tooltipData?.activePayload?.[0]?.payload
@@ -188,16 +177,13 @@ const BarChart = ({
           />
           <Tooltip
             content={(props) =>
-              syncId && syncState.isHovering && syncState.activeIndex !== null ? (
+              syncId && syncTooltip && hoveredIndex !== null ? (
                 <div className="bg-black/90 text-white p-2 rounded text-xs">
                   <div className="font-medium">
-                    {dayjs(data[syncState.activeIndex]?.[xAxisKey]).format(customDateFormat)}
+                    {dayjs(data[hoveredIndex]?.[xAxisKey]).format(customDateFormat)}
                   </div>
                   <div>
-                    {numberFormatter(
-                      Number(data[syncState.activeIndex]?.[yAxisKey]) || 0,
-                      valuePrecision
-                    )}
+                    {numberFormatter(Number(data[hoveredIndex]?.[yAxisKey]) || 0, valuePrecision)}
                     {typeof format === 'string' ? format : ''}
                   </div>
                 </div>

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

@@ -33,6 +33,7 @@ interface ChartHandlerProps {
   isLoading?: boolean
   format?: string
   highlightedValue?: string | number
+  syncId?: string
 }
 
 /**
@@ -59,6 +60,7 @@ const ChartHandler = ({
   isLoading,
   format,
   highlightedValue,
+  syncId,
   ...otherProps
 }: PropsWithChildren<ChartHandlerProps>) => {
   const router = useRouter()
@@ -176,6 +178,7 @@ const ChartHandler = ({
           highlightedValue={_highlightedValue}
           title={label}
           customDateFormat={customDateFormat}
+          syncId={syncId}
           {...otherProps}
         />
       ) : (
@@ -187,6 +190,7 @@ const ChartHandler = ({
           highlightedValue={_highlightedValue}
           title={label}
           customDateFormat={customDateFormat}
+          syncId={syncId}
           {...otherProps}
         />
       )}

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

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { formatBytes } from 'lib/helpers'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import { numberFormatter } from './Charts.utils'
 
 export interface ChartHeaderProps {
@@ -58,7 +58,7 @@ const ChartHeader = ({
   isNetworkChart = false,
   attributes,
 }: ChartHeaderProps) => {
-  const { state: syncState } = useChartSync(syncId)
+  const { hoveredIndex, syncHover } = useChartHoverState(syncId || 'default')
   const [localHighlightedValue, setLocalHighlightedValue] = useState(highlightedValue)
   const [localHighlightedLabel, setLocalHighlightedLabel] = useState(highlightedLabel)
 
@@ -76,8 +76,8 @@ const ChartHeader = ({
   }
 
   useEffect(() => {
-    if (syncId && syncState.activeIndex !== null && data && xAxisKey && yAxisKey) {
-      const activeDataPoint = data[syncState.activeIndex]
+    if (syncId && hoveredIndex !== null && syncHover && data && xAxisKey && yAxisKey) {
+      const activeDataPoint = data[hoveredIndex]
       if (activeDataPoint) {
         // For stacked charts, we need to calculate the total of all attributes
         // that should be included in the total (excluding reference lines, max values, etc.)
@@ -127,7 +127,8 @@ const ChartHeader = ({
       setLocalHighlightedLabel(highlightedLabel)
     }
   }, [
-    syncState,
+    hoveredIndex,
+    syncHover,
     syncId,
     data,
     xAxisKey,

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

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { formatBytes } from 'lib/helpers'
 import { useTheme } from 'next-themes'
 import { ComponentProps, useEffect, useState } from 'react'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import {
   Area,
   Bar,
@@ -102,11 +102,9 @@ export default function ComposedChart({
   docsUrl,
 }: ComposedChartProps) {
   const { resolvedTheme } = useTheme()
-  const {
-    state: syncState,
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const [_activePayload, setActivePayload] = useState<any>(null)
   const [_showMaxValue, setShowMaxValue] = useState(showMaxValue)
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
@@ -339,14 +337,7 @@ export default function ComposedChart({
               setActivePayload(e.activePayload)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
 
             const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
             chartHighlight?.handleMouseMove({
@@ -367,9 +358,7 @@ export default function ComposedChart({
             setFocusDataIndex(null)
             setActivePayload(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
           onClick={(tooltipData) => {
             const datum = tooltipData?.activePayload?.[0]?.payload
@@ -404,7 +393,9 @@ export default function ComposedChart({
                   attributes={attributes}
                   valuePrecision={valuePrecision}
                   showTotal={showTotal}
-                  isActiveHoveredChart={isActiveHoveredChart || (!!syncId && syncState.isHovering)}
+                  isActiveHoveredChart={
+                    isActiveHoveredChart || (!!syncId && syncTooltip && hoveredIndex !== null)
+                  }
                 />
               ) : null
             }

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

@@ -0,0 +1,59 @@
+import { Settings } from 'lucide-react'
+import { useState } from 'react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Label_Shadcn_, Switch } from 'ui'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useChartHoverState } from './useChartHoverState'
+import { cn } from 'ui'
+
+interface ReportSettingsProps {
+  chartId: string
+}
+
+export const ReportSettings = ({ chartId }: ReportSettingsProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { syncHover, syncTooltip, setSyncHover, setSyncTooltip } = useChartHoverState(chartId)
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <ButtonTooltip
+          type="default"
+          icon={<Settings />}
+          className="w-7"
+          tooltip={{ content: { side: 'bottom', text: 'Report settings' } }}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" className="w-64 p-3">
+        <div className="space-y-4">
+          <Label_Shadcn_ htmlFor="sync-hover" className="text-sm font-normal">
+            <div className="flex items-center justify-between space-x-2">
+              Sync chart headers
+              <Switch id="sync-hover" checked={syncHover} onCheckedChange={setSyncHover} />
+            </div>
+            <p className="text-xs text-foreground-light mt-1">
+              When enabled, hovering over any chart will update headers across all charts
+            </p>
+          </Label_Shadcn_>
+
+          <Label_Shadcn_ htmlFor="sync-tooltips" className="text-sm font-normal flex flex-col">
+            <div className="flex items-center justify-between space-x-2">
+              Sync tooltips
+              <Switch
+                id="sync-tooltips"
+                checked={syncTooltip}
+                disabled={!syncHover}
+                onCheckedChange={setSyncTooltip}
+              />
+            </div>
+            <p className="text-xs text-foreground-light mt-1">
+              When enabled, also shows tooltips on all charts.{' '}
+              <span className={cn(syncHover ? 'text-foreground-light' : 'text-foreground')}>
+                Requires header sync.
+              </span>
+            </p>
+          </Label_Shadcn_>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Bar, BarChart, Cell, Legend, Tooltip, XAxis } from 'recharts'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import ChartHeader from './ChartHeader'
 import {
   CHART_COLORS,
@@ -58,11 +58,9 @@ const StackedBarChart: React.FC<Props> = ({
   syncId,
 }) => {
   const { Container } = useChartSize(size)
-  const {
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-    state: syncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const { dataKeys, stackedData, percentagesStackedData } = useStacked({
     data,
     xAxisKey,
@@ -125,21 +123,12 @@ const StackedBarChart: React.FC<Props> = ({
               setFocusDataIndex(e.activeTooltipIndex)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
           }}
           onMouseLeave={() => {
             setFocusDataIndex(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
         >
           {!hideLegend && (
@@ -205,7 +194,7 @@ const StackedBarChart: React.FC<Props> = ({
               fontSize: '12px',
             }}
             wrapperClassName="bg-gray-600 rounded min-w-md"
-            active={!!syncId && syncState.isHovering}
+            active={!!syncId && syncTooltip && hoveredIndex !== null}
           />
         </BarChart>
       </Container>