feat(charts): add subtitle option and metric customization controls (#32975)

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx

@@ -34,7 +34,11 @@ import ControlHeader from '../../ControlHeader';
 
 export type ColumnConfigControlProps<T extends ColumnConfig> =
   ControlComponentProps<Record<string, T>> & {
-    columnsPropsObject?: { colnames: string[]; coltypes: GenericDataType[] };
+    columnsPropsObject?: {
+      colnames: string[];
+      coltypes: GenericDataType[];
+      childColumnMap?: Record<string, boolean>;
+    };
     configFormLayout?: ColumnConfigFormLayout;
     appliedColumnNames?: string[];
     width?: number | string;
@@ -82,10 +86,12 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
         name: COLUMN_NAME_ALIASES[col] || col,
         type: coltypes?.[idx],
         config: value?.[col] || {},
+        isChildColumn: columnsPropsObject?.childColumnMap?.[col] ?? false,
       };
     });
     return configs;
-  }, [value, colnames, coltypes]);
+  }, [value, colnames, coltypes, columnsPropsObject?.childColumnMap]);
+
   const [showAllColumns, setShowAllColumns] = useState(false);
 
   const getColumnInfo = (col: string) => columnConfigs[col] || {};
@@ -113,6 +119,8 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
       ? colnames.slice(0, MAX_NUM_COLS)
       : colnames;
 
+  const columnsWithChildInfo = cols.map(col => getColumnInfo(col));
+
   return (
     <>
       <ControlHeader {...props} />
@@ -122,12 +130,30 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
           borderRadius: theme.gridUnit,
         }}
       >
-        {cols.map(col => (
+        {columnsWithChildInfo.map(col => (
           <ColumnConfigItem
-            key={col}
-            column={getColumnInfo(col)}
-            onChange={config => setColumnConfig(col, config as T)}
-            configFormLayout={configFormLayout}
+            key={col.name}
+            column={col}
+            onChange={config => setColumnConfig(col.name, config as T)}
+            configFormLayout={
+              col.isChildColumn
+                ? ({
+                    [col.type ?? GenericDataType.String]: [
+                      {
+                        tab: 'General',
+                        children: [
+                          ['customColumnName'],
+                          ['displayTypeIcon'],
+                          ['visible'],
+                        ],
+                      },
+                      ...(configFormLayout?.[
+                        col.type ?? GenericDataType.String
+                      ] ?? []),
+                    ],
+                  } as ColumnConfigFormLayout)
+                : configFormLayout
+            }
             width={width}
             height={height}
           />