166. 精读《BI 搭建 - 筛选条件》

筛选条件是 BI 搭建的核心概念，我们大部分所说的探索式分析、图表联动也都属于筛选条件的范畴，其本质就是一个组件对另一个组件的数据查询起到筛选作用。

筛选组件是如何作用的

我们最常见的筛选条件就是表单场景的查询控件，如下图所示：

若干 “具有输出能力” 的组件作为筛选组件，点击查询按钮时触发其作用组件重新取数。

注意这里 “具有输出能力” 的组件不仅是输入框等具有输入性质的组件，其实所有具备交互能力的组件都可以，甚至可以由普通组件承担筛选触发的能力：

一个表格的表头点击也可以触发筛选行为，或者柱状图的一个柱子被点击都可以，只要进行到这层抽象，组件间联动本质也属于筛选行为。

同样重要的，筛选作用的组件也可以是具备输入能力的组件：

当目标组件是具备筛选能力组件时，这就是筛选联动场景了，所以 筛选联动也属于普通筛选行为。至于目标组件触发取数后，是否立即修改其筛选值，进而触发后续的筛选联动，就完全由业务特性决定了。

一个组件也可以自己联动自己筛选，比如折线图点击下钻的场景，就是自己触发了筛选，作用到自己的例子。

什么是筛选组件

任何组件都可以是筛选组件。

可能最容易理解的是输入框、下拉框、日期选择器等具备输入特征的组件，这些组件只能说天然适合作为筛选组件，但不代表系统设计要为这些组件特殊处理。

扩大想一想，其实普通的按钮、表格、折线图等等 具有展示属性的组件也具有输入特性的一面，比如按钮被点击时触发查询、单元格被点击时想查询当前城市的数据趋势、折线图某条线被点击时希望自身从年下钻到月等等。

所以 不存在筛选组件这概念，而是任何组件都具有筛选的能力，因此筛选是一种任何组件都具有的能力，而不局限在某几个组件上，一旦这么设计，可以做到以下几点：

1. 实现输入类组件到展示类组件的筛选，符合基本筛选诉求。

2. 实现展示类组件到展示类组件的筛选，属于图表联动图表的高级功能。

3. 实现输入类组件到输入类组件的筛选，属于筛选联动功能。

4. 实现组件自身到自身的筛选，实现下钻功能。

下面介绍 bi-designer 的筛选条件设计。

筛选条件设计

基于上述分析，bi-designer 在组件元信息中没有增加所谓的筛选组件类型，而是将其设定为一种筛选能力，任何组件都能触发。

如何触发筛选

组件调用 onFilterChange 即可完成筛选动作：

import { useDesigner } from "@alife/bi-designer";

const InputFilter = () => {
  const { onFilterChange } = useDesigner();

  return (
    <input onChange={(event) => () => onFilterChange(event.target.value)} />
  );