0046 时间条-Dataview

效果展示

DayLine.png

对，我就是为了展示两个快递驿站的营业时间而已，然后就写了这个。

代码

依然是 Dataview 自定义视图。

DayLine-dataview/view.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
57
58
59
60
61
62
63
64
65
/** @type {object} 默认配置 */
const defaultOpt = {
  time: '06:00 18:00',
  nextDay: false,
  style: [4]
}

/** @type {object} 最终配置 */
const opt = Object.assign({}, defaultOpt, input ? input : {})

/** @type {array} 时间点数组 */
const times = opt.time.split(/\s+/g).map(t=>t.split(/~/g).map(p=>{
  const pArr = p.split(/:/g)
  return Number(pArr[0])*60+Number(pArr[1])
}))

/** @type {number} 起始点 */
const startTime = times[0].length===1 ? times[0][0] : 360
/** @type {number} 结束点 */
const endTime = (times[times.length-1].length===1 ? times[times.length-1][0] : 1080) + (opt.nextDay ? 1440 : 0)
/** @type {number} 总时长 */
const totalLong = endTime-startTime

/**
 * 计算百分比
 *
 * @param {number} a 第二个时间点（靠后）
 * @param {number} b 第一个时间点（靠前）
 * @returns {string}
 */
const getPercentage = (a, b)=> ((a-b)/totalLong*100).toFixed(1)+'%'

/**
 * 计算用以显示的时间
 *
 * @param {number} t
 * @returns {string}
 */
const timeToShow = t=>String(Math.floor(t/60)%24).padStart(2, '0')+':'+String(Math.floor(t%60)).padStart(2, '0')

/** @type {number} 当前时间段的起始点 */
let startPoint = startTime
/** @type {string} 最终输出代码 */
let code = ''
/** @type {number} 第几个时间段，用来计算样式 */
let barCount = 0
times.forEach((t, i)=>{
  /** 排除起始结束时间点 */
  if((i===0 || i===times.length-1) && t.length===1) return
  const sp = t.length===1 ? startPoint : t[0]
  const ep = t[t.length-1] + (t[t.length-1]<sp && opt.nextDay ? 1440 : 0)

  console.log(sp, ep, startTime, endTime)

  const before = getPercentage(sp, startPoint)
  const long = getPercentage(ep, sp)
  const color = `hsl(${opt.style[barCount%opt.style.length]%12*30}, 100%, 36%, .5)`

  code += `<div class="dms-day-line-bar" style="margin-left: ${before}; width: ${long}; background-color: ${color};" aria-label="${timeToShow(sp)}~${timeToShow(ep)}"></div>`
  startPoint = ep
  barCount++
})

const root = dv.el('div', '', { cls: "dms-day-line" });
root.innerHTML = code

DayLine-dataview/view.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dms-day-line {
  display: flex;
  width: 100%;
  height: 8px;
  margin: 2px auto;
  box-sizing: border-box;
  background-color: rgba(128, 128, 128, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
  flex-wrap: nowrap;
}
.dms-day-line-bar {
  height: 6px;
  background-color: rgba(255, 128, 128, .4);
  border-radius: 3px;
  flex-grow: 0;
  flex-shrink: 0;
}

使用方法

任意笔记中插入 dataviewjs 代码块：

1
await dv.view('DayLine-dataview', {time: '08:30~11:30 13:30~18:00'})

一些细节

time 参数中

  • 的时间格式为 HH:mm，即两位 24 小时制的小时，和两位分钟，分号为英文分号
  • 两个时间段之间用空格分隔
  • 每段时间（一个开始时间点，一个结束时间点），用英文半角 ~ 进行连接
  • 时间条默认全长为：06:00~18:00
  • 如果第一个时间段是一个单独的时间点，则被认为是设定时间条的起点
  • 如果最后一个时间段是一个单独的时间点，则被认为是设定时间条的终点
  • 其他时间段如果只给出了一个时间点，则以前一个时间段的终点作为起点

Style 参数中

  • 给出一个数组，其中包含 0~11 的任意数字
  • 会循环使用对应的样式（颜色）

例如：

1
await dv.view('Templates/Dataview/DayLine-dataview', {time: '08:00~11:30 13:30~17:30', style: [6, 7]})

nextDay 参数

如果要表示的时间段是从第一天到第二天的，比如记录睡眠，把这个参数设置为 true，或者 1。

完整参数使用展示：

1
2
3
4
5
await dv.view('Templates/Dataview/DayLine-dataview', {
  time: '20:00 21:30~06:00 08:00',
  style: [6],
  nextDay: true
})