feat(plugin-chart-table): added emit target name (#1157)

* added emit target name * code review fix * code review fix * liting Co-authored-by: cccs-jc <cccs-jc@cyber.gc.ca>
apache · Nov 26, 2021 · 094f35f · 094f35f
1 parent ca44905
commit 094f35f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigControl.tsx b/...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigControl.tsx
@@ -32,6 +32,7 @@ export type ColumnConfigControlProps<T extends ColumnConfig> = ControlComponentP
   queryResponse?: ChartDataResponseResult;
   configFormLayout?: ColumnConfigFormLayout;
   appliedColumnNames?: string[];
+  emitFilter: boolean;
 };
 
 /**
@@ -48,8 +49,24 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
   value,
   onChange,
   configFormLayout = DEFAULT_CONFIG_FORM_LAYOUT,
+  emitFilter,
   ...props
 }: ColumnConfigControlProps<T>) {
+  if (emitFilter) {
+    Object.values(configFormLayout).forEach(array_of_array => {
+      if (!array_of_array.some(arr => arr.includes('emitTarget'))) {
+        array_of_array.push(['emitTarget']);
+      }
+    });
+  } else {
+    Object.values(configFormLayout).forEach(array_of_array => {
+      const index = array_of_array.findIndex(arr => arr.includes('emitTarget'));
+      if (index > -1) {
+        array_of_array.splice(index, 1);
+      }
+    });
+  }
+
   const { colnames: _colnames, coltypes: _coltypes } = queryResponse || {};
   let colnames: string[] = [];
   let coltypes: GenericDataType[] = [];

diff --git a/...perset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx b/...perset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
@@ -35,12 +35,24 @@ export type SharedColumnConfigProp =
   | 'colorPositiveNegative'
   | 'columnWidth'
   | 'fractionDigits'
+  | 'emitTarget'
   | 'd3NumberFormat'
   | 'd3SmallNumberFormat'
   | 'd3TimeFormat'
   | 'horizontalAlign'
   | 'showCellBars';
 
+const emitTarget: ControlFormItemSpec<'Input'> = {
+  controlType: 'Input',
+  label: t('Emit Target'),
+  description: t(
+    'If you wish to specify a different target column than the original column, it can be entered here',
+  ),
+  defaultValue: '',
+  debounceDelay: 500,
+  validators: undefined,
+};
+
 const d3NumberFormat: ControlFormItemSpec<'Select'> = {
   controlType: 'Select',
   label: t('D3 format'),
@@ -131,6 +143,7 @@ const colorPositiveNegative: ControlFormItemSpec<'Checkbox'> = {
  */
 export const SHARED_COLUMN_CONFIG_PROPS = {
   d3NumberFormat,
+  emitTarget,
   d3SmallNumberFormat: {
     ...d3NumberFormat,
     label: t('Small number format'),

diff --git a/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx b/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx
@@ -232,18 +232,24 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     [filters],
   );
 
+  function getEmitTarget(col: string) {
+    const meta = columnsMeta?.find(x => x.key === col);
+    return meta?.config?.emitTarget || col;
+  }
+
   const toggleFilter = useCallback(
     function toggleFilter(key: string, val: DataRecordValue) {
       let updatedFilters = { ...(filters || {}) };
-      if (filters && isActiveFilterValue(key, val)) {
+      const target = getEmitTarget(key);
+      if (filters && isActiveFilterValue(target, val)) {
         updatedFilters = {};
       } else {
         updatedFilters = {
-          [key]: [val],
+          [target]: [val],
         };
       }
-      if (Array.isArray(updatedFilters[key]) && updatedFilters[key].length === 0) {
-        delete updatedFilters[key];
+      if (Array.isArray(updatedFilters[target]) && updatedFilters[target].length === 0) {
+        delete updatedFilters[target];
       }
       handleChange(updatedFilters);
     },

diff --git a/...rontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/controlPanel.tsx b/...rontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/controlPanel.tsx
@@ -434,6 +434,7 @@ const config: ControlPanelConfig = {
               mapStateToProps(explore, control, chart) {
                 return {
                   queryResponse: chart?.queriesResponse?.[0] as ChartDataResponseResult | undefined,
+                  emitFilter: explore?.controls?.table_filter?.value,
                 };
               },
             },