普通视图

发现新文章,点击刷新页面。
昨天以前diss带码

datart系列01:图表插件开发作品大赛

作者 dumplingbao
2022年3月27日 10:00

概述

2022年的第一篇,最近疫情+航空事故,虽是春暖花开,还是宅在家开码。借着datart图表插件开发作品大赛,给开了个头,datart的头,写作的头,但愿后续多写,今年估计的写的方向也会比较分散。

这一篇就当是参加图表插件开发作品大赛的一次开篇总结,也算是预热,这次采用datart自定义插件的形式,全部用自定义插件的方式,不改动源代码,不管怎么说,datart自定义插件发现越用越丝滑,很看好这一特性。后续再写datart源码及二次开发。

作品:

作品1:海洋鱼馆(动画)

这个作品算是魔改,但确实有着特殊的应用场景

这个在Davinci的时候做过扩展,这次全新的素材

造了鱼馆的轮子来适配datart的插件,后期我们再展开思路讲实现,并开源出来(包括素材)

作品2:地图(echarts)

这个也在Davinci扩展了,这次也是做了集成,场景没什么好说的,直接看效果,这个本来也想套一层封装,发现有点问题,直接用原生js做的集成

作品3:智能仓库(threejs)

智能数字化车间,3D车间模型等等,这种3D场景化很多人都追求,甚至是偏执。查了资料,看了Threejs官网所有的demo,逛了社区,确实没找到高大上且合适的场景化模型。就从网上找了个智能仓库的场景做了集成,个人理解这种3D场景就是先做场景化的模型(这种模型确实需要专业人来做,上手有门槛),在场景位置上展示数据或者图表。这个也是造了适配datart的轮子,算是个demo,半成品吧,后期展开讲,也开源出来,有专业水平的可以做模型然后集成到datart。

作品4:手绘风格(D3)

这个效果没做成功,在Davinci的时候因为受限于echarts就没有做,这次可以扩展D3,本以为这个应该是最简单,确没有成功,初步判断应该是iframe嵌套导致滤镜不成功,没找到合适的方案。不过除了滤镜D3其它的效果集成还是没有任何问题的,后续再研究。

总结:

总结一下datart自定义插件,对于前端来说可能算不上新技术,但是对于BI来说就是很好一次微创新:

  • 特殊化定制,满足个性化需求
  • 上手容易,官方这块文档很详细
  • 扩展灵活,很丝滑
  • 像D3这种灵活性很高的,本是就具备无限可能,所以datart也具备无限可能

小程序:mqtt+webview控制显示内容

作者 dumplingbao
2021年7月22日 23:48

看到mqtt+webview似乎不知道能做什么,mqtt微消息服务更适用iot物联网,这个应该熟悉,但是似乎还是得从webview说起。webview的场景不仅仅是手机端的APP或者小程序用到,好多基于android主板显示的设备、大屏等webview都发挥了很大的作用。这里我们一是验证小程序的mqtt,二是通过mqtt控制设备自动切换显示内容,这样试想一下,其实就是远程操控设备显示内容的一种很好的方式。

效果

01

mqtt小程序端

需要mqtt.js客户端库:https://github.com/mqttjs/MQTT.js

小程序配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const app = getApp()
var mqtt = require('../../../utils/mqtt.min')
var client = null

Page({

/**
* 页面的初始数据
*/
data: {
webUrl: 'https://www.baidu.com'
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.connnectMqtt()
},

connnectMqtt: function (){
var that = this
const options = {
connectTimeout: 4000, // 超时时间
clientId: 'mqtt_' + Math.random().toString(16).substr(2, 8),
port: 8083, //重点注意这个坑
}

client = mqtt.connect("wx://xx.xx.xx.xx/mqtt", options);
client.on('reconnect', (error) => {
console.log('正在重连:', error)
})

client.on('error', (error) => {
console.log('连接失败:', error)
})
client.on('connect', (e) => {
console.log('成功连接服务器')
       //订阅一个主题
client.subscribe('test', {
qos: 0
}, function(err) {
if (!err) {
console.log("订阅成功")
}
})
})
client.on('message', function (topic, message) {
console.log('received msg:' + message.toString());
that.setData({
webUrl: message.toString()
})
console.log(that.data.webUrl)
})
}
})
1
<web-view src="{{webUrl}}" bindmessage="getmessage"></web-view>

mqtt服务端安装

EMQ X 是一款完全开源,高度可伸缩,高可用的分布式 MQTT 消息服务器

git地址:https://gitee.com/emqx/emqx

docker安装步骤

1
$ docker search emqx // 查看版本
1
$ docker pull emqx/emqx // 拉取镜像
1
$ docker run -dit --name emqx -p 18083:18083 -p 1883:1883 -p 8083:8083 -p 8084:8084 emqx/emqx:latest // 运行
1
$ docker exec -it  emqx /bin/sh // 进入命名

web管理界面

http://127.0.0.1:18083

#账号: admin

#密码: public

端口介绍

1883:MQTT 协议端口

8883:MQTT/SSL 端口

8083:MQTT/WebSocket 端口

8080:HTTP API 端口

18083:Dashboard 管理控制台端口

mqtt客户端工具

我们没必要写后台代码,直接用个mqtt客户端工具做测试,用的MQTTX,这个就根据个人习惯选了

MQTTX地址:https://github.com/emqx/MQTTX/releases

安装完成配置验证即可。

代码

diss

已提交github,扫码关注公众号(diss带码),回复:webview,获得源码github地址

github自定义主页秀

作者 dumplingbao
2020年9月3日 23:28

github自定义主页秀


github支持自定义主页已经有一段时间了,今天尝试了一下。详细教程可以从网上搜索一下,比较简单,也可以直接到我的github(下面有链接)复制一下,记得点赞奥。

😎 秀一秀

github01

🔨 创建

​ 很简单,创建与github账号同名公开的仓库,并初始化README.md,完成

🔧 美景

​ 每日刷新或者随机(自己去选对应的类型的api)

https://api.lyiqk.cn/

​ 备注:github由于缓存了图片,不会每次都刷新

​ 建议用必应每日一图:https://api.lyiqk.cn/bing

🔑 我的自定义主页

​ 连接地址:https://github.com/dumplingbao/dumplingbao

​ 备注:由于是markdown格式,预览效果与实际展示有所不同

Davinci-二次开发系列07:BI新元素尝试

作者 dumplingbao
2020年8月20日 12:00

​ 忙于工作,停更很长时间了,最近继续开搞,先写此一篇。生活犹如演绎,写作算是解说,先看效果:

seas-xgt01

由来

​ 想在BI里面引入一些别具一格的新元素,这个想法由来已久,本来是想做下面的这种效果:

xkcd

​ 这个是chart.xkcd 手绘风格图表库,我之前写过一篇介绍,详细介绍可以查看手绘风格的图表库(char.xkcd),可是由于davinci采用的是echarts,通过尝试未找到合适的很好的解决方案,只能暂时搁置了。

​ 所以先做了这个鱼馆的场景,缘起于之前做过的项目,类似于一个积分系统,从积分到最终呈现单独做的。试想一下,如果有这样的BI工具,支持这样的场景,也就能根据数据快速生成,所以这样想,需求、场景都是有的,就尝试在BI里面集成这种鱼馆的效果,也算给BI的一种新的元素。

技术选型

​ 技术点在动画选型上,后端不需要操作,这里我们推荐几种技术实现

  • jQuery:之前就是用jQuery实现的,完全没有问题,就是代码量看上去比较繁琐

  • lufylengend:这是个h5的引擎,简单、功能强大,有兴趣可以了解一下,用于实现这个功能偏重,但是后续考虑增加一些特性会比较方便,功能没得说。

  • animate相关的npm包:

    ​ 1、animate-npm:这个包有点像被抢注了,功能实在简单,简单到看上去就不是你想要的

    ​ 2、bendc/animate:这个是个封装的js文件,是6年前开发的了,完全够用,操作方便

    ​ 3、bendc/animateplus:这个包和上一个是一个作者,一看就是升级版,也已经开发有3年了,支持npm直接安装

​ 这里我们用的bendc/animateplus,也可以尝试其它的,我们用到的动画只是简单的,不需要复杂的功能,更不需要复杂的算法。这里特别强调一下,这个本身就是开源的封装,没有完整的api,知识盲点会导致需要不断的尝试才行。

功能点介绍

序号功能备注
1数据模型一个维度,一个指标,示例:用户和积分
2主题鱼馆背景可切换,海洋元素一些引入
3速度速度可设定
4积分等级目前固定,通过积分判断区间和对应的等级及动物
5信息展示默认展示维度信息,如用户及积分信息

背景切换

seas-bj

速度切换

seas-speed

显示指标

单击显示指标信息,再次单击隐藏指标信息,我们也不提倡排名看分就隐藏

seas-xszb

示例数据结构

seas-data

积分等级处理

​ 这里效果图是随机取的动物,正常配置通过积分判断所处的等级和对应的动物,目前是静态的配置文件,后续也应该是可配置化。

seas-level

交流学习

学习Metabase、Davinci等开源BI,群号:72569367,感兴趣的可以加一下。

备注:技术选型尝试多次,每个都有各自的优缺点,就会有所取舍,亦或者不能完全深入了解,这次BI里面加入这种非常规的东西也算是一种尝试,欢迎进群交流,留言和点赞。gif图片太大,进行了压缩,影响效果,由于素材牵扯版权的问题,暂时也不能提交代码,希望能制作素材的朋友联系。

Metabase-BI系列12:0.35版本表达式是真的香

作者 dumplingbao
2020年4月12日 00:00

​ 2020年3月30日,Metabase0.35版本真的来了,正如官方所说,0.35真的是一个重要的版本,最重磅的升级就是自定义表达式的升级,直接使Metabase的查询编辑器有了质的飞跃,对数据分析中自定义列、数据过滤器、数据聚合功能有了很大的提升。

​ 这个重要的升级通俗讲:

  1. 提升数据处理能力,不用写sql就能进行更多的数据转换
  2. 不同数据库,通用处理规则,提升用户体验
  3. 改为用[]方式获取字段,自动提示操作十分人性化

升级前后对比

序号功能升级前升级后(0.35之后)
1自定义列只支持数字类型的+-*/1、支持字符字段
2、新增字符和数字处理18个函数absconcat
3、支持升级前功能
2过滤器1、单个字段判断筛选
2、数字类型不是为空不为空
3、字符类型除上面四个外,还有包含不包含以..开始以..结束
4、其它类型不再赘述,升级前后未变化
1、支持自定义表达式
2、新增函数支持betweencontainsednWithstartWithinterval
3、扩展运算符:ANDORNOT>>=<<==!=
4、支持升级前功能
3聚合1、支持自定义表达式
2、原有聚合函数的+-*/
1、支持自定义表达式
2、新增了9中数字的处理函数
3、支持升级前功能

过滤器:

filter-expressions

聚合:

first-expression

新增表达式介绍

这次表达式确实扩展了很多,这里挑了几个常用的预览一下,也可以去Metabase官方查看全部表达式

名称句法备注
Betweenbetween(column, start, end)1、日期范围内 2、数字区间内between( [Rating], 3.75, 5 )
Casecase(condition, output, condition, output …)多情况判断,如枚举类型case( [Weight] > 200, “Large”, [Weight] > 150, “Medium”, “Small” )
返回非空值coalesce( value1, value2, …)按顺序查看每个参数中的值,并为每行返回第一个非空值。coalesce( [Comments], [Notes], “No comments” )
字符串拼接concat(value1, value2, …)1、字符串或字段拼接 2、数值会转换字符拼接(已测试)concat([Last Name] , “, “, [First Name])
长度length(text)返回文本中的字符数length([Comment])
小写转换lower(text)以小写形式返回文本字符串。lower( [Status] )
去除左空格ltrim(text)ltrim( [Comment] )
正则表达式提取regexextract(text, regular_expression)根据正则表达式提取匹配的子字符串regexextract( [Address], “[0-9]+” )
替换replace(text, position, length, new_text)replace( [Order ID], 8, 3, [Updated Part of ID] )
去除右空格rtrim(text)rtrim( [Comment] )
截取字符串substring(text, position, length)substring( [Title], 0, 10 )
去除空格trim(string)trim( [Comment] )
大写转换upper(text)upper( [Status] )

也可直接查看更多表达式连接(谷歌自动翻译):https://ossbao.oss-cn-qingdao.aliyuncs.com/blog/Metabase/12/Metabase-bds.html

0.35其它说明

  • 新增表达式并不能兼容所有的数据库,因为数据库差异很大,做到这种程度已经很牛x了,表达式数据库兼容情况参加官方说明
  • 此外0.35版本调整了查询结果缓存内存的策略,改为数据库流,调整了一些api,着眼性能提升
  • 当然少不了的就是修复bug了,参加官方说明

交流学习

刚建的群,学习Metabase、Davinci等开源BI,群号:72569367,感兴趣的可以加一下。

❌
❌