smashing 三方widgets 使用
smashing 有一套自己的约定,包括widgets 以及dashboard,还有就是关于数据的处理
约定如下
- 三方widgets 统一在widgets 目录下,一般包含了基于coffee 的js 组件,基于scss 的css 还有就是html
- 数据的统一通过job 处理,可以配置数据获取的频率,然后就是发送数据
- dashboard 统一在dashboards 目录中
以下是一个table 组件的使用
集成table 组件
说明集成是基于脚手架工具生成的项目
- 项目地址
https://github.com/nick123pig/dashing-table
- clone 或者下载代码
- copy 对应widgets 的内容到widgets 目录中
- 编写简单job
注意send_event 方法的第一个参数my-table
,数据绑定需要
current_valuation = 0
current_karma = 0
SCHEDULER.every '2s' do
hrows = [
{
style: 'color:#888;',
class: 'right',
cols: [
{class: 'left', value: '项目'},
{style: 'color:red; text-align:center;',value: '构建次数'},
]
}
]
rows = [
{ cols: [ {class: 'left', value: 'test'+rand(100).to_s}, {value: rand(100)}]},
{ cols: [ {class: 'left', value: 'ci'+rand(100).to_s}, {value: rand(100)}]},
{ cols: [ {class: 'left', value: 'cd'+rand(100).to_s}, {value: rand(100)}]},
{ cols: [ {class: 'left', value: 'demo'+rand(100).to_s}, {value: rand(100)}]}
]
send_event('my-table', { hrows: hrows, rows: rows } )
end
- 添加dashboard
为了方便直接在sample 中配置,其中data-id
关联了数据,data-view
关联了widgets
<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
<div data-id="my-table" data-view="Table" data-title="构建任务统计" data-moreinfo="更多信息"></div>
</li>
- docker 集成
基于已经做好的容器镜像
FROM dalongrong/smashing
COPY . /app
RUN bundle
EXPOSE 3030
ENTRYPOINT [ "smashing","start" ]
- docker-compose 文件
version: "3"
services:
dash:
build: ./
ports:
- "3030:3030"
image: dalongrong/smashing-demo
启动&&效果
- 启动
docker-compose up -d
- 效果
说明
以上是一个简单的使用,实际上在官方的wiki 中已经提供了很多可选的widgets,还是很方便的,而且编写一个widgets 也很容易
参考资料
https://github.com/nick123pig/dashing-table
https://github.com/Smashing/smashing/wiki
https://github.com/rongfengliang/smashing-docker
smashing 三方widgets 使用的更多相关文章
- [转]nopCommerce Widgets and How to Create One
本文转自:https://dzone.com/articles/what-are-nopcommerce-widgets-and-how-to-create-one A widget is a sta ...
- 分享iOS开发常用(三方类库,工具,高仿APP,实用网站,技术干货)
一 . JSONModel (三方类库会有更新,建议大家在线下载) http://pan.baidu.com/s/1i5ybP1z 二.AFNetworkiong http://pan.baidu. ...
- iOS - .a静态库的打包(包括打包的文件中用到了一些别人的三方库和分类的处理)
一.概念篇 什么是库? 库是程序代码的集合,是共享程序代码的一种方式 根据源代码的公开情况,库可以分为2种类型 开源库 公开源代码,能看到具体实现 比如SDWebImage.AFNetworking ...
- Android开发5:应用程序窗口小部件App Widgets的实现
前言 本次主要是实现一个Android应用,实现静态广播.动态广播两种改变 widget内容的方法,即在上篇博文中实验的基础上进行修改,所以此次实验的重点是AppWidget小部件的实现啦~ 首先,我 ...
- iOS 常用三方类库整理
iOS 常用三方类库整理 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://gi ...
- windows7下php5.4成功安装imageMagick,及解决php imagick常见错误问题。(phpinfo中显示不出来是因为:1.imagick软件本身、php本身、php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个文件放到/php/目录下面)
windows7下 php5.4成功安装imageMagick . (phpinfo中显示不出来是因为:1.软件本身.php本身.php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个 ...
- 李洪强iOS经典面试题142-第三方框架及其管理
李洪强iOS经典面试题142-第三方框架及其管理 第三方框架及其管理 使用过CocoaPods吗?它是什么?CocoaPods的原理? CocoaPod是一个第三方库的管理工具,用来管理项目中的第 ...
- Delphi以及三方控件的源代码规模
这些项目大多数使用C++或者C编写,使用SourceCounter-3.5.33.73工具来统计源代码数量,本来是这里下载的: https://code.google.com/p/boomworks/ ...
- 网络请求三方库——OkHttp
我们知道在Android开发中是可以直接使用现成的API进行网络请求的,就是使用 HttpClient 和 HttpURLConnention ,而Android 4.4 之后 HttpClient ...
随机推荐
- SQL怎么实现SLEEP功能(等待时间) -(转载)
语法格式: WAITFOR DELAY N'小时数:分钟数:秒数.毫秒数' 等待100毫秒: SELECT GETDATE() WAITFOR DELAY N'00:00:00.100' SELECT ...
- 重磅开源 KSQL:用于 Apache Kafka 的流数据 SQL 引擎 2017.8.29
Kafka 的作者 Neha Narkhede 在 Confluent 上发表了一篇博文,介绍了Kafka 新引入的KSQL 引擎——一个基于流的SQL.推出KSQL 是为了降低流式处理的门槛,为处理 ...
- MVC+Ninject+三层架构+代码生成 -- 总结(一、數據庫)
一.數據表 是參照 別人的庫建表的 ,主鍵都是用int 自增,若是跨數據庫的話,建議使用GUID為主鍵.
- C# 填充客户端提交的值到T对象
/// <summary> /// 填充客户端提交的值到 T 对象 如appinfo = AppConvert.To<Appinfo>(context.Reques ...
- springboot 全局异常捕获,异常流处理业务逻辑
前言 上一篇文章说到,参数校验,往往需要和全局的异常拦截器来配套使用,使得返回的数据结构永远是保持一致的.参数异常springboot默认的返回结构: { "timestamp": ...
- windows查看某个端口被哪个进程占用
找出端口对应的PID netstat -ano | findstr 8080 帮助命令netstat -? -a 显示所有连接和侦听端口. -n 以数字形式显示地址和端口号. -o 显示拥有的与每个连 ...
- Nginx中的$document_uri与$request_uri以及$http_referer
Nginx基于$document_uri的访问控制,变量$document_uri该变量等价于$uri,其实也等价于location匹配. 示例1: 当用户请求的url中包含/admin/时,直接返回 ...
- 3.Javascript实现instanceof
instanceof instanceof 用于判断某个对象是否是另一个对象(构造方法)的实例.instanceof会查找原型链,直到null如果还不是后面这个对象的实例的话就返回false,否则就返 ...
- 编写可维护的JavaScript-随笔(二)
一.注释 1. 单行注释 a) 以两个斜线开始,以行位结束 b) 独占一行的注释,用来解释下一行的代码, c) 注释行之前总有一个空行 d) 缩进层级与下一行代 ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...