From 49efecf0936ae11055cad17a04950f84ca447937 Mon Sep 17 00:00:00 2001 From: Diego Medina Date: Fri, 8 Jul 2022 17:50:16 -0300 Subject: [PATCH] fix: X Axis should be called Y Axis when using the Bar Chart V2 on Horizontal mode --- .../src/shared-controls/constants.tsx | 22 +++++++++++++++++-- .../superset-ui-chart-controls/src/types.ts | 18 +++++++++++++-- .../components/ControlPanelsContainer.tsx | 19 +++++++++++++++- .../translations/nl/LC_MESSAGES/messages.json | 2 ++ 4 files changed, 56 insertions(+), 5 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx index d8a80f8af2bf9..cdd07f15e0930 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx @@ -25,7 +25,16 @@ import { import { ControlPanelState, ControlState } from '../types'; export const xAxisControlConfig = { - label: t('X-axis'), + label: (state: ControlPanelState) => { + if ( + isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && + state?.form_data?.orientation === 'horizontal' + ) { + return t('Y-axis'); + } + + return t('X-axis'); + }, default: ( control: ControlState, controlPanel: Partial, @@ -43,6 +52,15 @@ export const xAxisControlConfig = { return null; }, multi: false, - description: t('Dimension to use on x-axis.'), + description: (state: ControlPanelState) => { + if ( + isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && + state?.form_data?.orientation === 'horizontal' + ) { + return t('Dimension to use on y-axis.'); + } + + return t('Dimension to use on x-axis.'); + }, validators: [validateNonEmpty], }; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts index 5ae2f26c4f776..9c3a110fe4748 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts @@ -204,8 +204,22 @@ export interface BaseControlConfig< V = JsonValue, > extends AnyDict { type: T; - label?: ReactNode; - description?: ReactNode; + label?: + | ReactNode + | (( + state: ControlPanelState, + controlState: ControlState, + // TODO: add strict `chartState` typing (see superset-frontend/src/explore/types) + chartState?: AnyDict, + ) => ReactNode); + description?: + | ReactNode + | (( + state: ControlPanelState, + controlState: ControlState, + // TODO: add strict `chartState` typing (see superset-frontend/src/explore/types) + chartState?: AnyDict, + ) => ReactNode); default?: V; renderTrigger?: boolean; validators?: ControlValueValidator[]; diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index 144ea3cc7b374..e1e1b6e40c270 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -329,7 +329,12 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => { undefined), name, }; - const { validationErrors, ...restProps } = controlData as ControlState & { + const { + validationErrors, + label: baseLabel, + description: baseDescription, + ...restProps + } = controlData as ControlState & { validationErrors?: any[]; }; @@ -337,10 +342,22 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => { ? visibility.call(config, props, controlData) : undefined; + const label = + typeof baseLabel === 'function' + ? baseLabel(exploreState, controls[name], chart) + : baseLabel; + + const description = + typeof baseDescription === 'function' + ? baseDescription(exploreState, controls[name], chart) + : baseDescription; + return (