Turn the scale picker into a segmented button

PostHog · Jun 19, 2024 · 87b7a7b · 87b7a7b
1 parent c85d199
commit 87b7a7b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -13,9 +13,9 @@ import { ReactNode } from 'react'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { axisLabel } from 'scenes/insights/aggregationAxisFormat'
 import { PercentStackViewFilter } from 'scenes/insights/EditorFilters/PercentStackViewFilter'
+import { ScalePicker } from 'scenes/insights/EditorFilters/ScalePicker'
 import { ShowLegendFilter } from 'scenes/insights/EditorFilters/ShowLegendFilter'
 import { ValueOnSeriesFilter } from 'scenes/insights/EditorFilters/ValueOnSeriesFilter'
-import { YAxisScaleSettings } from 'scenes/insights/EditorFilters/YAxisScaleSettings'
 import { InsightDateFilter } from 'scenes/insights/filters/InsightDateFilter'
 import { RetentionMeanCheckbox } from 'scenes/insights/filters/RetentionMeanCheckbox'
 import { RetentionReferencePicker } from 'scenes/insights/filters/RetentionReferencePicker'
@@ -50,6 +50,7 @@ export function InsightDisplayConfig(): JSX.Element {
         showPercentStackView,
         supportsPercentStackView,
         yAxisScaleType,
+        isNonTimeSeriesDisplay,
     } = useValues(insightVizDataLogic(insightProps))
     const { isTrendsFunnel, isStepsFunnel, isTimeToConvertFunnel, isEmptyFunnel } = useValues(
         funnelDataLogic(insightProps)
@@ -74,7 +75,6 @@ export function InsightDisplayConfig(): JSX.Element {
                           ...(supportsValueOnSeries ? [{ label: () => <ValueOnSeriesFilter /> }] : []),
                           ...(supportsPercentStackView ? [{ label: () => <PercentStackViewFilter /> }] : []),
                           ...(hasLegend ? [{ label: () => <ShowLegendFilter /> }] : []),
-                          ...(isTrends ? [{ label: () => <YAxisScaleSettings /> }] : []),
                       ],
                   },
               ]
@@ -87,6 +87,14 @@ export function InsightDisplayConfig(): JSX.Element {
                   },
               ]
             : []),
+        ...(!isNonTimeSeriesDisplay && isTrends
+            ? [
+                  {
+                      title: 'Y-axis scale',
+                      items: [{ label: () => <ScalePicker /> }],
+                  },
+              ]
+            : []),
         ...(mightContainFractionalNumbers && isTrends
             ? [
                   {

diff --git a/frontend/src/scenes/insights/EditorFilters/ScalePicker.tsx b/frontend/src/scenes/insights/EditorFilters/ScalePicker.tsx
@@ -0,0 +1,25 @@
+import { LemonSegmentedButton } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { insightVizDataLogic } from '../insightVizDataLogic'
+
+export function ScalePicker(): JSX.Element | null {
+    const { insightProps } = useValues(insightLogic)
+    const { yAxisScaleType } = useValues(insightVizDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
+
+    return (
+        <LemonSegmentedButton
+            className="pb-2 px-2"
+            onChange={(value) => updateInsightFilter({ yAxisScaleType: value })}
+            value={yAxisScaleType || 'linear'}
+            options={[
+                { value: 'linear', label: 'Linear' },
+                { value: 'log10', label: 'Logarithmic' },
+            ]}
+            size="small"
+            fullWidth
+        />
+    )
+}
diff --git a/frontend/src/scenes/insights/EditorFilters/YAxisScaleSettings.tsx b/frontend/src/scenes/insights/EditorFilters/YAxisScaleSettings.tsx
diff --git a/frontend/src/scenes/insights/aggregationAxisFormat.ts b/frontend/src/scenes/insights/aggregationAxisFormat.ts
@@ -73,6 +73,7 @@ export const axisLabel = (chartDisplayType: ChartDisplayType | null | undefined)
         case ChartDisplayType.ActionsLineGraph:
         case ChartDisplayType.ActionsLineGraphCumulative:
         case ChartDisplayType.ActionsBar:
+        case ChartDisplayType.ActionsAreaGraph:
             return 'Y-axis unit'
         case ChartDisplayType.ActionsBarValue:
             return 'X-axis unit'