可在预览模式直接调节的可视化进度条

先安装 Metaedit 插件，打开 Auto Properties ，点它右下角的齿轮，左边的框框填个 new，右边不用填，进度条里的东西都是可以点的！

```dataviewjs
let dv_=app.plugins.plugins["dataview"].api
let {update,autoprop} = app.plugins.plugins["metaedit"].api

let file = dv.current()
let af = app.vault.getMarkdownFiles().filter(p=>p.path==file.file.path)[0]
let container = this.container

let content = await app.vault.readRaw(file.file.path)
let regexp = /(?<=\%\%)[\s\S]*?(?=\%\%)/
let rawText = regexp.exec(content)[0].split('\n').filter(p=>p.length!=0)
let Data = rawText.map(p=>p.split('+|+')).map(p=>[p[0],Number(p[1]),p[2]=Number(p[2])])

// 表格元素
let rank = (data,i)=>{
	let com = table.createEl('div',{'cls':'com'})
    let progress = com.createEl('div',{cls:'progress'})
    let title = dv_.renderValue(Data[i][0],com)
    let bar = progress.createEl('div',{cls:'p-bar'})
    progressColor(bar,Data[i][1]/Data[i][2])
    bar.style.width = Data[i][1]/Data[i][2]*100+'%'
    let button = bar.createEl('div',{cls:'btn'})
    let btn_p = button.createEl('div',{'text':'+'})
    let btn_s = button.createEl('div',{'text':'-'})
    let ratio1 = bar.createEl('div',{'cls':'per','text':String(Data[i][1])})
    let ratio2 = bar.createEl('div',{'cls':'per','text':'/'})
    let ratio3 = bar.createEl('div',{'cls':'per','text':String(Data[i][2])})
    btn_p.onclick = function() {
	    Data[i][1]+=1
        m(i,ratio1,ratio3,bar)
    }
    btn_s.onclick = function() {
	    Data[i][1]-=1
        m(i,ratio1,ratio3,bar)
    }
    ratio1.onclick = async function() {
		let text = await autoprop('new')
		Data[i][1] = Number(text)
		m(i,ratio1,ratio3,bar)
	}
    ratio3.onclick = async function() {
		let text = await autoprop('new')
		Data[i][2] = Number(text)
		m(i,ratio1,ratio3,bar)
	}
}

// 表格本体
let table = container.createEl("div",{'cls':'table'});
Data.map((p,i)=>rank(p,i))

// 保存按钮
let button_ = container.createEl('div',{'id':'con'})
let btn_save = button_.createEl('button',{'text':'save'})
btn_save.addEventListener('click',async (evt)=> {
    evt.preventDefault()
    let data = '\n'+Data.map(p=>p.join('+|+')).join('\n')+'\n'
    content = content.replace(regexp,data)
    app.vault.modify(af,content)
})

// 排序
let sortOptions = ['名称 A-Z','名称 Z-A','百分比-正序','百分比-倒序']
let sortFun = [
	(a,b)=>dv.compare(a[0],b[0]),
	(a,b)=>dv.compare(b[0],a[0]),
	(a,b)=>dv.compare(b[1]/b[2],a[1]/a[2]),
	(a,b)=>dv.compare(a[1]/a[2],b[1]/b[2]),
]
let se = button_.createEl('select')
let op = sortOptions.map(p=>se.createEl('option',{'text':p}))
se.onchange = function() {
	let index = se.selectedIndex
	table.empty()
	Data = Data.sort(sortFun[index])
    values = Data.map((p,i)=>rank(p,i))
}

// 其他函数
function progressColor(bar, p) {
	if(p>=0 && p<0.3) bar.className = 'p-bar p-red'
	else if(p>=0.3 && p<0.6) bar.className = 'p-bar p-yellow'
	else if(p>=0.6 && p<=1) bar.className = 'p-bar p-green'

}
function midifyData(i) {
    if(Data[i][1]>Data[i][2]) Data[i][1] = Data[i][2]
    if(Data[i][1]<0) Data[i][1] = 0
}
function m(i,ratio1,ratio3,bar) {
    midifyData(i)
    ratio1.innerHTML = Data[i][1]
    ratio3.innerHTML = Data[i][2]
    bar.style.width = Data[i][1]/Data[i][2]*100+'%'
    progressColor(bar,Data[i][1]/Data[i][2])
}
```

%%
高数 - 曲线曲面积分+|+8+|+8
电路原理+|+188+|+259
%%

css

.table {
  overflow-x: auto;
  overflow-y: hidden;
}
.com {
  margin: 0.3em;
}
.com div {
  float: left;
}
.btn {
  margin-left: 1px;
  display: flex;
  background: rgba(0,0,0,0)!important;
  -webkit-user-select: none;
  height: 1em;
}
.btn div {
  background: rgba(0,0,0,0)!important;
  line-height: 8px;
  height: 1em;
  width: 1em;
}
.btn div:hover {
  opacity: 0.3;
}
.per {
  -webkit-user-select: none;
  line-height: 14px;
  font-size: 0.8em;
}
.progress {
  background: transparent;
  margin-right: 0.3em;
  padding: 0.15em;
  border-style: solid;
  border-width: 0.15em;
  border-radius: 0.25em;
  width: calc(var(--line-width-readable)*0.5);
}
.p-bar.p-red {
  background: #c70000;
}
.p-bar.p-yellow {
  background: #948600;
}
.p-bar.p-green {
  background: #008a20;
}
.p-bar {
  display: flex;
  height: 0.75em;
  border-radius: 0.1rem;
  transition: width .2s linear;
}