refactor(product-analytics): lineGraphLogic.ts to tooltip-data.ts

frontend/src/queries/nodes/DataTable/renderColumn.tsx

@@ -83,7 +83,10 @@ export function renderColumn(
                         object[value[i]] = value[i + 1]
                     }
                     if ('results' in object && Array.isArray(object.results)) {
-                        return <Sparkline data={object.results} />
+                        // TODO: If results aren't an array of numbers, show a helpful message on using sparkline()
+                        return <Sparkline data={[{
+                            name: key.includes('__hogql_chart_type') ? 'Data' : key , values: object.results.map((v: any) => Number(v))
+                         }]} />
                     }
                 }
 

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -31,8 +31,8 @@ import { insightLogic } from 'scenes/insights/insightLogic'
 import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
 import { TooltipConfig } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { lineGraphLogic } from 'scenes/insights/views/LineGraph/lineGraphLogic'
 import { PieChart } from 'scenes/insights/views/LineGraph/PieChart'
+import { createTooltipData } from 'scenes/insights/views/LineGraph/tooltip-data'
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
@@ -278,8 +278,6 @@ export function LineGraph_({
     const { insightProps, insight } = useValues(insightLogic)
     const { timezone, isTrends } = useValues(insightVizDataLogic(insightProps))
 
-    const { createTooltipData } = useValues(lineGraphLogic)
-
     const canvasRef = useRef<HTMLCanvasElement | null>(null)
     const [myLineChart, setMyLineChart] = useState<Chart<ChartType, any, string>>()
 
@@ -477,6 +475,7 @@ export function LineGraph_({
 
                             tooltipRoot.render(
                                 <InsightTooltip
+
                                     date={dataset?.days?.[tooltip.dataPoints?.[0]?.dataIndex]}
                                     timezone={timezone}
                                     seriesData={seriesData}

frontend/src/scenes/insights/views/LineGraph/PieChart.tsx

@@ -26,7 +26,7 @@ import {
     onChartClick,
     onChartHover,
 } from 'scenes/insights/views/LineGraph/LineGraph'
-import { lineGraphLogic } from 'scenes/insights/views/LineGraph/lineGraphLogic'
+import { createTooltipData } from 'scenes/insights/views/LineGraph/tooltip-data'
 
 import { areObjectValuesEmpty } from '~/lib/utils'
 import { groupsModel } from '~/models/groupsModel'
@@ -84,7 +84,6 @@ export function PieChart({
 
     let datasets = _datasets
 
-    const { createTooltipData } = useValues(lineGraphLogic)
     const { aggregationLabel } = useValues(groupsModel)
     const { highlightSeries } = useActions(insightLogic)
     const canvasRef = useRef<HTMLCanvasElement | null>(null)
@@ -216,6 +215,7 @@ export function PieChart({
 
                                 tooltipRoot.render(
                                     <InsightTooltip
+
                                         seriesData={seriesData}
                                         hideColorCol={!!tooltipConfig?.hideColorCol}
                                         showHeader={false}

frontend/src/scenes/insights/views/LineGraph/tooltip-data.ts

@@ -0,0 +1,47 @@
+import { TooltipItem } from 'chart.js'
+import { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
+
+import { GraphDataset } from '~/types'
+
+export function createTooltipData(
+    tooltipDataPoints: TooltipItem<any>[],
+    filterFn?: (s: SeriesDatum) => boolean
+): SeriesDatum[] {
+    if (!tooltipDataPoints) {
+        return []
+    }
+    let data = tooltipDataPoints
+        .map((dp, idx) => {
+            const pointDataset = (dp?.dataset ?? {}) as GraphDataset
+            return {
+                id: idx,
+                dataIndex: dp.dataIndex,
+                datasetIndex: dp.datasetIndex,
+                dotted: !!pointDataset?.dotted,
+                breakdown_value:
+                    pointDataset?.breakdown_value ?? pointDataset?.breakdownValues?.[dp.dataIndex] ?? undefined,
+                compare_label: pointDataset?.compare_label ?? pointDataset?.compareLabels?.[dp.dataIndex] ?? undefined,
+                action: pointDataset?.action ?? pointDataset?.actions?.[dp.dataIndex] ?? undefined,
+                label: pointDataset?.label ?? pointDataset.labels?.[dp.dataIndex] ?? undefined,
+                color: Array.isArray(pointDataset.borderColor)
+                    ? pointDataset.borderColor?.[dp.dataIndex]
+                    : pointDataset.borderColor,
+                count: pointDataset?.data?.[dp.dataIndex] || 0,
+                filter: pointDataset?.filter ?? {},
+            }
+        })
+        .sort((a, b) => {
+            // Sort by descending order and fallback on alphabetic sort
+            return (
+                b.count - a.count ||
+                (a.label === undefined || b.label === undefined ? -1 : a.label.localeCompare(b.label))
+            )
+        })
+    if (filterFn) {
+        data = data.filter(filterFn)
+    }
+    return data.map((s, id) => ({
+            ...s,
+            id,
+        }))
+}