建设网站的公司广州南宁网站建设优化服务
一. 背景
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