Data / metric / percentage slider plugin

[ReneVerkaart]

Hi guys,

Is there someone out there that has or knows of a data / metric / percentage slider plugin for Obsidian? Something like this:

I’m working on a Champagne database and this would be a great asset to visualize the taste of a Champagne.

Thanks in advance.
René

[mnvwvnm]

I can suggest the use of the progress bar with dataview.

But it depends on your goal (if a visual thing in each “champagne” page, if as a global output for multiple pages, etc).

I’m not versed in js… that’s why my next suggestions are very limited and perhaps with a bad code. But here they are.

---

ChampOne

#champagne

(scale of values from 1 to 10)

dry:: 5
body:: 2
tannin:: 3
acidity:: 8

ChampTwo

#champagne 

(scale of values from 1 to 10)

dry:: 4
body:: 6
tannin:: 4
acidity:: 5

---

Query in each page

let page = dv.current()

let dry = page.dry
let body = page.body
let tannin = page.tannin
let acidity = page.acidity

let sp1 = "<span style='width:50px;display:inline-block;font-size:9pt;'>"
let sp2 = "</span>"

const dryBar = (sp1 + "dry" + sp2) + `<progress value="${dry}" max="10"></progress>`
const bodyBar = (sp1 + "body" + sp2) + `<progress value="${body}" max="10"></progress>`
const tanninBar = (sp1 + "tannin" + sp2) + `<progress value="${tannin}" max="10"></progress>`
const acidityBar = (sp1 + "acidity" + sp2) + `<progress value="${acidity}" max="10"></progress>`

dv.paragraph(dryBar);
dv.paragraph(bodyBar);
dv.paragraph(tanninBar);
dv.paragraph(acidityBar);

---

Query to list all pages with the tag “#champagne”

const pages = dv.pages('#champagne')

let sp1 = "<span style='width:50px;display:inline-block;font-size:9pt;'>"
let sp2 = "</span>"

for (let page of pages){
	let dry = page.dry
	let body = page.body
	let tannin = page.tannin
	let acidity = page.acidity

	const dryBar = (sp1 + "dry" + sp2) + `<progress value="${dry}" max="10"></progress>`
	const bodyBar = (sp1 + "body" + sp2) + `<progress value="${body}" max="10"></progress>`
	const tanninBar = (sp1 + "tannin" + sp2) + `<progress value="${tannin}" max="10"></progress>`
	const acidityBar = (sp1 + "acidity" + sp2) + `<progress value="${acidity}" max="10"></progress>`
	
	dv.span(page.file.link);
	dv.paragraph(dryBar);
	dv.paragraph(bodyBar);
	dv.paragraph(tanninBar);
	dv.paragraph(acidityBar);
	dv.paragraph("&nbsp;");
}

[ReneVerkaart]

Thx @mnvwvnm
This progress bar is a bit different, but I can give it a try.
I’m for sure even less versed in js, so please give me some more tips, if you can.
The 4 parameters (dry, body, tannin, acidity) go in the YAML, right?
But where does the query go? I can’t also put it in the query, because that spits out an invalid YAML.

[AlanG]

Might I suggest something more low tech. Rather than using HTML or other code which won’t render correctly in any other Markdown editor or in the plain text original file, you could simple use emojis:

This way it’s portable wherever you want to take the data, and far into the future.

There are plenty of options for colors and styles so you can find something that you personally like.

[ReneVerkaart]

Oi, that’s fantastic! I don’t have any plans for querying this data any other way. I just want it as an indication on the page itself. So this solution is very good.

PS: I like low tech very much.

[Twita]

silly question - where did you get that emoji ?

[ReneVerkaart]

On Mac it’s available in under Emoji & Symbols:

CTR + CMD + spacebar

[AlanG]

And on Windows it’s Win key + period. You can also look them up on a site like GetEmoji

[mnvwvnm]

Because you mention a “database” I thought the intention was to build a kind of comparison.
If to place only as visual thing in each page, than the @AlanG suggestion seems good.
The suggestion of fields with numbers is also related with the edit flexibility: it’s more easy to edit a number that other thing. But if in your case the values are static (as placed in first edition), then this isn’t an issue.

About your questions, you can place the fields in yaml frontmatter (but in the case don’t use the double “::” but only one “:” (double “::” is related with fields in the content, inline fields for dataview).
The query should be placed not in frontmatter but in the content inside a code block with “```dataviewjs” at the top.

EDIT:

With the suggested fields in frontmatter, you can also use this in the content (a markdown table with some inline queries inside):

| **taste** | **level** |
| --- | --- |
| **dry** | `="<progress value=" + this.dry + " max='10'></progress>"` |
| **body** | `="<progress value=" + this.body + " max='10'></progress>"` |
| **tannin** | `="<progress value=" + this.tannin + " max='10'></progress>"` |
| **acidity** | `="<progress value=" + this.acidity + " max='10'></progress>"` |