fix(support): sort the insight tooltip values by their row index when…

… displaying th… (#18657) * Sort the insight tooltip values by their row index when displaying the data * Use the action order if it exists
PostHog · Nov 15, 2023 · 3577c28 · 3577c28
1 parent 6676a1d
commit 3577c28
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.tsx b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.tsx
@@ -54,14 +54,12 @@ function renderDatumToTableCell(
     // Value can be undefined if the datum's series doesn't have ANY value for the breakdown value being rendered
     return (
         <div className="series-data-cell">
-            {
-                color && (
-                    // eslint-disable-next-line react/forbid-dom-props
-                    <span className="mr-2" style={{ color }}>
-                        ●
-                    </span>
-                ) /* eslint-disable-line react/forbid-dom-props */
-            }
+            {color && (
+                // eslint-disable-next-line react/forbid-dom-props
+                <span className="mr-2" style={{ color }}>
+                    ●
+                </span>
+            )}
             {datumValue !== undefined
                 ? formatAggregationValue(datumMathProperty, datumValue, renderCount, formatPropertyValueForDisplay)
                 : '–'}
@@ -156,7 +154,7 @@ export function InsightTooltip({
                             seriesColumnData?.count,
                             formatPropertyValueForDisplay,
                             renderCount,
-                            seriesColumnData.color
+                            seriesColumnData?.color
                         )
                     },
                 })

diff --git a/frontend/src/scenes/insights/InsightTooltip/insightTooltipUtils.tsx b/frontend/src/scenes/insights/InsightTooltip/insightTooltipUtils.tsx
@@ -128,6 +128,9 @@ export function invertDataSource(seriesData: SeriesDatum[]): InvertedSeriesDatum
         const datumKey = `${s.breakdown_value}-${s.compare_label}`
         if (datumKey in flattenedData) {
             flattenedData[datumKey].seriesData.push(s)
+            flattenedData[datumKey].seriesData = flattenedData[datumKey].seriesData.sort(
+                (a, b) => (b.action?.order ?? b.dataIndex) - (a.action?.order ?? a.dataIndex)
+            )
         } else {
             flattenedData[datumKey] = {
                 id: datumKey,