widgetti / ipyvuetify

Jupyter widgets based on vuetify UI components
MIT License
347 stars 59 forks source link

progress bar with percentage equivalent #230

Closed Alexboiboi closed 2 years ago

Alexboiboi commented 2 years ago

Hi there

Can someone help make the equivalent of

<v-progress-linear
  v-model="skill"
  color="blue-grey"
  height="25"
>
  <template v-slot:default="{ value }">
    <strong>{{ Math.ceil(value) }}%</strong>
  </template>
</v-progress-linear>

Thanks

Alexboiboi commented 2 years ago

Back here to answer myself ^^. There may be a nice solution but this is what I finally came up with ;)

import ipyvuetify as v
from ipywidgets import dlink

class ProgressLinearWithValue(ipv.ProgressLinear):
    def __init__(self, value=0, height=25, color=None, **kwargs):
        val_txt = v.Html(tag="strong")
        super().__init__(
            value=value,
            color=color,
            height=height,
            v_slots=[{"name": "default", "children": val_txt}],
        )
        dlink((self, "value"), (val_txt, "children"), transform=lambda v: [f"{v:.0f}"])

And in use:

import time

prog = ProgressLinearWithValue(color="blue-grey")
display(prog)
for i in range(101):
    time.sleep(1 / 50)
    prog.value = i

vuetify_progress