a coder's diaries

0%

发表于 分类于

前言

Superset是Apache开源的现代化企业级BI应用程序，开发语言为Python/React，有多种搭建环境方式，跟随官方文档使用Docker镜像可轻松搭建部署。

优势

  • 图表类型目前有40余中，折线图、柱状图、扇形图、地理图等基本满足使用要求。
  • 支持csv/excel导入数据，支持数据、效果图下载。
  • 自定义Dashboard拖拽排版交互体验很好。
  • 数据库、数据集、图表、dashboard、用户各个模块管理清晰。
  • 支持在线SQL查询。
  • 支持多种数据库连接。

不足

  • 文档不完善，制作图表参数配置上手难。
  • 某些地方功能不完善，例如数据库数据更新后，图表没有联动更新。
  • 没有文件夹管理。
  • 对开发环境要求较高。

操作流程

  1. 登录
    登录

  2. Home
    Home

  3. 连接数据库
    database
    db2
    db3

阅读全文 »

发表于 分类于

前言

最近我开发的模块需要在线绘制流程图，和G6Editor类似，但是G6Editor不开源，只能用它的底层库G6实现了。先做了一版Demo练习API,如下图

g6_demo

初版

  • 拖拽生成节点
  • 锚点连线，连线动画效果
  • 右击修改名称、删除，选中后键盘删除
  • 画布缩放、自适应、全屏
  • 修改每个节点参数，新建窗口

进阶版

  • 自定义节点
  • 自定义边
  • 自定义behavior
  • 自定义动画

实现过程

1. 绘制画布

首先需要一个带id的标签当作画布的容器

1
<div id="mountNode"></div>

然后创建画布，配置默认参数

1
2
3
4
5
6
7
8
9
10
11
const graph = new G6.Graph({
  container: 'mountNode', // String | HTMLElement，必须，容器 id 或容器本身
  width: 800, // Number，必须，图的宽度
  height: 500, // Number，必须，图的高度
  defaultNode: {}, // 节点的默认类型和样式，包括锚点的显示和位置
  defaultEdge: {}, // 边的默认类型和样式
  nodeStateStyles: {} // 节点状态变化时的样式，例如选中、hover
  edgeStateStyles： {} // 边状态变化时的样式
  modes: {} // 配置behavior, 例如内置的画布拖拽、节点拖拽，自定义的行为
  ...
});

最后渲染数据

1
2
3
4
5
6
7
const data = {
  // 点集
  nodes: [],
  // 边集
  edges: [],
};
graph.read(data);

2. 拖拽生成节点

Html标签内置的draggable为true便可拖拽。将左侧控件拖动到画布上时，生成一个新的节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handleDragstart(e) {
  this.offsetX = e.offsetX;
  this.offsetY = e.offsetY;
},
handleDragEnd(e, item) {
  let data = {};
  Object.assign(data, item);
  data.offsetX = this.offsetX;
  data.offsetY = this.offsetY;
  const graph = this.graph;
  const xy = graph.getPointByClient(e.x, e.y);
  data.x = xy.x;
  data.y = xy.y;
  data.id = uniqueId();
  graph.addItem("node", data);  // 使用addItem或者add添加节点或边
}

3. 生成边

阅读全文 »

发表于 分类于

在 ElementUI 中使用 el-select 多选，option 的 value 值为 object 类型，远程搜索时，label 显示变空，效果如下图

Element

这是因为，再次搜索时，下拉选项里没有之前选中的内容，所以无法显示数据。那么，解决方法，就是在搜索时，把之前的选中内容加到下拉列表里。

页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<el-select
  v-model="value"
  placeholder="请选择"
  multiple
  filterable
  remote
  :remote-method="multiSearch"
  @change="updateValue"
  @remove-tag="doRemoveTag"
  value-key="id" <!-- value为object时必加value-key -->
>
  <el-option
    v-for="item in options"
    :key="item.id"
    :value="item"
    :label="item.name"
  >
    <div>{{ item.name }}({{ item.otherInfo }})</div>
  </el-option>
</el-select>
阅读全文 »

发表于 分类于

洗牌算法

假设有54张扑克牌，按顺序叠放，洗牌之后变成乱序，每张牌的位置随机概率是相同的。
抽象成数组乱序排序，用Math.random生成随机数，使用Fisher–Yates Shuffle的算法，复杂度为O(n)。
这个算法的思想是，数组从后向前遍历，与之前任意元素交换。
使用JavaScript代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function shuffle(arr) {
  let len = arr.length
  let temp
  for(let i = len-1; i>=0; i--) {
    let index = Math.floor(Math.random() * len);
    temp = arr[i]
    arr[i] = arr[index]
    arr[index] = temp
  }
  return arr
}

let arr = []
for(i = 0; i< 54; i++) {
  arr.push(i + 1)
}
shuffle(arr)

发表于 分类于

1. 冒泡排序两两比较，最大放后边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function bubbleSort(arr) {
  let temp
  for (i = 0; i < arr.length - 1; i++) {
    for (j = 0; j< arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      }
    }
  }
  return arr
}

bubbleSort([6, 5, 4, 3, 2, 1])

2. 快速排序找基准，左右递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function quickSort(arr) {
  let len = arr.length;
  if (len <=1 ) return arr;
  let pivotIndex = Math.floor(len / 2)
  let pivot = arr.splice(pivotIndex, 1)[0]
  let left = []
  let right = []
  arr.forEach(num => {
    if (num < pivot) {
      left.push(num)
    } else {
      right.push(num)
    }
  })
  return quickSort(left).concat([pivot],quickSort(right));
  
}
let newArr = quickSort([4, 2, 9, 7, 3])
console.log(newArr)
阅读全文 »