datav-team / datav-react Goto Github PK
View Code? Open in Web Editor NEWReact数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用,长期更新
Home Page: http://datav-react.jiaminghi.com
License: MIT License
React数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用,长期更新
Home Page: http://datav-react.jiaminghi.com
License: MIT License
如下:
dv-flyline-chart-enhanced DEV:
Click Position is [undefined, undefined]
Relative Position is [NaN, NaN]
"@jiaminghi/data-view-react": "^1.2.3",
如下代码,故障那个圈圈就没有动
function MaintenanceInfo(props) {
const { maintenanceInfo } = props;
const activeStatusData = {
digitalFlopStyle: {
fontSize: 14,
fill: '#fff',
},
lineWidth: 13,
showOriginValue: true,
activeRadius: '80%',
color: ['#0abab5', '#fc1217', '#fcea0f'],
data: [
{ name: '正常', value: maintenanceInfo.normalCount },
{ name: '异常', value: 2},
{ name: '故障', value: 3 },
],
};
return (
<div className={styles.container}>
<ActiveRingChart config={activeStatusData} style={{ width: '100%', height: '160px' }} />
</div>
);
}
export default connect(({ global }) => ({ maintenanceInfo: global.maintenanceInfo }))(MaintenanceInfo);
轮播表显示或者隐藏行号的时候,显示异常,拖动或者修改轮播表宽度可以恢复
轮播表
显示或者隐藏行号的时候,按照columnWidth显示
大佬,我又来了,如果不是bug能请教下应该怎么做吗,现在在二次开发davinci数据大屏,需要把行号变成可配置的 可复现demo链接 https://github.com/XueMeijing/dataV-test.git
Uncaught TypeError: pause is not a function
Uncaught TypeError: resume is not a function
这两个错误
Uncaught TypeError: pause is not a function
at handleHover (index.js:378)
at onMouseEnter (index.js:519)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach ()
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21902)
at batchedEventUpdates (react-dom.development.js:1060)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at dispatchUserBlockingUpdate (react-dom.development.js:4172)
Uncaught TypeError: resume is not a function
at handleHover (index.js:378)
at onMouseLeave (index.js:522)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach ()
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21902)
at batchedEventUpdates (react-dom.development.js:1060)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at dispatchUserBlockingUpdate (react-dom.development.js:4172)
大神们你们好,我在使用该组件和国企的人对接时,对方说地图没有包含标题中的两个地区,恰逢近期台海局势紧张,对方让包含进去,不然无法验收通过。期待大佬们包含一下,感激不尽。
当前组件样式<style>标签在页面中的引入位置不可控,导致与其他使用class作为样式控制的库冲突,比如Tailwind CSS的宽高直接设置到Decoration1组件上会被 .decoration1 自身的宽高100%覆盖,必须在Decoration1组件外面再套一层div来设置tailwindcss的class属性
希望能手动控制样式覆盖顺序
下面2个问题没有做文档和示例中找到解答,怀疑说bug:
1、当y轴的数据较大时会有很多0,有没有办法控制y轴上数据的展示成*万这样?
2、x轴的数据较多时,能否只显示一部分?
如果可以,该怎么设置?有例子最好,
各个统计图形都会有这里描述的问题
1、y轴的数据很大时,例如100000,可以显示成10万,这样需要的空间就小了,单位可以自己设置
2、x轴数据很多时,建议能只显示部分数据
1、当y轴数据比较大时,UI上会有数据显示不全的情况
2、当x轴数据比较多时,数据会重叠,导致看不清楚数据
部分场景下, 需要自定义奇数行或偶数行的样式, 如渐变背景色, 背景图片.
增加 oddRowCLS
和 evenRowCLS
两个属性, 给奇数行与偶数行添加自定义类名.
愿意
边框组件我看了下你是通过svg实现的,涉及到宽度改变时线宽跟着更改,装饰元素不变的逻辑是自己找到所有线手写的逻辑么?还是有什么工具可以自动生成?
如果不是单纯的数据轮播,想去控制根据滚动的数据和序号配合数据去动态控制轮播的暂停和继续,现在没有这个事件;
比如我是一个websocket 持续推送实时消息的来保证每次有新数据则滚动,如果没有新数据则不滚动,这个场景需要类似监听这个scroll的事件,并暴露pause 和resume的方法
在 scrollBoard/index 中的 animation 函数中加入这一句代码,task.current里有pause 和 resume if (onScroll) { onScroll({ animationIndex, task }) }
是
我一个页面用两个ScrollBoard,鼠标放到任意一个ScrollBoard的一条数据上,就不停的报这个错误
react 版本能不能更新呢,改成ts版本的,而且react中的的版本太低,高版本node中demo运行不起来
在BorderBox8中使用svg会自动absolute定位
BorderBox8
.dv-border-box-8 {
position: relative;
width: 100%;
height: 100%;
svg {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
}
svg不自动abosolute定位
svg被.dv-border-box-8 svg 选中了
ts项目无法接入此库
pie新增percentToFixed:2,在特定数据下百分比计算错误
Charts
option: {
color: ['#19aef2', '#4bdbc6', '#f87421'],
title: {
text: '本日***',
style: {
fill: 'white',
},
show: false
},
series: [
{
type: 'pie',
data: [
{ name: 'test1', value: 20000 },
{ name: 'test2', value: 3000 },
],
insideLabel: {
show: true
},
percentToFixed: 2
}
]
}
百分比显示正常
锥形柱图ConicalColumnChart能否支持svg送参,现在只是img的
胶囊柱图CapsuleChart支持文字颜色修改
真心给作者大大点个赞,组件炒鸡好用
表头字体太大了,想变小一点,但没看到哪里有设置表头的文字的font-size的
场景描述:
使用 fullScreenContainer 作为最外层的节点,没有对它做长宽的css设置。
页面内排版使用像素进行布局。
这种情况下,在1920x1080分辨率,然后缩放比例为 100% 的屏幕上显示正常。
但是,在缩放比例为 150% 的屏幕上布局会错乱。ps. 戴尔电脑出厂推荐(默认)的缩放比例是 150%。
如果手工将缩放比例调整为 100% 是正常的。
新特征建议:
希望 fullScreenContainer 能兼容缩放比例不是 100% 的情况,谢谢!
请问该项目有声明文件的安装包吗,我在npm上似乎找不到相关的@types
在react18上使用 npm安装会报错 求更新一下版本号
Uncaught TypeError: resume is not a function
at handleHover (index.js:381)
at onMouseEnter (index.js:522)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at dispatchUserBlockingUpdate (react-dom.development.js:4172)
《FullScreenContainer》
在浏览器窗口模式改变为平板或者手机模式的时候变化transform
在浏览器模拟手机模式下transform 始终是1
这不是个BUG帖子。
是想提个建议:能否写篇文档说说如何自己增加边框、装饰这些组件,也可以让大家贡献一点力量。
config = { rowNum: 5, data: [ [1], [2], [3] ] }
<ScrollBoard config={config} style={{width: '500px', height: '220px'}} />
caught TypeError: resume is not a function
at handleHover (index.js:381)
at onMouseLeave (index.js:525)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at dispatchUserBlockingUpdate (react-dom.development.js:4172)
The rowNum would be the data.length when it's bigger than data.length
轮播表的key是如何确定的? data: [[1,0],[1,0],[1,0],[1,0],[1,0],[1,0],[1,0],[1,0],[1,0]]这样会报错,提示有重复的key,显示异常,并且每次轮播都会新增一列数据。把data中的number 1变成string 1,data: [['1',0],['1',0],['1',0],['1',0],['1',0],['1',0],['1',0],['1',0],['1',0],['1',0],['1',0]],就正常了
轮播表
config = {
header,
data: [[1,0],[1,0],[1,0],[1,0],[1,0],[1,0],[1,0],[1,0],[1,0]],
rowNum: 8,
headerBGC: 'rgba(0,0,0,.3)', // #00BA66
oddRowBGC: 'transparent', // '#609bdf', 'transparent'
evenRowBGC: 'transparent', // '#ffa324', 'transparent'
index: true,
}
warning: Encountered two children with the same key, 4
. Keys should be unique so that components maintain their identity across updates.
尝试新增.d.ts文件并定义如下
declare module '@jiaminghi/data-view-react' {
export const BorderBox1: any
export const BorderBox2: any
}
使用import * as datav from '@jiaminghi/data-view-react'不再报错
if(true){
return <datav.Decoration1 />
}
报错提示,Error:(11, 19) TS2694: Namespace '"@jiaminghi/data-view-react"' has no exported member 'BorderBox1'.
用Typescript优化代码
可以
滚动表组件 设置 rowNum 超过10后 组件中 rowsData 会重复一遍
dataV 版本号 2.10.0
滚动表
行数设置超过10会导致数据重复,如果需要全部展示数据的话,会重复数据。
需要全部展示数据的话不需要滚动,会重复数据。展示数据重复
fullScreenContainer
页面内容错乱
@jiaminghi/data-view-react/src/util/index.js
在使用过程中,发现在组件销毁后,仍然调用setWH方法,导致报错;所以是否应该在debounce方法上提供一个cancel方法
@Nathanielna 1.2.4版本已修复。
Originally posted by @yizhiyuyou in #9 (comment)
边框和装饰动态传高度和宽度,必须要重新刷新页面才能生效
可以加些折线图吗?加上折线图,基本上就够用了
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.