CN114461205A - 数据可视化平台及适用于数据可视化平台的组件管理方法 - Google Patents

数据可视化平台及适用于数据可视化平台的组件管理方法 Download PDF

Info

Publication number
CN114461205A
CN114461205A CN202210382506.8A CN202210382506A CN114461205A CN 114461205 A CN114461205 A CN 114461205A CN 202210382506 A CN202210382506 A CN 202210382506A CN 114461205 A CN114461205 A CN 114461205A
Authority
CN
China
Prior art keywords
component
chart
package
version
data visualization
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210382506.8A
Other languages
English (en)
Inventor
王毅
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Bizhi Technology Co ltd
Original Assignee
Hangzhou Bizhi Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Bizhi Technology Co ltd filed Critical Hangzhou Bizhi Technology Co ltd
Priority to CN202210382506.8A priority Critical patent/CN114461205A/zh
Publication of CN114461205A publication Critical patent/CN114461205A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/955Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566URL specific, e.g. using aliases, detecting broken or misspelled links
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/60Software deployment
    • G06F8/65Updates
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management

Abstract

本发明公开了一种数据可视化平台及适用于数据可视化平台的组件管理方法,所述方法包括以下步骤:步骤S110,开发图表组件,新建一个文件夹作为图表组件开发目录,使用单一代码库架构管理组件代码,实现“单仓多包”的组件开发模式;步骤S120,发布图表组件,每个图表组件都是一个独立的JavaScript包,使用npm注册表向整个社区或组织成员共享独立的JavaScript包;步骤S130,远程加载存储在包管理平台的组件资源;步骤S140,系统渲染组件,系统获取服务端返回的解析后的资源文件并加载对应的组件源码和组件配置,完成图表组件的渲染。本发明的方法能够实现图表组件快速更新、单独发布,不会对数据可视化平台的系统性能造成影响。

Description

数据可视化平台及适用于数据可视化平台的组件管理方法
技术领域
本发明涉及计算机及电子通信技术领域,特别涉及一种适用于数据可视化平台的组件管理方法及使用该方法进行组件管理的数据可视化平台。
背景技术
步入大数据时代,各行业对数据价值的重视程度与日俱增。要想把数据价值发挥出来,需要对数据进行采集、融合、分析、数据可视化,而数据可视化是数据价值的最直观体现,已成为日常办公、应急处理、指挥调度、战略决策等场景下必不可少的一部分。
把相对复杂、抽象的数据通过可视的方式以人们更易理解的图形展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的价值,企业和政府使用数据智能更好的开展业务。
大屏数据可视化是以大屏幕为主要展示载体进行数据的可视化呈现。“大面积、炫酷动效、丰富色彩”,巨大屏幕易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。利用面积大、超高分辨率、可展示信息多的特点,比如各行业的业务展示监控、风险预警、信息指挥调度、企业展厅、展览展示、电力电网、能源矿产、健康医疗、工厂制造、法院政务、银行金融、军队、智慧城市、汽车行业等,在不同的行业都得到了广泛的应用。
数据可视化平台相比于传统的手工定制的图表和数据仪表盘,使用图形化的操作界面,通过拖拽图表组件即可快速搭建美观的可视化屏幕,解放了数据可视化的开发人力。为了最大程度发挥数据可视化平台的优势,需要不断丰富图表组件的类型、数量、外观样式以及个性化配置,以满足不同用户在不同业务场景下日益增长的数据展示需求。
随着组件数量的持续增长,会造成系统部署时构建生成的资源文件体积过大,从而影响系统性能,具体表现为页面加载缓慢、内存占用过高,用户在拖拽或编辑图表组件时页面卡顿、假死,严重时甚至会出现浏览器崩溃;同时,每次新增图表组件都需要对整个系统进行构建部署,会导致部署耗时过长,增加运维成本。另一方面,在对平台现有图表组件进行样式或配置更新时,会对用户已创建的可视化屏幕造成不可预知的影响,导致引用该组件的屏幕无法正常展示。
现有的解决方法基本上都是:在系统构建时通过webpack模块打包工具的代码分割(Code Splitting)特性,利用入口文件(Entry Points)、公共提取(CommonsChunkPlugin)和动态加载(Dynamic Imports)等方法将代码分割到不同的文件中,以便按需或并行加载这些文件,并通过配置来限制每个文件的体积大小,控制资源加载优先级,从而提高页面加载速度。而针对现有图表组件的升级问题,通常是将升级后的图表组件作为一个全新的组件发布,防止对已发布的图表组件进行二次更改。
现有技术的主要缺陷在于:代码分割通过限制单个资源文件的大小,虽然在一定程度上能够提高页面加载速度,但系统本身依然会随着组件数量的增加而变得越来越庞大,当代码分割生成的资源文件超过浏览器允许的最大并发数限制之后,便会造成浏览器线程阻塞,同样会导致页面白屏、浏览器崩溃等问题;随着系统越来越庞大,代码分割的文件数量也会越来越多,从而增加系统构建所需的时间,进一步增加部署耗时和运维成本。另一方面,将升级后的图表组件作为一个全新的组件发布,同样会使得系统越来越庞大,加剧上述问题的严重性,形成恶性循环;另外,这种方式还会造成图表组件同质化,增加用户使用成本和管理维护成本。
发明内容
针对现有技术存在的问题,本发明的目的在于提供一种数据可视化平台及适用于数据可视化平台的组件管理方法,所述组件管理方法能够实现图表组件快速更新、单独发布,不会对数据可视化平台的系统性能造成影响,组件升级后也不会影响用户已创建的可视化屏幕,用户可自主选择是否在可视化屏幕中对已引用的组件进行更新。
为实现上述目的,本发明提供一种适用于数据可视化平台的组件管理方法,所述方法包括以下步骤:
步骤S110,开发图表组件,新建一个文件夹作为图表组件开发目录,使用单一代码库架构管理组件代码,实现“单仓多包”的组件开发模式;
步骤S120,发布图表组件,每个图表组件都是一个独立的JavaScript包,使用npm注册表向整个社区或组织成员共享独立的JavaScript包;
步骤S130,远程加载存储在包管理平台的组件资源;
步骤S140,系统渲染组件,系统获取服务端返回的解析后的组件资源并加载对应的组件源码和组件配置,完成图表组件的渲染。
进一步,在步骤S110中,每个图表组件在图表组件开发目录中配置一个子文件夹(如package-a),每个图表组件都遵循统一的目录结构,所述目录结构包含组件源码、组件配置和描述文件;其中,描述文件定义了图表组件的元数据,用于将图表组件发布到包管理平台,以对图表组件进行管理和安装。
进一步,在步骤S120中,将图表组件发布到包管理平台,其中每个图表组件都是由软件和元数据组成的独立的JavaScript包,使用npm注册表共享独立的JavaScript包,并下载独立的JavaScript包以在项目中使用。
进一步,在图表组件发布到包管理平台之前,先更改npm的registry配置,使用的命令为:
npm config set registry https://registry.example.org
在终端执行以上命令,将https://registry.example.org替换为私有npm注册表;
然后,进入图表组件所在的子文件夹(如package-a),在终端执行发布如下命令:
cd /path/to/package
npm publish
执行成功后,通过API或npm获取图表组件的源码、配置和元数据。
进一步,在步骤S130中,当用户预览图表组件、可视化屏幕或将图表组件拖拽至画布编辑器时,会触发图表组件的初始化事件,将当前图表组件的元数据通过API参数的形式传递给服务端,向服务端发起获取组件资源的请求,服务端获得图表组件元数据后,解析得到当前图表组件的名称和版本字段,通过npm查询包信息;服务端根据返回结果中的tarball字段对组件资源进行缓存和解析,并将解析后的组件资源以url的形式返回给前端。
进一步,步骤S120中通过lerna管理组件的升级和发布,实现图表组件的语义化版本管理,使用lerna管理组件的具体过程为:
步骤S210,在图表组件开发目录运行lernapublish发布命令;
步骤S220,lerna调用git命令检索组件目录下的文件是否有更改;
步骤S230,lerna调用git命令判断组件是否存在已发布的版本;
步骤S240,lerna调用npm命令将最新的组件发布到包管理平台。
进一步,步骤S230 中,若存在已发布的版本,lerna提示更新组件版本号,并根据上次发布的版本生成建议的新版本号以供选择;若图表组件不存在已发布的版本,则将其视作首次发布,默认使用组件描述文件中version字段的值作为当前发布的组件版本号。
进一步,步骤S130中,当用户编辑已创建的可视化屏幕时,默认加载可视化屏幕使用的组件版本的组件资源,在提示图表组件有新版本的情况下,用户可手动选择是否将可视化屏幕中的图表组件升级至最新版本。
进一步,加载和升级图表组件的具体流程如下:
步骤S310,编辑可视化屏幕;
步骤S320,根据屏幕使用的组件版本,远程加载组件组件资源并完成组件渲染;
步骤S330,在包管理平台存在图表组件的最新版本的情况下,则提示用户当前图表组件有可用更新;若用户选择更新图表组件,则远程加载当前图表组件的最新版本,并渲染最新版本的图表组件。
另一方面,本发明还提供一种数据可视化平台,所述平台应用根据本发明所述的适用于数据可视化平台的组件管理方法,能够实现图表组件快速更新、单独发布,组件升级后也不会影响用户已创建的可视化屏幕,用户可自主选择是否在可视化屏幕中对已引用的组件进行更新,通过解耦数据可视化平台的系统功能和图表组件,使用包管理平台托管图表组件,基于语义化版本进行组件的升级和发布,在系统中通过远程加载实现组件动态注册和渲染。并且不会对数据可视化平台的系统性能造成影响。
本发明中,“解耦”的关键技术点为远程加载组件和系统渲染组件,本发明的技术方案相对于现有技术的优势在于:
1、现有技术的图表组件和数据可视化平台的系统功能在代码层完全耦合,将组件和系统作为一个整体进行构建部署;
2、现有技术只能实现在开发阶段从代码层解耦图表组件和数据可视化平台的系统功能。本发明使用了包管理平台,包管理平台可以理解为一个资源(文件)存储服务器,提供资源上传、下载和查询服务。而图表组件的发布和管理,具体是通过描述文件(package.json)中定义的组件元数据实现(例如:使用version字段标识组件版本,以便在数据可视化平台的系统中加载指定版本的组件资源)。
3、本发明提出的“远程加载组件”和“系统渲染组件”方法,可以实现数据可视化平台的系统功能独立构建部署,部署时无需包含任何组件资源;当用户在Web浏览器对图表组件进行操作时再通过服务端API从包管理平台远程加载组件资源,最后将组件资源以url的形式返回给Web前端完成图表组件的渲染。
附图说明
图1为根据本发明适用于数据可视化平台的组件管理方法优选实施例中解耦数据可视化平台和图表组件的流程图;
图2示出了在图1中开发图表组件的项目结构示意图;
图3示出了在图1中发布和加载图表组件的过程示意图;
图4示出了获取组件资源的结果示意图;
图5示出了在图1中发布组件及更新组件的流程图;
图6示出了用户可控的组件升级方案的过程示意图。
具体实施方式
下面将结合附图,对本发明的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在本发明的描述中,需要说明的是,术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系,仅是为了便于描述本发明和简化描述,而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作,因此不能理解为对本发明的限制。此外,术语“第一”、“第二”、“第三”仅用于描述目的,而不能理解为指示或暗示相对重要性。
在本发明的描述中,需要说明的是,除非另有明确的规定和限定,术语“安装”、“相连”、“连接”应做广义理解,例如,可以是固定连接,也可以是可拆卸连接,或一体地连接;可以是机械连接,也可以是电连接;可以是直接相连,也可以通过中间媒介间接相连,可以是两个元件内部的连通。对于本领域的普通技术人员而言,可以根据具体情况理解上述术语在本发明中的具体含义。
以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是,此处所描述的具体实施方式仅用于说明和解释本发明,并不用于限制本发明。
近年来,可视化屏幕广泛应用在交易大厅、展览中心、管控中心、数字展厅等,把一些关键数据集中展示在一块巨形屏幕上,使数据绚丽、震撼的呈现,给业务人员更好的视觉体验。数据可视化以直观、高度视觉冲击力的方式向受众揭示数据背后隐藏的规律,传达数据价值。大屏数据可视化在智慧城市、人口空间规划、公共服务等领域越来越多地发挥了积极的作用,更宏观、直观、智能地展示业务场景,让数据智能推动社会进步。
由于各种数据处于实时变化的情况,可视化屏幕的图表组件也需要不断更新,为了实现图表组件快速更新、单独发布,不会对数据可视化平台的系统性能造成影响,组件升级后也不会影响用户已创建的可视化屏幕,用户可自主选择是否在可视化屏幕中对已引用的组件进行更新,根据附图1-附图6,本发明提供一种数据可视化平台及适用于数据可视化平台的组件管理方法,该方法包括以下步骤:
如图1所示,所述适用于数据可视化平台的组件管理方法的基本流程为:
步骤S110,开发图表组件;新建一个文件夹作为图表组件开发目录,使用单一代码库架构管理组件代码,实现“单仓多包”的组件开发模式;
步骤S120,发布图表组件;每个图表组件都是一个独立的JavaScript包,使用npm注册表向整个社区或组织成员共享独立的JavaScript包;
步骤S130,远程加载存储在包管理平台的组件资源;
步骤S140,系统渲染组件;系统获取服务端返回的解析后的组件资源并加载对应的组件源码和组件配置,完成图表组件的渲染。
具体的,在步骤S110中,新建一个文件夹作为图表组件开发目录,使用单一代码库(Monorepo)架构管理组件代码,实现“单仓多包”的组件开发模式。如图2所示,每个图表组件在这个目录中配置一个子文件夹(package-a),每个图表组件都遵循统一的目录结构,所述目录结构包含组件源码(index.vue)、组件配置(config.json)和描述文件(package.json)。其中,描述文件(package.json)定义了图表组件的元数据,用于将图表组件发布到包管理平台,以对图表组件进行管理和安装。其部分字段如下:
{
"name": "my_package", // 组件名称
"description": " ", // 组件描述
"version": "1.0.0", // 组件版本
"type": "basic_charts", // 组件类型
"category": "column", // 所属分类
"screenshot": " ", // 组件缩略图
"keywords": [], // 组件关键词
"author": " ", // 组件开发者
"publishTime": " ", // 首次发布时间
"updateTime": " ", // 最后更新时间
… …
}
其中,Monorepo(单一代码库) 是管理项目代码的一个方式,指在一个项目仓库(repo) 中管理多个模块/包 (package),不同于常见的每个模块建一个 repo。monorepo的优势在于:
(1)可见性:每个人都可以看到其他人的代码,这样可以带来更好的协作和跨团队贡献——不同团队的开发人员都可以修复代码中的bug,而你甚至都不知道这个bug的存在。
(2)更简单的依赖关系管理:共享依赖关系很简单,因为所有模块都托管在同一个存储库中,因此都不需要包管理器。
(3)唯一依赖源:每个依赖只有一个版本,意味着没有版本冲突。
(4)一致性:当你把所有代码库放在一个地方时,执行代码质量标准和统一的风格会更容易。
(5)共享时间线:API或共享库的变更会立即被暴露出来。
(6)原子提交:原子提交使大规模重构更容易,开发人员可以在一次提交中更新多个包或项目。
(7)隐式CI:因为所有代码已经统一维护在一个地方,因此可以保证持续集成。
(8)统一的CI/CD:可以为代码库中的每个项目使用相同的CI/CD部署流程。
(9)统一的构建流程:代码库中的每个应用程序可以共享一致的构建流程。
具体的,在步骤S120中,将图表组件发布到包管理平台。包管理平台可以理解为一个资源(文件)存储服务器,提供资源上传、下载和查询服务。而图表组件的发布和管理,具体是通过步骤S110中的描述文件(package.json)中定义的组件元数据实现(例如:使用version字段标识组件版本,以便在数据可视化平台的系统中加载指定版本的组件资源)。每个图表组件都是一个独立的JavaScript包,每个独立的JavaScript包都由软件和元数据组成,开发人员可以使用npm注册表向整个社区或组织成员共享独立的JavaScript包,并下载独立的JavaScript包以在项目中使用。
npm是世界上最大的包管理平台,由三个不同的部分组成:
网站(web):查看和管理已发布的软件;
命令行界面(CLI):使用终端命令与npm进行交互;
注册表(registry):JavaScript 包的数据库;
npm支持发布公共包和私有包,同时也可以使用私有npm注册表。出于安全考虑,优选使用开源的Verdaccio搭建私有npm注册表,以便在公司内部开发不公开共享的包。在发布组件之前,需要先更改npm的registry配置,使用的命令为:
npm config set registry https://registry.example.org
在终端执行以上命令,将https://registry.example.org替换为私有npm注册表。
然后,进入图表组件所在的子文件夹(如package-a),在终端执行发布如下命令:
cd /path/to/package
npm publish
执行成功后,便可通过API或npm获取图表组件的源码、配置和元数据。
具体的,在步骤S130中,远程加载存储在包管理平台的组件资源。
如图3所示,当用户预览图表组件、可视化屏幕或将图表组件拖拽至画布编辑器时,会触发图表组件的初始化事件,将当前图表组件的元数据通过API参数的形式传递给服务端,向服务端发起获取组件资源的请求。服务端获得图表组件元数据后,解析得到当前图表组件的名称(name)和版本(version)字段,通过npm查询包信息,其结果示例如图4所示。
服务端根据返回结果中的tarball字段对组件资源进行缓存和解析,并将解析后的组件资源以url的形式返回给前端,包括组件源码(index.vue)和组件配置(index.vue)文件。
在步骤S140中,系统获取服务端返回的解析后的组件资源并加载对应的组件源码(index.vue)和组件配置(index.vue)文件,完成图表组件的渲染。
优选地,步骤S120中可以通过lerna(多包存储库管理工具)管理组件的升级和发布,实现图表组件的语义化版本管理,解决发布时需要手动维护多个包的问题。使用lerna管理组件的具体过程如图5所示,具体为:
开始,步骤S210,在组件开发目录运行lernapublish发布命令;
然后,步骤S220,lerna调用git命令检索组件目录下的文件更改;
步骤S230,lerna调用git命令判断组件是否存在已发布的版本。如果存在已发布的版本,lerna会提示更新组件版本号,并根据上次发布的版本生成建议的新版本号以供选择。生成的版本号符合语义化版本控制规范,版本号格式:主版本号.次版本号.修订号,定义其递增规则如下:
主版本号:若出现不兼容的 API 修改的情况,进行主版本号递增;
次版本号:若出现向下兼容的功能性新增的情况,进行次版本号递增;
修订号:若出现向下兼容的问题修正的情况,进行修订号递增。
如果图表组件不存在已发布的版本,则将其视作首次发布,默认使用组件描述文件中version字段的值作为当前发布的组件版本号。
最后,步骤S240,lerna调用npm命令将最新的组件发布到包管理平台。
Lerna(多包存储库管理工具)是一个优化使用 git 和 npm 管理多包存储库的工作流工具,用于管理具有多个包的 JavaScript 项目。Lerna 中的两个主要命令是 lernabootstrap 和 lerna publish。 lerna bootstrap 将把 repo 中的依赖关系链接在一起。lerna publish将有助于发布软件包更新。
优选地,步骤S130中,当用户编辑已创建的可视化屏幕时,默认会加载屏幕使用的组件版本的组件资源,并提示组件有新版本可用,用户可手动选择是否将屏幕中的组件升级至最新版本。其具体流程如图6所示,具体如下:
步骤S310,编辑可视化屏幕;
步骤S320,根据屏幕使用的组件版本(如 pie-chartsv1.0.0),远程加载组件资源并完成组件渲染;
步骤S330,如果包管理平台存在组件的最新版本,则提示用户当前组件有可用更新。如用户选择更新组件,则远程加载当前组件的最新版本,并渲染最新版本的组件。
另一方面,本发明还提供一种数据可视化平台,应用本发明的适用于数据可视化平台的组件管理方法,通过解耦数据可视化平台的系统功能和图表组件,使用包管理平台托管图表组件,基于语义化版本(Semantic Versioning)进行组件的升级和发布,在系统中通过远程加载实现组件动态注册和渲染。
其中,所述数据可视化平台包括升级发布模块,所述升级发布模块通过lerna(多包存储库管理工具)实现图表组件的语义化版本管理,解决发布时需要手动维护多个包的问题。升级发布模块的功能包括在组件开发目录运行lernapublish发布命令;lerna调用git命令检索组件目录下的文件更改;lerna调用git命令判断组件是否存在已发布的版本;lerna调用npm命令将最新的组件发布到包管理平台。
所述数据可视化平台还包括加载更新模块,用于当用户编辑已创建的可视化屏幕时,默认会加载屏幕使用的组件版本的组件资源,并提示组件有新版本可用,用户可手动选择是否将屏幕中的组件升级至最新版本。所述加载更新模块的功能包括编辑可视化屏幕;根据屏幕使用的组件版本,远程加载组件资源并完成组件渲染;如果包管理平台存在组件的最新版本,则提示用户当前组件有可用更新。如用户选择更新组件,则远程加载当前组件的最新版本,并渲染最新版本的组件。
本发明的技术方案基于包管理平台实现图表组件的发布、管理和升级,解耦数据可视化平台的系统功能和图表组件。
能够提高组件开发效率,降低组件发布、维护和管理成本,避免系统构建部署耗时过长,以及因系统体积过大引起的性能问题;实现用户可控的组件升级方案,避免组件更新对用户已创建的屏幕造成破坏性影响。
在本说明书的描述中,参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外,本领域的技术人员可以在不产生矛盾的情况下,将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。
上述内容虽然已经示出和描述了本发明的实施例,可以理解的是,上述实施例是示例性的,不能理解为对本发明的限制,本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。

Claims (10)

1.一种适用于数据可视化平台的组件管理方法,其特征在于,所述方法包括以下步骤:
步骤S110,开发图表组件;包括建立图表组件开发目录,使用单一代码库架构管理组件代码,实现“单仓多包”的组件开发模式;
步骤S120,发布图表组件;每个图表组件都采用一个独立的JavaScript包,使用npm注册表共享独立的JavaScript包;
步骤S130,远程加载存储在包管理平台的组件资源;
步骤S140,系统渲染图表组件;系统获取服务端返回的解析后的组件资源并加载对应的组件源码和组件配置,完成图表组件的渲染。
2.根据权利要求1所述的适用于数据可视化平台的组件管理方法,其特征在于,在步骤S110中,每个图表组件在图表组件开发目录中配置一个子文件夹,每个图表组件都遵循统一的目录结构,所述目录结构包含组件源码、组件配置和描述文件;其中,描述文件定义了图表组件的元数据,用于将图表组件发布到包管理平台,以对图表组件进行管理和安装。
3.根据权利要求2所述的适用于数据可视化平台的组件管理方法,其特征在于,在步骤S120中,将图表组件发布到包管理平台,其中每个图表组件都是由软件和元数据组成的独立的JavaScript包,使用npm注册表共享独立的JavaScript包,并下载独立的JavaScript包以在数据可视化平台中使用。
4.根据权利要求3所述的适用于数据可视化平台的组件管理方法,其特征在于,在图表组件发布到包管理平台之前,先更改npm的registry配置,使用的命令为:
npm config set registry https://registry.example.org
在终端执行以上命令,将https://registry.example.org替换为私有npm注册表;
然后,进入图表组件所在的子文件夹,在终端执行发布如下命令:
cd /path/to/package-a
npm publish
执行成功后,通过API或npm获取图表组件的源码、配置和元数据。
5.根据权利要求3所述的适用于数据可视化平台的组件管理方法,其特征在于,在步骤S130中,当用户预览图表组件、可视化屏幕或将图表组件拖拽至画布编辑器时,会触发图表组件的初始化事件,将当前图表组件的元数据通过API参数的形式传递给服务端,向服务端发起获取组件资源的请求,服务端获得图表组件元数据后,解析得到当前图表组件的名称和版本字段,通过npm查询包信息;服务端根据返回结果中的tarball字段对组件资源进行缓存和解析,并将解析后的组件资源以url的形式返回给前端。
6.根据权利要求3所述的适用于数据可视化平台的组件管理方法,其特征在于,步骤S120中通过lerna管理组件的升级和发布,实现图表组件的语义化版本管理,使用lerna管理组件的具体过程为:
步骤S210,在图表组件开发目录运行lernapublish发布命令;
步骤S220,lerna调用git命令检索图表组件目录下的文件是否有更改;
步骤S230,lerna调用git命令判断图表组件是否存在已发布的版本;
步骤S240,lerna调用npm命令将最新的图表组件发布到包管理平台。
7.根据权利要求6所述的适用于数据可视化平台的组件管理方法,其特征在于,步骤S230 中,若存在已发布的版本,lerna提示更新图表组件版本号,并根据上次发布的版本生成建议的新版本号以供选择;若图表组件不存在已发布的版本,则将其视作首次发布,默认使用组件描述文件中version字段的值作为当前发布的图表组件版本号。
8.根据权利要求5所述的适用于数据可视化平台的组件管理方法,其特征在于,步骤S130中,当用户编辑已创建的可视化屏幕时,默认加载可视化屏幕使用的图表组件版本对应的组件资源,在提示图表组件有新版本的情况下,用户可手动选择是否将可视化屏幕中的图表组件升级至最新版本。
9.根据权利要求8所述的适用于数据可视化平台的组件管理方法,其特征在于,加载和升级图表组件的具体流程如下:
步骤S310,编辑可视化屏幕;
步骤S320,根据可视化屏幕使用的图表组件版本,远程加载组件资源并完成图表组件渲染;
步骤S330,在包管理平台存在图表组件的最新版本的情况下,则提示用户当前图表组件有可用更新;若用户选择更新图表组件,则远程加载当前图表组件的最新版本,并渲染最新版本的图表组件。
10.一种数据可视化平台,其特征在于,所述平台应用根据权利要求1-9任一项所述的适用于数据可视化平台的组件管理方法。
CN202210382506.8A 2022-04-13 2022-04-13 数据可视化平台及适用于数据可视化平台的组件管理方法 Pending CN114461205A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210382506.8A CN114461205A (zh) 2022-04-13 2022-04-13 数据可视化平台及适用于数据可视化平台的组件管理方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210382506.8A CN114461205A (zh) 2022-04-13 2022-04-13 数据可视化平台及适用于数据可视化平台的组件管理方法

Publications (1)

Publication Number Publication Date
CN114461205A true CN114461205A (zh) 2022-05-10

Family

ID=81418590

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210382506.8A Pending CN114461205A (zh) 2022-04-13 2022-04-13 数据可视化平台及适用于数据可视化平台的组件管理方法

Country Status (1)

Country Link
CN (1) CN114461205A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115357272A (zh) * 2022-10-09 2022-11-18 深圳华锐分布式技术股份有限公司 前端公共组件发布方法、装置、设备及介质
CN115953507A (zh) * 2023-03-10 2023-04-11 成都索贝视频云计算有限公司 一种图像化编排容器微服务模板管理系统及模板生成方法

Citations (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7392510B1 (en) * 2004-08-06 2008-06-24 Amazon Technologies, Inc. System for tracking and providing access to information about server components invoked during the dynamic generation of web pages
CN106708480A (zh) * 2015-07-29 2017-05-24 腾讯科技(深圳)有限公司 管理平台实现方法和装置
CN108197257A (zh) * 2017-12-29 2018-06-22 深圳乐信软件技术有限公司 Html页面生成方法、装置、设备及存储介质
US20190073227A1 (en) * 2011-07-12 2019-03-07 Tongling Yucheng Software Technology Co., Ltd Service model-oriented software system and operation method thereof
CN110580146A (zh) * 2018-06-07 2019-12-17 北京怡合春天科技有限公司 一种基于eros的混合应用解决方法
CN111078231A (zh) * 2019-11-22 2020-04-28 浙江蓝卓工业互联网信息技术有限公司 可视化界面组件热部署方法和客户端、服务端
CN111158674A (zh) * 2019-12-30 2020-05-15 广州市百果园信息技术有限公司 组件管理方法、系统、设备及存储介质
CN112416348A (zh) * 2020-12-02 2021-02-26 车智互联(北京)科技有限公司 页面生成方法、系统及计算设备
CN112559021A (zh) * 2020-12-23 2021-03-26 通联支付网络服务股份有限公司 一种移动端小应用开发管理系统
CN112579191A (zh) * 2019-09-29 2021-03-30 华为终端有限公司 一种组件加载方法、装置及系统
CN113239310A (zh) * 2021-06-17 2021-08-10 上海微盟企业发展有限公司 一种页面加载方法及相关装置
CN113553035A (zh) * 2021-07-08 2021-10-26 北京计算机技术及应用研究所 一种通用的前端ui组件库的设计和构建方法
CN114089965A (zh) * 2021-11-19 2022-02-25 广州市网星信息技术有限公司 基于单体式代码仓库Monorepo的程序开发项目管理方法、装置
CN114296722A (zh) * 2021-12-10 2022-04-08 浙江嘉兴数字城市实验室有限公司 一种应用于数字化改革的可视化快速开发方法及系统

Patent Citations (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7392510B1 (en) * 2004-08-06 2008-06-24 Amazon Technologies, Inc. System for tracking and providing access to information about server components invoked during the dynamic generation of web pages
US20190073227A1 (en) * 2011-07-12 2019-03-07 Tongling Yucheng Software Technology Co., Ltd Service model-oriented software system and operation method thereof
CN106708480A (zh) * 2015-07-29 2017-05-24 腾讯科技(深圳)有限公司 管理平台实现方法和装置
CN108197257A (zh) * 2017-12-29 2018-06-22 深圳乐信软件技术有限公司 Html页面生成方法、装置、设备及存储介质
CN110580146A (zh) * 2018-06-07 2019-12-17 北京怡合春天科技有限公司 一种基于eros的混合应用解决方法
CN112579191A (zh) * 2019-09-29 2021-03-30 华为终端有限公司 一种组件加载方法、装置及系统
CN111078231A (zh) * 2019-11-22 2020-04-28 浙江蓝卓工业互联网信息技术有限公司 可视化界面组件热部署方法和客户端、服务端
CN111158674A (zh) * 2019-12-30 2020-05-15 广州市百果园信息技术有限公司 组件管理方法、系统、设备及存储介质
CN112416348A (zh) * 2020-12-02 2021-02-26 车智互联(北京)科技有限公司 页面生成方法、系统及计算设备
CN112559021A (zh) * 2020-12-23 2021-03-26 通联支付网络服务股份有限公司 一种移动端小应用开发管理系统
CN113239310A (zh) * 2021-06-17 2021-08-10 上海微盟企业发展有限公司 一种页面加载方法及相关装置
CN113553035A (zh) * 2021-07-08 2021-10-26 北京计算机技术及应用研究所 一种通用的前端ui组件库的设计和构建方法
CN114089965A (zh) * 2021-11-19 2022-02-25 广州市网星信息技术有限公司 基于单体式代码仓库Monorepo的程序开发项目管理方法、装置
CN114296722A (zh) * 2021-12-10 2022-04-08 浙江嘉兴数字城市实验室有限公司 一种应用于数字化改革的可视化快速开发方法及系统

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
陈磊: "一种跨平台移动APP开发React Native方法的实现", 《电子技术与软件工程》 *
陈超 等: "基于Web SSH技术的Linux远程桌面的原理与实现", 《长江信息通信》 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115357272A (zh) * 2022-10-09 2022-11-18 深圳华锐分布式技术股份有限公司 前端公共组件发布方法、装置、设备及介质
CN115953507A (zh) * 2023-03-10 2023-04-11 成都索贝视频云计算有限公司 一种图像化编排容器微服务模板管理系统及模板生成方法

Similar Documents

Publication Publication Date Title
US8875306B2 (en) Customization restrictions for multi-layer XML customization
US7607126B2 (en) System and method for external override of annotations
US8538998B2 (en) Caching and memory optimizations for multi-layer XML customization
US8966465B2 (en) Customization creation and update for multi-layer XML customization
US7603443B2 (en) Generic method for defining resource configuration profiles in provisioning systems
US8560938B2 (en) Multi-layer XML customization
US8788542B2 (en) Customization syntax for multi-layer XML customization
CN109684701B (zh) Bim模型资源管理系统与bim模型创建方法
US7505995B2 (en) Object-relational model based user interfaces
US7739310B1 (en) Extensible portlet templates
CN114461205A (zh) 数据可视化平台及适用于数据可视化平台的组件管理方法
US8561015B2 (en) Source code semantic zoom and spatial layout
EP1603033A2 (en) Method and apparatus for generating forms using form types
US20090328028A1 (en) Electronic documents and methods for updating resource files for an application
JP2002544589A (ja) ビジネスオブジェクトインタフェースをビジュアルにカスタマイズするシステムおよび方法
US20130067456A1 (en) Application configuration framework for enterprise resource planning application installation
US7168062B1 (en) Object-oriented software system allowing live modification of an application
US20080288918A1 (en) Web service tool based on business object layer
CA3117852A1 (en) System and method for creation and handling of configurable applications for website building systems
US20090112938A1 (en) Indicating staleness of elements in a document in a content management system
US10114617B2 (en) Rapid visualization rendering package for statistical programming language
US7464369B1 (en) System and method for customizing extensible web part menus
CN114579128A (zh) 一种可视化页面搭建方法及装置、存储介质、计算机设备
CN111124386B (zh) 基于Unity的动画事件处理方法、装置、设备和存储介质
WO2022146714A9 (en) System and method for real-time, dynamic creation, delivery, and use of customizable web applications

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20220510