# Progress circular

**URL:** https://discourse.nodered.org/t/progress-circular/85265
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [6 February 2024 19:36 UTC](https://discourse.nodered.org/t/progress-circular/85265 "2024-02-06T19:36:56Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [6 February 2024 19:36 UTC](https://discourse.nodered.org/t/progress-circular/85265/1 "2024-02-06T19:36:56Z")

</div>

I am playing around with `v-progress-circular` in the template node. I added the below code to the template node and when I inject the percentage as a number in `msg.payload` it updates the progress:  
 ![chrome_Wi5VVOaNIa](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/be9818b6a4c6dfe12559e15792f0ea3e551c4ba7.gif)

Nice, this is the code in template:

```auto
<template>
    <v-progress-circular :rotate="-90" :size="100" :width="15" :model-value="value" color="red">
        {{ value }}%
    </v-progress-circular>
<template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                value: 0
            }
        },
        watch: {
            // watch for any changes of "count"
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
        },
        methods: {
            // expose a method to our <template> and Vue Application
        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>

```

Question 1: I understand that I expose the `value` field in `data` but I don't understand how my payload got mapped to the `value` field?

Question 2: I added a copy of this template to the group, given it a different color, and other properties, and also connected to my function node which increments the value for testing. But when I added the second template, the first stopped working. And when I change the first and deploy, it starts working and the other one stops. Why is that?

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 February 2024 19:46 UTC](https://discourse.nodered.org/t/progress-circular/85265/2 "2024-02-06T19:46:14Z")

</div>

> [@nygma2004](#):
>
> when I added the second template, the first stopped working. And when I change the first and deploy, it starts working and the other one stops. Why is that?

You would need to share a flow that demonstrate this. It is possible it is a bug but just as likely to be a PEBCAK issue

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [6 February 2024 19:49 UTC](https://discourse.nodered.org/t/progress-circular/85265/3 "2024-02-06T19:49:44Z")

</div>

Sure, I added a function to the watch now based on an example I found:

```auto
[{"id":"1c3c50b902f0ce1a","type":"ui-template","z":"0e3249ddee2000e3","group":"15a4ba9c21910ccf","page":"","ui":"","name":"Teal progress ","order":0,"width":"2","height":"2","head":"","format":"<template>\n <v-progress-circular :rotate=\"360\" :size=\"100\" :width=\"15\" :model-value=\"value\" color=\"teal\">\n {{ value }}%\n </v-progress-circular>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n value: 0\n }\n },\n watch: {\n // watch for any changes of \"count\"\n msg: function(){ \n if(this.msg.payload != undefined){\n if(typeof this.msg.payload === \"number\"){ \n value = msg.payload;\n } \n }\n }\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },\n methods: {\n // expose a method to our <template> and Vue Application\n },\n mounted() {\n // code here when the component is first loaded\n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }\n }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":2300,"wires":[[]]},{"id":"7ca0f74e2ea174b2","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"0.25","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":2300,"wires":[["e63f192e812d621c"]]},{"id":"e63f192e812d621c","type":"function","z":"0e3249ddee2000e3","name":"Increase value","func":"let value = context.get(\"value\") ?? 0;\n\nvalue++;\nif (value>100) value=0;\ncontext.set(\"value\", value);\n\nmsg.payload = value;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":2300,"wires":[["1c3c50b902f0ce1a","c824f4b3c425f0ec"]]},{"id":"c824f4b3c425f0ec","type":"ui-template","z":"0e3249ddee2000e3","group":"15a4ba9c21910ccf","page":"","ui":"","name":"Red progress ","order":0,"width":"2","height":"2","head":"","format":"<template>\n <v-progress-circular :rotate=\"-90\" :size=\"100\" :width=\"15\" :model-value=\"value\" color=\"red\">\n {{ value }}%\n </v-progress-circular>\n<template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n value: 0\n }\n },\n watch: {\n // watch for any changes of \"count\"\n msg: function(){ \n if(this.msg.payload != undefined){\n if(typeof this.msg.payload === \"number\"){ \n value = msg.payload;\n } \n }\n }\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },\n methods: {\n // expose a method to our <template> and Vue Application\n },\n mounted() {\n // code here when the component is first loaded\n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }\n }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":2340,"wires":[[]]},{"id":"15a4ba9c21910ccf","type":"ui-group","name":"Progress","page":"f4063f293f6a82bd","width":"6","height":"2","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"f4063f293f6a82bd","type":"ui-page","name":"Testing new design","ui":"cb79bc4520925e32","path":"/designtest","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 February 2024 20:12 UTC](https://discourse.nodered.org/t/progress-circular/85265/4 "2024-02-06T20:12:28Z")

</div>

Sorry I should have said, I'm not in a position to check this out today (but I'm sure someone will pop in and have a look at some point)

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [6 February 2024 20:28 UTC](https://discourse.nodered.org/t/progress-circular/85265/5 "2024-02-06T20:28:30Z")

</div>

It is not urgent, I am just playing with various components. Moved to timeline in the time being 🙂

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [6 February 2024 21:20 UTC](https://discourse.nodered.org/t/progress-circular/85265/6 "2024-02-06T21:20:10Z")

</div>

This works fine for me. Also for copied instances.

```auto
<template>
        <v-progress-circular :rotate="-90" :size="100" :width="15" :model-value="value" color="teal">
            {{value}}
        </v-progress-circular>
</template>

<script>
    export default {
        data() {
            return {               
                value: 0               
            }
        },
        watch: {
            msg: function(){            
                if(this.msg.payload != undefined){                    
                    this.value = this.msg.payload                    
                }
            }
        }
    }
</script>

```

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [6 February 2024 21:51 UTC](https://discourse.nodered.org/t/progress-circular/85265/7 "2024-02-06T21:51:17Z")

</div>

This also works (I believe `this.value` is the cure)

```auto
<template>
    <v-progress-circular :rotate="-90" :size="100" :width="15" :model-value="value" color="green">
        {{ value }}%
    </v-progress-circular>
<template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                value: 0
            }
        },

        watch: {
            // watch for any changes of "count"
            msg: function() {        

    
            }

        },

        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
        },
        methods: {
            // expose a method to our <template> and Vue Application
        },

        mounted() {
            // code here when the component is first loaded
            this.$socket.on("msg-input:" + this.id, (msg) => {
                if (msg.payload !== undefined){
                    if (typeof msg.payload === "number"){                   
                        this.value = msg.payload

                    }
                        
                }

            }
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>

```

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [6 February 2024 23:04 UTC](https://discourse.nodered.org/t/progress-circular/85265/8 "2024-02-06T23:04:26Z")

</div>

Thanks guys. Not sure what the issue was initially, it works for me as well. Definitely after adding `this.value`. Sometimes after I deploy I also need to refresh the browser, but that should be the least of my worries.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [7 March 2024 23:04 UTC](https://discourse.nodered.org/t/progress-circular/85265/9 "2024-03-07T23:04:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.