营销型网站有哪些出名的,商场设计软件,北京发布最新消息今天,做网站后端的全部步骤一. 背景 Superset目前支持的筛选类型：值、数值范围、时间列、时间粒度、时间范围 5种类型，显然无法满足业务需求。根据产品需要，需要支持复选框、单选框、级联选择等类型的筛选器。本文探讨复选框、单选框的技术实现方式。 二. 效果预览 三. 实现思路 复用 值 筛选器模块，…一. 背景 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: BuildQueryPluginFilterCheckboxQueryFormData = (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
