diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx index 5d91e1e867730..aeca448a78211 100644 --- 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: () => }] : []), ...(supportsPercentStackView ? [{ label: () => }] : []), ...(hasLegend ? [{ label: () => }] : []), - ...(isTrends ? [{ label: () => }] : []), ], }, ] @@ -87,6 +87,14 @@ export function InsightDisplayConfig(): JSX.Element { }, ] : []), + ...(!isNonTimeSeriesDisplay && isTrends + ? [ + { + title: 'Y-axis scale', + items: [{ label: () => }], + }, + ] + : []), ...(mightContainFractionalNumbers && isTrends ? [ { diff --git a/frontend/src/scenes/insights/EditorFilters/ScalePicker.tsx b/frontend/src/scenes/insights/EditorFilters/ScalePicker.tsx new file mode 100644 index 0000000000000..9b8cb55a3272b --- /dev/null +++ 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 ( + 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 deleted file mode 100644 index 81a63fd9ed89f..0000000000000 --- a/frontend/src/scenes/insights/EditorFilters/YAxisScaleSettings.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { LemonCheckbox } from '@posthog/lemon-ui' -import { useActions, useValues } from 'kea' -import { insightLogic } from 'scenes/insights/insightLogic' - -import { insightVizDataLogic } from '../insightVizDataLogic' - -export function YAxisScaleSettings(): JSX.Element | null { - const { insightProps } = useValues(insightLogic) - const { yAxisScaleType } = useValues(insightVizDataLogic(insightProps)) - const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps)) - - return ( - updateInsightFilter({ yAxisScaleType: checked ? 'log10' : 'linear' })} - checked={yAxisScaleType === 'log10'} - label={Log scale} - size="small" - /> - ) -} diff --git a/frontend/src/scenes/insights/aggregationAxisFormat.ts b/frontend/src/scenes/insights/aggregationAxisFormat.ts index e8c3babba69d9..b0a294d344f58 100644 --- 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'