###
Superset 中实现 Cross
-filtering 功能的
二次开发
在 Apache
Superset 中，通过自定义
JavaScript 和
Python 后端逻辑可以实现跨过滤（Cross
-filtering）功能。此过程涉及前端和后端两部分的工作。
#### 前端修改
为了实现在不同
图表之间共享筛选条件的功能，在前端需要监听特定事件并传播这些事件到其他组件。这通常涉及到对现有 React 组件树中的 `FilterBox` 或者任何用于输入筛选器值的小部件进行扩展[^
1]：
```
javascript
// src/explore/components/controls/FiltersControl
.jsx
import React from &#
39;react&#
39;;
import PropTypes from &#
39;prop
-types&#
39;;
class FiltersControl extends React
.PureComponent {
handleApplyFilters =
() => {
const { filters } = this
.state;
// 发布全局事件以便其他组件订阅
window
.dispatchEvent
(
new CustomEvent
(&#
39;applyGlobalFilters&#
39;, { detail: filters }
)
);
}
render
() {
return
(
<div>
{/* 渲染过滤表单 */}
<button onClick={this
.handleApplyFilters}>应用</button>
</div>
)
}
}
export default FiltersControl;
```
为了让其他可视化组件能够响应这个新的全局事件，可以在各个视图组件内添加相应的侦听器：
```
javascript
componentDidMount
() {
window
.addEventListener
(&#
39;applyGlobalFilters&#
39;, this
.onGlobalFiltersApplied
);
}
onGlobalFiltersApplied
(event
) {
const appliedFilters = event
.detail;
// 更新当前组件的状态或者其他操作来反映新设置好的过滤参数
this
.setState
({
... }
);
}
```
#### 后端支持
对于某些复杂场景下可能还需要调整服务器端 API 来处理来自客户端的新请求模式。例如当用户选择了多个维度作为联合查询条件时，则需确保 SQL 查询构建器能正确解析并执行多维联接查询[^2]:
```
python
from
superset.connectors
.sqla
.models import SqlMetric,
TableColumn
from sqlalchemy
.orm
.session import Session as SASession
def apply_cross_filters
(query_obj, filter_values
):
"""根据传入的交叉筛选条件动态修改SQLAlchemy ORM查询"""
session: SASession
for column_name, value_list in filter_values
.items
():
table_column:
TableColumn = query_obj
.datasource
.get_column
(column_name
)
if not
table_column or not isinstance
(value_list, list
):
continue
# 构建IN子句
clause =
table_column
.column
.in_
(value_list
)
# 将条件附加到原始查询上
query_obj
.having_criteria
.append
(clause
)
# 修改后的视图函数片段
@csrf
.exempt
@app
.route
(&#
39;/api/v
1/chart/<chart_id>/data&#
39;
)
def get_chart_data
(chart_id=None
):
...
cross_filter_params = request
.args
.getlist
(&#
39;crossFilters[]&#
39;
)
try:
parsed_filters = json
.loads
(cross_filter_params[0]
) if cross_filter_params else {}
apply_cross_filters
(form
.query_obj
(), parsed_filters
)
except Exception as e:
logging
.error
(f&#
39;Failed to parse cross
-filters params: {e}&#
39;
)
abort
(400, "Invalid cross
-filters parameters"
)
result = form
.get_df
()
...
return jsonify
({&#
39;result&#
39;: result}
)
```
最低0.47元/天 解锁文章
扫一扫
554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
