Superset二次开发之新增复选框Checkbox筛选器

一. 背景

Superset目前支持的筛选类型：值、数值范围、时间列、时间粒度、时间范围 5种类型，显然无法满足业务需求。根据产品需要，需要支持复选框、单选框、级联选择等类型的筛选器。本文探讨复选框、单选框的技术实现方式。

二. 效果预览

三. 实现思路

复用 '值' 筛选器模块，然后看板筛选器渲染时，修改为Checkbox 组件。

四. 前端逻辑

1. 新增复选框选项

1.1 新增CheckBox文件夹

目录 superset-frontend\src\filters\components，新增CheckBox 文件夹

1.2 注册插件

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

69行新增  CheckboxFilterPlugin, } from 'src/filters/components';

160行新增  new CheckboxFilterPlugin().configure({ key: 'filter_checkbox' }),

superset-frontend\src\dashboard\components\nativeFilters\FiltersConfigModal\FiltersConfigForm\FiltersConfigForm.tsx

FILTER_TYPE_NAME_MAPPING 参数新增

[t('Check Box')]:t('Check box'),

superset-frontend\src\filters\components\index.ts

export { default as CheckboxFilterPlugin } from './CheckBox';

superset-frontend\cypress-base\cypress\e2e\dashboard\utils.ts

exportconsttestItems = 的 filterType 新增

checkbox: 'Check box',

2. 国际化支持

superset\translations\en\LC_MESSAGES\messages.json

"Check box": [""],

superset\translations\en\LC_MESSAGES\messages.po

#:
msgid "Check box"
msgstr ""

superset\translations\zh\LC_MESSAGES\messages.json

"Check box": ["复选框"],

superset\translations\zh\LC_MESSAGES\messages.po

#:
msgid "Check box"
msgstr "复选框"

3.核心逻辑

superset-frontend\src\filters\components\CheckBox\buildQuery.ts

/*** Licensed to the Apache Software Foundation (ASF) under one* or more contributor license agreements.  See the NOTICE file* distributed with this work for additional information* regarding copyright ownership.  The ASF licenses this file* to you under the Apache License, Version 2.0 (the* "License"); you may not use this file except in compliance* with the License.  You may obtain a copy of the License at**   http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,* software distributed under the License is distributed on an* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY* KIND, either express or implied.  See the License for the* specific language governing permissions and limitations* under the License.*/
import {buildQueryContext,GenericDataType,getColumnLabel,isPhysicalColumn,QueryObject,QueryObjectFilterClause,BuildQuery,} from '@superset-ui/core';import { DEFAULT_FORM_DATA, PluginFilterCheckboxQueryFormData } from './types';// 构建查询函数，用于根据表单数据和选项生成查询对象。const buildQuery: BuildQuery<PluginFilterCheckboxQueryFormData> = (formData: PluginFilterCheckboxQueryFormData,options,) => {const { search, coltypeMap } = options?.ownState || {};const { sortAscending, sortMetric } = { ...DEFAULT_FORM_DATA, ...formData };// 使用 buildQueryContext 函数构建查询上下文，传入表单数据和基础查询对象。return buildQueryContext(formData, baseQueryObject => {const { columns = [], filters = [] } = baseQueryObject;// 初始化额外的过滤器数组。const extraFilters: QueryObjectFilterClause[] = [];if (search) {// 如果搜索字段不为空，则遍历列并添加额外的过滤器。columns.filter(isPhysicalColumn).forEach(column => {const label = getColumnLabel(column);if (coltypeMap[label] === GenericDataType.STRING ||(coltypeMap[label] === GenericDataType.NUMERIC &&!Number.isNaN(Number(search)))) {// 如果列的类型是字符串或数字，则添加一个 ILIKE 过滤器。    extraFilters.push({col: column,op: 'ILIKE',val: `%${search}%`,});}});}// 如果排序字段不为空，则将排序字段添加到排序列数组中。   const sortColumns = sortMetric ? [sortMetric] : columns;// 构建查询对象，包括基础查询对象、列、指标、过滤器和排序。const query: QueryObject[] = [{...baseQueryObject,columns,metrics: sortMetric ? [sortMetric] : [],filters: filters.concat(extraFilters),orderby:sortMetric || sortAscending !== undefined? sortColumns.map(column => [column, !!sortAscending]): [],},];return query;});};export default buildQuery;

superset-frontend\src\filters\components\CheckBox\CheckboxFilterPlugin.tsx

实现了复选框/单选按钮过滤器的主要逻辑和 UI

/*** Licensed to the Apache Software Foundation (ASF) under one* or more contributor license agreements.  See the NOTICE file* distributed with this work for additional information* regarding copyright ownership.  The ASF license