MyException - 我的异常网
当前位置:我的异常网» 综合 » #研制解决方案#共享能力的数屏

#研制解决方案#共享能力的数屏

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
#研发解决方案#共享能力的数屏

创建于2017/7/23 最后更新于2017/7/25

关键词:大数据,监控大屏,实时大屏,大屏,数屏,React,Redux,

提纲:

  1. 自助式报表、魔盒和数屏的产生逻辑

  2. 共享能力

  3. 数屏的技术栈

  4. 数屏的能力


   数屏(DataB) 是数据中心吴佰清组推出的高逼格数据应用,它的目标是通过图形化界面快速搭建可视化监控大屏,数屏可以提供丰富的可视化数据组件,满足业务监控、会议展览、投资咨询等多种业务的展示需求,尤其要满足PC浏览器或者手机浏览器访问下的自适应布局。

 

图1 数屏默认首页

 

   感谢前台的吴佰清,董建昌,刘永飞,赵亮,孙铮,后台的赵兴申,袁丙泽,李少杰,吕中舟,高川川。

   数据中心2016年提供了实时监控大屏,云纵总部门口电视上投放的就是当面付和纵横客的大屏。它的运行原理是,数据库变更订阅中心(背后是canal)-->Kafka-->HBase/Redis/MySQL-->workman--websocket-->大屏。它的问题是每次都得开发,双十二时的多张监控大屏就是如此。所以自然而然产生一个想法:大屏能不能所见即所得,不用或减少开发?

 

0x00,自助式报表、魔盒和数屏为什么诞生?

   2014年时我提出所谓商业智能平台无非这么几个 feature:

  • 自助式报表;

  • 即席查询;

  • 数据可视化(在自助式报表基础上);

  • 数据融合;

  • 数据仓库。

   那时候自助式报表的目标是,可视化自定义报表,并将报表和图表组装成仪表盘。这样可以节省数据中心的开发人力,不用陷入到每张报表都必须开发的泥潭,专注做好数据仓库即可。

   2014年12月12日,少明主持开发的自助式报表一期上线发布,我们认为初期不需要对外提供自助定义报表的能力,能让内部开发人员可视化自定义报表(含图表)、授予其他部门访问权限即可。

 

图2 自助式报表平台-配置报表的向导界面

 

   后来又看到了美团的自助ETL规划,即开放数据的存储和计算环境,让ETL流程的编写和部署Web化,让其他组织里有能力的研发人员,可以自己在数据仓库上部署计算流程,计算自己需要的数据。

   数据中心沿着这两个思路一路走来,现如今都有了对应的解决方案:

  1. 自助式报表,有了;

  2. 即席查询,实际上被数据开放实验室(OpenDataLab)间接又实现了一遍;

  3. 数据可视化,对应于数屏(DataB);

  4. 自助ETL,对应于魔盒(DataCube)。

这些解决方案的目的都是一个:

共享数据,共享计算资源,共享能力。

 

0x01,共享能力

   我们的研发哲学讲求,凡是被不断重复的(coding)过程,就要将其工具化,绑定到自动化流程之中,目的是解放生产力,提高生产效率,为的是让大家不陷入日复一日年复一年的重复性工作里。

   自助式报表对外提供了报表的图形化设计界面。

   数屏对外提供了监控大屏的图形化设计界面。

   魔盒对外提供了 Spark/SparkSQL 等离线计算的图形化操作界面。

   数据开放实验室对外提供了对授权数据的查询、发布和下载的图形化操作界面。

   这样,数据、资源、能力都共享之后,同一个集群,不同研发团队,可以心无旁骛地做更多的事情。

 

0x02,数屏的技术栈

前端:

React+Redux+D3.js+Three.js等。

后端:

Java+HBase。

前端所使用的包清单为:

包名称

描述

QS

发起 Ajax 请求时 JSON 串转换成 form-data

D3

图表绘图工具

Less

CSS 构建工具

Three

3D 绘图工具

Axios

AJAX 请求工具,仅支持 CORS 模式

React

React

Redux

Redux

CountUp

翻牌器

Immutable

数据层有 HASH 值,主要判断组件是否更新

用于加速 React 渲染

Normalize

去掉 input、body 等默认样式值(多浏览器兼容)

Redux-Saga

Redux 流程中的 AJAX 数据请求异步

React-Router

React 路由模块

History

管理路由层会话历史

React-Ace

在线代码编辑器

React-Color

颜色选择器

React-ID-Swiper

分屏滚动

SortableContainer

页面拖拽

Dom-To-Image

基于 Canvas 的 DOM 转换成图片

 

为什么使用Redux?

   大型应用中不同组件共享同一个数据源的情况是常见的,如果都让组件自身来维护一份的数据,很容易造成数据混乱。组件内部也由于夹带着处理数据的逻辑,从而和数据耦合到一起了。

   Redux 框架解决了这个问题,简单来说,它将 React 由父级传递数据,变为了由一个统一的数据源 store 单向地向各个组件传递数据。

   我们通过使用 Redux 能够将数据集中统一管理起来放到组件的最顶层,然后分发给所有组件,每个组件只管渲染,不处理数据逻辑。

 

0x03,数屏的能力

   登录系统之后,点击“新建可视化”大按钮,进入编辑向导。

   第一步需要先选择模板。目前只有两个模板。点击创建大屏即可。

 

图3 新建可视化-选择模板

 

第二步,在大屏编辑界面上,我们可以看到很多组件,如柱状图,饼图,数字翻牌器,折线图,漏斗图,地图,标题,时间器,等等,往大屏上拖拽即可,如下图所示:

 

图4 新建可视化-拖拽组件

 

第三步,选中组件,设置样式。如下图所示,我选中了一个折线图:

 

第四步,选中组件,设置数据源,如下图所示:

 

图6 新建可视化-编辑组件数据源

 

目前,数据源类型有三种:

  1. 静态数据:即按规定格式,写在 JSON 静态数据里,不可变;

  2. API:即自己在远端提供一个返回规定格式 JSON 数据的 Web Service;

  3. 数据库:如下图所示,选好数据库,写标准SQL了:

 

图7 新建可视化-组件数据源-数据库

 

   通过右上角的预览功能,测试通过之后,就可以点击“发布”了。发布的时候需要设定这张大屏的验证密码。

   至此,这张监控大屏就配好了。

 

-EOF-

赠图四枚

语录若干:


Facebook 终于让步了,React 许可又改为标准的 MIT 协议。

但以后 FB 再开源别的什么神器,还有人敢用吗?

信用经不起折腾啊。

/*

React 是 2013 年 5 月开源的。

随着 React 用户的增多,Facebook 在 2016 年7月修改了开源许可协议中的附加专利条款 Additional patent grant。

今年7月16号,Apache 基金会把 Facebook BSD + Patents 加入了黑名单,并从开源项目中移除。

8月份,Facebook 发表了一篇名为《关于React使用许可协议的官方声明》的申明,任何人不能将 React 用于与 Facebook 及其合作公司有直接或间接竞争关系的项目中,否则 Facebook 公司将自动取消其使用许可。

*/


骗中骗,局中局,中国互联网生态:《百合网红娘直言好多用户是假的:天天都有投诉》,前有校园贷、裸条,再有招聘网站沦为传销围猎场,而隐藏在水下的是相亲网站上多年来融合了茶托、酒托、业务推销、网店、微商、借钱、传销等经典骗局。


无极说如果只谈修身治国平天下那是错的,因为这只是后半句话,前面还有半句呢:“物格而后知至。知至而后意诚。意诚而后心正。心正而后身修。身修而后家齐。家齐而后国治。”修身得从最开始的格物致知做起,否则单纯修身也没有意义(闷在小黑屋里修什么身吟诗做赋?)。什么是格物致知?那就是先要了解业务,真刀真枪干起来,看清楚事物的规律,借事修人,借人成事,修身才有意义。

 

-END-

文章评论

老程序员的下场
老程序员的下场
鲜为人知的编程真相
鲜为人知的编程真相
代码女神横空出世
代码女神横空出世
中美印日四国程序员比较
中美印日四国程序员比较
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
编程语言是女人
编程语言是女人
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员的鄙视链
程序员的鄙视链
程序员和编码员之间的区别
程序员和编码员之间的区别
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员都该阅读的书
程序员都该阅读的书
我的丈夫是个程序员
我的丈夫是个程序员
一个程序员的时间管理
一个程序员的时间管理
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Java程序员必看电影
Java程序员必看电影
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
那些争议最大的编程观点
那些争议最大的编程观点
为什么程序员都是夜猫子
为什么程序员都是夜猫子
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员应该关注的一些事儿
程序员应该关注的一些事儿
我是如何打败拖延症的
我是如何打败拖延症的
程序员必看的十大电影
程序员必看的十大电影
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
 程序员的样子
程序员的样子
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
漫画:程序员的工作
漫画:程序员的工作
每天工作4小时的程序员
每天工作4小时的程序员
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
10个调试和排错的小建议
10个调试和排错的小建议
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有