fix: X Axis should be called Y Axis when using the Bar Chart V2 on Ho…

…rizontal mode (apache#20659)
charan1314 · Jul 19, 2022 · b10d3a1 · b10d3a1
1 parent 4885588
commit b10d3a1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 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
@@ -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<ControlPanelState>,
@@ -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
@@ -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<T, O, V>[];

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -329,18 +329,35 @@ 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[];
     };
 
     const isVisible = visibility
       ? 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 (
       <Control
         key={`control-${name}`}
         name={name}
+        label={label}
+        description={description}
         validationErrors={validationErrors}
         actions={props.actions}
         isVisible={isVisible}

diff --git a/superset/translations/nl/LC_MESSAGES/messages.json b/superset/translations/nl/LC_MESSAGES/messages.json
@@ -2454,6 +2454,8 @@
       ],
       "X-axis": [""],
       "Dimension to use on x-axis.": [""],
+      "Y-axis": [""],
+      "Dimension to use on y-axis.": [""],
       "Percentage threshold": [""],
       "Minimum threshold in percentage points for showing labels.": [""],
       "Rich tooltip": [""],