Superset二次开发之XAxis 功能优化

背景:

以柱状图(来自Echarts 插件)为例,如果X轴data数据过长,影响图表体验,为此需要省略部分内容

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\transformProps.ts

import {getBaselineSeriesForStream,getPadding,getTooltipTimeFormatter,getXAxisFormatter,getXAxisEllipsisFormatter,transformEventAnnotation,transformFormulaAnnotation,transformIntervalAnnotation,transformSeries,transformTimeseriesAnnotation,
} from './transformers';-----------------------------------------------------------------------------
let xAxis: any = {type: xAxisType,name: xAxisTitle,nameGap: convertInteger(xAxisTitleMargin),nameLocation: 'middle',axisLabel: {hideOverlap: true,formatter: xAxisFormatter,rotate: xAxisLabelRotation,// overflow: 'truncate',// width: 80,},minInterval:xAxisType === 'time' && timeGrainSqla? TIMEGRAIN_TO_TIMESTAMP[timeGrainSqla]: 0,};

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\transformers.ts

export function getXAxisEllipsisFormatter(maxLength: number = 10) {return function(value: string | number | null) {const strValue = String(value);if (isNaN(maxLength) || maxLength <= 0 || maxLength >= strValue.length) {return strValue; }if (strValue.length > maxLength && maxLength > 3) {const partLength = Math.floor((maxLength - 3) / 2); const start = strValue.substring(0, partLength);const end = strValue.substring(strValue.length - partLength); return `${start}...${end}`; }return strValue;};
}

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\Regular\Bar\controlPanel.tsx


const {logAxis,minorSplitLine,truncateYAxis,yAxisBounds,zoomable,xAxisLabelRotation,xAxisLabelEllipsis,orientation,
} = DEFAULT_FORM_DATA;
--------------------------------------------------------------------------------[{name: 'xAxisLabelEllipsis',config: {type: 'TextControl',label: t('Ellipsis axis label'),// default: xAxisLabelRotation,renderTrigger: true,isInt: true,description: t('If the axis label content is too long, use ... hide the middle content.',),visibility: ({ controls }: ControlPanelsContainerProps) =>isXAxis ? isVertical(controls) : isHorizontal(controls),},},],

superset\translations\zh\LC_MESSAGES\messages.json

"If the axis label content is too long, use ... hide the middle content.": ["如果坐标轴文本内容过长,就用...隐藏中间的内容"
],

superset\translations\zh\LC_MESSAGES\messages.po

msgid "If the axis label content is too long, use ... hide the middle content."
msgstr "如果坐标轴文本内容过长,就用...隐藏中间的内容"

superset\translations\en\LC_MESSAGES\messages.json

"If the axis label content is too long, use ... hide the middle content.": [""
],

superset\translations\en\LC_MESSAGES\messages.po

msgid "If the axis label content is too long, use ... hide the middle content."
msgstr ""

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\transformProps.ts

1. EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; 加入‘xAxisLabelEllipsis,’

2.修改xAxis 的逻辑

  const axisFormatter = xAxisLabelEllipsis ? getXAxisEllipsisFormatter(xAxisLabelEllipsis) : xAxisFormatterlet xAxis: any = {type: xAxisType,name: xAxisTitle,nameGap: convertInteger(xAxisTitleMargin),nameLocation: 'middle',axisLabel: {hideOverlap: true,// formatter: xAxisFormatter,formatter: axisFormatter,rotate: xAxisLabelRotation,},minInterval:xAxisType === 'time' && timeGrainSqla? TIMEGRAIN_TO_TIMESTAMP[timeGrainSqla]: 0,};

效果图

x轴

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

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

相关文章

【C++】string类的使用②(容量接口Capacity || 元素获取Element access)

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; STL || C 目录 前言&#x1f525;容量接口&#xff08;Capacity&#xff09;size和lengthcapacitymax_sizereserveresizeclearemptyshrink_to_fit &#x1f525;元素获取&#xff08;Ele…

【华为】IPSec VPN手动配置

【华为】IPSec VPN手动配置 拓扑配置ISP - 2AR1NAT - Easy IPIPSec VPN AR3NATIPsec VPN PC检验 配置文档AR1AR2 拓扑 配置 配置步骤 1、配置IP地址&#xff0c;ISP 路由器用 Lo0 模拟互联网 2、漳州和福州两个出口路由器配置默认路由指向ISP路由器 3、进行 IPsec VPN配置&…

Web 安全基础理论

Web 安全基础理论 培训、环境、资料、考证 公众号&#xff1a;Geek极安云科 网络安全群&#xff1a;624032112 网络系统管理群&#xff1a;223627079 网络建设与运维群&#xff1a;870959784 移动应用开发群&#xff1a;548238632 短视频制作群&#xff1a; 744125867极安云…

nginx代理原理(端口复用)探究

前言&#xff1a;对于一些常用的插件&#xff0c;我们应该学会如何使用。同时&#xff0c;其实现原理也要进行深究&#xff0c;可以为其他的项目开发做借鉴。 探究方案&#xff1a; 一、发布两个不同的服务&#xff0c;这两个服务的端口不致 二、配置nginx&#xff0c;让这两…

2024年美国市场亚太游戏品牌数字广告洞察报告

来源&#xff1a;Sensor Tower 美国是全球最大的游戏市场之一&#xff0c;也是亚太游戏品牌出海的重要市场。2023年Q2至2024年Q1&#xff0c;美国市​场广告投放额排名前10的亚太游戏品牌&#xff0c;合计支出 超过7.5亿美元&#xff0c;环比上涨23%。 排名第一的米哈游(miHoY…

免费思维13招之二:第三方思维

思维02:第三方思维 第三方思维又叫第三方资费思维。是一种可以使你的产品免费但是你却依然赚钱的思维。 大家还记得之前讲的“餐厅免费吃饭却年赚百万”的案例吗?这个案例运用了多种免费思维的子思维,其中也用到了第三方资费思维,怎么运用的呢?韩女士,与各行各业合作,…

【C语言】内存函数的概念,使用及模拟实现

Tiny Spark get dazzling some day. 目录 1. memcpy-- 函数原型-- 函数使用-- 函数的模拟实现 2.memmove-- 函数原型-- 函数使用-- 函数的模拟实现 3. memset-- 函数原型-- 函数使用-- 函数的模拟实现 4. memcmp-- 函数原型-- 函数使用-- 函数的模拟实现 1. memcpy 使用需包含…

BI赋能金融新质生产力,16家金融机构智能BI创新实践分享

2024年政府工作报告强调&#xff0c;要“大力发展科技金融、绿色金融、普惠金融、养老金融、数字金融”&#xff0c;同时“大力推进现代化产业体系建设&#xff0c;加快发展新质生产力”。对于金融行业而言&#xff0c;培育新质生产力是高质量发展的关键着力点。金融机构可以通…

【JavaWeb】Servlet+JSP+EL表达式+JSTL标签库+Filter过滤器+Listener监听器

需要提前准备了哪些技术&#xff0c;接下来的课才能听懂&#xff1f; JavaSE&#xff08;Java语言的标准版&#xff0c;Java提供的最基本的类库&#xff09; Java的开发环境搭建Java的基础语法Java的面向对象数组常用类异常集合多线程IO流反射机制注解Annotation… MySQL&…

FinalShell连接虚拟机Linux系统连接超时

报错信息 java.net.ConnectException: Connection timed out: connect 排除是网络问题后可以尝试一下这个方法。 解决方案: 打开虚拟机终端输入:ifconfig 会出现端口信息: 看ens33这里的端口是多少&#xff0c;改一下重新连接就ok。

保研面试408复习 4——操作系统、计网

文章目录 1、操作系统一、文件系统中文件是如何组织的&#xff1f;二、文件的整体概述三、UNIX外存空闲空间管理 2、计算机网络一、CSMA/CD 协议&#xff08;数据链路层协议&#xff09;二、以太网MAC帧MTU 标记文字记忆&#xff0c;加粗文字注意&#xff0c;普通文字理解。 1、…

系统运维(虚拟化)

1.VLAN VLAN&#xff08;Virtual Local Area Network&#xff09;即虚拟局域网&#xff0c;是将一个物理的LAN在逻辑上划分成多个广播域的通信技术。 每个VLAN是一个广播域&#xff0c;VLAN内的主机间可以直接通信&#xff0c;而VLAN间则不能直接互通。这样&#xff0c;广播报…

C++ | Leetcode C++题解之第61题旋转链表

题目&#xff1a; 题解&#xff1a; class Solution { public:ListNode* rotateRight(ListNode* head, int k) {if (k 0 || head nullptr || head->next nullptr) {return head;}int n 1;ListNode* iter head;while (iter->next ! nullptr) {iter iter->next;n…

Spring Boot 整合 socket 实现简单聊天

来看一下实现的界面效果 pom.xml的maven依赖 <!-- 引入 socket --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!-- 引入 Fastjson &#x…

ifconfig命令找不到 command not found

问题 今天解决虚拟机的网络问题后&#xff0c;使用ifconfig发现报错命令未找到 解决方案 输入yum install ifconfi的程序安装包 yum install ifconfig 如果显示没有可用软件包 ifconfig&#xff0c;错误&#xff1a;。 就输入yum search ifconfig匹配安装包程序 yum searc…

【有趣的透镜】1.透镜初相识

1.透镜的外形和材料 (1)透镜由玻璃或者塑料制成&#xff1b; (2)透镜一般为圆型&#xff0c;其单面或双面为球面&#xff1b; 2.透镜的类型和折射 (1)球面外凸为凸透镜(聚光)&#xff0c;球面内凹为凹透镜(散光)&#xff1b; (2)透镜是基于光的折射&#xff0c;只要光从一…

ChatPPT开启高效办公新时代,AI赋能PPT创作

目录 一、前言二、ChatPPT的几种用法1、通过在线生成2、通过插件生成演讲者模式最终成品遇到问题改进建议 三、ChatPPT其他功能 一、前言 想想以前啊&#xff0c;为了做个PPT&#xff0c;我得去网上找各种模板&#xff0c;有时候还得在某宝上花钱买。结果一做PPT&#xff0c;经…

双层嵌线和线径的替代方案

电机只有三种嵌线方式 1.单层嵌线 2.双层嵌线 3.单双层嵌线 前面说的都是单层嵌线&#xff0c;下面介绍双层嵌线&#xff01; 双层嵌线一般线径都比较粗&#xff01; 线径只有几种规格的&#xff0c;大线径可用几根小线径替代&#xff01; 满足的原则&#xff1a;大线径A的…

【华为】路由综合实验(OSPF+BGP基础)

【华为】路由综合实验 实验需求拓扑配置AR1AR2AR3AR4AR5PC1PC2 查看通信OSPF邻居OSPF路由表 BGPBGP邻居BGP 路由表 配置文档 实验需求 ① 自行规划IP地址 ② 在区域1里面 启用OSPF ③ 在区域1和区域2 启用BGP&#xff0c;使AR4和AR3成为eBGP&#xff0c;AR4和AR5成为iBGP对等体…

2024面试自动化测试面试题【含答案】

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…