Superset二次开发之筛选器native Filters 水平布局

引言

Apache Superset作为一个功能强大的开源数据探索和可视化平台,提供了丰富的配置选项来定制化用户体验。其中,HORIZONTAL_FILTER_BAR 是一个重要的配置项,专注于优化和改进Superset中的筛选器条布局与交互。

什么是HORIZONTAL_FILTER_BAR

HORIZONTAL_FILTER_BAR 是Superset中用于控制筛选器条(Filter Bar)水平布局的配置项。默认情况下,Superset的筛选器条是垂直排列的,即筛选器以列的形式堆叠在仪表板或图表的左侧或右侧。而当配置项 HORIZONTAL_FILTER_BAR 被启用时,筛选器条将以水平的方式显示在仪表板的顶部或底部,以更好地适应特定的布局需求和用户偏好。

效果展示

配置前

配置后

重点  "HORIZONTAL_FILTER_BAR": True,

FEATURE_FLAGS = {**FEATURE_FLAGS,"foo": "bar","KV_STORE": True,"SHARE_QUERIES_VIA_KV_STORE": True,"ENABLE_TEMPLATE_PROCESSING": True,"ALERT_REPORTS": True,"DASHBOARD_NATIVE_FILTERS": True,"DRILL_TO_DETAIL": True,"DRILL_BY": True,"HORIZONTAL_FILTER_BAR": True,
}

 

从技术角度来看,Superset 的 HORIZONTAL_FILTER_BAR 功能涉及几个关键组件和概念:

1. 前端组件和布局

  • FilterBox组件:这是一个主要的前端组件,用于显示和管理过滤器。HORIZONTAL_FILTER_BAR 实际上是对 FilterBox 组件布局的调整,从传统的垂直布局改为水平布局。

  • CSS 样式:水平过滤器栏的实现依赖于自定义的 CSS 样式。通过调整 FilterBox 组件的 CSS 属性,如 display, flex-direction, margin, 和 padding 等,可以实现水平排列过滤器。

  • 布局配置:在仪表板的JSON配置中,可以定义布局方式和组件排列。这需要开发人员在配置中明确指定使用水平过滤器栏。一个典型的配置可能包括调整过滤器组件的 positionsize 参数。

2. 过滤器的管理和交互

  • 状态管理:前端使用 Redux 或类似的状态管理库来管理过滤器的状态。用户在水平过滤器栏中选择或修改过滤器时,这些更改会更新 Redux 状态树,并触发相关的重新渲染或数据请求。

  • URL参数同步:Superset 通常通过 URL 参数来保持过滤器的状态,以便用户可以共享特定过滤条件下的仪表板视图。启用 HORIZONTAL_FILTER_BAR 后,过滤器的状态依然需要与 URL 参数同步,这需要对前端代码进行适当的调整和处理。

3. 后端逻辑和数据处理

  • 查询生成:当用户在水平过滤器栏中选择或更改过滤器时,Superset 的后端需要重新生成 SQL 查询。这涉及解析前端传来的过滤器条件,并将它们转换为数据库查询的一部分。

  • 数据缓存和优化:为提高性能,后端可能会对常见的过滤条件进行数据缓存。启用 HORIZONTAL_FILTER_BAR 后,可能会增加特定过滤组合的查询频率,因此需要有效的缓存策略来减少数据库压力。

4. 可扩展性和定制化

  • 插件机制:Superset 允许通过插件机制扩展和定制功能。如果需要进一步定制 HORIZONTAL_FILTER_BAR 的行为或样式,可以开发自定义插件。这些插件可以包括新的前端组件、定制的过滤器逻辑或新的数据处理方法。

  • API集成:在某些场景中,可能需要集成外部API来获取或处理过滤器数据。例如,如果过滤器涉及动态获取数据选项(如下拉列表),则可能需要与后端API交互来实时更新这些选项。

5. 安全性和权限控制

  • 基于角色的访问控制(RBAC):对于不同用户或角色,可能需要限制他们可以看到或使用的过滤器。例如,某些敏感数据的过滤器可能只对特定权限的用户开放。

  • 审计和日志记录:为了确保数据安全和系统稳定性,可以在后端记录用户使用 HORIZONTAL_FILTER_BAR 的操作日志,包括哪些过滤器被使用、何时使用等信息。这有助于在出现问题时进行追溯和分析。

总的来说,HORIZONTAL_FILTER_BAR 的实现需要前端和后端的协同工作,以及对性能、安全性和用户体验的综合考虑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875548.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费【2024】springboot stone音乐播放器的设计与实现

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

【数据库】数据库设计规范文件(Word)

方便业务功能实现、业务功能扩展;方便设计开发、增强系统的稳定性和可维护性;保证数据完整性和准确性;提高数据存储效率,在满足业务需求的前提下,使时间开销和空间开销达到优化平衡。资料获取:本文本个人名…

江科大/江协科技 STM32学习笔记P9-11

文章目录 OLED1、OLED硬件main.c EXTI外部中断1、中断系统2、中断执行流程图3、STM32中断4、中断地址的作用5、EXTI6、EXTI基本结构7、AFIO复用IO口8、EXTI框图或门和与门 9、旋转编码器介绍10、硬件电路 OLED 1、OLED硬件 SCL和SDA是I2C的通信引脚,需要接在单片机…

机器学习的运作原理和算法分类,让机器学习更加通俗易懂

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

微信扫码登陆验证在Go系统开发时的应用与实践

微信扫码登录实现 登录流程 总体来说,就是三步: 点击微信登录,跳转到微信页面微信扫码登录,确认登陆微信跳转回来 这里,我们就得,明确两个问题: 跳到微信界面,跳过去的 URL 是什…

异常处理和swagger使用

全局异常处理类 定义全局异常处理类,会将错误全部提交到这个异常处理类中进行处理,这个类会将处理的统一结果响应给前端,如果不添加异常处理类,异常不会按照统一的响应格式进行,前端无法识别,当然也可以在…

vue-快速入门

Vue 前端体系、前后端分离 1、概述 1.1、简介 Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,可以高效地开发用户界面。…

浏览器的最大并发数(http1.1)

HTTP/1.1:每个资源请求通常需要单独的TCP连接,尽管支持Keep-Alive机制,允许在同一个TCP连接上连续发送多个请求。但通常浏览器限制并发TCP连接数(例如,每个域名最多6个并发连接)。 HTTP/2:引入…

HarmonyOS三方库的使用

系统组件难以提供比较优秀的界面,需要第三方库来实现一些比较好看的界面效果 三方库的获取: 开源社区支持OpenHarmony-TPC 和 Openharmony三方库中心仓 先目前已经拥有各种各样的三方库,包括UI 图片 动画 网络 数据存储 工具类 多媒体 安全等…

leetcode 2236.判断根节点是否等于字节点

1.题目要求: 给你一个 二叉树 的根结点 root,该二叉树由恰好 3 个结点组成:根结点、左子结点和右子结点。如果根结点值等于两个子结点值之和,返回 true ,否则返回 false 。2.思路: 直接数组前序遍历,然后判断后面两个…

unity美术资源优化(资源冗余,主界面图集过多)

图片资源冗余: UPR unity的性能优化工具检查资源 1.检查纹理读/写标记 开启纹理资源的读/写标志会导致双倍的内存占用 检查Inspector -> Advanced -> Read/Write Enabled选项 2.检查纹理资源alpha通道 如果纹理的alpha通道全部为0,或者全部为2…

UEFI DebugLib 介绍

1.我们调试中常用Debug 打印信息,这些会输出到BIOS串口日志中 EFI_STATUSEFIAPIHelloWorld2(IN EFI_HANDLE ImageHandle,IN EFI_SYSTEM_TABLE *SystemTable){EFI_STATUS Status;StatusEFI_SUCCESS;gST->ConOut->OutputString(gST->ConOut,L&q…

【vluhub】zabbix漏洞

介绍: zabbix是对服务器资源状态例如、内存空间、CPU、程序运行状态进行检测、设置预警值、短信设置等功能等一款开源工具。配置不当存在未授权,SQL注入漏洞 弱口令 nameadmin&passwordzabbix nameguest&password POST /index.php HTTP/1.1 Host: 192.1…

Flex布局中元素主轴上平均分布 多余的向左对齐

content:父元素 content-item: 子元素 主轴上子元素平均分布 .content {display: flex;flex-wrap: wrap;justify-content: space-between;.service-item {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 80px;height:…

【C++】19.红黑树模拟实现 set 和 map

我们想要实现STL中的set和map,那么第一步就需要看一下库函数是如何实现的: 通过查看源代码我们发现两个容器都包含了stl_tree.h,因此我们猜测此头文件实现的是红黑树。 但是set和map很显然不是使用同一棵树实现的,那么STL库是怎么…

vue3 Axios封装使用

先安装axios: npm install axios 第一步:项目src下创建一个名为request的文件夹(看一下示例图): 然后在request下创建两个api.ts和index.ts的文件 api.ts里的内容:(url写你自己的接口&#xff…

Vscode——如何快速搜索项目工程中的某个文件的位置

第一步:按 shift ctrl p 第二步:然后把 > 删除 第三步:输入文件名称即可

飞书群聊机器人自定义机器人接入,并实现艾特@群成员功能

飞书群聊机器人还是比钉钉的要麻烦一点,钉钉的直接通过手机号就可以艾特群里面的人,但是飞书的要想艾特群里面的人,需要使用用户的 Open ID 或 User ID。这两个ID怎么获取呢?还需要在飞书的开放平台上创建一个应用,然后…

《Java初阶数据结构》----6.<优先级队列之PriorityQueue底层:堆>

前言 大家好,我目前在学习java。之前也学了一段时间,但是没有发布博客。时间过的真的很快。我会利用好这个暑假,来复习之前学过的内容,并整理好之前写过的博客进行发布。如果博客中有错误或者没有读懂的地方。热烈欢迎大家在评论区…

使用FileZilla Cilent快速让手机与电脑进行文件互传(无需生态)

目录 前言使用 FileZilla笔者的话 前言 当设备多的时候文件的传输就成了一种问题。 就比如说我想将手机上的文件传到电脑里面,因为我使用的电脑跟我的手机不是一个生态的,它们唯一的联系或许就是连接到了统一 WIFI 下,也就是说它们在同一个…