Superset二次开发之图表标题动态化

需求:图表标题动态展示原生筛选器的值


非编辑状态

分析前端代码,找到元素对应的class=header-title

通过class查找对应的代码,核心就是这个title

路径:superset-frontend\src\dashboard\components\SliceHeader\index.tsx

 SliceHeader组件负责处理仪表板上某个切片(slice)的头部信息,包括标题、交互控件和与过滤器相关的状态。要实现图表标题动态展示来自"NATIVE_FILTER"某个筛选器的值,我们需要从Redux store中获取相关数据,并将其应用到标题上。


编辑(仪表盘)状态

分析前端代码,,找到元素对应的class=editable-title

 通过class查找对应的代码,核心就是这个title


标题动态化规则:

       默认值?必填/非必填?动态变化?判断筛选器ID?依赖关系?

结论

     通用配置,做成筛选器组件

路径:superset-frontend\src\dashboard\components\SliceHeader\index.tsx

第一版

缺点:需要显示在标题上的筛选器只能配置在固定的位置,然后代码写死,取筛选器坐标位置,不够灵活

const crossFilterdataMaskValue = useSelector<RootState, any>(state => state.dataMask,);console.log('crossFilterdataMaskValue ',crossFilterdataMaskValue );const getValue = useSelector<RootState, FilterState>(state =>state.nativeFilters?.filters,);// const nativeFilterLabel = getValue[Object.keys(getValue)[0]].defaultDataMask?.filterState?.label const nativeFilterLabel = crossFilterdataMaskValue [Object.keys(crossFilterdataMaskValue)[1]].filterState?.label// const metricLabels = metrics.map(getMetricLabel);// const targetFilterDataMask = dataMaskState['emp_no'];// 合并 sliceName 和 nativeFilterLabelconst mergedTitle = useMemo(() => {if (nativeFilterLabel && sliceName) {return `${nativeFilterLabel} - ${sliceName} `;}return sliceName ?? '';}, [nativeFilterLabel, sliceName]);// 使用 useEffect 监听 native filter label 的变化并更新标题useEffect(() => {if (nativeFilterLabel !== undefined) {setHeaderTooltip(mergedTitle);}}, [mergedTitle]);
<EditableTitletitle={mergedTitle}canEdit={editMode}onSaveTitle={updateSliceName}showTooltip={false}url={canExplore ? exploreUrl : undefined}
/>

第二版

     做成原生筛选器通用配置

     优点:灵活

     缺点:仅支持单个筛选器的值显示在标题上

 superset\tra

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

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

相关文章

C++类与对象中(个人笔记)

类与对象中 类的6个默认成员函数1.构造函数1.1特性 2.析构函数2.1特性 3.拷贝构造函数3.1特性 4.赋值运算符重载4.1特性 5.日期类的实现6.const成员6.1const成员的几个问题 7.取地址及const取地址操作符重载 类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为…

异常的种类

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 Oracle 运行时错误可以分为 Oracle 错误和用户自定义错误&#xff0c;与此对应&#xff0c;根据异常产生的机制和原理&#xff0c;可将 Oracle 的系统异常分为 3 种 预定义…

Linux使用宝塔面板安装MySQL结合内网穿透实现公网连接本地数据库

文章目录 推荐前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不…

ssm034学生请假系统+jsp

学生请假系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生请假系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处…

uniapp:Hbuilder没有检测到设备请插入设备或启动模拟器的问题解决

问题 使用模拟器调试运行项目时&#xff0c;出现以下提示&#xff0c;“没有检测到设备&#xff0c;请插入设备或启动模拟器后点击刷新再试”。排查了一天最终找到原因。 解决 已确认模拟器是已经正常启动&#xff0c;并且Hbuilder设置中的adb路径和端口都配置没有问题&#…

【Unity添加远程桌面】使用Unity账号远程控制N台电脑

设置地址&#xff1a; URDP终极远程桌面&#xff1b;功能强大&#xff0c;足以让开发人员、设计师、建筑师、工程师等等随时随地完成工作或协助别人https://cloud-desktop.u3dcloud.cn/在网站登录自己的Unity 账号上去 下载安装被控端安装 保持登录 3.代码添加当前主机 "…

UE5、CesiumForUnreal实现建筑白模生长动画效果

文章目录 1.实现目标2.实现过程2.1 实现原理2.2 具体代码2.3 应用测试3.参考资料1.实现目标 在上篇文章加载本地建筑轮廓GeoJson数据生成建筑白模的基础上,本文通过材质“顶点偏移”实现建筑白模生长效果,GIF动图如下所示: 2.实现过程 常用的实现建筑生长效果的方式有两种,…

HTML - 请你谈一谈img标签图片和background背景图片的区别

难度级别:中级及以上 提问概率:65% 面试官当然不会问如何使用img标签或者background来加载一张图片,这些知识点都很基础,相信只要从事前端开发一小段时间以后,就可以轻松搞定加载图片的问题。但很多人习惯用img标签,很多人习惯用backgro…

css字体相关属性

属性汇总 属性作用font-family 设置文章字体 font-size 设置字体大小 font-weight设置字体粗细font-style设置字体斜体font总体设置以上属性 设置文章字体 font-family属性 案例&#xff1a; 设置字体大小 font-size属性 注意事项&#xff1a; 1.必须要加单位&#xff0…

转圈游戏——快速幂

目录 题目 思路 代码 题目 思路 每个小朋友移动一次的位置为&#xff0c;移动 q 次的位置则为。那么题目要求移动 &#xff0c;最后的位置为 。 但 的范围是&#xff0c;而总的移动次数是 。时间复杂度是在&#xff0c;因此是一定不能硬算的&#xff0c;肯定会超时。那么该…

uniapp选择退出到指定页面

方法一&#xff1a;返回上n层页面 onUnload(){uni.navigateBack({delta:5,//返回上5层})},方法二&#xff1a;关闭当前页面&#xff0c;跳转到应用内的某个页面。 uni.redirectTo({url: "../home/index"//页面地址}) 方法三&#xff1a;关闭所有页面&#xff0c;打…

淘宝销量API商品详情页原数据APP接口测试㊣

淘宝/天猫获得淘宝app商品详情原数据 API 返回值说明 item_get_app-获得淘宝app商品详情原数据 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地…

机器学习-随机森林算法预测温度

文章目录 算法简介解决问题获取数据集探索性数据分析查看数据集字段信息查看数据集综合统计结果查看特征值随时间变化趋势 数据预处理处理缺失数据字符列编码数据集分割训练集、验证集、测试集数据集分割 构建模型并训练结果分析与评估进一步优化实际使用经验总结 算法简介 随…

【STL】顺序容器与容器适配器

文章目录 1顺序容器概述1.1array1.2forward_list1.3deque 2.如何确定使用哪种顺序容器呢&#xff1f;3.容器适配器的概念4.如何定义适配器呢&#xff1f; 1顺序容器概述 给出以下顺序容器表&#xff1a; 顺序容器类型作用vector可变大小的数组&#xff0c;支持快速访问&#…

蓝桥杯 H整数删除

蓝桥杯 H整数删除 尝试代码未果&#xff1a;希望有题感之后能按照这个思路AC #include<algorithm> #include<iostream> #include<cstring> #include<queue> #include<cmath>using namespace std;int n,k; int a[10010]; int h[2],e[10010],ne[1…

JavaScript - 你能说出解决跨域的一些方案吗

难度级别:中高级及以上 提问概率:65% 回答解决跨域之前,首先建议求职者描述什么是跨域。跨域问题是浏览器基于同源策略引起的,同源策略是浏览器的一种安全功能。同源要保证域名相同,或是被访问服务的协议+主机+端口都相同,那么反之这些属…

PostgreSQL入门到实战-第四弹

PostgreSQL入门到实战 PostgreSQL查询语句(一)官网地址PostgreSQL概述查询语句概述查询语句实操更新计划 PostgreSQL查询语句(一) 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://www.postgresql.org/PostgreSQL概述…

HarmonyOS 应用开发-使用colorPicker实现背景跟随主题颜色转换

介绍 本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色&#xff0c;将获取的颜色作为背景渐变色&#xff0c;通过swiper组件对图片进行轮播&#xff0c; 效果图预览 使用说明 直接进入页面&#xff0c;对图片进行左右滑动&#xff0c;或者等待几秒&a…

SpringBoot整合MyBatis四种常用的分页方式

目录 方式1 一、准备工作 1. 创建表结构 2. 导入表数据 3. 导入pom.xml依赖 4. 配置application.yml文件 5. 创建公用的实体类 项目结构 2. 创建controller层 3. 创建service层 4. 创建mapper层 5. 创建xml文件 6. 使用postman进行测试&#xff0c;测试结果如下…

深入探索力扣第12题:整数转罗马数字的算法之旅

力扣&#xff08;LeetCode&#xff09;第12题“整数转罗马数字”提供了一个绝佳的学习机会&#xff0c;不仅让我们深入古罗马的数字系统&#xff0c;也锻炼了我们的编程技巧。一起看看其背后的逻辑。 罗马数字基础 罗马数字是一种古老的数字表示方法&#xff0c;广泛用于古罗…