Polymer 3.0 Custom Element - How to Use javascript to interact with SVG

Question

I am new on Polymer, so I'm learning while developing. Right now I'm using the latest version, Polymer 3.0. I already had a working frontpage on this site I'm working on. While I was trying to make everything work on polymer, I got stuck with making the javascript work.

On the original site, I was using this code

index.html

                <div class="year-overview">

                    <div class="ano-lectivo">
                        <svg class="progress-ring" width="50%" height="50%" opacity="0" viewBox="0 0 42 42">
                            <circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
                            <text x="50%" y="53%" class="circle-text" text-anchor="middle">
                                <tspan class="currentDay">35</tspan>
                                <tspan class="daysLeft">/ 300</tspan>
                                <tspan x="50%" y="60%">Días Lectivos</tspan>
                            </text>
                        </svg>
                    </div>

And this is the javascript file:

        function circleCircus(ringClass, circleClass, ringProgress) {
                var circle = document.querySelector(circleClass);
                var radius = circle.r.baseVal.value;
                var circumference = radius * 2 * Math.PI;
                var circleSVG = document.querySelector(ringClass); //For changing the opacity and not showing the circle before it loads

                circle.style.strokeDasharray = `${circumference} ${circumference}`;
                circle.style.strokeDashoffset = `${circumference}`;

                function setProgress(percent) {
                    const offset = circumference - percent / 100 * circumference;
                    circle.style.strokeDashoffset = offset;
                }

            setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
            setTimeout(function() { setProgress(ringProgress); }, 2000); //Changin the value in order to animate
        }

        //----------------------Progress Bar 1------------------------------------
        circleCircus('.progress-ring', '.progress-ring__circle', 50);

Now that I'm working on Polymer I was creating a custom element for the donut chart, but I don't how to use or where to put the function that makes the strokeDasharray and the strokeDashoffset work correctly:

            import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

            class DonutChart extends PolymerElement {
                static get template() {
                    return html`
                        <style>

                            .progress-ring__circle {
                                stroke-width: 3;
                                stroke: #000;
                                position: relative;
                                transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
                                -webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transform: rotate(-90deg);
                                transform-origin: 50% 50%;
                            }

                            .currentDay {
                                font-size: 40%;
                                overflow: visible;
                                -webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms ease-out;
                            }

                            .daysLeft {
                                font-size: 40%;
                                -webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms, color 500ms;
                            }

                            .description {
                                font-size: 20%;
                            }


                            .circle-text {
                                fill: #000;
                            }

                            .progress-ring {
                                display: block;
                                position: relative;
                                margin-left: auto;
                                margin-right: auto;
                            }

                            svg:hover .currentDay {
                                font-size: 60%;
                            }

                            svg:hover .daysLeft {
                                font-size: 10%;
                            }


                            svg:hover .progress-ring__circle {
                                stroke-width: 1;
                                stroke: #5a64ed;
                            }        

                        </style>

                        <svg class="progress-ring" width="100%" height="100%" viewBox="0 0 42 42">
                            <circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
                            <text x="50%" y="53%" class="circle-text" text-anchor="middle">
                            <tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">35</tspan><tspan class="daysLeft">/300</tspan></tspan>

                                <tspan x="50%" y="60%" class="description">Días Lectivos</tspan>
                            </text>
                        </svg>

                    `;
                }

                constructor() {
                    super();
                }

                    var circle = this.shadowRoot.querySelector('.progress-ring__circle');
                    var radius = circle.r.baseVal.value;
                    var circumference = radiius * 2 * Math.PI;
                    var circleSVG = this.shadowRoot.querySelector('.progress-ring');

                    circle.style.strokeDasharray = `${circumference} ${circumference}`;
                    circle.style.strokeDashoffset = `${circumference}`;

                    function setProgress(percent) {
                        const offset = circumference - percent / 100 * circumference;
                        circle.style.strokeDashoffset = offset;
                    }
                    setProgress(79);



            }

            customElements.define('donut-chart', DonutChart);

Here is my original code and what I'm trying to accomplish in the custom element: https://codepen.io/maganalexis/pen/ePOxYX

Thank you for helping out.

What exactly isn't working? Your code is a bit hard to follow as there's a lot, and clearly something was skipped, or it was truncated.. I am guessing you don't have a var in your class right after the constructor (without having a method for those lines).. is it something about template iterations to render multiple elements inside the svg? Because if so I think there's a known issue about that.. — mishu
Theres is a function in the javascript file to animate the SVG's strokeDasharray and strokeDashoffset. What I don't what to do is use that function in the Polymer custom element. — Alexis Magaña
Please post a minimal example of your problem, or a live example (plunker, jsfiddle). Remember in Polymer, you can react to changes in values using {{...}} notation, and you can observe changes in properties and attributes with event listeners. — Lee Goddard

Alexis Magaña Alexis Magaña · Accepted Answer · 2018-09-28T06:00:46

After reading a lot of documents I found out the solution, I had to call the ready method and put my code under it:

            import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

            class DonutChart extends PolymerElement {
                static get template() {
                    return html`
                        <style>

                            .progress-ring__circle {
                                stroke-width: 3;
                                stroke: #000;
                                position: relative;
                                transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
                                -webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transform: rotate(-90deg);
                                transform-origin: 50% 50%;
                            }

                            .currentDay {
                                font-size: 40%;
                                overflow: visible;
                                -webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms ease-out;
                            }

                            .daysLeft {
                                font-size: 40%;
                                -webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms, color 500ms;
                            }

                            .description {
                                font-size: 20%;
                            }


                            .circle-text {
                                fill: #000;
                            }

                            .progress-ring {
                                display: block;
                                position: relative;
                                margin-left: auto;
                                margin-right: auto;
                            }

                            svg:hover .currentDay {
                                font-size: 60%;
                            }

                            svg:hover .daysLeft {
                                font-size: 10%;
                            }


                            svg:hover .progress-ring__circle {
                                stroke-width: 1;
                                stroke: #5a64ed;
                            }        

                        </style>

                        <svg class="progress-ring" on-load="circleCircus" width="100%" height="100%" viewBox="0 0 42 42">
                            <circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
                            <text x="50%" y="53%" class="circle-text" text-anchor="middle">
                            <tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">[[progressNum]]</tspan><tspan class="daysLeft">[[totalNum]]</tspan></tspan>

                                <tspan x="50%" y="60%" class="description">[[lowDescription]]</tspan>
                            </text>
                        </svg>

                    `;
                }

                static get properties() {
                    return {
                        progressNum: {
                            type: Number
                        },
                        totalNum: {
                            type: String
                        },
                        lowDescription: {
                            type: String
                        }
                    };
                }

                constructor() {
                    super();
                }




                ready(){
                    super.ready();

                    var circle = this.shadowRoot.querySelector('.progress-ring__circle');
                    var radius = circle.r.baseVal.value;
                    var circumference = radius * 2 * Math.PI;
                    var circleSVG = this.shadowRoot.querySelector('.progress-ring'); //For changing the opacity and not showing the circle before it loads
                    var proNum = `${this.progressNum}`;

                    circle.style.strokeDasharray = `${circumference} ${circumference}`;
                    circle.style.strokeDashoffset = `${circumference}`;

                    function setProgress(percent) {
                        const offset = circumference - percent / 100 * circumference;
                        circle.style.strokeDashoffset = offset;
                    }

                    setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
                    setTimeout(function() { setProgress(proNum); }, 2000); //Changin the value in order to animate
                }


            }

            customElements.define('donut-chart', DonutChart);

Polymer 3.0 Custom Element - How to Use javascript to interact with SVG

1 Answers