【Dataview View】进度条分隔线

显示一个进度条，可以自定义文字、数值，颜色，并有几种预设（年进度，月进度，周进度，日进度）可供选择。用来显示进度或者作为内容分隔条都不错。

调用方法

创建一个 dataviewjs 代码块，并放入如下代码：

基础调用

第一个双引号内是此视图的路径（见下方安装方法）。后面给出一个 0~100 的值作为要显示的进度。

dv.view("Progress-Bar", { value: 12.34 })

如果使用预设，则：

dv.view("Progress-Bar", { type: "year" })

可选类型：

year：年进度
month：月进度
week：周进度
day：日进度

特定时间

dv.view("Progress-Bar", { type: "year", value: "2024-10-31 08:18:07" })

选择了预设类型时，可以在 value 属性中指定一个时间（格式如上），表示这个时间点的年（月、周、日）进度。

其他选项

width：1~~100，表示进度条占据的总宽度，如果不希望进度条占据全部正文宽度可以修改此值，一般 60~~80 比较合适
text：进度条左侧显示的文字，比如 "Year progress" 等
precision：精度，进度显示几位小数，默认为 2
color：进度条的颜色，默认为文字颜色（十分朴素）

安装方法

新建一个 Progress-Bar 文件夹，将下方代码保存为 view.js 文件放入此文件夹，然后即可参照上方调用方法。

view.js

/**
 * 进度条
 * @author: 稻米鼠
 * @description: 显示一个可以自定义的进度条，可用于内容分隔条等
 * @created: 2024-10-31 07:19:44
 * @updated: 2024-10-31 07:19:44
 * @version: 0.0.1
 */

const container = dv.container

const config = Object.assign({
  /** 进度条宽度，百分比 1-100 */
  width: 100,
  /** 进度条类型，不填写为 normal，即显示输入的进度值，可选预设： Year | month | week | day，显示对应时间区间的进度 */
  type: 'normal',
  /** 进度条左侧的文字，如果不填写则不显示 */
  text: '',
  /** 显示精度，默认为 2，即两位小数 */
  precision: 2,
  /** 进度条颜色，默认为 文字颜色 */
  color: 'var(--text-normal)',
  /** 进度条的值，如果 type 为 normal 时，该值为进度，如果 type 为其他预设时，该值为时间点，格式 2024-10-31 07:28:44，将基于此时间计算进度，如未填写，则用当前时间计算 */
  value: '',
}, input)

/** 设置进度
 *
 * @param {number} value
 */
const setProgress = value => {
  container.innerHTML = `
  <style>
    .dms-progress-bar-container {
      margin: 1rem auto;
      display: flex;
      align-items: center;
      gap: .5em;
      flex-wrap: nowrap;
    }
    .dms-progress-bar-text,
    .dms-progress-bar-value {
      flex-grow: 0;
      font-size: .8em;
      line-height: 1em;
      color: var(--progress-color);
    }
    .dms-progress-bar {
      flex-grow: 1;
      height: .8em;
      border: 1px solid var(--progress-color);
      border-radius: .4em;
      overflow: hidden;
      border-radius: .4em;
    }
    .dms-progress-bar-inner {
      height: 100%;
      width: ${value}%;
      background-color: var(--progress-color);
      opacity: .6;
      border-radius: .4em;
    }
  </style>
  <div class="dms-progress-bar-container" style="--progress-color: ${config.color}; width: ${config.width}%;">
    <div class="dms-progress-bar-text">${config.text}</div>
    <div class="dms-progress-bar">
      <div class="dms-progress-bar-inner"></div>
    </div>
    <div class="dms-progress-bar-value">${value.toFixed(config.precision)}%</div>
  </div>
  `
}

if (config.type === 'normal') {
  setProgress(Number(config.value))
}else{
  const timePoint = (config.value && config.value.length) ? new Date(config.value) : new Date()
  let start, end
  switch (config.type.toLowerCase()) {
    case 'year':
      start = new Date(timePoint.getFullYear(), 0, 1)
      end = new Date(timePoint.getFullYear()+1, 0, 1)
      break
    case 'month':
      start = new Date(timePoint.getFullYear(), timePoint.getMonth(), 1)
      end = new Date(timePoint.getFullYear(), timePoint.getMonth() + 1, 1)
      break
    case 'week':
      start = new Date(timePoint.getFullYear(), timePoint.getMonth(), timePoint.getDate() - timePoint.getDay())
      end = new Date(timePoint.getFullYear(), timePoint.getMonth(), timePoint.getDate() - timePoint.getDay() + 7)
      break
    case 'day':
      start = new Date(timePoint.getFullYear(), timePoint.getMonth(), timePoint.getDate())
      end = new Date(timePoint.getFullYear(), timePoint.getMonth(), timePoint.getDate() + 1)
      break
    default:
      start = new Date()
      end = new Date()
  }
  setProgress((timePoint.getTime() - start.getTime()) / (end.getTime() - start.getTime()) * 100)
}