feat: add filter chart

superset-frontend/package.json

@@ -93,6 +93,7 @@
     "@superset-ui/plugin-chart-table": "^0.15.13",
     "@superset-ui/plugin-chart-word-cloud": "^0.15.13",
     "@superset-ui/preset-chart-xy": "^0.15.13",
+    "@superset-ui/plugin-filter-antd": "^0.15.12",
     "@types/react-sticky": "^6.0.3",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",

superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled, t } from '@superset-ui/core';
-import React from 'react';
-import { Form, Input, Dropdown, Menu } from 'src/common/components';
+import { styled, SuperChart, t } from '@superset-ui/core';
+import React, { useState } from 'react';
+import { Form, Dropdown, Menu } from 'src/common/components';
 import Button from 'src/components/Button';
 import CreateFilterButton from './CreateFilterButton';
 import Icon from 'src/components/Icon';
@@ -30,6 +30,7 @@ import {
   useFilterState,
 } from './state';
 import { Filter } from './types';
+import { getChartDataRequest } from '../../../chart/chartAction';
 
 const Bar = styled.div`
   display: flex;
@@ -75,6 +76,37 @@ const FilterValue: React.FC<FilterProps> = ({ filter }) => {
   const { selectedValues } = useFilterState(filter.id);
   const setSelectedValues = useFilterSetter(filter.id);
 
+  const [state, setState] = useState({ data: undefined });
+
+  const formData = {
+    adhoc_filters: [],
+    datasource: `${filter.targets[0].datasetId}__table`,
+    extra_filters: [],
+    granularity_sqla: 'ds',
+    groupby: ['name'],
+    label_colors: {},
+    metrics: ['count'],
+    multiSelect: true,
+    row_limit: 10000,
+    showSearch: true,
+    slice_id: 10001,
+    time_range: 'No filter',
+    time_range_endpoints: ['inclusive', 'exclusive'],
+    url_params: {},
+    viz_type: 'filter_select',
+  };
+
+  if (!state.data)
+    getChartDataRequest({
+      formData,
+      force: false,
+      requestParams: { dashboardId: 0 },
+    }).then(response => {
+      setState({ data: response.result[0].data });
+    });
+
+  console.log('filter', filter);
+
   if (selectedValues) {
     return (
       <span>
@@ -92,7 +124,13 @@ const FilterValue: React.FC<FilterProps> = ({ filter }) => {
       }}
     >
       <Form.Item name="value">
-        <Input />
+        <SuperChart
+          height={20}
+          width={220}
+          formData={formData}
+          queryData={state}
+          chartType="filter_select"
+        />
       </Form.Item>
       <Button buttonSize="sm" buttonStyle="tertiary" type="submit">
         {t("Apply")}
@@ -111,27 +149,29 @@ const FilterControl: React.FC<FilterProps> = ({ filter }) => {
 };
 
 const menu = (
-    <Menu>
-      <Menu.Item>
-        Configure Filters
-      </Menu.Item>
-      <Menu.Item>
-        <CreateFilterButton>
-          {t('New Filter')}
-        </CreateFilterButton>
-      </Menu.Item>
-      {/* <Menu.Item>
+  <Menu>
+    <Menu.Item>
+      Configure Filters
+    </Menu.Item>
+    <Menu.Item>
+      <CreateFilterButton>
+        {t('New Filter')}
+      </CreateFilterButton>
+    </Menu.Item>
+    {/* <Menu.Item>
         <FilterScopeModal
           triggerNode={t('Bulk Scoping')}
         />
       </Menu.Item> */}
 
-    </Menu>
-  );
+  </Menu>
+);
 
 const FilterBar: React.FC = () => {
   const filterConfigs = useFilterConfigurations();
-  console.log('filterConfigs', filterConfigs)
+  // console.log('filterConfigs', filterConfigs);
+  const [filterState, setFilterState] = useState({});
+
   return (
     <Bar>
       <TitleArea>
@@ -153,7 +193,6 @@ const FilterBar: React.FC = () => {
           <FilterControl key={filter.id} filter={filter} />
         ))}
       </FilterControls>
-      
     </Bar>
   );
 };

superset-frontend/src/dashboard/containers/Chart.jsx

@@ -49,10 +49,11 @@ function mapStateToProps(
   ownProps,
 ) {
   const { id } = ownProps;
+
   const chart = chartQueries[id] || {};
   const { colorScheme, colorNamespace } = dashboardState;
 
-  return {
+  const abc = {
     chart,
     datasource:
       (chart && chart.form_data && datasources[chart.form_data.datasource]) ||
@@ -74,6 +75,7 @@ function mapStateToProps(
     supersetCanCSV: !!dashboardInfo.superset_can_csv,
     sliceCanEdit: !!dashboardInfo.slice_can_edit,
   };
+  return abc;
 }
 
 function mapDispatchToProps(dispatch) {

superset-frontend/src/dashboard/reducers/getInitialState.js

@@ -169,7 +169,7 @@ export default function getInitialState(bootstrapData) {
     }
 
     // build DashboardFilters for interactive filter features
-    if (slice.form_data.viz_type === 'filter_box') {
+    if (slice.form_data.viz_type === 'filter_box' || slice.form_data.viz_type === 'filter_select') {
       const configs = getFilterConfigsFromFormdata(slice.form_data);
       let { columns } = configs;
       const { labels } = configs;

superset-frontend/src/visualizations/presets/MainPreset.js

@@ -59,6 +59,7 @@ import {
   EchartsBoxPlotChartPlugin,
   EchartsTimeseriesChartPlugin,
 } from '@superset-ui/plugin-chart-echarts';
+import { AntdRangeFilterPlugin, AntdSelectFilterPlugin } from '@superset-ui/plugin-filter-antd';
 
 import FilterBoxChartPlugin from '../FilterBox/FilterBoxChartPlugin';
 import TimeTableChartPlugin from '../TimeTable/TimeTableChartPlugin';
@@ -108,6 +109,8 @@ export default class MainPreset extends Preset {
         new EchartsTimeseriesChartPlugin().configure({
           key: 'echarts_timeseries',
         }),
+        new AntdSelectFilterPlugin().configure({ key: 'filter_select' }),
+        new AntdRangeFilterPlugin().configure({ key: 'filter_range' }),
       ],
     });
   }