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

lazyloong · 2022 年5 月 18 日 11:59

额，看一下整个文件的内容，我不明白为什么会有non-finite的值

dfsagasd · 2022 年5 月 18 日 12:02

然后就是复制了你的第二段代码，没有其他内容

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

lazyloong · 2022 年5 月 18 日 12:07

我的锅，为了能用 [[a|b]] 来显示双链，把分隔符改为 +|+ 了，改了却忘了说，现在已经改了

dfsagasd · 2022 年5 月 18 日 12:11

哈哈，原来是这样，我说怎么就是不行呢，主要我也读不懂代码，谢谢大佬！

铅笔小明 · 2022 年5 月 27 日 05:24

大佬大佬，我突然有一个想法不知道能不能实现，就是通过按扭直接去修改这个status，状态。在表格模式点击按扭可以出现三个选项“计划中”“进行中”“已完成”。方便直接修改。

lazyloong · 2022 年5 月 28 日 13:40

直接修改的话可以参考宏沉一笑大佬的文章，我也没仔细看，只看到了可以写按钮的方法就兴奋的跑去实验了，才发现弹窗方法大佬也展示了

于是，进度条3.0版本就出现了

摘要

先安装 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;
}

铅笔小明 · 2022 年5 月 28 日 15:44

感谢大佬回复，果然我这种小菜鸟好难啊哈哈哈。

时间晶体 · 2022 年6 月 7 日 16:23

请问这是为什么呢？

lazyloong · 2022 年6 月 7 日 16:42

嗯，好像没添加css吧

另外可能是没表达清楚，数据的格式是

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

时间晶体 · 2022 年6 月 8 日 15:59

是我没有更新最新的css。现在搞好了，感谢大佬

方觉晓 · 2022 年8 月 26 日 13:38

感谢大佬拯救我这种只会control c的小白

syunkhee · 2023 年1 月 27 日 13:33

请问大佬，新版OB1.0里面按照这个设置了但是报错。。。
CSS 已经设置好了，在snippet里面也已经打开了。。。

贴入DS代码就显示。。。

这个带按钮的进度条好好看啊。。。求大佬有空看看

syunkhee · 2023 年1 月 27 日 15:41

神了。。。
我如果单纯复制内容进ob是不隔行的，这次全选复制就可以用了，互动性太强了。。。感谢L老总。。顺路有个问题我不知道该不该新发个帖子。。。
就是除了cuman大佬那个示例库里的每日一句外，其他我找到的所有嵌入ob的方式只能嵌入一句话，用iframe调用好像只有svg的模式可用。。我比对之前的dataview示例，替换诗词api接口最后都是报错。。orz
我按照之前那个历史上的今天的dataview把替换了下面这4项，然后地址填了https://v1.jinrishici.com/all.json,但什么也显示不出来，orz。。请大佬有空看看，如果没法弄我就继续退回之前的每日诗词模式。。。
{
“content” : “梅定妒，菊应羞。画阑开处冠中秋。”,
“origin” : “鹧鸪天·桂花”,
“author” : “李清照”,
“category” : “古诗文-植物-菊花”
}

lazyloong · 2023 年1 月 28 日 03:26

这样满足你的需求吗

```dataviewjs
let url = `https://v1.jinrishici.com/all.json`
let res = await request({url: url,method: "GET"});
let data = JSON.parse(res)
dv.paragraph(data.content)
```

syunkhee · 2023 年1 月 28 日 12:14

lazyloong:

这样满足你的需求吗

```dataviewjs
let url = `https://v1.jinrishici.com/all.json`
let res = await request({url: url,method: "GET"});
let data = JSON.parse(res)
dv.paragraph(data.content)

抱歉大佬突然忘了今天还要上班。。。昨天下线了，这是目前的效果
我把首字母放大这个关了效果就出来了。。后续加其他的都很方便。。再次给大佬嗑一个~

泰勒斯 · 2023 年5 月 4 日 05:08

我用您的这段代码显示进度条之后，包含进度条代码的笔记都无法删除，请问有什么办法可以解决这个问题吗

lazyloong · 2023 年5 月 4 日 06:14

啊，抱歉，之前加了这两句

app.workspace.on('active-leaf-change',()=>{save()})
app.workspace.on('quit',()=>{save()})

工作区变动就会自动保存，但是会导致你这样的情况（因为删除文件也属于工作区变动），在系统资源管理器里删除应该就行了，再不行就在关闭ob的情况下删除。

还是不要这两句了为好

北极星 · 2023 年5 月 28 日 14:13

请问这个图是怎么实现的呀

Leiyi548 · 2023 年10 月 26 日 09:34

你可以把数据放到 frontmatter 操作的话，那就不用 save 了，还不占你的文本，还能跟别的插件结合。下面是我的代码。

tags:
title: Dataview frontmatter Button
douyin: 2
lolm: 3
date created: 2023年10月26日,星期四,下午 16:05:51
date modified: 2023年10月26日,星期四,下午 17:33:12

let file = dv.current()
let af = app.vault.getMarkdownFiles().filter(p=>p.path==file.file.path)[0]
let frontmatter = file.file.frontmatter
let active_file = app.workspace.getActiveFile()
let douyin = frontmatter.douyin
let lolm = frontmatter.lolm

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 Data = [
// 0.应用名，1.frontmatter数据，2.进度条总，3.点击按钮点加的单位，4.frontmatter 名称,
["抖音",douyin,3,1,"douyin"],
["英雄联盟手游",lolm,3,1,"lolm"]
]

// 表格元素
let rank = (data,i)=>{
	let com = table.createEl('div')
    let title = Data[i][0]
    let plan = com.createEl('span',{'text':Data[i][1]+'/'+Data[i][2]})
    let progress = com.createEl('progress')
    changePro(progress,Data[i][1]/Data[i][2],com)
    progress.value = Data[i][1]
    progress.max = Data[i][2]

    let button = com.createEl('div',)
    let btn_p = button.createEl('button',{'text':'+'})
    let btn_s = button.createEl('button',{'text':'-'})
    btn_p.addEventListener('click',async (evt)=> {
        midifyData(i,'p',Data[i][3],Data[i][4])
        progress.value = Data[i][1]
        changePro(progress,Data[i][1]/Data[i][2],com)
        plan.innerHTML = Data[i][1]+'/'+Data[i][2]
    })
    btn_s.addEventListener('click',async (evt)=> {
        midifyData(i,'s',Data[i][3],Data[i][4])
        progress.value = Data[i][1]
        changePro(progress,Data[i][1]/Data[i][2],com)
        plan.innerHTML = Data[i][1]+'/'+Data[i][2]
    })
    return [title,plan,progress,button]
}

// 表格本体
let table = container.createEl("div");
let headers = ['标题','进度','进度条','修改']
let values = Data.map((p,i)=>rank(p,i))
createTable(headers,values,table)

// 保存按钮
let button_ = container.createEl('div',{'id':'con'})

// 排序
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])
    createTable(
	    headers, 
	    Data.map((p,i)=>rank(p,i)),
	    table)
}

// 其他函数
function createTable(headers,values,t) {
	dv.table(headers,values)
	t.appendChild(container.getElementsByTagName('table')[0])
}
function changePro(progress, p, com) {
	if(p>=0 && p<0.3) progress.className = 'red'
	else if(p>=0.3 && p<0.6) progress.className = 'yellow'
	else if(p>=0.6 && p<1) progress.className = 'green'
	else if(p==1) progress.className = 'ok'

}
// 修改函数
function midifyData(i,m,handle_num,target) {
	// plus
    if(Data[i][1]<Data[i][2] && m=='p'){
        Data[i][1] += handle_num
        // update frontmatter
        app.fileManager.processFrontMatter(active_file, (fm) => {
	        fm[target] = parseInt(Data[i][1]);
	    });
    } 
    // sub
    if(Data[i][1]>0 && m=='s'){
        Data[i][1] -= handle_num
        // update frontmatter
        app.fileManager.processFrontMatter(active_file, (fm) => {
	        fm[target] = parseInt(Data[i][1]);
	    });
    }
}

效果如下：

PlayerMiller · 2023 年12 月 7 日 15:15

lazyloong:

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'
}

佬，你现在还用进度条吗，我搜集了一些进度条样式，只需要用百分数，可以看看，这样就不用费劲指定 CSS 类了。

进度条展示及说明链接：

dvjs 大概类似这个：

let percent = (p.file.frontmatter.行数 / p.file.frontmatter.总行数) * 100
"<progress value='" + percent + "' max='100' class='color' />"

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

你可以把数据放到 frontmatter 操作的话，那就不用 save 了，还不占你的文本，还能跟别的插件结合。下面是我的代码。

tags: title: Dataview frontmatter Button douyin: 2 lolm: 3 date created: 2023年10月26日,星期四,下午 16:05:51 date modified: 2023年10月26日,星期四,下午 17:33:12

tags:
title: Dataview frontmatter Button
douyin: 2
lolm: 3
date created: 2023年10月26日,星期四,下午 16:05:51
date modified: 2023年10月26日,星期四,下午 17:33:12